:root{
  /* Light theme (Drippity-inspired teal palette). Token NAMES kept as-is for
     backward compatibility with the rest of this file (--black is the page
     background, --white is the primary text color, --cyan is the primary
     accent) — only the VALUES point at the new teal system. */
  --black:#F7FAFA;
  --bg-alt:#EAF3F5;
  --card:#FFFFFF;
  --card-border:rgba(30,45,48,.1);
  --cyan:#5594A3;
  --cyan-dark:#3F7684;
  --cyan-bright:#6FC1D1;
  --cyan-dim:rgba(85,148,163,.1);
  --white:#1E2D30;
  --dim:rgba(30,45,48,.65);
  --dim2:rgba(30,45,48,.42);
  --on-accent:#FFFFFF;
  --radius-card:18px;
  --radius-btn:999px;
  --maxw:1200px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
}

*{box-sizing:border-box;margin:0;padding:0;}
picture{display:contents;}
html{scroll-behavior:smooth;}
section[id], #help, #process, #testimonials, #faq, #book{
  scroll-margin-top:110px;
}
@media(min-width:769px) and (max-width:1100px){
  section[id], #help, #process, #testimonials, #faq, #book{
    scroll-margin-top:140px;
  }
}
@media(min-width:601px) and (max-width:768px){
  section[id], #help, #process, #testimonials, #faq, #book{
    scroll-margin-top:120px;
  }
}
@media(max-width:600px){
  section[id], #help, #process, #testimonials, #faq, #book{
    scroll-margin-top:90px;
  }
}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
body::before{
  display:none;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font);}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(18px,4vw,48px);
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- FOCUS VISIBILITY ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- TYPOGRAPHY ---------- */
.eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--cyan);
  text-align:center;
  margin:0 0 14px;
}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;letter-spacing:-.02em;}
h2{font-size:clamp(26px,3.8vw,42px);line-height:1.15;text-align:center;}
h3{font-size:clamp(18px,2vw,22px);line-height:1.2;letter-spacing:-.01em;}
.mega-promo-title{font-size:clamp(18px,2vw,22px);line-height:1.2;letter-spacing:-.01em;font-family:var(--font);font-weight:700;display:block;}
p{color:var(--dim);line-height:1.65;}

.section-pad{padding:clamp(40px,5vw,64px) 0;}
.section-head{max-width:720px;margin:0 auto;text-align:center;}
.section-head h2{margin-top:0;}
.center-btn{text-align:center;margin-top:28px;margin-bottom:0;}

/* ---------- SCROLL-REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- BACK TO TOP ---------- */
#backToTop{
  position:fixed;
  right:22px;
  bottom:22px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--card);
  border:1px solid var(--card-border);
  color:var(--cyan);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s ease, border-color .2s ease;
  z-index:900;
}
#backToTop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
#backToTop.show{opacity:1;visibility:visible;transform:translateY(0);}
#backToTop:hover{background:var(--cyan-dim);border-color:var(--cyan);transform:translateY(-3px);}
@media (max-width:640px){
  #backToTop{right:14px;bottom:14px;width:42px;height:42px;}
}
@media (prefers-reduced-motion: reduce){
  #backToTop{transition:opacity .2s linear, visibility .2s;}
  #backToTop:hover{transform:none;}
}

/* ---------- FOOTER EMAIL SUBMIT FEEDBACK ---------- */
#footerEmailSubmit{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
#footerEmailSubmit .fe-label{transition:opacity .15s ease;}
#footerEmailSubmit.is-loading .fe-label,
#footerEmailSubmit.is-success .fe-label{opacity:0;}
#footerEmailSubmit .fe-spinner,
#footerEmailSubmit .fe-check{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .15s ease;
}
#footerEmailSubmit .fe-spinner{
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
}
#footerEmailSubmit.is-loading .fe-spinner{
  opacity:1;
  animation:fe-spin .6s linear infinite;
}
#footerEmailSubmit .fe-check{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
#footerEmailSubmit.is-success .fe-check{opacity:1;}
#footerEmailSubmit.is-success{background:var(--cyan);color:var(--on-accent);}
@keyframes fe-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  #footerEmailSubmit.is-loading .fe-spinner{animation:none;}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font);
  font-weight:600;
  font-size:16px;
  letter-spacing:-.01em;
  padding:18px 40px;
  border-radius:var(--radius-btn);
  border:1.5px solid var(--cyan);
  background:var(--cyan);
  color:var(--on-accent);
  cursor:pointer;
  transition:background .2s var(--ease);
  white-space:nowrap;
  position:relative;
}
.btn:hover{
  background:var(--cyan-dark);
}

.btn.btn-ghost{
  background:var(--black);
  border:1.5px solid var(--cyan);
  color:var(--cyan);
}
.btn.btn-ghost:hover{
  background:var(--cyan-dim);
}

.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- GLOW (disabled) ---------- */
.glow{
  display:none;
}

/* ---------- HEADER (floating glass pill) ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  pointer-events:none;
  padding:16px 20px 0;
}
.nav-wrap{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.85);
  border-radius:999px;
  border:1px solid rgba(30,45,48,.08);
  height:68px;
  padding:0 12px 0 26px;
  box-shadow:0 12px 36px rgba(30,45,48,.12);
  pointer-events:all;
  gap:24px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
}
.nav-wrap.is-scrolled{
  height:60px;
  background:rgba(255,255,255,.97);
  border-color:rgba(30,45,48,.1);
  box-shadow:0 16px 44px rgba(30,45,48,.16);
}
.logo{
  font-weight:700;font-size:18px;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;
  color:var(--white);white-space:nowrap;flex-shrink:0;
}
.logo span{color:rgba(30,45,48,.5);font-weight:400;}

/* Animated logo: icon mark + wordmark, pulse on hover, breathing glow idle */
.logo-icon{position:relative;display:inline-flex;width:26px;height:21px;flex-shrink:0;}
.logo-icon svg{position:relative;z-index:1;display:block;}
.logo-bar{fill:var(--cyan);transform-origin:center;}
.logo-glow{
  display:none;
}
.logo-word{font-weight:800;font-size:16px;letter-spacing:1.5px;color:var(--white);}
.logo:hover .logo-bar-1{animation:logoPulse .45s ease;}
.logo:hover .logo-bar-2{animation:logoPulse .45s ease .08s;}
.logo:hover .logo-bar-3{animation:logoPulse .45s ease .16s;}
@keyframes logoPulse{
  0%{filter:brightness(1);transform:scaleY(1);}
  30%{filter:brightness(1.7);transform:scaleY(1.14);}
  100%{filter:brightness(1);transform:scaleY(1);}
}
@media(prefers-reduced-motion:reduce){
  .logo-glow{animation:none;opacity:.4;}
  .logo:hover .logo-bar-1,.logo:hover .logo-bar-2,.logo:hover .logo-bar-3{animation:none;}
}
nav{flex:1;display:flex;min-width:0;justify-content:center;}
nav ul{display:flex;align-items:center;gap:2px;list-style:none;flex-wrap:nowrap;min-width:0;}
nav ul li{flex-shrink:0;}
nav a{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:500;
  color:rgba(30,45,48,.78);
  background:none;
  border:none;
  padding:9px 16px;border-radius:999px;
  white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease);
}
nav a:hover,nav a:focus-visible{background:rgba(85,148,163,.08);color:var(--white);}
nav a.active{color:var(--cyan);font-weight:600;background:rgba(85,148,163,.14);}
/* Services trigger is a <button>, not an <a>, so it needs the same
   scroll-highlight treatment explicitly — otherwise it never matches
   the "nav a.active" pill style above when its section is in view. */
.nav-mega-trigger{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font);font-size:14.5px;font-weight:500;
  color:rgba(30,45,48,.78);
  padding:9px 16px;border-radius:999px;
  background:none;border:none;cursor:pointer;
  white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-mega-trigger:hover,.nav-mega-trigger.is-active{background:rgba(85,148,163,.08);color:var(--white);}
.nav-mega-trigger.active{color:var(--cyan);font-weight:600;background:rgba(85,148,163,.14);}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.btn-small{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;font-size:15px;font-weight:600;
}
.burger{
  display:none;align-items:center;justify-content:center;
  cursor:pointer;background:rgba(85,148,163,.1);
  border:1px solid rgba(30,45,48,.1);border-radius:50%;
  width:40px;height:40px;padding:0;
  color:var(--white);
  transition:background .2s ease;
}
.burger:hover{background:rgba(85,148,163,.18);}
.burger svg{width:20px;height:20px;}
.burger .burger-line{transition:transform .25s cubic-bezier(.77,0,.175,1);}

/* ---------- MOBILE NAV ---------- */
.mobile-nav{
  position:fixed;inset:0;
  background:#FFFFFF;
  z-index:200;
  display:flex;flex-direction:column;
  transform:translateY(-100%);transition:transform .4s var(--ease);
  visibility:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-nav.open{transform:translateY(0);visibility:visible;}

/* top bar: logo + close */
.mnav-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  flex-shrink:0;
}
.mnav-logo{font-family:var(--font);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--white);display:flex;align-items:center;gap:9px;}
.mobile-nav .close-btn{
  background:rgba(85,148,163,.08);border:1px solid rgba(30,45,48,.1);
  color:var(--white);font-size:18px;cursor:pointer;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  line-height:1;flex-shrink:0;
  transition:background .15s, transform .15s;
}
.mobile-nav .close-btn:hover{background:rgba(85,148,163,.16);transform:rotate(90deg);}

/* "ready to chat" row */
.mnav-cta-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 20px 18px;
  flex-shrink:0;
}
.mnav-cta-text{font-family:var(--font);font-size:17px;color:var(--white);}
.mnav-cta-text em{color:var(--dim);font-style:italic;font-weight:400;}
.mnav-cta-btn{
  display:inline-flex;align-items:center;
  font-family:var(--font);font-weight:600;font-size:14px;
  color:var(--white);
  padding:10px 20px;border-radius:999px;
  border:1.5px solid var(--cyan);
  background:transparent;
  white-space:nowrap;
  transition:background .15s, color .15s;
}
.mnav-cta-btn:hover{background:var(--cyan);color:var(--on-accent);}

/* divider */
.mnav-divider{height:1px;background:rgba(30,45,48,.09);margin:0 20px;flex-shrink:0;}

/* service cards stack */
.mnav-services{
  display:flex;flex-direction:column;gap:14px;
  padding:18px 20px 8px;
}
.mnav-svc-card{
  position:relative;
  display:flex;align-items:flex-end;
  width:100%;height:152px;
  border-radius:18px;
  overflow:hidden;
  background:var(--bg-alt);
  border:1px solid rgba(30,45,48,.08);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:0;
  font:inherit;
  text-align:left;
  text-decoration:none;
  color:inherit;
  transition:transform .15s var(--ease);
}
.mnav-svc-card:active{transform:scale(.98);}
.mnav-svc-card-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  color:transparent; /* hides alt text if the image fails to load */
  font-size:0;
  text-indent:-9999px;
}
.mnav-svc-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
  transition:background .2s;
  z-index:1;
}
.mnav-svc-card:active::before{background:linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.88) 100%);}
.mnav-svc-card-label{
  position:relative;z-index:2;
  padding:16px 18px;
  font-family:var(--font);font-weight:700;font-size:18px;letter-spacing:-.01em;
  color:#fff;line-height:1.15;
}
.mnav-svc-card-label em{display:block;font-style:italic;font-weight:400;color:rgba(255,255,255,.82);font-size:15px;}

/* simple link rows */
.mnav-links{
  display:flex;flex-direction:column;
  padding:14px 20px 8px;
  flex-shrink:0;
}
.mnav-link-row{
  display:flex;align-items:center;gap:10px;
  padding:14px 0;
  font-family:var(--font);font-weight:600;font-size:19px;letter-spacing:-.01em;
  color:var(--white);
  border-bottom:1px solid rgba(30,45,48,.08);
}
.mnav-link-row:last-child{border-bottom:none;}
.mnav-link-row .mnav-arrow{
  width:16px;height:16px;stroke:rgba(30,45,48,.55);fill:none;stroke-width:2.4;
  flex-shrink:0;
}

/* footer mark */
.mnav-foot{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:26px 20px 34px;
  flex-shrink:0;
}
.mnav-foot-text{font-family:var(--font);font-size:15px;font-weight:600;color:var(--white);line-height:1.3;}
.mnav-foot-text em{font-style:italic;font-weight:400;color:var(--dim);}
.mnav-foot-mark{
  width:34px;height:34px;border-radius:8px;
  background:var(--cyan);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  padding:7px;
}
.mnav-foot-mark svg{width:100%;height:auto;display:block;}

/* ---------- SERVICES MEGA MENU ---------- */
.nav-mega-trigger .chevron-badge{
  width:14px;height:14px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .25s var(--ease);
}
.nav-mega-trigger .chevron{
  width:12px;height:12px;stroke:rgba(30,45,48,.55);fill:none;stroke-width:2.2;
}
.nav-mega-trigger.is-active .chevron-badge{transform:rotate(180deg);}

.services-mega{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(1280px, calc(100vw - 32px));
  opacity:0;visibility:hidden;pointer-events:none;
  z-index:101;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.services-mega.is-open{
  opacity:1;visibility:visible;pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.services-mega-inner{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(30,45,48,.08);
  border-radius:24px;
  padding:18px;
  display:grid;grid-template-columns:1.6fr 1fr;gap:16px;
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:0 24px 60px rgba(30,45,48,.18);
}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.mega-card{
  position:relative;overflow:hidden;
  border-radius:16px;padding:20px 18px;
  min-height:178px;display:flex;flex-direction:column;justify-content:flex-start;
  border:1px solid rgba(30,45,48,.08);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
  background-size:cover;background-position:center;
}
.mega-card:hover{transform:translateY(-3px);border-color:rgba(30,45,48,.18);}
.mega-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.mega-icon{
  position:relative;z-index:1;
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.mega-icon svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.8;}
.mega-card-title{
  position:relative;z-index:1;
  font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.25;
  margin-top:12px;
}
.mega-card-title em{display:block;font-style:italic;font-weight:500;color:rgba(255,255,255,.85);}
.mega-promo{
  border-radius:16px;padding:22px 20px;
  background:var(--bg-alt);
  border:1px solid rgba(85,148,163,.18);
  display:flex;flex-direction:column;justify-content:space-between;
}
.mega-promo-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;
}
.mega-promo-title{font-size:22px;line-height:1.22;color:var(--white);margin:0;font-weight:700;letter-spacing:-.01em;}
.mega-promo-title em{font-style:italic;font-weight:500;color:rgba(30,45,48,.8);}
.mega-promo-sub{font-size:13px;color:rgba(30,45,48,.55);margin:12px 0 18px;line-height:1.55;}
.mega-promo-btn{padding:11px 22px;font-size:13.5px;align-self:flex-start;animation:none;}

@media(max-width:1180px){
  .mega-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:980px){
  .services-mega{display:none;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:0;
  text-align:center;
  overflow:hidden;
  /* one continuous wash for the whole section (hero content + trusted-strip
     + portfolio strip below it) instead of two separately-computed
     gradients that met at a visible seam where .hero-photo-wrap used to
     end — see .hero-photo-wrap, now just background:transparent */
  background:
    radial-gradient(30% 34% at 0% 9%, rgba(111,193,209,.45) 0%, transparent 75%),
    radial-gradient(26% 30% at 35% 0%, rgba(85,148,163,.4) 0%, transparent 75%),
    radial-gradient(30% 34% at 72% 6%, rgba(85,148,163,.28) 0%, transparent 75%),
    radial-gradient(28% 32% at 100% 13%, rgba(111,193,209,.32) 0%, transparent 75%),
    var(--black);
}

@media (prefers-reduced-motion: reduce){
  
}
.hero .glow{display:none;}

/* ===== Single full-width photo/GIF hero (desktop / tablet) ===== */
.hero-photo-wrap{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(440px,52vw,580px);
  padding:clamp(100px,10vw,125px) clamp(20px,4vw,32px) clamp(32px,4vw,48px);
  /* background now lives on the outer .hero section (one continuous wash
     spanning this + trusted-strip + the portfolio strip below), so there's
     no second gradient here to create a seam at this element's own edges */
  background:transparent;
}
.hero-photo-wrap::before{
  display:none;
}
/* the starfield/nebula speck layer was part of the old dark "night sky" hero
   and doesn't translate to a light theme, so it's turned off here rather
   than recolored — content:none suppresses the pseudo-element entirely */
.hero-photo-wrap::after{
  content:none;
}
.hero-photo-single{
  /* hero now runs on .hero-photo-wrap's own gradient (soft teal washes,
     Drippity-style) instead of a photo — hidden rather than removed from
     the markup, so dropping a new image back in still works if wanted later */
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .hero-photo-single{animation:none;}
}
.hero-photo-overlay{
  /* was a legibility scrim for the old photo hero; no longer needed now that
     the background is a flat gradient (see .hero-photo-wrap) */
  display:none;
}

.hero-inner{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:0 clamp(18px,4vw,32px);}
.hero h1{
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:800;
  color:var(--white);
  text-shadow:0 2px 20px rgba(255,255,255,.7);
}
.hero p.sub{
  max-width:520px;margin:22px auto 0;
  font-size:clamp(15px,1.6vw,17px);
  color:rgba(30,45,48,.78);
  line-height:1.6;
}
.hero .btn-row{margin-top:30px;}

/* Partner badges under the CTA */
.hero-partner-badges{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:26px;flex-wrap:wrap;
}
.hero-badge{
  display:inline-flex;align-items:center;
}
.hero-badge-logo{height:32px;width:auto;display:block;flex:none;}

/* ===== Trusted-by logo strip ===== */
.trusted-strip{
  position:relative;z-index:2;
  background:transparent; /* sits within .hero's own light gradient */
  padding:clamp(30px,4vw,42px) 0 clamp(34px,4.6vw,46px);
  text-align:center;
}
.trusted-label{
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(30,45,48,.5);margin-bottom:24px;
}
.trusted-strip .marquee{max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
}
.trusted-strip .marquee .track{align-items:center;justify-content:center;gap:0;flex-wrap:wrap;animation:none;}
.trusted-chip{
  display:flex;align-items:center;justify-content:center;
  height:60px;padding:0 30px;flex-shrink:0;
}
.trusted-chip img{height:44px;width:auto;max-width:180px;object-fit:contain;display:block;}
.tc-1{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-style:italic;font-size:27px;letter-spacing:-.01em;color:var(--white);}
.tc-2{display:flex;align-items:center;gap:9px;}
.tc-2-mark{width:30px;height:30px;border:2px solid var(--white);border-radius:2px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--white);letter-spacing:-.02em;}
.tc-2-text{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:12.5px;line-height:1.15;letter-spacing:.005em;color:var(--white);text-align:left;}
.tc-3{font-family:'Playfair Display',serif;font-weight:600;font-size:19px;letter-spacing:.12em;color:var(--white);}
.tc-4{font-family:var(--font);font-weight:800;font-size:20px;letter-spacing:.14em;color:var(--white);}
.tc-5{display:flex;flex-direction:column;align-items:center;line-height:1.1;}
.tc-5-name{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:18px;color:var(--white);}
.tc-5-sub{font-family:var(--font);font-weight:600;font-size:7.5px;letter-spacing:.24em;color:var(--white);margin-top:2px;}
.tc-6{font-family:var(--font);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--white);}
.tc-6 sup{font-size:9px;}
.tc-7{display:flex;flex-direction:column;align-items:center;line-height:1;}
.tc-7-name{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:23px;color:var(--white);}
.tc-7-sub{font-family:var(--font);font-weight:700;font-size:7.5px;letter-spacing:.28em;color:var(--white);margin-top:1px;}

@media(max-width:980px){
  .hero-photo-wrap{min-height:clamp(400px,60vw,480px);}
}

/* ============================================================
   MOBILE HERO — Defiant-style layout
   ============================================================ */
.hm-hero{display:none;}

@media(max-width:680px){

  /* reduce hero top padding so content fills viewport like Defiant */
  .hero{
    padding:0 0 clamp(28px,5vw,40px);
  }

  /* Desktop/tablet photo-collage hero + trusted strip are swapped out for
     the dedicated mobile hero below (.hm-hero already has its own marquee) */
  .hero-photo-wrap,
  .trusted-strip{display:none;}

  .hm-hero{display:block;position:relative;z-index:2;text-align:center;padding:clamp(90px,18vw,115px) clamp(16px,5vw,28px) 0;}

  /* same heading style/text as the desktop hero h1 (inline styles on the
     element itself) — this just adds the mobile entrance animation */
  .hm-heading{
    animation:hm-fade-up .8s var(--ease) both;
  }

  /* orbit wrapper — badge + glow only, no clipping */
  .hm-orbit{
    position:relative;
    width:100%;
    margin:clamp(18px,5vw,28px) auto 0;
    height:clamp(160px,46vw,220px);
    overflow:visible;
    background:transparent;
    animation:hm-fade-up .9s var(--ease) .16s both;
  }

  /* marquee row — independent block below badge, nothing clips it. Used to
     sit with a negative top margin tucking under the badge, tuned for a
     single-row scrolling strip; now that it's a static row that can wrap
     to 2 lines on narrow phones (5 logos, no longer scrolling), that same
     overlap made it look cramped against the badge — normal positive
     spacing below it instead. */
  .hm-marquee-wrap{
    position:relative;
    width:100%;
    margin:clamp(-27px,3vw,-19px) auto 0;
    overflow:visible;
  }

  /* ── glow bloom behind badge (disabled) ── */
  .hm-glow{
    display:none;
  }

  /* ── L. badge — large squircle ── */
  .hm-badge{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:clamp(130px,38vw,175px);
    height:clamp(130px,38vw,175px);
    border-radius:26%;
    background:linear-gradient(160deg,var(--cyan) 0%,var(--cyan-dark) 100%);
    display:flex;align-items:center;justify-content:center;
    z-index:2;
    flex-shrink:0;
    pointer-events:none;
  }
  .hm-badge-mark{
    width:clamp(64px,18vw,100px);
    height:auto;
    display:block;
    flex-shrink:0;
  }

  /* scrolling marquee track — back to moving, with the 5 real logos
     duplicated once (see HTML) so the loop is seamless */
  .hm-marquee-track{
    display:flex;
    align-items:center;
    gap:clamp(8px,2vw,12px);
    width:max-content;
    animation:hm-slide 38s linear infinite;
    pointer-events:none;
  }
  @keyframes hm-slide{
    from{transform:translateY(-50%) translateX(0);}
    to{transform:translateY(-50%) translateX(-50%);}
  }
  @media(prefers-reduced-motion:reduce){
    .hm-marquee-track{animation:none;}
    .hm-badge{animation:none;box-shadow:none;}
    .hm-glow{animation:none;}
    .hm-cta{transition:none;}
  }

  /* ── marquee cards — minimal glass, mostly transparent ── */
  .hm-mcard{
    position:relative;
    flex-shrink:0;
    width:100px;
    height:58px;
    border-radius:18px;
    background:rgba(85,148,163,.06);
    backdrop-filter:blur(6px) saturate(120%);
    -webkit-backdrop-filter:blur(6px) saturate(120%);
    border:1px solid rgba(30,45,48,.14);
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
  }
  .hm-mcard img{
    max-width:100%;
    max-height:32px;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
  }

  .hm-fade-l,
  .hm-fade-r{ display:none; }

  /* ── CTA pill — full width, large, like Defiant ── */
  .hm-cta{
    display:flex;align-items:center;justify-content:center;gap:12px;
    margin:clamp(24px,6vw,36px) auto 0;
    padding:clamp(14px,4vw,20px) clamp(32px,7vw,48px);
    width:fit-content;
    max-width:100%;
    border-radius:999px;
    background:var(--cyan);
    border:none;
    font-weight:800;
    font-size:clamp(15px,4.5vw,19px);
    letter-spacing:-.01em;
    color:var(--on-accent);
    box-sizing:border-box;
    animation:hm-fade-up .8s var(--ease) .3s both;
    transition:background .15s ease;
  }
  .hm-cta:hover{background:var(--cyan-dark);}
  .hm-cta-arrow{
    width:clamp(28px,7.5vw,36px);
    height:clamp(28px,7.5vw,36px);
    border-radius:50%;
    background:var(--on-accent);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .hm-cta:hover .hm-cta-arrow{transform:translateX(3px);}
  .hm-cta-arrow svg{
    width:clamp(12px,3vw,15px);
    height:clamp(12px,3vw,15px);
  }

  @keyframes hm-fade-up{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
  }


}

/* marquee strip */

.marquee{display:flex;overflow:hidden;width:100%;}
.marquee .track{display:flex;gap:12px;flex-shrink:0;animation:scroll-left 130s linear infinite;}
.marquee.reverse .track{animation:scroll-right 140s linear infinite;}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes scroll-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media (prefers-reduced-motion: reduce){
  .marquee .track{animation:none;}
}

/* static, manually-scrollable portfolio strip (replaces the old auto-marquee) —
   constrained to the site's normal content width (matching .container)
   instead of running full-bleed edge-to-edge. No edge fade-mask, so cards
   are sized (see .iphone-mock) to sit fully in view with no cropped edge. */
.ad-strip-outer{
  max-width:var(--maxw);
  margin:0 auto;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ad-strip-outer::-webkit-scrollbar{display:none;}
.ad-strip-track{display:flex;gap:12px;padding:12px 4px 28px;}

/* ============================================================
   Phone email mockup — inline SVG frame, exact shape from the supplied
   mockup asset (plain rounded dark body + its own baked-in soft ambient
   drop shadow filter, no notch/buttons). .iphone-mock is the reusable
   wrapper, sized by iphoneMockMarkup() in script.js. The email screenshot
   lives inside the SVG's <foreignObject> as a plain HTML <img> —
   .iphone-screen's overflow:hidden + border-radius clips it to the
   screen's rounded corners.

   Reveal is universal — one interaction model on every device, no
   hover/touch branching: script.js toggles .is-scrolling on click, tap, or
   Enter/Space, and also auto-plays it via IntersectionObserver while the
   card is in view (until the user manually toggles it, which hands control
   to them from then on). --ad-scroll-dist (measured in script.js) and
   --iphone-dur (the per-instance duration) drive the actual distance/speed. */
.iphone-mock{
  --iphone-dur:8s;
  --ad-scroll-dist:0px;
  width:clamp(200px,calc((100% - 36px)/4),340px); /* exactly 4 full cards fit the row, no cropped edge card */
  aspect-ratio:320/631;
  flex-shrink:0;
  position:relative;
  cursor:pointer;
}
.iphone-mock:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:8px;}
.iphone-frame{width:100%;height:100%;display:block;}

.iphone-screen{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  border-radius:11.56%/5.26%; /* ≈30px corner radius against the 259.575×570.213 screen */
}
/* the screenshot fills the screen width; cards whose image isn't taller
   than the screen get --ad-scroll-dist:0, so toggling .is-scrolling never
   actually moves them. Two different transition speeds share one property:
   the base rule (quick, .3s) governs the RETURN trip once .is-scrolling is
   removed; the .is-scrolling rule's own transition (the full --iphone-dur)
   governs the reveal — CSS uses whichever rule is active at the moment
   each transition starts, so entering is a slow scroll and leaving is a
   quick snap back instead of an equally slow reverse scroll. */
.iphone-email-img{
  width:100%;
  height:auto;
  display:block;
  color:transparent; /* hides alt text if the image fails to load */
  font-size:0;
  text-indent:-9999px;
  transform:translateY(0);
  transition:transform .3s ease;
}
.iphone-mock.is-scrolling .iphone-email-img{
  transform:translateY(var(--ad-scroll-dist));
  transition:transform var(--iphone-dur) ease-in-out;
}

/* staggered fade/slide-up entrance, played once as the strip is built —
   #adTrack1 gets .is-revealed shortly after script.js populates the cards */
#adTrack1 .iphone-mock{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
#adTrack1.is-revealed .iphone-mock{opacity:1;transform:translateY(0);}
#adTrack1.is-revealed .iphone-mock:nth-child(1){transition-delay:0s;}
#adTrack1.is-revealed .iphone-mock:nth-child(2){transition-delay:.06s;}
#adTrack1.is-revealed .iphone-mock:nth-child(3){transition-delay:.12s;}
#adTrack1.is-revealed .iphone-mock:nth-child(4){transition-delay:.18s;}
#adTrack1.is-revealed .iphone-mock:nth-child(5){transition-delay:.24s;}
#adTrack1.is-revealed .iphone-mock:nth-child(6){transition-delay:.3s;}
#adTrack1.is-revealed .iphone-mock:nth-child(7){transition-delay:.36s;}
#adTrack1.is-revealed .iphone-mock:nth-child(8){transition-delay:.42s;}
#adTrack1.is-revealed .iphone-mock:nth-child(9){transition-delay:.48s;}

@media (prefers-reduced-motion: reduce){
  .iphone-email-img{transition:none;}
  #adTrack1 .iphone-mock{opacity:1;transform:none;transition:none;}
}

/* ---------- HOW WE HELP ---------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:32px;
}
.feature{
  padding:24px;border-radius:var(--radius-card);
  background:rgba(30,45,48,.025);
  border:1px solid var(--card-border);
  backdrop-filter:blur(10px);
  text-align:left;display:flex;gap:18px;
  transition:border-color .25s, transform .25s, background .25s;
}
.feature:hover{border-color:rgba(85,148,163,.22);transform:translateY(-3px) scale(1.01);background:rgba(30,45,48,.04);}
.feature .icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  background:var(--cyan-dim);
  border:1px solid rgba(85,148,163,.2);
  display:flex;align-items:center;justify-content:center;
}
.feature .icon svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:1.8;}
.feature h3{margin-bottom:8px;font-size:17px;}
.feature p{font-size:14px;line-height:1.6;}
.feature-dots{display:none;}

/* ---------- CONTENT CAROUSEL ---------- */

/* Placeholder state — shown until a real video ID is added (see script.js) */
.yt-thumb-placeholder{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.yt-thumb-icon{
  width:34px;height:34px;fill:none;stroke:rgba(255,255,255,.18);
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
}
.vt-card.is-placeholder{cursor:default;}
.vt-card.is-placeholder .vt-play{opacity:.55;}
.vt-card.is-placeholder:hover{transform:none;border-color:var(--card-border);}
.vt-card.is-placeholder:hover .vt-play{background:none;border-color:rgba(255,255,255,.5);}

/* ---------- TESTIMONIALS HEADER ---------- */
.tst-eyebrow{
  display:flex;align-items:center;gap:10px;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--dim);margin:0 0 18px;text-align:center;
}
.tst-heading{
  margin:0 0 32px;
}
.tst-accent{color:var(--cyan);}




/* ---------- VIDEO TESTIMONIALS ---------- */
.vt-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  align-items:start;
}
.vt-item{display:flex;flex-direction:column;}
.vt-card{
  position:relative;overflow:hidden;
  border-radius:22px;
  aspect-ratio:3/4;
  background:#111;
  border:1px solid var(--card-border);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.vt-card:hover{transform:translateY(-4px);box-shadow:none;border-color:rgba(85,148,163,.3);}
.vt-card img.yt-thumb{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .3s var(--ease), opacity .2s ease;
}
.vt-card:hover img.yt-thumb{transform:scale(1.05);}
.vt-card .yt-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.1);
  transition:opacity .2s ease;
}
.vt-play{
  position:relative;z-index:2;
  width:52px;height:52px;border-radius:50%;
  background:rgba(10,10,10,.55);
  border:1.5px solid rgba(30,45,48,.5);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .2s, opacity .2s ease;
  flex-shrink:0;
}
.vt-card:hover .vt-play{background:var(--cyan);border-color:var(--cyan);}
.vt-play svg{width:18px;height:18px;fill:#fff;margin-left:2px;transition:fill .2s;}
.vt-card:hover .vt-play svg{fill:var(--on-accent);}

/* Inline playback state — video replaces the thumbnail inside the same card */
.vt-card.is-playing{cursor:default;}
.vt-card.is-playing:hover{transform:none;border-color:var(--card-border);}
.vt-card.is-playing img.yt-thumb,
.vt-card.is-playing .yt-overlay,
.vt-card.is-playing .vt-play{opacity:0;pointer-events:none;}
.vt-video-frame{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;z-index:3;
  animation:vtFadeIn .35s ease;
}
.vt-close{
  position:absolute;top:10px;right:10px;z-index:4;
  width:30px;height:30px;border-radius:50%;
  background:rgba(10,10,10,.6);
  border:1px solid rgba(30,45,48,.25);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s, border-color .2s;
}
.vt-close:hover{background:var(--cyan);border-color:var(--cyan);}
.vt-close svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;}
.vt-close:hover svg{stroke:var(--on-accent);}
@keyframes vtFadeIn{from{opacity:0;}to{opacity:1;}}

.vt-dots{display:none;}
.vt-nav{display:none;}
@media(max-width:900px){
  /* Single-card carousel (scroll-snap) instead of a stacked column of every
     video — matches the "one card + arrows + dots" pattern used for tablet/mobile. */
  .vt-grid{
    display:flex;flex-wrap:nowrap;gap:20px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    padding:4px 2px 8px;
    max-width:100%;margin:0;
  }
  .vt-grid::-webkit-scrollbar{display:none;}
  .vt-item{flex:0 0 clamp(240px,78vw,340px);scroll-snap-align:center;}

  .vt-dots{
    display:flex;justify-content:center;align-items:center;gap:8px;
    margin-top:22px;
  }
  .vt-dots span{
    position:relative;overflow:hidden;
    width:8px;height:8px;border-radius:50%;
    background:rgba(30,45,48,.18);cursor:pointer;
    transition:background .25s, width .25s, border-radius .25s;
  }
  .vt-dots span.active{width:22px;border-radius:4px;background:rgba(30,45,48,.18);}
  .vt-dots span.active::after{
    content:'';
    position:absolute;inset:0;
    background:var(--cyan);
    transform:scaleX(0);
    transform-origin:left;
    animation:dot-fill 4s linear forwards;
  }
  @media (prefers-reduced-motion: reduce){
    .vt-dots span.active::after{animation:none;transform:scaleX(1);}
  }

  .vt-nav{
    display:none; /* arrows removed — dots + swipe are enough to navigate */
  }
  .vt-nav button{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    border:1px solid var(--card-border);background:rgba(30,45,48,.03);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s, border-color .2s;
  }
  .vt-nav button:hover{background:rgba(85,148,163,.12);border-color:rgba(85,148,163,.3);}
  .vt-nav button svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .vt-nav button:disabled{opacity:.32;cursor:default;}
}

/* YouTube lightbox */
#yt-lightbox{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.88);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
}
#yt-lightbox.open{display:flex;}
#yt-lightbox-inner{
  position:relative;width:min(860px,92vw);
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  box-shadow:none;
}
#yt-lightbox iframe{width:100%;height:100%;border:none;display:block;}
#yt-lightbox-close{
  position:absolute;top:-44px;right:0;
  background:rgba(30,45,48,.1);border:1px solid rgba(30,45,48,.2);
  color:var(--white);font-size:20px;cursor:pointer;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;font-family:var(--font);
}
#yt-lightbox-close:hover{background:rgba(30,45,48,.2);}

/* ---------- PROCESS ---------- */
.process-section-figma{
  --pf-dim:rgba(30,45,48,.55);
  --pf-white:#1E2D30;
  --pf-card:#EAF3F5;
  --pf-visual-bg:#F7FAFA;
  --pf-visual-border:rgba(30,45,48,.12);
}
.process-header{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:clamp(20px,4vw,60px);
  flex-wrap:wrap;
  text-align:center;
  margin-bottom:24px;
}
.process-heading{
  margin:0;
  color:var(--white);
}
.process-wrap{
  display:grid;
  grid-template-columns:minmax(200px,256px) 1fr;
  grid-template-areas:"list detail";
  gap:12px;
  align-items:stretch;
}
.process-list{
  grid-area:list;
  background:var(--pf-card);
  border-radius:32px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.process-step{
  all:unset;
  cursor:pointer;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:2px;
  border-radius:24px;
  padding:10px;
  padding-left:10px;
  transition:background .25s, padding-left .25s;
}
.process-step.active{
  background:rgba(85,148,163,.22);
  padding-left:18px;
}
.process-step-num{
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:24px;
  letter-spacing:-0.32px;
  color:var(--pf-dim);
  transition:color .25s;
}
.process-step.active .process-step-num{color:var(--pf-white);}
.process-step-title{
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(18px,1.8vw,24px);
  line-height:1.3;
  letter-spacing:-0.48px;
  color:var(--pf-dim);
  transition:color .25s;
}
.process-step.active .process-step-title{color:var(--pf-white);}

.process-detail{
  grid-area:detail;
  position:relative;
  background:var(--pf-card);
  border-radius:40px;
  overflow:hidden;
  min-height:clamp(300px,32vw,381px);
}
.process-panel{display:none;}
.process-panel.active{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:stretch;
  gap:clamp(16px,2.4vw,24px);
  padding:clamp(20px,2.6vw,32px) clamp(18px,2vw,24px);
  height:100%;
  box-sizing:border-box;
  animation:processFade .35s ease;
}
@keyframes processFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.process-panel-text{
  flex:1 1 52%;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.process-panel-num{display:none;} /* mobile-only timeline number badge, see ≤600px */
.process-panel-eyebrow{
  font-family:var(--font);
  font-weight:400;
  font-size:14px;
  line-height:21px;
  letter-spacing:-0.28px;
  color:var(--pf-dim);
}
.process-panel h3{
  font-family:var(--font);
  font-weight:500;
  font-size:clamp(24px,3vw,36px);
  line-height:1.3;
  letter-spacing:-0.15px;
  color:var(--pf-white);
  margin:0;
}
.process-panel p{
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:24px;
  letter-spacing:-0.32px;
  color:var(--pf-dim);
  max-width:34ch;
  margin:6px 0 0;
}
.process-panel-visual{
  flex:1 1 42%;
  position:relative;
  background:var(--pf-visual-bg);
  border:1.11px solid var(--pf-visual-border);
  border-radius:32px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  height:100%;
}
.process-panel-visual .wave-row{
  display:block;
  width:88%;
  height:auto;
  aspect-ratio:373/64;
}

@media(max-width:900px){
  .process-wrap{grid-template-columns:minmax(160px,210px) 1fr;}
  .process-panel.active{flex-direction:column;align-items:stretch;height:auto;}
  .process-panel-visual{order:-1;height:auto;min-height:160px;}
}
@media(max-width:600px){
  /* Side-by-side columns get too cramped on a phone. Instead: a vertical
     timeline — a numbered circle per step connected by a running line,
     with all 4 steps' title + description visible at once, no tabs or
     swiping needed. */
  .process-wrap{
    grid-template-columns:1fr;
    grid-template-areas:"detail";
  }
  .process-list{display:none;}
  .process-detail{
    display:block;
    background:none;
    border-radius:0;
    min-height:0;
  }
  .process-panel,
  .process-panel.active{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:16px;
    position:relative;
    background:none;
    border-radius:0;
    padding:0 0 32px;
    height:auto;
    box-sizing:border-box;
    animation:none;
  }
  .process-panel:last-child{padding-bottom:0;}
  /* the connecting line: runs from the bottom of this step's circle down to
     the top of the next one — anchored to the panel box (top:40px, the
     circle's own height, to bottom:0, the end of its padding) so it always
     reaches exactly that far no matter how tall the description text is */
  .process-panel:not(:last-child)::before{
    content:'';
    position:absolute;
    left:19px;
    top:40px;
    bottom:0;
    width:1px;
    background:rgba(30,45,48,.15);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .5s var(--ease) .25s;
  }
  .process-panel-num{
    display:flex;
    flex:0 0 40px;
    width:40px;height:40px;
    border-radius:50%;
    background:var(--pf-card);
    color:var(--pf-white);
    align-items:center;justify-content:center;
    font-family:var(--font);font-size:14px;font-weight:600;
    position:relative;z-index:1;
    transform:scale(.6);
    opacity:0;
    transition:transform .4s var(--ease) .15s, opacity .4s var(--ease) .15s;
  }
  .process-panel-text{gap:4px;padding-top:8px;}
  .process-panel-eyebrow{display:none;}
  .process-panel h3{font-size:17px;}
  .process-panel p{font-size:13.5px;line-height:1.5;max-width:100%;}
  .process-panel-visual{display:none;}

  /* scroll-in reveal — script.js adds .is-revealed as each step enters
     view, so the timeline draws itself top to bottom as you scroll instead
     of appearing all at once */
  .process-panel,
  .process-panel.active{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .process-panel.is-revealed{opacity:1;transform:translateY(0);}
  .process-panel.is-revealed .process-panel-num{transform:scale(1);opacity:1;}
  .process-panel.is-revealed:not(:last-child)::before{transform:scaleY(1);}
}
@media(max-width:600px) and (prefers-reduced-motion: reduce){
  .process-panel,
  .process-panel.active,
  .process-panel-num,
  .process-panel::before{
    transition:none;opacity:1;transform:none;
  }
}

/* ---------- SERVICES SECTION ---------- */
.services-section{
  padding:clamp(36px,5vw,56px) 0 clamp(48px,6vw,72px);
  background:var(--bg-alt);
  position:relative;overflow:hidden;
}
.services-section::before{
  content:'';
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--bg-alt);
}
.services-section h2{
  font-size:clamp(26px,3.8vw,42px);font-weight:700;
  letter-spacing:-.02em;
  text-align:center;color:var(--white);margin-bottom:32px;
}

.services-scroll-outer{position:relative;padding:0 clamp(14px,3vw,48px);}
.services-scroll{
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:0;
  /* on wide viewports the cards no longer fill the row (nothing to scroll
     to), so center them instead of leaving dead space on the right —
     "safe" keeps the leftmost card from clipping if it ever does overflow */
  justify-content:center;
  justify-content:safe center;
}
.services-scroll::-webkit-scrollbar{display:none;}

.svc-card{
  flex:0 0 clamp(280px,26vw,340px);
  scroll-snap-align:start;
  background:#111;
  border-radius:var(--radius-card);
  overflow:hidden;
  position:relative;
  height:440px;
  display:flex;flex-direction:column;justify-content:flex-start;
  border:1px solid var(--card-border);
  transition:border-color .5s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-card.is-centered{
  border-color:rgba(30,45,48,0);
  box-shadow:none;
}
.svc-card:hover{
  transform:translateY(-4px);
  box-shadow:none;
  border-color:rgba(85,148,163,.25);
}
.svc-card-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  background:linear-gradient(135deg,#001a22 0%,#002a36 100%);
  overflow:hidden;
  pointer-events:none;
}
.svc-card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,.25) 100%);
  z-index:1;
}
.svc-card-img .svc-static-img{
  width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  position:relative;z-index:0;
  color:transparent; /* hides alt text if the image fails to load */
  font-size:0;
  text-indent:-9999px;
}
.svc-card-link{
  position:absolute;inset:0;z-index:1;
}
.svc-card-body{
  position:relative;z-index:2;
  padding:24px 22px;
  flex:1;display:flex;flex-direction:column;justify-content:flex-start;
  pointer-events:none;
}
.svc-card-body h3{
  font-size:26px;font-weight:800;color:#fff;margin:0;letter-spacing:-.02em;line-height:1.05;
}
.svc-card-body p{
  font-size:17px;font-style:italic;font-weight:500;color:rgba(255,255,255,.85);
  line-height:1.3;margin-top:4px;
}
.svc-learn-btn{
  position:absolute;z-index:2;right:18px;bottom:18px;
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:rgba(30,45,48,.1);color:var(--white);
  border:1px solid rgba(30,45,48,.18);
  backdrop-filter:blur(6px);
  font-size:0;
  pointer-events:all;
  opacity:0;
  transform:scale(.85);
  transition:opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.svc-card:hover .svc-learn-btn,
.svc-card:focus-within .svc-learn-btn{
  opacity:1;
  transform:scale(1);
}
.svc-learn-btn::after{
  content:'';
  width:16px;height:16px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.svc-learn-btn:hover{background:var(--cyan);color:var(--on-accent);border-color:var(--cyan);transform:scale(1.06);}
.services-nav{display:flex;align-items:center;justify-content:center;gap:24px;padding:14px clamp(14px,3vw,48px) 0;}
.svc-dots{display:flex;gap:6px;}
.svc-dot{
  width:8px;height:8px;border-radius:50%;background:rgba(85,148,163,.15);
  cursor:pointer;transition:background .25s, width .25s, border-radius .25s;border:none;padding:0;
}
.svc-dot.active{width:24px;border-radius:4px;background:var(--cyan);}
.svc-deco{position:absolute;pointer-events:none;stroke:rgba(85,148,163,.07);fill:none;stroke-width:1;}

/* ---------- BOOKING ---------- */
#book .section-head{margin-bottom:clamp(28px,4vw,44px);}
.book-panel{
  display:flex;align-items:center;gap:56px;
}

.book-cal{flex:1 1 440px;min-width:320px;}
.book-panel--centered{
  justify-content:center;
}
.book-panel--centered .book-cal{
  flex:1 1 auto;width:100%;max-width:860px;min-width:0;
}





.calendly-card{
  width:100%;max-width:860px;border-radius:var(--radius-card);overflow:hidden;
  background:var(--card);
  border:1px solid rgba(85,148,163,.22);
  padding:8px;
  box-shadow:0 16px 40px rgba(30,45,48,.08);
}
.calendly-card .calendly-inline-widget{border-radius:calc(var(--radius-card) - 6px);}
@media(max-width:900px){
  .book-panel{flex-direction:column;gap:36px;}

  
  /* Center the checklist as a single block instead of centering each line
     individually — otherwise the checkmarks zig-zag because each item's
     width differs (see: staggered checklist bug on tablet/mobile). */

}

/* ---------- FAQ ---------- */
.faq-panel{
  background:var(--card);
  border:1px solid rgba(85,148,163,.15);
  border-radius:28px;padding:48px;
  display:flex;gap:40px;align-items:flex-start;
  box-shadow:none;
}
.faq-side{flex:0 0 270px;}
.faq-side h2{
  text-align:left;font-size:clamp(26px,3vw,32px);line-height:1.15;
  color:var(--white);margin-bottom:24px;
}
.faq-side h2 span{color:var(--cyan);}
.faq-card{
  background:var(--card);
  border:1px solid rgba(85,148,163,.18);
  border-radius:18px;
  padding:22px 20px;text-align:center;
  box-shadow:none;
}
.faq-card p{font-size:14px;margin-bottom:16px;color:var(--dim);line-height:1.4;}
.faq-card .btn-outline{
  display:block;width:100%;padding:13px 18px;border-radius:999px;
  border:1.5px solid var(--cyan);
  background:transparent;
  color:var(--cyan);
  font-family:var(--font);font-weight:700;font-size:14px;cursor:pointer;text-align:center;
  transition:background .2s,color .2s,box-shadow .2s;
  box-shadow:none;
}
.faq-card .btn-outline:hover{
  background:var(--cyan-dim);
  color:var(--white);
  box-shadow:none;
}
.faq-list{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0;}
.faq-item{
  background:var(--bg-alt);border:1px solid rgba(85,148,163,.12);border-radius:18px;overflow:hidden;
  transition:border-color .2s;
}
.faq-item:hover{border-color:rgba(85,148,163,.30);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--white);
  font-family:var(--font);font-size:16px;font-weight:500;
  padding:20px 22px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;cursor:pointer;
}
.faq-q .plus{
  width:36px;height:36px;border-radius:50%;
  background:rgba(85,148,163,.15);
  border:1.5px solid rgba(85,148,163,.4);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;transition:transform .25s, background .2s;
}
.faq-item.open .faq-q .plus{background:var(--cyan);}
.faq-q .plus:before,.faq-q .plus:after{content:"";position:absolute;background:var(--cyan);}
.faq-item.open .faq-q .plus:before,.faq-item.open .faq-q .plus:after{background:var(--on-accent);}
.faq-q .plus:before{width:14px;height:2px;}
.faq-q .plus:after{width:2px;height:14px;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 22px;}
.faq-a p{font-size:15px;padding-bottom:22px;color:var(--dim);}

/* ---------- CTA ---------- */
.cta-section{
  position:relative;text-align:center;overflow:hidden;
  padding:clamp(28px,3.5vw,44px) 0; /* tighter than the shared .section-pad default — this section was reading as too much empty space above the heading */
  /* soft teal wash, same family as the hero background — the old .glow
     span (display:none sitewide since the light-theme conversion) used to
     handle this but wasn't revived for the new light look, so this section
     was rendering flat */
  background:
    radial-gradient(55% 70% at 15% 20%, rgba(111,193,209,.28) 0%, transparent 75%),
    radial-gradient(50% 65% at 85% 15%, rgba(85,148,163,.24) 0%, transparent 75%),
    radial-gradient(60% 80% at 50% 100%, rgba(85,148,163,.16) 0%, transparent 75%),
    var(--black);
}
.cta-section .glow{width:700px;height:240px;left:50%;top:20%;transform:translateX(-50%);}
.cta-section > div{position:relative;z-index:2;}
.final-cta-primary{
  background:var(--cyan-bright);color:#06141A;font-size:16px;font-weight:700;
  padding:17px 34px;border-radius:999px;transition:background .2s;
}
.final-cta-primary:hover{background:#A6E0EA;}
.final-cta-secondary{
  border:1px solid rgba(30,45,48,.2);color:var(--white);font-size:16px;font-weight:600;
  padding:16px 32px;border-radius:999px;transition:border-color .2s,color .2s;
}
.final-cta-secondary:hover{border-color:var(--cyan);color:var(--cyan);}

/* ---------- FOOTER ---------- */
footer{padding:0;background:var(--bg-alt);position:relative;overflow:hidden;}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(40px,5vw,56px) clamp(24px,4vw,48px) clamp(32px,4vw,44px);
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:clamp(28px,4vw,40px);
}

/* Link columns, including the newsletter signup as its own column (see
   .footer-newsletter-col) — sitting alongside Resources' short link list
   instead of running as a separate wide row fills the space Resources
   leaves empty, and shortens the footer overall. */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr) 1.3fr;
  gap:clamp(24px,4vw,40px);
}
.footer-col h5{font-size:11px;font-weight:700;color:var(--white);margin:0 0 16px;letter-spacing:1.5px;text-transform:uppercase;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{font-size:13px;color:rgba(30,45,48,.55);transition:color .15s;}
.footer-col ul li a:hover{color:var(--white);}

.footer-signup-label{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--white);margin-bottom:6px;transition:opacity .35s var(--ease);}
.footer-signup-sub{font-size:13px;color:rgba(30,45,48,.55);margin-bottom:12px;transition:opacity .35s var(--ease);}
.footer-signup-label.is-fading,.footer-signup-sub.is-fading{opacity:0;}
.footer-signup-dots{display:flex;gap:5px;margin-bottom:14px;}
.footer-signup-dots span{position:relative;overflow:hidden;width:6px;height:6px;border-radius:50%;background:rgba(30,45,48,.18);cursor:pointer;transition:background .25s, width .25s, border-radius .25s;}
.footer-signup-dots span.active{width:22px;border-radius:4px;background:rgba(30,45,48,.18);}
/* Instagram-style fill: the active dot's progress sweeps left-to-right over
   the same duration as the auto-advance timer, then the next dot takes over
   and starts filling from empty — shared by the footer signup dots and the
   How-We-Help feature dots below. */
.footer-signup-dots span.active::after,
.feature-dots span.active::after{
  content:'';
  position:absolute;inset:0;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  animation:dot-fill 4s linear forwards;
}
@keyframes dot-fill{to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){
  .footer-signup-dots span.active::after,
  .feature-dots span.active::after{animation:none;transform:scaleX(1);}
}
.footer-email-row{display:flex;border-radius:8px;overflow:hidden;border:1px solid rgba(30,45,48,.14);}
.footer-email-row input{
  flex:1;padding:12px 14px;background:#fff;border:none;
  font-family:var(--font);font-size:13px;color:var(--white);outline:none;min-width:0;
}
.footer-email-row input::placeholder{color:rgba(30,45,48,.4);}
.footer-email-row button{
  padding:12px 16px;background:var(--cyan);border:none;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:700;color:var(--on-accent);
  display:flex;align-items:center;gap:4px;white-space:nowrap;transition:opacity .15s;
}
.footer-email-row button:hover{opacity:.88;}
.footer-no-spam{font-size:11px;color:rgba(30,45,48,.4);margin-top:7px;}

/* social icons sit under the newsletter form now, not in the bottom bar */
.footer-social{display:flex;gap:8px;margin-top:14px;}

.footer-bottom{
  display:flex;justify-content:center;align-items:center;
  padding:16px clamp(24px,4vw,48px);font-size:11px;color:rgba(30,45,48,.45);
  flex-wrap:wrap;gap:24px;position:relative;z-index:2;
}
.footer-bottom a{color:rgba(30,45,48,.45);transition:color .15s;}
.footer-bottom a:hover{color:var(--white);}
.footer-bottom-links{display:flex;gap:18px;flex-wrap:wrap;}
.footer-social a{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan);
  transition:color .2s, transform .2s;
}
.footer-social a:hover{color:var(--cyan-dark);transform:translateY(-2px);}
.footer-social a svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;}

/* ---------- COOKIE CONSENT BANNER ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  padding:16px;
  transform:translateY(120%);
  transition:transform .4s var(--ease);
  pointer-events:none;
}
.cookie-banner.show{transform:translateY(0);pointer-events:all;}
.cookie-banner-inner{
  max-width:900px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:#fff;
  border:1px solid rgba(30,45,48,.1);
  border-radius:16px;
  padding:18px 24px;
  box-shadow:0 20px 50px rgba(30,45,48,.16);
}
.cookie-banner-text{font-size:14px;line-height:1.6;color:rgba(30,45,48,.8);flex:1 1 380px;margin:0;}
.cookie-banner-text a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px;}
.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-btn{
  padding:10px 22px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;
  border:1.5px solid transparent;white-space:nowrap;font-family:var(--font);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.cookie-btn-decline{background:transparent;border-color:rgba(30,45,48,.18);color:rgba(30,45,48,.75);}
.cookie-btn-decline:hover{background:rgba(30,45,48,.06);}
.cookie-btn-accept{background:var(--cyan);color:var(--on-accent);border-color:var(--cyan);}
.cookie-btn-accept:hover{background:var(--cyan-dark);}
@media(max-width:680px){
  .cookie-banner-inner{flex-direction:column;align-items:stretch;text-align:center;}
  .cookie-banner-text{flex:none;}
  .cookie-banner-actions{justify-content:center;}
}
@media(max-width:900px){
  /* below desktop width the newsletter form needs real width to stay
     usable, so it drops out of the 4-column row and becomes its own
     full-width block above the 3 compact link columns instead */
  .footer-grid{grid-template-columns:repeat(3,1fr);}
  .footer-newsletter-col{grid-column:1 / -1;order:-1;margin-bottom:8px;}
  .footer-email-row{max-width:360px;}
}
@media(max-width:640px){
  .footer-bottom{justify-content:center;text-align:center;flex-direction:column;}
  .footer-bottom-links{margin-left:0;}
}
@media(max-width:420px){
  /* the 3 link lists sit as compact side-by-side columns at every width
     (base .footer-grid rule) — this just tightens spacing further for the
     narrowest phones */
  .footer-grid{gap:14px;}
  .footer-col h5{font-size:10px;margin-bottom:10px;letter-spacing:.8px;}
  .footer-col ul{gap:8px;}
  .footer-col ul li a{font-size:12px;line-height:1.3;}
  .footer-newsletter-col{grid-column:1 / -1;}
}

/* ============================================================
   RESPONSIVE BREAKPOINTS — FULL COVERAGE
   ============================================================ */

/* ---- Tablet landscape (≤1100px) ---- */
@media(max-width:1100px){
  
  .services-scroll{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .services-scroll::-webkit-scrollbar{display:none;}
  .svc-card{scroll-snap-align:start;flex:0 0 clamp(260px,38vw,320px);height:400px;}
}

/* ---- Nav collapse (≤1100px) — raised from 960px because a 7th nav
   item (Blog) no longer fits comfortably in the 901–1100px "shrunk"
   desktop nav, causing a visibly cramped/squished navbar in that range. ---- */
@media(max-width:1100px){
  nav,.nav-actions .btn-small{display:none;}
  .burger{display:flex;}
}

/* ---- Tablet portrait (≤900px) ---- */
@media(max-width:900px){
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .faq-panel{flex-direction:column;padding:32px;}
  .faq-side{flex:none;width:100%;text-align:center;}
  .faq-side h2{text-align:center;}
  .services-scroll-outer{padding:0 16px;}
}

/* ---- Mobile large (≤680px) ---- */
@media(max-width:680px){
  .iphone-mock{
    /* sized so exactly 2 cards + the 22px gap fill the row on any mobile
       width, instead of a fixed 190px cap that leaves a growing dead gap
       as the viewport gets wider */
    width:clamp(150px,calc((100% - 12px)/2),240px);
  }
  
  .faq-panel{padding:24px 18px;}

  /* hero buttons stack vertically on mobile */
  .hero .btn-row{flex-direction:column;align-items:center;}
  .hero .btn-row .btn{width:100%;max-width:320px;}

  /* all other button rows stack too */
  .btn-row{flex-direction:column;align-items:center;}
  .btn-row .btn{width:100%;max-width:320px;justify-content:center;}

  .calendly-inline-widget{height:620px !important;}
}

/* ---- Mobile small (≤480px) ---- */
@media(max-width:480px){
  .nav-wrap{padding:0 16px;}
  .logo-word{font-size:15px;}
  .hero{padding:clamp(70px,16vw,90px) 0 clamp(24px,4vw,36px);}
  .hero h1{letter-spacing:-.04em;}
  .hero p.sub{font-size:15px;}
  .section-pad{padding:36px 0;}
  .container{padding:0 16px;}
  .feature{flex-direction:column;gap:12px;}
  .feature .icon{width:40px;height:40px;}
  .calendly-card{padding:4px;}
  
  .footer-bottom{flex-direction:column;text-align:center;}
  .footer-bottom-links{gap:14px;}
  .faq-panel{padding:18px 14px;}
  .services-scroll-outer{padding:0 clamp(10px,2vw,20px);}
  .svc-card{height:360px;}
  .svc-card-body{padding:20px 18px;}
  .svc-card-body h3{font-size:22px;}
  .svc-card-body p{font-size:14px;}
}

/* =====================================================
   SERVICES VIEW — EMBEDDED STYLES
   ===================================================== */

/* --- Page view switcher --- */
#services-page-view{
  display:none;
  padding-top:clamp(80px,8vw,100px);
  padding-bottom:clamp(48px,6vw,80px);
  min-height:80vh;
  position:relative;
  z-index:1;
}
/* active handled below */
#mainPageContent{flex:1;}
#mainPageContent.hidden{display:none;}
#services-page-view.active{display:block;flex:1;}

/* =====================================================
   PAGE-SPECIFIC STYLES
   ===================================================== */

/* ======== WHY CHOOSE INTRO BLOCK ======== */






@keyframes wci-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(4px);}
}
@media (prefers-reduced-motion: reduce){
  
}

/* ======== SERVICES TABS SECTION ---------- */

/* ---------- PANEL WRAPPER ---------- */
.tab-panels{position:relative;min-height:600px;}
.tab-panel{
  display:none;
  animation:panel-in .45s var(--ease) forwards;
}
.tab-panel.active{display:block;}
@keyframes panel-in{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}

/* ======== EMAIL STRATEGY SECTION ======== */
.email-strategy-section{
  background:transparent;border:none;
  padding:clamp(36px,5vw,64px) clamp(24px,4vw,56px);
  margin-bottom:28px;text-align:center;
}
.email-strategy-header{margin-bottom:40px;}
.email-strategy-header .eyebrow{margin-bottom:14px;}
.email-strategy-header h2{font-size:clamp(28px,4vw,46px);color:var(--white);margin-bottom:18px;}
.email-strategy-desc{
  max-width:720px;margin:0 auto;
  font-size:15px;color:rgba(30,45,48,.58);line-height:1.75;
}
.es-flows-label{
  font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(30,45,48,.4);margin-bottom:20px;
  padding-top:32px;
}
.es-flow-pills{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:32px;
}
.es-flow-pill{
  display:flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:999px;
  background:var(--card);border:1px solid var(--card-border);
  font-size:13.5px;font-weight:600;color:rgba(30,45,48,.72);
  transition:all .2s var(--ease);
}
.es-flow-pill:hover{border-color:rgba(85,148,163,.3);color:var(--white);}
.es-fp-num{
  width:22px;height:22px;border-radius:50%;background:var(--cyan);
  color:var(--on-accent);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.es-body-text{
  max-width:700px;margin:0 auto 16px;
  font-size:14.5px;color:rgba(30,45,48,.55);line-height:1.75;
}
/* Three email preview cards */
.es-email-previews{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:40px;padding-top:36px;
}
.es-preview-card{
  border-radius:14px;overflow:hidden;
  border:1px solid var(--card-border);
  background:var(--card);
  text-align:left;
  box-shadow:none;
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.es-preview-card:hover{transform:translateY(-4px);border-color:rgba(85,148,163,.2);}
.es-preview-header{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:rgba(30,45,48,.04);
  border-bottom:1px solid var(--card-border);
}
.es-ph-dots{display:flex;gap:4px;}
.es-ph-dots span{width:7px;height:7px;border-radius:50%;background:rgba(30,45,48,.18);}
.es-ph-addr{font-size:10px;color:rgba(30,45,48,.35);font-weight:500;margin-left:4px;}
.es-preview-body{padding:16px;min-height:280px;}

/* Wake up card */
.es-preview-wake{background:linear-gradient(160deg,rgba(85,148,163,.15),var(--card));}
.es-pw-phone{
  width:80px;height:120px;margin:0 auto 14px;
  border-radius:12px;background:#142235;
  border:2px solid rgba(85,148,163,.25);
  display:flex;flex-direction:column;gap:4px;padding:8px 6px;
}
.es-pw-screen{display:flex;flex-direction:column;gap:5px;}
.es-pw-notif{height:14px;background:rgba(30,45,48,.08);border-radius:3px;}
.es-pw-notif:nth-child(2){width:80%;}
.es-pw-notif:nth-child(3){width:70%;}
.es-pw-headline{font-size:13px;font-weight:600;color:var(--white);line-height:1.4;margin-bottom:8px;}
.es-pw-headline strong{color:var(--cyan);}
.es-pw-body{font-size:10.5px;color:rgba(30,45,48,.5);line-height:1.5;margin-bottom:12px;}
.es-pw-social span{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(30,45,48,.4);}
.es-pw-btns{display:flex;gap:6px;margin-top:6px;}
.es-pw-btn{font-size:9.5px;font-weight:700;padding:5px 10px;border-radius:4px;color:#fff;}
.es-pw-btn.fb{background:#1877F2;}
.es-pw-btn.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}

/* Offer card */
.es-preview-offer{background:#f5f0e8;padding:14px;}
.es-po-top{background:#e8f4f8;border-radius:6px;padding:8px 10px;margin-bottom:10px;}
.es-po-timer{font-size:18px;font-weight:800;color:var(--cyan-dark);letter-spacing:1px;text-align:center;}
.es-po-label{font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#5a7a9a;text-align:center;margin-top:2px;}
.es-po-discount{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:6px 0;}
.es-po-pct{font-size:38px;font-weight:900;color:var(--cyan-dark);line-height:1;}
.es-po-off{font-size:24px;font-weight:900;color:var(--cyan-dark);}
.es-po-img{height:70px;background:linear-gradient(135deg,#c8dce8,#a0bece);border-radius:6px;margin-bottom:10px;}
.es-po-body{font-size:10px;color:var(--cyan-dark);line-height:1.5;}
.es-po-sub{font-size:9px;color:#5a7a9a;margin-bottom:4px;}
.es-po-time-left{font-size:9px;font-weight:700;text-align:center;color:var(--cyan-dark);letter-spacing:1px;margin:6px 0;}
.es-po-code{font-size:9px;color:var(--cyan-dark);text-align:center;margin-bottom:6px;}
.es-po-cta{background:var(--cyan-dark);color:var(--on-accent);font-size:10px;font-weight:700;text-align:center;padding:6px 12px;border-radius:4px;}

/* Meet card */
.es-preview-meet{background:linear-gradient(170deg,#1a401e,#0d1f0d);padding:14px;}
.es-pm-tip{font-size:9px;color:rgba(255,255,255,.65);line-height:1.4;margin-bottom:4px;}
.es-pm-code{font-size:9px;color:var(--cyan);font-weight:600;margin-bottom:12px;}
.es-pm-hero{
  position:relative;height:120px;
  background:linear-gradient(160deg,#1a401e,#0d1f10);
  border-radius:10px;margin-bottom:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.es-pm-moon{position:absolute;top:8px;right:10px;font-size:18px;opacity:.8;}
.es-pm-person{
  width:50px;height:80px;
  background:linear-gradient(to bottom,#c8a882,#8a6050);
  border-radius:8px 8px 4px 4px;position:relative;
}
.es-pm-person::before{
  content:'';position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;background:#c8a882;
}
.es-pm-clouds{position:absolute;bottom:8px;right:8px;display:flex;flex-direction:column;gap:4px;}
.es-pm-cloud{width:40px;height:12px;background:rgba(255,255,255,.25);border-radius:6px;}
.es-pm-cloud.sm{width:28px;height:9px;}
.es-pm-content h4{font-size:13px;font-weight:800;color:#fff;line-height:1.3;margin-bottom:6px;}
.es-pm-content p{font-size:10px;color:rgba(255,255,255,.55);}

@media(max-width:900px){.es-email-previews{grid-template-columns:1fr;}}
@media(max-width:680px){.es-flow-pills{gap:7px;}.es-flow-pill{font-size:12.5px;padding:8px 14px;}}

/* ======== SMS FEATURE BREAKDOWN (Figma sync) ======== */
.sms-feature-rows{
  display:flex;flex-direction:column;gap:64px;
  margin-top:8px;
}
.sms-feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  text-align:left;
}
.sms-feature-row .sms-feature-text{order:1;}
.sms-feature-row .sms-feature-visual{order:2;}
.sms-feature-row.reverse .sms-feature-text{order:2;}
.sms-feature-row.reverse .sms-feature-visual{order:1;}

.sms-feature-num-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.sms-feature-num{font-size:15px;font-weight:800;color:var(--cyan);font-family:var(--font);}
.sms-feature-num-line{flex:0 0 28px;height:1px;background:var(--card-border);}
.sms-feature-tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim2);}

.sms-feature-text h3{
  font-size:clamp(20px,2.4vw,26px);color:var(--white);margin-bottom:14px;line-height:1.28;
  text-align:left;
}
.sms-feature-text p{
  font-size:14.5px;color:var(--dim);line-height:1.7;margin-bottom:18px;max-width:460px;
}
.sms-feature-list{display:flex;flex-direction:column;gap:11px;}
.sms-feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:rgba(30,45,48,.72);}
.sms-feature-check{
  width:17px;height:17px;border-radius:50%;flex-shrink:0;margin-top:2px;
  background:var(--cyan-dim);border:1px solid rgba(85,148,163,.35);
  display:flex;align-items:center;justify-content:center;
}
.sms-feature-check svg{width:9px;height:9px;stroke:var(--cyan);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* mockup card shared shell */
.sms-feature-visual{display:flex;justify-content:center;}
.sfm-card{
  width:100%;max-width:380px;border-radius:14px;overflow:hidden;
  border:1px solid var(--card-border);background:var(--card);
  box-shadow:none;
}
.sfm-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;background:var(--card);border-bottom:1px solid var(--card-border);
}
.sfm-top-left{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(30,45,48,.55);white-space:nowrap;}
.sfm-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex-shrink:0;}
.sfm-top-right{font-size:10px;color:var(--dim2);white-space:nowrap;}
.sfm-body{padding:18px;}
.sfm-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;border-top:1px solid var(--card-border);
  font-size:9.5px;color:var(--dim2);
}
.sfm-foot-l{display:flex;align-items:center;gap:5px;color:var(--cyan);font-weight:700;}
.sfm-meta{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--dim2);margin-bottom:4px;}
.sfm-row-between{display:flex;align-items:center;justify-content:space-between;}
.sfm-title-sm{font-size:13.5px;font-weight:700;color:var(--white);margin-bottom:14px;}
.sfm-badge-live{font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--cyan);background:var(--cyan-dim);padding:3px 9px;border-radius:999px;border:1px solid rgba(85,148,163,.25);}

/* 01 — compliance card specifics */
.sfm-input{border:1px solid var(--card-border);border-radius:8px;padding:10px 12px;margin-bottom:12px;background:rgba(30,45,48,.02);}
.sfm-input-val{font-size:12.5px;color:var(--white);font-weight:600;}
.sfm-check-row{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--cyan-dim);border:1px solid rgba(85,148,163,.22);
  border-radius:9px;padding:11px 12px;margin-bottom:12px;
}
.sfm-cb{width:14px;height:14px;border-radius:4px;background:var(--cyan);flex-shrink:0;margin-top:1px;position:relative;}
.sfm-cb::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:7px;border:solid #06140a;border-width:0 2px 2px 0;transform:rotate(40deg);}
.sfm-check-row strong{display:block;font-size:11.5px;color:var(--white);margin-bottom:3px;}
.sfm-check-row span.sub{font-size:10px;color:var(--dim2);line-height:1.4;}
.sfm-confirm-label{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--dim2);margin-bottom:8px;}
.sfm-confirm-label .sfm-dot{background:var(--cyan);}
.sfm-sms-line{font-size:11.5px;color:rgba(30,45,48,.75);background:var(--card);border-radius:10px;padding:11px 12px;line-height:1.55;}

/* 02 — conversational copy card specifics */
.sfm-chat-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.sfm-avatar{width:26px;height:26px;border-radius:50%;background:var(--cyan);color:#06140a;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sfm-chat-name{font-size:12.5px;font-weight:700;color:var(--white);}
.sfm-chat-status{font-size:10px;color:var(--cyan);font-weight:600;}
.sfm-chat{display:flex;flex-direction:column;gap:8px;}
.sfm-msg{max-width:82%;font-size:12px;line-height:1.5;padding:9px 13px;border-radius:14px;}
.sfm-msg.in{background:var(--bg-alt);color:var(--white);border-bottom-left-radius:4px;align-self:flex-start;}
.sfm-msg.out{background:var(--cyan);color:#06140a;border-bottom-right-radius:4px;align-self:flex-end;font-weight:700;}
.sfm-msg .code-chip{background:rgba(0,0,0,.18);padding:1px 6px;border-radius:5px;font-weight:700;}

/* 03 — behavioural triggers card specifics */
.sfm-flow-step{border-radius:10px;padding:11px 12px;margin-bottom:6px;display:flex;gap:10px;align-items:flex-start;}
.sfm-flow-step.start{background:var(--cyan-dim);border:1px solid rgba(85,148,163,.3);}
.sfm-flow-step.action{background:var(--card);border:1px solid var(--card-border);}
.sfm-flow-ico{width:24px;height:24px;border-radius:50%;background:rgba(30,45,48,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sfm-flow-step.start .sfm-flow-ico{background:var(--cyan);}
.sfm-flow-ico svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2;}
.sfm-flow-step.start .sfm-flow-ico svg{stroke:#06140a;}
.sfm-flow-step strong{display:block;font-size:12px;color:var(--white);margin-bottom:2px;}
.sfm-flow-step span{font-size:10px;color:var(--dim2);}
.sfm-flow-sub{font-size:9.5px;color:var(--dim2);text-align:center;margin:6px 0;}

/* 04 — cross-channel coordination card specifics */
.sfm-legend{display:flex;gap:14px;font-size:9.5px;color:var(--dim2);}
.sfm-legend span{display:inline-flex;align-items:center;gap:5px;}
.sfm-legend i{width:6px;height:6px;border-radius:50%;display:inline-block;}
.sfm-cal-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.sfm-cal-day{width:34px;flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--dim2);line-height:1.3;}
.sfm-cal-day b{display:block;font-size:12px;color:var(--white);}
.sfm-cal-pill{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-radius:8px;padding:8px 12px;font-size:11px;
}
.sfm-cal-pill.email{background:var(--card);border:1px solid var(--card-border);color:rgba(30,45,48,.8);}
.sfm-cal-pill.sms{background:var(--cyan);color:#06140a;font-weight:700;}
.sfm-cal-tag{font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:.6;margin-right:6px;}

/* 05 — performance reporting card specifics */
.sfm-stat-hero{background:var(--card);border-radius:10px;padding:14px;margin-bottom:12px;}
.sfm-stat-value{font-size:25px;font-weight:800;color:var(--white);display:flex;align-items:baseline;gap:8px;margin-top:4px;}
.sfm-stat-value small{font-size:12px;font-weight:700;color:var(--cyan);}
.sfm-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sfm-stat-box{border:1px solid var(--card-border);border-radius:9px;padding:10px 12px;}
.sfm-stat-num{font-size:14.5px;font-weight:700;color:var(--white);margin-top:3px;}

/* CTA strip */
.sms-cta-strip{
  margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid rgba(85,148,163,.3);border-radius:16px;padding:36px 36px;text-align:left;background:var(--bg-alt);
}
.sms-cta-strip-text .eyebrow{text-align:left;margin-bottom:8px;}
.sms-cta-strip-text h4{font-size:clamp(17px,2vw,21px);color:var(--white);font-weight:700;letter-spacing:-.01em;}
.sms-cta-strip .btn{padding:12px 26px;font-size:14px;flex-shrink:0;}

/* Mini FAQ */
.sms-faq{margin-top:52px;text-align:center;}
.sms-faq h3{font-size:clamp(22px,3vw,30px);color:var(--white);margin-bottom:8px;text-align:center;}
.sms-faq-sub{font-size:13.5px;color:var(--dim2);margin-bottom:26px;}
.sms-faq-list{max-width:760px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:10px;}
.sms-faq-item{
  border:1px solid var(--card-border);border-radius:12px;background:var(--card);overflow:hidden;
}
.sms-faq-item summary{
  list-style:none;cursor:pointer;padding:17px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:14px;font-weight:600;color:var(--white);
}
.sms-faq-item summary::-webkit-details-marker{display:none;}
.sms-faq-item summary .plus{width:18px;height:18px;position:relative;flex-shrink:0;}
.sms-faq-item summary .plus::before,.sms-faq-item summary .plus::after{
  content:'';position:absolute;background:var(--cyan);top:50%;left:50%;transform:translate(-50%,-50%);
  transition:opacity .15s;
}
.sms-faq-item summary .plus::before{width:12px;height:2px;}
.sms-faq-item summary .plus::after{width:2px;height:12px;}
.sms-faq-item[open] summary .plus::after{opacity:0;}
.sms-faq-item p{padding:0 20px 18px;font-size:13.5px;color:var(--dim);line-height:1.65;}

@media(max-width:900px){
  .sms-feature-row{grid-template-columns:1fr;gap:24px;}
  .sms-feature-row .sms-feature-text,.sms-feature-row.reverse .sms-feature-text{order:1;}
  .sms-feature-row .sms-feature-visual,.sms-feature-row.reverse .sms-feature-visual{order:2;}
  .sms-feature-rows{gap:44px;}
  .sms-cta-strip{justify-content:center;text-align:center;}
  .sms-cta-strip-text .eyebrow,.sms-cta-strip-text{text-align:center;}
  .sms-feature-num{font-size:22px;}
  .sms-feature-tag{font-size:13px;letter-spacing:1.5px;}
  .sms-feature-text h3{font-size:clamp(22px,5vw,30px);}
  .sms-feature-num-line{flex:0 0 36px;}
}

/* Long email mockup (Copper Vitality) */
.cs-long-email{
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(30,45,48,.08);
  background:#fff;
  max-width:300px;margin:0 auto;
  box-shadow:none;
}
.cs-le-body{padding:0 0 8px;}

.cs-le-logo{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px 6px;
}
.cs-le-logo-icon{font-size:18px;color:#b5651d;}
.cs-le-logo-text{font-size:8px;font-weight:900;color:#b5651d;line-height:1.1;letter-spacing:1px;text-transform:uppercase;}
.cs-le-logo-text span{font-weight:400;letter-spacing:2px;}

.cs-le-headline{
  font-size:17px;font-weight:900;color:#1a1a1a;
  line-height:1.15;padding:4px 14px 0;
  letter-spacing:-.01em;
}
.cs-le-headline em{color:#b5651d;font-style:normal;}

/* Collage */
.cs-le-collage{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:70px 70px;
  gap:2px;margin:10px 0;
}
.cs-le-photo{background:#c8a882;}
.cs-le-p1{background:linear-gradient(135deg,#d4a882,#b8907a);}
.cs-le-p2{background:linear-gradient(135deg,#c8b090,#a89070);}
.cs-le-p3{background:linear-gradient(135deg,#e0c4a0,#c8a882);}
.cs-le-p4{background:linear-gradient(135deg,#b89878,#a08060);}
.cs-le-p5{background:linear-gradient(135deg,#d8b898,#c09878);}
.cs-le-p6{background:linear-gradient(135deg,#c4a080,#b08868);}

/* Intro */
.cs-le-intro{padding:8px 14px 4px;font-size:9px;color:#333;line-height:1.6;}
.cs-le-intro p{margin-bottom:4px;}

/* Reviews */
.cs-le-review{
  display:flex;gap:8px;
  margin:6px 14px;
  background:#f8f3ee;
  border-radius:8px;padding:8px;
}
.cs-le-review-left{flex-shrink:0;}
.cs-le-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#c8a882,#a08060);
}
.cs-le-av2{background:linear-gradient(135deg,#b89070,#907050);}
.cs-le-av3{background:linear-gradient(135deg,#d4b090,#b09070);}
.cs-le-review-right{flex:1;}
.cs-le-stars{color:#b5651d;font-size:9px;margin-bottom:3px;}
.cs-le-quote{font-size:8.5px;color:#333;line-height:1.5;margin-bottom:3px;font-style:italic;}
.cs-le-reviewer{font-size:8px;font-weight:700;color:#555;}
.cs-le-verified{font-size:7px;color:#888;margin-top:1px;}

/* CTA */
.cs-le-cta-wrap{padding:8px 14px;}
.cs-le-cta-btn{
  background:#b5651d;color:var(--white);
  font-size:10px;font-weight:800;text-align:center;
  padding:9px 16px;border-radius:999px;
}
.cs-le-cta-outline{
  background:transparent;color:#b5651d;
  border:2px solid #b5651d;
}

/* Discount */
.cs-le-discount{
  margin:4px 14px;
  background:#f8f3ee;border:1px dashed #c8a882;
  border-radius:8px;padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;
}
.cs-le-disc-pct{font-size:12px;font-weight:900;color:#1a1a1a;margin-bottom:4px;}
.cs-le-disc-code{
  font-size:9px;color:#555;
  border:1px dashed #b5651d;padding:3px 8px;border-radius:4px;
  letter-spacing:1px;font-weight:700;
}
.cs-le-disc-img{
  width:44px;height:44px;border-radius:6px;
  background:linear-gradient(135deg,#c8874a,#a06030);
  flex-shrink:0;
}

/* Trust bar */
.cs-le-trust{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:4px;padding:10px 14px 4px;text-align:center;
}
.cs-le-trust-item span{font-size:6.5px;color:#888;display:block;line-height:1.3;margin-top:3px;}
.cs-le-trust-icon{font-size:14px;}

/* Social */
.cs-le-social{
  display:flex;gap:10px;justify-content:center;
  padding:8px 14px;
}
.cs-le-social span{
  width:18px;height:18px;border-radius:50%;
  border:1px solid #ccc;font-size:9px;
  display:flex;align-items:center;justify-content:center;color:#555;
}

/* Footer */
.cs-le-footer{padding:4px 14px 10px;text-align:center;}
.cs-le-footer p{font-size:6.5px;color:#aaa;line-height:1.6;}
.cs-le-footer u{color:#888;}

/* ======== COPY CASE STUDIES ======== */
.cs-section-header{
  text-align:center;
  padding:clamp(20px,3vw,40px) 0 clamp(28px,3vw,44px);
}
.cs-section-header h2{font-size:clamp(28px,4vw,48px);}

.cs-case{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
  padding:clamp(28px,4vw,56px) 0;
}
.cs-case-flip{grid-template-columns:1fr 1fr;}

.cs-divider{
  border:none;border-top:1px solid rgba(30,45,48,.08);
  margin:0;
}

/* Email snippet (case 1) */
.cs-email-snippet{
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(30,45,48,.08);
  background:var(--card);
  box-shadow:none;
  max-width:300px;
  margin:0 auto;
}
.cs-snippet-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:rgba(30,45,48,.04);
  border-bottom:1px solid rgba(30,45,48,.06);
}
.cs-snippet-dots{display:flex;gap:4px;}
.cs-snippet-dots span{width:7px;height:7px;border-radius:50%;background:rgba(30,45,48,.15);}
.cs-snippet-addr{font-size:10px;color:rgba(30,45,48,.35);margin-left:4px;}
.cs-snippet-body{overflow:hidden;}

/* Countdown strip */
.cs-snip-countdown{
  background:#f5c842;padding:6px 12px;text-align:center;
}
.cs-snip-timer{font-size:14px;font-weight:800;color:#1a1a1a;letter-spacing:2px;}

/* Dark hero */
.cs-snip-dark{
  background:var(--bg-alt);padding:14px 16px;text-align:center;
}
.cs-snip-tag{
  font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:#f5c842;margin-bottom:8px;
}
.cs-snip-headline{
  font-size:18px;font-weight:900;color:var(--white);line-height:1.1;margin-bottom:12px;
  letter-spacing:-.01em;
}
.cs-snip-offer-row{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px;
}
.cs-snip-offer{
  background:#f5c842;border-radius:8px;padding:6px 10px;
  display:flex;flex-direction:column;align-items:center;
}
.cs-snip-get{font-size:8px;font-weight:700;color:#1a1a1a;}
.cs-snip-num{font-size:20px;font-weight:900;color:#1a1a1a;line-height:1;}
.cs-snip-plus{font-size:16px;font-weight:900;color:var(--white);}
.cs-snip-prices{
  display:flex;justify-content:center;gap:24px;
  font-size:9px;color:rgba(30,45,48,.7);margin-bottom:10px;
}
.cs-snip-prices strong{color:#f5c842;}
.cs-snip-cta{
  background:#f5c842;color:#1a1a1a;font-size:9px;font-weight:800;
  padding:6px 20px;border-radius:999px;display:inline-block;
}

/* Products strip */
.cs-snip-products{
  background:#e8ecf0;display:flex;gap:8px;padding:10px 12px;
}
.cs-snip-prod{
  flex:1;height:60px;background:linear-gradient(135deg,#b8ccd8,#8aaaba);border-radius:6px;
}
.cs-snip-footer-bar{height:30px;background:rgba(30,45,48,.04);}

/* Right text column */
.cs-case-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;
}
.cs-case-title{
  font-size:clamp(20px,2.5vw,30px);font-weight:800;color:var(--white);
  letter-spacing:-.025em;line-height:1.2;margin-bottom:16px;
}
.cs-case-intro{
  font-size:13.5px;color:rgba(30,45,48,.55);line-height:1.7;margin-bottom:10px;
}
.cs-copy-block{margin-bottom:14px;}
.cs-copy-label{
  font-size:9.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:4px;
}
.cs-copy-block p{font-size:13px;color:rgba(30,45,48,.6);line-height:1.6;}

/* Text snippet (case 2) */





/* Phone mockup (case 2) */









/* Brands note */
.cs-brands-note{
  text-align:center;
  padding:clamp(24px,3vw,40px) 0 clamp(36px,4vw,60px);
  font-size:13px;color:rgba(30,45,48,.35);
  font-style:italic;
}

@media(max-width:900px){
  .cs-case{grid-template-columns:1fr;}
  .cs-case-flip{grid-template-columns:1fr;}
  
  .cs-email-snippet{max-width:100%;}
}

/* ======== COPY BREAKDOWN (ANNOTATED EMAIL) ======== */


/* Annotation columns */








/* Connector lines */


/* Center email column */



/* Countdown bar */



/* Nav bar */



/* Hero copy */





/* Hero image */



/* Product block */


/* Size grid */






/* Product image 2 */


/* Reviews */




/* Footer */




/* Results below */






@media(max-width:900px){

  

  
}
@media(max-width:480px){

}

/* ======== RESPONSIVE ======== */
@media(max-width:1100px){
  nav,.nav-actions .btn-small{display:none;}
  .burger{display:flex;}
}
@media(max-width:900px){

  

  
}
@media(max-width:680px){

  
  /* Flow pills — stack as full-width pill rows like reference image */
  .es-flow-pills{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .es-flow-pill{
    width:100%;
    justify-content:flex-start;
    padding:13px 20px;
    font-size:14px;
    border-radius:999px;
  }
  .es-fp-num{
    width:28px;height:28px;font-size:12px;
  }
}
@media(max-width:480px){
  .nav-wrap{padding:0 16px;}
  .logo-word{font-size:15px;}

  
  .footer-bottom{flex-direction:column;text-align:center;}
  .epv-inner{border-radius:14px;max-height:88vh;}
}

@media(max-width:768px){
  #services-page-view{padding-top:100px;}

  

  
}

/* ============================================================
   TABLET — 768px to 1100px
   ============================================================ */
@media(min-width:769px) and (max-width:1100px){

  /* Header / Nav */
  .nav-wrap{ padding:0 28px; gap:12px; }
  .btn-small{ padding:11px 20px; font-size:13.5px; }

  /* Hero — extra top padding so content sits well below the navbar */
  .hero-photo-wrap{ padding:clamp(110px,11vw,135px) clamp(20px,4vw,32px) clamp(32px,4vw,48px); min-height:clamp(420px,55vw,500px); }
  .hero h1{ font-size:clamp(30px,5vw,52px); }
  .hero p.sub{ font-size:clamp(15px,1.8vw,17px); }

  /* How We Help — all 3 cards in one horizontal row */
  .feature-grid{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:4px 2px 8px;
  }
  .feature-grid::-webkit-scrollbar{ display:none; }
  .feature{
    flex:0 0 calc(33.333% - 10px);
    min-width:220px;
    scroll-snap-align:start;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
  }
  .feature .icon{ margin:0 auto; }

  /* Dots indicator — horizontal row below */
  .feature-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:16px;
  }
  .feature-dots span{
    position:relative; overflow:hidden;
    width:8px; height:8px; border-radius:50%;
    background:rgba(30,45,48,.18); cursor:pointer;
    transition:background .25s, width .25s, border-radius .25s;
  }
  .feature-dots span.active{ width:24px; border-radius:4px; background:rgba(30,45,48,.18); }

  /* Process */

  /* Services scroll cards */
  .svc-card{ flex:0 0 clamp(260px,38vw,320px); height:400px; }

  /* FAQ */
  .faq-panel{ padding:32px 28px; gap:28px; }
  .faq-side{ flex:0 0 220px; }

  /* Panel hero */


  /* Case section */


  /* Results strip */

  /* Design gallery */

  /* Email strategy previews */
  .es-email-previews{ grid-template-columns:repeat(2,1fr); gap:16px; }

  /* CB results */

  /* Footer */
  .footer-inner{ gap:clamp(20px,4vw,48px); }
  
}

/* ============================================================
   TABLET LANDSCAPE ONLY — 901px to 1100px
   (booking panel is still side-by-side here since the ≤900px rule
   that stacks it into a column hasn't kicked in yet — the desktop
   460/440 flex-basis + 56px gap gets tight at this width, so give
   it a narrower basis and shrink the heading a touch)
   ============================================================ */
@media(min-width:901px) and (max-width:1100px){
  .book-panel{ gap:32px; }
  
  .book-cal{ flex:1 1 360px; min-width:300px; }
  
  .calendly-inline-widget{ min-width:280px !important; }
}

/* ============================================================
   TABLET (PORTRAIT) BOOKING OVERRIDE — 601px to 900px
   Keeps the "Who we can help?" panel as a true two-column layout
   on tablets instead of stacking (the ≤900px rule above stacks it
   into a single column, which is meant for phones). Left column:
   eyebrow + heading + subhead + checklist. Right column: the
   Calendly widget card, treated as the interactive-widget placeholder.
   ============================================================ */
@media(min-width:601px) and (max-width:900px){
  .book-panel{
    flex-direction:row;
    align-items:flex-start;
    gap:24px;
  }

  

  

  
  .book-cal{
    flex:1 1 50%;
    min-width:0;
  }
  .calendly-card{ padding:6px; }
  .calendly-inline-widget{ min-width:0 !important; width:100% !important; height:520px !important; }
}

/* ============================================================
   TABLET PORTRAIT — 600px to 768px
   ============================================================ */
@media(min-width:601px) and (max-width:768px){

  /* Nav collapse already at 960px, so burger shows — fine */
  .nav-wrap{ padding:0 16px; gap:10px; }
  .logo-word{ font-size:15px; }

  /* Hero — generous top padding to separate content from the floating navbar */
  .hero-photo-wrap{ padding:clamp(90px,11vw,110px) clamp(18px,4vw,28px) clamp(24px,4vw,36px); min-height:clamp(380px,60vw,440px); }
  .hero h1{ font-size:clamp(28px,6vw,42px); }
  .hero p.sub{ font-size:15px; }

  /* How We Help — all 3 cards in one horizontal row */
  .feature-grid{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:4px 2px 8px;
  }
  .feature-grid::-webkit-scrollbar{ display:none; }
  .feature{
    flex:0 0 calc(33.333% - 8px);
    min-width:200px;
    scroll-snap-align:start;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
  }
  .feature .icon{ margin:0 auto; }

  /* Dots — horizontal below */
  .feature-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:16px;
  }
  .feature-dots span{
    position:relative; overflow:hidden;
    width:8px; height:8px; border-radius:50%;
    background:rgba(30,45,48,.18); cursor:pointer;
    transition:background .25s, width .25s, border-radius .25s;
  }
  .feature-dots span.active{ width:24px; border-radius:4px; background:rgba(30,45,48,.18); }

  /* Process — 2 cols */

  /* Services scroll */
  .svc-card{ flex:0 0 clamp(240px,66vw,300px); height:360px; }

  /* FAQ */
  .faq-panel{ flex-direction:column; padding:28px 20px; gap:20px; }
  .faq-side{ flex:none; width:100%; text-align:center; }
  .faq-side h2{ text-align:center; }

  /* Panel hero */


  /* Case */


  /* Results strip */

  /* Design gallery */

  /* Email strategy previews */
  .es-email-previews{ grid-template-columns:1fr; gap:14px; }

  /* CB results */

  

  

}

/* ============================================================
   MOBILE GENERAL IMPROVEMENTS (≤600px)
   ============================================================ */
@media(max-width:600px){

  /* Header */
  .nav-wrap{ padding:0 16px; }
  .logo-icon{ width:22px;height:18px; }

  /* Prevent any text/section from overflowing viewport */
  .container{ padding:0 16px; max-width:100%; }
  section{ max-width:100vw; overflow-x:hidden; }
  h1,h2,h3,p{ word-break:break-word; overflow-wrap:break-word; }

  /* CTA pill — constrain so it doesn't exceed screen */
  .hm-cta{ width:fit-content; font-size:clamp(14px,4vw,17px); padding:14px 32px; gap:10px; }

  /* Hero — inner desktop content hidden, mobile hero handles layout */
  .hero-inner > h1,
  .hero-inner > p.sub,
  .hero-inner > .btn-row{ display:none; }

  /* Section padding */
  .section-pad{ padding:32px 0; }
  .container{ padding:0 14px; }

  /* How We Help — horizontal scroll (existing behaviour) */
  .feature-grid{
    display:flex; flex-direction:row; flex-wrap:nowrap;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    padding:4px 14px 14px; gap:12px;
  }
  .feature-grid::-webkit-scrollbar{ display:none; }
  .feature{ flex:0 0 clamp(250px,80vw,320px); scroll-snap-align:center; }
  .feature-dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:16px; }
  .feature-dots span{
    position:relative;overflow:hidden;
    width:8px;height:8px;border-radius:50%;
    background:rgba(30,45,48,.18);cursor:pointer;
    transition:background .25s, width .25s, border-radius .25s;
  }
  .feature-dots span.active{width:24px;border-radius:4px;background:rgba(30,45,48,.18);}

  /* Process — single column */

  /* Services scroll */
  .svc-card{ flex:0 0 84vw; height:340px; }
  .svc-card-body h3{ font-size:22px; }
  .svc-card-body p{ font-size:14px; }
  .services-scroll-outer{ padding:0 10px; }
  .services-scroll-outer::before,
  .services-scroll-outer::after{ display:none; }

  /* FAQ */
  .faq-panel{ flex-direction:column; padding:20px 14px; gap:16px; }
  .faq-side{ flex:none; width:100%; text-align:center; }
  .faq-side h2{ text-align:center; }
  .faq-q{ font-size:14.5px; padding:16px 16px; }

  /* Calendly */
  .calendly-card{ padding:4px; }
  .calendly-inline-widget{ height:580px !important; }

  /* Button rows stack */
  .btn-row{ flex-direction:column; align-items:center; }
  .btn-row .btn{ width:100%; max-width:300px; justify-content:center; }

  /* Footer */
  .footer-inner{ flex-direction:column; gap:24px; padding:40px 16px 28px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .footer-bottom-links{ gap:14px; }

  /* Results strip */

  /* Design gallery */

  /* CB results */

  

  

  /* Panel hero */


  /* Case section */


  /* Email strategy flow pills */
  .es-flow-pills{ flex-direction:column; align-items:stretch; gap:8px; }
  .es-flow-pill{ width:100%; justify-content:flex-start; padding:13px 18px; font-size:13.5px; }
  .es-email-previews{ grid-template-columns:1fr; gap:14px; }

  /* Breakdown */
  
}

/* ===== PORTFOLIO BELOW CONTENT SECTION ===== */

/* Portfolio inside Design tab panel */
.design-portfolio-wrap{
  margin-top:0;
  padding-top:clamp(32px,4vw,52px);
}
.design-portfolio-wrap .portfolio-brands,
.design-portfolio-wrap .portfolio-filter,
.design-portfolio-wrap .portfolio-grid-wrap,
.design-portfolio-wrap .portfolio-footer-row{
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
.portfolio-hero{
  max-width:100%;width:100%;margin:0 auto;
  padding:clamp(36px,5vw,56px) clamp(36px,6vw,80px);
  display:flex;align-items:center;justify-content:space-between;
  gap:48px;margin-bottom:clamp(48px,6vw,80px);
  position:relative;
  overflow:hidden;
  border-radius:24px;
  isolation:isolate;
  background:linear-gradient(135deg,#EAF3F5,#F7FAFA);
}
/* Mesh gradient accent (disabled) */
.portfolio-hero::before{
  display:none;
}
.portfolio-hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:transparent;
  pointer-events:none;
}
.portfolio-hero-left{flex:1 1 420px;min-width:0;max-width:520px;text-align:left;}
.portfolio-eyebrow{
  font-size:11px;font-weight:600;color:var(--cyan);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;
  text-align:left;
}
.portfolio-hero-left h2{
  font-size:clamp(30px,4vw,52px);font-weight:800;
  letter-spacing:-.03em;line-height:1.08;
  color:var(--white);margin-bottom:14px;
  text-align:left;
}
.portfolio-hero-left h2 .green{color:var(--cyan);}
.portfolio-hero-left p{
  font-size:15px;color:rgba(30,45,48,.75);line-height:1.55;margin-bottom:24px;
  text-align:left;
}
.portfolio-hero-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cyan);color:var(--on-accent);
  padding:10px 26px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  transition:all .2s var(--ease);text-decoration:none;
  white-space:nowrap;
}
.portfolio-hero-cta:hover{transform:translateY(-2px);box-shadow:none;}

/* fanned email cards */
.portfolio-fan{
  flex:1 1 320px;max-width:460px;
  width:clamp(260px,36vw,460px);
  height:clamp(300px,38vw,480px);
  margin:24px clamp(16px,3vw,36px) 24px clamp(8px,2vw,28px);
  position:relative;
  --px:0; --py:0;
}
.fan-glow{
  display:none;
}

.fan-card{
  position:absolute;
  width:clamp(140px,16vw,210px);
  height:clamp(240px,28vw,370px);
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(30,45,48,.15);
  box-shadow:none;
  background:#fff;
  opacity:0;
  transition:transform .45s cubic-bezier(.22,.9,.32,1), box-shadow .35s var(--ease);
  animation:fan-card-in .8s var(--ease) forwards;
  will-change:transform;
}
.fan-card img{width:100%;height:100%;object-fit:cover;object-position:top;}

/* Entrance: cards slide up + fan out into place, staggered */
@keyframes fan-card-in{
  from{opacity:0;transform:translateY(40px) scale(.92) rotate(0deg);}
  to{opacity:1;transform:translateY(0) scale(1) rotate(var(--rot));}
}
.fan-card.fan-left {
  left:0;top:14%;
  --rot:-6deg; --depth:1;
  z-index:1;
  animation-delay:.05s;
}
.fan-card.fan-mid {
  left:23%;top:9%;
  --rot:3deg; --depth:1.6;
  z-index:2;
  animation-delay:.2s;
}
.fan-card.fan-right{
  left:40%;top:18%;
  --rot:-3deg; --depth:2.3;
  z-index:3;
  animation-delay:.35s;
}
/* settle to final rotation after entrance; parallax tilt is layered on top via --px/--py */
.fan-card.fan-left,.fan-card.fan-mid,.fan-card.fan-right{
  transform:
    translate(calc(var(--px) * var(--depth) * 1px), calc(var(--py) * var(--depth) * 1px))
    rotate(calc(var(--rot) + var(--px) * .025deg));
}

/* Hover: subtle lift + de-rotate + glow, card rises above its neighbors (parallax pauses on the hovered card so it reads as "selected") */
.fan-card:hover{
  transform:translateY(-14px) scale(1.035) rotate(0deg);
  box-shadow:none;
  z-index:5;
}
.portfolio-fan.is-tilting .fan-card{transition:transform .12s linear, box-shadow .35s var(--ease);}
@media (prefers-reduced-motion: reduce){
  .fan-card{animation:none;opacity:1;}
  .fan-glow{animation:none;}
}

/* brand logos bar */
.portfolio-brands{
  max-width:var(--maxw);margin:0 auto clamp(40px,5vw,64px);
  padding:0 clamp(20px,4vw,60px);
  padding-top:20px;padding-bottom:20px;
}
.portfolio-brands-label{
  font-size:11px;font-weight:600;color:rgba(30,45,48,.3);
  text-transform:uppercase;letter-spacing:2px;text-align:center;margin-bottom:16px;
}
.portfolio-brands-row{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:clamp(20px,3vw,44px);
}
.portfolio-brands-row span{
  font-size:clamp(12px,1.4vw,14px);font-weight:700;
  color:rgba(30,45,48,.22);letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap;
}

/* vertical filter tabs */
.portfolio-filter{
  max-width:var(--maxw);margin:0 auto clamp(28px,3.5vw,44px);
  padding:0 clamp(20px,4vw,60px);
}
.portfolio-filter-label{
  font-size:11px;font-weight:600;color:rgba(30,45,48,.3);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:14px;
}
.portfolio-tabs{
  display:flex;flex-wrap:wrap;gap:10px;
}
.ptab{
  padding:8px 16px;border-radius:999px;
  font-size:13px;font-weight:600;
  background:rgba(30,45,48,.05);
  color:rgba(30,45,48,.5);
  border:1px solid rgba(30,45,48,.08);
  cursor:pointer;transition:all .2s var(--ease);
  white-space:nowrap;
}
.ptab.active,.ptab:hover{
  background:rgba(85,148,163,.1);
  color:var(--cyan);
  border-color:rgba(85,148,163,.3);
}
.ptab.active{border-color:rgba(85,148,163,.5);}

/* portfolio grid */
.portfolio-grid-wrap{
  max-width:1320px;margin:0 auto;
  padding:0 clamp(16px,4vw,48px);
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:clamp(14px,2vw,24px);
  justify-content:center;
}
/* cap each card so it never gets too wide */
/* ══ ENHANCED PORTFOLIO CARDS ══ */
.pcard{
  max-width:320px;
  width:100%;
  margin:0 auto;
  border-radius:18px;overflow:hidden;
  background:var(--card);
  border:1px solid rgba(30,45,48,.07);
  display:flex;flex-direction:column;
  cursor:pointer;
  position:relative;
  transition:transform .4s cubic-bezier(.22,.9,.32,1.1),
              box-shadow .4s var(--ease),
              border-color .3s var(--ease);
  /* stagger animation on grid entry */
  opacity:0;
  animation:pcard-enter .55s var(--ease) forwards;
}
.pcard:nth-child(1){animation-delay:.04s;}
.pcard:nth-child(2){animation-delay:.09s;}
.pcard:nth-child(3){animation-delay:.14s;}
.pcard:nth-child(4){animation-delay:.19s;}
.pcard:nth-child(5){animation-delay:.24s;}
.pcard:nth-child(6){animation-delay:.29s;}
.pcard:nth-child(7){animation-delay:.34s;}
.pcard:nth-child(8){animation-delay:.39s;}
.pcard:nth-child(9){animation-delay:.44s;}
.pcard:nth-child(10){animation-delay:.49s;}
.pcard:nth-child(11){animation-delay:.54s;}
.pcard:nth-child(12){animation-delay:.59s;}
.pcard:nth-child(13){animation-delay:.64s;}
.pcard:nth-child(14){animation-delay:.69s;}
.pcard:nth-child(15){animation-delay:.74s;}
.pcard:nth-child(16){animation-delay:.79s;}
.pcard:nth-child(17){animation-delay:.84s;}
.pcard:nth-child(18){animation-delay:.89s;}
.pcard:nth-child(19){animation-delay:.94s;}
.pcard:nth-child(20){animation-delay:.99s;}
.pcard:nth-child(21){animation-delay:1.04s;}
.pcard:nth-child(22){animation-delay:1.09s;}
.pcard:nth-child(23){animation-delay:1.14s;}
.pcard:nth-child(24){animation-delay:1.19s;}
.pcard:nth-child(25){animation-delay:1.24s;}
.pcard:nth-child(26){animation-delay:1.29s;}
.pcard:nth-child(27){animation-delay:1.34s;}
.pcard:nth-child(28){animation-delay:1.39s;}
.pcard:nth-child(29){animation-delay:1.44s;}
.pcard:nth-child(30){animation-delay:1.49s;}
@keyframes pcard-enter{
  from{opacity:0;transform:translateY(32px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .pcard{animation:none;opacity:1;}
}
.pcard:hover{
  transform:translateY(-8px) scale(1.012);
  box-shadow:none;
  border-color:rgba(85,148,163,.35);
}
/* Glowing border trace on hover */
.pcard::after{
  content:'';
  position:absolute;inset:0;
  border-radius:18px;
  opacity:0;
  background:linear-gradient(135deg,rgba(85,148,163,.07) 0%,transparent 60%);
  transition:opacity .4s var(--ease);
  pointer-events:none;
  z-index:0;
}
.pcard:hover::after{opacity:1;}

/* ── Image container ── */
.pcard-img{
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:linear-gradient(160deg,#001525,#002038);
  position:relative;
  flex-shrink:0;
}

/* Ambient gradient that fades bottom of image */
.pcard-img::before{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 55%,
    rgba(5,15,25,.9) 100%);
  pointer-events:none;
  transition:opacity .3s;
}
.pcard:hover .pcard-img::before{opacity:.7;}

/* Shimmer sweep on hover enter */
.pcard-img::after{
  content:'';
  position:absolute;
  inset:0;z-index:2;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(30,45,48,.09) 50%,
    transparent 70%);
  transform:translateX(-100%);
  pointer-events:none;
  transition:none;
}
.pcard:hover .pcard-img::after{
  animation:card-shimmer .65s ease forwards;
}
@keyframes card-shimmer{
  from{transform:translateX(-100%);}
  to{transform:translateX(200%);}
}

/* Scroll progress bar — removed */


/* ══ Placeholder skeleton system (used inside .pcard-placeholder) ══ */
.pcard-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.ph-header{
  height:52px;display:flex;align-items:center;
  padding:0 14px;gap:9px;flex-shrink:0;
}
.ph-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;opacity:.9;}
.ph-lines{flex:1;display:flex;flex-direction:column;gap:4px;}
.ph-line{height:6px;border-radius:3px;background:rgba(30,45,48,.22);}
.ph-line.short{width:55%;background:rgba(30,45,48,.12);}
.ph-body{
  flex:1;padding:16px 14px;
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
}
.ph-row{height:8px;border-radius:3px;background:rgba(30,45,48,.12);}
.ph-row.title{height:10px;width:75%;background:rgba(30,45,48,.2);}
.ph-row.w90{width:90%;}
.ph-row.w65{width:65%;}
.ph-row.w80{width:80%;}
.ph-row.w55{width:55%;}
.ph-row.w85{width:85%;}
.ph-row.w70{width:70%;}
.ph-row.w75{width:75%;}
.ph-block{border-radius:8px;flex-shrink:0;}
.ph-block.tall{height:80px;}
.ph-block.mid{height:60px;}
.ph-btn{height:32px;width:50%;border-radius:6px;flex-shrink:0;opacity:.85;}
.ph-btn-ghost{
  height:32px;width:50%;border-radius:6px;flex-shrink:0;
  background:rgba(30,45,48,.05);border:1px solid rgba(30,45,48,.1);
}

/* Real email image sits on top of placeholder */
.pcard-img img.email-img{
  position:absolute;inset:0;
  width:100%;height:auto;min-height:100%;
  object-fit:cover;object-position:top;
  display:block;
  transform:translateY(0);
  transition:transform 0s;
  will-change:transform;
  z-index:1;
  --pcard-scroll-dist:0px;
}
.pcard:hover .pcard-img img.email-img{
  animation:pcard-scroll-pan 7s ease-in-out infinite alternate;
}
@keyframes pcard-scroll-pan{
  from{transform:translateY(0);}
  to{transform:translateY(var(--pcard-scroll-dist));}
}

/* "SCROLL TO EXPLORE" animated hint */
.pcard-hint{
  position:absolute;bottom:14px;left:50%;
  transform:translateX(-50%) translateY(6px);
  z-index:5;
  display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(30,45,48,.14);
  border-radius:999px;
  padding:5px 12px 5px 10px;
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(30,45,48,.85);
  white-space:nowrap;
  opacity:0;
  transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.hint-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  animation:hint-pulse 1.4s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes hint-pulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.5);opacity:.6;}
}
.pcard:hover .pcard-hint{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ══ ENHANCED EMAIL PREVIEW MODAL ══ */
.epv-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(16px) saturate(120%);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease);
}
.epv-overlay.open{opacity:1;pointer-events:all;}
.epv-inner{
  position:relative;
  /* 600px — true email width */
  width:clamp(340px,600px,calc(100vw - 40px));
  max-height:92vh;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px rgba(30,45,48,.06);
  transform:scale(.88) translateY(28px);
  transition:transform .42s cubic-bezier(.34,1.46,.64,1);
  display:flex;flex-direction:column;
}
.epv-overlay.open .epv-inner{transform:scale(1) translateY(0);}
/* top bar — matches reference: dark bg, brand name left, badge pill, × right */
.epv-bar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;
  background:var(--card);
  border-bottom:1px solid rgba(30,45,48,.06);
  min-height:52px;
}
.epv-bar-left{display:flex;align-items:center;gap:10px;}
.epv-title{
  font-size:15px;font-weight:700;color:var(--white);
  letter-spacing:-.02em;white-space:nowrap;
}
.epv-badge{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--white);
  /* background set by JS */
}
.epv-view-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:999px;
  font-size:11px;font-weight:700;
  background:var(--cyan);color:var(--on-accent);
  border:none;cursor:pointer;
  margin-left:auto;
  transition:opacity .15s;
  font-family:var(--font);
  flex-shrink:0;
}
.epv-view-btn:hover{opacity:.88;}
.epv-view-btn svg{width:12px;height:12px;stroke:var(--on-accent);fill:none;stroke-width:2.5;}
.epv-close{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(30,45,48,.1);border:1px solid rgba(30,45,48,.15);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s, border-color .15s;
}
.epv-close:hover{background:rgba(30,45,48,.22);border-color:rgba(30,45,48,.3);}
.epv-close svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.4;}
/* scrollable email body */
.epv-scroll{
  overflow-y:auto;
  flex:1;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.15) transparent;
}
.epv-scroll::-webkit-scrollbar{width:5px;}
.epv-scroll::-webkit-scrollbar-track{background:transparent;}
.epv-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:4px;}
.epv-scroll img{width:100%;height:auto;display:block;}
/* scroll-down hint */
.epv-scroll-hint{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 12px;
  background:#f7f7f7;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:11px;color:rgba(0,0,0,.4);font-weight:500;
  transition:opacity .3s;
}
.epv-scroll-hint svg{width:12px;height:12px;stroke:rgba(0,0,0,.35);fill:none;stroke-width:2;}
.epv-scroll-hint.hidden{opacity:0;pointer-events:none;}

/* Loading state inside modal */
.epv-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 20px;gap:14px;
  background:#f5f5f5;
}
.epv-spinner{
  width:36px;height:36px;
  border:3px solid rgba(0,0,0,.08);
  border-top-color:#5594A3;
  border-radius:50%;
  animation:epv-spin .7s linear infinite;
}
@keyframes epv-spin{ to{ transform:rotate(360deg); } }
.epv-loading-text{font-size:13px;color:rgba(0,0,0,.4);font-weight:500;}

/* Placeholder inside modal (when no real img src, or on error) */
.epv-placeholder{
  padding:16px;
  background:#f5f5f5;
}
.epv-placeholder .ph-header{
  background:#e0f2e9;border-radius:10px 10px 0 0;
  margin-bottom:0;border-bottom:1px solid #c8e6d6;
}
.epv-placeholder .ph-body{background:#fff;border-radius:0 0 10px 10px;padding:20px 16px;}
.pcard-badge{
  position:absolute;bottom:10px;left:50%;
  transform:translateX(-50%) translateY(0);
  background:rgba(0,0,0,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(30,45,48,.13);
  border-radius:999px;padding:4px 12px;
  font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(30,45,48,.75);
  z-index:3;
  white-space:nowrap;
  transition:opacity .25s, transform .25s;
}
/* hide badge when hover hint is visible */
.pcard:hover .pcard-badge{
  opacity:0;
  transform:translateX(-50%) translateY(4px);
}
.pcard-body{
  padding:16px 18px 18px;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  position:relative;z-index:1;
  background:var(--card);
  border-top:1px solid rgba(30,45,48,.05);
}
.pcard-body h4{
  font-size:15px;font-weight:700;color:var(--white);margin:0;letter-spacing:-.01em;
}
.pcard-body small{
  display:block;font-size:12px;color:rgba(30,45,48,.4);margin-top:2px;font-weight:400;
}
.pcard-arrow{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(30,45,48,.06);
  border:1px solid rgba(30,45,48,.1);
  border-radius:999px;padding:7px 14px;flex-shrink:0;
  font-size:11px;font-weight:800;letter-spacing:.08em;
  color:rgba(30,45,48,.7);text-transform:uppercase;
  transition:background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.pcard:hover .pcard-arrow{
  background:var(--cyan);border-color:var(--cyan);color:var(--on-accent);
  box-shadow:none;
}
.pcard-arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;flex-shrink:0;}

/* load more / behance row */
.portfolio-footer-row{
  max-width:var(--maxw);margin:clamp(32px,4vw,52px) auto 0;
  padding:0 clamp(20px,4vw,60px);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(30,45,48,.06);
  padding-top:clamp(24px,3vw,36px);
}
.portfolio-footer-row p{
  font-size:14px;color:rgba(30,45,48,.45);
  font-style:italic;
}
.portfolio-footer-btns{display:flex;gap:12px;flex-wrap:wrap;}
.pfooter-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;border-radius:999px;
  font-size:13px;font-weight:600;
  border:1px solid rgba(30,45,48,.15);
  color:rgba(30,45,48,.7);
  background:rgba(30,45,48,.05);
  text-decoration:none;transition:all .2s var(--ease);
  white-space:nowrap;
}
.pfooter-btn:hover{border-color:rgba(85,148,163,.4);color:var(--cyan);background:rgba(85,148,163,.08);}
.pfooter-btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}

/* responsive */
@media(max-width:1180px){
  .portfolio-hero{gap:28px;}
  .portfolio-hero-left{flex:1 1 360px;}
  .portfolio-fan{flex:0 1 280px;width:clamp(220px,30vw,300px);height:clamp(260px,32vw,340px);}
}
@media(max-width:960px){
  .portfolio-hero{flex-direction:column;text-align:left;}
  .portfolio-hero-left{text-align:left;flex:1 1 auto;max-width:100%;}
  .portfolio-fan{width:100%;max-width:360px;margin:0 auto;}
  .portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));}
  .pcard{max-width:100%;}
}
@media(max-width:600px){
  .portfolio-fan{display:none;}
  .portfolio-hero{padding:clamp(28px,7vw,40px) clamp(20px,5vw,28px);}
  .portfolio-hero-left{max-width:100%;}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .pcard{max-width:100%;}
  .portfolio-footer-row{flex-direction:column;align-items:flex-start;}
}
@media(max-width:380px){
  .portfolio-grid{grid-template-columns:1fr;}
}

/* ==================================================================
   BLOG PAGE
   ================================================================== */

/* ---------- Hero — eyebrow + heading left, description lined up top-right ---------- */
.blog-hero{padding:clamp(64px,10vw,96px) 0 clamp(28px,4vw,40px);}
.blog-hero .container{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(20px,4vw,48px);flex-wrap:wrap;text-align:left;
}
.blog-hero-heading{
  font-size:clamp(32px,5.5vw,56px);line-height:1.1;letter-spacing:-.02em;
  font-family:var(--font);font-weight:700;
  max-width:620px;margin:10px 0 0;
  flex:1 1 420px;
}
.blog-hero-sub{
  max-width:340px;margin:0;
  font-size:15px;line-height:1.6;color:var(--dim);
  flex:0 1 320px;
}

/* ---------- Featured post — same borderless image+arrow+tags language as the grid ---------- */
.blog-featured-card{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,40px);
  max-width:1180px;margin:0 auto;
  text-decoration:none;color:inherit;
}
.blog-featured-img{
  position:relative;overflow:hidden;border-radius:24px 24px 0 24px;
  min-height:280px;background:#e3e5e5;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease);
}
.blog-featured-card:hover .blog-featured-img{transform:translateY(-4px);}
.blog-featured-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.blog-featured-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  padding:6px 14px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:var(--cyan);color:var(--on-accent);
}
.blog-featured-body{padding:0;display:flex;flex-direction:column;justify-content:center;}
.blog-featured-body h2{
  text-align:left;margin:0 0 10px;
  font-size:clamp(22px,2.8vw,32px);line-height:1.25;font-weight:700;
}
.blog-featured-body p{font-size:15px;line-height:1.6;color:var(--dim);margin:0 0 16px;}

/* ---------- Tags — dark pills under the title, shared by featured + grid cards ---------- */
.blog-card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.blog-tag{
  display:inline-flex;align-items:center;
  padding:10px 14px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:#0d0d0d;color:#fff;
}

/* ---------- Filter pills ---------- */
.blog-filters{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:0 0 clamp(28px,3.5vw,40px);
}
.blog-filter{
  padding:9px 18px;border-radius:999px;
  font-family:var(--font);font-size:13px;font-weight:600;
  background:rgba(30,45,48,.05);color:rgba(30,45,48,.5);
  border:1px solid rgba(30,45,48,.08);
  cursor:pointer;transition:all .2s var(--ease);white-space:nowrap;
}
.blog-filter.active,.blog-filter:hover{
  background:rgba(85,148,163,.1);color:var(--cyan);border-color:rgba(85,148,163,.3);
}
.blog-filter.active{border-color:rgba(85,148,163,.5);}

/* ---------- Grid — simple card: white box, rounded image on top, title/description/tag pills below. ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:32px;row-gap:64px;
}
.blog-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  opacity:0;animation:pcard-enter .5s var(--ease) forwards;
}
.blog-card:nth-child(1){animation-delay:.04s;}
.blog-card:nth-child(2){animation-delay:.09s;}
.blog-card:nth-child(3){animation-delay:.14s;}
.blog-card:nth-child(4){animation-delay:.19s;}
.blog-card:nth-child(5){animation-delay:.24s;}
.blog-card:nth-child(6){animation-delay:.29s;}
@media (prefers-reduced-motion: reduce){
  .blog-card{animation:none;opacity:1;}
}
.blog-card-link{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
}
.blog-card-media-wrap{position:relative;}
.blog-card-img{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;
  background:#e3e5e5; /* neutral grey placeholder until real photos are dropped in — never a colour gradient */
}
.blog-card-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
  transition:transform .5s ease;
}
.blog-card-link:hover .blog-card-img img{transform:scale(1.04);}
.blog-card-body{padding:20px;display:flex;flex-direction:column;}
.blog-card-body h3{
  text-align:left;margin:0;
  font-size:23px;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-body p{
  font-size:15px;line-height:1.5;color:rgba(30,45,48,.6);
  margin:10px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

@media(max-width:900px){
  .blog-featured-card{grid-template-columns:1fr;}
  .blog-featured-img{min-height:220px;aspect-ratio:16/10;}
  .blog-hero .container{flex-direction:column;align-items:flex-start;}
  /* flex-basis (the "320px"/"420px" in flex:...) becomes a HEIGHT once the
     container switches to column direction, reserving that much vertical
     space even though the text itself is much shorter — reset both to
     auto-sized here, same class of bug already hit and fixed in the footer */
  .blog-hero-heading{flex:none;}
  .blog-hero-sub{flex:none;max-width:100%;margin-top:16px;}
  .blog-grid{grid-template-columns:repeat(2,1fr);column-gap:24px;row-gap:48px;}
}
@media(max-width:600px){
  .blog-hero{padding:44px 0 24px;}
  .blog-grid{grid-template-columns:1fr;row-gap:40px;}
}

/* ==================================================================
   LEGAL PAGES (Privacy Policy / Terms of Use)
   ================================================================== */
.legal-hero{padding:clamp(56px,9vw,84px) 0 clamp(24px,4vw,32px);text-align:center;}
.legal-hero-heading{
  font-size:clamp(30px,4.8vw,48px);line-height:1.1;letter-spacing:-.02em;
  font-family:var(--font);font-weight:700;
}
.legal-updated{margin-top:14px;font-size:13px;color:var(--dim2);}

.legal-wrap{
  max-width:680px;
  margin:0 auto;
}
.legal-content{max-width:680px;}
.legal-content > p:first-of-type{
  font-size:16px;color:var(--dim);line-height:1.75;margin-bottom:8px;
}
.legal-section{
  padding-top:28px;margin-top:28px;
  border-top:1px solid var(--card-border);
  scroll-margin-top:110px;
}
.legal-section:first-of-type{border-top:none;margin-top:36px;padding-top:0;}
.legal-section h2{
  text-align:left;font-size:clamp(19px,2.2vw,24px);
  margin-bottom:14px;letter-spacing:-.015em;
}
.legal-section h3{
  text-align:left;font-size:15px;font-weight:700;
  margin:20px 0 8px;color:var(--white);
}
.legal-section p{
  font-size:14.5px;line-height:1.75;color:var(--dim);margin-bottom:14px;
}
.legal-section ul,.legal-section ol{
  margin:0 0 14px;padding-left:20px;
  display:flex;flex-direction:column;gap:8px;
}
.legal-section li{font-size:14.5px;line-height:1.65;color:var(--dim);}
.legal-section li strong{color:var(--white);}
.legal-section a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px;}
.legal-contact-card{
  margin-top:8px;padding:18px 20px;border-radius:14px;
  background:var(--card);border:1px solid var(--card-border);
}
.legal-contact-card p{margin-bottom:4px;}
.legal-contact-card p:last-child{margin-bottom:0;}