/* =========================================================================
   STRATEDGE CONSULTANCY — Design System v3
   Set to the client's brand guidelines (Stratedge consultants-3.pdf, 2025).

   The deck's own art direction, not just its spec pages: a thin wide geometric
   display face, blue as the lead colour, a warm charcoal dark, hairline rules
   quartering the layout, and the triangle used large and quiet. Red is an
   accent and the Growth pillar — it is not the brand colour.
   ========================================================================= */

/* ---------- 1. RESET & TOKENS ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
:root{
  --white:#ffffff;
  --paper:#f5f4f2;
  --paper-2:#eceae6;
  /* the guidelines' dark is a warm charcoal (#242525), not a cold near-black */
  --ink:#242525;
  --ink-2:#2c2d2d;
  --ink-3:#343535;
  --ink-4:#3d3e3e;

  --text:#1b1c1c;
  --text-2:#5b5c5c;
  --text-3:#8c8d8d;
  --text-inv:#ffffff;
  --text-inv-2:rgba(255,255,255,.64);
  --text-inv-3:rgba(255,255,255,.40);

  /* Brand guidelines: blue = trust, stability, expertise · red = energy and
     bold action · orange = creativity and innovation. Blue is listed first and
     given the widest swatch in the deck, and the default logomark is blue, so
     blue leads here and drives --accent below. */
  --blue:#518a9c;
  --red:#d0423a;
  --orange:#f5b02f;
  --blue-600:#47798a;
  --blue-700:#3b6675;
  --blue-tint:rgba(81,138,156,.08);
  --blue-line:rgba(81,138,156,.30);
  --red-tint:rgba(208,66,58,.07);
  --red-line:rgba(208,66,58,.28);
  --orange-tint:rgba(245,176,47,.12);
  --orange-line:rgba(245,176,47,.42);

  /* The lead colour, used by every generic UI accent. Swapping these four
     lines re-themes the whole site. */
  --accent:var(--blue);
  --accent-600:var(--blue-600);
  --accent-700:var(--blue-700);
  --accent-tint:var(--blue-tint);
  --accent-line:var(--blue-line);
  --accent-ink:var(--blue-ink);

  /* Text-safe variants. The brand blue and orange are graphic colours and sit
     at 3.8:1 and 1.9:1 on white — fine for bars and shapes, unreadable as
     small type, so labels use these instead. */
  --blue-ink:#3e6c7b;
  --orange-ink:#8a6208;
  --red-ink:#b8372f;

  /* And the mirror of those, for text ON the dark plates. The pure brand red
     tops out at 4.52:1 even against pure black, so no amount of darkening the
     scrim can carry it — the colour itself has to lift. Measured against the
     lightest plate in the set: blue 4.51:1, red 4.56:1. Orange already clears
     6.9:1 and is left alone. */
  --blue-lift:#709fae;
  --red-lift:#df7d77;
  --orange-lift:var(--orange);

  --line:rgba(36,37,37,.13);
  --line-2:rgba(36,37,37,.075);
  --line-3:rgba(36,37,37,.04);
  --line-inv:rgba(255,255,255,.14);
  --line-inv-2:rgba(255,255,255,.07);

  --r-sm:3px; --r-md:6px; --r-lg:12px;
  --gutter:clamp(18px,3.6vw,54px);
  --maxw:1400px;
  --sect:clamp(66px,7.2vw,112px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);

  /* The guidelines name Anton under HEADING, but every heading the deck itself
     sets — cover, contents, section titles, SERVICES, THANK YOU — is Posterama
     2001 Light, and the rationale on p8 ("the triangular A nods to our
     signature symbol") describes Posterama, not Anton, whose A has a crossbar.
     Posterama is a licensed Monotype face and cannot be served on the web, so
     Jost Light stands in: the closest free geometric with the same wide, even,
     early-modern forms. The triangular A is restored separately by .triA. */
  --f-display:'Jost','Century Gothic','Futura',-apple-system,sans-serif;
  --f-title:'Jost','Century Gothic',-apple-system,sans-serif;
  --f-body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Poppins',-apple-system,sans-serif;
  --f-serif:'Jost','Century Gothic',sans-serif;

  --nav-h:76px;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);background:var(--white);color:var(--text);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;font-feature-settings:"cv11","ss01";
}
body.is-locked{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a,button,label,summary{touch-action:manipulation}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:#fff}

/* ---------- 2. TYPOGRAPHY ---------- */
/* Jost Light is a wide geometric, so it wants positive tracking and a little
   more leading — the opposite of the tight negative tracking a grotesk wants. */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:300;line-height:1.1;
  letter-spacing:.008em;color:var(--text);text-wrap:balance}
.h-display{font-size:clamp(2.4rem,4.7vw,4.2rem);line-height:1.02;letter-spacing:.01em;font-weight:200}
.h1{font-size:clamp(1.95rem,3.5vw,3rem);letter-spacing:.012em;font-weight:200}
.h2{font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:.012em;font-weight:300}
.h3{font-family:var(--f-title);font-weight:500;font-size:clamp(1.3rem,1.85vw,1.7rem);letter-spacing:-.012em;line-height:1.2}
.h4{font-family:var(--f-title);font-weight:500;font-size:clamp(1.04rem,1.24vw,1.18rem);letter-spacing:-.008em;line-height:1.32}
.h5{font-family:var(--f-title);font-weight:500;font-size:.95rem;letter-spacing:-.008em}
.lead{font-size:clamp(1rem,1.22vw,1.15rem);line-height:1.6;color:var(--text-2);max-width:60ch;font-weight:400}
p{color:var(--text-2);text-wrap:pretty}
strong{color:var(--text);font-weight:600}
.tint{color:var(--accent)}
.muted{color:var(--text-3)}
.serif{font-family:var(--f-serif);font-weight:300;letter-spacing:-.005em}

.eyebrow{font-family:var(--f-body);font-size:.68rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-out) .1s}
.eyebrow.is-in::before,.is-in .eyebrow::before{transform:scaleX(1)}
.eyebrow--inv{color:rgba(255,255,255,.9)}
.eyebrow--dot::before{width:7px;height:7px;border-radius:50%;transform:none;background:var(--accent)}
.eyebrow--dot.is-in::before{transform:none}

/* metadata label used on every panel header */
.meta{font-family:var(--f-body);font-size:.63rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-3)}
.meta--inv{color:var(--text-inv-3)}
.meta--red{color:var(--accent)}

/* ---------- 3. LAYOUT ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--sect)}
.section--tight{padding-block:clamp(48px,5vw,76px)}
.section--flush{padding-top:0}
.grid{display:grid;gap:clamp(16px,1.6vw,24px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,.28fr) minmax(0,1fr);gap:clamp(24px,3.4vw,64px)}
.g-form{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(26px,3.6vw,64px);align-items:start}

/* section header: title left, supporting copy + link right, on one baseline */
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(20px,3vw,56px);align-items:end;
  padding-bottom:clamp(18px,2vw,26px);margin-bottom:clamp(24px,2.6vw,38px);
  border-bottom:1px solid var(--line)}
.shead__i{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem}
.shead h2{margin-top:.35rem}
.shead__r{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;padding-bottom:.2rem}
.shead__r p{font-size:.94rem;max-width:44ch}
.shead--inv{border-color:var(--line-inv)}
.shead--inv p{color:var(--text-inv-2)}

/* ---------- 4. SURFACES & DECOR ---------- */
.surface-ink{background:var(--ink);color:var(--text-inv);position:relative;overflow:hidden}
.surface-ink h1,.surface-ink h2,.surface-ink h3,.surface-ink h4,.surface-ink h5{color:#fff}
.surface-ink p{color:var(--text-inv-2)}
.surface-paper{background:var(--paper)}

/* the structural hairline grid — this is the page's skeleton, and its decoration */
.rails{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rails__in{position:relative;height:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);display:grid;grid-template-columns:repeat(6,1fr)}
.rails__in span{border-left:1px solid var(--line-3)}
.rails__in span:last-child{border-right:1px solid var(--line-3)}
.rails--inv .rails__in span{border-color:var(--line-inv-2)}

.hatch{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--line-3) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line-3) 1px,transparent 1px);
  background-size:clamp(46px,4.4vw,64px) clamp(46px,4.4vw,64px)}
.hatch--fade{mask-image:linear-gradient(to bottom,#000,transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%)}
.hatch--inv{background-image:linear-gradient(to right,var(--line-inv-2) 1px,transparent 1px),
                             linear-gradient(to bottom,var(--line-inv-2) 1px,transparent 1px)}

.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;contain:paint}
.glow--accent{background:radial-gradient(circle closest-side,
  rgba(81,138,156,.19),rgba(81,138,156,.10) 40%,rgba(81,138,156,.04) 64%,transparent 78%)}
.glow--warm{background:radial-gradient(circle closest-side,
  rgba(81,138,156,.13),rgba(81,138,156,.05) 46%,transparent 76%)}
.glow--cool{background:radial-gradient(circle closest-side,
  rgba(10,12,15,.06),rgba(10,12,15,.03) 46%,transparent 76%)}
@keyframes floaty{from{transform:translate3d(0,0,0)}to{transform:translate3d(2.5%,-4%,0)}}
@media (min-width:901px) and (hover:hover){.glow--float{animation:floaty 22s ease-in-out infinite alternate}}

hr.rule{border:0;height:1px;background:var(--line);margin-block:clamp(28px,3.4vw,48px)}
hr.rule--inv{background:var(--line-inv)}

/* corner ticks — the "engineered" detail on framed panels */
.ticks::before,.ticks::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--accent);opacity:.55}
.ticks::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.ticks::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

/* ---------- 5. PRELOADER ---------- */
.preload{position:fixed;inset:0;z-index:100;background:var(--white);display:grid;place-items:center;
  transition:opacity .55s var(--e-out),visibility .55s}
.preload__inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.preload__mark{width:66px;height:58px;overflow:visible}
.preload__mark path{fill:none;stroke:var(--accent);stroke-width:6;
  stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.4s var(--e-io) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.preload__word{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--text-3);opacity:0;animation:fadeIn .7s var(--e-out) .45s forwards}
.preload__bar{width:168px;height:1.5px;background:var(--line);overflow:hidden}
.preload__bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .25s linear}
@keyframes fadeIn{to{opacity:1}}
.preload.is-done{opacity:0;visibility:hidden}
body.is-loading{overflow:hidden}

/* ---------- 6. CURSOR ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:95;pointer-events:none;border-radius:50%;
  opacity:0;transition:opacity .3s}
.cursor{width:32px;height:32px;border:1px solid rgba(10,12,15,.3);
  transition:width .3s var(--e-out),height .3s var(--e-out),background .3s,border-color .3s,opacity .3s}
.cursor-dot{width:4px;height:4px;background:var(--accent)}
body.cursor-ready .cursor,body.cursor-ready .cursor-dot{opacity:1}
body.cursor-hover .cursor{width:52px;height:52px;background:var(--accent-tint);border-color:var(--accent-line)}
@media (hover:none),(max-width:900px){.cursor,.cursor-dot{display:none}}

/* ---------- 7. NAVIGATION ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60}
.progress i{display:block;height:100%;width:0;background:var(--accent)}

.nav{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--nav-h);display:flex;align-items:center;
  transition:height .4s var(--e-out),transform .5s var(--e-out)}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line);transition:opacity .4s var(--e-out)}
.nav.is-stuck{height:64px}
.nav.is-stuck::after{opacity:1;backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%)}
.nav.is-hidden{transform:translateY(-102%)}
.nav__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav__logo{display:flex;align-items:center;flex:none;position:relative;z-index:2}
.nav__logo img{height:clamp(24px,2.2vw,30px);width:auto;transition:height .4s var(--e-out),opacity .3s}
.nav__logo-light{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
body.menu-open .nav__logo-light{opacity:1}
body.menu-open .nav__logo-dark{opacity:0}
.nav.is-stuck .nav__logo img{height:24px}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,1.9vw,2rem)}
.nav__link{position:relative;font-size:.845rem;font-weight:500;color:var(--text);padding:.35rem 0}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{color:var(--accent)}
.nav__actions{display:flex;align-items:center;gap:.7rem}
.nav__tel{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-2);
  padding-right:.9rem;margin-right:.2rem;border-right:1px solid var(--line)}
.nav__tel:hover{color:var(--accent)}

.burger{display:none;width:44px;height:44px;position:relative;z-index:2;border:1px solid var(--line);border-radius:var(--r-sm)}
.burger span{position:absolute;left:12px;width:20px;height:1.6px;background:var(--ink);
  transition:transform .4s var(--e-out),background .3s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
body.menu-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
body.menu-open .burger span{background:#fff}
body.menu-open .burger{border-color:var(--line-inv)}

.menu{position:fixed;inset:0;z-index:65;background:var(--ink);overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e-out);
  display:flex;flex-direction:column;justify-content:center;overflow:auto}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu__list{display:flex;flex-direction:column;gap:.1rem}
.menu__item{overflow:hidden}
.menu__item a{display:flex;align-items:baseline;gap:1rem;font-family:var(--f-display);font-weight:200;
  letter-spacing:.012em;text-transform:uppercase;font-size:clamp(2.2rem,8vw,4rem);line-height:1.14;color:#fff;
  transform:translateY(110%);transition:transform .85s var(--e-out),color .3s}
body.menu-open .menu__item a{transform:translateY(0)}
.menu__item a:hover{color:var(--accent)}
.menu__item i{font-family:var(--f-mono);font-style:normal;font-size:.68rem;color:var(--accent)}
.menu__cta{display:none;gap:.7rem;margin-top:clamp(1.6rem,4vw,2.4rem);opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--e-out) .35s,transform .6s var(--e-out) .35s}
body.menu-open .menu__cta{opacity:1;transform:none}
.menu__foot{margin-top:clamp(1.5rem,4vw,3rem);padding-top:1.6rem;border-top:1px solid var(--line-inv);
  display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem;opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--e-out) .42s,transform .6s var(--e-out) .42s}
body.menu-open .menu__foot{opacity:1;transform:none}
.menu__foot a,.menu__foot span{font-size:.88rem;color:var(--text-inv-2)}
.menu__foot a:hover{color:#fff}

/* ---------- 8. BUTTONS & LINKS ---------- */
.btn{--bg:var(--ink);--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.65rem;padding:.95rem 1.6rem;border-radius:var(--r-sm);font-size:.855rem;font-weight:600;
  background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;
  transition:transform .3s var(--e-out),color .3s var(--e-out),box-shadow .4s var(--e-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--e-out)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:0 14px 34px -18px rgba(81,138,156,.65)}
.btn svg{width:14px;height:14px;flex:none;transition:transform .4s var(--e-out)}
.btn:hover svg{transform:translateX(4px)}
.btn--red{--bg:var(--accent)}
.btn--red::before{background:var(--ink)}
.btn--ghost{--bg:transparent;--fg:var(--text);border:1px solid var(--line)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{--fg:#fff;border-color:transparent}
.btn--inv{--bg:#fff;--fg:var(--ink)}
.btn--inv::before{background:var(--accent)}
.btn--inv:hover{color:#fff}
.btn--ghost-inv{--bg:transparent;--fg:#fff;border:1px solid var(--line-inv)}
.btn--ghost-inv::before{background:#fff}
.btn--ghost-inv:hover{--fg:var(--ink);border-color:transparent}
.btn--lg{padding:1.1rem 2rem;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

.tlink{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:var(--text)}
.tlink span{background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1.5px;
  background-repeat:no-repeat;background-position:left bottom;padding-bottom:2px;
  transition:background-size .45s var(--e-out)}
.tlink:hover span{background-size:100% 1.5px}
.tlink svg{width:12px;height:12px;transition:transform .4s var(--e-out)}
.tlink:hover svg{transform:translate(3px,-3px)}
.tlink--inv{color:#fff}

/* ---------- 9. REVEAL SYSTEM ---------- */
[data-reveal="up"]{opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--e-out) var(--d,0s),transform .85s var(--e-out) var(--d,0s)}
[data-reveal="fade"]{opacity:0;transition:opacity 1s var(--e-out) var(--d,0s)}
[data-reveal="scale"]{opacity:0;transform:scale(.96);
  transition:opacity .9s var(--e-out) var(--d,0s),transform 1s var(--e-out) var(--d,0s)}
[data-reveal="left"]{opacity:0;transform:translateX(-32px);
  transition:opacity .9s var(--e-out) var(--d,0s),transform .9s var(--e-out) var(--d,0s)}
[data-reveal="right"]{opacity:0;transform:translateX(32px);
  transition:opacity .9s var(--e-out) var(--d,0s),transform .9s var(--e-out) var(--d,0s)}
[data-reveal="clip"]{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--e-out) var(--d,0s)}
[data-reveal="line"]{transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--e-out) var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

.split .wm{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em}
.split .wm .wd{display:inline-block;transform:translateY(115%);
  /* a touch slower than the old per-word reveal: fewer, larger movements want
     more time than many small ones */
  transition:transform 1.05s var(--e-out) var(--wd,0s)}
.split.is-in .wm .wd{transform:translateY(0)}

.wordfade .wd{display:inline-block;color:var(--text);opacity:.15;transition:opacity .45s ease}
.wordfade .wd.on{opacity:1}
.wordfade{font-family:var(--f-title);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.55rem,2.8vw,2.45rem);line-height:1.34}
.wordfade--inv .wd{color:#fff}

/* ---------- 10. FRAMED PANELS (the core density device) ---------- */
.panel{position:relative;background:transparent;border-top:2px solid var(--ink)}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 0 .8rem;border-bottom:1px solid var(--line)}
.panel__body{padding:1.1rem 0 0}
.panel--ink{background:transparent;border-top-color:var(--accent);color:#fff;padding-inline:0}
.panel--ink .row b{color:#fff}
.panel--boxed{border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:var(--r-sm);
  padding-inline:clamp(1rem,1.5vw,1.4rem)}
.panel--boxed .panel__body{padding-bottom:clamp(1rem,1.5vw,1.4rem)}
.panel--ink .panel__head{border-color:var(--line-inv)}
.panel--ink p{color:var(--text-inv-2)}
.panel--flush .panel__body{padding:0}

/* label → value rows */
.rows{display:grid}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row b{font-family:var(--f-title);font-size:.93rem;font-weight:600;letter-spacing:-.02em}
.panel--ink .row{border-color:var(--line-inv)}
.panel--ink .row b{color:#fff}

/* ---------- 11. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  padding-top:calc(var(--nav-h) + clamp(24px,3.6vh,52px));overflow:hidden;background:var(--white)}
.hero__skyline{position:absolute;left:0;right:0;bottom:100%;z-index:0;pointer-events:none;
  mask-image:linear-gradient(to top,#000 34%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 34%,transparent 100%)}
.hero__skyline svg{width:100%;height:clamp(130px,17vh,190px)}
.hero__in{position:relative;z-index:2;width:100%;margin-block:auto;
  padding-block:clamp(16px,3vh,40px)}
.hero__base{position:relative;z-index:2;margin-top:auto;background:var(--white)}
.hero__main{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
  gap:clamp(24px,3.4vw,56px);align-items:center}
.hero h1{max-width:15ch}
.hero .eyebrow{margin-bottom:1.15rem}
.hero__lead{margin-top:clamp(1.1rem,1.8vw,1.5rem);max-width:50ch;font-size:clamp(1rem,1.15vw,1.1rem)}
.hero__cta{margin-top:clamp(1.5rem,2.4vw,2.1rem)}

/* hero base credential bar */
.hero__bar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.hero__bar>div{padding:clamp(.9rem,1.4vw,1.15rem) clamp(.9rem,1.6vw,1.6rem) clamp(1rem,1.8vh,1.35rem) 0;
  border-right:1px solid var(--line);display:flex;gap:.7rem;align-items:flex-start}
.hero__bar>div:last-child{border-right:0;padding-right:0}
.hero__bar i{font-family:var(--f-mono);font-style:normal;font-size:.63rem;color:var(--accent);padding-top:.18rem}
.hero__bar b{display:block;font-family:var(--f-title);font-size:.9rem;font-weight:600;
  letter-spacing:-.02em;margin-bottom:.1rem}
.hero__bar p{font-size:.79rem;line-height:1.42;color:var(--text-3);margin:0}

/* ---------- 11b. CAPABILITY ORBIT (hero) ---------- */
.orbit{position:relative;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:716/596}
.orbit svg{width:100%;height:100%;overflow:visible}
.orbit .ring{fill:none;stroke:rgba(10,12,15,.14);stroke-dasharray:3 7}
.orbit .ring--out{stroke-dasharray:2 9}
.orbit .ring--in{stroke:rgba(10,12,15,.09);stroke-dasharray:none}
.orbit .tick{stroke:rgba(10,12,15,.16);stroke-width:1}
.orbit .tick--long{stroke:rgba(10,12,15,.3)}
.orbit .bezel{transform-origin:280px 280px;opacity:0;transition:opacity 1.1s var(--e-out) .2s}
.orbit.is-in .bezel{opacity:1}
.orbit .web{fill:rgba(81,138,156,.028);stroke:rgba(10,12,15,.13);stroke-width:1;
  transform-origin:280px 280px;transform:scale(.86);opacity:0;
  transition:transform 1.2s var(--e-out) .25s,opacity .9s var(--e-out) .25s}
.orbit.is-in .web{transform:scale(1);opacity:1}
.orbit .halo{fill:var(--white);stroke:none}
.orbit .core-dot{fill:var(--accent)}
.orbit .ring--mid{stroke:rgba(81,138,156,.26)}
.orbit .ring--spin{transform-origin:280px 280px;animation:spin 90s linear infinite}
.orbit .ring--spin-rev{transform-origin:280px 280px;animation:spin 66s linear infinite reverse}
.orbit .spoke{stroke:rgba(10,12,15,.15);stroke-width:1;pointer-events:none;
  stroke-dasharray:180;stroke-dashoffset:180;
  transition:stroke-dashoffset 1s var(--e-out) var(--od,0s),stroke .35s}
.orbit.is-in .spoke{stroke-dashoffset:0}
.orbit .node{cursor:default}
.orbit .node circle{fill:var(--white);stroke:var(--ink);stroke-width:1.4;
  opacity:0;transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--e-out) var(--od,0s),transform .4s var(--e-out),fill .35s,stroke .35s}
.orbit.is-in .node circle{opacity:1}
.orbit .node text{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;fill:var(--text-2);font-weight:500;opacity:0;
  transition:opacity .6s var(--e-out) var(--od,0s),fill .35s}
.orbit .node tspan.n{fill:var(--accent);font-size:9.5px}
.orbit.is-in .node text{opacity:1}
.orbit .node:hover circle{fill:var(--accent);stroke:var(--accent);transform:scale(1.45)}
.orbit .node:hover text{fill:var(--text)}
.orbit .node:hover .spoke{stroke:var(--accent);stroke-width:1.4}
.orbit .core{transform-origin:280px 280px;animation:corepulse 6s var(--e-io) infinite alternate}
@keyframes corepulse{from{transform:scale(.97)}to{transform:scale(1.03)}}
.orbit .core path{fill:none;stroke:var(--accent);stroke-width:2.4}
.orbit .core-fill{fill:rgba(81,138,156,.05)}
.orbit__cap{position:absolute;left:50%;top:60%;transform:translateX(-50%);
  text-align:center;width:200px;
  text-shadow:0 0 9px #fff,0 0 18px #fff,0 0 28px #fff}
.orbit__cap b{display:block;font-family:var(--f-title);font-size:.94rem;font-weight:600;
  letter-spacing:-.02em;margin-bottom:.15rem}
.orbit__cap span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}

/* ---------- 13b. FACT LEDGER (positioning section) ---------- */
.ledger{position:relative;padding-left:clamp(1rem,1.6vw,1.6rem)}
.ledger::before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform 1.1s var(--e-out) .1s}
.ledger.is-in::before{transform:scaleY(1)}
.ledger__row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.2rem 1rem;
  align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line);
  transition:transform .45s var(--e-out)}
.ledger__row:first-child{padding-top:0}
.ledger__row:last-child{border-bottom:0}
.ledger__row:hover{transform:translateX(6px)}
.ledger__i{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.1em;color:var(--text-3);
  transition:color .35s}
.ledger__row:hover .ledger__i{color:var(--accent)}
.ledger__k{grid-column:2;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:.24rem}
.ledger__v{grid-column:2;font-family:var(--f-display);font-weight:300;letter-spacing:.01em;
  font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.12;color:var(--text);display:block}
.ledger__v em{font-style:normal;color:var(--red)}

/* ---------- 12. TICKER ---------- */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--white)}
.ticker__in{display:flex;align-items:stretch}
.ticker__lbl{flex:none;display:flex;align-items:center;gap:.6rem;padding:.9rem clamp(1rem,2vw,1.6rem);
  border-right:1px solid var(--line);background:var(--paper)}
.ticker__vp{flex:1;overflow:hidden;display:flex;align-items:center}
.ticker__track{display:flex;width:max-content;animation:marq 44s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__grp{display:flex;align-items:center;gap:clamp(1.6rem,3vw,2.8rem);padding-right:clamp(1.6rem,3vw,2.8rem)}
.ticker__item{display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-family:var(--f-title);font-weight:500;font-size:clamp(.88rem,1.05vw,1.02rem);
  letter-spacing:-.02em;color:var(--text-3);transition:color .3s}
.ticker__item:hover{color:var(--text)}
.ticker__item::before{content:"";width:6px;height:6px;flex:none;background:var(--accent);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
@keyframes marq{to{transform:translateX(-50%)}}
.ticker--inv{background:var(--ink);border-color:var(--line-inv)}
.ticker--inv .ticker__lbl{background:var(--ink-2);border-color:var(--line-inv)}
.ticker--inv .ticker__item{color:var(--text-inv-3)}
.ticker--inv .ticker__item:hover{color:#fff}

/* ---------- 13. STATEMENT + GLANCE ---------- */
.statement{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr);
  gap:clamp(26px,3.6vw,64px);align-items:start}
.statement__sig{display:flex;align-items:center;gap:.9rem;margin-top:clamp(1.6rem,2.4vw,2.2rem);
  padding-top:1.2rem;border-top:1px solid var(--line)}
.statement__sig img{height:26px;width:auto;opacity:.9}
.statement__sig span{font-size:.82rem;color:var(--text-3)}

/* ---------- 14. SERVICE EXPLORER ---------- */
.explorer{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(20px,2.4vw,40px);align-items:stretch}
.ex-col{display:flex;flex-direction:column;min-width:0}
.ex-aside{margin-top:auto;padding-top:clamp(1.2rem,2vw,1.8rem)}
.ex-aside .meta{display:block;margin-bottom:.85rem}
.ex-models{display:grid;gap:.1rem;border-top:1px solid var(--line)}
.ex-models a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:.7rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px solid var(--line);transition:transform .4s var(--e-out)}
.ex-models a:hover{transform:translateX(5px)}
.ex-models i{font-family:var(--f-mono);font-style:normal;font-size:.66rem;color:var(--accent)}
.ex-models b{font-family:var(--f-title);font-size:.92rem;font-weight:600;letter-spacing:-.02em}
.ex-models span{display:block;font-size:.83rem;color:var(--text-3);margin-top:.1rem}
.ex-list{border-top:1px solid var(--line)}
.ex-item{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:.9rem;
  align-items:center;text-align:left;padding:clamp(.95rem,1.5vw,1.25rem) 0;
  border-bottom:1px solid var(--line);position:relative;color:var(--text)}
.ex-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--e-out)}
.ex-item__n{font-family:var(--f-mono);font-size:.7rem;color:var(--text-3);transition:color .3s}
.ex-item__t{font-family:var(--f-title);font-weight:500;letter-spacing:-.028em;
  font-size:clamp(1.02rem,1.35vw,1.24rem);transition:transform .5s var(--e-out),color .3s;line-height:1.2}
.ex-item__go{width:22px;height:22px;display:grid;place-items:center;opacity:0;
  transition:opacity .4s var(--e-out),transform .5s var(--e-out);transform:translateX(-6px)}
.ex-item__go svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:1.8}
.ex-item:hover .ex-item__t{transform:translateX(5px)}
.ex-item.is-on::before{transform:scaleY(1)}
.ex-item.is-on{padding-left:1.1rem}
.ex-item.is-on .ex-item__n{color:var(--accent)}
.ex-item.is-on .ex-item__go{opacity:1;transform:translateX(0)}

.ex-panel{position:relative;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--white);overflow:hidden;min-height:clamp(420px,44vw,520px)}
.ex-pane{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--e-out),transform .6s var(--e-out),visibility .5s}
.ex-pane.is-on{opacity:1;visibility:visible;transform:none;position:relative}
.ex-pane__viz{position:relative;height:clamp(150px,17vw,196px);border-bottom:1px solid var(--line);
  background:linear-gradient(160deg,var(--paper),var(--white) 62%);overflow:hidden}
.ex-pane__viz svg{position:absolute;inset:0;width:100%;height:100%}
.ex-pane__viz .meta{position:absolute;left:1.1rem;bottom:.85rem}
.ex-pane__body{padding:clamp(1.15rem,1.8vw,1.6rem)}
.ex-pane__body h3{margin:.5rem 0 .6rem}
.ex-pane__body p{font-size:.94rem;max-width:52ch}
.ex-dl{display:grid;grid-template-columns:1fr 1fr;gap:.42rem .9rem;margin-top:1.15rem;
  padding-top:1.15rem;border-top:1px solid var(--line)}
.ex-dl li{display:flex;gap:.55rem;font-size:.85rem;color:var(--text-2);line-height:1.4}
.ex-dl li::before{content:"";width:5px;height:5px;margin-top:.52rem;flex:none;background:var(--accent);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.ex-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line)}

/* ---------- 15. STANDARD BAND (dark) ---------- */
.std{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-inv)}
.std__i{padding:clamp(1.4rem,2.2vw,2rem) clamp(1rem,1.6vw,1.6rem);
  border-bottom:1px solid var(--line-inv);border-right:1px solid var(--line-inv);
  position:relative;transition:background .45s}
.std__i:first-child{border-left:1px solid var(--line-inv)}
.std__i:hover{background:var(--ink-2)}
.std__n{font-family:var(--f-mono);font-size:.66rem;color:var(--accent);letter-spacing:.14em;
  display:block;margin-bottom:1.1rem}
.std__i h4{margin-bottom:.5rem}
.std__i p{font-size:.87rem;line-height:1.5}
.std__mark{position:absolute;right:1rem;top:1rem;width:26px;height:26px;opacity:.28}
.std__mark svg{width:100%;height:100%;stroke:#fff;fill:none;stroke-width:1.2}

/* ---------- 16. METHOD RAIL ----------
   A plain block section with a horizontal scroll rail. Its height is its
   content, so it cannot leave an empty band at any viewport size. */
.pin{position:relative}
.pin__sticky{position:relative;padding-block:var(--sect);overflow:hidden}
.pin__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem;
  padding-bottom:clamp(16px,2vw,26px);margin-bottom:clamp(18px,2.4vw,30px);
  border-bottom:1px solid var(--line-inv)}
.pin__pg{display:flex;align-items:center;gap:.7rem}
.pin__pg b{display:block;width:clamp(90px,12vw,150px);height:2px;background:var(--line-inv);
  position:relative;overflow:hidden;border-radius:2px}
.pin__pg b::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;
  transform:scaleX(var(--p,0));transition:transform .25s var(--e-out)}
.rail-btn{width:38px;height:38px;flex:none;border:1px solid var(--line-inv);border-radius:50%;
  display:grid;place-items:center;transition:background .3s,border-color .3s,opacity .3s}
.rail-btn svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.7}
.rail-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.rail-btn:disabled{opacity:.28;cursor:default}

.pin__vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:2px;
  cursor:grab}
.pin__vp::-webkit-scrollbar{display:none}
.pin__vp.is-dragging{cursor:grabbing;scroll-snap-type:none}
.pin__track{display:flex;gap:clamp(14px,1.6vw,22px)}
.phase{flex:none;width:clamp(268px,26vw,352px);scroll-snap-align:start;
  border:1px solid var(--line-inv);border-radius:var(--r-md);background:var(--ink-2);
  padding:clamp(1.2rem,1.8vw,1.7rem);display:flex;flex-direction:column;
  min-height:clamp(268px,34vw,392px);transition:border-color .4s,background .4s}
.phase:hover{border-color:var(--accent-line);background:var(--ink-3)}
.phase__n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--accent);margin-bottom:1rem}
.phase h3{margin-bottom:.65rem}
.phase p{font-size:.89rem;line-height:1.55}
.phase__viz{margin-top:auto;padding-top:1.2rem}
.phase__viz svg{width:100%;height:64px;overflow:visible}
.phase__out{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line-inv);
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-inv-3)}
.phase--out{background:linear-gradient(165deg,var(--ink-3),var(--ink-2));border-color:var(--accent-line)}
.phase__list{display:grid;gap:.5rem;margin-top:1.2rem}
.phase__list li{display:flex;gap:.6rem;font-size:.87rem;color:var(--text-inv-2);line-height:1.45}
.phase__list li::before{content:"";width:5px;height:5px;margin-top:.5rem;flex:none;background:var(--accent);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.phase--out .phase__out{margin-top:auto}
.pin__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:clamp(16px,2.2vw,28px);padding-top:1.1rem;border-top:1px solid var(--line-inv)}

/* ---------- 17. SECTORS ---------- */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.sector{background:var(--white);padding:clamp(1.2rem,1.9vw,1.7rem);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.65rem}
.sector::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(100%);
  transition:transform .55s var(--e-out);z-index:0}
.sector:hover::before{transform:translateY(0)}
.sector>*{position:relative;z-index:1;transition:color .4s}
.sector__h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.sector h4{transition:color .4s}
.sector .meta{transition:color .4s}
.sector ul{display:grid;gap:.32rem;margin-top:.15rem}
.sector li{font-size:.83rem;color:var(--text-3);display:flex;gap:.5rem;transition:color .4s}
.sector li::before{content:"";width:4px;height:4px;margin-top:.5rem;flex:none;background:var(--accent);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.sector:hover h4{color:#fff}
.sector:hover li{color:var(--text-inv-2)}
.sector:hover .meta{color:var(--accent)}

/* ---------- 18. ACCORDION ---------- */
.acc{border-top:1px solid var(--line)}
.acc--inv{border-color:var(--line-inv)}
.acc__i{border-bottom:1px solid var(--line)}
.acc--inv .acc__i{border-color:var(--line-inv)}
.acc__h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
  padding:1.15rem 0;text-align:left}
.acc__h h4,.acc__h .acc__ic{transition:transform .4s var(--e-out),color .3s}
.acc__h:hover h4{transform:translateX(.5rem);color:var(--accent)}
.acc__ic{width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;position:relative;transition:background .4s,border-color .4s,transform .45s var(--e-out)}
.acc--inv .acc__ic{border-color:var(--line-inv)}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:var(--ink);transition:transform .4s var(--e-out),background .4s}
.acc--inv .acc__ic::before,.acc--inv .acc__ic::after{background:#fff}
.acc__ic::before{width:10px;height:1.5px}
.acc__ic::after{width:1.5px;height:10px}
.acc__i.on .acc__ic{background:var(--accent);border-color:var(--accent);transform:rotate(180deg)}
.acc__i.on .acc__ic::before,.acc__i.on .acc__ic::after{background:#fff}
.acc__i.on .acc__ic::after{transform:scaleY(0)}
.acc__c{overflow:hidden;height:0;transition:height .5s var(--e-out)}
.acc__c div{padding-bottom:1.3rem;max-width:74ch}
.acc__c p{font-size:.92rem}

/* ---------- 19. CARDS / SHARED BLOCKS ---------- */
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.25rem,1.9vw,1.8rem);overflow:hidden;isolation:isolate;
  transition:transform .45s var(--e-out),border-color .4s,box-shadow .45s var(--e-out)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),var(--accent-tint),transparent 62%);
  transition:opacity .45s}
.card:hover{transform:translateY(-4px);border-color:var(--accent-line);
  box-shadow:0 22px 50px -32px rgba(10,12,15,.3)}
.card:hover::after{opacity:1}
.card__n{position:absolute;top:1rem;right:1.1rem}
.card__ico{width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--accent-tint);margin-bottom:1.1rem;transition:background .4s}
.card__ico svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.5}
.card:hover .card__ico{background:var(--accent)}
.card:hover .card__ico svg{stroke:#fff}
.card h4{margin-bottom:.5rem}
.card p{font-size:.9rem}
.card--inv{background:var(--ink-2);border-color:var(--line-inv)}
.card--inv h3,.card--inv h4{color:#fff}
.card--inv p{color:var(--text-inv-2)}
.card--tilt{transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}

.checks{display:grid;gap:.7rem;margin-top:1.4rem}
.checks li{display:flex;gap:.75rem;align-items:flex-start;font-size:.92rem;color:var(--text-2)}
.checks svg{width:16px;height:16px;flex:none;margin-top:.26rem;stroke:var(--accent);fill:none;stroke-width:2}
.checks--inv li{color:var(--text-inv-2)}

.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.6vw,64px);align-items:center}
.feat__media{position:relative;aspect-ratio:4/3.2;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(155deg,var(--paper),var(--white) 60%);border:1px solid var(--line)}
.feat__media--ink{background:linear-gradient(155deg,var(--ink-2),var(--ink));border-color:var(--line-inv)}
.feat__media svg.art{position:absolute;inset:0;width:100%;height:100%}
.feat__media .badge{position:absolute;left:1.1rem;bottom:1rem}

.valuelist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.value{background:var(--white);padding:clamp(1.2rem,1.9vw,1.7rem);transition:background .4s}
.value:hover{background:var(--paper)}
.value b{display:flex;align-items:center;gap:.6rem;font-family:var(--f-title);font-size:1rem;
  letter-spacing:-.02em;margin-bottom:.5rem}
.value b::before{content:"";width:7px;height:7px;background:var(--accent);flex:none;
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.value p{font-size:.88rem}

.quote{position:relative;padding-left:clamp(1.2rem,2.2vw,2rem);border-left:2px solid var(--accent)}
.quote p{font-family:var(--f-title);font-weight:300;letter-spacing:-.008em;
  font-size:clamp(1.25rem,2.1vw,1.85rem);line-height:1.32;color:var(--text)}
.quote--inv p{color:#fff}
.quote cite{display:block;margin-top:.9rem;font-style:normal;font-family:var(--f-mono);
  font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

.person{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:clamp(18px,2.6vw,42px);
  align-items:center;border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.3rem,2.2vw,2rem);background:var(--white)}
.person__av{aspect-ratio:1;border-radius:var(--r-sm);background:linear-gradient(150deg,var(--ink-2),var(--ink));
  display:grid;place-items:center;position:relative;overflow:hidden}
.person__tri{position:absolute;inset:14%;width:72%;height:auto;opacity:.85}
.person__av span{font-family:var(--f-display);font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:300;
  color:#fff;letter-spacing:-.04em;position:relative;z-index:1}
.person__role{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.45rem}

.callout{border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--r-sm);
  padding:clamp(1.1rem,1.8vw,1.5rem);background:var(--paper)}
.callout p{font-size:.92rem}

.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.ccard{border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(1.15rem,1.9vw,1.6rem);
  display:flex;flex-direction:column;gap:.5rem;
  transition:transform .45s var(--e-out),border-color .4s,background .4s}
.ccard:hover{transform:translateY(-4px);border-color:var(--accent-line);background:var(--paper)}
.ccard b{font-family:var(--f-title);font-size:1rem;letter-spacing:-.02em;font-weight:600;word-break:break-word}
.ccard__mail{font-size:.93rem!important;word-break:normal;overflow-wrap:break-word;line-height:1.35}
.ccard p{font-size:.83rem}

/* services page detail sections */
.sticky-col{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start}
.snav{display:grid;gap:.06rem;border-left:1px solid var(--line)}
.snav a{padding:.5rem 0 .5rem 1rem;font-size:.86rem;color:var(--text-3);position:relative;
  transition:color .3s,transform .4s var(--e-out)}
.snav a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1.5px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--e-out)}
.snav a:hover{color:var(--text)}
.snav a.on{color:var(--accent);transform:translateX(.22rem)}
.snav a.on::before{transform:scaleY(1)}
.detail{padding-block:clamp(2rem,4vw,3.4rem);border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--nav-h) + 18px)}
.detail:first-child{border-top:0;padding-top:0}
.deliverables{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:1.3rem}
.deliverables li{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--text-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.72rem .85rem;
  transition:border-color .35s,background .35s}
.deliverables li:hover{border-color:var(--accent-line);background:var(--paper)}
.deliverables i{font-family:var(--f-mono);font-style:normal;font-size:.62rem;color:var(--accent);padding-top:.16rem}
.engage{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.engage .card ul{display:grid;gap:.45rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.engage .card li{display:flex;gap:.55rem;font-size:.85rem;color:var(--text-2)}
.engage .card li::before{content:"";width:5px;height:5px;margin-top:.5rem;flex:none;background:var(--accent);
  clip-path:polygon(50% 0,100% 100%,0 100%)}

.viz-frame{position:relative;height:clamp(146px,15vw,186px);border:1px solid var(--line);
  border-radius:var(--r-md);background:linear-gradient(160deg,var(--paper),var(--white) 62%);
  overflow:hidden;margin-bottom:1.5rem}
.viz-frame svg{position:absolute;inset:0;width:100%;height:100%}
.viz-frame .meta{position:absolute;left:1rem;bottom:.8rem}
.phero__panel{margin-bottom:.2rem}
.mini-index{display:grid;grid-template-columns:1fr 1fr;gap:.05rem .9rem}
.mini-index a{display:flex;gap:.6rem;align-items:baseline;padding:.5rem 0;
  border-bottom:1px solid var(--line);font-size:.86rem;color:var(--text-2);
  transition:transform .4s var(--e-out),color .3s}
.mini-index a:hover{transform:translateX(4px);color:var(--accent)}
.mini-index i{font-family:var(--f-mono);font-style:normal;font-size:.62rem;color:var(--accent)}

/* ---------- 20. FORMS ---------- */
.form{display:grid;gap:1rem}
.field{position:relative;display:grid;gap:.42rem}
.field label{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.field input,.field textarea,.field select{width:100%;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.88rem 1rem;font-size:.93rem;color:var(--text);
  transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:145px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#aeb4be}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(81,138,156,.1)}
.field.err input,.field.err textarea,.field.err select{border-color:var(--accent)}
.field small.msg{color:var(--accent);font-size:.74rem;display:none}
.field.err small.msg{display:block}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form__note{font-size:.78rem;color:var(--text-3)}
.form-ok{display:none;align-items:flex-start;gap:.85rem;padding:1rem 1.1rem;border:1px solid var(--accent-line);
  background:var(--accent-tint);border-radius:var(--r-sm);font-size:.9rem;color:var(--text)}
.form-ok.on{display:flex}
.form-ok svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2;flex:none;margin-top:.2rem}
.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.82rem;color:var(--text-3)}
.consent input{width:15px;height:15px;margin-top:.2rem;accent-color:var(--accent);flex:none}

/* ---------- 21. CTA + FOOTER ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-block:clamp(60px,7vw,104px)}
.cta h1,.cta h2,.cta h3{color:#fff}
.cta__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(26px,3.6vw,64px);align-items:end}
.cta h2{max-width:16ch}
.cta__contacts{display:grid;border-top:1px solid var(--line-inv)}
.cta__c{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 0;
  border-bottom:1px solid var(--line-inv)}
.cta__c>*{transition:transform .4s var(--e-out)}
.cta__c:hover>*{transform:translateX(.6rem)}
.cta__c a,.cta__c span{font-size:.95rem;color:#fff;font-weight:500}
.cta__c a:hover{color:var(--accent)}

.footer{background:var(--white);border-top:1px solid var(--line);padding-top:clamp(48px,5.6vw,76px);
  position:relative;overflow:hidden}
.footer__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.82fr));
  gap:clamp(24px,3vw,48px)}
.footer__brand img{height:30px;width:auto;margin-bottom:1.1rem}
.footer__brand p{font-size:.9rem;max-width:34ch}
.footer h5{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;margin-bottom:1rem}
.footer__links{display:grid;gap:.55rem}
.footer__links a{font-size:.89rem;color:var(--text-2);width:fit-content;position:relative}
.footer__links a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e-out)}
.footer__links a:hover{color:var(--text)}
.footer__links a:hover::after{transform:scaleX(1);transform-origin:left}
.footer__bot{margin-top:clamp(34px,4vw,54px);padding-block:1.3rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;align-items:center}
.footer__bot p,.footer__bot a{font-size:.78rem;color:var(--text-3)}
.footer__bot a:hover{color:var(--accent)}
.socials{display:flex;gap:.45rem}
.socials a{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  transition:background .35s,border-color .35s,transform .35s var(--e-out)}
.socials svg{width:14px;height:14px;fill:var(--text-2);transition:fill .35s}
.socials a:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-3px)}
.socials a:hover svg{fill:#fff}
.footer__word{width:100%;margin-top:clamp(18px,2.4vw,30px);opacity:.045;pointer-events:none}
.footer__word svg{width:100%;height:auto}

/* ---------- 22. FLOATING ACTIONS ---------- */
.wa{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:55;
  width:50px;height:50px;border-radius:50%;background:var(--ink);display:grid;place-items:center;
  box-shadow:0 12px 30px -14px rgba(10,12,15,.55);
  transform:translateY(200%);transition:transform .6s var(--e-out),background .35s}
.wa.on{transform:translateY(0)}
.wa:hover{background:var(--accent)}
.wa svg{width:22px;height:22px;fill:#fff}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);
  animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}

.mbar{position:fixed;left:0;right:0;bottom:0;z-index:58;display:none;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -10px 26px -22px rgba(10,12,15,.5);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(115%);transition:transform .5s var(--e-out)}
.mbar.on{transform:translateY(0)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  padding:.66rem .4rem .7rem;position:relative;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.mbar a+a::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line)}
.mbar svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6}
.mbar a:last-child{color:var(--accent)}
.mbar a:last-child svg{stroke:var(--accent)}
.mbar a:active{background:var(--paper)}
.swipe{display:none;margin-top:.8rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);align-items:center;gap:.5rem}
.swipe::after{content:"";width:24px;height:1px;background:var(--line)}

/* ---------- 23. PAGE HERO (inner pages) ---------- */
.phero{position:relative;padding-top:calc(var(--nav-h) + clamp(46px,7vh,92px));
  padding-bottom:clamp(34px,4.4vw,60px);overflow:hidden;background:var(--white)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(20px,3vw,56px);align-items:end}
.crumbs{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:.9rem;display:flex;gap:.5rem;align-items:center}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--accent)}

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width:1240px){
  .hero__main{grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr)}
  .explorer{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}
@media (max-width:1080px){
  .footer__top{grid-template-columns:1fr 1fr;gap:32px}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .std{grid-template-columns:repeat(2,1fr)}
  .std__i:nth-child(3){border-left:1px solid var(--line-inv)}
  .valuelist{grid-template-columns:repeat(2,1fr)}
  .hero__bar{grid-template-columns:repeat(2,1fr)}
  .hero__bar>div:nth-child(2n){border-right:0}
  .hero__bar>div{border-bottom:1px solid var(--line)}
  .hero__bar>div:nth-child(n+3){border-bottom:0}
}

@media (max-width:900px){
  :root{--nav-h:70px;--sect:clamp(58px,8vw,92px)}
  .nav__links,.nav__tel{display:none}
  .nav__actions .btn{display:none}
  .burger{display:block}
  .menu__cta{display:grid;grid-template-columns:1fr}
  .mbar{display:grid}
  .wa{display:none}
  .footer__bot{padding-bottom:4.6rem}
  .rails__in{grid-template-columns:repeat(3,1fr)}

  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 44px);padding-bottom:0}
  .hero__main,.phero__grid,.feat,.cta__in,.shead,.statement,.explorer,
  .g-2,.g-3,.g-4,.g-side,.g-form{grid-template-columns:1fr}
  .shead{align-items:start}
  .shead__r{gap:.8rem}
  .hero h1{max-width:17ch}
  .hero__panel{margin-top:1.4rem}
  .orbit{max-width:420px}
  .feat--rev .feat__media{order:-1}
  .feat__media{aspect-ratio:16/10}
  .ex-col{display:contents}
  .ex-list{order:1}
  .ex-panel{order:2;min-height:0}
  .ex-aside{order:3;margin-top:0;padding-top:0}
  .ex-pane{position:relative;display:none}
  .ex-pane.is-on{display:grid}
  .sticky-col{position:static;margin-bottom:1.8rem}
  .snav{display:grid;grid-template-columns:1fr 1fr;border-left:0;gap:0 .9rem}
  .snav a{border-left:1px solid var(--line)}
  .contact-cards,.engage{grid-template-columns:1fr 1fr}
  .person{grid-template-columns:1fr}
  .person__av{max-width:170px}
  .valuelist{grid-template-columns:1fr}

  .phase{width:min(78vw,340px)}
  .rail-btn{display:none}
}

@media (max-width:760px){
  .snap{display:grid;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:12px;
    margin-inline:calc(var(--gutter) * -1);scroll-padding-inline:var(--gutter);
    padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .snap::-webkit-scrollbar{display:none}
  .snap>*{scroll-snap-align:start}
  .snap>*:first-child{margin-left:var(--gutter)}
  .snap>*:last-child{margin-right:var(--gutter)}
  .swipe{display:flex}

  .sectors{background:transparent;border:0}
  .sector{border:1px solid var(--line);border-radius:var(--r-md)}
  .std{grid-template-columns:1fr}
  .std__i{border-left:1px solid var(--line-inv)!important}
  .deliverables,.ex-dl,.form__row,.contact-cards,.engage{grid-template-columns:1fr}
  .field input,.field textarea,.field select{font-size:16px;padding:.95rem 1rem}
  .field textarea{min-height:160px}
  .hero__bar{grid-template-columns:1fr}
  .hero__bar>div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:.8rem}
  .hero__bar>div:last-child{border-bottom:0}
}

@media (max-width:560px){
  :root{--sect:clamp(52px,11vw,76px)}
  .hatch{background-size:44px 44px}
  .eyebrow{letter-spacing:.16em;font-size:.64rem}
  .footer__top{grid-template-columns:1fr;gap:26px}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .ticker__lbl{display:none}
  .card{padding:1.2rem 1.15rem}
  .quote{padding-left:1rem}
  .person{padding:1.2rem}
}

@media (max-height:540px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 28px)}
  .pin__sticky{height:auto;position:relative}
  .menu__item a{font-size:clamp(1.5rem,6.5vw,2.2rem)}
}

/* ---------- 25. ACCESSIBILITY ---------- */
:where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.85rem 1.2rem}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .split .wm .wd{transform:none!important}
  .wordfade .wd{opacity:1!important}
  .cursor,.cursor-dot,.preload{display:none}
}

/* ---------- 26. SVG ART ---------- */
.art .dash{stroke-dasharray:5 9;animation:dashmove 16s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-140}}
.art .pulse{transform-origin:center;animation:artpulse 7s var(--e-io) infinite alternate}
@keyframes artpulse{from{transform:scale(.95);opacity:.6}to{transform:scale(1.03);opacity:1}}
.art .slow{transform-origin:center;animation:spin 64s linear infinite}
.art .slow-rev{transform-origin:center;animation:spin 48s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* charts drawn on reveal */
.chart .bar{transform-origin:bottom;transform:scaleY(0);
  transition:transform .9s var(--e-out) var(--cd,0s)}
.is-in .chart .bar,.chart.is-in .bar{transform:scaleY(1)}
.chart .track{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.5s var(--e-out) .15s}
.is-in .chart .track,.chart.is-in .track{stroke-dashoffset:0}
.chart .pt{opacity:0;transition:opacity .5s var(--e-out) var(--cd,0s)}
.is-in .chart .pt,.chart.is-in .pt{opacity:1}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart--inv .grid line{stroke:var(--line-inv)}

/* =========================================================================
   v3 — BOLD & ANGULAR
   Response to review: logo too small, page too quiet, purpose unclear,
   too many competing micro-elements. Fewer devices, larger moves.
   ========================================================================= */

/* ---- 1. LOGO: 28px was 37% of the nav bar and the second line was ~6px --- */
:root{--nav-h:92px}
.nav__logo img{height:clamp(38px,3.6vw,48px)}
.nav.is-stuck{height:70px}
.nav.is-stuck .nav__logo img{height:34px}
@media (max-width:900px){
  :root{--nav-h:78px}
  .nav__logo img{height:36px}
  .nav.is-stuck .nav__logo img{height:30px}
}

/* ---- 2. QUIETER STRUCTURE: one device, not four ------------------------- */
.hero .hatch,.hero .rails{display:none}
.v3 .rails,.v3 .hatch{display:none}

/* ---- 3. TYPE: more weight, more scale contrast -------------------------- */
.v3 h1,.v3 h2{font-weight:200;letter-spacing:.01em}
/* Jost sets much wider than Anton, so the ceilings come down to keep long
   headlines from running to five lines. */
.h-mega{font-family:var(--f-display);font-weight:200;letter-spacing:.008em;
  line-height:1.02;font-size:clamp(2.45rem,5.9vw,4.9rem);text-wrap:balance;
  text-transform:uppercase}
.h-big{font-family:var(--f-display);font-weight:200;letter-spacing:.014em;
  line-height:1.08;font-size:clamp(1.8rem,3.9vw,3rem);text-wrap:balance;
  text-transform:uppercase}
.say{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.5;color:var(--ink-2);
  max-width:46ch;font-weight:400}

/* ---- 4. HERO v3 --------------------------------------------------------- */
.hero3{position:relative;background:var(--white);overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(24px,4vh,56px))}
.hero3__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,72px);align-items:center}
.hero3__copy{padding-bottom:clamp(16px,3vh,40px)}
.hero3 .eyebrow{margin-bottom:1.1rem}
.hero3 h1{margin-bottom:1.15rem}
.hero3 .btn-row{margin-top:clamp(1.6rem,2.6vw,2.3rem)}
.hero3__media{position:relative;aspect-ratio:3/4;max-height:min(74vh,680px);
  justify-self:end;width:100%}
.hero3__clip{position:absolute;inset:0;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 132px),calc(100% - 132px) 100%,0 100%)}
.hero3__clip img{width:100%;height:100%;object-fit:cover;display:block}
.hero3__clip::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(81,138,156,.18),transparent 46%)}
/* red triangle locked into the cut corner */
.hero3__mark{position:absolute;right:0;bottom:0;width:132px;height:132px;
  background:var(--accent);clip-path:polygon(100% 0,100% 100%,0 100%);z-index:2}
.hero3__mark span{position:absolute;right:16px;bottom:12px;font-family:var(--f-mono);
  font-size:.62rem;letter-spacing:.18em;color:#fff;font-weight:500}

/* ---- 5. THE OFFER STRIP: what we do, before any scrolling --------------- */
.offer{border-top:2px solid var(--ink);margin-top:clamp(26px,4vh,52px)}
.offer__row{display:grid;grid-template-columns:repeat(6,1fr)}
.offer__row>*{display:block;padding:1.15rem 1rem 1.3rem 0;border-right:1px solid var(--line);
  transition:background .3s,padding-left .35s var(--e-out)}
.offer__row>*:last-child{border-right:0}
.offer a:hover{background:var(--paper);padding-left:.6rem}
.offer__row>div b{font-weight:600}
.offer--4 .offer__row{grid-template-columns:repeat(4,1fr)}
.offer i{display:block;font-family:var(--f-mono);font-style:normal;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.offer b{display:block;font-family:var(--f-title);font-weight:500;font-size:.98rem;
  letter-spacing:-.025em;line-height:1.2}

/* ---- 6. BIG SERVICE CARDS ---------------------------------------------- */
.big-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.bs{background:var(--white);padding:clamp(1.5rem,2.4vw,2.2rem);position:relative;
  display:flex;flex-direction:column;min-height:clamp(230px,24vw,300px);
  overflow:hidden;transition:background .45s var(--e-out)}
.bs__n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;color:var(--accent);
  margin-bottom:auto;position:relative;z-index:1}
/* pp.9-10 set every service name in Poppins SemiBold in its own colour — the
   deck's most recognisable text treatment, so the cards use it too. */
.bs h3{font-family:var(--f-body);font-weight:600;letter-spacing:-.008em;text-transform:none;
  color:var(--pillar-ink);
  font-size:clamp(1.19rem,1.55vw,1.34rem);line-height:1.24;margin-top:1.6rem;
  position:relative;z-index:1;transition:color .35s}
.bs p{font-size:.92rem;margin-top:.65rem;position:relative;z-index:1;transition:color .35s}
.bs__go{margin-top:1.2rem;position:relative;z-index:1;display:inline-flex;align-items:center;
  gap:.5rem;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);transition:color .35s}
.bs__go svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;
  transition:transform .4s var(--e-out)}
.bs::before{content:"";position:absolute;inset:0;background-color:var(--ink);
  background-image:linear-gradient(rgba(24,25,25,.12) 0%,rgba(24,25,25,.38) 42%,rgba(24,25,25,.74) 72%,rgba(24,25,25,.80) 100%),var(--img,none);
  background-size:cover;background-position:center;
  clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
  transition:clip-path .55s var(--e-out);z-index:0}
.bs:hover::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.bs:hover h3{color:var(--pillar-lift)}
.bs:hover p{color:rgba(255,255,255,.68)}
.bs:hover .bs__go{color:var(--accent)}
.bs:hover .bs__go svg{transform:translate(3px,-3px)}

/* ---- 7. FULL-BLEED PHOTO SLAB ------------------------------------------ */
.slab{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding-block:clamp(72px,10vw,140px)}
.slab__bg{position:absolute;inset:0;z-index:0}
.slab__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.slab__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,12,15,.94) 0%,rgba(10,12,15,.74) 46%,rgba(10,12,15,.42) 100%)}
.slab__in{position:relative;z-index:2}
.slab h2{color:#fff;max-width:16ch}
.slab .say{color:rgba(255,255,255,.72);max-width:48ch}
.slab__pts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);
  margin-top:clamp(34px,4.6vw,60px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.22)}
.slab__pt i{display:block;font-family:var(--f-mono);font-style:normal;font-size:.63rem;
  letter-spacing:.16em;color:var(--accent);margin-bottom:.7rem}
.slab__pt b{display:block;font-family:var(--f-title);font-weight:500;font-size:1.08rem;
  letter-spacing:-.03em;margin-bottom:.4rem;color:#fff}
.slab__pt p{font-size:.9rem;color:rgba(255,255,255,.64);margin:0}

/* ---- 8. METHOD, simplified --------------------------------------------- */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.st{background:var(--white);padding:clamp(1.4rem,2.2vw,2rem);position:relative}
.st__n{font-family:var(--f-display);font-weight:200;font-size:clamp(2.4rem,4vw,3.4rem);
  line-height:1;letter-spacing:-.05em;color:var(--paper-2);display:block;margin-bottom:.6rem}
.st.is-in .st__n{color:var(--accent)}
.st h3{font-size:1.06rem;font-weight:700;letter-spacing:-.028em;margin-bottom:.45rem}
.st p{font-size:.89rem}

/* ---- 9. CLOSING CTA ----------------------------------------------------- */
.close{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-block:clamp(66px,9vw,120px)}
.close h2{color:#fff;max-width:18ch}
.close__tri{position:absolute;right:-40px;bottom:-60px;width:min(46vw,520px);height:auto;
  opacity:.1;pointer-events:none}
.close__tri path{fill:none;stroke:var(--accent);stroke-width:3}

.v3 .phero__grid{align-items:start}
.v3 .phero__panel{margin-top:.4rem}

/* ---- 10. RESPONSIVE ----------------------------------------------------- */
@media (max-width:1080px){
  .big-svc{grid-template-columns:repeat(2,1fr)}
  .steps4{grid-template-columns:repeat(2,1fr)}
  .offer__row{grid-template-columns:repeat(3,1fr)}
  .offer__row>*{border-bottom:1px solid var(--line)}
  .offer__row>*:nth-child(3n){border-right:0}
  .offer__row>*:nth-child(n+4){border-bottom:0}
  .offer--4 .offer__row{grid-template-columns:repeat(2,1fr)}
  .offer--4 .offer__row>*:nth-child(2n){border-right:0}
  .offer--4 .offer__row>*:nth-child(n+3){border-bottom:0}
}
@media (max-width:900px){
  .hero3__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .hero3__media{aspect-ratio:4/3;max-height:none;justify-self:stretch}
  .hero3__clip{clip-path:polygon(0 0,100% 0,100% calc(100% - 62px),calc(100% - 62px) 100%,0 100%)}
  .hero3__mark{width:62px;height:62px}
  .hero3__mark span{display:none}
  .slab__pts{grid-template-columns:1fr;gap:1.4rem}
  .slab__bg::after{background:linear-gradient(180deg,rgba(30,31,31,.86),rgba(30,31,31,.70))}
}
@media (max-width:620px){
  .big-svc,.steps4{grid-template-columns:1fr}
  .offer__row{grid-template-columns:repeat(2,1fr)}
  .offer__row>*:nth-child(2n){border-right:0}
  .offer__row>*:nth-child(n+5){border-bottom:0}
}

/* =========================================================================
   v3 — MOBILE
   The desktop character lives in hover states that touch devices never see,
   so the phone layout needs its own expression of the same idea.
   ========================================================================= */

/* keep decorative glows from ever forcing a horizontal scroll */
.glow{max-width:100vw}

@media (max-width:900px){
  /* --- hero: tighter, so the photograph reaches the first screen --- */
  .hero3{padding-top:calc(var(--nav-h) + 22px)}
  .hero3__grid{gap:22px}
  .hero3__copy{padding-bottom:0}
  .hero3 h1{margin-bottom:.9rem}
  .hero3 .say{font-size:1.02rem;line-height:1.5}
  .hero3 .btn-row{margin-top:1.4rem;gap:.6rem}
  .hero3__media{aspect-ratio:3/2}

  /* --- offer strip: the "what we do" answer, kept compact --- */
  .offer{margin-top:26px}
  .offer__row>*{padding:.95rem .7rem 1rem 0}
  .offer i{margin-bottom:.35rem}
  .offer b{font-size:.92rem}

  /* --- sections breathe less --- */
  .slab{padding-block:clamp(52px,11vw,76px)}
  .close{padding-block:clamp(50px,11vw,74px)}
}

@media (max-width:620px){
  /* --- service cards: sized to their content, not to a desktop grid --- */
  .bs{min-height:0;padding:1.35rem 1.25rem 1.5rem}
  .bs h3{margin-top:1.1rem;font-size:1.32rem}
  .bs p{margin-top:.5rem}
  .bs__go{margin-top:1rem}

  /* Every card that has a photograph shows it, because a touch device
     never triggers the hover. Filling only some of them read as a bug. */
  .bs--photo::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  .bs--photo h3{color:var(--pillar-lift)}
  .bs--photo p{color:rgba(255,255,255,.72)}
  .bs--photo .bs__go{color:var(--pillar-lift)}
  .bs--photo .bs__n{color:#fff}

  /* --- phase numerals carry the section on a narrow screen --- */
  .st{padding:1.3rem 1.25rem 1.5rem}
  .st__n{font-size:3.2rem}

  /* --- headline breathing room on the narrowest phones --- */
  .h-mega{font-size:clamp(2.45rem,10.5vw,3rem)}
  .h-big{font-size:clamp(1.85rem,8vw,2.4rem)}

  /* --- footer was a third of the scroll depth --- */
  .footer{padding-top:clamp(38px,9vw,54px)}
  .footer__top{gap:26px}
  .footer__brand p{max-width:none}
  .footer__brand .btn-row{margin-top:1.1rem}
  .footer__links{gap:.45rem}
  .footer__word{display:none}
  .footer__bot{margin-top:26px;gap:.4rem}

  /* --- contact + about blocks --- */
  .person{padding:1.15rem}
  .person__av{max-width:132px}
  .slab__pts{margin-top:26px;padding-top:20px;gap:1.2rem}
}

/* Touch devices of any width: hover never fires, so the wipe would never run and
   the service photos would never be seen. Show the filled state on every card
   instead — every card, not some, so the grid reads as a deliberate set. */
@media (hover:none){
  .bs--photo::before{transition:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  /* pp.9-10: the service name stays in its own colour on the charcoal, it does
     not go white */
  .bs--photo h3{color:var(--pillar-lift)}
  .bs--photo p{color:rgba(255,255,255,.68)}
  /* both micro-labels sit in the top band, where the scrim is lightest and even
     the lifted colour only reaches 2-3:1. On the plate the colour is carried by
     the title and the top bar; up here legibility wins. */
  .bs--photo .bs__go{color:var(--pillar-lift)}
  .bs--photo .bs__n,.bs--photo .bs__pillar{color:#fff}
  .bs::after{transform:scaleX(1)}
  .bs::before{transition:none}
  .card:hover{transform:none}
}

@media (max-width:620px){
  /* label/value rows stack instead of squeezing the value into a narrow column */
  .row{flex-direction:column;align-items:flex-start;gap:.25rem}
  .row b{text-align:left!important;max-width:none!important}
  .panel__head{padding-bottom:.7rem}
  /* service-page hero: pull the panel closer to the copy */
  .v3 .phero__panel{margin-top:1.4rem}
  .viz-frame{height:clamp(120px,34vw,150px)}
  .crumbs{font-size:.6rem;letter-spacing:.14em}
}

/* ---- photographic cards ------------------------------------------------- */
.bs__tag{position:absolute;right:1.1rem;top:1.15rem;z-index:1;font-family:var(--f-mono);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
  transition:color .35s}
.bs:hover .bs__tag{color:rgba(255,255,255,.5)}

/* the closing panel gets depth from a photograph behind the ink */
.close__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.close__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.close__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,12,15,.95),rgba(10,12,15,.72) 60%,rgba(10,12,15,.5))}

@media (max-width:620px){
  /* alternating cards keep their photograph on permanently */
  .bs--photo .bs__tag{color:rgba(255,255,255,.5)}
  .close__bg img{opacity:.34}
  .close__bg::after{background:linear-gradient(180deg,rgba(10,12,15,.9),rgba(10,12,15,.76))}
}

/* four-up variant that still collapses on small screens — an inline
   grid-template-columns here silently outranked every media query */
.big-svc--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.big-svc--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.big-svc--4{grid-template-columns:1fr}}

/* ---- leadership portrait ------------------------------------------------ */
.person__av{aspect-ratio:4/5;background:none;border-radius:0;display:block;overflow:visible}
.person__clip{position:absolute;inset:0;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 62px),calc(100% - 62px) 100%,0 100%)}
.person__clip img{width:100%;height:100%;object-fit:cover;display:block}
.person__mark{position:absolute;right:0;bottom:0;width:62px;height:62px;background:var(--accent);
  clip-path:polygon(100% 0,100% 100%,0 100%);z-index:2}
@media (max-width:900px){
  .person__av{max-width:260px}
  .person__clip{clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),calc(100% - 46px) 100%,0 100%)}
  .person__mark{width:46px;height:46px}
}

/* the leadership card was spanning the full container, leaving dead space */
.person{max-width:1020px;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(1.2rem,2vw,1.6rem)}
@media (max-width:900px){
  .person{grid-template-columns:1fr;max-width:none}
}

/* =========================================================================
   BRAND PILLARS — the triangle's three points, per the guidelines. Colour is
   tied to meaning: blue = trust/research, orange = creativity/innovation,
   red = energy/growth. p6 of the deck shows the three as three coloured
   logomarks, so each pillar carries its own mark rather than sharing one.
   ========================================================================= */
.pillars3{background:var(--paper);border-block:1px solid var(--line);
  position:relative;overflow:hidden}
/* the deck sets a huge, quiet triangle bleeding off the edge of a spread */
.pillars3__wm{position:absolute;right:-6%;top:-18%;width:min(46vw,620px);
  aspect-ratio:1/1;background:var(--blue);opacity:.055;pointer-events:none;
  -webkit-mask:var(--triA-mask) center/contain no-repeat;
          mask:var(--triA-mask) center/contain no-repeat}
.pillars3__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(34px,4.4vw,60px)}
.pillars3__intro .say{margin:0;max-width:52ch}
.pillars3__intro b:not([class]){font-weight:600;color:var(--text)}
.pillars3__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,40px);
  position:relative}
.pil{border-top:1px solid var(--line);padding-top:1.3rem;--pillar:var(--blue)}
.pil__mark{display:block;width:34px;height:34px;background:var(--pillar);
  margin-bottom:1rem;
  -webkit-mask:var(--triA-mask) center/contain no-repeat;
          mask:var(--triA-mask) center/contain no-repeat}
.pil h3{font-family:var(--f-display);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.3rem,2.1vw,1.8rem);letter-spacing:.035em;line-height:1.05;
  color:var(--ink);margin-bottom:.6rem}
.pil i{font-style:normal;font-family:var(--f-body);font-weight:600;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pillar-ink,var(--blue-ink));
  display:block;margin-bottom:.7rem}
.pil p{font-size:.92rem;line-height:1.55}
.pil--research{--pillar:var(--blue);--pillar-ink:var(--blue-ink);--pillar-lift:var(--blue-lift)}
.pil--innovation{--pillar:var(--orange);--pillar-ink:var(--orange-ink);--pillar-lift:var(--orange-lift)}
.pil--growth{--pillar:var(--red);--pillar-ink:var(--red-ink);--pillar-lift:var(--red-lift)}
.pil .triA::before{color:var(--pillar)}

/* each service card carries its pillar's colour */
.bs{--pillar:var(--blue);--pillar-ink:var(--blue-ink);--pillar-lift:var(--blue-lift)}
.bs--research{--pillar:var(--blue);--pillar-ink:var(--blue-ink);--pillar-lift:var(--blue-lift)}
.bs--innovation{--pillar:var(--orange);--pillar-ink:var(--orange-ink);--pillar-lift:var(--orange-lift)}
.bs--growth{--pillar:var(--red);--pillar-ink:var(--red-ink);--pillar-lift:var(--red-lift)}
/* Colour-only modifiers, for cards that carry a brand colour without carrying a
   pillar — the About principles are not research/innovation/growth, and saying
   they were would empty the pillar names of meaning. */
.bs--blue{--pillar:var(--blue);--pillar-ink:var(--blue-ink);--pillar-lift:var(--blue-lift)}
.bs--orange{--pillar:var(--orange);--pillar-ink:var(--orange-ink);--pillar-lift:var(--orange-lift)}
.bs--red{--pillar:var(--red);--pillar-ink:var(--red-ink);--pillar-lift:var(--red-lift)}
.bs__n{color:var(--pillar-ink)}
.bs::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--pillar);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e-out);z-index:2}
.bs:hover::after{transform:scaleX(1)}
.bs:hover .bs__go{color:var(--pillar-lift)}  /* on ink, the graphic colour is legible */
/* 0.58rem is small text, so it needs the full 4.5:1. The .62 opacity this used
   to carry took it to 2.6:1 on the white card. And on the filled card the label
   sits high, where the scrim is lightest — even the lifted pillar colour only
   reaches 2-3:1 up there, while white measures 5.15:1 at worst. The colour is
   already carried by the title and the top bar, so the label gives it up. */
.bs__pillar{position:absolute;right:1.15rem;top:1.15rem;z-index:1;
  font-family:var(--f-body);font-weight:600;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pillar-ink);opacity:1;transition:color .35s}
.bs:hover .bs__pillar,.bs:hover .bs__n{color:#fff}

@media (max-width:900px){
  .pillars3__intro{grid-template-columns:1fr;gap:clamp(16px,3vw,24px);align-items:start}
  .pillars3__wm{width:70vw;right:-22%;top:-8%}
}
@media (max-width:620px){
  .pillars3__list{grid-template-columns:1fr;gap:1.5rem}
  /* No hover on touch, so every card shows its pillar bar. Showing it on only
     some of them reads as a rendering fault, not as a rhythm. */
  .big-svc .bs::after{transform:scaleX(1)}
  .big-svc .bs--photo .bs__pillar{color:#fff}
}

/* The four method steps walk the pillars: diagnose = research, design =
   innovation, deliver and sustain = growth. */
.steps4 .st:nth-child(1) .st__n{color:var(--blue)}
.steps4 .st:nth-child(2) .st__n{color:var(--orange)}
.steps4 .st:nth-child(3) .st__n,
.steps4 .st:nth-child(4) .st__n{color:var(--red)}

/* Three commitments, three brand colours — the triangle again, on dark. */
.slab__pts .slab__pt:nth-child(1) i{color:var(--blue-lift)}
.slab__pts .slab__pt:nth-child(2) i{color:var(--orange)}
.slab__pts .slab__pt:nth-child(3) i{color:var(--red-lift)}

/* =========================================================================
   VISION — the guidelines' vision, purpose and belief statements, set as the
   loudest type on the About page. The rule above it is the three pillars in
   order, so the section reads as brand rather than as another content block.
   ========================================================================= */
.vision{background:var(--paper);border-block:1px solid var(--line)}
.vision__rule{display:flex;gap:6px;margin-bottom:clamp(26px,3.4vw,44px)}
.vision__rule i{height:5px;flex:1}
.vision__rule i:nth-child(1){background:var(--blue)}
.vision__rule i:nth-child(2){background:var(--orange)}
.vision__rule i:nth-child(3){background:var(--red)}
.vision__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.vision__lead{font-family:var(--f-display);font-weight:200;text-transform:uppercase;
  /* it is the section's heading, so it carries the h2 rather than sitting under one */
  font-size:clamp(1.65rem,3.6vw,2.85rem);line-height:1.12;letter-spacing:.012em;
  color:var(--ink);margin-top:1rem;text-wrap:balance}
.vision__side{display:grid;gap:clamp(18px,2.2vw,28px);padding-top:.6rem}
.vision__note{border-left:2px solid var(--line);padding-left:1.1rem}
.vision__note .meta{display:block;margin-bottom:.5rem;color:var(--text-3)}
.vision__note p{font-family:var(--f-title);font-weight:300;
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.5;color:var(--text-2)}
.vision__note:nth-child(1){border-left-color:var(--blue-line)}
.vision__note:nth-child(2){border-left-color:var(--red-line)}

@media (max-width:900px){
  .vision__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}
  .vision__side{padding-top:0}
}

/* =========================================================================
   THE TRIANGULAR A
   The guidelines' signature move: the A in a display heading is drawn as the
   logomark's bare triangle. Posterama has that glyph built in; Jost does not,
   so it is drawn as a masked box. The real letter stays in the DOM for screen
   readers and for copy-paste — only its rendering is replaced.

   Alignment is the whole difficulty, and it is why this is a sized box rather
   than a mark positioned inside the letter. An inline-block's height is its
   LINE box, not its cap height, so anchoring the triangle to `bottom:0` of the
   span put it below the baseline by the half-leading plus the descender —
   which is what made it sit low and read small. Instead: `overflow:hidden` on
   an inline-block moves its baseline to the bottom margin edge, so a box of
   exactly cap height sits exactly on the text baseline, at any font size, in
   any heading, whatever the line-height.

   The two magic numbers are measured from Jost, not guessed:
     cap height       0.700em
     uppercase A set  0.618em   (its advance width, so the word's fit is intact)
   ========================================================================= */
.triA{
  display:inline-block;
  position:relative;
  vertical-align:baseline;
  overflow:hidden;            /* this is what puts the box on the baseline */
  width:.618em;
  height:.722em;              /* cap height + the overshoot a point needs */
  line-height:1;
  color:transparent;          /* the letter itself is never painted */
}
.triA::before{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  color:var(--accent);
  -webkit-mask:var(--triA-mask) center/contain no-repeat;
          mask:var(--triA-mask) center/contain no-repeat;
}
:root{
  /* Drawn on the letter's own proportions (0.618 : 0.700), with the outer edge
     of the round-joined stroke landing exactly on the viewBox, so `contain`
     fills the box rather than leaving slack inside it. */
  --triA-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 72'%3E%3Cpath d='M31 2.4 L59.6 69.6 H2.4 Z' fill='none' stroke='%23000' stroke-width='4.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* on the dark surfaces the mark stays in the accent, as it does in the deck */
.slab .triA::before,.close .triA::before,.bs--photo .triA::before{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .triA::before{transition:color .4s var(--e-out)}
}

/* =========================================================================
   COLOURED KEYWORDS
   The deck's most distinctive text device: the operative words inside a
   sentence set bold and in a brand colour (p4 sets "research, innovation, and
   strategy" orange and "thrive, transform, and redefine" red). The graphic
   orange is 1.9:1 on white, so the text-safe variants are used here.
   ========================================================================= */
.hl{font-weight:600;color:var(--text)}
.vision__lead .hl,.h-mega .hl,.h-big .hl{font-weight:400}
.hl--blue{color:var(--blue-ink)}
.hl--orange{color:var(--orange-ink)}
.hl--red{color:var(--red-ink)}
.slab .hl,.close .hl,.hl--inv{color:#fff}
.slab .hl--blue,.close .hl--blue{color:var(--blue-lift)}
.slab .hl--orange,.close .hl--orange{color:var(--orange)}
.slab .hl--red,.close .hl--red{color:var(--red-lift)}

/* =========================================================================
   MISREGISTRATION
   Every image on this site is a colour plate printed a few pixels off from the
   photographic one. That is a press artefact, so it is also the honest place to
   get the interaction language from: on hover and on keyboard focus, elements
   print out of register and snap back. It is two or three pixels of movement —
   the point is that it comes from the brand rather than from a template.
   ========================================================================= */
:root{ --misreg:3px; }

/* Buttons: an offset plate of the accent behind the shape. box-shadow draws it
   outside the border box, so the button's own overflow:hidden cannot clip it. */
.btn{transition:transform .3s var(--e-out),color .3s var(--e-out),
     box-shadow .28s var(--e-out)}
.btn:hover,
.btn:focus-visible{
  box-shadow:var(--misreg) calc(var(--misreg) * -0.66) 0 0 var(--accent),
             0 14px 34px -18px rgba(81,138,156,.5)}
.btn:active{box-shadow:1px -1px 0 0 var(--accent),0 8px 20px -14px rgba(81,138,156,.4)}
/* on the accent-filled variants the offset plate goes to ink, or it vanishes */
.btn--inv:hover,.btn--inv:focus-visible{
  box-shadow:var(--misreg) calc(var(--misreg) * -0.66) 0 0 var(--accent),
             0 14px 34px -18px rgba(0,0,0,.5)}

/* Service cards: the corner label prints off-register in its pillar colour. */
.bs__pillar{transition:color .35s,text-shadow .28s var(--e-out)}
.bs:hover .bs__pillar,
.bs:focus-visible .bs__pillar{
  text-shadow:calc(var(--misreg) * -1) 2px 0 var(--pillar)}

/* The pillar logomarks lift out of register when their column is pointed at.
   Only the filter moves: transform belongs to the scroll-linked mark-rise
   animation further down, and an animation with fill:both outranks a hover
   transition, so setting transform here would silently do nothing once the
   mark had scrolled into place. */
.pil__mark{transition:filter .3s var(--e-out)}
.pil:hover .pil__mark{filter:drop-shadow(-4px 3px 0 var(--pillar-ink))}

/* Focus is held to the same standard as hover rather than left to the browser:
   an offset plate plus a ring that survives on both paper and ink. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px}
.slab :focus-visible,.close :focus-visible,.footer :focus-visible,
.bs--photo:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  .btn,.bs__pillar,.pil__mark{transition:none}
}

/* =========================================================================
   THE HAIRLINE GRID
   The guidelines rule every spread into quadrants — thin lines running the full
   bleed, straight over the photography and across the dark spreads, not just
   through the white space. It is the device that makes the deck read as
   designed rather than laid out, and it costs nothing to run: two background
   gradients on a pseudo-element, no markup, no paint on scroll.

   Positions are per-section so the rules land on something — the edge of a copy
   column, the top of an image — rather than arbitrarily at 25/50/75.
   ========================================================================= */
.ruled{position:relative}
.ruled::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  background-image:
    linear-gradient(var(--rule),var(--rule)),
    linear-gradient(var(--rule),var(--rule)),
    linear-gradient(var(--rule),var(--rule));
  background-size:1px 100%,1px 100%,100% 1px;
  background-position:var(--rule-x1,26%) 0,var(--rule-x2,74%) 0,0 var(--rule-y,68%);
  background-repeat:no-repeat;
}
:root{ --rule:rgba(36,37,37,.10); --rule-inv:rgba(255,255,255,.11); }
.ruled--inv::after{--rule:var(--rule-inv)}
/* a two-rule variant for sections that only want the verticals */
.ruled--v::after{background-size:1px 100%,1px 100%,0 0}

.hero3.ruled::after{--rule-x1:33%;--rule-x2:0%;--rule-y:82%;
  background-size:1px 100%,0 0,100% 1px}
.pillars3.ruled::after{--rule-x1:31%;--rule-x2:62%;--rule-y:40%}
.slab.ruled::after{--rule-x1:25%;--rule-x2:75%;--rule-y:63%}
.close.ruled::after{--rule-x1:38%;--rule-x2:0%;--rule-y:74%;
  background-size:1px 100%,0 0,100% 1px}

/* Below the tablet breakpoint the columns collapse, so vertical rules stop
   describing anything real — only the horizontal survives. */
@media (max-width:900px){
  .ruled::after{background-size:0 0,0 0,100% 1px}
}
@media (max-width:620px){
  .ruled::after{display:none}
}

/* =========================================================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   Navigation morphs between pages instead of blanking to white. Two named
   pairs carry continuity: the site header stays put rather than cross-fading
   through itself, and a service card's title becomes that service page's H1 —
   so the thing you clicked is visibly the thing you arrived at.

   Unsupported browsers get an ordinary navigation, which is what happens today,
   so there is nothing to fall back to and nothing to feature-detect.
   ========================================================================= */
@view-transition{ navigation:auto; }

::view-transition-group(root){animation-duration:.42s}
::view-transition-old(root){
  animation:vt-out .3s var(--e-io) both}
::view-transition-new(root){
  animation:vt-in .42s var(--e-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* Naming the chrome lifts it out of the root snapshot, so the header and footer
   hold still while the page beneath them changes, instead of sliding with it.
   The default cross-fade is left alone — the two are identical either side of
   the navigation, so it is invisible, and suppressing it would freeze the old
   header on top of the new one for the length of the transition. */
.nav{view-transition-name:site-header}
.footer{view-transition-name:site-footer}
::view-transition-group(site-header),
::view-transition-group(site-footer){animation-duration:.42s}

/* The service name morphs from card to page heading. */
::view-transition-group(svc-title){
  animation-duration:.5s;animation-timing-function:var(--e-out)}
::view-transition-old(svc-title),::view-transition-new(svc-title){
  height:100%;object-fit:none;object-position:left top}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}

/* =========================================================================
   SCROLL-LINKED MOTION
   Everything else on the site animates once and stops, which is the tell of a
   template. These few elements respond continuously to scroll position
   instead — the press separating as the page moves.

   Native scroll-driven animations: no JS, no scroll listener, no work on the
   main thread. Where they are unsupported the elements simply sit still, which
   is exactly how the site behaved before, so there is nothing to detect.
   Deliberately three elements, not thirty.
   ========================================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {

    /* The big quiet triangle drifts and grows across its section. The first
       pass ran .03 -> .075 opacity over 10% of travel, which measured as a real
       animation and read as nothing at all — below the threshold where anyone
       would notice it moved. Restraint has to stay above perceptibility or it
       is just cost with no effect. */
    .pillars3__wm{
      animation:wm-drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes wm-drift{
      from{transform:translate3d(4%,10%,0) scale(.86) rotate(-4deg);opacity:.05}
      to  {transform:translate3d(-4%,-10%,0) scale(1.14) rotate(4deg);opacity:.14}
    }

    /* the hero plate and its frame separate, like a misregistered print.
       scale(1.12) leaves 6% of bleed each way, so a 3% shift never exposes an edge */
    .hero3__clip img{
      animation:plate-shift linear both;
      animation-timeline:view();
      animation-range:entry 30% exit 100%;
      will-change:transform;
    }
    @keyframes plate-shift{
      from{transform:scale(1.12) translate3d(0,-3%,0)}
      to  {transform:scale(1.12) translate3d(0,3%,0)}
    }

    /* the three pillar logomarks rise as their row arrives, one after another */
    .pil__mark{
      animation:mark-rise linear both;
      animation-timeline:view();
      animation-range:entry 15% entry 95%;
    }
    .pil:nth-child(2) .pil__mark{animation-range:entry 22% entry 100%}
    .pil:nth-child(3) .pil__mark{animation-range:entry 29% cover 8%}
    @keyframes mark-rise{
      from{transform:translateY(18px) scale(.78);opacity:0}
      to  {transform:none;opacity:1}
    }

    /* the closing triangle turns slowly as the CTA comes up */
    .close__tri{
      animation:tri-turn linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes tri-turn{
      from{transform:rotate(-7deg) scale(.9) translateY(6%)}
      to  {transform:rotate(5deg) scale(1.08) translateY(-6%)}
    }

    /* the hairline grid draws in as a section arrives rather than being flatly on */
    .ruled::after{
      animation:rule-in linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 90%;
    }
    @keyframes rule-in{from{opacity:0}to{opacity:1}}
  }
}

/* =========================================================================
   PRINT
   Consultancy pages get printed and PDF'd before meetings, and the site is
   built out of things that do not survive a printer: colour plates on dark
   grounds, hairline overlays, masked glyphs, a fixed header. This is the
   version that goes in the folder.
   ========================================================================= */
@media print{
  @page{margin:16mm 14mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff!important;color:#111!important;font-size:10.5pt}

  /* chrome, motion and decoration have no meaning on paper */
  /* checked against the markup rather than guessed — .wa is the floating
     WhatsApp button, .crumbs and .offer carry nothing on paper */
  .nav,.menu,.mbar,.cursor,.preload,.glow,.ruled::after,.pillars3__wm,
  .close__tri,.hero3__mark,.wa,.btn-row,.acc__q svg{display:none!important}
  [data-reveal],.split .wm .wd,.reveal{opacity:1!important;transform:none!important;
    clip-path:none!important;animation:none!important;transition:none!important}

  /* the dark spreads invert rather than flooding the page with toner */
  .slab,.close,.bs--photo,.footer{background:#fff!important;color:#111!important}
  .slab *,.close *,.bs--photo *,.footer *{color:#111!important}
  .slab__bg,.close__bg,.bs::before{display:none!important}
  .slab,.close{border-top:1px solid #bbb;border-bottom:1px solid #bbb}

  /* the triangular A has no mask on paper, so the real letter comes back */
  .triA{width:auto;height:auto;overflow:visible;color:inherit;line-height:inherit}
  .triA::before{display:none}

  /* cards become a plain ruled list */
  .big-svc{display:block;border:0}
  .bs{min-height:0;padding:.55rem 0;border-bottom:1px solid #ddd;break-inside:avoid}
  .bs h3{color:#111!important;font-size:12pt}
  .bs__pillar{position:static;color:#555!important;opacity:1}

  section{break-inside:avoid-page;padding-block:10mm!important}
  h1,h2,h3{break-after:avoid-page;color:#111!important}
  img{max-width:100%!important;filter:grayscale(1) contrast(1.1)}

  /* a printed link is useless without its destination */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555}
  main a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555}
  main a[href^="/"]::after,main a[href^="."]::after{content:""}
}

/* =========================================================================
   MOBILE
   The phone was inheriting a stripped version of the design rather than a
   version designed for it: the hairline grid switched off entirely, the closing
   wordmark hidden, and no press feedback at all on a surface where hover — the
   one thing carrying the misregistration language — does not exist.
   ========================================================================= */

/* --- the grid survives, as a margin rule --------------------------------- */
@media (max-width:900px){
  /* the columns have collapsed, so a quarter-point vertical describes nothing.
     One rule on the text's own left edge does: it reads as a margin, which is
     what the deck's verticals do on its narrower spreads. */
  .ruled::after{
    background-size:1px 100%,0 0,100% 1px;
    background-position:var(--gutter) 0,0 0,0 var(--rule-y,68%);
  }
}
@media (max-width:620px){
  .ruled::after{display:block}          /* was display:none — the phone got none of it */
  .hero3.ruled::after{--rule-y:86%}
  .pillars3.ruled::after{--rule-y:26%}
  .slab.ruled::after{--rule-y:52%}
  .close.ruled::after{--rule-y:70%}
}

@media (max-width:620px){
  /* --- the closing wordmark comes back, sized for the width -------------- */
  .footer__word{display:block;opacity:.06;margin-top:1.4rem}

  /* --- the offer strip joins the pillar colour system -------------------- */
  .offer__row>*:nth-child(3n+1) i{color:var(--blue-ink)}
  .offer__row>*:nth-child(3n+2) i{color:var(--red-ink)}
  .offer__row>*:nth-child(3n+3) i{color:var(--orange-ink)}
}

/* --- press feedback, since there is no hover to carry it ------------------ */
@media (hover:none){
  .btn,.bs,.mbar a,.offer a,.acc__q{-webkit-tap-highlight-color:transparent}

  /* the same misregistration the desktop gets on hover, on the press instead */
  .btn:active{
    box-shadow:2px -1px 0 0 var(--accent),0 6px 16px -12px rgba(81,138,156,.45);
    transform:translateY(1px)}
  .bs:active{transform:scale(.992)}
  .bs:active .bs__pillar{text-shadow:-2px 1px 0 var(--pillar)}
  .mbar a:active{background:var(--accent-tint)}
  .offer a:active{background:var(--paper-2);padding-left:.6rem}
  .btn,.bs,.mbar a{transition:transform .18s var(--e-out),box-shadow .18s var(--e-out),
    background .2s,color .3s}
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  .btn:active,.bs:active{transform:none}
}

/* =========================================================================
   TOUCH TARGETS
   Measured on a 390px viewport, nearly every text link came in between 15px
   and 40px tall. WCAG 2.5.8 (AA) asks for 24x24 CSS px; the familiar 44x44
   figure is 2.5.5, which is AAA and Apple's guidance. So: everything clears AA
   with margin, and anything with room to grow — the logo, the menu, the social
   buttons, the 404 index — goes to 44.

   Text links grow by padding, and the list gaps grow with them. Padding alone
   would have made adjacent hit areas overlap, which trades a target that is
   hard to hit for one that is easy to hit by mistake.
   ========================================================================= */
/* Keyed to width, not to `hover:none`. A narrow layout is a narrow layout
   whatever is pointing at it, and generous targets cost a mouse user nothing —
   whereas hover:none is invisible to any harness that measures in an iframe,
   which is how this went unverified the first time. */
@media (max-width:760px){
  .nav__logo{min-height:44px}

  .footer__links{gap:.15rem}
  .footer__links a{padding-block:.42rem;display:block;width:auto}
  .footer__links a::after{bottom:.36rem}

  .socials{gap:.6rem}
  .socials a{width:44px;height:44px}

  .menu__item a{padding-block:.25rem}
  .menu__foot{gap:.3rem 2.2rem}
  .menu__foot a{padding-block:.5rem;display:inline-block}

  .crumbs{line-height:2.1}
  .crumbs a{padding-block:.4rem;display:inline-block}

  .mini-index a{min-height:48px}

  /* stray inline tel/mailto links outside any list */
  .say a[href^="tel:"],.say a[href^="mailto:"],
  p a[href^="tel:"],p a[href^="mailto:"]{padding-block:.35rem;display:inline-block}
}