/* Prime Trans LLC — components
   Sections and bands · proof strip · the funnel · equipment rows · photograph
   bands · lane maps · doors
   · steps · tables · FAQ · CTA · capability statement · motion · responsive.

   Rule the whole file follows: the graphics are the drawings (rigs, maps) and the
   numerals. There is no grid of little boxed pictograms anywhere, because that is
   the tell that a page was assembled rather than designed. */

/* ---------- sections ---------- */
.section{padding:var(--sp-8) 0}
.section-tight{padding:var(--sp-7) 0}
.section-head{max-width:780px;margin-bottom:var(--sp-6)}
.kicker{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-size:var(--fs-300);font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin-bottom:.85rem}
.kicker::before{content:"";width:26px;height:2px;background:var(--brand);border-radius:2px}
.band .kicker{color:oklch(0.85 0.08 80)}
.band .kicker::before{background:oklch(0.85 0.08 80)}
.lede{font-size:var(--fs-500);color:var(--muted);max-width:var(--prose)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- navy bands ---------- */
.band{background:var(--navy);color:var(--band-text)}
.band h1,.band h2,.band h3{color:var(--band-text)}
.band p,.band .lede,.band li{color:var(--band-muted)}
.band a:not(.btn){color:var(--band-text);text-decoration:underline;text-underline-offset:3px}
/* ...but a card is not a sentence. `.band a` underlines running prose, which is right
   for a link inside a paragraph and wrong for a whole card wrapped in an anchor:
   text-decoration propagates, so the numeral, the heading, the body copy and the Open
   link all got a rule under them and the card read as a wall of links. These three are
   card-shaped anchors and already say text-decoration:none on hover; say it at rest too,
   at a specificity that beats the prose rule. */
.band a.door,.band a.need,.band a.dedicated-strip{text-decoration:none}
.band-2{background:var(--navy-2)}

/* ---------- ground rhythm ----------
   Two sections on the same ground back to back read as one flat page (SCAN-SPEC/
   DESIGN.md alternate paper/navy on purpose; this catches every place that alternation
   breaks, on any page, without a build.py change). Paper doubles get the second section
   tinted to --paper-3 plus a seam -- safe because no card in this file (.need/.lane/
   .aside-card/.faq details) ever uses --paper-3 as ITS OWN background, so nothing nested
   collapses into its ground. Navy doubles get a seam only, no background swap: --steps li
   and --lane already promote to --navy-2 inside .band (see below), so flipping the
   SECTION to --navy-2 as well would erase that exact elevation instead of restoring it. */
.section:not(.band) + .section:not(.band){background:var(--paper-3);border-top:1px solid var(--line)}
.section.band + .section.band{border-top:1px solid var(--band-line)}

/* ---------- hero ----------
   Full-bleed photograph on an asphalt ground, headline set over the dark end of it.
   The old hero was a navy band with a vector truck floating to the right of the type;
   it read as a diagram of a website. A photograph gives the page its only real tonal
   range, so the scrim is doing contrast work, not decoration: --scrim-2 at the foot
   keeps the lede and the mono line over 4.5:1 wherever the frame happens to be light. */
.hero{position:relative;isolation:isolate;background:var(--asphalt);color:var(--band-text);
  display:grid;align-content:end;overflow:hidden;
  min-height:clamp(29rem,64vh,41rem);padding:clamp(4rem,9vw,7rem) 0 clamp(2rem,4vw,3.2rem)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media picture,.photoband-media picture{display:block;width:100%;height:100%}
.need-art picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,var(--scrim-2) 0%,var(--scrim-2) 30%,var(--scrim) 66%,oklch(0.16 0.01 60 / .22) 100%),
  linear-gradient(to right,oklch(0.16 0.01 60 / .52) 0%,oklch(0.16 0.01 60 / .18) 52%,transparent 76%)}
.hero .wrap{position:relative}
.hero h1{max-width:16ch;margin-bottom:1rem;color:var(--band-text);
  text-wrap:balance;text-shadow:0 1px 24px oklch(0 0 0 / .35)}
.hero .lede{max-width:58ch;color:var(--band-text);opacity:.92}
.hero .btn-row{margin-top:1.7rem}
.hero-cap{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin:1.1rem 0 0;max-width:none;
  font-family:var(--font-mono);font-size:var(--fs-300);letter-spacing:.03em;color:var(--band-text)!important;opacity:.86}
.hero-cap span{display:inline-flex;align-items:center;gap:.45rem}
.hero-cap span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:oklch(0.85 0.1 80);margin-right:.45rem}
.page-hero{padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)}
.page-hero h1{max-width:20ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;padding:0;margin:0 0 1.2rem;font-size:var(--fs-300);color:var(--band-muted)}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.crumbs a{color:var(--band-muted)!important;text-decoration:none!important}
.crumbs a:hover{color:var(--band-text)!important}

/* ---------- proof strip ---------- */
.proof{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0}
.proof-item{padding:1rem 1.1rem;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.2rem;min-width:0}
.proof-item:last-child{border-right:0}
.proof-l{font-size:var(--fs-300);color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.proof-v{font-family:var(--font-display);font-weight:700;font-size:var(--fs-500);line-height:1.2;overflow-wrap:break-word}
.proof-v .ph{font-size:.85em}

/* ---------- the funnel: what are you moving ----------
   Twelve identical cards in two grids was the structural problem on this page: at
   browsing size the eye read one repeated blob, not six choices. Three card shapes
   now -- one lead, four in a row, one wide -- so the grid has a rhythm and the most
   valuable door is visibly the biggest. */
.needs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.need{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-card);color:var(--ink);box-shadow:var(--shadow-card);position:relative;overflow:hidden;
  grid-column:span 4}
.need-lead{grid-column:span 8}
.need-tall{grid-column:span 4}
.need-wide{grid-column:span 12;flex-direction:row;align-items:stretch}
.need:hover{text-decoration:none;border-color:var(--brand-line)}
.need-art{position:relative;overflow:hidden;background:var(--asphalt-2);flex:none;aspect-ratio:16/10}
.need-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.need:hover .need-art img{transform:scale(1.035)}
.need-lead .need-art{aspect-ratio:16/8.2}
.need-tall .need-art{aspect-ratio:4/3.6;flex:1 1 auto;min-height:12rem}
.need-wide .need-art{aspect-ratio:12/5;width:38%;max-width:23rem}
.need-body{display:flex;flex-direction:column;flex:1 1 auto;padding:1.05rem 1.2rem 1.2rem}
.need-wide .need-body{justify-content:center;padding:1.4rem 1.5rem}
.need h3{margin:0 0 .3rem;font-size:var(--fs-500)}
.need-lead h3,.need-wide h3{font-size:var(--fs-600)}
.need p{margin:0;font-size:var(--fs-350);color:var(--muted)}
.need-go{margin-top:auto;padding-top:.9rem;font-family:var(--font-display);font-weight:600;font-size:var(--fs-350);
  color:var(--brand);display:inline-flex;align-items:center;gap:.35rem}
.need-wide .need-go{margin-top:.9rem;padding-top:0}
.need::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.need:hover::after{transform:scaleX(1)}
.dedicated-strip{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1rem;padding:1.05rem 1.3rem;
  background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-card);color:var(--ink)}
.dedicated-strip:hover{text-decoration:none;background:oklch(0.92 0.04 258)}
.ds-tag{flex:none;font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.08em;color:var(--brand-deep);font-weight:500}
.ds-text{flex:1 1 22rem;font-size:var(--fs-350);color:var(--muted)}
.ds-go{flex:none;font-family:var(--font-display);font-weight:600;font-size:var(--fs-350);color:var(--brand);
  display:inline-flex;align-items:center;gap:.35rem}

/* ---------- full-bleed photograph band ----------
   The one element that gives the page depth between sections: an edge-to-edge frame
   on the asphalt ground, optionally carrying a line of type. */
.photoband{position:relative;isolation:isolate;background:var(--asphalt);color:var(--band-text);
  overflow:hidden;display:grid;align-content:end;
  min-height:clamp(15rem,34vh,24rem);padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(1.6rem,3vw,2.4rem)}
.photoband-tall{min-height:clamp(20rem,46vh,32rem)}
.photoband-media{position:absolute;inset:0;z-index:-2}
.photoband-media img{width:100%;height:100%;object-fit:cover;display:block}
.photoband-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,var(--scrim-2) 0%,var(--scrim-2) 26%,var(--scrim) 64%,oklch(0.16 0.01 60 / .24) 100%)}
/* An interior page banner is type from edge to edge -- breadcrumb at the top, lede at
   the foot -- so there is no light corner to give back to the picture. It gets a flat
   scrim rather than a gradient that only protects the bottom. */
.page-hero.photoband .photoband-shade{background:
  linear-gradient(to top,oklch(0.16 0.01 60 / .82) 0%,oklch(0.16 0.01 60 / .74) 48%,oklch(0.16 0.01 60 / .52) 100%),
  linear-gradient(to right,oklch(0.16 0.01 60 / .30) 0%,transparent 82%)}
.photoband .wrap{position:relative}
/* h1 AND h2: the interior page banners render an <h1>, and .photoband is not .band,
   so styling h2 alone left every service page's headline at --ink over a dark
   photograph. Bind the heading colour to the band, not to one tag. */
.photoband :is(h1,h2){color:var(--band-text);max-width:20ch;margin:0 0 .5rem;text-wrap:balance;
  text-shadow:0 1px 24px oklch(0 0 0 / .35)}
.page-hero.photoband h1{max-width:22ch}
/* Over a photograph the small type needs more than it does on a flat navy band: the
   scrim is lightest at the top of the frame, which is exactly where the breadcrumb and
   the kicker sit. Measured against the lightest pixel behind them, --band-muted crumbs
   came in at 4.2:1 and the amber kicker at 4.1:1 against a 4.5 floor. */
.photoband .crumbs,.photoband .crumbs a,.photoband .crumbs a:hover{color:var(--band-text)!important}
.photoband .crumbs li+li::before{opacity:.6}
.hero .kicker,.photoband .kicker{color:oklch(0.94 0.05 80)}
.hero .kicker::before,.photoband .kicker::before{background:oklch(0.94 0.05 80)}
.photoband p{color:var(--band-text);opacity:.9;max-width:56ch;margin:0}

/* ---------- inline figure ---------- */
.photofig{margin:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--asphalt-2)}
.photofig img{width:100%;height:auto;display:block}
.band .photofig{border-color:var(--band-line)}

/* Every image on this site is licensed stock or a studio render -- none of it
   documents Prime Trans. Where a frame sits next to a fleet claim it says so, in the
   same register as the amber [placeholder] boxes: the page never lets a picture
   imply a fact the text would not state. */
.figcred{display:block;margin-top:.55rem;font-family:var(--font-mono);font-size:var(--fs-300);
  letter-spacing:.02em;color:var(--faint)}
.band .figcred,.photoband .figcred,.hero .figcred{color:var(--band-text);opacity:.62}
.photoband .figcred,.hero .figcred{margin-top:.9rem}

/* ---------- lanes: the schedule board ----------
   One line per run, stops on it in order, home marked. This replaced two geographic
   maps whose corridors -- the only thing being claimed -- were the least visible marks
   in the frame. A transit-style line claims order and frequency, which is exactly what
   is being claimed, and it survives a phone screen and a printer.

   The connecting rule is drawn behind the dots by the ::before on .run-stops, so a stop
   is a dot sitting on a line rather than a dot near one; each dot carries a ring in the
   surface colour to punch the rule out cleanly behind it. */
.laneboard{display:flex;flex-direction:column;gap:1rem}
.lane{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.3rem 1.5rem 1.6rem;box-shadow:var(--shadow-card)}
.band .lane{background:var(--navy-2);border-color:var(--band-line)}
.lane-head{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.2rem 1.6rem;align-items:baseline;
  margin-bottom:1.4rem}
.lane-tag{grid-row:span 2;align-self:center;font-size:var(--fs-350);font-weight:500;letter-spacing:.04em;
  color:var(--brand-deep);background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:var(--r-pill);padding:.34rem .85rem;text-align:center;white-space:nowrap}
.band .lane-tag{color:oklch(0.92 0.06 258);background:oklch(1 0 0 / .10);border-color:var(--band-line)}
.lane-head h3{margin:0;font-size:var(--fs-600)}
.lane-head p{margin:.2rem 0 0;font-size:var(--fs-350);color:var(--muted);max-width:62ch}
.band .lane-head p{color:var(--band-muted)}

.runs{display:flex;flex-direction:column;gap:1.5rem}
.run{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1.6rem;align-items:start}
.run-road{align-self:center;font-size:var(--fs-300);letter-spacing:.06em;color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.28rem .5rem;text-align:center;
  background:var(--paper-3)}
.band .run-road{color:var(--band-text);background:oklch(1 0 0 / .08);border-color:var(--band-line)}
.run-stops{position:relative;list-style:none;margin:0;padding:0;display:flex;
  justify-content:space-between;gap:.5rem;max-width:none}
.run-stops::before{content:"";position:absolute;left:6px;right:6px;top:5px;height:2px;
  background:var(--line-2);border-radius:2px}
.band .run-stops::before{background:var(--band-line)}
.run-stops li{display:flex;flex-direction:column;align-items:center;gap:.45rem;
  flex:0 1 auto;min-width:0;text-align:center;margin:0}
.run-stops li:first-child{align-items:flex-start;text-align:left}
.run-stops li:last-child{align-items:flex-end;text-align:right}
.stop-dot{position:relative;width:12px;height:12px;border-radius:50%;flex:none;
  background:var(--paper-2);border:2px solid var(--brand);box-shadow:0 0 0 3px var(--paper-2)}
.band .stop-dot{background:var(--navy-2);border-color:oklch(0.8 0.1 258);box-shadow:0 0 0 3px var(--navy-2)}
.stop-name{font-size:var(--fs-300);color:var(--muted);line-height:1.25;overflow-wrap:break-word}
.band .stop-name{color:var(--band-muted)}
.is-home .stop-dot{width:16px;height:16px;background:var(--brand);border-color:var(--brand);
  margin-top:-2px}
.band .is-home .stop-dot{background:oklch(0.79 0.155 72);border-color:oklch(0.79 0.155 72)}
.is-home .stop-name{color:var(--ink);font-weight:700;font-family:var(--font-display)}
.band .is-home .stop-name{color:var(--band-text)}
.stop-home{font-family:var(--font-mono);font-size:calc(var(--fs-300) * .82);letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin-top:-.25rem}
.band .stop-home{color:oklch(0.85 0.12 75)}

.lane-home{max-width:70ch;margin:0 0 .4rem;color:var(--muted)}
.band .lane-home{color:var(--band-muted)}

/* The third card is an offer, not a schedule, so it drops the line diagram and takes
   the brand surface -- it should read as the thing to act on, not a fourth lane. */
.lane-offer{background:var(--brand-soft);border-color:var(--brand-line)}
.band .lane-offer{background:oklch(1 0 0 / .07)}
.lane-offer .lane-head{margin-bottom:0}
.lane-offer .lane-tag{background:var(--brand);color:#fff;border-color:var(--brand)}
.band .lane-offer .lane-tag{background:oklch(0.79 0.155 72);color:oklch(0.2 0.02 60);
  border-color:oklch(0.79 0.155 72)}
.lane-cta{grid-column:2;margin:1.1rem 0 0;padding-left:11.1rem}

/* ---------- the gates on those lanes ---------- */
.stops-list{list-style:none;margin:0;padding:0;max-width:none;
  border-top:1px solid var(--line)}
.band .stops-list{border-top-color:var(--band-line)}
.stops-list li{display:grid;grid-template-columns:8.5rem minmax(0,1.1fr) minmax(0,1.4fr);
  gap:.4rem 1.4rem;align-items:baseline;padding:.75rem 0;margin:0;
  border-bottom:1px solid var(--line)}
.band .stops-list li{border-bottom-color:var(--band-line)}
.stop-kind{font-size:var(--fs-300);letter-spacing:.05em;color:var(--faint)}
.band .stop-kind{color:var(--band-muted)}
.stop-place b{font-family:var(--font-display);font-size:var(--fs-400);display:block}
.stop-where{display:block;font-size:var(--fs-300);color:var(--faint);margin-top:.1rem}
.band .stop-where{color:var(--band-muted)}
.stop-what{font-size:var(--fs-350);color:var(--muted)}
.band .stop-what{color:var(--band-muted)}

/* the fleet table's first column is a name, not a number: let it breathe */
.tbl-fleet td:first-child{white-space:nowrap}
.tbl-fleet td:nth-child(4){min-width:22ch}

/* ---------- doors ---------- */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.door{display:flex;flex-direction:column;gap:.4rem;padding:1.3rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-card);color:var(--ink);box-shadow:var(--shadow-card);position:relative;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s ease}
.door:hover{transform:translateY(-3px);text-decoration:none;border-color:var(--brand-line)}
.band .door{background:var(--navy-2);border-color:var(--band-line)}
.band .door .num{color:var(--band-muted)}
.band .door p{color:var(--band-muted)}
.band .door .go{color:oklch(0.8 0.1 258)}
.door .num{font-family:var(--font-mono);font-size:var(--fs-300);color:var(--faint);letter-spacing:.1em;
  padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.door h3{margin:.2rem 0 0;font-size:var(--fs-600)}
.door p{color:var(--muted);font-size:var(--fs-350);margin:0}
.door .go{margin-top:auto;padding-top:.9rem;font-family:var(--font-display);font-weight:600;font-size:var(--fs-350);
  color:var(--brand);display:inline-flex;align-items:center;gap:.35rem}
.door::after{content:"";position:absolute;left:1.3rem;right:1.3rem;bottom:0;height:3px;background:var(--brand);
  border-radius:3px 3px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.door:hover::after{transform:scaleX(1)}

/* ---------- cards, steps, lists ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.card{padding:1.3rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card)}
/* Level 2: a .card that is itself a link must be visibly clickable at rest -- shadow
   present before hover, not conjured by it. Scoped to the <a> tag (not bare .card) so a
   static .card stays Level 1 (resting, no affordance) exactly as it renders today. */
a.card{display:block;color:inherit;text-decoration:none;box-shadow:var(--shadow-card);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s ease}
a.card:hover{transform:translateY(-3px);border-color:var(--brand-line);text-decoration:none}
.band .card{background:var(--navy-2);border-color:var(--band-line)}
.band .card p{color:var(--band-muted)}
.band a.card:hover{border-color:oklch(0.8 0.1 258)}
.card h3{margin-bottom:.4rem}
.card p{font-size:var(--fs-350);color:var(--muted)}
.card .go{font-family:var(--font-display);font-weight:600;font-size:var(--fs-350)}
.list-cols{columns:2;column-gap:2.5rem;max-width:none}
.list-cols li{break-inside:avoid}
.steps{counter-reset:s;list-style:none;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.steps li{position:relative;padding:1.2rem 1.2rem 1.1rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);margin:0}
.band .steps li{background:var(--navy-2);border-color:var(--band-line)}
.steps .num{display:block;font-family:var(--font-mono);color:var(--brand);font-size:var(--fs-300);letter-spacing:.12em;
  padding-bottom:.7rem;margin-bottom:.6rem;border-bottom:1px solid var(--line)}
.band .steps .num{color:oklch(0.8 0.1 258);border-color:var(--band-line)}
.steps h3{font-size:var(--fs-500)}
.steps p{font-size:var(--fs-350);color:var(--muted)}
.band .steps li p{color:var(--band-muted)}
.std-row{list-style:none;padding:1.7rem 0 0;margin:2rem 0 0;max-width:none;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 1.6rem}
.band .std-row{border-color:var(--band-line)}
.std-row li{margin:0}
.std-row .num{display:block;font-family:var(--font-mono);font-size:var(--fs-300);letter-spacing:.12em;color:var(--brand);margin-bottom:.5rem}
.band .std-row .num{color:oklch(0.8 0.1 258)}
.std-row b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--fs-400);letter-spacing:-.01em;margin-bottom:.2rem}
.std-row .std-p{display:block;font-size:var(--fs-350);color:var(--muted);line-height:1.5}
.band .std-row .std-p{color:var(--band-muted)}
.marklist{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:0}
.marklist li{display:grid;grid-template-columns:8.5rem 1fr;gap:1.2rem;align-items:baseline;margin:0;
  padding:.7rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-400)}
.marklist li:first-child{padding-top:0}
.band .marklist li{border-color:var(--band-line)}
.ml-lead{font-size:var(--fs-300);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.band .ml-lead{color:oklch(0.8 0.1 258)}
.marklist-tight li{grid-template-columns:6.5rem 1fr;gap:1rem;font-size:var(--fs-350);padding:.45rem 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}
.split-wide{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.aside-card{padding:1.2rem 1.3rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:1rem}
.aside-card h3{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-350);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.6rem}
.aside-card h3 svg{color:var(--brand)}
.aside-card dl{margin:0;display:grid;gap:.4rem;font-size:var(--fs-350)}
.aside-card dt{color:var(--muted);font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.05em}
.aside-card dd{margin:0 0 .4rem}
.aside-card .big{font-family:var(--font-display);font-weight:700;font-size:var(--fs-600)}
.callout{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.2rem;border-left:3px solid var(--brand);
  background:var(--brand-soft);border-radius:0 var(--r-ctl) var(--r-ctl) 0;max-width:calc(var(--prose) + 3rem)}
.callout>svg{flex:none;color:var(--brand);margin-top:.2rem}
.callout-warn{border-left-color:oklch(0.62 0.14 60);background:oklch(0.62 0.14 60 / 0.10)}
.callout-warn>svg{color:oklch(0.55 0.14 60)}
.checklist{list-style:none;padding:0}
.checklist li{padding-left:1.7rem;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:.5em;width:.75em;height:.75em;border:2px solid var(--signal);border-radius:50%}
.checklist li.done::before{background:var(--signal)}
.tick{color:var(--signal)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:var(--fs-300);font-family:var(--font-mono);color:var(--muted)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;font-size:var(--fs-300);margin:.8rem 0 0;
  padding-top:.7rem;border-top:1px solid var(--line)}
.spec dt{color:var(--muted)}
.spec dd{margin:0;font-family:var(--font-mono)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-350)}
.tbl th,.tbl td{padding:.7rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--font-display);font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--paper-3)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{font-family:var(--font-mono);white-space:nowrap}
.tbl-kv th{width:34%;color:var(--muted);font-weight:500}
.band .tbl-wrap{background:var(--navy-2);border-color:var(--band-line)}
.band .tbl th,.band .tbl td{border-bottom-color:var(--band-line)}
.band .tbl thead th{background:var(--navy);color:var(--band-muted)}
.band .tbl-kv th{color:var(--band-muted)}
.band .tbl td{color:var(--band-text)}

/* ---------- faq ---------- */
.faq{display:grid;gap:.5rem;max-width:820px}
.faq details{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);padding:0 1.2rem}
.faq summary{cursor:pointer;list-style:none;padding:1rem 0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-400);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--brand);font-size:1.3rem;flex:none}
.faq details p{padding-bottom:1rem;color:var(--muted);font-size:var(--fs-350)}

/* ---------- cta band ---------- */
.cta-band{background:var(--brand);color:#fff;padding:var(--sp-7) 0}
.cta-band h2{color:#fff;max-width:20ch;margin-bottom:.5rem}
.cta-band p{color:oklch(0.93 0.03 258);max-width:52ch}
.cta-band .btn{background:#fff;border-color:#fff;color:var(--brand-deep)}
.cta-band .btn:hover{background:var(--paper)}
.cta-band .btn-light{background:transparent;border-color:oklch(1 0 0 / 0.5);color:#fff}
.cta-row{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}

/* ---------- capability statement (print one-pager) ---------- */
.capstat{background:#fff;color:#111;border:1px solid var(--line);border-radius:var(--r-card);padding:2.2rem;max-width:860px;margin:0 auto;box-shadow:var(--shadow-card)}
.capstat-head{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;border-bottom:3px solid var(--brand);padding-bottom:1rem;margin-bottom:1.2rem}
.capstat-head h1{font-size:var(--fs-700);margin:0}
.capstat-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem}
.capstat h2{font-size:var(--fs-350);text-transform:uppercase;letter-spacing:.09em;color:var(--brand);margin:1rem 0 .4rem}
.capstat ul{font-size:var(--fs-350);padding-left:1.1rem}
.capstat p{font-size:var(--fs-350)}
.capstat .codes{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:var(--fs-300)}
.capstat .codes dt{color:#555}
.capstat .codes dd{margin:0;font-family:var(--font-mono)}
@media print{.capstat{box-shadow:none;border:0;padding:0;max-width:none}.page-hero,.section-head,.btn-row{display:none}}

/* ---------- print: navy bands must not dump ink ----------
   .page-hero, .btn-row and .cta-band are already hidden above/in base.css, which removes
   most band-scoped buttons and every inner-page hero from print. What is still live on
   paper is the home .hero (a "hero band", not "page-hero") and every .section.band on
   every page: "Four kinds of buyer", "Home base", "How contracting works" and the many
   band=True steps()/std_row()/card grids used across the service pages. Clearing only
   the background is not enough -- the foreground on every one of these is --band-text /
   --band-muted / a light accent, tuned for a dark backdrop, so a naive reset prints
   invisible light-on-white text, which is worse than the ink dump it replaces. Every
   rule below restores the SAME token/value the element already uses in its own
   non-band (light) state, so this tracks any future palette change automatically. */
@media print{
  .band,.band-2{background:#fff;color:#000}
  .band h1,.band h2,.band h3{color:#000}
  .band p,.band .lede,.band li{color:#333}
  .band a:not(.btn){color:var(--brand);text-decoration:underline}
  .band .kicker{color:var(--brand)}
  .band .kicker::before{background:var(--brand)}
  .hero-cap{color:#333!important}
  .band .card,.band .steps li,.band .lane{background:#fff;border-color:#999}
  .band .card p,.band .steps li p,.band .std-row .std-p{color:#333}
  .band .std-row,.band .marklist li,.band .stops-list li{border-color:#999}
  .band .std-row .num,.band .steps .num,.band .ml-lead{color:var(--brand)}
  /* the board prints: it is a schedule, and a schedule is the useful part */
  .band .lane-tag{color:var(--brand);background:#eee;border-color:#999}
  .band .run-road{color:#000;background:#eee;border-color:#999}
  .band .stop-name,.band .stop-what,.band .stop-kind,.band .stop-where{color:#333}
  .band .is-home .stop-name{color:#000}
  .band .stop-dot{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px #fff}
  .band .is-home .stop-dot{background:var(--brand)}
  .band .run-stops::before{background:#999}
  /* photographs do not print: drop the frame and the scrim, put the type back on
     white. Printing a hero photograph wastes a cartridge and buys nothing -- what
     a printed page is for here is the capability statement, not the art. */
  .hero,.photoband{background:#fff;color:#000;min-height:0;padding:1.2rem 0 .8rem;display:block}
  .hero-media,.hero-shade,.photoband-media,.photoband-shade,.photofig{display:none}
  .hero h1,.photoband h2{color:#000;text-shadow:none}
  .hero .lede,.photoband p{color:#333;opacity:1}
  .hero .kicker,.photoband .kicker{color:var(--brand)}
  .hero .kicker::before,.photoband .kicker::before{background:var(--brand)}
  .figcred{display:none}
  /* the offer card's tag is white on brand blue and its CTA is a button; print drops
     backgrounds, so both would come out white on white. A button is no use on paper. */
  .lane-offer{background:#fff;border-color:#999}
  .lane-offer .lane-tag{color:var(--brand);background:#eee;border-color:#999}
  .lane-cta{display:none}
  .lane-head,.run{grid-template-columns:1fr}
  .need-art{display:none}
  .band .ph{color:#333;background:#eee;border-color:#999}
}

/* ---------- motion ----------
   One language: things rise 12px and fade as they arrive, grids stagger, the hauler
   rolls in once on load, the lane map draws its corridors. Transform, opacity and
   stroke only, and all of it off under prefers-reduced-motion. */
/* Content defaults to VISIBLE. The hidden start state is gated behind html.js, which is
   stamped by an inline script in <head> before this sheet is parsed. So with JavaScript
   disabled — or if site.js 404s or throws before the reveal code — nothing is ever
   hidden. Never hide by CSS and reveal by script. */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rv.is-in{opacity:1;transform:none}
.needs .need:nth-child(2),.laneboard .lane:nth-child(2),.doors .door:nth-child(2),.cards .card:nth-child(2){transition-delay:.07s}
.needs .need:nth-child(3),.laneboard .lane:nth-child(3),.doors .door:nth-child(3),.cards .card:nth-child(3){transition-delay:.14s}
.needs .need:nth-child(4),.doors .door:nth-child(4),.cards .card:nth-child(4){transition-delay:.21s}
.needs .need:nth-child(5){transition-delay:.28s}
.needs .need:nth-child(6){transition-delay:.35s}
.js .steps li,.js .std-row li,.js .marklist li,.js .proof-item{opacity:0;transform:translateY(10px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.js .rv.is-in li,.js .proof.is-in .proof-item{opacity:1;transform:none}
.steps li:nth-child(2),.std-row li:nth-child(2),.proof-item:nth-child(2){transition-delay:.09s}
.steps li:nth-child(3),.std-row li:nth-child(3),.proof-item:nth-child(3){transition-delay:.18s}
.std-row li:nth-child(4),.proof-item:nth-child(4){transition-delay:.27s}
.proof-item:nth-child(5){transition-delay:.36s}.proof-item:nth-child(6){transition-delay:.45s}
.proof-item:nth-child(7){transition-delay:.54s}.proof-item:nth-child(8){transition-delay:.63s}
.marklist li:nth-child(2){transition-delay:.05s}.marklist li:nth-child(3){transition-delay:.1s}
.marklist li:nth-child(4){transition-delay:.15s}.marklist li:nth-child(5){transition-delay:.2s}
.marklist li:nth-child(n+6){transition-delay:.25s}
.rv .kicker::before{width:0;transition:width .7s .15s cubic-bezier(.2,.7,.2,1)}
.rv.is-in .kicker::before{width:26px}
.btn svg,.need-go svg,.door .go svg,.ds-go svg{transition:transform .2s ease}
.btn:hover svg,.need:hover .need-go svg,.door:hover .go svg,.dedicated-strip:hover .ds-go svg{transform:translateX(3px)}
.faq summary::after{transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] p{animation:fade-up .35s cubic-bezier(.2,.7,.2,1) both}

@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes grow{from{width:0}to{width:26px}}
/* hero: the copy rises in sequence over a photograph that settles out of a slow
   push-in. Transform and opacity only, and the whole thing collapses under
   prefers-reduced-motion. */
.hero .kicker,.hero h1,.hero .lede,.hero .btn-row{animation:fade-up .7s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.07s}.hero .lede{animation-delay:.16s}.hero .btn-row{animation-delay:.25s}
.hero .kicker::before{animation:grow .8s .3s cubic-bezier(.2,.7,.2,1) both}
.hero-media img{animation:hero-settle 1.5s cubic-bezier(.16,.8,.3,1) both}
.hero-cap{animation:fade-up .6s 1.05s cubic-bezier(.2,.7,.2,1) both}
/* lane map: corridors draw, then the places and shields fade up */
/* header settles once you scroll past the hero */
.site-header{transition:box-shadow .25s ease}
.header-row,.cred-bar{transition:height .25s ease,padding .25s ease}
.is-scrolled .site-header{box-shadow:0 10px 26px -22px oklch(0 0 0 / .4)}
.is-scrolled .header-row{height:58px}
.is-scrolled .cred-bar{padding:.18rem 0}
/* print shares this block on purpose: a scroll-triggered .rv/.proof-item reveal
   never fires for content that was never scrolled into view, so without this a printed
   page would be mostly blank past the first screen -- verified live (32 .rv blocks, 0
   .is-in, opacity:0) before this line was added. Same fix as reduced-motion: show
   everything, kill the animation, since neither context can play or needs the motion. */
@keyframes hero-settle{from{transform:scale(1.055)}to{transform:scale(1)}}

@media print, (prefers-reduced-motion:reduce){
  .rv,.rv li,.proof-item{
    opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .rv .kicker::before,.hero .kicker::before{width:26px!important;animation:none!important}
  .hero .kicker,.hero h1,.hero .lede,.hero .btn-row,.hero-media img,.hero-cap{animation:none!important;opacity:1;transform:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  /* four-across becomes two-across: the lead card keeps its emphasis, the four
     middle cards pair off, the wide one stays wide. */
  .needs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .need{grid-column:span 2}
  .need-lead,.need-wide{grid-column:span 4}
  .need-lead .need-art{aspect-ratio:16/7}
}
@media (max-width:1000px){
  .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .proof-item:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .proof-item:nth-child(4n){border-right:0}
  /* below this the horizontal line has no room to space its stops, so the run
     turns vertical and the rule runs down the left */
  .lane-head{grid-template-columns:1fr;gap:.55rem}
  .lane-tag{grid-row:auto;justify-self:start}
  .lane-cta{grid-column:auto;padding-left:0;margin-top:1rem}
  .run{grid-template-columns:1fr;gap:.8rem}
  .run-road{justify-self:start;padding:.28rem .7rem}
  .run-stops{flex-direction:column;gap:.85rem;padding-left:.1rem}
  .run-stops::before{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .run-stops li,.run-stops li:first-child,.run-stops li:last-child{
    flex-direction:row;align-items:center;text-align:left;gap:.8rem}
  .stop-home{margin:0}
  .stops-list li{grid-template-columns:1fr;gap:.15rem;padding:.9rem 0}
  .split,.split-wide,.mapsplit{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .std-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .list-cols{columns:1}
  .capstat-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .doors,.std-row{grid-template-columns:1fr}
  .needs{grid-template-columns:1fr}
  .need,.need-lead,.need-tall,.need-wide{grid-column:span 1}
  /* the wide card stops being a row on a phone -- a 38% image column is a stamp */
  .need-wide{flex-direction:column}
  .need-wide .need-art{width:100%;max-width:none;aspect-ratio:16/9}
  .need-wide .need-body{padding:1.05rem 1.2rem 1.2rem}
  .need-lead .need-art,.need-tall .need-art{aspect-ratio:16/9}
  .hero{min-height:clamp(24rem,78vh,34rem)}
  .hero-shade{background:
    linear-gradient(to top,oklch(0.16 0.01 60 / .84) 0%,oklch(0.16 0.01 60 / .84) 46%,oklch(0.16 0.01 60 / .70) 78%,oklch(0.16 0.01 60 / .48) 100%)}
  .photoband-shade,.page-hero.photoband .photoband-shade{background:
    linear-gradient(to top,oklch(0.16 0.01 60 / .84) 0%,oklch(0.16 0.01 60 / .84) 48%,oklch(0.16 0.01 60 / .70) 100%)}
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-item{border-bottom:1px solid var(--line)}
  .proof-item:nth-child(even){border-right:0}
  .hero h1{font-size:var(--fs-800)}
  .marklist li,.marklist-tight li{grid-template-columns:1fr;gap:.15rem}
  .capstat{padding:1.3rem}
}

/* ===========================================================================
   primetranscorp.com launch — mega menu, answer blocks, market chips,
   fact bars, door grids and the mobile action bar.
   Everything here uses the existing tokens. No new colour was invented: the
   contrast probe measured 0 failures in both themes before this, and a fresh
   hue would have had to be re-measured with its own -ink tier.
   =========================================================================== */

/* ---- top nav items that open a panel ------------------------------------ */
.nav-item{position:static}
.nav a.nav-top{display:inline-flex;align-items:center;gap:.25rem}
.nav a.nav-top svg{opacity:.6;transition:transform .15s ease}
.nav-item[data-open] > a.nav-top svg{transform:rotate(180deg);opacity:1}
.nav-item[data-open] > a.nav-top{background:var(--paper-3)}

/* The panel is a table of contents, not a shop window: hairline top, paper
   ground, four plain columns. It is hidden with [hidden] so it is inert for
   keyboard and screen readers until opened, not merely invisible. */
.mega{position:absolute;left:0;right:0;top:100%;z-index:38;
  background:var(--paper-2);border-top:1px solid var(--line);
  box-shadow:var(--shadow-pop);animation:megaIn .14s ease both}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.mega{animation:none}}
.mega-inner{padding:1.5rem 0 1.1rem}
.mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem 2rem}
.mega-grid h3{margin:0 0 .5rem;font-family:var(--font-mono);font-size:var(--fs-300);
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:500}
.mega-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.05rem}
.mega-grid a{display:block;padding:.36rem .5rem;margin-left:-.5rem;border-radius:var(--r-sm);
  color:var(--ink);font-size:var(--fs-350);line-height:1.35}
.mega-grid a:hover{background:var(--brand-soft);text-decoration:none}
.mega-grid a b{font-weight:500}
.mega-foot{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.mega-foot a{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);
  font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.07em;color:var(--brand-deep)}
@media (max-width: 1080px){ .mega{display:none} }

/* ---- the answer block ---------------------------------------------------
   One question, one self-contained answer, immediately after the hero. It is
   shaped for an extractor: a real heading, then a single paragraph that still
   reads correctly with none of the page around it. The accent rule is there so
   a human reads it as the page's stated position rather than a FAQ widget. */
.aeo{padding-top:var(--sp-7);padding-bottom:0}
.aeo-card{max-width:var(--prose);border-left:3px solid var(--brand);
  padding:.15rem 0 .15rem 1.25rem}
.aeo-q{margin:0 0 .5rem;font-size:var(--fs-600);line-height:1.25;letter-spacing:-.01em}
.aeo-a{margin:0;font-size:var(--fs-500);line-height:1.6;color:var(--ink)}
@media (max-width: 640px){ .aeo-card{padding-left:1rem} }

/* ---- fact bar ----------------------------------------------------------- */
.factbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:var(--paper-2)}
.factbar > div{padding:.95rem 1.1rem;border-right:1px solid var(--line)}
.factbar > div:last-child{border-right:0}
.factbar dt{font-family:var(--font-mono);font-size:var(--fs-300);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin:0 0 .3rem}
.factbar dd{margin:0;font-size:var(--fs-350);line-height:1.45;color:var(--ink)}
@media (max-width: 760px){
  .factbar > div{border-right:0;border-bottom:1px solid var(--line)}
  .factbar > div:last-child{border-bottom:0}
}

/* ---- door grid (services / markets / guides cards) ---------------------- */
.door-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1rem}
.door-go{margin-top:auto;padding-top:.55rem;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:var(--fs-300);text-transform:uppercase;
  letter-spacing:.07em;color:var(--brand-deep)}
.band .door-go{color:oklch(0.82 0.09 258)}
.door-grid .door p{font-size:var(--fs-350);color:var(--muted);margin:.15rem 0 0}
.band .door-grid .door p{color:var(--band-muted)}

/* ---- market chips ------------------------------------------------------- */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-link{display:inline-flex;align-items:baseline;gap:.5rem;padding:.5rem .85rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--paper-2);
  color:var(--ink);font-size:var(--fs-350);font-weight:500;line-height:1.2;
  transition:border-color .15s ease,background .15s ease}
.chip-link:hover{border-color:var(--brand-line);background:var(--brand-soft);text-decoration:none}
.chip-link span{font-family:var(--font-mono);font-size:var(--fs-300);color:var(--muted)}

/* ---- running prose inside a generated section --------------------------- */
p.prose{max-width:var(--prose);font-size:var(--fs-400);line-height:1.65;color:var(--ink);
  margin:0 0 1rem}
p.prose + p.prose{margin-top:-.2rem}
.section-head + p.prose{margin-top:.2rem}

/* ---- mobile action bar --------------------------------------------------
   A carrier's mobile visitor is usually standing on a lot with a phone. The
   two things they need are the number and the quote form, and neither should
   cost a scroll. Hidden on desktop, where the header CTA is always visible. */
.sticky-cta{display:none}
@media (max-width: 760px){
  .sticky-cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:37;padding:.55rem .7rem
    calc(.55rem + env(safe-area-inset-bottom,0px));
    background:oklch(0.975 0.006 85 / 0.94);backdrop-filter:blur(8px);
    border-top:1px solid var(--line-2)}
  .sticky-cta .btn{width:100%;justify-content:center;margin:0}
  body{padding-bottom:4.6rem}
}
@media print{ .sticky-cta{display:none!important} }

/* market groups on the home page */
.mkt-group + .mkt-group{margin-top:1.4rem}
.mkt-group h3{margin:0 0 .6rem;font-family:var(--font-mono);font-size:var(--fs-300);
  text-transform:uppercase;letter-spacing:.08em;color:var(--band-muted);font-weight:500}
.band .chip-link{background:var(--navy-2);border-color:var(--band-line);color:var(--band-text)}
.band .chip-link span{color:var(--band-muted)}
.band .chip-link:hover{background:oklch(0.32 0.06 258);border-color:oklch(0.7 0.1 258)}
.band p.prose{color:var(--band-text)}
.capstat-name{margin:0;font-family:var(--font-display);font-size:var(--fs-700);
  font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}