:root{
  --ink:#0B0B0C;
  --ink-72:rgba(11,11,12,.72);
  --ink-60:rgba(11,11,12,.60);
  --ink-40:rgba(11,11,12,.40);
  --ink-12:rgba(11,11,12,.12);
  --ink-06:rgba(11,11,12,.06);
  --paper:#FFFFFF;
  --paper-alt:#F5F5F3;
  --red:#C8102E;            /* redline marks only (.redline). Nothing else is red. */
  --r-lg:0;
  --r-md:0;
  --r-ctl:2px;              /* buttons and inputs; everything else is square */
  --pad:clamp(48px,6vw,88px);
  --pad-q:clamp(56px,7vw,104px);
  --pad-t:clamp(40px,5vw,72px);
  --gut:clamp(16px,3.2vw,24px);
  /* type scale, docs/brief.md section 2 */
  --t-display:clamp(56px,10.5vw,144px);
  --t-h1:clamp(40px,5.6vw,80px);
  --t-h2:clamp(32px,3.6vw,52px);
  --t-h3:clamp(24px,2.2vw,30px);
  --t-h4:clamp(20px,1.6vw,22px);
  --t-lede:clamp(19px,1.5vw,21px);
  --t-body:17px;
  --t-small:15px;
  --t-tag:13px;
  --cond:"Archivo Condensed","Arial Narrow",sans-serif;
  /* as-built grid: 24px squares, ink at 6% */
  --grid:linear-gradient(var(--ink-06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--ink-06) 1px,transparent 1px) 0 0/24px 24px;
  /* page columns: text block 7 of 12, side block 5 of 12; the side runs to the screen edge */
  --cols:[full-start] minmax(var(--gut),1fr) [text-start] minmax(0,736px) [mid] minmax(0,536px) [text-end] minmax(var(--gut),1fr) [full-end];
}
@media(min-width:1024px){:root{--t-body:18px;--t-small:16px;--t-tag:14px}}

/* ---------- fonts: self-hosted, latin subset (OFL licences in assets/fonts/) ---------- */
@font-face{font-family:"Archivo Condensed";src:url("fonts/archivo-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Condensed";src:url("fonts/archivo-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:var(--t-body);
  line-height:1.6;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.wrap{width:100%;max-width:1320px;margin:0 auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
/* headings, eyebrows and stats use the condensed face; everything else inherits Plex from body */
.display,.h2,.h3,.statement,.hero__h1,.hero__word,.phero h1,.ctab h2,.foot__word,
.relc b,.faq__q,.cap h4,.cred h4,.capstat__hd h1,.capstat__b h2,
.label,.hero__eyebrow,.phero__eyebrow,.cinfo__k,.foot h5,.dtable th{font-family:var(--cond)}
.display{
  font-weight:700;
  line-height:.9;
  text-transform:uppercase;
}
.h2{
  font-size:var(--t-h2);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.01em;
}
.h3{
  font-size:var(--t-h3);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.005em;
}
.lede{
  font-size:var(--t-lede);
  line-height:1.5;
  color:var(--ink-72);
  max-width:56ch;
}
.small{font-size:var(--t-small);line-height:1.5;color:var(--ink-60)}

.label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--t-tag);
  font-weight:600;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-60);
  white-space:nowrap;
}
.label::before{
  content:"";
  width:16px;
  height:1px;
  background:var(--ink-40);
  flex:none;
}
.label span{display:block}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* the outline must contrast with the panel, not with the control's own text colour */
.pill:focus-visible{outline-color:var(--ink)}
.hero :focus-visible,.phero :focus-visible,.ctab :focus-visible,.f :focus-visible{outline-color:#fff}

/* hover and focus: a line is drawn under the link, left to right */
.nav__links a:not([aria-current]),.nav__tel,.crumb a,.cinfo__v a,.foot li a,.foot .small a,.ctab__tel,.owners a b{
  background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;background-origin:content-box;
  transition:background-size .3s ease-out;
}
.nav__links a:not([aria-current]):hover,.nav__links a:not([aria-current]):focus-visible,.nav__tel:hover,.nav__tel:focus-visible,
.crumb a:hover,.crumb a:focus-visible,.cinfo__v a:hover,.cinfo__v a:focus-visible,.foot li a:hover,.foot li a:focus-visible,
.foot .small a:hover,.foot .small a:focus-visible,.ctab__tel:hover,.ctab__tel:focus-visible,.owners a:hover b,.owners a:focus-visible b{background-size:100% 1px}

/* ---------- button (class name kept from the pill era; 2px corners, text plus arrow) ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:0 18px;
  border:1px solid var(--ink);
  border-radius:var(--r-ctl);
  background:var(--ink);
  color:#fff;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  transition:background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out;
}
.pill:hover{background:transparent;color:var(--ink)}
.pill .disc{
  width:8px;height:8px;
  flex:none;
  margin-right:3px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.pill--ghost{background:transparent;color:var(--ink);border-color:var(--ink-40)}
.pill--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* on the ink panels */
.hero .pill,.phero .pill,.ctab .pill{background:#fff;color:var(--ink);border-color:#fff}
.hero .pill:hover,.phero .pill:hover,.ctab .pill:hover{background:transparent;color:#fff}
.hero .pill--ghost,.phero .pill--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.hero .pill--ghost:hover,.phero .pill--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- placeholder frame ----------
   Every image spot is <div class="frame" data-photo="pending" data-slot="PH-xx" style="--ar:3/2">.
   Photo arrives: delete data-photo="pending" and put <img src alt> inside; it is shown grayscale, cropped to fit.
   Launch state (the default below): a pole-line drawing on the as-built grid, no labels.
   Staging state: gray frame with a title block (slot, shot name, ratio). See FRAME SWITCH. */
.frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--ar,3/2);
  background:var(--paper-alt);
}
.frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block}
.frame[data-photo="pending"]{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='%230B0B0C' stroke-opacity='.55' stroke-width='2'%3E%3Cpath d='M0 560H1200'/%3E%3Cpath d='M200 560V140M155 170h90M170 200h60M600 560V140M555 170h90M570 200h60M1000 560V140M955 170h90M970 200h60'/%3E%3Cpath stroke-width='1.5' d='M0 176Q100 196 200 182M200 182Q400 236 600 182M600 182Q800 236 1000 182M1000 182Q1100 196 1200 176M1000 200L1120 560'/%3E%3C/svg%3E") center bottom/100% auto no-repeat,var(--grid),var(--paper);
}
.frame__tb{
  display:none;
  position:absolute;left:0;bottom:0;
  max-width:calc(100% - 24px);
  margin:0;
  padding:10px 14px 11px;
  gap:2px;
  background:var(--paper);
  border-top:1px solid var(--ink);
  border-right:1px solid var(--ink);
  font-size:var(--t-tag);
  line-height:1.35;
  color:var(--ink-72);
}
.frame__tb b{font-family:var(--cond);font-weight:600;letter-spacing:.08em;color:var(--ink)}

/* FRAME SWITCH. Staging: gray labeled frames.
   To launch before photos exist, change "all" to "not all" on the next line. */
@media all{
  .frame[data-photo="pending"]{background:var(--grid),var(--paper-alt)}
  .frame[data-photo="pending"] .frame__tb{display:grid}
}

/* ---------- nav ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--ink-12);
}
.nav__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:64px;
}
.mark{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
}
.mark em{font-style:normal;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.mark b{
  display:grid;
  place-items:center;
  width:26px;height:26px;
  border-radius:0;
  background:var(--ink);
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  flex:none;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:15px;
  font-weight:400;
}
.nav__cta{display:flex;align-items:center;gap:16px}
.nav__tel{font-size:15px;font-weight:500}
.burger{display:none;width:26px;height:26px;position:relative}
.burger i{
  position:absolute;left:3px;right:3px;height:1.5px;background:var(--ink);
}
.burger i:nth-child(1){top:9px}
.burger i:nth-child(2){top:15px}
body.menu .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

@media(max-width:1120px){
  .nav__links,.nav__tel{display:none}
  .burger{display:block}
  .nav__in{gap:12px}
  .nav__links.open{
    display:flex;
    position:fixed;
    top:64px;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:10px var(--gut) 26px;
    background:var(--paper);
    border-bottom:1px solid var(--ink-12);
    font-size:22px;
    letter-spacing:-.03em;
  }
  .nav__links.open a{padding:11px 0;width:100%}
}
@media(max-width:600px){
  .mark em{display:none}
  .mark{font-size:0}
}

/* ---------- hero (home): ink panel left, frame right to the screen edge ---------- */
.hero{padding-top:64px;background:var(--ink);color:#fff}
.hero__grid,.phero__grid,.s{display:grid;grid-template-columns:var(--cols)}
.hero__in{
  grid-column:text-start/mid;
  padding:clamp(32px,4vw,56px) clamp(24px,4vw,56px) clamp(32px,4vw,56px) 0;
  min-width:0;
}
.frame--hero{grid-column:mid/full-end;aspect-ratio:auto;min-height:100%}
.hero__word{
  font-family:var(--cond);
  font-size:var(--t-display);
  font-weight:700;
  line-height:.86;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.hero__word span{
  display:block;
  margin-top:.12em;
  font-size:.2em;
  font-weight:600;
  letter-spacing:.32em;
  color:rgba(255,255,255,.72);
}
.hero__eyebrow{
  margin-top:clamp(24px,2.6vw,36px);
  font-family:var(--cond);
  font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero__h1{
  margin-top:14px;
  font-family:var(--cond);
  font-size:var(--t-h1);
  font-weight:700;
  line-height:.95;
  text-transform:uppercase;
  max-width:21ch;
}
/* white at 86% on #0B0B0C: about 14:1 */
.hero__sub{
  margin-top:20px;
  font-size:var(--t-lede);
  line-height:1.5;
  color:rgba(255,255,255,.86);
  max-width:52ch;
}
.hero__acts{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hero__meta{
  margin-top:10px;
  font-family:var(--cond);
  font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* ---------- generic section ---------- */
.sec{padding:var(--pad) 0}
.sec--tight{padding-top:0}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(20px,2.4vw,32px);
}
.split{grid-column:1/4}
.body{grid-column:5/13}
@media(max-width:900px){
  .split,.body{grid-column:1/-1}
  .split{margin-bottom:26px}
}

.statement{
  font-size:var(--t-h2);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.01em;
  max-width:min(22ch,100%);
}
.statement em{font-style:normal;color:var(--ink-40)}
.after{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.q .lede,.s .lede{margin-top:20px}
.q .lede + .lede,.s .lede + .lede{margin-top:14px}

/* ---------- process: steps hang off one strand; poles at the column centres ---------- */
.steps{margin-top:clamp(32px,4vw,56px)}
.steps__strand{display:block;width:100%;height:40px;overflow:visible;fill:none;stroke:currentColor}
.steps__strand path{vector-effect:non-scaling-stroke;stroke-width:1.5px}
.steps ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.steps li{padding:14px clamp(8px,1.4vw,20px) 0;text-align:center}
.steps__id{
  font-family:var(--cond);font-size:var(--t-tag);font-weight:600;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  opacity:.72;
}
.steps__t{margin-top:8px;font-family:var(--cond);font-size:var(--t-h4);font-weight:600;line-height:1.2}
.steps__d{margin:8px auto 0;max-width:28ch;font-size:var(--t-small);line-height:1.5;opacity:.86}
/* line placed + poles set: the strand pays out left to right and uncovers each pole as it reaches it */
@media(prefers-reduced-motion:no-preference){
  .js .steps .steps__strand{clip-path:inset(0 100% 0 0);transition:clip-path .9s linear}
  .js .steps.drawn .steps__strand{clip-path:inset(0 0 0 0)}
  .js .steps .steps__id{opacity:0;transition:opacity .1s linear}
  .js .steps li:nth-child(1) .steps__id{transition-delay:.11s}
  .js .steps li:nth-child(2) .steps__id{transition-delay:.34s}
  .js .steps li:nth-child(3) .steps__id{transition-delay:.56s}
  .js .steps li:nth-child(4) .steps__id{transition-delay:.79s}
  .js .steps.drawn .steps__id{opacity:.72}
}
@media(max-width:760px){
  .steps__strand{display:none}
  .steps ol{grid-template-columns:1fr;margin-left:8px;padding-left:1.5px;position:relative}
  .steps ol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.5px;background:currentColor}
  .steps li{position:relative;text-align:left;padding:4px 0 22px 24px}
  .steps li:last-child{padding-bottom:4px}
  .steps li::before{content:"";position:absolute;left:-8.75px;top:12px;width:16px;height:1.5px;background:currentColor}
  .steps__d{margin-left:0}
}
/* phone: the strand runs down the left edge and the pole ticks are set as it reaches them */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .js .steps ol::before{transform:scaleY(0);transform-origin:top;transition:transform .9s linear}
  .js .steps.drawn ol::before{transform:none}
  .js .steps li::before{opacity:0;transition:opacity .1s linear}
  .js .steps li:nth-child(1)::before{transition-delay:.11s}
  .js .steps li:nth-child(2)::before{transition-delay:.34s}
  .js .steps li:nth-child(3)::before{transition-delay:.56s}
  .js .steps li:nth-child(4)::before{transition-delay:.79s}
  .js .steps.drawn li::before{opacity:1}
}

/* ---------- safety ---------- */
.safety{
  background:var(--paper-alt);
  border-radius:var(--r-lg);
  padding:clamp(30px,4vw,58px);
}
.creds{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:clamp(30px,4vw,52px);
  border-top:1px solid var(--ink-12);
}
.cred{
  padding:24px 24px 4px 0;
  border-right:1px solid var(--ink-12);
}
.cred:last-child{border-right:0}
.cred h4{font-size:var(--t-h4);font-weight:600;margin-bottom:8px}
.cred p{font-size:var(--t-body);line-height:1.5;color:var(--ink-72);max-width:26ch}
@media(max-width:820px){
  .creds{grid-template-columns:1fr 1fr}
  .cred:nth-child(2){border-right:0}
  .cred:nth-child(3),.cred:nth-child(4){border-top:1px solid var(--ink-12)}
}
@media(max-width:520px){
  .creds{grid-template-columns:1fr}
  .cred{border-right:0;border-top:1px solid var(--ink-12);padding-right:0}
  .cred:first-child{border-top:0}
}

/* ---------- contact ---------- */
.contact{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:end;
}
.contact .frame{aspect-ratio:16/11}
.cinfo{display:grid;gap:0}
.cinfo__row{
  padding:14px 0;
  border-top:1px solid var(--ink-12);
  display:grid;
  grid-template-columns:120px 1fr;
  gap:20px;
  align-items:baseline;
}
.cinfo__k{
  font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-60);
}
.cinfo__v{font-size:var(--t-body);line-height:1.45;min-width:0;overflow-wrap:anywhere}
@media(max-width:860px){
  .contact{grid-template-columns:1fr}
  .cinfo__row{grid-template-columns:92px 1fr;gap:12px}
}

/* ---------- footer: drawing title block (cells, rules, sheet name strip) ---------- */
.foot{border-top:1px solid var(--ink);padding-bottom:26px}
.foot__cols{
  display:grid;
  grid-template-columns:1.3fr repeat(4,1fr);
  border-bottom:1px solid var(--ink);
}
.foot__cols > div{min-width:0;padding:clamp(18px,2vw,28px) clamp(14px,1.6vw,24px);border-left:1px solid var(--ink-12)}
.foot__cols > div:first-child{border-left:0;padding-left:0}
.foot h5{
  font-family:var(--cond);
  font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-60);margin:0 0 14px;
}
.foot li{margin-bottom:4px;font-size:var(--t-small);overflow-wrap:anywhere}
.foot .small{font-size:var(--t-small)}
.foot__word{
  margin-top:clamp(24px,3vw,40px);
  font-size:clamp(52px,15.3vw,232px);
  font-weight:700;
  line-height:.78;
  letter-spacing:-.02em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);
}
.foot__base{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:22px;padding-top:14px;border-top:1px solid var(--ink-12);
  font-size:var(--t-small);color:var(--ink-60);
}
@media(max-width:820px){
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__cols > div:nth-child(odd){border-left:0;padding-left:0}
  .foot__cols > div:nth-child(n+3){border-top:1px solid var(--ink-12)}
}

/* ---------- motion: three drawing moves (.span, .steps), the redline stroke, hover lines, page crossfade. Reduced motion: final state. ---------- */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}
/* page to page: a short crossfade, nothing else */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease-out}
}
html{scroll-behavior:smooth;scroll-padding-top:80px}

/* ============================================================
   MULTI-PAGE COMPONENTS
   Added when the site went from one page to seven.
   ============================================================ */

/* ---------- creds: 3 confirmed credentials (the 4th was retired) ---------- */
.creds--2{grid-template-columns:repeat(2,1fr)}
.creds--3{grid-template-columns:repeat(3,1fr)}
.creds--3 .cred:nth-child(3){border-right:0}
@media(max-width:820px){
  .creds--3{grid-template-columns:1fr 1fr}
  .creds--3 .cred:nth-child(2){border-right:0}
  .creds--3 .cred:nth-child(3){border-top:1px solid var(--ink-12);border-right:0}
}
@media(max-width:520px){
  .creds--3{grid-template-columns:1fr}
  .creds--3 .cred{border-right:0;border-top:1px solid var(--ink-12);padding-right:0}
  .creds--3 .cred:first-child{border-top:0}
}

/* ---------- interior page hero: ink panel, frame beside it (below it on phones). Text never sits on a photo. ---------- */
.phero{margin-top:18px;background:var(--ink);color:#fff}
.phero__in{
  grid-column:text-start/mid;
  padding:clamp(40px,5.4vw,80px) clamp(24px,4vw,56px) clamp(40px,5.4vw,72px) 0;
  min-width:0;
}
.phero--flat .phero__in{grid-column:text-start/text-end;padding-right:0}
.phero__eyebrow{
  font-family:var(--cond);
  font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.phero h1{
  margin-top:14px;
  font-family:var(--cond);
  font-size:var(--t-h1);
  font-weight:700;line-height:.95;
  text-transform:uppercase;
  max-width:16ch;
}
.phero__sub{
  margin-top:20px;
  font-size:var(--t-lede);
  line-height:1.5;
  color:rgba(255,255,255,.86);
  max-width:56ch;
}
.phero__acts{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- breadcrumb ---------- */
.crumb{
  /* 64px clears the fixed nav, +18px breathing room */
  padding:82px 0 0;
  font-size:14px;color:var(--ink-60);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.crumb span[aria-current]{color:var(--ink)}

/* ---------- capability list ---------- */
.caps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(24px,4vw,56px);
  border-top:1px solid var(--ink-12);
}
.cap{padding:18px 0;border-bottom:1px solid var(--ink-12)}
.cap h4{font-size:var(--t-h4);font-weight:600;line-height:1.2;margin-bottom:6px}
.cap p{font-size:var(--t-body);line-height:1.55;color:var(--ink-72);max-width:44ch}
@media(max-width:760px){.caps{grid-template-columns:1fr}}

/* ---------- engineering + fielding feature (home) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px);border-top:1px solid var(--ink)}
.duo__i{padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--ink-12)}
.duo__i h3{font-family:var(--cond);font-size:var(--t-h3);font-weight:600;line-height:1.15;margin-bottom:10px}
.duo__i p{font-size:var(--t-body);line-height:1.6;color:var(--ink-72);max-width:52ch}
.duo__go{margin-top:20px}
@media(max-width:767px){.duo{grid-template-columns:1fr}}

/* ---------- glossary ---------- */
.gloss{border-top:1px solid var(--ink)}
.gloss__i{display:grid;grid-template-columns:4fr 8fr;gap:clamp(8px,3vw,44px);padding:clamp(14px,1.6vw,20px) 0;border-bottom:1px solid var(--ink-12);scroll-margin-top:96px}
.gloss__t{font-family:var(--cond);font-size:var(--t-h4);font-weight:600;line-height:1.2}
.gloss__d{font-size:var(--t-body);line-height:1.6;color:var(--ink-72);max-width:64ch}
.gloss__i:target .gloss__t{text-decoration:underline;text-underline-offset:5px}
@media(max-width:760px){.gloss__i{grid-template-columns:1fr}}

/* ---------- FAQ (answer-engine surface): rows on a strand, a pole tick at each row ---------- */
.faq{border-top:1px solid var(--ink)}
.strand + .faq{border-top:0}
.faq__i,.crow{
  position:relative;
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(12px,3vw,44px);
  padding:clamp(16px,1.8vw,22px) 0 clamp(16px,1.8vw,22px) 16px;
  border-bottom:1px solid var(--ink-12);
}
.faq__i::after,.crow::after,.spec tbody th::after,.sched li::after{
  content:"";position:absolute;left:0;bottom:-5px;width:1px;height:10px;background:var(--ink);
}
.faq__q,.crow__k{
  font-family:var(--cond);
  font-size:var(--t-h3);
  font-weight:600;line-height:1.15;
}
.faq__a,.crow__v{font-size:var(--t-body);line-height:1.6;color:var(--ink-72)}
.faq__a p + p{margin-top:12px}
.crows{border-top:1px solid var(--ink)}
.faq--tight .faq__q,.crow__k{font-size:var(--t-h4)}
@media(max-width:760px){.faq__i,.crow{grid-template-columns:1fr;gap:8px}}

/* ---------- related services ---------- */
.rel{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);
}
.relc{
  border:1px solid var(--ink-12);
  border-radius:var(--r-md);
  padding:22px 22px 20px;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  min-height:150px;
  background:linear-gradient(var(--ink),var(--ink)) left bottom/0 2px no-repeat;
  transition:border-color .3s ease-out,background-size .3s ease-out;
}
.relc:hover,.relc:focus-visible{border-color:var(--ink-40);background-size:100% 2px}
.relc b{font-size:var(--t-h4);font-weight:600;line-height:1.15}
.relc span{font-size:var(--t-small);color:var(--ink-60)}
@media(max-width:820px){.rel{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rel{grid-template-columns:1fr}}

/* ---------- closing CTA band: full bleed, ink ---------- */
.ctab{background:var(--ink);color:#fff;padding:var(--pad) 0}
.ctab__in{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:end;
}
.ctab h2{
  font-size:var(--t-h2);
  font-weight:600;line-height:1.05;
  max-width:18ch;
}
.ctab p{margin-top:18px;font-size:var(--t-body);line-height:1.55;color:rgba(255,255,255,.86);max-width:46ch}
.ctab__acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ctab__tel{font-size:var(--t-body);font-weight:500;color:#fff}
@media(max-width:820px){.ctab__in{grid-template-columns:1fr}}

/* ---------- nav current-page marker ---------- */
.nav__links a[aria-current]{text-decoration:underline;text-underline-offset:5px}

/* ============================================================
   Added with the site expansion — company, markets, procurement
   ============================================================ */

/* ---------- proof strip: client names, text only ---------- */
.proof{border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);padding:18px 0 20px}
.proof__list{display:flex;flex-wrap:wrap;row-gap:6px;margin-top:12px;font-size:var(--t-body);line-height:1.5;color:var(--ink-72)}
/* each name carries its own trailing divider, so a wrapped line never starts with one */
.proof__list li{white-space:nowrap}
.proof__list li:not(:last-child)::after{content:"";display:inline-block;width:1px;height:.9em;margin:0 14px;vertical-align:-.12em;background:var(--ink-40)}
.capstat .proof{margin-top:22px}

/* ---------- coming soon (section with no content yet) ---------- */
.soon{border-top:1px solid var(--ink-12);padding-top:18px}
.soon__d{margin-top:12px;max-width:66ch}
.soon__d a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- review markers (must be gone before launch) ---------- */
.tbd{
  display:inline;
  background:#FFF3D6;
  border-bottom:1px solid #C79A1E;
  box-shadow:0 0 0 2px #FFF3D6;
  border-radius:2px;
  color:#6B4E00;
  font-style:normal;
}
.tbd::before{content:"\26A0 \FE0E  "}

/* ---------- data table (prequal / company facts) ---------- */
.dtable{
  border-top:1px solid var(--ink-12);
  overflow-x:auto;
}
.dtable table{width:100%;border-collapse:collapse;min-width:520px}
.dtable th,.dtable td{
  text-align:left;
  vertical-align:top;
  padding:18px 20px 18px 0;
  border-bottom:1px solid var(--ink-12);
  font-size:var(--t-body);
  line-height:1.55;
}
.dtable th{
  width:230px;
  font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-60);
  padding-top:22px;
}
.dtable td{color:var(--ink-72)}
/* row hover: a line is drawn beside the row, top to bottom */
.dtable tr,.spec tbody tr{background:linear-gradient(var(--ink),var(--ink)) left top/2px 0 no-repeat;transition:background-size .3s ease-out}
.dtable tr:hover,.spec tbody tr:hover{background-size:2px 100%}
@media(max-width:640px){
  .dtable th{width:170px}
  .dtable th,.dtable td{padding-right:12px}
}
/* phones: one row = label over value, hairline between rows, no sideways scroll */
@media screen and (max-width:540px){
  .dtable{overflow-x:visible}
  .dtable table{min-width:0}
  .dtable table,.dtable tbody,.dtable tr,.dtable th,.dtable td{display:block;width:auto}
  .dtable tr{padding:16px 0;border-bottom:1px solid var(--ink-12)}
  .dtable th,.dtable td{border-bottom:0;padding:0}
  .dtable th{padding-bottom:6px}

}

/* ---------- chips (service-area city list) ---------- */
.chips{
  display:flex;flex-wrap:wrap;gap:8px;
}
.chips li{
  border:1px solid var(--ink-12);
  border-radius:var(--r-ctl);
  padding:7px 14px;
  font-size:var(--t-small);
  color:var(--ink-72);
}

/* ---------- notice block (scaffold / editorial note) ---------- */
.notice{
  border:1px solid var(--ink-12);
  border-left:3px solid var(--ink);
  border-radius:var(--r-md);
  padding:clamp(24px,3vw,36px);
  margin-bottom:clamp(24px,3vw,40px);
  background:var(--paper-alt);
}
.notice h2{font-size:clamp(19px,2vw,25px);font-weight:500;letter-spacing:-.026em;line-height:1.15}
.notice p{margin-top:14px;font-size:14.5px;line-height:1.62;color:var(--ink-72);max-width:74ch}
.notice code{font-size:14px;background:var(--ink-06);padding:2px 6px;border-radius:var(--r-ctl)}

/* ---------- project scaffold cards ---------- */
.pgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);
}
.pcard{
  border:1px dashed var(--ink-12);
  border-radius:var(--r-md);
  padding:clamp(22px,2.4vw,30px);
  min-height:190px;
  display:flex;flex-direction:column;gap:12px;
}
.pcard__k{
  font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-40);
}
.pcard h3{font-size:19px;font-weight:500;letter-spacing:-.024em;color:var(--ink-40)}
.pcard p{font-size:13.5px;line-height:1.55;color:var(--ink-40);margin-top:auto}
@media(max-width:860px){.pgrid{grid-template-columns:1fr}}

/* ---------- bid request form ---------- */
.contact--form{align-items:start}
.contact--form .cinfo{padding-top:6px}
.cform{
  border:1px solid var(--ink-12);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);
  display:grid;
  gap:18px;
}
.cform__note{font-size:var(--t-small);line-height:1.5}
.cform__two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform__row{display:grid;gap:8px}
.cform label{
  font-family:var(--cond);
  font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-60);
}
.cform label span{color:var(--ink-40);margin-left:3px}
.cform input,.cform select,.cform textarea{
  font:inherit;
  font-size:17px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--ink-40);
  border-radius:var(--r-ctl);
  padding:12px 14px;
  width:100%;
  transition:border-color .3s ease-out;
}
.cform textarea{resize:vertical;line-height:1.5}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  border-color:var(--ink);
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-40)}
.cform__acts{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:6px;
}
@media(max-width:760px){
  .cform__two{grid-template-columns:1fr}
  .contact--form{grid-template-columns:1fr}
}

/* ---------- capability statement (screen + print) ---------- */
.capstat{
  border:1px solid var(--ink-12);
  border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,48px);
}
.capstat__hd{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:22px;
  border-bottom:2px solid var(--ink);
}
.capstat__hd h1{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.032em;line-height:1.05}
.capstat__tag{margin-top:8px;font-size:14px;color:var(--ink-60)}
.capstat__nap{font-size:12.5px;line-height:1.5;color:var(--ink-72);display:flex;gap:28px;flex-wrap:wrap}
.capstat__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.6vw,36px);
  padding-top:24px;
}
.capstat__b h2{
  font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-40);
  padding-bottom:8px;margin-bottom:12px;
  border-bottom:1px solid var(--ink-12);
}
.capstat__b ul{display:grid;gap:9px}
.capstat__b li{
  font-size:13px;line-height:1.5;color:var(--ink-72);
  padding-left:14px;position:relative;
}
.capstat__b li::before{
  content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;background:var(--ink-40);
}
.capstat__b li b{color:var(--ink);font-weight:600}
.capstat__dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.capstat__dl dt{font-size:13px;color:var(--ink-60)}
.capstat__dl dd{font-size:12.5px;color:var(--ink-72);margin:0}
@media screen and (max-width:540px){
  .capstat__dl{grid-template-columns:1fr;gap:0}
  .capstat__dl dt{font-family:"Archivo Condensed","Arial Narrow",sans-serif;font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding-top:12px}
  .capstat__dl dd{font-size:14px;padding:4px 0 12px;border-bottom:1px solid var(--ink-12)}
}
.capstat__note{font-size:13px;line-height:1.55}
.capstat__ft{
  margin-top:26px;padding-top:14px;
  border-top:1px solid var(--ink-12);
  font-size:13px;color:var(--ink-60);
}
@media(max-width:760px){.capstat__grid{grid-template-columns:1fr}}

/* ---------- responsive audit (Step 9) ---------- */
.nav__call{display:none}
/* 44px hit area, same 26px visual */
.burger{width:44px;height:44px;margin:-9px -9px -9px -8px}
.burger i{left:12px;right:12px}
.burger i:nth-child(1){top:18px}
.burger i:nth-child(2){top:24px}
.mark{min-height:44px}
.crumb a{display:inline-block;padding:13px 0;margin:-13px 0}
span.small a{padding:13px 0!important;margin:-13px 0!important}
.ctab__tel,.cinfo__v a,span.small a{display:inline-block;padding:12px 0;margin:-12px 0;max-width:100%;overflow-wrap:anywhere}
/* phones: tap-to-call in the header */
@media(max-width:767px){
  .nav__cta{gap:8px}
  .nav__tel{display:inline-flex;align-items:center;height:44px;padding:0 14px;border:1px solid var(--ink-40);border-radius:var(--r-ctl);font-size:15px;font-weight:500}
  .nav__num{display:none}
  .nav__call{display:inline}
}
@media(max-width:400px){.nav__cta .pill{padding-left:16px;gap:10px}}
/* touch widths: footer links get a full 44px row */
@media(max-width:1024px){
  .foot li{margin-bottom:0}
  .foot li a{display:block;padding:12px 0}
  .foot li:not(:has(a)){padding:3px 0}
}
@media print{
  .nav,.foot,.crumb,.ctab,.sec--tight .grid,.pill{display:none !important}
  body{font-size:11px}
  .sec{padding:0 !important}
  .wrap{max-width:none;padding:0}
  .capstat{border:0;padding:0}
  .capstat__grid{grid-template-columns:1fr 1fr;gap:14px}
  .capstat__b li{font-size:9.5px;line-height:1.35}
  .capstat__dl dt,.capstat__dl dd{font-size:9.5px}
  .capstat .proof{margin-top:12px;padding:8px 0 10px}
  .capstat .proof__list{font-size:9.5px;margin-top:6px;row-gap:2px}
  .capstat .proof__list li:not(:last-child)::after{margin:0 8px}
  .tbd{box-shadow:none;background:none;color:#000;text-decoration:underline}
  @page{margin:12mm}
}


/* honeypot — hidden from people, visible to bots */
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* placeholder facts: hidden until a real number replaces "TBA". To publish one, delete data-tba="true" from it (and from its wrapper). */
[data-tba="true"]{display:none!important}

/* ============================================================
   PHASE 4: layout codes and drawing pieces (docs/brief.md)
   F full-bleed / S split / T spec table / Q quiet text.
   No two adjacent sections share a code.
   ============================================================ */

/* ---------- Q: one quiet column, cols 3 to 9 ---------- */
.q{padding:var(--pad-q) 0}
.q--short{padding:clamp(40px,5vw,64px) 0}
.q__in{max-width:min(66ch,100%);margin-left:16.666%}
.q .h2,.q .statement{margin-top:16px}
.faq--q{margin-top:28px;border-top:1px solid var(--ink-12)}
.faq--q .faq__i{grid-template-columns:1fr;gap:8px;padding-left:0}
.faq--q .faq__i::after{display:none}
@media(max-width:900px){.q__in{margin-left:0}}

/* related pages as one line of text links */
.links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;font-size:var(--t-body)}
.links + .links{margin-top:14px}
.links__k{
  min-width:150px;
  font-family:var(--cond);font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
}
.links a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.links a:hover{text-decoration-thickness:2px}

/* ---------- S: text 7 cols, side 5 cols running to the screen edge ---------- */
.s{padding:var(--pad) 0;align-items:center}
.s__text{grid-column:text-start/mid;padding-right:clamp(24px,5vw,72px);min-width:0}
.s__side{grid-column:mid/full-end;min-width:0}
.s--rev{grid-template-columns:[full-start] minmax(var(--gut),1fr) [text-start] minmax(0,536px) [mid] minmax(0,736px) [text-end] minmax(var(--gut),1fr) [full-end]}
.s--rev .s__side{grid-column:full-start/mid;grid-row:1}
.s--rev .s__text{grid-column:mid/text-end;grid-row:1;padding:0 0 0 clamp(24px,5vw,72px)}
.s .h2,.s .statement{margin-top:16px}
.s .caps{margin-top:24px}
.s .cinfo{margin-top:24px}
/* tablets: keep text and frame side by side from 768px up, columns in the same 7:5 ratio */
@media(min-width:768px) and (max-width:1100px){
  :root{--cols:[full-start] var(--gut) [text-start] minmax(0,7fr) [mid] minmax(0,5fr) [text-end] var(--gut) [full-end]}
  .s--rev{grid-template-columns:[full-start] var(--gut) [text-start] minmax(0,5fr) [mid] minmax(0,7fr) [text-end] var(--gut) [full-end]}
  .s .caps{grid-template-columns:1fr}
}
@media(max-width:767px){
  .hero__grid,.phero__grid,.s,.s--rev{grid-template-columns:[full-start] var(--gut) [text-start mid] minmax(0,1fr) [text-end] var(--gut) [full-end]}
  .hero__in,.phero__in,.s__text,.s--rev .s__text{grid-column:text-start/text-end;padding-left:0;padding-right:0}
  .frame--hero,.s__side,.s--rev .s__side{grid-column:full-start/full-end}
  .frame--hero{aspect-ratio:var(--ar)}
  .s{row-gap:clamp(28px,5vw,40px)}
  .s--rev .s__side{grid-row:1}
  .s--rev .s__text{grid-row:2}
}

/* ---------- T: dense schedule ---------- */
.t{padding:var(--pad-t) 0}
.t__hd{margin-bottom:clamp(20px,2.4vw,32px)}
.t__hd .h2,.t__hd .h3{margin-top:14px;max-width:24ch}
.t__split{display:grid;grid-template-columns:3fr 9fr;gap:clamp(24px,4vw,64px);align-items:start}
.t__split .t__hd{margin-bottom:0}
.t__sub{margin:clamp(28px,3vw,40px) 0 14px}
@media(max-width:900px){.t__split{grid-template-columns:1fr}}

/* spec sheet: discipline + scope, one row each */
.spec{width:100%;border-collapse:collapse}
.spec thead th{
  text-align:left;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--ink);
  font-family:var(--cond);font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
}
.spec thead th:first-child{padding-left:16px}
.spec tbody th,.spec td{text-align:left;vertical-align:baseline;padding:14px 16px 14px 0;border-bottom:1px solid var(--ink-12)}
.spec tbody th{position:relative;width:30%;padding-left:16px;font-family:var(--cond);font-size:var(--t-h4);font-weight:600;line-height:1.2}
.spec td{font-size:var(--t-body);line-height:1.55;color:var(--ink-72)}
.spec a{display:inline-flex;align-items:baseline;gap:10px}
.spec a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.spec__go{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:400;font-size:.8em}
@media(max-width:640px){
  .spec thead{display:none}
  .spec,.spec tbody,.spec tr,.spec tbody th,.spec td{display:block;width:auto}
  .spec tr{position:relative;padding:14px 0 14px 16px;border-bottom:1px solid var(--ink-12)}
  .spec tbody th,.spec td{padding:0;border:0}
  .spec tbody th{position:static}
  .spec tbody th::after{left:0;bottom:-5px}
  .spec td{margin-top:6px}
}

/* client schedule */
.sched{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(16px,2vw,32px);border-top:1px solid var(--ink)}
.sched li{position:relative;padding:12px 0 12px 16px;border-bottom:1px solid var(--ink-12);font-size:var(--t-body);line-height:1.4}
@media(max-width:900px){.sched{grid-template-columns:1fr 1fr}}

/* client logo marquee (Home, About): one real list, one aria-hidden copy.
   Base state is the static grid (reduced motion); the 60s loop runs only under no-preference. */
.mq{--lh:40px;--mq-gap:clamp(40px,5vw,72px)}
.mq__v{overflow:hidden;padding:clamp(24px,3vw,36px) 0}
.mq__list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px var(--mq-gap)}
.mq__list[aria-hidden]{display:none}
.mq__list li{flex:none;display:flex;align-items:center;height:var(--lh)}
.mq img{display:block;height:var(--lh);width:auto}
.mq img.mq__wide{height:calc(var(--lh)*.76)}
@media(max-width:760px){.mq{--lh:32px}}
@media(prefers-reduced-motion:no-preference){
  .mq__track{display:flex;width:max-content;animation:mq 60s linear infinite}
  .mq__list,.mq__list[aria-hidden]{display:flex;flex-wrap:nowrap;padding-right:var(--mq-gap)}
  .mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
}
@keyframes mq{to{transform:translateX(-50%)}}


/* home markets list */
.owners{margin-top:24px;border-top:1px solid var(--ink-12)}
.owners a{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--ink-12)}
.owners b{font-family:var(--cond);font-size:var(--t-h4);font-weight:600;line-height:1.2}
.owners span{font-size:var(--t-body);line-height:1.5;color:var(--ink-72)}

/* ---------- F: full-bleed ink ---------- */
.f{background:var(--ink);color:#fff;padding:var(--pad) 0}
.f .label,.hero .label{color:rgba(255,255,255,.72)}
.f .label::before{background:rgba(255,255,255,.5)}
.f .h2{margin-top:16px;max-width:22ch}

/* ---------- StrandLine: a rule with pole ticks ---------- */
.strand{display:block;width:100%;height:12px;overflow:visible;fill:none;stroke:var(--ink)}
.strand path{vector-effect:non-scaling-stroke;stroke-width:1px}

/* ---------- SpanCallout: end ticks, dimension line, value on the line ----------
   Shows only a real figure, a computed one (years since founding) or a neutral label ("SPAN"). */
.span{display:grid;margin:28px 0 0;max-width:420px;--span-bg:var(--paper)}
.span--inv{color:#fff;--span-bg:var(--ink)}
.span__k{
  grid-area:1/1;margin-bottom:8px;
  font-family:var(--cond);font-size:var(--t-tag);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.span__svg{grid-area:2/1;display:block;width:100%;height:16px;overflow:visible;fill:none;stroke:currentColor}
.span__svg path{vector-effect:non-scaling-stroke;stroke-width:1px}
.span__v{
  grid-area:2/1;justify-self:center;align-self:center;
  padding:0 10px;background:var(--span-bg);
  font-family:var(--cond);font-size:var(--t-tag);font-weight:600;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.span__v:empty{display:none}
/* span measured: ticks, then the line extends between them, then the value */
@media(prefers-reduced-motion:no-preference){
  .js .span .span__t,.js .span .span__v{opacity:0;transition:opacity .15s linear}
  .js .span .span__l{transform:scaleX(0);transform-box:fill-box;transform-origin:center;transition:transform .4s linear .15s}
  .js .span .span__v{transition-delay:.55s}
  .js .span.drawn .span__t,.js .span.drawn .span__v{opacity:1}
  .js .span.drawn .span__l{transform:none}
}

/* ---------- PoleTag: boxed tag, like a pole tag in Katapult ---------- */
.pole{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 9px;border:1px solid var(--ink);background:var(--paper);
  font-family:var(--cond);font-size:var(--t-tag);font-weight:600;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.pole svg{width:10px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2}

/* ---------- RedlineMark: a hand-drawn stroke under one phrase per page; the only red on the site ---------- */
.redline{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C14 3.4 27 6.6 41 4.8S69 3.2 83 4.6 95 5.8 99 4.4' fill='none' stroke='%23C8102E' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom/100% .3em no-repeat;
  padding-bottom:.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* redline drawn like a pen stroke once its text is in view. Redlines inside an h1 (hero headline) never move.
   slice: a redline that wraps is one stroke across its lines, so line 1 draws, then line 2, in the same 600ms. */
:not(h1) > .redline{-webkit-box-decoration-break:slice;box-decoration-break:slice}
@media(prefers-reduced-motion:no-preference){
  .js :not(h1) > .redline{background-size:0 .3em;transition:background-size .6s ease-out .15s}
  .js :not(h1) > .redline.drawn{background-size:100% .3em}
}

/* ---------- drawing panel: the S side when the section shows a measure, not a photo ---------- */
.panel{position:relative;aspect-ratio:3/2;background:var(--grid),var(--paper-alt);--span-bg:var(--paper-alt)}
.panel__draw{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:2}
.panel__draw .panel__wire{stroke-width:1.5}
.span--panel{position:absolute;left:20%;width:60%;top:9%;margin:0;max-width:none}
.pole--panel{position:absolute;left:53%;top:42%}

/* ---------- FAQ page: group head left, strand line right, rows below ---------- */
.t--group{padding:clamp(32px,4vw,56px) 0}
.ghd{display:grid;grid-template-columns:4fr 8fr;gap:clamp(16px,3vw,48px);align-items:end;margin-bottom:0}
.ghd .h3{margin-top:12px}
.ghd .strand{margin-bottom:-6px}
.ghd + .faq{border-top:0;margin-top:18px}
@media(max-width:767px){.ghd{grid-template-columns:1fr}.ghd .strand{display:none}.ghd + .faq{border-top:1px solid var(--ink)}}

/* ---------- data tables: pole tick at each row ---------- */
.strand + .dtable{border-top:0}
.dtable th{position:relative;padding-left:16px}
.dtable th::after{content:"";position:absolute;left:0;bottom:-5px;width:1px;height:10px;background:var(--ink)}
@media screen and (max-width:540px){.dtable tr{position:relative;padding-left:16px}.dtable th{position:static;padding-left:0}.dtable th::after{left:0}}

/* ---------- RedlineMark, revision cloud: wraps a block that is pending (Projects, Careers) ---------- */
.cloud{position:relative;padding:28px 28px 26px}
.cloud::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:12px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none' stroke='%23C8102E' stroke-width='1.6'%3E%3Cpath d='M8 12A4 4 0 0 1 12 8A6 6 0 0 1 24 8A4 4 0 0 1 28 12A6 6 0 0 1 28 24A4 4 0 0 1 24 28A6 6 0 0 1 12 28A4 4 0 0 1 8 24A6 6 0 0 1 8 12Z'/%3E%3C/svg%3E") 12 round;
}
.cloud__tag{
  position:absolute;right:24px;top:-12px;
  padding:3px 8px;background:var(--paper);border:1px solid var(--red);color:var(--red);
  font-family:var(--cond);font-size:var(--t-tag);font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
}
.cloud .lede{margin-top:12px}

/* ---------- capability statement: a drawing sheet with a title block ---------- */
.capstat{border:1px solid var(--ink)}
.capstat__ft{display:grid;grid-template-columns:1fr auto auto;align-items:stretch;padding:0;border-top:1px solid var(--ink)}
.capstat__ft > span{padding:10px 14px 10px 0}
.capstat__cell{border-left:1px solid var(--ink);padding-left:14px!important;display:grid;gap:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.capstat__cell b{font-family:var(--cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
@media screen and (max-width:540px){.capstat__ft{grid-template-columns:1fr 1fr}.capstat__ft > span:first-child{grid-column:1/-1;border-bottom:1px solid var(--ink-12)}.capstat__cell:nth-child(2){border-left:0;padding-left:0!important}}
@media print{.q:has(#printcap){display:none}.t:has(.capstat){padding:0}.capstat{border:1px solid #000!important;padding:5mm!important}.capstat__hd h1{font-size:22px}.capstat__tag,.capstat__nap{font-size:10px}.capstat__hd{padding-bottom:10px}.capstat__grid{padding-top:12px}.capstat__b h2,.capstat .label{font-size:8.5px}.capstat__ft{font-size:8.5px;margin-top:12px}.capstat__ft > span{padding-top:4px;padding-bottom:4px}}