/* /services/ page layout: ghost-mark hero, principles, gap band, service
   bands, platform bridge. Band + bleeding-frame rules live in bands.css,
   shared with /software/. */
/* ---- hero: the mark as a ghost, bled off the right edge. A services page has
        no product screen to show, so the right column carries the mark itself. ---- */
.hr-mark{grid-column:7/13;position:relative;align-self:stretch;min-height:clamp(15rem,32vh,24rem);overflow:hidden}
.hr-mark::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 62% 45%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 70%);pointer-events:none}
.hr-mark svg{position:absolute;top:50%;left:10%;width:112%;height:auto;transform:translateY(-50%)}
@media(max-width:1024px){.hr-mark{grid-column:1/-1;min-height:11rem;margin-top:1.5rem}.hr-mark svg{left:0;width:78%}}

/* ---- principles: three columns under the hero. The page's differentiator,
        so it sits above everything else. Unnumbered — the index bar below
        already runs 01/02/03 and two numbered triplets read as one list. ---- */
.pri{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);border-top:1px solid var(--rule);padding:0 0 clamp(2.5rem,5vh,4rem)}
.pri>div{padding-top:1.5rem;border-top:1px solid transparent;margin-top:-1px}
.pri h2{font-size:1.25rem;font-weight:500;letter-spacing:-.03em;color:var(--t1);margin-bottom:.625rem}
.pri p{font-size:.9375rem;line-height:1.6;color:var(--t3);max-width:38ch;text-wrap:pretty}
@media(max-width:900px){.pri{grid-template-columns:1fr;row-gap:2rem}.pri>div+div{border-top-color:var(--rule-2)}}

/* ---- the gap: three questions, with the section rule drawing itself
        across the band one column at a time ---- */
.gapb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);margin-top:clamp(3rem,5vw,4.5rem)}
.gp{padding:1.75rem var(--gut) 0 0;position:relative;display:flex;flex-direction:column}
.gp+.gp{padding-left:var(--gut);border-left:1px solid var(--rule-2)}
.gp::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e) var(--d,0s)}
.gapb.on .gp::before{transform:scaleX(1)}
.gp .w{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);margin-bottom:1.125rem}
.gp .q{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;line-height:1.3;color:var(--t1);margin-bottom:.75rem;text-wrap:pretty}
.gp .a{font-size:.875rem;line-height:1.6;color:var(--t3);margin-top:auto;padding-top:.75rem}
.gp .a b{color:var(--acc-txt);font-weight:500}
.gp:hover .a b{color:var(--t1)}
@media(max-width:900px){.gapb{grid-template-columns:1fr}.gp{padding-right:0;padding-bottom:1.75rem}.gp+.gp{border-left:0;padding-left:0;border-top:1px solid var(--rule-2)}}

/* ---- service bands: copy column beside a bleeding deliverable ---- */
@media(max-width:1024px){.bnd-c,.bnd-v,.bnd.rev .bnd-c,.bnd.rev .bnd-v{grid-column:1/-1}.bnd.rev .bnd-v{grid-row:auto}.bnd-v{margin-top:2.5rem}}
.sv-nm{font-size:1.375rem;font-weight:600;letter-spacing:-.04em;color:var(--t1);margin-bottom:1.25rem}
.sv-cl{font-size:clamp(1.5rem,2.5vw,2.125rem);letter-spacing:-.035em;line-height:1.08;font-weight:500;color:var(--t1);margin-bottom:1.125rem;max-width:20ch}
.sv-caps{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule);display:grid;gap:.625rem}
.sv-caps span{display:flex;align-items:baseline;gap:.75rem;font-size:.9375rem;color:var(--t3)}
.sv-caps span::before{content:'';width:5px;height:5px;flex:none;background:var(--acc);transform:translateY(-2px)}
.sv-act{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:1.875rem}
.sv-who{color:var(--t4)}

/* bleeding frame — --vw is published by pylon.js on resize */
@media(max-width:1024px){.bl-r,.bl-l{border-left:0;border-right:0;margin-right:calc(var(--px) * -1);margin-left:calc(var(--px) * -1)}}

/* ---- deliverable internals ---- */
/* NIST function rows */
.fn{display:grid;grid-template-columns:minmax(0,1fr) 5.5em 3.1em;align-items:center;gap:.9em;padding:.55em 0;border-bottom:1px solid var(--rule-3);flex:1;min-height:0}
.fn b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* control matrix rows */
.cm{display:grid;grid-template-columns:4.6em minmax(0,1fr) 5.6em;align-items:center;gap:.9em;padding:.55em 0;border-bottom:1px solid var(--rule-3);flex:1;min-height:0}
.cm u{text-decoration:none;font-family:var(--mono);font-size:.8em;color:var(--t4)}
.cm b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm em{font-style:normal;font-family:var(--mono);font-size:.74em;letter-spacing:.1em;text-transform:uppercase;text-align:right}
.cm em.met{color:#4fc98a}
.cm em.prog{color:#e2a84f}
.cm em.gap{color:#ff7a6b}
/* checklist rows with an owner tag */
.ck{display:flex;align-items:center;gap:.8em;padding:.5em 0;border-bottom:1px solid var(--rule-3);flex:1;min-height:0}
.ck i{width:.55em;height:.55em;flex:none;background:rgba(255,255,255,.12)}
.ck i.d{background:#4fc98a}
.ck i.p{background:var(--acc-txt)}
.ck span{flex:1;min-width:0;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck em{font-style:normal;font-family:var(--mono);font-size:.78em;color:var(--t4);white-space:nowrap}
@container (max-width:520px){.fn,.cm{grid-template-columns:minmax(0,1fr) 3.4em}.fn .mtr,.cm u{display:none}}

/* ---- the platform bridge ---- */
.brg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)}
@media(max-width:768px){.brg{grid-template-columns:1fr}}
.brg a{display:flex;flex-direction:column;gap:.75rem;padding-top:1.5rem;border-top:1px solid transparent;margin-top:-1px;transition:border-color .4s var(--e)}
.brg a:hover{border-top-color:var(--bc)}
.brg .lb{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t4)}
.brg .lb .glyph{width:14px;height:14px}
.brg h3{font-size:1.25rem;font-weight:500;letter-spacing:-.03em;color:var(--t1)}
.brg p{font-size:.9375rem;line-height:1.6;color:var(--t3);max-width:42ch}
.brg .lnk{align-self:flex-start;margin-top:.75rem;color:var(--bc)}