/* Service pages: builds on site.css tokens. */
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ash);text-transform:uppercase}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--bone)}
.crumbs span{color:var(--bone)}

.svc-hero{border-bottom:1px solid var(--rule)}
.svc-hero .wrap{padding-block:clamp(28px,4vw,48px) clamp(56px,8vw,112px);display:grid;gap:clamp(24px,3vw,40px)}
.svc-tabs{display:flex;gap:0;border:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.svc-tabs::-webkit-scrollbar{display:none}
.svc-tab{flex:1 0 auto;display:flex;align-items:center;gap:10px;padding:12px 16px;text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);white-space:nowrap;transition:background .2s,color .2s}
.svc-tab+.svc-tab{border-left:1px solid var(--rule)}
.svc-tab span{color:var(--blue-lite);font-size:11px}
.svc-tab:hover{color:var(--bone);background:rgba(255,255,255,.03)}
.svc-tab.on{background:var(--blue);color:#fff}
.svc-tab.on span{color:#fff;opacity:.8}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.svc-copy{display:grid;gap:24px;container-type:inline-size;min-width:0}
.svc-copy h1{font-size:clamp(28px,10.5cqi,128px)}
.svc-copy .ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.svc-hero-grid{grid-template-columns:1fr}.svc-hero-grid .frame{order:-1}}

.why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.why .fit{display:grid;gap:22px}
.why-lead{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(30px,7.4cqi,60px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.why-body{display:grid;gap:32px;color:var(--ash);font-size:18px;padding-top:44px}
.why-body>p{margin:0}
.approach{border-left:3px solid var(--blue);padding-left:22px;display:grid;gap:10px}
.approach p{margin:0;color:var(--bone)}
@media (max-width:900px){.why{grid-template-columns:1fr}.why-body{padding-top:0}}

/* capabilities as a patch bay */
.patch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.jack{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:14px;padding:22px 20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);min-width:0}
.lamp{width:7px;height:7px;border-radius:50%;background:#1d3a66;transition:background .08s,box-shadow .08s}
.lamp.hit{background:var(--blue-lite);box-shadow:0 0 10px var(--blue-lite)}
.socket{width:26px;height:26px;border-radius:50%;border:2px solid #3a3a42;background:radial-gradient(circle,#000 0 5px,#202026 6px);flex:none}
.jl{font-weight:700;font-stretch:108%;text-transform:uppercase;font-size:clamp(14px,1.15vw,16px);letter-spacing:.01em;line-height:1.2;overflow-wrap:anywhere}
.jack:hover .socket{border-color:var(--blue-lite)}
@media (max-width:1000px){.patch{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.patch{grid-template-columns:1fr}}

/* challenges -> solutions */
.signal{border-top:1px solid var(--rule)}
.signal-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center;padding-block:24px;border-bottom:1px solid var(--rule)}
.signal-row p{margin:0;display:grid;gap:8px;font-size:clamp(16px,1.4vw,19px)}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.noise{color:var(--ash)}
.noise .tag{color:#7a7a84;display:flex;align-items:center;gap:8px}
.noise .tag::before{content:"";width:22px;height:10px;background:repeating-linear-gradient(90deg,#55555e 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,transparent 0 2px,#000 2px 3px)}
.clear{color:var(--bone);font-weight:600}
.clear .tag{color:var(--blue-lite);display:flex;align-items:center;gap:8px;font-weight:400}
.clear .tag::before{content:"";width:22px;height:2px;background:var(--blue-lite)}
.signal-arrow{width:40px;height:40px;border:1px solid var(--rule);border-radius:50%;display:grid;place-items:center;color:var(--blue-lite);transition:background .25s}
.signal-arrow svg{width:14px;height:14px;transform:rotate(45deg)}
.signal-row:hover .signal-arrow{background:var(--blue);color:#fff;border-color:var(--blue)}
@media (max-width:760px){.signal-row{grid-template-columns:1fr}.signal-arrow{transform:rotate(90deg)}}

.arch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.arch .fit{display:grid;gap:20px}
#arch-title{font-size:clamp(34px,12cqi,88px)}
.arch-body{display:grid;gap:24px;justify-items:start}
@media (max-width:900px){.arch{grid-template-columns:1fr}}

.related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:clamp(56px,7vw,96px)}
.rel{position:relative;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:20px;align-items:center;border:1px solid var(--rule);padding:12px;text-decoration:none;transition:border-color .25s,background .25s}
.rel:hover{border-color:var(--blue);background:rgba(11,107,242,.06)}
.rel-media{aspect-ratio:16/9;overflow:hidden;background:#000;grid-row:span 2}
.rel-media img{width:100%;height:100%;object-fit:cover;display:block}
.rel-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-lite);align-self:end}
.rel-t{font-weight:800;font-stretch:110%;text-transform:uppercase;font-size:clamp(17px,1.6vw,22px);line-height:1.05;align-self:start;grid-column:2}
.rel>svg{width:16px;height:16px;grid-row:1/3;grid-column:3}
@media (max-width:900px){.related{grid-template-columns:1fr}}
@media (max-width:480px){.rel{grid-template-columns:110px minmax(0,1fr) auto}}
#contact .contact-grid{margin-top:0}
/* hero loop: crop to the subject (the stills keep their left third dark for headline overlays) */
.svc-hero-grid .loop{aspect-ratio:4/3}
.svc-hero-grid .loop video{object-position:72% 50%}
.rel-t{overflow-wrap:anywhere;min-width:0}
@media (max-width:480px){.rel-t{font-size:15px}.rel{gap:12px}}
.svc-hero .wrap>*{min-width:0}
#contact .fit #contact-title{font-size:clamp(26px,10.4cqi,120px)}

/* /services landing */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.svc-card{display:grid;align-content:start;border:1px solid var(--rule);background:var(--plate);text-decoration:none;transition:border-color .25s;min-width:0}
.svc-card:hover{border-color:var(--blue)}
.svc-card:hover .svc-card-t{color:var(--blue-lite)}
.svc-card-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000}
.svc-card-media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.svc-card:hover .svc-card-media img{transform:scale(1.04)}
.svc-card-body{display:grid;gap:12px;padding:20px}
.svc-card-t{font-weight:800;font-stretch:110%;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(20px,1.8vw,26px);line-height:1.02;transition:color .2s;overflow-wrap:anywhere}
.svc-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.svc-card-tags span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-lite);border:1px solid #1d3a66;padding:4px 7px}
.svc-card .more{justify-self:start;margin-top:4px}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr}}