/* Pharmateq combined stylesheet. Built. Do not edit directly. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:optional;src:url('../fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:optional;src:url('../fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:optional;src:url('../fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:optional;src:url('../fonts/inter-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:optional;src:url('../fonts/jetbrainsmono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:optional;src:url('../fonts/jetbrainsmono-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ═══════════════════════════════════════════════════════════════════════
   1. TOKENS  ·  derived from the Pharmateq logo (green mark + charcoal wordmark)
   ───────────────────────────────────────────────────────────────────────
   The logo green (#2E9E4F) scores only 3.5:1 against white, so it CANNOT
   carry white button text or body links. It is kept as the display/mark
   colour, and a darker shade of the same hue drives the interactive UI:
     #2E9E4F  brand mark, large fills, decorative      3.5:1  display only
     #1F7A3A  buttons, links, icons on white           5.4:1  AA pass
     #14562A  headings, dark surfaces                  8.7:1  AAA pass
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --brand:#2E9E4F;        /* THE logo green, sampled from the mark          */
  --brand-600:#1F7A3A;    /* interactive: buttons, links, icons             */
  --brand-700:#1B6B34;
  --brand-800:#14562A;    /* headings, deep surfaces                        */
  --brand-950:#0B2F17;
  --brand-300:#6FCB8C;    /* light green, for dark backgrounds              */
  --brand-050:#E9F5EC;    /* wash                                           */
  --amber:#E8A33D; --amber-050:#FDF3E2;   /* deadline urgency only          */
  /* ── TYPE COLOUR ─────────────────────────────────────────────────────
     Headings are near-black, never green. Green headings are the single
     biggest thing that makes a site read as a template. Colour earns its
     place on ONE word in the H1, and on interactive elements. Everything
     else is a four-step neutral ramp, which is what carries hierarchy. */
  --head:#0E1417;         /* headings                        18.3:1        */
  --ink:#333C41;          /* body copy                       11.3:1        */
  --slate:#5E686E;        /* secondary copy, ledes            5.7:1  AA    */
  --slate-300:#687278;    /* captions, meta, timestamps       4.8:1  AA    */
  --paper:#F6F7F8; --white:#FFFFFF; --line:#E3E6E8;

  /* NEUTRAL DARK SURFACES — the site's dark sections are graphite, not green.
     Green is reserved for accents (buttons, icons, rules) so the brand reads
     as an accent rather than flooding the page.                              */
  --gr-900:#0E1417;       /* deepest surface: CTA foot, gradient end          */
  --gr-850:#141B20;       /* footer, dark cards                              */
  --gr-800:#1A2329;       /* dark surface top of gradient                     */
  --gr-line:rgba(255,255,255,.12);
  --on-dark:rgba(226,232,236,.80);   /* body text on graphite                 */
  --on-dark-soft:rgba(200,210,216,.62);

  --ff:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-mono:'JetBrains Mono','JBM Fallback',ui-monospace,'SF Mono',Consolas,monospace;

  --w:1200px;
  --pad:clamp(1.15rem,4.2vw,2.5rem);
  --gap:clamp(1rem,2.4vw,1.75rem);
  --sect:clamp(3.75rem,9vw,7.5rem);
  --r:14px; --r-lg:22px;

  --sh-1:0 1px 2px rgba(14,20,23,.06),0 3px 10px rgba(14,20,23,.05);
  --sh-2:0 4px 10px rgba(14,20,23,.07),0 18px 42px rgba(14,20,23,.10);
  --sh-3:0 10px 24px rgba(14,20,23,.10),0 34px 80px rgba(14,20,23,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* pointer parallax, written by JS; -1 … 1 */
  --px:0; --py:0;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. RESET + BASE
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  font-family:var(--ff);font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.65;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* `clip` must win over `hidden`: overflow-x:hidden makes body a scroll
     container, which breaks position:sticky in the services capsule.
     `clip` contains the overflow without creating one. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--brand-600);text-decoration-thickness:1px;text-underline-offset:3px}
ul{list-style:none}

/* Optical weight: large type reads heavier than small type at the same
   weight, so display sizes drop to 600 while subheads hold 700. */
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.022em;color:var(--head)}
h1{font-size:clamp(2rem,1.2rem + 3.6vw,3.9rem);letter-spacing:-.034em;font-weight:600;line-height:1.08}
h2{font-size:clamp(1.6rem,1.12rem + 2vw,2.65rem);letter-spacing:-.03em;font-weight:600;line-height:1.12}
h3{font-size:clamp(1.1rem,1.01rem + .44vw,1.35rem);letter-spacing:-.016em;font-weight:700}
h4{font-weight:700}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

:focus-visible{outline:3px solid var(--brand-600);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--head);color:#fff;padding:.85rem 1.35rem;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* eyebrow / section heads */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-600);
  font-weight:500;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:1.7rem;height:1px;background:var(--brand)}
.lede{font-size:clamp(1.03rem,.98rem + .3vw,1.2rem);color:var(--slate);max-width:60ch;line-height:1.6}
.head{max-width:70ch;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:11px;font-weight:600;font-size:1rem;
  text-decoration:none;white-space:nowrap;line-height:1.2;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .2s;
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--pri{background:var(--brand-600);color:#fff;box-shadow:0 6px 20px rgba(31,122,58,.32)}
.btn--pri:hover{background:#175E2C;transform:translateY(-2px);box-shadow:0 10px 30px rgba(31,122,58,.4)}
.btn--sec{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(6px)}
.btn--sec:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
.btn--dark{background:var(--head);color:#fff}
.btn--dark:hover{background:var(--brand-700);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn--ghost{color:var(--head);border:1.5px solid var(--line);background:#fff}
.btn--ghost:hover{border-color:var(--brand-600);color:var(--brand-600);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* text link with arrow */
.tlink{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;text-decoration:none;color:var(--brand-600)}
.tlink::after{content:"→";transition:transform .25s var(--ease)}
.tlink:hover::after{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════════════════════════
   3. REVEAL - progressive enhancement; no JS ⇒ everything visible
   ═══════════════════════════════════════════════════════════════════════ */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal][data-d="1"]{transition-delay:.09s}
.js [data-reveal][data-d="2"]{transition-delay:.18s}
.js [data-reveal][data-d="3"]{transition-delay:.27s}

/* ═══════════════════════════════════════════════════════════════════════
   4. HEADER
   ═══════════════════════════════════════════════════════════════════════ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(255,255,255,.84);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),border-color .35s,box-shadow .35s;
}
.hdr.is-stuck{background:rgba(255,255,255,.97);border-bottom-color:var(--line);
  box-shadow:0 1px 2px rgba(14,20,23,.04),0 10px 30px rgba(14,20,23,.06)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:4.6rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;flex:none}
.logo__mark{width:2.32rem;height:2.51rem;flex:none;color:var(--brand);
  transition:color .25s var(--ease)}
.logo:hover .logo__mark{color:var(--brand-600)}
.logo__txt{display:block}
.logo b{display:block;color:var(--brand-700);font-size:1.16rem;font-weight:700;
  letter-spacing:.075em;line-height:1.05}
.logo__sub{display:block;font-size:.545rem;font-weight:600;letter-spacing:.34em;
  color:var(--ink);text-transform:uppercase;margin-top:.24rem}

.nav ul{display:flex;align-items:center;gap:clamp(.75rem,1.9vw,1.9rem)}
.nav a{color:var(--slate);text-decoration:none;font-size:.925rem;font-weight:500;
  padding:.4rem 0;position:relative;transition:color .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--brand);transition:width .28s var(--ease)}
.nav a:hover{color:var(--brand-700)}
.nav a:hover::after{width:100%}
.hdr .btn{padding:.68rem 1.25rem;font-size:.9rem;flex:none}
/* the drawer CTA is a duplicate of the header one; only ever show one */
.nav__cta{display:none}

.burger{display:none;width:2.9rem;height:2.9rem;border-radius:10px;
  align-items:center;justify-content:center;border:1px solid var(--line);
  background:#fff;flex:none}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ═══════════════════════════════════════════════════════════════════════
   5. HERO - "The Airlock" corridor (blueprint §1.5 logo direction 1)
   ═══════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(85% 65% at 80% 8%,#EDF1F3 0%,transparent 62%),
    radial-gradient(60% 55% at 5% 100%,#EAF3ED 0%,transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#F3F5F7 100%);
  color:var(--ink);
  padding-block:clamp(7.5rem,15vw,10.5rem) clamp(4rem,8vw,6.5rem);
}
.hero::before{ /* faint engineering grid, ties the hero to the corridor */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(90deg,rgba(30,45,55,.05) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(30,45,55,.05) 0 1px,transparent 1px 88px);
  -webkit-mask-image:radial-gradient(90% 75% at 55% 45%,#000,transparent);
  mask-image:radial-gradient(90% 75% at 55% 45%,#000,transparent);
}
.hero__in{position:relative;z-index:2;display:grid;gap:clamp(2.75rem,6vw,4rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center}

.hero h1{color:var(--head)}
.hero h1 em{font-style:normal;color:var(--brand-600);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.045em;
  background:var(--brand);opacity:.45;border-radius:999px}
.hero__sub{margin-top:1.5rem;font-size:clamp(1.03rem,.97rem + .38vw,1.24rem);
  color:var(--slate);max-width:53ch;line-height:1.62}
.hero .btn-row{margin-top:2.25rem}

.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .95rem .4rem .5rem;
  border-radius:999px;background:var(--amber-050);border:1px solid rgba(232,163,61,.5);
  font-size:.775rem;font-weight:600;color:#7A5308;margin-bottom:1.6rem;
}
.hero__badge b{display:inline-flex;align-items:center;padding:.16rem .55rem;border-radius:999px;
  background:var(--amber);color:#3B2607;font-family:var(--ff-mono);font-size:.63rem;
  letter-spacing:.1em;text-transform:uppercase}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;
  box-shadow:0 0 0 0 rgba(232,163,61,.6);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,163,61,.55)}70%{box-shadow:0 0 0 9px rgba(232,163,61,0)}100%{box-shadow:0 0 0 0 rgba(232,163,61,0)}}

.hero__standards{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem .95rem;
  font-family:var(--ff-mono);font-size:.715rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);
}
.hero__standards li{display:flex;align-items:center;gap:.95rem}
.hero__standards li:not(:last-child)::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--brand-300)}

/* ── the corridor ───────────────────────────────────────────────────── */
.stage{
  position:relative;aspect-ratio:1/1;width:100%;max-width:33rem;margin-inline:auto;
  perspective:900px;perspective-origin:calc(50% + var(--px) * 7%) calc(45% + var(--py) * 6%);
}
.corridor{
  position:absolute;inset:11%;transform-style:preserve-3d;
  transform:rotateX(calc(var(--py) * -3.6deg)) rotateY(calc(var(--px) * 4.6deg));
  transition:transform .5s var(--ease-out);
  animation:breathe 14s var(--ease) infinite;
}
@keyframes breathe{
  0%,100%{transform:rotateX(calc(var(--py) * -3.6deg)) rotateY(calc(var(--px) * 4.6deg)) translateZ(0)}
  50%    {transform:rotateX(calc(var(--py) * -3.6deg)) rotateY(calc(var(--px) * 4.6deg)) translateZ(46px)}
}
/* Nested frames: same box, different Z. Perspective does the shrinking.
   ────────────────────────────────────────────────────────────────────
   Depth is carried by VALUE, not hue. The near frame is almost black and
   each one behind it steps lighter, which is how a technical drawing
   reads distance. Colouring all eight green flattened them into one
   plane and made the whole thing the largest green object on the page.
   Green now survives on two things only: the corner ticks and the core. */
.ring{
  position:absolute;inset:0;border-radius:calc(22px + var(--i) * 1px);
  border:1px solid rgba(14,20,23,calc(.46 - var(--i) * .052));
  transform:translateZ(calc(var(--i) * -1 * var(--ring-gap,155px)));
}
.ring::before{ /* corner ticks, reads as structural steelwork */
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:
    linear-gradient(var(--brand),var(--brand)) 0 0/26px 2px no-repeat,
    linear-gradient(var(--brand),var(--brand)) 100% 100%/26px 2px no-repeat;
  opacity:calc(.85 - var(--i) * .105);
}
/* the mouth of the airlock: the one frame that gets full weight */
.ring[style*="--i:0"]{border-color:rgba(14,20,23,.62);border-width:1.5px}

/* floor + ceiling planes */
.plane{
  position:absolute;left:-4%;right:-4%;height:1250px;
  transform-origin:top center;transform:rotateX(-90deg);
  background:
    repeating-linear-gradient(90deg,rgba(14,20,23,.13) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(14,20,23,.09) 0 1px,transparent 1px 84px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 62%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 62%);
}
.plane--floor{top:100%}
.plane--ceil{bottom:100%;transform-origin:bottom center;transform:rotateX(90deg);
  background:
    /* the close ticking reads as a HEPA ceiling grille */
    repeating-linear-gradient(90deg,rgba(14,20,23,.15) 0 2px,transparent 2px 26px),
    repeating-linear-gradient(0deg,rgba(14,20,23,.07) 0 1px,transparent 1px 84px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.7),transparent 58%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.7),transparent 58%)}

/* Pressure-cascade labels. Z spread is deliberately shallow: pushed far
   enough back, perspective shrinks a label past legibility, which is what
   made GRADE B unreadable before. */
.tag{
  position:absolute;transform:translateZ(var(--z)) translateX(-50%);
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;font-weight:500;
  padding:.3rem .6rem;border-radius:6px;white-space:nowrap;
  background:rgba(255,255,255,.97);border:1px solid rgba(14,20,23,.13);
  color:var(--brand-600);box-shadow:0 1px 2px rgba(14,20,23,.05),0 6px 16px rgba(14,20,23,.07);
}
.tag b{color:var(--head);font-weight:700}   /* zone in graphite, value in green */
.tag--a{top:7%;left:25%;--z:-30px}
.tag--b{top:27%;left:72%;--z:-240px}
.tag--c{top:65%;left:27%;--z:-430px}
.tag--d{top:83%;left:67%;--z:-130px}

/* The lit core at the end of the corridor. It was reading as a stray green
   smudge, because a soft blur with no edge has nothing to identify it. It
   now has a defined frame, so it reads as the far door of the airlock. */
.core{
  position:absolute;inset:39%;border-radius:8px;transform:translateZ(-1170px);
  border:1.5px solid rgba(46,158,79,.55);
  background:radial-gradient(circle,rgba(46,158,79,.20) 0%,rgba(46,158,79,.07) 60%,transparent 78%);
  box-shadow:0 0 34px 10px rgba(46,158,79,.12);
  filter:blur(.4px);
}
.hero__caption{
  margin-top:1.1rem;text-align:center;font-family:var(--ff-mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--slate-300);
}

/* ═══════════════════════════════════════════════════════════════════════
   6. TRUST BAR
   ═══════════════════════════════════════════════════════════════════════ */
.trust{background:#fff;color:var(--ink);padding-block:clamp(2.5rem,5vw,3.5rem);
  border-block:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem);
  perspective:800px}
/* a 2px green rule reads as brand without colouring the numeral itself */
.stat{transform-origin:50% 100%;position:relative;padding-top:1.05rem}
.stat::before{content:"";position:absolute;top:0;left:0;width:1.7rem;height:2px;
  background:var(--brand);border-radius:2px}
.js .stat{opacity:0;transform:rotateX(-72deg);
  transition:transform .8s var(--ease-out),opacity .55s ease}
.js .stat.is-in{opacity:1;transform:none}
.stat.is-in:nth-child(2){transition-delay:.09s}
.stat.is-in:nth-child(3){transition-delay:.18s}
.stat.is-in:nth-child(4){transition-delay:.27s}
.stat b{display:block;font-size:clamp(1.85rem,1.2rem + 2.3vw,2.9rem);font-weight:700;
  line-height:1;letter-spacing:-.035em;color:var(--head)}
.stat span{display:block;margin-top:.6rem;font-size:.83rem;line-height:1.42;
  color:var(--slate)}
.marks{margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.6rem;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem .55rem}
.marks li{font-family:var(--ff-mono);font-size:.685rem;letter-spacing:.09em;
  padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);
  color:var(--slate);background:var(--paper)}

/* ═══════════════════════════════════════════════════════════════════════
   7. PROBLEM - exploded cost slab
   ═══════════════════════════════════════════════════════════════════════ */
.problem{background:var(--paper);position:relative;overflow:hidden}
.problem__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center}
.alert{display:flex;gap:.85rem;padding:1rem 1.15rem;border-radius:12px;
  background:var(--amber-050);border:1px solid rgba(232,163,61,.4);
  border-left:4px solid var(--amber);margin-bottom:1.75rem;max-width:46ch}
.alert svg{width:1.2rem;height:1.2rem;flex:none;margin-top:.15rem;color:#8A5A0B}
.alert p{font-size:.86rem;line-height:1.5;color:#6B4708}
.alert strong{color:#4A3005}
.problem p + p{margin-top:1.05rem}
.pull{font-size:clamp(1.1rem,1rem + .6vw,1.4rem);font-weight:600;color:var(--head);
  line-height:1.45;padding-left:1.2rem;border-left:3px solid var(--brand-600);margin-block:1.5rem}

/* the slab */
.slab-wrap{perspective:1400px}
.slab{
  position:relative;transform-style:preserve-3d;
  transform:rotateX(52deg) rotateZ(-38deg);
  width:min(100%,20rem);margin:clamp(2rem,6vw,4rem) auto clamp(4rem,10vw,7rem);
}
.layer{
  position:relative;height:3.1rem;border-radius:9px;margin-bottom:.5rem;
  display:flex;align-items:center;padding-inline:1rem;
  transform:translateZ(0);transform-style:preserve-3d;
  transition:transform 1.05s var(--ease-out),box-shadow .6s ease;
  box-shadow:0 6px 16px rgba(14,20,23,.16);
}
.layer__face{position:absolute;inset:0;border-radius:9px;display:flex;align-items:center;
  padding-inline:1rem;gap:.7rem;font-size:.78rem;font-weight:600;letter-spacing:-.01em}
.layer--m .layer__face{background:linear-gradient(135deg,#1E7A3B,#14562A);color:#DFF1E4;
  border:1px solid rgba(130,215,160,.28)}
.layer--o .layer__face{background:linear-gradient(135deg,#F3B95A,#DE9427);color:#3B2607;
  border:1px solid rgba(255,255,255,.3)}
.layer__face .mono{margin-left:auto;font-size:.72rem;opacity:.86;font-weight:500}
.js .is-in .layer{transform:translateZ(calc(var(--n) * 34px))}
.slab:hover .layer,.slab:focus-within .layer{transform:translateZ(calc(var(--n) * 52px))}

.slab-key{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;margin-top:-2rem}
.key{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--slate);font-weight:500}
.key i{width:.85rem;height:.85rem;border-radius:4px;flex:none}
.key--m i{background:var(--head)} .key--o i{background:var(--amber)}
.slab-note{margin-top:1rem;text-align:center;font-size:.735rem;color:var(--slate-300);
  font-style:italic;max-width:34ch;margin-inline:auto;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════
   8. SERVICES - 7 pillar cards, real in-card parallax
   ═══════════════════════════════════════════════════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));
  gap:var(--gap);perspective:1300px}
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2rem);transform-style:preserve-3d;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .35s;
  box-shadow:var(--sh-1);overflow:hidden;
}
.card::before{ /* teal wash that rises on hover */
  content:"";position:absolute;inset:auto 0 0 0;height:0;
  background:linear-gradient(to top,rgba(31,122,58,.055),transparent);
  transition:height .55s var(--ease-out);
}
.card:hover,.card:focus-within{
  transform:translateY(-9px) rotateX(3.4deg) rotateY(-2.6deg);
  box-shadow:var(--sh-3);border-color:rgba(31,122,58,.34);
}
.card:hover::before,.card:focus-within::before{height:100%}
.card > *{position:relative;transform:translateZ(0);transition:transform .5s var(--ease-out)}
.card:hover .card__ico,.card:focus-within .card__ico{transform:translateZ(48px)}
.card:hover h3,.card:focus-within h3{transform:translateZ(28px)}
.card:hover .card__num,.card:focus-within .card__num{transform:translateZ(62px)}

.card__num{position:absolute;top:0;right:0;font-family:var(--ff-mono);font-size:.68rem;
  letter-spacing:.1em;color:var(--slate-300);font-weight:500}
.card__ico{width:3rem;height:3rem;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand-600);margin-bottom:1.15rem;
  border:1px solid rgba(31,122,58,.16)}
.card__ico svg{width:1.45rem;height:1.45rem}
.card h3{margin-bottom:.6rem}
.card p{font-size:.9rem;color:var(--slate);line-height:1.6}
.card ul{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.35rem}
.card li{font-family:var(--ff-mono);font-size:.645rem;letter-spacing:.05em;
  padding:.26rem .55rem;border-radius:5px;background:var(--paper);
  border:1px solid var(--line);color:var(--slate)}
.card--flag{border-color:rgba(232,163,61,.5);background:linear-gradient(180deg,#FFFCF6,#fff)}
.card--flag .card__ico{background:var(--amber-050);color:#A4700E;border-color:rgba(232,163,61,.3)}

/* ═══════════════════════════════════════════════════════════════════════
   8b. SERVICES CAPSULE - scroll-scrubbed WebGL capsule
   Everything is scoped under .svc and uses the page tokens, so nothing
   leaks. The section ships in .svc--flat (static cards); the module
   removes that class only once three.js has actually loaded on a
   desktop viewport. No JS, no WebGL, no CDN, or reduced motion => cards.
   ═══════════════════════════════════════════════════════════════════════ */
.svc{position:relative;background:linear-gradient(180deg,#FFF 0%,#F4F6F8 50%,#FFF 100%)}
.svc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:
    repeating-linear-gradient(90deg,rgba(30,45,55,.045) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(30,45,55,.045) 0 1px,transparent 1px 88px);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(80% 60% at 50% 50%,#000,transparent)}

.svc__track{height:280vh}
.svc__sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:36rem;
  display:grid;align-content:center;overflow:hidden;padding-top:4.6rem}
.svc__stage{position:relative;width:100%;max-width:var(--w);margin-inline:auto;
  padding-inline:var(--pad);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(1.5rem,4vw,4rem)}

.svc__viz{position:relative;aspect-ratio:1/1;max-height:60svh;justify-self:center;width:100%}
.svc__canvas{width:100%;height:100%;display:block}
.svc__viz::after{content:"";position:absolute;left:50%;bottom:9%;width:54%;height:13%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(14,20,23,.16),transparent 70%)}

.svc__panel{position:relative}
.svc__title{margin:1rem 0 2rem}

/* fixed-height well so crossfading slides never shift the layout */
.svc__well{position:relative;min-height:15.5rem}
.svc__item{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);pointer-events:none}
.svc__item.is-active{opacity:1;transform:none;pointer-events:auto}
.svc__no{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand-600);font-weight:500}
.svc__item h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.05rem);letter-spacing:-.025em;
  margin:.75rem 0 .7rem}
.svc__item p{color:var(--slate);max-width:44ch;font-size:clamp(.94rem,.9rem + .2vw,1.03rem)}
.svc__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.1rem}
.svc__tags li{font-family:var(--ff-mono);font-size:.645rem;letter-spacing:.05em;
  padding:.26rem .55rem;border-radius:5px;background:#fff;
  border:1px solid var(--line);color:var(--slate)}

/* progress rules */
.svc__progress{position:absolute;right:calc(var(--pad) * .35);top:50%;
  transform:translateY(-50%);display:grid;gap:.75rem;z-index:2}
.svc__progress i{display:block;width:2px;height:56px;background:var(--line);
  border-radius:2px;position:relative}
.svc__progress i::after{content:"";position:absolute;inset:0;width:2px;height:100%;
  background:var(--brand);border-radius:2px;
  transform:scaleY(var(--tf,0));transform-origin:50% 100%}

/* all seven pillars stay named on the page for SEO and completeness */
.svc__pillars{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.4rem}
.svc__pillars li{font-size:.735rem;padding:.3rem .7rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--slate)}

/* ---------- static-card mode (below 1024px, no JS, reduced motion) ----------
   The stages are rendered once, as .svc__item. In scrub mode they are stacked
   in the well and crossfaded; in flat mode the same markup becomes a column of
   plain cards. There is no second copy of the stage text in the DOM. */
.svc--flat .svc__track{height:auto}
.svc--flat .svc__sticky{position:static;height:auto;min-height:0;overflow:visible;
  padding-block:var(--sect);padding-top:var(--sect)}
.svc--flat .svc__stage{grid-template-columns:1fr}
.svc--flat .svc__viz,
.svc--flat .svc__progress{display:none}
.svc--flat .svc__title{margin-bottom:0}
.svc--flat .svc__well{min-height:0;display:grid;gap:.85rem;margin-top:2rem}
.svc--flat .svc__item{position:static;inset:auto;opacity:1;transform:none;
  pointer-events:auto;transition:none;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:clamp(1.35rem,3vw,1.75rem);box-shadow:var(--sh-1)}
.svc--flat .svc__item h3{font-size:1.22rem;letter-spacing:-.02em;margin:.6rem 0 .55rem}
.svc--flat .svc__item p{color:var(--slate);font-size:.9rem;line-height:1.6}
.svc--flat .svc__tags{display:none}

@media (max-width:1023.98px){
  .svc .svc__track{height:auto}
  .svc .svc__sticky{position:static;height:auto;min-height:0;overflow:visible;
    padding-block:var(--sect);padding-top:var(--sect)}
  .svc .svc__stage{grid-template-columns:1fr}
  .svc .svc__viz,.svc .svc__progress{display:none}
  .svc .svc__title{margin-bottom:0}
  .svc .svc__well{min-height:0;display:grid;gap:.85rem;margin-top:2rem}
  .svc .svc__item{position:static;inset:auto;opacity:1;transform:none;
    pointer-events:auto;transition:none;
    border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
    padding:clamp(1.35rem,3vw,1.75rem);box-shadow:var(--sh-1)}
  .svc .svc__item h3{font-size:1.22rem;letter-spacing:-.02em;margin:.6rem 0 .55rem}
  .svc .svc__item p{color:var(--slate);font-size:.9rem;line-height:1.6}
  .svc .svc__tags{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   9. WHY - static isometric panels (deliberately non-interactive)
   ═══════════════════════════════════════════════════════════════════════ */
.why{background:linear-gradient(180deg,#F2F5F7 0%,#FFFFFF 100%);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;inset:0;opacity:.7;
  background:
    repeating-linear-gradient(90deg,rgba(30,45,55,.045) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(30,45,55,.045) 0 1px,transparent 1px 74px);
  -webkit-mask-image:radial-gradient(80% 65% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(80% 65% at 50% 40%,#000,transparent)}
.why .wrap{position:relative}
.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1.1rem,2.6vw,1.9rem);perspective:1500px}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.1rem);
  transform:rotateY(-7deg) rotateX(2.5deg);transform-style:preserve-3d;
  box-shadow:-14px 16px 34px rgba(14,20,23,.09);
}
.panel:nth-child(2){transform:rotateY(0deg) rotateX(2.5deg);box-shadow:0 16px 34px rgba(14,20,23,.09)}
.panel:nth-child(3){transform:rotateY(7deg) rotateX(2.5deg);box-shadow:14px 16px 34px rgba(14,20,23,.09)}
.panel__n{font-family:var(--ff-mono);font-size:2.1rem;font-weight:500;color:rgba(46,158,79,.32);
  line-height:1;display:block;margin-bottom:.9rem}
.panel h3{margin-bottom:.7rem}
.panel p{font-size:.9rem;color:var(--slate);line-height:1.62}

/* ══════════════════════════════════════════════════════════════════════
   10. PROCESS - receding stepped track (echoes the hero corridor)
   ═══════════════════════════════════════════════════════════════════════ */
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.4rem);
  perspective:1500px;perspective-origin:50% 40%}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.35rem,2.6vw,1.8rem);transform-style:preserve-3d;
  transform:translateZ(calc(var(--s) * -46px)) translateY(calc(var(--s) * 10px));
  opacity:calc(1 - var(--s) * .06);
  transition:transform .55s var(--ease-out),box-shadow .45s,opacity .45s,border-color .35s;
  box-shadow:var(--sh-1);
}
.step:hover,.step:focus-within{transform:translateZ(34px) translateY(-4px);opacity:1;
  border-color:var(--brand-600);box-shadow:var(--sh-2);z-index:2}
.step__n{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--head);color:#fff;font-family:var(--ff-mono);font-size:.82rem;
  font-weight:500;margin-bottom:1rem}
.step h3{font-size:1.02rem;margin-bottom:.5rem}
.step p{font-size:.855rem;color:var(--slate);line-height:1.58}
.step__t{display:inline-block;margin-top:.9rem;font-family:var(--ff-mono);font-size:.655rem;
  letter-spacing:.07em;padding:.24rem .55rem;border-radius:5px;
  background:var(--brand-050);color:#175E2C;text-transform:uppercase}
.step:last-child .step__n{background:var(--brand-600)}
.step__n{box-shadow:0 2px 6px rgba(14,20,23,.18)}
.step:last-child{border-color:rgba(31,122,58,.35)}

/* ═══════════════════════════════════════════════════════════════════════
   11. INDUSTRIES
   ═══════════════════════════════════════════════════════════════════════ */
.inds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));
  gap:.8rem}
.ind{display:flex;align-items:center;gap:.8rem;padding:1.05rem 1.1rem;border-radius:12px;
  background:#fff;border:1px solid var(--line);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.ind:hover{transform:translateY(-4px);border-color:var(--brand-600);box-shadow:var(--sh-2)}
.ind svg{width:1.25rem;height:1.25rem;color:var(--brand-600);flex:none}
.ind span{font-size:.86rem;font-weight:600;color:var(--head);line-height:1.32}

/* ═══════════════════════════════════════════════════════════════════════
   12. CASE STUDY - true flip on preserve-3d
   ═══════════════════════════════════════════════════════════════════════ */
.case{background:#fff}
.case__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.flip{perspective:1600px;height:clamp(24rem,46vw,26.5rem)}
.flip__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .95s var(--ease-out)}
.flip.is-flipped .flip__in{transform:rotateY(180deg)}
@media (hover:hover){.flip:hover .flip__in{transform:rotateY(180deg)}
  .flip.is-flipped:hover .flip__in{transform:rotateY(0)}}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r-lg);padding:clamp(1.6rem,3.4vw,2.3rem);
  display:flex;flex-direction:column;box-shadow:var(--sh-2);overflow:hidden}
.face--f{background:linear-gradient(155deg,var(--gr-800),var(--gr-900));color:#fff;border:1px solid var(--gr-line)}
.face--b{background:#fff;border:1px solid var(--line);transform:rotateY(180deg)}
.face h3{color:inherit;margin-bottom:.9rem;font-size:clamp(1.1rem,1rem + .5vw,1.32rem)}
.face--b h3{color:var(--head)}
.face p{font-size:.875rem;line-height:1.62}
.face--f p{color:rgba(214,232,220,.82)}
.face--b p{color:var(--slate)}
.face__tag{font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-300);margin-bottom:1rem}
.face--b .face__tag{color:var(--brand-600)}
.gaps{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:auto;padding-top:1.4rem}
.gap{padding:.75rem .5rem;border-radius:10px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);text-align:center}
.gap b{display:block;font-family:var(--ff-mono);font-size:1.32rem;color:#fff;line-height:1.1}
.gap span{font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(214,232,220,.66)}
.wins{margin-top:1.2rem;display:grid;gap:.6rem}
.wins li{display:flex;gap:.65rem;font-size:.855rem;color:var(--ink);line-height:1.5}
.wins svg{width:1.05rem;height:1.05rem;color:var(--brand-600);flex:none;margin-top:.2rem}
.face__foot{margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--line);
  font-family:var(--ff-mono);font-size:.68rem;color:var(--slate);letter-spacing:.05em}
.flip__btn{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.83rem;font-weight:600;color:var(--brand-600);padding:.5rem 0}
.flip__btn svg{width:1rem;height:1rem;transition:transform .5s var(--ease)}
.flip.is-flipped .flip__btn svg{transform:rotate(180deg)}

/* ═══════════════════════════════════════════════════════════════════════
   13. TESTIMONIALS - CSS-only coverflow via scroll-driven animation
   ═══════════════════════════════════════════════════════════════════════ */
.quotes{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:clamp(1.5rem,3vw,2.5rem) 0;margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);scrollbar-width:none;perspective:1400px}
.quotes::-webkit-scrollbar{display:none}
.quote{flex:0 0 min(88%,25rem);scroll-snap-align:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.1rem);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;transform-style:preserve-3d}
.quote__mark{font-size:2.6rem;line-height:.6;color:var(--brand-300);font-weight:700;margin-bottom:.7rem}
.quote p{font-size:.965rem;line-height:1.66;color:var(--ink)}
.quote footer{margin-top:auto;padding-top:1.4rem;display:flex;align-items:center;gap:.8rem}
.quote__av{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--brand-050);
  color:var(--brand-600);display:grid;place-items:center;flex:none;
  font-weight:700;font-size:.85rem;border:1px solid rgba(31,122,58,.2)}
.quote cite{font-style:normal;font-size:.82rem;font-weight:600;color:var(--head);display:block}
.quote small{font-size:.75rem;color:var(--slate)}
.sample{display:inline-block;margin-top:.9rem;font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-300);
  border:1px dashed var(--line);padding:.2rem .45rem;border-radius:4px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:700px){
    .quote{animation:cover linear both;animation-timeline:view(inline);
      animation-range:entry 8% exit 92%}
    @keyframes cover{
      0%  {transform:rotateY(19deg) translateZ(-58px);opacity:.5}
      50% {transform:rotateY(0deg) translateZ(0);opacity:1}
      100%{transform:rotateY(-19deg) translateZ(-58px);opacity:.5}
    }
  }
}
.scroll-hint{display:flex;align-items:center;gap:.5rem;font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-300);
  justify-content:center;margin-top:.5rem}

/* ═══════════════════════════════════════════════════════════════════════
   14. INSIGHTS
   ═══════════════════════════════════════════════════════════════════════ */
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:rgba(31,122,58,.3)}
/* Featured image. aspect-ratio pins the box before the JPEG decodes, so the
   card never jumps — the three source images are 683/714/576px tall, and
   letting them size themselves would shear the row. */
.post__top{position:relative;overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(135deg,#EDF1F4,#F7F8F9);border-bottom:1px solid var(--line)}
.post__top img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.post:hover .post__top img{transform:scale(1.045)}
/* a whisper of brand over the photo so the three read as one set regardless
   of how differently they are colour-graded */
.post__top::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,86,42,.10),rgba(20,86,42,0) 55%)}
.post__body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.post__kind{font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand-600);margin-bottom:.6rem}
.post h3{font-size:1.02rem;margin-bottom:.5rem;color:var(--head)}
.post p{font-size:.855rem;color:var(--slate);line-height:1.58}
.post__meta{margin-top:auto;padding-top:1.1rem;font-size:.735rem;color:var(--slate-300)}

/* ═══════════════════════════════════════════════════════════════════════
   15. FAQ
   ═══════════════════════════════════════════════════════════════════════ */
.faq{max-width:52rem;margin-inline:auto}
details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:.7rem;
  transition:border-color .25s,box-shadow .25s}
details[open]{border-color:rgba(31,122,58,.35);box-shadow:var(--sh-1)}
summary{padding:1.1rem 3rem 1.1rem 1.25rem;font-weight:600;color:var(--head);cursor:pointer;
  position:relative;list-style:none;font-size:clamp(.94rem,.9rem + .2vw,1.03rem);line-height:1.45}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:1.25rem;top:1.45rem;width:.62rem;height:.62rem;
  border-right:2px solid var(--brand-600);border-bottom:2px solid var(--brand-600);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(-135deg);top:1.62rem}
details > div{padding:0 1.25rem 1.25rem;font-size:.905rem;color:var(--slate);line-height:1.68}

/* ═══════════════════════════════════════════════════════════════════════
   16. LOCAL + CTA
   ═══════════════════════════════════════════════════════════════════════ */
.local__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.map-wrap{perspective:1400px}
.map{aspect-ratio:4/3;border-radius:var(--r-lg);position:relative;overflow:hidden;
  transform:rotateX(9deg) rotateY(-8deg) rotateZ(1deg);transform-style:preserve-3d;
  box-shadow:-16px 24px 50px rgba(14,20,23,.22);border:1px solid var(--line);
  background:#EDF0F2;transition:transform .7s var(--ease-out)}
.map:hover{transform:rotateX(3deg) rotateY(-2deg)}
.map::before{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(14,20,23,.07) 0 1px,transparent 1px 38px),
    repeating-linear-gradient(0deg,rgba(14,20,23,.07) 0 1px,transparent 1px 38px)}
.map::after{content:"";position:absolute;left:0;right:0;top:38%;height:9px;
  background:rgba(14,20,23,.1);transform:skewY(-3deg)}
.pin{position:absolute;left:50%;top:47%;transform:translate(-50%,-100%) translateZ(48px);
  display:flex;flex-direction:column;align-items:center;gap:.3rem}
.pin b{background:var(--head);color:#fff;font-size:.7rem;font-weight:600;padding:.34rem .7rem;
  border-radius:7px;white-space:nowrap;box-shadow:0 6px 16px rgba(14,20,23,.3)}
.pin i{width:11px;height:11px;border-radius:50%;background:var(--brand-600);
  box-shadow:0 0 0 5px rgba(31,122,58,.22),0 0 0 12px rgba(31,122,58,.1)}
.nap{display:grid;gap:1.1rem;margin-top:1.75rem}
.nap li{display:flex;gap:.85rem;font-size:.92rem;line-height:1.55}
.nap svg{width:1.15rem;height:1.15rem;color:var(--brand-600);flex:none;margin-top:.2rem}
.nap b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-300);font-family:var(--ff-mono);margin-bottom:.15rem;font-weight:500}
.nap a{color:var(--head);font-weight:600;text-decoration:none}
.nap a:hover{color:var(--brand-600);text-decoration:underline}
.areas{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.4rem}
.areas li{font-size:.735rem;padding:.3rem .65rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);color:var(--slate)}

/* ═══════════════════════════════════════════════════════════════════════
   16b. CLIENT LOGO MARQUEE
   ───────────────────────────────────────────────────────────────────────
   Two rows scrolling in opposite directions. Each row's track holds the
   logo list TWICE; the animation moves it exactly -50%, so the second copy
   lands where the first began — a seamless loop with no JS.
   Logos are desaturated at rest so the wall reads as one texture, and come
   up to full colour on hover/focus. Pauses on hover and honours
   prefers-reduced-motion (falls back to a manually scrollable strip).
   ═══════════════════════════════════════════════════════════════════════ */
/* label-only section: the logos are the content, so the padding tightens */
.clients{background:var(--paper);overflow:hidden;position:relative;
  padding-block:clamp(2.75rem,6vw,4.5rem)}
.clients__head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.clients__head .eyebrow{margin-bottom:0}
.marquee{position:relative;display:grid;gap:clamp(1.1rem,2.6vw,2.1rem)}
/* soft edge fade so logos enter and leave instead of being cut off */
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(2.5rem,9vw,8rem);
  z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(246,247,248,0))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(246,247,248,0))}
.mq__row{overflow:hidden}
/* gap is 0: item padding-inline is the only horizontal rhythm, otherwise
   the two would stack and blow the logos apart */
.mq__track{display:flex;width:max-content;gap:0;
  animation:mq-l var(--mq-dur,58s) linear infinite;will-change:transform}
.mq__row--rev .mq__track{animation-name:mq-r}
@keyframes mq-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mq-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.marquee:hover .mq__track,.marquee:focus-within .mq__track{animation-play-state:paused}

/* No tiles. Every logo is normalised into one shared box and scaled to fit
   inside it, so a mixed set of ratios reads as "the same size" without any
   of them being cropped. */
.mq__item{flex:none;display:flex;align-items:center;justify-content:center;
  /* One uniform band; each logo is sized inside it by --h, set per logo. */
  height:calc(4.4rem * var(--mq-s,1));
  padding-inline:calc(clamp(1rem,2.6vw,2.1rem) * var(--mq-s,1))}
.mq__item img{
  /* --h is precomputed per logo from its TRIMMED aspect ratio, normalised
     by optical AREA (h = sqrt(21/ratio), clamped 1.95-3.75rem). Matching
     height alone would make the 6.95:1 Patson wordmark 28rem wide; matching
     width alone left it a third the height of a square badge. Constant area
     is what makes a 0.73:1 mark and a 6.95:1 wordmark read as one size. */
  height:calc(var(--h,2.8rem) * var(--mq-s,1));
  width:auto;max-width:none;
  mix-blend-mode:multiply;
  filter:grayscale(1) brightness(1.05) contrast(1.06);opacity:.74;
  transition:filter .35s var(--ease),opacity .35s var(--ease)}
.mq__item:hover img,.mq__item:focus-within img{filter:none;opacity:1}
.mq__track{align-items:center}
@media (max-width:900px){ .marquee{--mq-s:.86} }
@media (max-width:560px){ .marquee{--mq-s:.74} }

/* clients whose logo we do not hold: a wordmark, never a blank gap */
.mq__item--txt{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;
  line-height:1.35;text-align:center;color:var(--slate-300);text-transform:uppercase;
  transition:color .35s var(--ease)}
.mq__item--txt:hover{color:var(--ink)}

@media (max-width:600px){
  .mq__track{animation-duration:calc(var(--mq-dur,58s) * .72)}
}
@media (prefers-reduced-motion:reduce){
  .mq__row{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .mq__row::-webkit-scrollbar{height:6px}
  .mq__row::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .mq__track{animation:none}
  .mq__item{scroll-snap-align:center}
  .mq__item img{filter:none;opacity:1}
}

/* ═══════════════════════════════════════════════════════════════════════
   16c. CONTACT / CTA  ·  LIGHT MINT
   ───────────────────────────────────────────────────────────────────────
   A light section, tinted with the brand hue rather than flooded by it: the
   wash tops out at #E4F1E8, which is 6% saturation territory, so body copy
   still runs at AAA against it. The white form card is what the eye lands
   on — it is the only pure-white surface in the section, which is what makes
   it read as the target.
   ═══════════════════════════════════════════════════════════════════════ */
.cta{color:var(--ink);position:relative;overflow:hidden;
  background:
    radial-gradient(85% 70% at 88% 0%,#DCEDE2 0%,transparent 58%),
    radial-gradient(70% 60% at 0% 100%,#E8F2EC 0%,transparent 62%),
    linear-gradient(170deg,#F2F8F4 0%,#EAF3ED 45%,#E4F1E8 100%)}
/* brand hairline along the top edge, separating it from the section above */
.cta::after{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(46,158,79,.45) 22%,rgba(46,158,79,.28) 50%,transparent 85%)}
/* the hero's engineering grid, at a whisper, so the page reads as one system */
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:
    repeating-linear-gradient(90deg,rgba(31,122,58,.055) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(31,122,58,.055) 0 1px,transparent 1px 88px);
  -webkit-mask-image:radial-gradient(100% 80% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(100% 80% at 50% 40%,#000,transparent)}
.cta .wrap{position:relative;z-index:2}
.cta__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2.25rem,5vw,4rem);align-items:start}
.cta h2{color:var(--brand-800)} .cta .lede{color:var(--slate)}
.cta .eyebrow{color:var(--brand-600)}

.perks{margin-top:2rem;display:grid;gap:.85rem}
.perks li{display:flex;gap:.7rem;font-size:.9rem;color:var(--ink);line-height:1.5}
.perks svg{width:1.1rem;height:1.1rem;color:var(--brand-600);flex:none;margin-top:.18rem}
.direct{margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid rgba(31,122,58,.18);
  display:flex;flex-wrap:wrap;gap:1.75rem}
.direct a{color:var(--brand-800);text-decoration:none;font-weight:600;font-size:1rem;
  display:flex;align-items:center;gap:.55rem;transition:color .2s}
.direct a:hover{color:var(--brand-600)}
.direct svg{width:1.1rem;height:1.1rem;flex:none;color:var(--brand-600)}

/* The card is the single most important object on the page, so it is the
   only pure white in the section and carries a real, soft elevation. */
.form{position:relative;background:var(--white);
  border:1px solid rgba(31,122,58,.14);
  box-shadow:0 2px 4px rgba(14,20,23,.04),0 26px 60px -22px rgba(20,86,42,.28);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3.2vw,2.2rem)}
/* green accent on the card's top edge, tying it to the submit button */
.form::before{content:"";position:absolute;left:clamp(1.5rem,3.2vw,2.2rem);right:clamp(1.5rem,3.2vw,2.2rem);
  top:-1px;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),rgba(46,158,79,0))}
.form h3{color:var(--brand-800);font-size:1.15rem;margin-bottom:.4rem}
.form > p{font-size:.83rem;color:var(--slate);margin-bottom:1.5rem}
.fields{display:grid;gap:.9rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;border-radius:10px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);font-size:.92rem;
  transition:border-color .2s,background-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:5rem}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235C6660' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:.7rem;padding-right:2.4rem}
.field select option{background:#fff;color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-300)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand-600);background:#fff;
  box-shadow:0 0 0 3px rgba(46,158,79,.18);outline:none}
.form .btn{width:100%;margin-top:1.25rem}
.form small{display:block;margin-top:.9rem;font-size:.72rem;color:var(--slate);
  text-align:center;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════
   17. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.ftr{background:var(--gr-850);color:var(--on-dark-soft);padding-block:clamp(3rem,6vw,4.5rem) 0;
  font-size:.875rem}
.ftr .logo__mark{color:var(--brand-300)}
.ftr .logo b{color:var(--brand-300)}
.ftr .logo__sub{color:rgba(255,255,255,.72)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem);padding-bottom:clamp(2.25rem,5vw,3.25rem)}
.ftr__brand p{margin-top:1.1rem;line-height:1.68;max-width:34ch;font-size:.855rem}
.ftr h4{color:#fff;font-size:.775rem;letter-spacing:.13em;text-transform:uppercase;
  font-family:var(--ff-mono);font-weight:500;margin-bottom:1.05rem}
.ftr li{margin-bottom:.6rem}
.ftr a{color:var(--on-dark-soft);text-decoration:none;transition:color .2s}
.ftr a:hover{color:var(--brand-300)}
.ftr__addr{margin-top:1.5rem;font-size:.82rem;line-height:1.68;font-style:normal}
.ftr__addr strong{color:#fff;display:block;margin-bottom:.25rem;font-weight:600}
.ftr__bot{border-top:1px solid rgba(255,255,255,.09);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.78rem}
.ftr__legal{display:flex;flex-wrap:wrap;gap:1.1rem}
.ftr__note{width:100%;padding-bottom:1.6rem;font-size:.71rem;color:rgba(180,192,199,.42);line-height:1.6}

.wa{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;width:3.4rem;height:3.4rem;
  border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(37,211,102,.4);transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:1.7rem;height:1.7rem;color:#fff}

/* ═══════════════════════════════════════════════════════════════════════
   18. RESPONSIVE - tested at 1440 / 1280 / 1024 / 900 / 768 / 600 / 414 / 360
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .nav ul{gap:1rem}
  .nav a{font-size:.875rem}
  .track{grid-template-columns:repeat(2,1fr)}
  .step{transform:none;opacity:1}
}
@media (max-width:960px){
  /* nav → drawer */
  .burger{display:flex}
  .nav{position:fixed;inset:4.6rem 0 auto;background:rgba(255,255,255,.985);
    backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(14,20,23,.10);
    max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out)}
  .nav.is-open{max-height:76vh;overflow-y:auto}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.6rem var(--pad) 1.5rem}
  .nav a{display:block;padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav a::after{display:none}
  .hdr__in > .btn{display:none}
  .nav__cta{display:block;margin-top:1.1rem}
  .nav__cta .btn{display:flex;width:100%;padding:.9rem;border-bottom:0}
  /* `.nav a` (0,1,1) out-specifies `.btn--pri` (0,1,0), so the drawer CTA would
     inherit the slate link colour and render grey-on-green. Restate white, and
     again for :hover, which `.nav a:hover` would otherwise claim. */
  .nav__cta .btn--pri,
  .nav__cta .btn--pri:hover{color:#fff}

  .hero__in{grid-template-columns:1fr;gap:2.75rem}
  .hero__txt{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero__sub{margin-inline:auto}
  .hero .btn-row{justify-content:center}
  .hero__standards{justify-content:center}
  .stage{max-width:27rem;order:-1}
  .hero{padding-top:clamp(6.5rem,17vw,8rem)}

  .problem__grid,.case__grid,.local__grid,.cta__grid{grid-template-columns:1fr}
  .slab{margin-block:1.5rem 4.5rem}
  .flip{height:auto;min-height:25rem;perspective:none}
  .why__grid .panel,.panel:nth-child(2),.panel:nth-child(3){transform:none;box-shadow:var(--sh-2)}
  .map{transform:rotateX(5deg) rotateY(-4deg)}
}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}
  .stat b{font-size:clamp(1.7rem,7vw,2.2rem)}
  .card:hover,.card:focus-within{transform:translateY(-5px)}
  .card:hover .card__ico,.card:hover h3,.card:hover .card__num{transform:none}
  .track{grid-template-columns:1fr}
  .step:hover{transform:translateY(-3px)}
  .ftr__top{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
  .quote{flex-basis:min(92%,23rem)}
  /* flatten the corridor - deep Z is expensive and ugly on small screens */
  .stage{perspective:640px;max-width:22rem}
  .ring{transform:translateZ(calc(var(--i) * -95px))}
  .ring:nth-child(n+6){display:none}
  .tag--b,.tag--c{display:none}
  .core{transform:translateZ(-540px)}
  .plane{height:700px}
}
@media (max-width:560px){
  html{scroll-padding-top:4.8rem}
  .btn{width:100%;padding:.95rem 1.25rem}
  .btn-row{flex-direction:column;align-items:stretch;width:100%}
  .hero__badge{font-size:.72rem;flex-wrap:wrap;justify-content:center}
  .f2{grid-template-columns:1fr}
  .direct{flex-direction:column;gap:1.15rem}
  .inds{grid-template-columns:1fr 1fr}
  .ind{padding:.9rem}
  .ind span{font-size:.8rem}
  .ftr__top{grid-template-columns:1fr}
  .ftr__bot{flex-direction:column;align-items:flex-start}
  .slab{transform:rotateX(46deg) rotateZ(-30deg);width:min(100%,15.5rem)}
  .gaps{grid-template-columns:1fr;gap:.45rem}
  .gap{display:flex;align-items:center;justify-content:space-between;padding:.55rem .85rem;text-align:left}
  .gap b{font-size:1.05rem}
  .wa{width:3rem;height:3rem;right:.85rem;bottom:.85rem}
  .wa svg{width:1.5rem;height:1.5rem}
}
@media (max-width:400px){
  .stats{grid-template-columns:1fr;gap:1.15rem}
  .stat{display:flex;align-items:baseline;gap:.8rem}
  .stat b{font-size:1.75rem;flex:none;min-width:4.2rem}
  .stat span{margin-top:0;font-size:.79rem}
  .inds{grid-template-columns:1fr}
  .stage{max-width:17rem;perspective:520px}
  .tag{font-size:.55rem}
}

/* landscape phones - don't let a tall hero eat the whole viewport */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-block:6rem 3rem}
  .stage{max-width:18rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   19. MOTION SAFETY - non-negotiable. 3D parallax is a vestibular trigger.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .stage,.slab-wrap,.cards,.track,.why__grid,.map-wrap,.quotes,.flip{perspective:none !important}
  .corridor,.layer,.card,.step,.panel,.map,.quote,.flip__in{transform:none !important}
  .js [data-reveal],.js .stat{opacity:1 !important;transform:none !important}
  .plane,.core{display:none}
  .ring{position:relative;inset:auto;display:none}
  .ring[style*="--i:0"],.ring[style*="--i:1"],.ring[style*="--i:2"]{display:block;position:absolute;inset:calc(var(--i) * 9%)}
  .flip__in{transform:none !important}
  .flip.is-flipped .flip__in{transform:rotateY(180deg) !important}
  /* the capsule scrub is a scroll-driven 3D animation; force the cards */
  .svc__track{height:auto !important}
  .svc__sticky{position:static !important;height:auto !important;min-height:0 !important;
    padding-block:var(--sect) !important}
  .svc__stage{grid-template-columns:1fr !important}
  .svc__viz,.svc__progress{display:none !important}
  .svc__well{min-height:0 !important;display:grid !important;gap:.85rem !important}
  .svc__item{position:static !important;opacity:1 !important;transform:none !important;
    border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
    padding:clamp(1.35rem,3vw,1.75rem)}
  .svc__tags{display:none !important}
  .svc__title{margin-bottom:0 !important}
}

@media print{
  .hdr,.wa,.stage,.form,.quotes,.svc__viz,.svc__progress{display:none}
  .svc__track{height:auto}
  .svc__sticky{position:static;height:auto;min-height:0;padding-block:2rem}
  .svc__stage{grid-template-columns:1fr}
  .svc__well{min-height:0;display:grid;gap:.85rem}
  .svc__item{position:static;opacity:1;transform:none}
  .svc{background:#fff !important}
  body{color:#000}
  .hero,.why,.cta,.trust,.ftr{background:#fff !important;color:#000 !important}
  .hero h1,.why h2,.cta h2{color:#000 !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   20. WORDPRESS + ELEMENTOR INTEGRATION
   Appended to the ported design system. Everything above this line is
   byte-identical to the static build so the two cannot drift.
   ═══════════════════════════════════════════════════════════════════════ */

/* the fixed header has to clear the admin bar for logged-in editors */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){body.admin-bar .hdr{top:46px}}
body.admin-bar{--wp-admin-offset:32px}

/* Hello Elementor wraps content in .site-main with its own padding; our
   sections own their vertical rhythm, so zero it out. */
.site-main,.page-content{padding:0;margin:0;max-width:none}
.site-header,.site-footer{display:none}   /* ours are in the child templates */

/* Elementor containers must not impose a width: every section here is
   full-bleed and uses .wrap for its own max-width. */
.elementor-section-wrap>.elementor-section,
.e-con,.e-con-inner,.elementor-widget-container{max-width:none}
.e-con{--container-max-width:100%;padding:0;--padding-inline-start:0;--padding-inline-end:0;
  --padding-block-start:0;--padding-block-end:0}
.e-con>.e-con-inner{max-width:none;padding:0}
.elementor-widget:not(:last-child){margin-block-end:0}

/* Elementor injects an animation stub that can cause a flash of hidden
   content if its JS is deferred. We drive reveals ourselves. */
.elementor-invisible{visibility:visible !important}

/* ── Contact Form 7 mapped onto the .form styling ───────────────────── */
.form .wpcf7{margin:0}
.form .wpcf7 form>p{margin:0}
.form .wpcf7-not-valid-tip{display:block;margin-top:.4rem;font-size:.74rem;
  color:#FFC9A8;font-weight:500}
.form .wpcf7-response-output{margin:1rem 0 0 !important;padding:.8rem 1rem !important;
  border-radius:10px;border:1px solid rgba(255,255,255,.28) !important;
  font-size:.83rem;color:#fff}
.form .wpcf7 form.sent .wpcf7-response-output{border-color:rgba(46,158,79,.6) !important;
  background:rgba(46,158,79,.16)}
.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.failed .wpcf7-response-output{border-color:rgba(232,163,61,.6) !important;
  background:rgba(232,163,61,.14)}
.form .wpcf7-spinner{display:block;margin:.6rem auto 0}
.form input[type=submit]{width:100%;margin-top:1.25rem;cursor:pointer}
/* CF7 wraps every control in a span, which breaks the grid without this */
.form .wpcf7-form-control-wrap{display:block}

/* ── editor affordances ─────────────────────────────────────────────── */
/* Inside the Elementor canvas, sticky/fixed break the editing experience. */
.elementor-editor-active .hdr{position:relative}
.elementor-editor-active .svc__sticky{position:relative;height:auto;min-height:0}
.elementor-editor-active .svc__track{height:auto}
.elementor-editor-active .svc__item{position:relative;opacity:1;transform:none;
  border-top:1px dashed var(--line);padding-top:1rem;margin-top:1rem}
.elementor-editor-active [data-reveal]{opacity:1 !important;transform:none !important}


/* ═══════════════════════════════════════════════════════════════════════
   21. INTERIOR PAGES — hero, breadcrumb, long-form prose
   ═══════════════════════════════════════════════════════════════════════ */
.phero{padding-block:clamp(7rem,13vw,9.5rem) clamp(2.5rem,5vw,3.75rem);
  background:linear-gradient(180deg,#FFF 0%,#F4F6F8 100%);border-bottom:1px solid var(--line)}
.phero h1{max-width:20ch;margin-block:.75rem 0}
.phero .btn-row{margin-top:1.9rem}
.phero__upd{margin-top:1.5rem;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate-300)}

.crumbs{margin-bottom:1.4rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  font-size:.78rem;color:var(--slate-300)}
.crumbs li{display:flex;align-items:center;gap:.45rem}
.crumbs li:not(:last-child)::after{content:"/";color:var(--line)}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{color:var(--brand-600);text-decoration:underline}
.crumbs [aria-current]{color:var(--head);font-weight:600}

/* the direct-answer box: what snippets and AI assistants extract */
.answer{margin-top:1.5rem;max-width:62ch;padding:1.15rem 1.35rem;border-radius:14px;
  background:var(--brand-050);border:1px solid rgba(46,158,79,.24);
  border-left:4px solid var(--brand)}
.answer p{font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.6;color:var(--ink)}

/* long-form body copy inside a native Elementor Text Editor widget */
.prose{padding-block:clamp(2.75rem,6vw,4.5rem)}
.prose .elementor-widget-container>*+*{margin-top:1.05rem}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.9rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink);max-width:70ch}
.prose ul{margin-left:0}
.prose ul li{position:relative;padding-left:1.5rem;margin-bottom:.55rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;
  border-radius:50%;background:var(--brand)}
.prose ol{margin-left:1.15rem;list-style:decimal}
.prose ol li{margin-bottom:.55rem;padding-left:.35rem}
.prose strong{color:var(--head);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin-block:1.5rem;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--line);padding:.7rem .9rem;text-align:left;vertical-align:top}
.prose th{background:var(--paper);color:var(--head);font-weight:600}


/* ═══════════════════════════════════════════════════════════════════════
   22. ELEMENTOR CONTAINER SHIM
   Elementor's frontend.min.css and its generated kit files are dequeued:
   four render-blocking requests (~1,065ms on throttled mobile) that existed
   only to lay out flex containers and style stock widgets we do not use.
   These few rules replace the part we actually need.
   ═══════════════════════════════════════════════════════════════════════ */
.e-con,.e-con-inner{display:flex;flex-direction:column;width:100%;position:relative;
  min-width:0;align-content:flex-start}
.e-con{--container-max-width:100%;max-width:100%;padding:0}
.e-con>.e-con-inner{max-width:var(--container-max-width,100%);margin-inline:auto}
.elementor-widget{width:100%;min-width:0;position:relative}
.elementor-widget-container{width:100%}
.elementor-element{min-width:0}
.elementor-screen-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* reserve the caption line so a font metric change cannot re-centre the
   hero's two-column grid and move the corridor with it */
.hero__caption{min-height:1.05rem}
.hero__viz{contain:layout}


/* ═══════════════════════════════════════════════════════════════════════
   SERVICES CAPSULE — scroll-scrubbed, three phases
   One clamped 0-1 progress (capsule.js) drives three custom properties:
       0     -> 1/3   --tip  1 to 0   capsule tips vertical to horizontal
                      --split 0 to 1  the two halves draw apart
       1/3   -> 2/3   --spill 0 to 1  granules leave the shell
       2/3   -> 1     everything reverses: halves close, capsule stands up
   Phase edges sit on exact thirds, the same thirds that switch the stage
   text and ticks, so the copy can never drift out of step with the visual.
   A gentle sway runs as a compositor-only CSS animation, independent of
   scroll. A full 360 spin (as in the WebGL reference) is deliberately not
   used: CSS planes go edge-on and disappear at 90deg.
   ═══════════════════════════════════════════════════════════════════════ */

.cap{
  --p:0;
  --tip:1;                                 /* 1 vertical, 0 horizontal */
  --split:0;
  --spill:0;
  position:relative;width:100%;aspect-ratio:1/1;max-height:50svh;
  margin-inline:auto;perspective:1100px;perspective-origin:50% 48%;
}

.cap__scene{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(-8deg) rotateZ(calc(var(--tip) * 90deg));
}
.cap__spin{
  position:absolute;inset:0;transform-style:preserve-3d;
  animation:cap-sway 13s var(--ease) infinite;
}
@keyframes cap-sway{
  0%,100%{transform:rotateY(-15deg)}
  50%    {transform:rotateY(15deg)}
}

/* the pill itself — deliberately compact so it never crowds the copy */
.cap__pill{
  position:absolute;left:50%;top:50%;width:52%;height:23%;
  transform:translate(-50%,-50%);transform-style:preserve-3d;
}
.cap__half{
  position:absolute;top:0;height:100%;width:50%;
  backface-visibility:hidden;will-change:transform;
}
.cap__half--b{                             /* translucent glass half */
  left:0;border-radius:999px 0 0 999px;
  transform:translateX(calc(var(--split) * -46%));
  background:linear-gradient(170deg,rgba(255,255,255,.96) 0%,rgba(233,245,236,.86) 45%,
                             rgba(198,229,208,.82) 100%);
  border:1px solid rgba(46,158,79,.34);border-right:0;
  box-shadow:inset 14px 0 20px rgba(255,255,255,.9),
             inset -12px 0 22px rgba(46,158,79,.16),
             0 18px 38px rgba(12,45,26,.16);
}
.cap__half--a{                             /* solid brand half */
  left:50%;border-radius:0 999px 999px 0;
  transform:translateX(calc(var(--split) * 46%));
  background:linear-gradient(170deg,#38B25C 0%,#2E9E4F 42%,#1F7A3A 78%,#175E2C 100%);
  box-shadow:inset -14px 0 26px rgba(11,35,18,.34),
             inset 16px 0 22px rgba(255,255,255,.28),
             0 18px 38px rgba(12,45,26,.24);
}
/* seam ring on the open edge of each half */
.cap__half::after{
  content:"";position:absolute;top:-3%;bottom:-3%;width:3px;
  border-radius:999px;background:var(--brand-600);opacity:.55;
}
.cap__half--b::after{right:-1px}
.cap__half--a::after{left:-1px}

/* granules — seeded once by JS (rest position + escape velocity), moved by --spill.
   Offsets are multiplied by --u (1% of the capsule box) because percentages inside
   translate() resolve against the GRAIN's own box, which is ~1% wide: using % here
   makes the scatter about a hundred times too small. */
.cap__grains{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.cap__grain{
  position:absolute;left:50%;top:50%;width:1.3%;height:1.3%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#8FE0A8,#38B25C 55%,#1B6B34);
  /* Visibility follows --split (the opening gap), NOT --spill: --spill only starts
     once the capsule is fully open, which showed the granules late, already
     outside the shell. Keyed to --split they are visible inside the capsule as
     soon as the halves part, and fade back as it closes. */
  opacity:min(1,calc(var(--split) * 2.2));
  transform:
    translate(-50%,-50%)
    translate3d(
      calc((var(--rx) * (1 - var(--spill) * .4) + var(--vx) * var(--spill)) * var(--u,1px)),
      calc((var(--ry) + var(--vy) * var(--spill) * var(--spill) * 1.7) * var(--u,1px)),
      calc((var(--rz) + var(--vz) * var(--spill)) * var(--u,1px))
    )
    scale(calc(.55 + var(--spill) * .65));
}

/* soft ground shadow, spreading as the halves part */
.cap::after{
  content:"";position:absolute;left:50%;bottom:12%;width:46%;height:11%;
  transform:translateX(-50%) scaleX(calc(1 + var(--split) * .3));
  background:radial-gradient(50% 50% at 50% 50%,rgba(14,20,23,.18),transparent 70%);
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .cap{--tip:1;--split:0;--spill:0}
  .cap__spin{animation:none;transform:none}
}

/* ── hero artwork ───────────────────────────────────────────────────────
   The corridor was a CSS 3D build; it is now a single self-contained SVG.
   aspect-ratio is released so the artwork keeps its own 900:860 ratio,
   while .stage keeps supplying the responsive max-widths above. */
.stage--art{aspect-ratio:auto;perspective:none}
.hero__art{display:block;width:100%;height:auto}

/* ── real map embed ─────────────────────────────────────────────────────
   With a live map in the frame the decorative plate styling has to stand
   down. .map::after paints the fake road AFTER child content, so it would
   sit on top of the iframe, and the 3D tilt would skew a map the visitor is
   meant to pan and click. Doubled class keeps this above the .map tilt that
   a later media query re-applies. */
.map.map--embed{transform:none}
.map.map--embed:hover{transform:none}
.map.map--embed::before,
.map.map--embed::after{display:none}