/* ============================================================
   DOCHIVA PHARMATECH — Shared Stylesheet
   Light black-&-white theme · dark bands for hero/CTA/footer
   Accent: logo cyan (#28B3E6)
   Type: Cormorant Garamond (display) · EB Garamond (body) · system sans (micro)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --paper:#ffffff;          /* main background */
  --mist:#f4f6f8;           /* alternate light section */
  --ink:#0a0b0d;            /* near-black (text + dark bands) */
  --ink-2:#f6f8fa;          /* subtle raised surface (light) */
  --surface:#ffffff;
  --surface-2:#eef1f4;

  --accent:#28b3e6;         /* logo cyan — fills, graphics */
  --accent-ink:#0a72a6;     /* deeper cyan — accent text on white */
  --accent-glow:rgba(40,179,230,.40);

  --t-hi:#0a0b0d;
  --t-mid:rgba(10,11,13,.64);
  --t-lo:rgba(10,11,13,.46);
  --line:rgba(10,11,13,.14);
  --line-soft:rgba(10,11,13,.08);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"EB Garamond",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --container:1240px;
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(80px,11vw,168px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:76px;
}

/* Dark context: redefine tokens so every child flips to light-on-dark */
.band-dark{
  --t-hi:rgba(255,255,255,.95);
  --t-mid:rgba(255,255,255,.66);
  --t-lo:rgba(255,255,255,.48);
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.09);
  --surface:#141619;
  --surface-2:#0f1114;
  --ink-2:#16181c;
  background:var(--ink);
  color:rgba(255,255,255,.95);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--t-hi);
  font-family:var(--body);font-size:clamp(1.02rem,.4vw + .95rem,1.18rem);
  line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:500;font-family:var(--serif);line-height:1.04;letter-spacing:-.015em;color:var(--t-hi)}
p{margin:0}
::selection{background:var(--accent);color:#04222e}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.section--mist{background:var(--mist)}
.center{text-align:center}
.stack>*+*{margin-top:1.1em}

/* ---------- Type primitives ---------- */
.eyebrow{
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--t-lo);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--accent);display:inline-block}
.eyebrow--center{justify-content:center}

.display{font-family:var(--serif);font-weight:500;line-height:1.0;letter-spacing:-.02em}
.display-xl{font-size:clamp(3rem,8.4vw,6.6rem)}
.display-l{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.h2{font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.05}
.h3{font-size:clamp(1.35rem,2.1vw,1.7rem)}
.lede{font-size:clamp(1.16rem,1.5vw,1.42rem);color:var(--t-mid);line-height:1.6;max-width:60ch}
.muted{color:var(--t-mid)}
.accent{color:var(--accent-ink)}
.italic{font-style:italic}
.serif-num{font-family:var(--serif)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.95em 1.6em;border-radius:2px;border:1px solid transparent;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
  white-space:nowrap;
}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--primary{background:var(--accent);color:#052430}
.btn--primary:hover{background:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:var(--t-hi);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--t-hi)}
.btn--light{background:var(--ink);color:#fff}
.btn--light:hover{background:var(--accent);color:#052430}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.textlink{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-hi);display:inline-flex;align-items:center;gap:.6em;
  padding-bottom:.35em;border-bottom:1px solid var(--line);transition:border-color .4s var(--ease),color .4s var(--ease)
}
.textlink .ar{transition:transform .4s var(--ease)}
.textlink:hover{color:var(--accent-ink);border-color:var(--accent)}
.textlink:hover .ar{transform:translateX(4px)}

/* ---------- Meridian (ECG signature) ---------- */
.meridian{width:100%;height:26px;overflow:visible;opacity:.7}
.meridian path{fill:none;stroke:var(--accent);stroke-width:1.1;
  stroke-dasharray:1400;stroke-dashoffset:1400;opacity:.6}
.meridian .pulse{fill:none;stroke:var(--accent);stroke-width:1.4;filter:drop-shadow(0 0 6px var(--accent-glow))}
.is-visible .meridian path{animation:draw 3.4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.divider{display:flex;align-items:center;gap:1.4rem;color:var(--t-lo)}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line-soft)}
.plus{color:var(--accent);font-family:var(--sans);font-weight:400}

/* ============================================================
   HEADER / NAV  (transparent over dark hero → solid white on scroll)
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease),box-shadow .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(120%);border-bottom-color:var(--line-soft);box-shadow:0 10px 40px -30px rgba(0,0,0,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

.brand{display:flex;align-items:center;gap:.7rem;line-height:1}
.brand__mark{width:auto;height:38px;flex:none}
.brand__name{display:block;font-family:var(--serif);font-size:1.42rem;font-weight:600;letter-spacing:.02em;line-height:1;color:#fff;transition:color .4s var(--ease)}
.brand__sub{display:block;font-family:var(--sans);font-size:.54rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:4px;transition:color .4s var(--ease)}
.site-header.is-solid .brand__name{color:var(--ink)}
.site-header.is-solid .brand__sub{color:var(--t-lo)}

.nav__links{display:flex;align-items:center;gap:clamp(1.4rem,3vw,3rem);list-style:none;margin:0;padding:0}
.nav__links a{
  font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);position:relative;padding-block:.4em;transition:color .35s var(--ease)
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:width .4s var(--ease)}
.nav__links a:hover,.nav__links a.is-current{color:#fff}
.site-header.is-solid .nav__links a{color:var(--t-mid)}
.site-header.is-solid .nav__links a:hover,.site-header.is-solid .nav__links a.is-current{color:var(--ink)}
.nav__links a.is-current::after,.nav__links a:hover::after{width:100%}

.nav__cta{display:flex;align-items:center;gap:1rem}
.nav__toggle{display:none;background:none;border:0;width:34px;height:34px;position:relative;color:#fff}
.site-header.is-solid .nav__toggle{color:var(--ink)}
body.menu-open .nav__toggle{color:var(--ink)}
.nav__toggle span{position:absolute;left:6px;right:6px;height:1.4px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.nav__toggle span:nth-child(1){top:12px}
.nav__toggle span:nth-child(2){bottom:12px}
body.menu-open .nav__toggle span:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menu-open .nav__toggle span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* mobile overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:55;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s
}
body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none}
.mobile-menu a{font-family:var(--serif);font-size:clamp(2.2rem,9vw,3.4rem);color:var(--t-hi);padding:.18em 0;border-bottom:1px solid var(--line-soft)}
.mobile-menu a:hover{color:var(--accent-ink)}
.mobile-menu__foot{margin-top:2.4rem;color:var(--t-lo);font-family:var(--sans);font-size:.78rem;letter-spacing:.06em}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);will-change:opacity}
.hero__slide.is-active{opacity:1;z-index:2}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s ease-out}
.hero__slide.is-active .hero__img{transform:scale(1)}
.hero__slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 34%,rgba(0,0,0,.48) 68%,rgba(0,0,0,.9) 100%)}
.hero__grain{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 80% at 20% 90%,rgba(40,179,230,.12),transparent 60%)}

.hero__inner{position:relative;z-index:4;width:100%;padding-bottom:clamp(3.4rem,7vw,6rem)}
.hero__grid{display:grid;grid-template-columns:1fr;gap:2rem}
.hero__eyebrow{margin-bottom:1.4rem}
.hero__slide-content{display:none}
.hero__slide-content.is-active{display:block;animation:heroUp 1s var(--ease) both}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero__title{font-size:clamp(2.7rem,7.4vw,6rem);max-width:16ch;font-weight:500;color:#fff}
.hero__sub{margin-top:1.5rem;max-width:52ch;color:rgba(255,255,255,.82);font-size:clamp(1.1rem,1.5vw,1.36rem);line-height:1.55}
.hero__tags{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem}
.hero__tag{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.24);padding:.5em 1em;border-radius:2px;background:rgba(255,255,255,.06)}
.hero__actions{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* hero controls */
.hero__foot{position:absolute;left:0;right:0;bottom:0;z-index:5}
.hero__foot-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem var(--gutter);border-top:1px solid rgba(255,255,255,.14);max-width:var(--container);margin-inline:auto}
.hero__index{font-family:var(--serif);font-size:1.05rem;letter-spacing:.14em;color:rgba(255,255,255,.66)}
.hero__index b{color:#fff;font-weight:600}
.hero__progress{flex:1;height:1px;background:rgba(255,255,255,.2);position:relative;max-width:320px;margin-inline:auto}
.hero__progress i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);display:block}
.hero__nav{display:flex;gap:.4rem}
.hero__nav button{width:44px;height:44px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);
  color:#fff;border-radius:2px;display:grid;place-items:center;transition:border-color .35s,background .35s,color .35s}
.hero__nav button:hover{border-color:var(--accent);color:var(--accent)}
.hero__meridian{position:absolute;left:0;right:0;bottom:76px;z-index:4;opacity:.5;pointer-events:none}

/* ============================================================
   GENERIC SECTIONS
   ============================================================ */
.section-head{max-width:64ch}
.section-head .eyebrow{margin-bottom:1.4rem}
.section-head.center{margin-inline:auto}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,6rem);align-items:center}
.split--wideimg{grid-template-columns:1.05fr .95fr}
.split__media{position:relative;border-radius:3px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,0,0,.5)}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1.1s var(--ease)}
.split__media:hover img{transform:scale(1.04)}
.split__media--wide img{aspect-ratio:3/2}
.frame-tag{position:absolute;left:16px;bottom:16px;z-index:2;
  font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);padding:.5em .9em;border:1px solid rgba(255,255,255,.2)}

/* mission / vision */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem)}
.mv__card{border:1px solid var(--line);border-radius:3px;padding:clamp(1.8rem,3vw,2.6rem);background:var(--surface)}
.mv__card .eyebrow{margin-bottom:1.1rem}
.mv__card h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.7rem}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.stat{background:var(--surface);padding:clamp(1.6rem,3vw,2.4rem)}
.stat__num{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;font-weight:500;color:var(--ink)}
.stat__num .u{color:var(--accent-ink)}
.stat__label{margin-top:.7rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-lo)}

/* why choose — feature rows */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.feature{background:var(--surface);padding:clamp(1.7rem,3vw,2.4rem);transition:background .5s var(--ease)}
.feature:hover{background:var(--mist)}
.feature__ic{width:34px;height:34px;color:var(--accent-ink);margin-bottom:1.3rem}
.feature h3{font-size:1.28rem;margin-bottom:.6rem}
.feature p{color:var(--t-mid);font-size:1rem;line-height:1.6}
.feature__n{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;color:var(--t-lo);margin-bottom:1.1rem;display:block}

/* ============================================================
   SERVICES CARDS
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.svc{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.svc:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 34px 60px -34px rgba(0,0,0,.4)}
.svc__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--surface-2)}
.svc__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter .7s var(--ease),transform 1s var(--ease)}
.svc:hover .svc__media img{filter:grayscale(0);transform:scale(1.05)}
.svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.12) 100%)}
.svc__ic{position:absolute;left:18px;top:18px;z-index:2;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);
  background:rgba(10,11,13,.42);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;border-radius:2px}
.svc__ic svg{width:20px;height:20px}
.svc__body{padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;flex:1}
.svc__kicker{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.9rem}
.svc h3{font-size:1.5rem;margin-bottom:.7rem}
.svc p{color:var(--t-mid);font-size:1rem;line-height:1.6}
.svc__pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.svc__pill{font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-mid);
  border:1px solid var(--line);border-radius:2px;padding:.4em .7em}
.svc__more{margin-top:auto;padding-top:1.4rem}

/* wide feature service (confidential/VIP) */
.svc-wide{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--surface)}
.svc-wide__media{position:relative;min-height:340px;background:var(--surface-2)}
.svc-wide__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.svc-wide__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12))}
.svc-wide__body{padding:clamp(2rem,4vw,3.4rem)}
.svc-wide__list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.6rem}
.svc-wide__list li{position:relative;padding-left:1.3em;color:var(--t-mid);font-size:1rem}
.svc-wide__list li::before{content:"+";position:absolute;left:0;color:var(--accent);font-family:var(--sans)}

/* ============================================================
   PATIENT JOURNEY
   ============================================================ */
.journey{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line)}
.jstep{padding:2rem clamp(1rem,1.6vw,1.5rem) 0;border-right:1px solid var(--line);position:relative}
.jstep:last-child{border-right:0}
.jstep__n{font-family:var(--serif);font-size:2.4rem;color:var(--t-lo);line-height:1}
.journey.is-visible .jstep__n{color:var(--accent-ink);transition:color .6s var(--ease) .2s}
.jstep__ic{width:30px;height:30px;color:var(--t-hi);margin:1.2rem 0 1rem}
.jstep h3{font-size:1.1rem;margin-bottom:.5rem;letter-spacing:-.01em}
.jstep p{color:var(--t-mid);font-size:.95rem;line-height:1.55}
.jstep__dot{position:absolute;right:-4px;top:calc(2rem + .4em);width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:0}
.journey.is-visible .jstep__dot{opacity:1;transition:opacity .5s .4s}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.partner{border:1px solid var(--line);border-radius:3px;padding:clamp(1.8rem,3vw,2.6rem);background:var(--surface);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.partner:hover{border-color:var(--line);box-shadow:0 30px 60px -40px rgba(0,0,0,.4)}
.partner__logo{width:60px;height:60px;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;
  color:var(--ink);font-family:var(--serif);font-size:1.5rem;margin-bottom:1.6rem}
.partner h3{font-size:1.4rem;margin-bottom:.6rem}
.partner p{color:var(--t-mid);font-size:1rem}
.partner__tag{margin-top:1.3rem;font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta{position:relative;overflow:hidden}
.cta__inner{padding-block:clamp(64px,9vw,120px);text-align:center;position:relative;z-index:2}
.cta__glow{position:absolute;inset:0;z-index:1;background:radial-gradient(60% 120% at 50% 120%,rgba(40,179,230,.22),transparent 60%)}
.cta h2{font-size:clamp(2.2rem,5vw,4rem);max-width:20ch;margin-inline:auto;color:#fff}
.cta .lede{margin:1.4rem auto 2.4rem}
.cta__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.quote{border:1px solid var(--line);border-radius:3px;padding:clamp(1.8rem,3vw,2.4rem);background:var(--surface);display:flex;flex-direction:column}
.quote__mark{font-family:var(--serif);font-size:3rem;line-height:.6;color:var(--accent);height:1.2rem}
.quote p{font-family:var(--serif);font-size:1.32rem;line-height:1.45;color:var(--t-hi);margin:1.4rem 0 auto;font-style:italic}
.quote__who{margin-top:1.6rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t-lo)}

/* ============================================================
   TIMELINE (About)
   ============================================================ */
.timeline{border-left:1px solid var(--line);margin-left:.5rem;padding-left:clamp(1.6rem,3vw,2.6rem)}
.tl{position:relative;padding-bottom:clamp(2rem,4vw,3rem)}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:calc(-1 * clamp(1.6rem,3vw,2.6rem) - 4.5px);top:.5em;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--paper)}
.tl__year{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.tl h3{font-size:1.4rem;margin:.5rem 0 .5rem}
.tl p{color:var(--t-mid);font-size:1rem}

/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.value{background:var(--surface);padding:clamp(1.6rem,3vw,2.2rem)}
.value__n{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;color:var(--t-lo)}
.value h3{font-size:1.24rem;margin:1rem 0 .5rem}
.value p{color:var(--t-mid);font-size:.98rem}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.3rem}
.field label{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-lo)}
.field input,.field textarea,.field select{
  background:var(--paper);border:1px solid var(--line);border-radius:2px;color:var(--ink);
  font-family:var(--body);font-size:1.05rem;padding:.85em 1em;transition:border-color .35s var(--ease),background .35s}
.field input::placeholder,.field textarea::placeholder{color:var(--t-lo)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--mist)}
.field textarea{resize:vertical;min-height:130px}
.contact__aside{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--surface)}
.contact__map{position:relative;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.contact__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;color:var(--accent-ink)}
.contact__rows{padding:clamp(1.6rem,3vw,2.2rem)}
.crow{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line-soft)}
.crow:last-child{border-bottom:0}
.crow__ic{color:var(--accent-ink);flex:none;width:22px;margin-top:2px}
.crow__k{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-lo);margin-bottom:.25rem}
.crow__v{font-size:1.08rem;color:var(--t-hi)}
.crow__v a:hover{color:var(--accent-ink)}
.form-note{font-family:var(--sans);font-size:.78rem;color:var(--t-lo);margin-top:.4rem;line-height:1.5}
.whatsapp{display:inline-flex;align-items:center;gap:.7em;margin-top:1.4rem;
  border:1px solid var(--line);border-radius:2px;padding:.9em 1.4em;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t-hi);transition:border-color .4s,background .4s,color .4s}
.whatsapp:hover{border-color:var(--accent);background:var(--accent);color:#052430}

/* ============================================================
   PAGE HERO (interior pages) — dark band
   ============================================================ */
.pagehero{position:relative;padding-top:calc(var(--nav-h) + clamp(64px,10vw,120px));padding-bottom:clamp(48px,7vw,88px);overflow:hidden}
.pagehero__bg{position:absolute;inset:0;z-index:0}
.pagehero__bg img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:grayscale(1)}
.pagehero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.92))}
.pagehero__inner{position:relative;z-index:2;max-width:70ch}
.pagehero .eyebrow{margin-bottom:1.6rem}
.pagehero h1{font-size:clamp(2.7rem,7vw,5.2rem);max-width:16ch;color:#fff}
.pagehero .lede{margin-top:1.6rem}

/* ============================================================
   FOOTER — dark band
   ============================================================ */
.site-footer{padding-block:clamp(56px,7vw,88px) 2.2rem}
.foot-logo{height:46px;width:auto;margin-bottom:1.2rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,3vw,3rem);padding-bottom:clamp(2.4rem,4vw,3.4rem);border-bottom:1px solid var(--line-soft)}
.foot-brand p{color:var(--t-mid);font-size:1rem;max-width:34ch}
.foot-col h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-lo);margin-bottom:1.2rem;font-weight:600}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.foot-col a{color:var(--t-mid);font-size:1rem;transition:color .3s}
.foot-col a:hover{color:var(--accent)}
.news{display:flex;gap:.5rem;margin-top:1rem}
.news input{flex:1;background:var(--ink-2);border:1px solid var(--line-soft);color:#fff;padding:.75em .9em;border-radius:2px;font-family:var(--body)}
.news input::placeholder{color:var(--t-lo)}
.news input:focus{outline:none;border-color:var(--accent)}
.news button{background:var(--accent);color:#052430;border:0;border-radius:2px;padding:0 1.1em;display:grid;place-items:center}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.8rem}
.foot-bottom p{color:var(--t-lo);font-family:var(--sans);font-size:.74rem;letter-spacing:.04em}
.socials{display:flex;gap:.5rem}
.socials a{width:38px;height:38px;border:1px solid var(--line-soft);border-radius:2px;display:grid;place-items:center;color:var(--t-mid);transition:border-color .35s,color .35s}
.socials a:hover{border-color:var(--accent);color:var(--accent)}
.foot-credit{text-align:center;padding-top:1.6rem;margin-top:1.4rem;border-top:1px solid var(--line-soft);
  font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;color:var(--t-lo)}
.foot-credit a{color:var(--t-mid);border-bottom:1px solid var(--line-soft);padding-bottom:1px;transition:color .3s,border-color .3s}
.foot-credit a:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}

/* SPA page (preview only) */
.page{display:none}
.page.is-active{display:block}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .journey{grid-template-columns:repeat(3,1fr)}
  .jstep:nth-child(3n){border-right:0}
  .jstep:nth-child(n+4){border-top:1px solid var(--line)}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--nav-h:66px}
  .nav__links,.nav__cta .btn{display:none}
  .nav__toggle{display:block}
  .split,.contact,.mv,.svc-wide,.svc-wide__list{grid-template-columns:1fr}
  .svc-wide__media{min-height:260px}
  .stats{grid-template-columns:1fr 1fr}
  .features,.svc-grid,.quotes,.values,.partners{grid-template-columns:1fr}
  .features .feature,.values .value{border-right:0}
}
@media (max-width:560px){
  .journey{grid-template-columns:1fr 1fr}
  .jstep:nth-child(3n){border-right:1px solid var(--line)}
  .jstep:nth-child(2n){border-right:0}
  .stats{grid-template-columns:1fr 1fr}
  .foot-top,.foot-bottom{grid-template-columns:1fr}
  .hero__foot-inner{flex-wrap:wrap;gap:.8rem}
  .hero__progress{order:3;flex-basis:100%;max-width:none}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__img{transform:none!important}
  .reveal{opacity:1;transform:none}
}