/* v56 (1 Nov): one system for every page.
   - One accent: orange on dark. Cream sections use ink (dark) buttons and dark-orange marks. No green anywhere (V: "the green ... doesn't look good"; Shield runs one accent, neutral buttons on light).
   - Buttons (Shield pattern): four corner brackets on every button; on hover the brackets snap onto the edge, the fill goes solid, the arrow moves.
   - Shared components: [ BRACKET ] labels, media cards (live), featured case, media/text splits. */

/* ---- colour: undo the green case/pilot scheme ---- */
.tile,.ch,.ba,.cs-green{--acc:#E07829;--acc2:#EE8B3F;--acc-hi:#E07829;--org:#E07829;--bar:#3A2213;--chart:#E07829}
.light .tile,.light .ch,.light .ba,.light.cs-green,.light{--acc:#16181C;--acc2:#2A2D33;--acc-hi:#B85E1A;--org:#B85E1A;--bar:#EED8C6;--chart:#B85E1A}
.cs-green .btn:not(.ghost){color:#0e0e0e}

/* ---- buttons ---- */
.btn{position:relative;overflow:visible;--br:#E07829;transition:background-color .15s cubic-bezier(.4,0,.2,1),color .15s,border-color .15s}
.btn>span{display:inline-block;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.btn:hover>span{transform:translateX(4px)}
.btn::after{content:none!important}
.btn::before{content:""!important;position:absolute;inset:-6px;width:auto!important;height:auto!important;border:0!important;pointer-events:none;--t:9px;--w:1.5px;
 transition:inset .2s cubic-bezier(.4,0,.2,1),opacity .2s;
 background:
  linear-gradient(var(--br),var(--br)) top left/var(--t) var(--w) no-repeat,
  linear-gradient(var(--br),var(--br)) top left/var(--w) var(--t) no-repeat,
  linear-gradient(var(--br),var(--br)) top right/var(--t) var(--w) no-repeat,
  linear-gradient(var(--br),var(--br)) top right/var(--w) var(--t) no-repeat,
  linear-gradient(var(--br),var(--br)) bottom left/var(--t) var(--w) no-repeat,
  linear-gradient(var(--br),var(--br)) bottom left/var(--w) var(--t) no-repeat,
  linear-gradient(var(--br),var(--br)) bottom right/var(--t) var(--w) no-repeat,
  linear-gradient(var(--br),var(--br)) bottom right/var(--w) var(--t) no-repeat!important}
.btn:hover::before{inset:-1px}
/* primary on dark: solid orange -> cream on hover */
.btn:not(.ghost){background:#E07829;border-color:#E07829;color:#0e0e0e;box-shadow:none}
.btn:not(.ghost):hover{background:#EDEBE4;border-color:#EDEBE4;color:#0e0e0e;--br:#EDEBE4}
/* ghost on dark: tinted -> orange fill */
.btn.ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);color:#EDEBE4;--br:rgba(237,235,228,.55)}
.btn.ghost:hover{background:#E07829;border-color:#E07829;color:#0e0e0e;--br:#E07829}
/* on cream: ink buttons -> orange on hover */
.light .btn:not(.ghost),.zr .btn:not(.ghost),.zr.light .btn{background:#16181C;border-color:#16181C;color:#EDEBE4;--br:#16181C}
.light .btn:not(.ghost):hover,.zr .btn:not(.ghost):hover{background:#E07829;border-color:#E07829;color:#0e0e0e;--br:#E07829}
.light .btn.ghost{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.2);color:#16181C;--br:rgba(22,24,28,.6)}
.light .btn.ghost:hover{background:#16181C;border-color:#16181C;color:#EDEBE4;--br:#16181C}
/* nav: HUD tint -> solid */
nav.top .btn{background:rgba(224,120,41,.12)!important;border:1px solid rgba(224,120,41,.5)!important;color:#EDEBE4!important;--br:#E07829}
nav.top .btn::before{inset:-3px;--t:6px;--w:1px}
nav.top .btn:hover{background:#E07829!important;border-color:#E07829!important;color:#0e0e0e!important}
nav.top .btn:hover::before{inset:0}
nav.top .links a,nav.top .co{transition:color .15s}
nav.top .links a:hover,nav.top .co:hover{color:#E07829}

/* ---- labels ---- */
.br{color:var(--acc-hi);display:inline-block}
.head.v56 .br{margin-bottom:32px}
.head.v56 h1{max-width:18ch}

/* ---- shared section head ---- */
.sh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.sh-head h2{margin:0}

/* ---- featured case ---- */
.sh-feat{display:grid;grid-template-columns:1fr 1.7fr;border:1px solid var(--line2);background:#F4F2EC;color:inherit;text-decoration:none;margin-bottom:16px;transition:border-color .2s}
.sh-feat:hover{border-color:var(--ink)}
.sh-feat-l{padding:40px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--line)}
.sh-feat-l b{font:500 clamp(64px,6vw,104px)/1 var(--fd);letter-spacing:-.04em;margin-top:auto}
.sh-feat-l b i{font-size:.24em;font-style:normal;color:var(--acc-hi);margin-left:6px}
.sh-feat-l .go{margin-top:12px}
.sh-feat-l .go span{display:inline-block;transition:transform .2s}
.sh-feat:hover .go{color:var(--acc-hi)}
.sh-feat:hover .go span{transform:translateX(4px)}
.sh-feat-r{padding:28px}
.sh-feat-r svg{width:100%;height:auto;display:block}
.sh-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sh-feat.half{grid-template-columns:1fr;margin-bottom:16px}
.sh-feat.half .sh-feat-l{border-right:0;border-bottom:1px solid var(--line);padding:32px}
.sh-feat.half .sh-feat-l b{font-size:clamp(56px,5vw,84px)}
.sh-small{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sh-small.two{grid-template-columns:repeat(2,1fr)}

/* ---- service media cards ---- */
.sh-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:72px}
.sh-cards.c4{grid-template-columns:repeat(4,1fr)}
.sh-card{display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none;border:1px solid var(--line);padding:0 0 26px;background:#111214;transition:border-color .2s}
.sh-card:hover{border-color:rgba(224,120,41,.6)}
.sh-card>.mono,.sh-card h3,.sh-card p,.sh-card .chips{margin-left:22px;margin-right:22px}
.sh-card>.br{margin-top:12px}
.sh-card h3{font-size:26px;margin:0 22px}
.sh-card p{color:var(--dim);margin:0 22px}
.sh-card .chips{margin-top:4px;flex-direction:column;align-items:flex-start;gap:8px}
.sh-card .lm{margin-top:auto;padding-top:14px;color:var(--ink)}
.sh-card .lm span{display:inline-block;transition:transform .2s}
.sh-card:hover .lm{color:var(--acc-hi)}
.sh-card:hover .lm span{transform:translateX(4px)}
.clip{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0e0e0e;border-bottom:1px solid var(--line)}
.clip video{position:absolute;width:166.7%;height:auto;left:-60%;top:-4%;display:block}
.clip.swarm canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---- service page: film + X-BAT splits ---- */
.xfilm{padding-top:72px}
.xs{padding:120px 0}
.xs .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center}
.xs.flip .xs-m{order:2}
.xs-m .clip{border:1px solid var(--line);aspect-ratio:4/3}
.xs-t{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.xs-t h2{margin:0;font-size:clamp(48px,5vw,80px);letter-spacing:-.035em}
.xs-t .lead{font-size:clamp(20px,1.6vw,24px);color:var(--ink);max-width:34ch}
.xs-t .what{color:var(--dim);font-size:17px;max-width:44ch}
.xs-t .meas{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.xs-t .meas .mono{color:var(--dim)}
.xs-t .hand{color:var(--acc-hi)}
.xs-t .hy-steps{margin:0;padding-left:28px}

/* ---- pilot ---- */
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pt-grid.four{grid-template-columns:repeat(4,1fr)}
.pt-grid>div{padding:32px 32px 40px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.pt-grid>div+div{padding-left:32px;border-left:1px solid var(--line)}
.pt-grid:not(.four)>div:nth-child(3n+1){padding-left:0;border-left:0}
.pt-grid p{font-size:18px;line-height:1.5;color:var(--ink)}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps4>div{border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:14px;background:#111214;min-height:240px}
.steps4 h3{font-size:26px;margin:0}
.steps4 p{color:var(--dim)}

/* ---- dark-page charts readable ---- */
.ch .chart svg .bars line{stroke:var(--bar)}

@media(max-width:1100px){.sh-cards.c4{grid-template-columns:repeat(2,1fr)}.steps4{grid-template-columns:repeat(2,1fr)}.pt-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.sh-feat,.sh-two,.xs .wrap{grid-template-columns:1fr}.sh-small,.sh-small.two,.sh-cards,.sh-cards.c4,.steps4,.pt-grid,.pt-grid.four{grid-template-columns:1fr}
 .sh-feat-l{border-right:0;border-bottom:1px solid var(--line)}.xs.flip .xs-m{order:0}.xs{padding:80px 0}.xs .wrap{gap:40px}
 .pt-grid>div,.pt-grid>div+div{padding:24px 0;border-left:0}.sh-head{flex-direction:column;align-items:flex-start}}
.clip{background:#0e0e0e center/cover no-repeat}
.clip video{opacity:0;transition:opacity .4s}
.clip video.on{opacity:1}
.clip video{width:192%;left:-77%;top:-7%}
/* v56b: judge fixes */
.ch,.tile{--bar:#5A3418}
.light .tile,.light .ch{--bar:#EED8C6}
.ch .chart text{fill:rgba(237,235,228,.6)}
.ba b{color:var(--ink)!important}
.head.v56 .hcta{margin-top:40px}
.sh-small .tile h3{font-size:clamp(20px,1.6vw,24px)}
.cases-page .sh-feat-l b{margin-top:24px}
/* v56c: Shield header on every page (blind judges 3/3: 8,8,7 vs 6,6,6); one component set */
nav.top .wrap{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
nav.top .logo{grid-column:1;grid-row:1;justify-self:start;position:static!important;transform:none!important;left:auto!important}
nav.top .links{grid-column:2;grid-row:1;justify-self:center;gap:44px}
nav.top .right{grid-column:3;grid-row:1;justify-self:end}
@media(max-width:900px){nav.top .wrap{grid-template-columns:1fr auto}nav.top .right{grid-column:2}}
.sh-card,.steps4>div{background:transparent}
.eyebrow::before{content:"[ "!important;width:auto!important;height:auto!important;background:none!important}
.eyebrow::after{content:" ]"}
.eyebrow{color:var(--acc-hi)}
.tbl th{font:500 12px/1.3 Inter,system-ui,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase}
.light .crew .boxes span,.light .crew .ours div{color:var(--ink)}
@media(max-width:600px){nav.top .right .btn{display:none}nav.top .wrap{grid-template-columns:1fr auto}}
@media(max-width:900px){.logos-swap>span{min-width:0}.logos-swap img{max-width:78%!important;height:auto}}
/* v57 (V): swarm = wide card under the three; clips zoomed on distinct elements, slow, one at a time; cream accents green */
.sh-cards.seq{grid-template-columns:repeat(3,1fr)}
.sh-card.wide{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;padding:0;gap:0}
.sh-card.wide .clip{aspect-ratio:auto;min-height:340px;border-bottom:0;border-right:1px solid var(--line)}
.sh-card.wide .sw-t{display:flex;flex-direction:column;gap:12px;padding:28px 0 26px}
.sh-card.wide .sw-t>*{margin-left:28px;margin-right:28px}
.clip{aspect-ratio:16/10}
.clip video{width:auto;left:auto;top:auto}
.sh-cards.seq .clip:not(.act) video{opacity:.55}
.sh-cards.seq .clip.act{outline:1px solid rgba(224,120,41,.45);outline-offset:-1px}
@media(max-width:900px){.sh-cards.seq{grid-template-columns:1fr}.sh-card.wide{grid-template-columns:1fr}.sh-card.wide .clip{min-height:220px;border-right:0;border-bottom:1px solid var(--line)}}
/* cream = green accent (V 1 Nov, second time: "everything with the white background ... the orange should be green") */
.light,.light .tile,.light .ch,.light .ba,.light.cs-green{--acc:#193A29;--acc2:#234F38;--acc-hi:#193A29;--org:#193A29;--bar:#CFDDD3;--chart:#193A29}
.light .btn:not(.ghost),.zr .btn:not(.ghost),.zr.light .btn{background:#193A29!important;border-color:#193A29!important;color:#EDEBE4!important;--br:#193A29}
.light .btn:not(.ghost):hover,.zr .btn:not(.ghost):hover{background:#234F38!important;border-color:#234F38!important;--br:#234F38}
.light .btn.ghost{--br:#193A29}
.light .btn.ghost:hover{background:#193A29;border-color:#193A29;color:#EDEBE4;--br:#193A29}
.filmband .sh-cards{margin-bottom:0}
/* v57b: active card highlighted; inactive cards paused and dimmed */
.sh-cards.seq .clip.act{outline:0}
.sh-cards.seq .sh-card{transition:border-color .3s}
.sh-cards.seq .sh-card .clip video,.sh-cards.seq .sh-card .clip canvas{transition:opacity .4s}
.sh-cards.seq .sh-card:not(.act) .clip video.on{opacity:.45}
.sh-cards.seq .sh-card:not(.act) .clip canvas{opacity:.5}
.sh-cards.seq .sh-card.act{border-color:rgba(224,120,41,.7)}
.sh-cards.seq .sh-card.act h3{color:#E07829}
/* v57c (V: "this can never be a pause state"): inactive cards show their clean still, never a paused transition frame */
.sh-cards.seq .sh-card:not(.act) .clip video,.sh-cards.seq .sh-card:not(.act) .clip video.on{opacity:0!important;transition:none!important}
.sh-cards.seq .sh-card.act .clip video.on{opacity:1!important;transition:opacity .35s}
.sh-cards.seq .sh-card:not(.act) .clip{filter:brightness(.65);transition:filter .35s}
/* v57fx: live-drawn stage animations (deck R14 Surface/Capture/Convert), 4:3, scale with the card (cqw) */
.clip.fx{aspect-ratio:4/3;container-type:inline-size;background:#0c0c0d;filter:none!important}
.sh-card.wide .clip.fx{aspect-ratio:auto}
.fx>*{position:absolute}
.fx .ln{inset:0;width:100%;height:100%}
.fx .ln path{fill:none;stroke:rgba(237,235,228,.22);stroke-width:.35;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.fx .ln path{stroke-width:1}
.fx .ln path.or{stroke:#E07829}
.fx .ic{border:1px solid rgba(237,235,228,.22);border-radius:50%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;opacity:0}
.fx .ic img{width:52%;height:auto;filter:grayscale(1) brightness(0) invert(.9)}
.fx .bx{border:1px solid rgba(237,235,228,.18);display:flex;align-items:center;padding:0 3cqw;font:500 3.3cqw/1.1 Inter,sans-serif;color:#C9C5BA;opacity:0;transition:border-color .3s,color .3s}
.fx .bx.hit{border-color:rgba(224,120,41,.55);color:#EDEBE4}
.fx .mk{aspect-ratio:1;background:#E07829;transform:scale(0)}
.fx .cap{font-size:2.9cqw!important;color:#E07829;display:flex;align-items:center;gap:1.6cqw;opacity:0}
.fx .cap b,.fx .tag b{width:1.8cqw;height:1.8cqw;background:#E07829;display:inline-block}
.fx .qb{border:1px solid rgba(237,235,228,.2);display:flex;align-items:center;gap:2cqw;padding:0 3cqw;font:400 3.4cqw/1 Inter,sans-serif;color:#EDEBE4;background:#141416}
.fx .qb img{width:3.6cqw;filter:grayscale(1) brightness(0) invert(.9)}
.fx .caret{width:1.5px;height:4cqw;background:#E07829;position:static;display:inline-block;margin-left:-1cqw}
.fx .lab{font-size:2.5cqw!important;color:#8E9198;opacity:0}
.fx .row{border:1px solid rgba(237,235,228,.15);display:flex;align-items:center;justify-content:space-between;padding:0 3cqw;font:400 3.2cqw/1 Inter,sans-serif;color:#C9C5BA;opacity:0;transition:border-color .3s}
.fx .row.hit{border-color:rgba(224,120,41,.45)}
.fx .ck{color:#E07829;font-size:3.6cqw;transform:scale(0)}
.fx .ans{border:1px solid rgba(237,235,228,.2);background:#141416;display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:0 3cqw;opacity:0}
.fx .at{font:500 3.4cqw/1.2 Inter,sans-serif;color:#EDEBE4}
.fx .pill{font-size:2.5cqw!important;color:#E07829;border:1px solid rgba(224,120,41,.6);border-radius:99px;padding:1.2cqw 2.2cqw;white-space:nowrap;transition:background .2s,color .2s}
.fx .pill.hit{background:#E07829;color:#0e0e0e}
.fx .cw{width:3.4cqw;opacity:0;transform-origin:0 0;z-index:3}
.fx .cw svg{width:100%;height:auto;display:block}
.fx .pg,.fx .fm{border:1px solid rgba(237,235,228,.18);background:#141416;padding:3cqw;display:flex;flex-direction:column;gap:1.6cqw;opacity:0}
.fx .url{font-size:2.2cqw!important;color:#8E9198}
.fx .h{font:500 3.2cqw/1.2 Inter,sans-serif;color:#EDEBE4}
.fx .pr{display:flex;align-items:center;gap:2cqw}
.fx .pr span{font-size:2.1cqw!important;color:#8E9198;width:7cqw}
.fx .pr i{flex:1;height:1px;background:rgba(237,235,228,.35);transform-origin:left;transform:scaleX(0)}
.fx .ib,.fx .sb{margin-top:auto;align-self:flex-start;font:600 2.6cqw/1 Inter,sans-serif;letter-spacing:.06em;padding:1.6cqw 2.6cqw;border:1px solid #E07829;color:#E07829;opacity:0;transition:background .15s,color .15s}
.fx .sb{opacity:1;align-self:stretch;text-align:center}
.fx .ib.hit,.fx .sb.hit{background:#E07829;color:#0e0e0e}
.fx .fl{font-size:2cqw!important;color:#8E9198;margin-bottom:-.8cqw}
.fx .fi{border:1px solid rgba(237,235,228,.15);height:5cqw;display:flex;align-items:center;padding:0 1.6cqw;font:400 2.4cqw/1 Inter,sans-serif;color:#EDEBE4;overflow:hidden;white-space:nowrap}
.fx .tag{font-size:2.6cqw!important;color:#E07829;border:1px solid rgba(224,120,41,.6);padding:1.2cqw 2.2cqw;display:flex;align-items:center;gap:1.6cqw;opacity:0;transform-origin:left}
.sh-cards.seq .sh-card:not(.act) .clip.fx{filter:none}
.sh-cards.seq .sh-card:not(.act) .clip.fx>*{opacity:.5}
.fx .ln path{vector-effect:none;stroke-width:.32}
.sh-cards.seq .sh-card:not(.act) .clip.fx{filter:brightness(.55)!important;transition:filter .35s}
.sh-cards.seq .sh-card.act .clip.fx{filter:none!important}
.sh-cards.seq .sh-card:not(.act) .clip.fx>*{opacity:revert-layer}
/* v58: background grain (graphite-style, own texture; blind judges 3/3 over dot field and light/dark zones) */
.bgfx{position:fixed;inset:0;pointer-events:none;z-index:50;mix-blend-mode:screen;background:url(bg-grain.png);opacity:.06}
/* v58: story animations: caption strip + richer elements */
.fx .stp{display:flex;align-items:center;gap:2cqw;padding:0 3cqw;border-top:1px solid rgba(237,235,228,.1);background:#0e0e0f}
.fx .stp .sd{display:flex;gap:.9cqw}
.fx .stp .sd i{width:1.4cqw;height:1.4cqw;background:rgba(237,235,228,.18);display:block;transition:background .3s}
.fx .stp .sd i.on{background:#E07829}
.fx .stp .sn{font-size:2.4cqw!important;color:#E07829}
.fx .stp .tx{font:500 3cqw/1.2 Inter,sans-serif;color:#EDEBE4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx .src{border:1px solid rgba(237,235,228,.16);background:#121214;padding:1.6cqw 2.2cqw;display:flex;flex-direction:column;gap:1cqw;overflow:hidden;opacity:0;transition:border-color .3s}
.fx .src.hit{border-color:rgba(224,120,41,.55)}
.fx .src .st{font-size:2.2cqw!important;color:#8E9198}
.fx .src i.g1,.fx .src i.g2{height:1px;background:rgba(237,235,228,.25);display:block}
.fx .src i.g1{width:80%}.fx .src i.g2{width:55%}
.fx .src .yc{position:absolute;right:2cqw;bottom:1.4cqw;font:600 2.3cqw/1 Inter,sans-serif;color:#0e0e0e;background:#E07829;padding:.8cqw 1.4cqw;transform:scale(0);transform-origin:right bottom}
.fx .src .scan{position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(237,235,228,.12),transparent);opacity:0}
.fx .ans{border:1px solid rgba(237,235,228,.2);background:#141416;display:flex;align-items:center;gap:2cqw;padding:0 3cqw;opacity:0}
.fx .ans img{width:3.4cqw;filter:grayscale(1) brightness(0) invert(.9)}
.fx .ans .at{flex:1}
.fx .ans .at b{color:#E07829;font-weight:600}
.fx .refs{display:flex;gap:.8cqw}
.fx .refs sup{font:600 2cqw/1 Inter,sans-serif;color:#E07829;border:1px solid rgba(224,120,41,.6);padding:.5cqw .8cqw;transform:scale(0)}
.fx .row em{font:normal 500 2.1cqw/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#E07829;margin-left:auto;margin-right:2cqw;opacity:0}
.fx .br{border:1px solid rgba(224,120,41,.5);background:#141416;padding:2cqw;display:flex;flex-direction:column;gap:1.6cqw;opacity:0}
.fx .br .bu{font-size:2.1cqw!important;color:#8E9198;border-bottom:1px solid rgba(237,235,228,.12);padding-bottom:1.2cqw}
.fx .br i{height:1.6cqw;background:rgba(237,235,228,.3);display:block;transform-origin:left;transform:scaleX(0)}
.fx .br i.b1{width:85%}.fx .br i.b2{width:60%;height:1px}.fx .br i.b3{width:70%;height:1px}
.fx .br .vis{margin-top:auto;font-size:2.4cqw!important;color:#E07829;opacity:0}
.fx .pr{display:flex;align-items:center;gap:2cqw;border-top:1px solid rgba(237,235,228,.1);padding-top:1.2cqw}
.fx .pr em{font:normal 400 2.4cqw/1.2 Inter,sans-serif;color:#C9C5BA;opacity:0;flex:1}
.fx .pr .ck{color:#E07829;font-size:3cqw;transform:scale(0)}
.fx .ib2{border:1px solid rgba(237,235,228,.16);background:#121214;display:flex;align-items:center;gap:2cqw;padding:0 2cqw;opacity:0}
.fx .ib2 .il{font-size:2cqw!important;color:#8E9198;white-space:nowrap}
.fx .qi{display:flex;align-items:center;gap:1.4cqw;flex-wrap:wrap;opacity:0}
.fx .qi b{width:1.6cqw;height:1.6cqw;background:#E07829}
.fx .qi span{font:600 2.4cqw/1 Inter,sans-serif;color:#E07829;letter-spacing:.04em;text-transform:uppercase}
.fx .qi em{font:normal 400 2.2cqw/1 Inter,sans-serif;color:#C9C5BA;flex-basis:100%;margin-left:3cqw}
.fx .cw{width:3.4cqw;opacity:0;transform-origin:0 0;z-index:3}
.fx .ln path{stroke-width:.3}
.clip.fx.swarm{position:relative}
.clip.fx.swarm canvas{position:absolute;inset:0 0 15% 0;width:100%;height:85%}
.fx .stp.sw{position:absolute;left:0;right:0;bottom:0;height:15%}
.sh-card.wide .clip.fx{min-height:380px;container-type:size}
.sh-card.wide .fx .stp .tx{font-size:16px}
.sh-card.wide .fx .stp .sn{font-size:12px!important}
.sh-card.wide .fx .stp .sd i{width:7px;height:7px}
.sh-card.wide .fx .stp{gap:12px;padding:0 24px}
/* v59: stages drawn on canvas like the swarm (V: DOM mockups "rough as fuck") */
.clip.fx canvas{position:absolute;left:0;top:0;width:100%;height:86.6%}
.clip.fx>.stp{top:86.6%!important;height:13.4%!important}

/* v59 grain split (V 1 Nov: "elements slightly too intense"): page background keeps its grain (.04 over + .025 under ≈ the old .06),
   while cards, media and cream sections sit over the under-layer and only get the .04 top layer (~2/3 strength). */
body{background-color:transparent}
.bgfx{opacity:.04}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(bg-grain.png);opacity:.025;mix-blend-mode:screen}

/* v60 hero (V 1 Nov): T mark's right edge on the nav button's right edge (content edge); the T is drawn with ~19.3% side padding inside its canvas.
   Surface/Capture/Convert 1.2x with a little more line air. */
@media(min-width:901px){.hero .mark .twire{left:auto;right:0;transform:translate(19.3%,-52%)}}
.hero .svc a{font-size:min(92.3px,5.93vw);line-height:1.04}
@media (max-width:900px){.hero .svc a{font-size:clamp(46px,12.6vw,77px)}}

/* v60 home service rows (V 1 Nov): top to bottom, numbered rail, the line fills with scroll; rows never reveal on scroll */
.sv-rows{display:flex;flex-direction:column}
.sv-row{display:grid;grid-template-columns:40px minmax(0,.8fr) minmax(0,1.25fr);column-gap:48px;color:inherit;text-decoration:none;align-items:start}
.sv-row+.sv-row{margin-top:0}
.sv-rail{position:relative;align-self:stretch}
.sv-node{width:40px;height:40px;border:1px solid var(--line2);background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;color:var(--dim);font-size:12px;transition:border-color .3s,color .3s}
.sv-row.on .sv-node{border-color:var(--acc);color:var(--ink)}
.sv-track{position:absolute;left:20px;top:40px;bottom:0;width:1px;background:var(--line)}
.sv-track i{position:absolute;inset:0;background:var(--acc);transform-origin:top;transform:scaleY(var(--p,0))}
.sv-row:last-child .sv-track{display:none}
.sv-t{padding:2px 0 112px;display:flex;flex-direction:column;gap:18px}
.sv-row:last-child .sv-t{padding-bottom:0}
.sv-t h3{font-size:clamp(36px,3.6vw,52px);line-height:1;letter-spacing:-.02em;margin-top:-2px;transition:color .3s}
.sv-t p{font-size:clamp(18px,1.4vw,21px);line-height:1.45;max-width:30ch;color:var(--ink)}
.sv-t .lm{margin-top:10px;color:var(--ink)}
.sv-t .lm span{display:inline-block;transition:transform .2s}
.sv-row:hover .sv-t .lm span{transform:translateX(4px)}
.sv-m{padding-bottom:112px}
.sv-row:last-child .sv-m{padding-bottom:0}
.sv-m .clip.fx{border:1px solid var(--line);transition:border-color .3s}
.sv-row.act .sv-m .clip.fx{border-color:rgba(224,120,41,.6)}
.sv-row.act .sv-t h3{color:var(--acc)}
@media(max-width:900px){.sv-row{grid-template-columns:36px minmax(0,1fr);column-gap:20px}
 .sv-node{width:36px;height:36px}.sv-track{left:18px;top:36px}
 .sv-t{padding-bottom:24px}.sv-m{grid-column:2;padding-bottom:72px}}

/* v60 live media: one fixed drawing scale (480x300 logical), no caption strip */
.clip.fx{aspect-ratio:16/10!important}
.clip.fx canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.clip.fx>.stp,.clip.fx .stp{display:none!important}
.clip.fx canvas,.clip.fx.swarm canvas{inset:0!important}

/* v60 pages (V 1 Nov) */
.light .head{background-image:none}
.pt-grid.two{grid-template-columns:repeat(2,1fr)}
.pt-grid.two>div:nth-child(2n+1){padding-left:0;border-left:0}
.pt-grid.two>div:nth-child(2n){padding-left:32px;border-left:1px solid var(--line)}
/* pilot */
.pu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.pu-c{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);padding:28px;color:inherit;text-decoration:none;transition:border-color .2s}
.pu-c:hover{border-color:var(--line2)}
.pu-c b{font:500 clamp(40px,4vw,56px)/1 var(--fd);letter-spacing:-.03em;margin-top:8px}
.pu-c>.mono{color:var(--dim)}
.pu-c svg{width:100%;height:auto;margin-top:12px}
.zr2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.zr2 h2{margin:20px 0 20px}
.zr2 .lede{margin:0;max-width:40ch}
.zr-ex .small{margin:20px 0 12px}
.zr-ex .tbl td{padding:14px 16px 14px 0;font-size:16px}
.zr-ex .tbl td:first-child{font-size:18px}
.zr-ex .tbl th{padding:12px 16px 12px 0}
/* cases: cream page, green accent */
.cs-page{background:var(--bg)}
.cs-page .head{border-bottom:0;padding-bottom:40px}
.cs-page section{border-top:0}
.cs-page .head p{color:var(--dim)}
.cs-story{display:flex;flex-direction:column;gap:40px;border-top:1px solid var(--line);padding-top:48px}
.cs-story h2{font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.025em;margin-top:-16px}
.kn{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kn>div{display:flex;flex-direction:column;gap:14px;padding:28px 28px 28px 0}
.kn>div+div{padding-left:28px;border-left:1px solid var(--line)}
.kn .mono{color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.kn b{font:500 clamp(34px,3.4vw,48px)/1 var(--fd);letter-spacing:-.03em;color:var(--ink)}
.kn b i{font-style:normal;color:var(--acc);font-weight:400}
.kn>div:last-child b{color:var(--acc)}
.cs-chart svg{width:100%;height:auto;display:block}
.cs-ex{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.cs-ex .mono,.cs-stack .mono,.cs-sumbox .mono{display:block;color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.cs-ex p{font-size:18px;line-height:1.55}
.cs-sum{font:500 clamp(22px,2vw,28px)/1.35 var(--fd);letter-spacing:-.01em;max-width:44ch;color:var(--ink)}
.cs-story>.btn{align-self:flex-start}
.cs-more .sh-head{margin-bottom:8px}
.cs-rows{border-top:1px solid var(--line)}
.cs-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr) 110px 120px;gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.cs-row h3{font-size:24px;letter-spacing:-.015em}
.cs-row b{font:500 40px/1 var(--fd);letter-spacing:-.03em;display:flex;flex-direction:column;gap:8px}
.cs-row b .mono{font-size:10.5px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;font-weight:400}
.cs-sp svg{width:100%;height:44px;display:block}
.cs-row .dim{color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cs-row .go{justify-self:end;color:var(--ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cs-row .go span{display:inline-block;transition:transform .2s}
.cs-row:hover .go span{transform:translateX(4px)}
.cs-row:hover h3{color:var(--acc)}
.cs-head .back{display:inline-block;margin-bottom:40px;color:var(--dim)}
.cs-stack{display:flex;flex-direction:column;gap:64px;max-width:860px}
.cs-stack .pairs{display:flex;flex-direction:column;gap:28px}
.cs-stack .pairs h3{font-size:20px;line-height:1.35;margin-bottom:8px}
.cs-stack .pairs p,.cs-stack .prose{font-size:18px;line-height:1.55}
.cs-sumbox{border-top:1px solid var(--line);padding-top:40px}
/* company */
.arms{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.arm{display:flex;flex-direction:column;gap:18px;padding:40px 40px 48px 0}
.arm+.arm{padding-left:40px;border-left:1px solid var(--line)}
.arm h3{font-size:clamp(32px,3vw,44px);letter-spacing:-.02em;line-height:1}
.arm p{font-size:19px;line-height:1.5;max-width:38ch}
.arm-l{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.fp{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:56px}
.fp .mono{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.fp .mono.acc{color:var(--acc)}
.fp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fp-row span{border:1px solid var(--line2);padding:14px;font:500 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--dim)}
.fp-row.one{grid-template-columns:1fr}
.fp-row.one span{border-color:var(--acc);color:var(--acc)}
ul.dots{list-style:none;display:flex;flex-direction:column;gap:12px}
ul.dots li{position:relative;padding-left:18px;font-size:17px;line-height:1.45}
ul.dots li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--acc)}
@media(max-width:900px){.pu,.zr2,.cs-ex,.arms{grid-template-columns:1fr;gap:32px}.pt-grid.two{grid-template-columns:1fr}.pt-grid.two>div:nth-child(2n){padding-left:0;border-left:0}
 .arm+.arm{padding-left:0;border-left:0;border-top:1px solid var(--line)}.fp-row{grid-template-columns:1fr 1fr}
 .cs-row{grid-template-columns:1fr auto;gap:12px 20px}.cs-row .cs-sp,.cs-row .dim{display:none}.cs-row .go{grid-column:1/-1;justify-self:start}
 .kn>div+div{padding-left:0;border-left:0}.kn>div{border-top:1px solid var(--line)}}
.cs-head .back{display:block;width:max-content}
.wrap.cs-stack{max-width:var(--maxw,1280px)}
.cs-stack>div{max-width:860px}
.cs-chart{max-width:1000px}
.btn.lc{text-transform:none;letter-spacing:.04em}
.cta h2{text-wrap:balance}
.fp-row span{font:500 15px/1.2 var(--fb);letter-spacing:0;text-transform:none;padding:20px 16px;color:var(--ink)}
.fp-row.one span{font-weight:600}
.fp .mono{font-size:12px}

/* v61 nav (V 1 Nov, after shield.ai): hovered or current item = tinted box + orange text + four 6px corner brackets; the current page keeps it */
nav.top .links{gap:8px!important;color:#C9C5BA}
nav.top .links a{padding:14px 14px;letter-spacing:.11em;transition:color .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}
nav.top .links a::before{content:"";position:absolute;inset:-2px;pointer-events:none;opacity:0;transition:opacity .2s;--c:rgba(234,234,234,.9);
 background:
  linear-gradient(var(--c),var(--c)) top left/6px 1px no-repeat,linear-gradient(var(--c),var(--c)) top left/1px 6px no-repeat,
  linear-gradient(var(--c),var(--c)) top right/6px 1px no-repeat,linear-gradient(var(--c),var(--c)) top right/1px 6px no-repeat,
  linear-gradient(var(--c),var(--c)) bottom left/6px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1px 6px no-repeat,
  linear-gradient(var(--c),var(--c)) bottom right/6px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1px 6px no-repeat}
nav.top .links a:hover,nav.top .links a[aria-current]{background:rgba(255,255,255,.1);color:#E07829}
nav.top .links a:hover::before,nav.top .links a[aria-current]::before{opacity:1}

/* v61 cases (V 1 Nov): cases sit on raised cards so they separate from the cream and scan easily; chart spans the card */
.cs-story,.cs-card{background:#F7F5F0;border:1px solid var(--line);padding:clamp(24px,3.4vw,48px)}
.cs-story{border-top:1px solid var(--line)}
.cs-story h2{margin-top:-12px}
.cs-chart,.wrap .cs-chart{max-width:none}
.cs-card .kn{margin-bottom:32px}
.cs-card.cs-stack{gap:48px}
.cs-card.cs-stack>div{max-width:820px}
.cs-rows{border-top:0;display:flex;flex-direction:column;gap:10px}
.cs-row{background:#F7F5F0;border:1px solid var(--line);padding:22px 28px;transition:border-color .2s,background-color .2s}
.cs-row:hover{border-color:var(--line2);background:#FBFAF6}
.cs-more .sh-head{margin-bottom:24px}

/* v61 company full path (V 1 Nov: new design, not the deck's boxes) */
.path{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));row-gap:0;border-top:1px solid var(--line)}
.path>*{padding:28px 0}
.pa-st{display:flex;flex-direction:column;gap:10px;padding-right:24px;border-left:1px solid var(--line);padding-left:20px}
.pa-st .mono{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.pa-st b{font:500 clamp(20px,1.8vw,26px)/1.2 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.pa-lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line);display:flex;align-items:center}
.pa-lab:first-child{border-top:0}
.pa-lab.acc{color:var(--acc)}
.pa-seg,.pa-one{border-top:1px solid var(--line);border-left:1px solid var(--line);display:flex;gap:10px;align-items:center;padding-left:20px;padding-right:20px}
.pa-seg i{flex:1;position:relative;height:28px;display:flex;align-items:flex-end}
.pa-seg i::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line2)}
.pa-seg i::after{content:"";position:absolute;right:0;top:-4px;width:1px;height:10px;background:var(--line2)}
.pa-seg em,.pa-one em{font:400 12px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--dim)}
.pa-one{grid-column:2/5;position:relative;height:auto;padding-top:28px;padding-bottom:28px;flex-direction:column;align-items:stretch;gap:14px}
.pa-one i{display:block;height:2px;background:var(--acc);position:relative}
.pa-one i::before,.pa-one i::after{content:"";position:absolute;top:-4px;width:10px;height:10px;background:var(--acc)}
.pa-one i::before{left:0}.pa-one i::after{right:0}
.pa-one em{color:var(--ink)}
@media(max-width:900px){.path{grid-template-columns:1fr}.pa-st,.pa-seg,.pa-one{border-left:0;padding-left:0}.pa-one{grid-column:auto}.pa-lab{padding-bottom:0}}
.cs-card.cs-stack{max-width:none}
/* v61b: company path readable at a glance */
.pa-seg i{height:34px}
.pa-seg i::before{height:3px;background:#6B6F76}
.pa-seg i::after{height:12px;top:-4.5px;background:#6B6F76}
.pa-seg em{font:500 13px/1 var(--fb);letter-spacing:.02em;text-transform:none;color:#C9C5BA}
.pa-one i{height:3px}
.pa-one em{font:500 15px/1 var(--fb);letter-spacing:0;text-transform:none}
.pa-lab{font-size:12px}
/* v61b: case detail text uses the card width */
.cs-card.cs-stack{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;row-gap:40px}
.cs-card.cs-stack>div{max-width:none}
.cs-card.cs-stack>.cs-sumbox{grid-column:1/-1}
@media(max-width:900px){.cs-card.cs-stack{grid-template-columns:1fr}}

/* v66 swarm (V 1 Nov: "why did you downgrade the matrix"): the deck matrix needs its own wide 16:9 frame at full row width */
.clip.fx.swarm{aspect-ratio:16/9!important}
.sv-row.sw{grid-template-columns:40px minmax(0,1fr)}
.sv-row.sw .sv-t{grid-column:2;padding-bottom:28px}
.sv-row.sw .sv-t p{max-width:52ch}
.sv-row.sw .sv-m{grid-column:2;padding-bottom:0}
.sv-row.sw .sv-rail{grid-row:1/span 2}
#swarm.xs .wrap{grid-template-columns:1fr!important}
#swarm.xs .xs-m{order:2}
@media(max-width:900px){.sv-row.sw .sv-m{grid-column:2}}

/* v67 hero (V 1 Nov): words turn the Talk-to-us orange on hover, no arrow.
   T spans exactly from the cap top of SURFACE to the baseline of CONVERT (Inter metrics: cap .7275em, asc .96875, content 1.2109em; line-height 1.04).
   Block height = 2.08F + .7275F = 2.8075F; the T fills .552 of its canvas -> canvas = 5.086F; its top sits .222 down the canvas -> top = .1558F - 1.129F. */
.hero .svc a:hover{color:#E07829!important}
.hero .svc a::after{content:none!important;display:none!important}
@media(min-width:901px){
 .hero{--F:min(92.3px,5.93vw)}
 .hero .mark .twire{width:calc(var(--F)*5.086)!important;left:auto!important;right:0;top:calc(var(--F)*-0.973)!important;transform:translateX(19.1%)!important}
}
/* v68 (V 1 Nov): 26% more space between the home service rows (112px -> 141px) */
@media(min-width:901px){.sv-t{padding-bottom:141px}.sv-m{padding-bottom:141px}.sv-row:last-child .sv-t{padding-bottom:28px}.sv-row:last-child .sv-m{padding-bottom:0}}
@media(max-width:900px){.sv-m{padding-bottom:91px}.sv-row:last-child .sv-m{padding-bottom:0}}

/* v69 swarm frame thinner (640x324 logical) */
.clip.fx.swarm{aspect-ratio:640/324!important}
.kv .br{color:var(--acc)}
/* v74: rows are divs (Convert carries a real button); title and Learn more are the links */
.sv-t h3 a{color:inherit;text-decoration:none}
.sv-ctas{display:flex;align-items:center;gap:32px;margin-top:10px}
.sv-ctas .lm{margin-top:0}
.sv-ctas .btn{margin:0}
.head .back{display:flex;width:max-content}
.ops>div{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:32px 0;border-top:1px solid var(--line)}
.ops>div:last-child{border-bottom:1px solid var(--line)}
.ops .br{margin:0}
.ops ul.dots{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0}
@media(max-width:820px){.ops>div{grid-template-columns:1fr;gap:16px}.ops ul.dots{grid-template-columns:1fr;gap:12px}}

/* v75: three arms on /company — horizontal cards, buttons pinned to the bottom */
.arms.three{grid-template-columns:repeat(3,1fr)}
.arms.three .arm{min-height:440px}
.arms.three .arm h3{font-size:clamp(26px,2.3vw,36px)}
.arms .arm h3 a{color:inherit;text-decoration:none}
.arms .arm h3 a:hover{color:var(--acc-hi)}
.arms .arm .arm-l{margin-top:auto}
.arms .arm .arm-l .mail{display:inline-flex;align-items:center;gap:8px;font-size:15px;border-bottom:1px solid var(--line2)}
.arms .arm .arm-l .mail:hover{border-color:var(--ink)}
@media(max-width:980px){.arms.three{grid-template-columns:1fr}.arms.three .arm{min-height:0;padding:32px 0}.arms .arm+.arm{padding-left:0;border-left:0;border-top:1px solid var(--line)}}