@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}


/* =========================================================
   Brillersys — Services (same template/tone as home)
   Clean white/soft-grey · teal accent · subtle motion
   ========================================================= */
:root{
  --bg:#FFFFFF;--bg-soft:#F6F7F9;--bg-soft2:#EFF1F5;
  --ink:#0E1116;--ink-2:#2A2F3A;--muted:#5B636E;--muted-2:#959BA6;
  --accent:#35BEBC;--accent-2:#5FD0CE;--accent-ink:#159C9A;--cyan:#2BA6B8;
  --line:rgba(14,17,22,0.09);--line-2:rgba(14,17,22,0.16);
  --r:14px;--r-lg:20px;--r-pill:100px;
  --ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --grad:linear-gradient(120deg,#35BEBC 0%,#2BA6B8 55%,#3A85C6 100%);
  --shadow:0 12px 40px -18px rgba(14,17,22,.18);
  --shadow-lg:0 40px 80px -34px rgba(14,17,22,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#04302F}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.1;letter-spacing:-0.02em;color:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent);border-radius:2px}
.grad-text{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gradShift 7s linear infinite}
@keyframes gradShift{to{background-position:200% 0}}

.btn{display:inline-flex;align-items:center;gap:.55em;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;padding:13px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn .ar{transition:transform .3s var(--ease)} .btn:hover .ar{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:#04302F}.btn-primary:hover{background:var(--accent-ink);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(53,190,188,.5)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-light{background:#fff;color:var(--accent-ink)}.btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(0,0,0,.3)}

[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}
[data-stg]>*{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-stg].in>*{opacity:1;transform:none}

.section{padding:80px 0;position:relative}
.sec-head{max-width:680px;margin-bottom:42px}
.sec-head.center{margin-inline:auto;text-align:center}.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:16px 0 14px;font-weight:800}
.sec-head p{font-size:1.1rem;color:var(--muted);font-weight:600}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .35s,box-shadow .35s,padding .35s;background:#124451;border-bottom:1px solid rgba(255,255,255,.10)}
.nav.scrolled{box-shadow:0 8px 30px -16px rgba(0,0,0,.55)}
.nav-inner{max-width:1280px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;transition:padding .35s}
.nav.scrolled .nav-inner{padding:12px 28px}
.brand{display:inline-flex;align-items:center;line-height:0}.brand img{height:36px;width:auto;display:block;filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.82);position:relative;padding:7px 4px;transition:color .25s,background .3s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{content:"";position:absolute;left:4px;right:4px;bottom:-3px;height:2px;background:var(--accent);border-radius:2px}.nav-links a.active{background:var(--accent);color:#06302F;border-radius:100px;padding:7px 18px}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* ============ SUBHERO ============ */
.subhero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:92vh;padding:120px 0 72px;
  background:linear-gradient(180deg,rgba(53,190,188,.12) 0%,rgba(58,133,198,.06) 40%,var(--bg) 80%)}
.subhero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.subhero-bg .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.18}
.subhero-bg .o1{width:480px;height:480px;background:#35BEBC;top:-180px;right:-80px;animation:float1 16s var(--ease) infinite}
.subhero-bg .o2{width:420px;height:420px;background:#3A85C6;bottom:-220px;left:-120px;animation:float2 19s var(--ease) infinite}
.subhero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;mask:radial-gradient(ellipse 70% 70% at 50% 30%,#000 10%,transparent 70%);-webkit-mask:radial-gradient(ellipse 70% 70% at 50% 30%,#000 10%,transparent 70%)}
.subhero .wrap{position:relative;z-index:2;max-width:920px}
.subhero h1{font-size:clamp(3rem,6.6vw,5.2rem);font-weight:700;letter-spacing:-0.03em;margin:14px 0 24px}
.subhero p{font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--muted);max-width:640px}
.subhero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,22px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-20px)}}

/* ============ FEATURE ROWS ============ */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:none}
.feature:nth-child(even) .feat-media{order:-1}
.feat-text .code{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.feat-text h3{font-size:clamp(1.6rem,3vw,2.3rem);margin:10px 0 14px}
.feat-text h3 .uniq{display:inline-block;margin-left:10px;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#04302F;background:var(--accent);padding:4px 10px;border-radius:100px;vertical-align:middle;font-weight:700}
.feat-text p{color:var(--muted);font-size:1.06rem;max-width:480px}
.feat-chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 22px}
.feat-chips span{font-size:.82rem;font-weight:500;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;padding:7px 14px}
.feat-text .more{font-size:.95rem;font-weight:600;color:var(--accent-ink);display:inline-flex;align-items:center;gap:.4em}
.feat-text .more .ar{transition:transform .3s var(--ease)}.feat-text .more:hover .ar{transform:translateX(4px)}
.feat-media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.feat-media img{width:100%;height:380px;object-fit:cover;transition:transform .6s var(--ease)}
.feat-media:hover img{transform:scale(1.05)}
.feat-media .mtag{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-size:.8rem;font-weight:600;color:var(--accent-ink);box-shadow:var(--shadow)}
.feat-media .ic{position:absolute;left:18px;top:18px;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--accent-ink);display:grid;place-items:center;box-shadow:var(--shadow)}
.feat-media .ic svg{width:24px;height:24px}

/* ============ DISCIPLINE BAND (teal) ============ */
.disc{position:relative;overflow:hidden;background:var(--grad);color:#fff;padding:70px 0}
.disc::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 18%,rgba(255,255,255,.20),transparent 46%),radial-gradient(circle at 86% 84%,rgba(255,255,255,.12),transparent 46%)}
.disc .wrap{position:relative;z-index:1}
.disc .b-head{max-width:720px;margin:0 auto 46px;text-align:center}
.disc .b-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);display:inline-flex;align-items:center;gap:.6em}
.disc .b-eyebrow::before{content:"";width:24px;height:2px;background:#fff;border-radius:2px}
.disc h2{color:#fff;font-size:clamp(2.1rem,4.4vw,3.1rem);margin:16px 0 12px}
.disc .b-head p{color:rgba(255,255,255,.9);font-size:1.1rem}
.disc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dcard{position:relative;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);border-radius:var(--r-lg);padding:30px 26px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .4s var(--ease),background .4s}
.dcard:hover{transform:translateY(-8px);background:rgba(255,255,255,.18)}
.dcard .dl{font-family:'Space Grotesk',sans-serif;font-size:2.4rem;font-weight:700;color:#fff;line-height:1;margin-bottom:14px}
.dcard h3{color:#fff;font-size:1.25rem;margin-bottom:8px}
.dcard p{color:rgba(255,255,255,.9);font-size:.95rem}
/* two-column: image left (40%) · values right */
.disc-layout{display:grid;grid-template-columns:40% 1fr;gap:50px;align-items:stretch}
.disc-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);min-height:100%}
.disc-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:380px}
.disc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(53,190,188,.20),transparent 55%)}
.disc-right .b-head{margin:0 0 20px;text-align:left;max-width:none}

/* vertical roadmap — line spans A→L only, reveals on scroll */
.roadmap{position:relative}
.road-track{position:absolute;left:25px;width:2px;background:rgba(255,255,255,.28);z-index:0}
.road-fill{position:absolute;left:25px;width:2px;height:0;background:#fff;border-radius:2px;box-shadow:0 0 12px rgba(255,255,255,.8);z-index:0;transition:height .12s linear}
.road-stops{display:flex;flex-direction:column;gap:4px;position:relative}
.rstop{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start;padding:8px 0}
.rstop .node{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem;color:rgba(255,255,255,.6);background:rgba(8,40,60,.32);border:2px solid rgba(255,255,255,.4);position:relative;z-index:1;transition:transform .45s var(--ease),background .45s,color .45s,border-color .45s,box-shadow .45s}
.rstop.reached .node{background:#fff;color:var(--accent-ink);border-color:#fff;transform:scale(1.05);box-shadow:0 12px 26px -12px rgba(8,40,60,.5)}
.rcontent{padding-top:3px}
.rstop h3{color:rgba(255,255,255,.58);font-size:clamp(1.3rem,1.9vw,1.6rem);margin-bottom:4px;transition:color .4s}
.rstop.reached h3{color:#fff}
.rstop p{color:rgba(255,255,255,.9);font-size:.96rem;line-height:1.55;max-width:480px;opacity:0;max-height:0;overflow:hidden;transform:translateY(6px);transition:opacity .5s var(--ease),max-height .55s var(--ease),transform .5s var(--ease)}
.rstop.reached p{opacity:1;max-height:200px;transform:none}

/* ============ INDUSTRY MARQUEE ============ */
.logos{padding:48px 0;border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg)}
.logos .lbl{text-align:center;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:22px}
.marq{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marq:hover{animation-play-state:paused}
.marq span{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:600;color:var(--muted);opacity:.55;padding:0 38px;display:inline-flex;align-items:center;gap:38px}
.marq span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============ AGENTS ============ */
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.agent{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s}
.agent:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.agent .ind{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.agent h3{font-size:1.3rem;margin:8px 0 8px}
.agent p{color:var(--muted);font-size:.95rem}
.agent.accent{background:var(--grad);color:#fff}.agent.accent .ind{color:rgba(255,255,255,.85)}.agent.accent h3{color:#fff}.agent.accent p{color:rgba(255,255,255,.9)}
.agents-note{font-size:.8rem;color:var(--muted-2);font-style:italic;margin-bottom:10px}

/* ============ ENGAGEMENT MODELS ============ */
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.model{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s}
.model:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.model.featured{position:relative;border-color:transparent}
.model.featured::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.model .mcode{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.model .mcode .badge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#04302F;background:var(--accent);padding:3px 9px;border-radius:100px;margin-left:8px}
.model h3{font-size:1.5rem;margin:10px 0 4px}
.model .dur{font-size:.9rem;color:var(--muted-2);font-weight:600;margin-bottom:12px}
.model p{color:var(--muted);font-size:.97rem;margin-bottom:16px}
.model ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:auto}
.model li{display:flex;gap:10px;align-items:center;color:var(--ink-2);font-size:.92rem}
.model li .ck{color:var(--accent-ink);font-weight:700}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;box-shadow:var(--shadow);transition:transform .4s var(--ease)}
.step:hover{transform:translateY(-6px)}
.step .no{font-family:'Space Grotesk',sans-serif;font-size:2.4rem;font-weight:700;color:transparent;-webkit-text-stroke:1.5px var(--accent);line-height:1;margin-bottom:14px}
.step h3{font-size:1.18rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.93rem}

/* ============ CTA ============ */
.cta-band{position:relative;overflow:hidden;border-radius:28px;padding:80px 40px;text-align:center;background:var(--accent);color:#fff}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.95}
.cta-band::after{content:"";position:absolute;top:-50%;right:-10%;width:60%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 60%)}
.cta-band>*{position:relative;z-index:1}
.cta-band .eyebrow{color:rgba(255,255,255,.9)}.cta-band .eyebrow::before{background:#fff}
.cta-band h2{font-size:clamp(2rem,4.6vw,3.3rem);max-width:760px;margin:14px auto 14px;color:#fff}
.cta-band p{color:rgba(255,255,255,.92);max-width:520px;margin:0 auto 30px;font-size:1.12rem}

/* ============ FOOTER ============ */
.footer{background:var(--ink);color:#AEB6C2;padding:70px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:36px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .brand{margin-bottom:14px}
.foot-logo{height:30px;width:auto;filter:brightness(0) invert(1)}
.foot-brand p{color:#8B93A0;font-size:.95rem;max-width:300px;margin-top:16px}
.foot-loc{margin-top:14px;font-size:.85rem;color:#8B93A0}.foot-loc b{color:var(--accent-2)}
.foot-soc{display:flex;gap:10px;margin-top:18px}
.foot-soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#8B93A0;transition:.25s}
.foot-soc a:hover{border-color:var(--accent-2);color:#fff}.foot-soc svg{width:16px;height:16px}
.foot-col h5{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-col a{font-size:.92rem;color:#8B93A0;transition:color .25s,padding-left .25s}
.foot-col a:hover{color:#fff;padding-left:4px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;gap:18px;flex-wrap:wrap}
.foot-bottom small{font-size:.8rem;color:#6F7884}

@media(max-width:1000px){
  .feature{grid-template-columns:1fr;gap:30px}
  .feature:nth-child(even) .feat-media{order:0}
  .disc-cards{grid-template-columns:1fr 1fr}
  .agent-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .model-grid{grid-template-columns:1fr}
  .disc-layout{grid-template-columns:1fr;gap:30px}
  .disc-media{order:-1;min-height:300px}
  .disc-media img{min-height:300px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .wrap{padding:0 20px}
  .nav-links{position:fixed;inset:60px 0 auto 0;flex-direction:column;background:#124451;box-shadow:0 12px 24px -10px rgba(14,17,22,.2);padding:20px 28px;gap:18px;transform:translateY(-140%);transition:transform .35s var(--ease)}
  .nav-links.open{transform:none}
  .burger{display:flex}
  .disc-cards,.agent-grid,.steps{grid-template-columns:1fr}
  .rstop{grid-template-columns:46px 1fr;gap:14px}
  .rstop .node{width:46px;height:46px;font-size:1.25rem}
  .road-track,.road-fill{left:22px}
  .section{padding:60px 0}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  [data-rv],[data-stg]>*{opacity:1!important;transform:none!important}
}

/* highlight cards (Radar + Vision) */
.hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.hl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s}
.hl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.hl-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft)}
.hl-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.hl-card:hover .hl-media img{transform:scale(1.06)}
.hl-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(53,190,188,.18),transparent 55%)}
.hl-ic{position:absolute;left:18px;top:18px;z-index:1;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--accent-ink);display:grid;place-items:center;box-shadow:var(--shadow)}
.hl-ic svg{width:24px;height:24px}
.hl-body{padding:26px 28px 30px}
.hl-body h3{font-size:1.55rem;margin-bottom:10px}
.hl-body p{color:var(--muted);font-size:1rem}
.hl-body .feat-chips{margin-top:16px;margin-bottom:0}
@media(max-width:1000px){.hl-grid{grid-template-columns:1fr}}

/* application cards with imagery */
.agent{padding:0;overflow:hidden;display:flex;flex-direction:column}
.agent-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-soft)}
.agent-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.agent:hover .agent-media img{transform:scale(1.06)}
.agent-body{padding:22px 26px 26px}
.agent.accent{padding:34px 30px;justify-content:center}

/* hero: two-column with chip visual */
.subhero{min-height:auto;padding:116px 0 64px}
.subhero .wrap{max-width:1200px;display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
.subhero h1{font-size:clamp(2.4rem,4.4vw,3.9rem)}
.subhero p{max-width:none}
.subhero-visual img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 55px rgba(14,17,22,.13))}
.hero-feats{display:flex;flex-wrap:wrap;gap:13px 22px;margin-top:30px}
.hero-feats .hf{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.hero-feats .hf svg{width:18px;height:18px;color:var(--accent-ink);flex:0 0 auto}
@media(max-width:1000px){.subhero .wrap{grid-template-columns:1fr;gap:22px} .subhero-visual{max-width:540px;margin:6px auto 0}}

/* highlight: full designed panels (Radar / Vision) */
.hl-panel{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#0b1220;transition:transform .45s var(--ease),box-shadow .45s}
.hl-panel:hover{transform:translateY(-6px);box-shadow:0 48px 90px -34px rgba(14,17,22,.42)}
.hl-panel img{width:100%;height:auto;display:block}
/* feature media that shows a full designed panel (no crop) */
.feat-media--full img{height:auto}


/* ---- added: a warm counterweight to the teal ----------------------------
   Three warm tokens, each with a job and each measured against its ground:
     --warm      marks on light grounds        3.6:1 on white
     --warm-ink  warm text                     5.0:1 on white, AA for body
     --warm-2    warm on dark grounds          8.3:1 over the hero
   The split is semantic: warm carries editorial marks (eyebrows, numerals,
   rules, labels), teal stays on everything interactive -- buttons, links,
   focus rings, the active dot -- so the affordances don't go ambiguous. */
:root{--warm:#D2691E;--warm-ink:#B4531F;--warm-2:#F09A4A;
  /* teal for interaction on a light ground. --accent is 2.27:1 on white,
     under the 3:1 a non-text indicator needs, and only 1.67:1 against the
     grey dots it sits between. This is 5.16 and 3.79. --accent still holds
     on dark, where it is 8.3:1. */
  --teal-ink:#0E7A78;
  /* the CTA blue as a flat colour: 6.48:1 on white. Already the nav's
     current-page link, now the Explore link too. */
  --blue-ink:#1E5FA6}
.eyebrow{color:var(--warm-ink)}
.eyebrow::before{background:var(--warm)}
.step .no{-webkit-text-stroke-color:var(--warm)}

/* ---- added: header CTA ----------------------------------------------
   The template's .btn-primary is bright mint on every button. Scoped here
   to the two "Talk to us" buttons only -- the hero's own buttons keep the
   template's treatment. --warm-ink rather than --warm: white on #B4531F is
   5.0:1 and clears AA, where the brighter warm is 3.6:1 and would not for
   a 15px label. It also reads on all three grounds the CTA sits on: the
   video, the navy bar, and the white page bar. */
/* The template's --grad cannot carry a label: white fails AA on all three of
   its stops (2.27 / 2.90 / 3.92) and its own dark label fails at the blue end
   (3.64). Same blue run, darkened -- white clears 6:1 the whole way across. */
/* One height for every inner page's hero, as a token rather than a
   shared rule: the shared rule had to sit above .chero's own min-height
   and lost to it, leaving About at 422 and Services at 563 -- the
   reverse of the intent. A custom property cannot be overridden by
   declaration order this way. */
:root{--hero-h:clamp(420px,44vw,620px)}
:root{--cta-grad:linear-gradient(120deg,#176B86 0%,#1E5FA6 55%,#2A4E9B 100%)}
/* every primary button, not just the nav one -- the hero's was still mint,
   so the page carried two different "main action" colours. The gradient is
   restated on hover because base.css's hover uses the background shorthand,
   which would otherwise drop the image back to a flat colour. */
.btn-primary{background:var(--cta-grad);background-size:160% 100%;
  color:#fff;border-color:transparent;
  transition:background-position .45s var(--ease),transform .25s var(--ease),box-shadow .3s}
.btn-primary:hover{background:var(--cta-grad);background-size:160% 100%;
  background-position:100% 0;color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(30,95,166,.55)}

/* groups the primary three from the secondary two */
.nav-links .nav-sep{width:1px;height:16px;background:rgba(255,255,255,.28);
  align-self:center;margin:0 -9px}
@media(max-width:1000px){.nav-links .nav-sep{display:none}}

/* ---- added: the header sits over the hero until you scroll past it ----
   .nav-over is emitted only for pages with a full-bleed hero; the rest keep
   the template's solid bar. The mobile menu forces a solid ground, since the
   open panel's links would otherwise sit on moving video. */
/* current page reads as a colour change, not a filled pill. The pill also
   carried padding:7px 18px, so that returns to the siblings' 7px 4px or the
   whole row shifts. Teal matches the hover underline the nav already uses:
   4.7:1 on the solid bar, higher over the hero. */
.nav-links a.active{background:none;color:var(--accent);border-radius:0;padding:7px 4px}

/* the bar gets out of the way going down and comes back going up. transform
   is not in base.css's .nav transition, so the list is restated with it. */
.nav{transition:background .35s,box-shadow .35s,padding .35s,transform .38s var(--ease)}
.nav.nav-hidden{transform:translateY(-101%)}

/* 1200 to match .subhero .wrap -- at 1280 the logo sat 32-40px left of the
   headline, so the header and the page were on different grids */
.nav-inner{max-width:1200px}

/* Pre-existing: base.css collapses the nav to the burger only at 680px, but
   six links plus the CTA need more room than that. Between 681 and 1000 the
   links stay inline and flex-shrink the logo -- at 722px .brand img measures
   0px wide, so the brand is simply gone, iPad portrait included. Collapsing
   earlier is the fix; shrink-proofing .brand alone would just overflow the
   row. These are base.css's own three rules, re-declared at the wider stop. */
.brand{flex:0 0 auto}
@media(max-width:1000px){
  .nav-links{position:fixed;inset:60px 0 auto 0;flex-direction:column;background:#124451;
    box-shadow:0 12px 24px -10px rgba(14,17,22,.2);padding:20px 28px;gap:18px;
    transform:translateY(-140%);transition:transform .35s var(--ease)}
  .nav-links.open{transform:none}
  .burger{display:flex}
}

/* The solid bar is white. Teal would fail on white for a 16.8px/600 link
   (3.36:1), so the current page takes --warm-ink at 5.0:1. */
.nav{background:#fff;border-bottom-color:var(--line)}
.nav.scrolled{box-shadow:0 8px 24px -18px rgba(14,17,22,.38)}
.nav .brand img{filter:none}
.nav .nav-links a{color:var(--ink-2)}
.nav .nav-links a:hover{color:var(--ink)}
/* current page in the CTA's blue. No single value clears 4.5:1 on both
   grounds -- the white bar needs a dark blue, the hero a light one. */
.nav .nav-links a.active{color:var(--blue-ink)}
.nav .nav-sep{background:var(--line-2)}
.nav .burger span{background:var(--ink)}
@media(max-width:1000px){.nav .nav-links{background:#fff;
  box-shadow:0 14px 26px -12px rgba(14,17,22,.20)}}

/* over the hero it stays clear, with light content, until it solidifies */
.nav-over:not(.scrolled){background:transparent;border-bottom-color:transparent}
.nav-over:not(.scrolled) .brand img{filter:brightness(0) invert(1)}
.nav-over:not(.scrolled) .nav-links a{color:rgba(255,255,255,.88)}
.nav-over:not(.scrolled) .nav-links a:hover{color:#fff}
    .nav-over:not(.scrolled) .nav-links a.active{color:#6FAEE8}
.nav-over:not(.scrolled) .nav-sep{background:rgba(255,255,255,.28)}
.nav-over:not(.scrolled) .burger span{background:#fff}
.nav-over::before{content:"";position:absolute;inset:0 0 -46px 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,12,20,.62) 0%,rgba(7,12,20,.28) 55%,rgba(7,12,20,0) 100%);
  transition:opacity .35s var(--ease)}
.nav-over.scrolled::before,.nav-over.menu-open::before{opacity:0}
.nav-over .nav-inner{position:relative}
.nav-over.menu-open{background:#fff}

/* ---- added: contact form, in the template's own idiom ---- */
.form{display:grid;gap:16px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px}
.field label{font-size:.8rem;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem;padding:12px 14px;border-radius:12px;background:#fff;
  border:1.5px solid var(--line-2);color:var(--ink);width:100%;
  transition:border-color .25s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.form .btn{justify-self:start}
.form-note{font-size:.82rem;color:var(--muted-2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px;align-items:start}
.where{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.where h4{font-family:'Space Grotesk',sans-serif;font-size:.95rem;margin-bottom:6px}
.where address{font-style:normal;font-size:.95rem;color:var(--muted);line-height:1.7}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:36px}
  .form .two,.where{grid-template-columns:1fr}}

/* ---- added: contact hero ---------------------------------------------
   The photo carries flat concrete across its left half and the hands on
   the right, so the headline sits in the empty part and the subject is
   never covered. Cover-cropping is vertical at every desktop width --
   the source is 3:2 and the band is much wider than that -- so the hands
   stay right of centre and only the top and bottom of the frame go. */
.chero{position:relative;isolation:isolate;overflow:hidden;display:flex;
  align-items:center;min-height:var(--hero-h)}
.chero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:64% 44%;z-index:-2}
/* Navy rather than white. A white veil over light concrete gave a page
   that opened on 480px of pale grey and then ran into a white form --
   correct on contrast, wrong on weight, and nothing like the dark hero
   every other page opens with. #0B2E38 is the same family as the Focus
   Areas band and the footer, so the photo reads as a teal duotone and
   the page has somewhere to start. Measured against the BRIGHTEST block
   in the headline zone, #BAC7CF, which is what puts white text at risk:
   at .88 alpha the headline is 11.1:1, the lede 6.7 and the eyebrow 5.0.
   Down to .26 by the right edge, so the hands keep their own light. */
.chero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,
  rgba(11,46,56,.93) 0%,rgba(11,46,56,.88) 36%,
  rgba(11,46,56,.58) 62%,rgba(11,46,56,.26) 100%)}
.chero .wrap{width:100%}
.chero .eyebrow{color:#F09A4A}
.chero .eyebrow::before{background:#F09A4A}
.chero h1{font-size:clamp(2.3rem,5vw,3.5rem);margin:14px 0 16px;max-width:15ch;
  color:#fff}
.chero-lede{color:#C2CBD2;font-size:1.06rem;line-height:1.65;max-width:46ch}
/* Under ~760px the text is wider than the flat half of the photo, so the
   veil turns vertical and the block drops to the foot of the frame, where
   it has the whole width at .95 rather than a corner at .58. */
@media(max-width:760px){
  .chero{align-items:flex-end;min-height:420px}
  .chero .wrap{padding-bottom:40px}
  .chero-scrim{background:linear-gradient(180deg,
    rgba(11,46,56,.34) 0%,rgba(11,46,56,.82) 44%,rgba(11,46,56,.95) 100%)}
  .chero h1,.chero-lede{max-width:none}}

/* ---- added: about hero ------------------------------------------------
   170px of empty blue is cropped off the source, so the gears start
   about 110px into the frame instead of 260. The file is 1295x694.
   That puts the text over gears, which is fine and my earlier note here
   was wrong about why: a full tonal range only defeats a scrim when the
   text is dark. Against white text on navy, the dark gears make it
   easier and only the white ones set the floor. Measured across the box
   the text actually occupies, at .84: headline 8.8:1, lede 5.3 -- and
   that worst case is a pure white gear.
   Centred, not top-pinned. Pinning it made sense while the frame had a
   flat empty band up there; with that cropped off, the block sat hard
   against the bar while the Services hero centred its own, and the two
   read as different templates again. Centred it also measures better --
   9.4:1 and 5.8 against 8.8 and 5.3 -- because the rows it lands on
   carry fewer white gears. */
.ahero .chero-img{object-position:50% 0%}
/* holds .86 out past the text's right edge at 47.7% before it falls,
   so no part of the block sits on less than the .84 it needs */
.ahero .chero-scrim{background:linear-gradient(90deg,
  rgba(11,46,56,.90) 0%,rgba(11,46,56,.86) 50%,
  rgba(11,46,56,.44) 70%,rgba(11,46,56,.08) 100%)}
/* #F5B072 lands at exactly 4.54 on this frame, a rounding error away
   from failing; #F8C48F gives 5.3 and reads the same warm. */
.ahero .eyebrow{color:#F8C48F}
.ahero .eyebrow::before{background:#F8C48F}
/* One line. The 15ch cap was sized for the two-clause headline and broke
   the shorter one across two; the size comes down so the whole of it
   still lands inside the measured contrast zone rather than running out
   over the bright gears at 48% of the frame. */
.ahero h1{max-width:none;font-size:clamp(1.7rem,3.5vw,2.9rem)}
@media(max-width:760px){
  .ahero .chero-scrim{background:linear-gradient(180deg,
    rgba(11,46,56,.42) 0%,rgba(11,46,56,.84) 46%,rgba(11,46,56,.95) 100%)}}

/* ---- added: about page ------------------------------------------------
   The template's .feature row does the alternating text/media layout, so
   the page is mostly that component repeated. Two things it does not
   have: a slot to stand in for an image that has not arrived yet, and a
   full-width statement band. */
/* Placeholder, not decoration. It holds the exact height .feat-media
   gives a real image, so dropping the file in changes nothing about the
   layout -- and it says on its face what it is waiting for, which a grey
   box does not. */
/* The band that replaces a founder quote. No portrait to carry it, so the
   sentence has to, which means it gets the width and the silence.
   150px of padding, not 96: the routed cable is anchored to the top and
   bottom edges and the sentence sits between the two runs, so the band
   has to be tall enough for them not to meet. */
.statement{background:#0D3742;padding:150px 0;position:relative;overflow:hidden;
  text-align:center}
.statement .wrap{position:relative;z-index:1}
.statement p{font-family:'Space Grotesk',sans-serif;font-weight:600;color:#fff;
  font-size:clamp(1.5rem,3.1vw,2.3rem);line-height:1.32;letter-spacing:-.02em;
  max-width:30ch;margin:0 auto}
.statement .rule{width:56px;height:3px;background:#F5B072;border-radius:3px;
  margin:0 auto 28px}
/* Same anchoring as the Approach band: two fixed-size SVGs pinned to
   opposite corners rather than one stretched to the section, so the
   stroke stays 13px and each loop keeps its inset at every width. The
   long runs sit at the band's top and bottom, the pills sit outside the
   1200px wrap at every width above the breakpoint, and the sentence has
   the corridor between them to itself.
   Below 900 there is no side margin for a loop, exactly as on home. */
.statement .trace{position:absolute;pointer-events:none;z-index:0}
.statement .trace-t{top:0;right:0}
.statement .trace-b{bottom:0;left:0}
@media(max-width:900px){.statement .trace{display:none}}
/* Numbered like the Approach band on the home page, so the two read as
   the same idea at two depths. */
.ways-list{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.ways-list h3{font-size:1.08rem;margin-bottom:6px}
.ways-list p{color:var(--muted);font-size:.98rem;max-width:44ch;margin:0}
.ways-list li{padding-left:20px;border-left:2px solid var(--line-2)}
@media(max-width:860px){.statement{padding:84px 0}}


/* ---- added: the manifesto and its values -----------------------------
   base.css caps .sec-head at 680px, which on a 1200px wrap left the right
   two fifths of this section empty down its whole height -- the heading,
   the vision and the values line all stopped at the same short measure
   and the page read as a column with a margin rather than a spread. The
   head is two columns here: the title holds the left, the prose the
   right, and the row ends flush. */
.mani-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px 60px;
  align-items:end;margin-bottom:46px;max-width:none}
.mani-head h2{margin:14px 0 0}
.mani-head .vision{color:var(--muted);font-size:1.06rem;line-height:1.7;margin:0}
.mani-head .aiml-line{font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:1.06rem;color:var(--ink);margin:18px 0 0}
.mani-head .aiml-line strong{color:var(--warm-ink)}
/* AIML is the section's one graphic idea, so the letter is set as the
   card's subject rather than a bullet before the word: 3.4rem, warm, on
   its own line. A hairline over four text columns was not carrying it. */
.aiml{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.aiml-item{background:#FCF7F3;border:1px solid rgba(180,83,31,.16);
  border-radius:18px;padding:24px 24px 26px}
.aiml-letter{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:3.4rem;line-height:.9;color:var(--warm-ink);letter-spacing:-.04em}
.aiml h3{font-size:1.05rem;margin:16px 0 8px}
.aiml p{color:var(--muted);font-size:.95rem;line-height:1.68;margin:0}
/* The closing thought was a heading in a 1fr column with dead space under
   it. As a band it reads as the conclusion it is, and Build & Beyond --
   which is the line in the footer of every page -- gets to land. */
.resp{margin-top:34px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:20px;padding:36px 40px;display:grid;
  grid-template-columns:.85fr 1.15fr;gap:16px 60px;align-items:start}
.resp h3{font-size:1.24rem;margin:0}
.resp p{color:var(--muted);font-size:1.01rem;line-height:1.75;margin:0}
.resp p + p{margin-top:14px}
.resp .bb{color:var(--warm-ink);font-weight:700}
@media(max-width:980px){.aiml{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.mani-head,.resp{grid-template-columns:1fr;gap:14px}
  .mani-head{align-items:start}
  .resp{padding:30px 26px}}
@media(max-width:520px){.aiml{grid-template-columns:1fr}}

/* ---- added: services page --------------------------------------------
   The picture is on-message here in a way it would not be beside a
   practice: this page is about data moving from edge to cloud, and that
   is what it shows. */
.thero{background:#07182A;position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;min-height:var(--hero-h)}
/* #07182A is the ground the services photograph sits on, chosen to match
   that image. An imageless .thero would take the site's own dark -- the
   one the statement band and the offices use -- but every .thero now
   carries a photograph, so this is here for the next one that does not. */
.thero-plain{background:#0D3742}
/* Careers. The frame is a flat cream wall down to y=380 and people below
   it, and the block is centred like the other two heroes rather than
   pushed up into the wall -- measured over the brightest pixel it can
   land on, a white shirt at 0.991, .82 alpha still gives the headline
   8.2:1, the lede 5.0 and the eyebrow 5.2. The gradient holds .86 across
   the text and falls away after, so the far end of the row keeps its
   light. */
/* Insights. The frame is black out to 26% and then the wireframe head is
   pure white, so the scrim has to hold across the whole text rather than
   fade into it -- .84 over a white line still gives the headline 8.3:1,
   the lede 4.9 and the eyebrow 5.2. Over the near-black left it is not a
   darkening at all but a lift: black to navy, which is where the rest of
   the site already sits. The head reads as steel rather than white, and
   the chart at the right keeps its own light. */
.thero-blog{background:#050B12}
.thero-blog .thero-img{object-position:50% 42%}
.thero-blog .thero-scrim{background:linear-gradient(90deg,
  rgba(11,46,56,.88) 0%,rgba(11,46,56,.84) 46%,
  rgba(11,46,56,.40) 66%,rgba(11,46,56,.06) 100%)}
.thero-careers{background:#0B2E38}
.thero-careers .thero-img{object-position:50% 0%}
.thero-careers .thero-scrim{background:linear-gradient(90deg,
  rgba(11,46,56,.90) 0%,rgba(11,46,56,.86) 44%,
  rgba(11,46,56,.48) 66%,rgba(11,46,56,.12) 100%)}
.thero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:56% 50%;z-index:-2}
/* The left of this frame is very dark -- mean luminance 0.042 -- but the
   particle stream throws bright specks right through it, and the
   brightest inside the text measure is #52FEF9 at 0.795. A scrim sized
   to the average would have left glyphs sitting on those. At .74 the
   worst of them still gives white 8.5:1, the lede 5.2 and the eyebrow
   4.6; the gradient holds .78 or better across the whole text and only
   then falls away, so the cloud keeps its light. */
.thero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,
  rgba(7,24,42,.86) 0%,rgba(7,24,42,.78) 42%,
  rgba(7,24,42,.40) 64%,rgba(7,24,42,.10) 100%)}
.thero .wrap{width:100%}
.thero .eyebrow{color:#F5B072}
.thero .eyebrow::before{background:#F5B072}
/* 14ch and 42ch, not 15 and 52: the measure is what keeps the text off
   the bright bars at 48% of the frame, so it is a contrast constraint
   here rather than a typographic preference. */
.thero h1{color:#fff;font-size:clamp(2.3rem,4.8vw,3.5rem);margin:16px 0 18px;
  max-width:14ch}
.thero p{color:#C2CBD2;font-size:1.06rem;line-height:1.7;max-width:42ch;margin:0}
@media(max-width:760px){
  .thero{align-items:flex-end;min-height:400px}
  .thero .wrap{padding-bottom:38px}
  .thero-scrim{background:linear-gradient(180deg,
    rgba(7,24,42,.30) 0%,rgba(7,24,42,.80) 46%,rgba(7,24,42,.93) 100%)}
  .thero h1,.thero p{max-width:none}}

/* The compute range, which is the page's argument in one object: five
   stops on one rail, edge at the left and cloud at the right, so "six
   practices, one continuum" is shown rather than asserted. The numbers
   here are engineering specs, not company metrics -- memory sizes and
   TOPS are exactly the sort the brief wants kept.
   Rail, nodes and end caps all hang off .range-stops so they share one
   coordinate space. Hanging the rail off the outer .range instead put
   the gap between them at whatever height .range-ends happened to
   render, and the dots landed 27px low, on the labels. */
.range{position:relative;margin-top:6px}
.range-ends{display:flex;justify-content:space-between;font-size:.74rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:16px}
.range-stops{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:18px;list-style:none;margin:0;padding:0}
/* The node is 44px of content plus a 4px border on content-box, so its
   box is 52 and its centre is 26 -- not 22. Rail and caps are placed
   against 26, or they ride 3.5px high of the thing they connect. */
.range-stops::before{content:"";position:absolute;left:0;right:0;top:24.5px;
  height:3px;border-radius:3px;background:linear-gradient(90deg,
    var(--accent) 0%,var(--cyan) 45%,var(--blue-ink) 100%)}
/* The caps are the ends of the rail, and the grid's first and last
   columns start and finish flush with the container, so they can hang
   off those two items without a third element to align. */
.rs:first-child::after,.rs:last-child::after{content:"";position:absolute;
  top:18.5px;width:15px;height:15px;border-radius:50%}
.rs:first-child::after{left:0;background:var(--accent)}
.rs:last-child::after{right:0;background:var(--blue-ink)}
.rs{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center}
.rs-node{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.82rem;color:#fff;border:4px solid var(--bg-soft);
  box-sizing:content-box}
/* Along the ramp rather than one flat colour, so a node reads as a place
   on the range. White on the lightest of the five is 5.16:1. */
.rs:nth-child(1) .rs-node{background:#0E7A78;box-shadow:0 0 0 2px #0E7A78}
.rs:nth-child(2) .rs-node{background:#127384;box-shadow:0 0 0 2px #127384}
.rs:nth-child(3) .rs-node{background:#166C8F;box-shadow:0 0 0 2px #166C8F}
.rs:nth-child(4) .rs-node{background:#1A669A;box-shadow:0 0 0 2px #1A669A}
.rs:nth-child(5) .rs-node{background:#1E5FA6;box-shadow:0 0 0 2px #1E5FA6}
.rs-card{position:relative;margin-top:18px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:16px 14px;
  width:100%;box-shadow:var(--shadow)}
/* the notch is the card's own corner rotated, so its two lit edges carry
   the card's border and it reads as part of the card, not a triangle
   parked above it */
.rs-card::before{content:"";position:absolute;top:-7px;left:50%;
  width:12px;height:12px;background:#fff;border-left:1px solid var(--line);
  border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.rs-card h3{font-size:.95rem;margin:0 0 5px}
.rs-card .spec{color:var(--muted);font-size:.84rem;line-height:1.55;margin:0}
/* Across the section. Only the services page renders this, so the cap
   comes off the rule rather than needing a variant. */
.range-note{color:var(--muted);font-size:1rem;margin:28px 0 0}

/* Six practices on a wheel: the reference's device, with six spokes at
   60 degrees rather than nine at 40. Every practice is on the rim, the
   one selected is in the hub, and the eye is not asked to scroll to see
   the set. */
.wheel-wrap{display:flex;justify-content:center;padding:8px 0 4px}
.wheel{position:relative;width:600px;height:600px;flex:0 0 auto}
/* The spoke is what moves. It draws from the hub out to the practice
   being selected, which is the reference's own animation -- turning the
   whole ring instead was my invention and it was the wrong one: it moves
   six labels to say one thing. */
.wheel-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* The rays. Every one of them starts at the pointer and ends on the rim,
   so the whole fan re-aims as the mouse crosses the wheel -- which is
   the reference's effect, and what six fixed lines were never going to
   be. Drawn as ONE path of 72 move/line pairs rather than 72 elements:
   a frame is a single setAttribute, not 72 of them. */
/* Cyan, not warm. Warm is the selection on this page -- the chosen
   button, its dot and the line out to it -- and spending it on a fan
   that follows the cursor spends the one colour that means "this is the
   one you picked". Cyan also picks up the compute range immediately
   above, which runs teal to blue.
   .30 rather than .22: cyan is lighter than the warm it replaces, and at
   .22 it flattened to #D0EBEF, fainter against white than the fan it
   replaced. At .30 it lands at #BFE4EA, and the selected line still
   reads at 5.0 against the fan's 1.35. */
.wheel-rays{fill:none;stroke:var(--cyan);stroke-width:.7;opacity:.30;
  stroke-linecap:round}
/* the drawn overlay: dasharray 1 works for all six because each line
   declares pathLength="1", whatever its real length */
/* the one solid line: hub out to the practice being read */
.wheel-live line{stroke:var(--warm-ink);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .55s var(--ease)}
.wheel[data-on="0"] .wheel-live line:nth-child(1),
.wheel[data-on="1"] .wheel-live line:nth-child(2),
.wheel[data-on="2"] .wheel-live line:nth-child(3),
.wheel[data-on="3"] .wheel-live line:nth-child(4),
.wheel[data-on="4"] .wheel-live line:nth-child(5),
.wheel[data-on="5"] .wheel-live line:nth-child(6){stroke-dashoffset:0}
.wheel-rim{fill:none;stroke:var(--line-2);stroke-width:1.5}
.wheel-dots circle{fill:var(--bg);stroke:var(--line-2);stroke-width:2;
  transition:fill .35s var(--ease),stroke .35s var(--ease),r .35s var(--ease)}
.wheel[data-on="0"] .wheel-dots circle:nth-child(1),
.wheel[data-on="1"] .wheel-dots circle:nth-child(2),
.wheel[data-on="2"] .wheel-dots circle:nth-child(3),
.wheel[data-on="3"] .wheel-dots circle:nth-child(4),
.wheel[data-on="4"] .wheel-dots circle:nth-child(5),
.wheel[data-on="5"] .wheel-dots circle:nth-child(6){fill:var(--warm);
  stroke:var(--warm);r:10}
.wheel-btns{position:absolute;inset:0}
/* rotate out to the rim, rotate back so the label stays upright, then
   pull back by half its own size to sit centred on the point */
.wheel-btn{position:absolute;left:50%;top:50%;transform-origin:0 0;
  transition:border-color .2s var(--ease),background .2s var(--ease),
             color .2s var(--ease);
  white-space:nowrap;font:inherit;cursor:pointer;background:var(--bg);
  border:1.5px solid var(--line-2);border-radius:100px;padding:11px 18px}
.wheel-btn:hover{border-color:var(--warm);color:var(--warm-ink)}
/* the hub's copy changes under a still frame, so it gets its own move */
.hub-panel{animation:hubIn .45s var(--ease) both}
@keyframes hubIn{from{opacity:0;transform:translateY(8px)}
                 to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .wheel-live line{transition:none}
  .hub-panel{animation:none}}
/* a pointer field is meaningless on touch, and 72 lines is work for
   nothing there */
@media(hover:none){.wheel-rays{display:none}}
.wheel-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wheel-btn[aria-selected="true"]{background:var(--warm-ink);border-color:var(--warm-ink);
  color:#fff}
.wb-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.1em;color:var(--muted-2);margin-right:.5em}
.wheel-btn[aria-selected="true"] .wb-num{color:rgba(255,255,255,.75)}
.wb-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.98rem}
/* the hub. 340 across, and the copy is inset from it -- text set to the
   full width of a circle collides with the curve on its first and last
   lines. */
.hub{position:absolute;left:50%;top:50%;width:340px;height:340px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--bg-soft);
  border:1px solid var(--line);display:grid;place-items:center;
  padding:46px 52px;text-align:center}
.hub-panel[hidden]{display:none}
/* Only the paragraph. The name is on the lit button a spoke away and the
   range was repeating what the compute rail above already lays out, so
   the hub was captioning itself twice before saying anything. The room
   they freed goes into the type rather than into more of them. */
.hub p{color:var(--ink-2);font-size:.95rem;line-height:1.65;margin:0}
/* Chips and the tech line will not fit inside a 340px circle -- the
   reference puts 26 words in its hub and our paragraph alone is 45 --
   so they sit under the wheel, still keyed to the selection. */
/* Six pills centred and wrapped made two rows of different widths with
   uneven gaps, and neither row said what it was. On a three-column grid
   they line up, and a label each tells you which is the work and which
   is the kit. */
.wheel-extra{max-width:920px;margin:34px auto 0;text-align:left}
.extra-label{font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 15px}
.svc-caps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:13px 36px}
.svc-caps li{position:relative;padding-left:19px;color:var(--ink-2);
  font-size:.94rem;line-height:1.5}
.svc-caps li::before{content:"";position:absolute;left:0;top:.62em;width:9px;
  height:2px;border-radius:2px;background:var(--warm)}
.extra-tools{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.svc-tech{color:var(--muted);font-size:.88rem;line-height:1.75;margin:0}
@media(max-width:820px){.svc-caps{grid-template-columns:1fr 1fr;gap:12px 28px}}
@media(max-width:520px){.svc-caps{grid-template-columns:1fr}}
/* Under 980 there is no room for a 600px wheel plus the labels hanging
   off it. The transforms are dropped rather than the markup: the same
   buttons become a wrapped row and the hub becomes a plain panel. */
@media(max-width:980px){
  .wheel-wrap{display:block}
  .wheel{width:auto;height:auto}
  .wheel-svg{display:none}
  .wheel-btn{position:static;transform:none!important;margin:0}
  .wheel-btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
  .hub{position:static;width:auto;height:auto;transform:none;border-radius:18px;
    padding:26px 24px;margin-top:22px;display:block}
  .wheel-extra{margin-top:22px}}
.imgslot{aspect-ratio:3/2;border-radius:var(--r-lg);
  border:1.5px dashed var(--line-2);background:var(--bg-soft2);display:grid;
  place-items:center;text-align:center;padding:24px;color:var(--muted-2);
  font-size:.84rem;line-height:1.65;align-self:start}
.imgslot b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.95rem;
  color:var(--muted);margin-bottom:6px}
.imgslot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;background:rgba(14,17,22,.05);border-radius:6px;padding:2px 7px}
/* Below 1000 five cards will not sit side by side, and a rail with the
   stops wrapped onto two rows is a diagram of nothing. The rail and the
   caps go; the nodes stay as numbers beside their cards. */
@media(max-width:1000px){.range-stops{grid-template-columns:repeat(2,1fr);
    gap:22px}
  .range-stops::before,.range-ends{display:none}
  .rs:first-child::after,.rs:last-child::after{display:none}
  .rs{flex-direction:row;align-items:flex-start;gap:14px;text-align:left}
  .rs-node{flex:0 0 auto;width:38px;height:38px;font-size:.76rem;
    border-width:0;box-shadow:none}
  .rs-card{margin-top:0}
  .rs-card::before{display:none}}
@media(max-width:620px){.range-stops{grid-template-columns:1fr}}
/* The range chip is the first thing to go: it is useful, not essential,
   and a four-column header row will not hold at this width. */
@media(max-width:820px){.acc-h button{grid-template-columns:auto 1fr auto;
    gap:6px 14px;padding:20px 2px}
  .acc-range{display:none}
  .acc-sum{font-size:.9rem}
  .acc-inner{grid-template-columns:1fr;gap:22px;padding-bottom:30px}}

@media(max-width:560px){.range-stops{grid-template-columns:1fr}}

/* ---- added: careers page ---------------------------------------------
   Six disciplines and four ways of working, both plain grids. The wheel
   suits six things that are one continuum; these are six independent
   answers to "what are you good at", and a list is the honest shape. */
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px}
.disc-grid h3{font-size:1.06rem;margin:0 0 8px}
.disc-grid p{color:var(--muted);font-size:.95rem;line-height:1.68;margin:0}
.disc-grid > div{padding-top:18px;border-top:2px solid var(--line-2)}
.ways-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 48px}
.ways-grid .n{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:.74rem;letter-spacing:.12em;color:var(--warm-ink)}
.ways-grid h3{font-size:1.14rem;margin:8px 0 9px}
.ways-grid p{color:var(--muted);font-size:.98rem;line-height:1.7;margin:0;
  max-width:46ch}
/* The empty state is the page's normal state most of the year, so it is
   written rather than apologised for. */
.noroles{background:var(--bg-soft);border:1px solid var(--line);
  border-radius:20px;padding:40px 44px;max-width:720px}
.noroles h3{font-size:1.3rem;margin:0 0 12px}
.noroles p{color:var(--muted);font-size:1.01rem;line-height:1.75;margin:0;
  max-width:56ch}
.noroles p + p{margin-top:12px}
/* Most of the year there are no roles, and as a single column that state
   was a heading, a 720px card and 400-odd px of nothing to the right of
   it. Side by side the heading and the message read as one statement and
   the band loses roughly a third of its height. Only the empty state
   does this: a real list of openings wants the full measure. */
.roles-empty{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:24px 60px;align-items:center}
.roles-empty .sec-head{margin-bottom:0;max-width:none}
.roles-empty .noroles{max-width:none;padding:34px 38px}
.role{border-top:1px solid var(--line);padding:30px 0}
.role:first-of-type{border-top:none;padding-top:4px}
.role-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.role-top h3{font-size:1.3rem;margin:0}
.role-meta{font-size:.84rem;color:var(--muted-2)}
.role > p{color:var(--muted);font-size:1.01rem;line-height:1.72;margin:12px 0 0;
  max-width:60ch}
.role ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.role li{position:relative;padding-left:19px;color:var(--ink-2);font-size:.95rem}
.role li::before{content:"";position:absolute;left:0;top:.62em;width:9px;
  height:2px;border-radius:2px;background:var(--warm)}
.role-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
/* Not a closing band -- a line. The page already ends on a form, and a
   second call to action the same size would compete with it. */
/* No rule above it any more: with "Where you'd sit" gone this is the
   whole of its section, not a footnote under something. */
.notjob{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.notjob p{color:var(--muted);font-size:.98rem;margin:0}
.notjob a{font-weight:600;color:var(--blue-ink);text-decoration:none}
.notjob a:hover{text-decoration:underline}
@media(max-width:960px){.disc-grid{grid-template-columns:1fr 1fr;gap:28px 34px}}
@media(max-width:760px){.disc-grid,.ways-grid{grid-template-columns:1fr;
    gap:26px}
  .noroles{padding:30px 26px}}
@media(max-width:880px){.roles-empty{grid-template-columns:1fr;gap:26px}
  .roles-empty .noroles{padding:30px 26px}}

/* ---- added: blog index -----------------------------------------------
   An index, not cards. A post is a title and a sentence; a card would
   wrap that in a border and a shadow and say no more for it. */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.filters button{font:inherit;font-size:.85rem;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);border-radius:100px;
  padding:7px 15px;color:var(--ink-2);
  transition:background .2s var(--ease),border-color .2s var(--ease),
             color .2s var(--ease)}
.filters button:hover{border-color:var(--warm)}
.filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.filters button[aria-pressed="true"]{background:var(--warm-ink);
  border-color:var(--warm-ink);color:#fff}
.entry{display:grid;grid-template-columns:1fr 190px;gap:14px 40px;
  padding:26px 0;border-top:1px solid var(--line);text-decoration:none;
  color:inherit;align-items:start}
.entry[hidden]{display:none}
.entry-cat{font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-ink)}
.entry h3{font-size:1.22rem;line-height:1.3;margin:9px 0 9px;
  transition:color .2s var(--ease)}
.entry:hover h3{color:var(--warm-ink)}
.entry p{color:var(--muted);font-size:.97rem;line-height:1.68;margin:0;
  max-width:62ch}
.entry-meta{color:var(--muted);font-size:.86rem;line-height:1.7;
  text-align:right;display:flex;flex-direction:column;gap:2px}
.noposts{background:var(--bg-soft);border:1px solid var(--line);
  border-radius:20px;padding:40px 44px;max-width:720px}
.noposts h3{font-size:1.3rem;margin:0 0 12px}
.noposts p{color:var(--muted);font-size:1.01rem;line-height:1.75;margin:0;
  max-width:56ch}
.noposts p + p{margin-top:12px}
/* House rules for attribution, which belong on the index rather than in
   a policy page nobody opens. */
.blog-note{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted-2);font-size:.88rem;line-height:1.75;max-width:70ch}
@media(max-width:760px){.entry{grid-template-columns:1fr;gap:10px}
  .entry-meta{text-align:left}
  .noposts{padding:30px 26px}}

/* ---- added: embedded world page --------------------------------------
   A show page has one job: get someone to the booth. The facts come
   first and stay first.
   The colours here are the show's, not ours, and they are confined to
   the hero and the fact bar. Below that the page returns to the site's
   palette, so it reads as Brillersys at their event rather than as a
   different site.
   #084090 and #E40421 are sampled from the supplied logo. */
/* The bar is fixed and 85px tall. Every other hero clears it by being
   563px with its content centred; this one starts at its padding, so the
   padding has to carry the bar itself -- at 56 the logo panel was
   sitting underneath it. */
/* The picture is the hero, the way every other hero on this site works.
   Three flat grounds were tried first and none belonged: the show's blue
   gave the page to another company, white gave it no weight, and our own
   teal was still a colour standing where a picture should be.
   The scrim is neutral -- #071824, not teal -- because the picture
   supplies the colour and the ground only has to carry the words. .84
   across the text: the brightest thing under it is a lit booth panel at
   0.928, which still leaves the headline 11.4:1, the lede 6.9 and the
   meta icons 6.8. */
.ewhero{background:#071824;color:#fff;position:relative;isolation:isolate;
  overflow:hidden;display:flex;align-items:center;min-height:var(--hero-h);
  padding:118px 0 56px}
.ew-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2}
.ew-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,
  rgba(7,24,36,.90) 0%,rgba(7,24,36,.84) 48%,
  rgba(7,24,36,.50) 70%,rgba(7,24,36,.26) 100%)}
.ewhero .wrap{width:100%}
/* The logo carries near-black ink, so on the navy it needs its own light
   ground -- 1.64:1 without one. The panel is also where its clear space
   lives, evenly, which the supplied file's own margin was not. */
/* width:max-content, not inline-block. base.css sets .eyebrow to
   inline-flex, so an inline panel and the eyebrow shared a line and
   "Come visit us" sat out to the right of the logo. */
.ewlogo-panel{display:block;width:max-content;max-width:100%;background:#fff;
  border-radius:13px;padding:16px 22px;margin:0 0 26px}
.ewlogo-img{display:block;width:290px;max-width:100%;height:auto}
.ewhero h1{color:#fff;font-size:clamp(2.5rem,5.8vw,4.1rem);line-height:1.02;
  letter-spacing:-.03em;margin:0 0 18px}
.ewsub{color:#C2CBD2;font-size:1.06rem;line-height:1.7;max-width:58ch;margin:0}
/* The facts were a four-column bar across a coloured band; as a card they
   sit inside the hero the way the reference has them, and the hero stops
   needing a second section to finish its own sentence. */
/* Two items now, not three. The hours were the least useful of them --
   a stand is open when the hall is -- and at three the card ran wider
   than the column the video left it. */
.ewhero .eyebrow{color:#8FD4D2;display:flex}
/* base.css caps .sec-head at 680px, which centred left the headline
   breaking over two lines with 230px of margin either side of it. The cap
   comes off so the section carries it, and only the lede keeps a measure
   -- a paragraph set across 1144px is a wall whatever it is centred on. */
/* The routed cable, as on the Approach band and the About statement:
   two fixed-size SVGs pinned to opposite corners, so the stroke stays
   13px and each loop keeps its inset whatever height the section ends up.
   The ramp is the white-band one -- #35BEBC to #5B3FD0 -- not the lifted
   pair the navy statement uses, which would be near-invisible here. */
/* 132px of padding, and the traces are 120 tall, so the cable lives in
   the section's own empty bands and cannot reach the text. The 300px
   version from the Approach band ran straight through the cards -- 130
   sampled stroke points inside the copy, zero clearance -- and a
   decorative line has to be kept off content by the geometry, not by
   z-index. Behind the words is still across them. */
.demos{position:relative;overflow:hidden;padding:132px 0}
.demos .wrap{position:relative;z-index:1}
.demos .trace{position:absolute;pointer-events:none;z-index:0}
.demos .trace-t{top:0;right:0}
.demos .trace-b{bottom:0;left:0}
@media(max-width:1100px){.demos .trace{display:none}}
.sec-head.wide{max-width:none}
.sec-head.wide h2{max-width:22ch}
.sec-head.wide p{max-width:none}
.sec-head.center.wide h2,.sec-head.center.wide p{margin-inline:auto}
.sec-head.center.wide p{max-width:76ch}
/* Across the section, as asked. A closing note is one sentence of aside
   rather than a paragraph to be read carefully, so the long measure
   costs less here than it would in body copy. */
.demos-note{color:var(--muted);font-size:1rem;line-height:1.7;margin:36px 0 0;
  max-width:none}
.ewhero .eyebrow::before{background:#8FD4D2}
/* One line, not a card. Two facts in a panel was a lot of furniture for
   nine words, and with the dates in the line the paragraph's first
   sentence was saying them a second time. */
.ewmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  margin:26px 0 0;color:#fff;font-size:.98rem;font-weight:500}
.ewmeta span{display:inline-flex;align-items:center;gap:9px}
.ewmeta svg{width:19px;height:19px;color:#8FD4D2;flex:0 0 auto}
.ewmeta .sep{width:1px;height:18px;background:rgba(255,255,255,.28);
  display:inline-block}
@media(max-width:620px){.ewmeta .sep{display:none}
  .ewmeta{gap:12px;flex-direction:column;align-items:flex-start}}
/* The logo has near-black ink in it -- #050709 -- which measures 1.64:1
   on our navy and would simply disappear. It gets a white panel, which
   is also how its clear space is enforced: the supplied file's own
   margin was uneven (14px top against 53 bottom), so it is trimmed to
   the ink and the space is set here where it can be even. */
/* The blue hero's rules used to live here -- a white panel for the logo,
   a white h1, a white sub and a four-column factbar on a coloured band.
   They outlived their block: the light rules above were inserted before
   them, so the old white h1 and sub kept winning on order and rendered
   white on a white ground at 1.05:1. */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px}
.demo{padding-top:20px;border-top:2px solid var(--line-2)}
.demo h3{font-size:1.16rem;margin:0 0 9px}
.demo > p{color:var(--muted);font-size:.97rem;line-height:1.68;margin:0;
  max-width:48ch}
/* Amber is for numbers somebody actually took. A demo whose figures are
   not measured yet says so in grey rather than borrowing the colour that
   means "this was measured". */
.val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;
  color:var(--warm-ink);margin:14px 0 0}
.pending{font-size:.84rem;color:var(--muted-2);font-style:italic;margin:14px 0 0}
.badge{display:inline-block;font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-radius:100px;
  padding:5px 12px;margin-top:14px;background:var(--bg-soft);
  border:1px solid var(--line-2);color:var(--muted)}
.badge-live{background:rgba(53,190,188,.14);border-color:transparent;
  color:var(--teal-ink)}
@media(max-width:900px){
  .ewhero{padding:104px 0 46px}
  .ewlogo-img{width:240px;margin-bottom:26px}
  .ewcard{grid-template-columns:1fr;gap:18px;padding:22px 24px}
  .ewcard > div + div{border-left:0;padding-left:0;padding-top:18px;
    border-top:1px solid var(--line)}
  .demo-grid{grid-template-columns:1fr;gap:26px}
}

/* ---- added: contact page sidebar -------------------------------------
   The addresses sit beside the form, not in a band under it. As their
   own section they needed a background to stop being a stray pair of
   cards, that background had to be dark to keep the page off white, and
   a dark band directly above a dark footer is two problems buying one
   another. Beside the form they need no band at all, and a reader who
   wants the address does not have to scroll past the form to reach it. */
.contact-grid{grid-template-columns:.92fr 1.08fr;gap:48px 72px}
.cside{display:grid;gap:32px}
.cside-item{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start}
/* A tinted tile rather than a bare glyph: at 20px a line icon on white
   is too light to hold its corner of the row, and the tile gives the
   column an edge to align to. */
.cside-ico{width:42px;height:42px;border-radius:13px;display:grid;
  place-items:center;background:rgba(53,190,188,.13);color:var(--teal-ink)}
.cside-ico svg{width:21px;height:21px}
.cside h3{font-size:1.05rem;margin:6px 0 8px}
.cside p{color:var(--muted);font-size:.95rem;line-height:1.7;max-width:38ch;
  margin:0 0 12px}
.cside address{font-style:normal;color:var(--muted);font-size:.95rem;
  line-height:1.75}
.cside-links{display:grid;gap:6px;justify-items:start;margin-top:2px}
.cside-links a{font-weight:600;color:var(--blue-ink);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.cside-links a:hover{border-bottom-color:currentColor}
.cside .map{font-size:.86rem;font-weight:600;color:var(--blue-ink);
  text-decoration:none;display:inline-block;margin-top:10px}
.cside .map:hover{text-decoration:underline}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---- added: the page scrolls over a pinned hero ---- */
.subhero-video{position:sticky;top:0;z-index:0}
.over{position:relative;z-index:1;background:var(--bg);
  box-shadow:0 -30px 60px -30px rgba(14,17,22,.28)}
.footer{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.subhero-video{position:static}}

/* ---- added: video hero ---- */
.subhero-video{background:#070C14}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(7,12,20,.94) 0%,rgba(7,12,20,.82) 42%,rgba(7,12,20,.35) 72%,rgba(7,12,20,.25) 100%)}
/* ---- added: the routed trace -----------------------------------------
   Two fixed-size SVGs anchored to opposite corners, NOT one stretched to
   the section. The band's height changes a lot -- the cards stack on
   mobile -- so a fitted SVG would either distort the loops or blow the
   stroke up with it. Anchored, the stroke stays 13px and each loop keeps
   the same inset from its edge at every width. They are 2000px wide so the
   cable still crosses the viewport on a large monitor, and .disc already
   has overflow:hidden to clip the excess.
   Below 900px there is no side margin for a loop to sit in, so it goes. */
.disc .trace{position:absolute;pointer-events:none;z-index:0}
.disc .trace-t{top:0;right:0}
.disc .trace-b{bottom:0;left:0}
@media(max-width:900px){.disc .trace{display:none}}

/* ---- added: How-we-work band, light instead of the gradient ---------
   Was background:var(--grad) with white copy, where nothing reached 4.5:1
   -- the headline measured 2.27 on the mint end and the caption 1.86. On
   white the same copy is 13:1+. */
.disc{background:#fff;color:var(--ink);padding:96px 0;border-top:1px solid var(--line)}
.disc::before{display:none}                       /* radial glows were for the gradient */
.disc .b-eyebrow{color:var(--warm-ink)}
.disc .b-eyebrow::before{background:var(--warm)}
.disc h2{color:var(--ink)}
.disc .b-head p{color:var(--muted)}
.disc .loop-cap{color:var(--muted)}
.dcard{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.dcard:hover{background:#fff;box-shadow:var(--shadow-lg)}
.dcard .dl{color:var(--warm)}
.dcard h3{color:var(--ink)}
.dcard p{color:var(--muted)}
@media(max-width:680px){.disc{padding:72px 0}}

/* ---- added: footer ---------------------------------------------------
   Brand navy rather than near-black, so it belongs to the palette instead
   of just being dark, and it rhymes with the Focus Areas band.
   The bottom bar uses .foot-bottom, which base.css already styles as a
   space-between flex row -- the markup said .foot-bot, so those rules had
   never applied and the copyright was an unstyled line. */
.footer{background:#124451;position:relative;overflow:hidden}
/* 1.8fr gave the brand column 508px for a tagline capped at 300 -- 207px
   of dead space inside the column and a 243px gap before Company. */
.foot-grid{grid-template-columns:1.1fr 1fr 1fr;position:relative;z-index:1;
  border-bottom-color:rgba(240,154,74,.45)}
.foot-brand p{max-width:340px}
.foot-bottom{position:relative;z-index:1}
.foot-legal{display:flex;gap:26px}
.foot-legal a{font-size:.8rem;color:#AEB6C2;transition:color .25s}
.foot-legal a:hover{color:#fff}
/* base.css's footer greys were picked for the near-black ground. On navy
   #8B93A0 is 3.44:1 and the copyright's #6F7884 is 2.38:1, both under AA.
   Brightened, keeping the copyright a step quieter than the links. */
.footer{color:#C2CBD2}
.foot-brand p,.foot-loc,.foot-col a{color:#C2CBD2}
.foot-col a:hover{color:#fff}
.foot-bottom small,.foot-legal a{color:#AEB6C2}
/* Five passes at a decorative cable here -- across the top, looped,
   straight, then down one gutter and up the other -- and every one read
   as an ornament rather than as structure; the last drew what looked
   like a giant rounded rectangle around the whole footer. The footer
   does not need it. The Approach band keeps the motif, where a routed
   trace has somewhere to run. */
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* ---- added: Insights section photo ----------------------------------
   Beside the three entries, not the heading. Against the heading it sat
   250px clear of any text it related to and read as unconnected; here it
   stretches to the exact height of the list, so the two are one block.
   Right-hand side so the entries keep the same left edge as the heading
   and as every other section. alt is empty: it illustrates, not informs. */
/* the lede needs 749px to hold one line; .sec-head caps at 680. Scoped
   here so the other section heads keep their 680px measure. */
.notes-head{max-width:800px}
.notes-wrap{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:stretch}
.notes-photo{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:var(--r-lg);align-self:stretch}
@media(max-width:900px){.notes-wrap{grid-template-columns:1fr;gap:26px}
  .notes-photo{height:auto;aspect-ratio:2/1}}

/* ---- added: Insights as an editorial index --------------------------
   A list rather than a fourth card grid: it is the only section on the page
   that is neither cards nor a carousel, and unlike a grid it looks right
   with one entry or three. The practice tag carries the section's own claim
   -- "across all six practices, not just the loud one" -- and takes the
   same --warm-ink as the range chips on the practice cards.
   Entries are not links: they are placeholders with nowhere to point, and
   blog.html does not exist yet. They become links when posts do. */
.notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.note{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:start;
  padding:26px 2px;border-bottom:1px solid var(--line)}
.note-meta{display:flex;flex-direction:column;gap:6px}
.note-practice{font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warm-ink)}
/* --muted-2 is 2.79:1 on white, under AA for 13.6px text. These recede
   by size rather than by colour. */
.note-date{font-size:.84rem;color:var(--muted)}
.note h3{font-family:'Space Grotesk',sans-serif;font-size:1.32rem;font-weight:700;
  line-height:1.3;margin:0 0 8px;color:var(--ink)}
.note p{color:var(--muted);font-size:.98rem;line-height:1.55;margin:0 0 10px;max-width:62ch}
.note-by{font-size:.84rem;color:var(--muted)}
@media(max-width:720px){.note{grid-template-columns:1fr;gap:12px;padding:22px 2px}
  .note-meta{flex-direction:row;align-items:baseline;gap:12px}}

/* ---- added: Focus Areas as a centred carousel ------------------------
   One card is focused at a time: it takes the navy, its neighbours sit back
   in white at reduced opacity. Inverting it this way -- rather than dimming
   navy cards -- lets the dark card mark the focus, and avoids a faded navy
   going muddy against the grey ground. */
.fcar{position:relative}
.focus .steps{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* deliberately NOT scroll-behavior:smooth -- that makes every scrollLeft
     assignment animate, including the browser's own snap, and the arrows
     already ask for smooth explicitly with a reduced-motion fallback */
  padding:16px 0 22px;padding-inline:max(0px,calc(50% - 170px));
  scrollbar-width:none;-ms-overflow-style:none}
.focus .steps::-webkit-scrollbar{display:none}
/* Partial cards at the edges dissolve rather than being cut into a sliver --
   at the scroll end the next card along was showing as a few stray pixels.
   Dropped below 700px, where a card nearly fills the width and fading its
   edges would just look like clipping. */
.focus .steps{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,
  #000 calc(100% - 56px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 56px,
  #000 calc(100% - 56px),transparent 100%)}
@media(max-width:700px){.focus .steps{-webkit-mask-image:none;mask-image:none}}
.focus .step{flex:0 0 clamp(258px,30vw,340px);scroll-snap-align:center;
  transition:background .45s var(--ease),transform .45s var(--ease),
             box-shadow .45s var(--ease),opacity .45s var(--ease)}
/* .85, not .5: the receded cards sit on a dark ground, and at .5 their body
   copy fell to 2.70:1. The white focused card already carries the contrast. */
.focus .step:not(.is-active){opacity:.85;transform:scale(.95)}
.focus .step.is-active{transform:translateY(-4px)}
.fcar-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;padding:0;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .3s var(--ease),color .3s var(--ease),opacity .3s}
.fcar-nav svg{width:20px;height:20px}
.fcar-nav:hover{border-color:var(--accent);color:var(--accent)}
.fcar-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fcar-nav[disabled]{opacity:.35;cursor:default}
.fcar-prev{left:-10px}.fcar-next{right:-10px}
@media(max-width:700px){.fcar-nav{display:none}
  .focus .steps{padding-inline:0}
  .focus .step:not(.is-active){opacity:1;transform:none}}

/* ---- added: Focus Areas on navy cards --------------------------------
   Three card sections ran back to back in white, so this one reads as a
   repeat of the one above it. Colouring the cards rather than the ground
   changes the section's character without restructuring it, and puts the
   brand navy on the page at a size where it registers.
   The numerals switch to --warm-2: --warm is 2.93:1 on navy, just under
   the 3:1 an outline needs, where --warm-2 is 4.78. */
/* Inverted: the section is navy and the FOCUSED card is the light one. A
   navy card on a light ground could not carry the section on its own -- five
   of six were white at any moment. Alphas are set so everything still clears
   AA after the .85 container dim: title 6.14, body 4.74, numeral 3.30. */
.focus{background:#124451}
.focus .sec-head h2{color:#fff}
.focus .eyebrow{color:var(--warm-2)}
.focus .eyebrow::before{background:var(--warm-2)}
.focus .step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  box-shadow:none}
.focus .step h3{color:rgba(255,255,255,.92)}
.focus .step p{color:rgba(255,255,255,.76)}
.focus .step .no{-webkit-text-stroke-color:rgba(255,255,255,.55)}
.focus .step.is-active{background:#fff;border-color:transparent;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.5)}
.focus .step.is-active h3{color:var(--ink)}
.focus .step.is-active p{color:var(--muted)}
.focus .step.is-active .no{-webkit-text-stroke-color:var(--warm)}

/* ---- added: pull quote ---- */
.quote-band{background:var(--bg-soft)}
.pullquote{max-width:900px;margin:0 auto;text-align:center}
.pullquote:before{content:"";display:block;width:56px;height:3px;border-radius:var(--r-pill);
  background:var(--warm);margin:0 auto 28px}
.pullquote p{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.45;font-weight:500;letter-spacing:-.01em;color:var(--muted)}
.pullquote .pq-punch{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.25;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin-top:20px}

/* ---- added: the six practices as a horizontal scroller ---- */
.pscroll{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:8px 6px 24px;margin:0 -6px;scroll-padding:0 6px;
  scrollbar-width:none;-ms-overflow-style:none}
/* the dots are the affordance, as in the reference; overflow-x:auto would
   otherwise also force overflow-y:auto and leave a dead vertical track */
.pscroll::-webkit-scrollbar{display:none}
.pcard{position:relative;flex:0 0 clamp(258px,25vw,320px);aspect-ratio:3/4;
  scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;
  background:var(--ink);box-shadow:var(--shadow)}
.pcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.pcard:hover .pcard-img{transform:scale(1.07)}
/* white panel floating clear of the card foot, growing upward as the copy reveals */
.pcard-panel{position:absolute;left:0;right:0;bottom:38px;background:#fff;padding:20px 22px}
.pcard .ind{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warm-ink)}                          /* base.css's .agent .ind, warmed */
/* Reserve two lines for every title. Four of the six fit on one line and
   two wrap, which left their panels 23px taller and their top edges out of
   line across the row. 2.5em is two lines at line-height 1.25, so it tracks
   the font size rather than being a pixel guess -- and it lines up where the
   hover copy starts as well. */
.pcard h3{font-size:1.16rem;font-weight:700;line-height:1.25;margin:8px 0 0;color:var(--ink);
  min-height:2.5em}
.pcard p{color:var(--muted);font-size:.92rem;line-height:1.5;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin-top .5s var(--ease)}
.pcard:hover p,.pcard:focus-visible p{max-height:210px;opacity:1;margin-top:10px}
.pcard:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
/* no hover on touch, so show the copy outright */
@media(hover:none){.pcard p{max-height:210px;opacity:1;margin-top:10px}}
/* borderless, centred, grows a little under the cursor */
.explore{text-align:center;margin-top:34px}
.explore-link{display:inline-flex;align-items:center;gap:.45em;font-family:'Space Grotesk',sans-serif;
  font-size:1.2rem;font-weight:700;letter-spacing:-.01em;color:var(--blue-ink);text-decoration:none;
  transition:transform .3s var(--ease),color .3s var(--ease)}
.explore-link:hover{transform:scale(1.07);color:var(--ink)}
.explore-link .ar{transition:transform .3s var(--ease)}
.explore-link:hover .ar{transform:translateX(4px)}
.explore-link:focus-visible{outline:2px solid var(--blue-ink);outline-offset:6px;border-radius:var(--r-pill)}
.pdots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.pdot{width:26px;height:5px;padding:0;border:0;border-radius:var(--r-pill);
  background:var(--line-2);cursor:pointer;transition:background .3s var(--ease)}
.pdot[aria-current="true"]{background:var(--teal-ink)}
.pdot:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}

/* ---- added: full-bleed hero with a scroll cue and a pause control ---- */
/* 92vh is base.css's own .subhero height; the two-column block set it to auto. */
.subhero-video{min-height:92vh}
/* one bar pinned to the hero's foot, sharing .wrap's 1200px/28px gutter so the
   cue lines up with the headline and the pause sits on the content's right edge */
.hero-ctls{position:absolute;left:0;right:0;bottom:30px;z-index:3;max-width:1200px;
  margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;
  pointer-events:none}
.hero-ctls>*{pointer-events:auto}
.hero-ctl{display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:transparent;border:0;padding:0;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.hero-ctl:hover{color:var(--accent)}
.hero-ctl:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:var(--r-pill)}
.hero-scroll svg{width:30px;height:30px;display:block;opacity:.8;animation:heroCue 2.4s var(--ease) infinite}
.hero-scroll:hover svg{opacity:1}
@keyframes heroCue{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.hero-pause{width:46px;height:46px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-pill)}
.hero-pause:hover{border-color:var(--accent)}
.hero-pause svg{width:19px;height:19px;display:block}
.hero-pause .ico-play{display:none}
.hero-pause[data-paused="true"] .ico-pause{display:none}
.hero-pause[data-paused="true"] .ico-play{display:block}
/* no video under reduced motion, so nothing to pause */
@media(prefers-reduced-motion:reduce){.hero-pause{display:none}}

/* ---- added: this hero carries no side render — one column ---- */
/* .subhero is display:flex, so .wrap shrink-wraps without the visual;
   width:100% keeps it filling the template's own 1200px container. */
.subhero-video .wrap{grid-template-columns:1fr;width:100%}
.subhero-video p{max-width:560px}

/* ---- added: the hero's single event CTA ----
   Far longer than a normal button label, so the text is allowed to wrap
   inside the pill instead of forcing it past the text column. */
.hero-event{max-width:100%;text-align:left;padding:12px 22px}
.hero-event .ev-txt{white-space:normal;line-height:1.35}
.hero-event .ev-tag{flex:0 0 auto;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.20);color:#fff}
.hero-event .ar{flex:0 0 auto}
@media(max-width:560px){.hero-event{font-size:.86rem;padding:11px 16px}
  .hero-event .ev-tag{display:none}}
.subhero-video h1{color:#fff}
.subhero-video p{color:#B9C4D2}
.subhero-video .eyebrow{color:var(--warm-2)}
.subhero-video .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.subhero-video .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
/* no motion, no video: the poster frame still shows */
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}}
.loop-cap{margin-top:34px;font-size:.82rem;color:rgba(255,255,255,.72)}