/* ============================================================================
   Interior pages — service and location. "Night Glass".

   Loaded after page.css, which carries the hero, cards, feature lists, steps,
   FAQ and the request sheet. This file composes the LONG DOCUMENT.

   The problem it solves, measured on windshield-replacement at 1440px: the
   section head spanned the full 1240px wrap while the prose under it capped at
   62ch and sat left, leaving 642px of dead right margin — 52% of the content
   width — down two whole sections, and a measure that jumped between 545px
   (paragraphs) and 1188px (tick lists) inside a single section. Nine bands of
   that is a Word export, not a page.

   So a section is a CHAPTER in one of three shapes, chosen from its own nodes:

     .sec--doc    sticky chapter head in the left rail, one reading column
                  beside it. The default. Nothing is left empty, the heading
                  stays with the reader through a 1,500px FAQ, and the rail is
                  scroll choreography with no JS at all.
     (wide)       cards, a price table or 3+ subsections keep the full 1240px
                  wrap and a horizontal head — they need the measure.
     .sec--proc   the ordered list: the page's one inverted band, split against
                  a photograph. The document's mid-point visual break.

   Three type sizes carry the hierarchy: hero H1, wide H2 (38), chapter H2 (30).
   ========================================================================= */

:root{
  /* A document column, narrower than the site wrap on purpose: the width
     contrast between a chapter and a full-measure spread is itself the
     rhythm. 1068 − 2×52 gutter = 964 inner; a 340 rail + 63 gap leaves a
     561px reading column, which is ~66 characters at 17px. */
  --wrap-doc:1068px;
  --rail:340px;
}

/* ===================================================== hero ============== */
/* Shorter than the homepage hero: an interior page is a document, and its job
   is to start the document, not to hold the whole first screen. */
.hero--int .hero__in{min-height:clamp(430px,58vh,560px);
  padding-block:clamp(40px,5.4vh,66px)}
.hero--int .hero__c{max-width:760px}
.h1--int{font-size:clamp(29px,3.7vw,49px);line-height:1.04}
.h1--int em{font-style:normal;color:var(--plum-lt)}
.hero__lede--sm{font-size:clamp(15px,1.05vw,16.4px);line-height:1.62;
  color:rgba(255,255,255,.76);margin-top:12px}

/* The homepage load sequence is keyed to its four composed headline lines,
   which interior H1s do not have — so without this they were the only heroes
   on the site that simply appeared. Same beats, same curve, one element. */
.js .crumbs{animation:ng-rise-sm .7s var(--ease) .04s backwards}
.js .h1--int{animation:ng-rise var(--t-entrance) var(--ease) .12s backwards}
.js .hero__lede--sm:nth-of-type(2){animation-delay:.54s}
.js .hero__lede--sm:nth-of-type(3){animation-delay:.62s}
@media (prefers-reduced-motion:reduce){
  .js .crumbs,.js .h1--int{animation:none}
}

/* ===================================================== breadcrumb ======== */
.crumbs{margin-bottom:18px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:12.4px;font-weight:600;letter-spacing:.02em}
.crumbs li{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.62)}
.crumbs li + li::before{content:"";width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.34)}
.crumbs a{color:rgba(255,255,255,.78);text-decoration:none;
  transition:color var(--t-feedback) var(--ease)}
.crumbs [aria-current]{color:var(--plum-lt)}
@media (hover:hover){ .crumbs a:hover{color:#fff} }
.crumbs a:focus-visible{color:#fff}

/* ===================================================== the chapter ======= */
.wrap--doc{max-width:var(--wrap-doc)}

.chap{display:grid;grid-template-columns:minmax(0,var(--rail)) minmax(0,1fr);
  gap:clamp(32px,4.4vw,72px);align-items:start}

/* The rail. Sticky, so the heading is still beside the reader at the bottom of
   a long chapter — which is the whole point of giving it a column. */
.chap__hd{position:sticky;top:calc(var(--bar) + 38px);align-self:start;
  padding-top:22px;border-top:1px solid var(--line-2)}
/* Drawn, not popped - and gated on .js like every other reveal on the site,
   so with scripting off the mark is simply there. (.no-js is not a class this
   site sets; a rule keyed to it would have left the accent at scaleX(0).) */
.chap__hd::before{content:"";position:absolute;left:0;top:-1px;height:2px;
  width:56px;background:var(--plum);transform-origin:left}
.js .chap__hd::before{transform:scaleX(0);
  transition:transform var(--t-drawn) var(--ease) .1s}
.js .chap__hd.in::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .js .chap__hd::before{transform:none;transition:none}
}
/* relative, not static: .on-dark > .wrap is positioned, so a static head sent its
   own accent rule to the band's top-left corner instead of the heading's. */
.chap__hd--flat{position:relative;top:auto;border-top-color:var(--line-dk)}
.chap__hd--flat::before{background:var(--plum-br)}

.chap__n{display:block;font-family:var(--f-disp);font-size:12.4px;font-weight:600;
  letter-spacing:.15em;color:var(--acc);font-variant-numeric:tabular-nums;
  margin-bottom:13px}
.on-dark .chap__n{color:var(--plum-br)}

.chap__h{font-size:clamp(24.5px,2.25vw,30px);line-height:1.12;
  letter-spacing:var(--tr-md);margin:0}
.chap__l{margin-top:15px;font-size:14.9px;line-height:1.62;color:var(--gray);
  max-width:34ch}
.on-dark .chap__l{color:rgba(255,255,255,.72)}

.chap__bd{min-width:0}

/* Inside a chapter the COLUMN is the measure — a second 62ch cap on top of it
   is what put the hole back. */
.chap__bd .copy,.chap__bd .lede{max-width:none}
.sbody > * + *{margin-top:clamp(18px,2.2vw,26px)}
.sbody .copy + .copy{margin-top:15px}
.sbody .copy{font-size:16.9px;line-height:1.68}

/* The opening paragraph of a chapter carries the weight down from the heading;
   without it the page steps from 30px straight to 17px with nothing between. */
.copy--lead{font-size:19px;line-height:1.56;color:var(--ink-2)}
.on-dark .copy--lead{color:rgba(255,255,255,.9)}

/* A term the client's own sentence already opens with. */
.term{font-family:var(--f-disp);font-weight:700;color:var(--ink);
  letter-spacing:var(--tr-sm)}
.on-dark .term{color:#fff}
.copy--term{color:var(--gray)}

/* A section of pure prose is a NOTE — the shape that was half empty, and the
   one a bare column makes look unfinished. */
.sbody--note{padding:clamp(22px,2.5vw,32px) clamp(22px,2.7vw,36px);
  border-left:2px solid var(--plum);
  border-radius:0 var(--r-lg) var(--r-lg) 0}
.sec--white .sbody--note{background:var(--panel)}
.sec--panel .sbody--note{background:var(--white);
  box-shadow:0 1px 2px rgba(22,19,32,.04),0 12px 30px -18px rgba(22,19,32,.22)}
.sbody--note > :first-child{margin-top:0}

/* A WIDE section's body is a two-track grid: anything that needs the full
   measure (a plate, the price table, the card grid, subsection groups) spans
   both, and prose takes one track. Before this the body ran a 1136px plate
   straight into a 545px paragraph with 740px of nothing beside it - the same
   hole the chapter grid fixed, one level down. Consecutive paragraphs pair up
   on their own, so no rule has to know what a given page's prose looks like. */
.sbody--wide{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.4vw,30px) clamp(26px,3.4vw,54px);align-items:start}
.sbody--wide > *{margin-top:0}
.sbody--wide > .plate,.sbody--wide > .tw,.sbody--wide > .svc__gr,
.sbody--wide > .grp,.sbody--wide > .faq,.sbody--wide > .steps,
.sbody--wide > .area__media{grid-column:1/-1}
/* a lead paragraph keeps one track - at 19px across 1136px it is 130 characters */
.sbody--wide > .copy--lead{grid-column:span 1}
.sbody--wide > .copy + .copy{margin-top:0}
@media (max-width:820px){
  .sbody--wide{grid-template-columns:1fr}
}

/* ===================================================== statement ========= */
/* One to three paragraphs of plain prose. The chapter grid cannot hold this -
   a heading in a 340px rail and eighty words of 17px copy beside it are two
   short blocks with a 400px hole under whichever is taller. So the statement
   gets its own beat: the chapter numeral at scale, the heading under it, and
   the prose opposite at statement size. Because the prose is 21px rather than
   17px the two columns come out within about a line of each other, which is
   what the chapter grid could never manage on this little content.

   Measure note: `ch` resolves against the element's OWN font-size, so a cap on
   the wrapper (inherited 16px) is not the cap you meant for 21px text. Both
   caps live on the elements that set the size. */
.stmt{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(24px,4vw,72px);align-items:start}
.stmt__l{min-width:0}
/* Solid, not stroke-outlined. An outline needs a transparent text-fill, and a
   transparent fill is still TEXT: the contrast audit read it as 1:1 on panel
   and failed the page. aria-hidden does not change that - it is rendered type
   either way - so the numeral is a real accent mark at a size that carries,
   rather than a ghost that only looks like one. --plum clears 3:1 for large
   text on both light grounds (8.09 on panel, 9.17 on white); a statement never
   lands on the inverted band, but --plum-br is there in case that changes. */
.stmt__n{display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(42px,4.8vw,66px);line-height:.86;
  font-variant-numeric:tabular-nums;letter-spacing:var(--tr-xl);
  margin-bottom:clamp(12px,1.4vw,18px);
  color:var(--acc);user-select:none}
.on-dark .stmt__n{color:var(--plum-br)}
.stmt__h{font-size:clamp(26px,2.7vw,36px);line-height:1.08;
  letter-spacing:var(--tr-lg);margin:0}
.stmt__b{padding-top:clamp(4px,1.2vw,16px)}
.stmt__p{font-size:clamp(17.6px,1.5vw,20.5px);line-height:1.58;color:var(--ink-2);
  margin:0;text-wrap:pretty}   /* the .56fr column IS the measure: ~58ch at 20.5px */
.stmt__p + .stmt__p{margin-top:clamp(13px,1.4vw,19px)}
.on-dark .stmt__p{color:rgba(255,255,255,.86)}
.stmt .area__media{grid-column:1/-1;max-width:none}
.stmt__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:clamp(22px,2.6vw,30px)}
@media (max-width:860px){
  .stmt{grid-template-columns:1fr;gap:clamp(16px,2.4vw,24px)}
  .stmt__p{max-width:none}
}

/* ===================================================== plates ============ */
.plate{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:6px clamp(16px,1.8vw,22px)}
.sec--white .plate{background:var(--panel);border-color:var(--line-2)}
.on-dark .plate{background:rgba(255,255,255,.035);border-color:var(--line-dk)}

/* ===================================================== tick list ========= */
.ticks{display:grid;grid-template-columns:1fr;gap:0 clamp(20px,2.6vw,38px)}
.ticks--2{grid-template-columns:1fr 1fr}
.ticks__i{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
  font-size:15.6px;line-height:1.5;color:var(--ink-2);
  padding:13px 0;border-top:1px solid var(--line)}
.ticks:not(.ticks--2) .ticks__i:first-child{border-top:0}
.ticks--2 .ticks__i:nth-child(-n+2){border-top:0}
.ticks__i svg{width:18px;height:18px;margin-top:1px;color:var(--acc)}
.sec--white .ticks__i{border-top-color:var(--line-2)}
.on-dark .ticks__i{color:rgba(255,255,255,.84);border-top-color:var(--line-dk)}
.on-dark .ticks__i svg{color:var(--plum-br)}
@media (max-width:640px){
  .ticks--2{grid-template-columns:1fr}
  .ticks--2 .ticks__i:nth-child(2){border-top:1px solid var(--line)}
}

/* ===================================================== feature pairs ===== */
/* In a chapter column these are one column of ruled rows; a wide section gets
   two. Same rows either way. */
.feat--2{grid-template-columns:1fr;gap:0}
.sec:not(.sec--doc) .feat--2{grid-template-columns:1fr 1fr;
  gap:0 clamp(24px,3.4vw,46px)}
.feat--plain .feat__i{grid-template-columns:1fr;gap:0}
.feat--plain .feat__t{margin-bottom:5px}
.feat--2 .feat__i{padding:18px 0;border-top:1px solid var(--line-2)}
.feat--2 .feat__i:first-child{border-top:0;padding-top:0}

/* Every list on an interior page sits on a plate - ticks, prices and these -
   so containment is one language rather than three. Not inside a group card:
   a plate in a plate is doubled borders (design-patterns.md). */
.sbody > .feat--2{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:4px clamp(16px,1.8vw,24px) 10px}
.sec--white .sbody > .feat--2{background:var(--panel);border-color:var(--line-2)}
.on-dark .sbody > .feat--2{background:rgba(255,255,255,.035);
  border-color:var(--line-dk)}
.sbody > .feat--2 .feat__i{padding:17px 0}
.sbody > .feat--2 .feat__i:first-child{padding-top:15px}
.sec:not(.sec--doc) .sbody > .feat--2 .feat__i:nth-child(2){padding-top:15px}
.sec:not(.sec--doc) .feat--2 .feat__i:nth-child(2){border-top:0;padding-top:0}
@media (max-width:820px){
  .sec:not(.sec--doc) .feat--2{grid-template-columns:1fr}
  .sec:not(.sec--doc) .feat--2 .feat__i:nth-child(2){
    border-top:1px solid var(--line-2);padding-top:18px}
}

/* ===================================================== subsection groups = */
.grp{display:grid;gap:clamp(22px,3vw,38px) clamp(24px,3.4vw,48px)}
.grp--2{grid-template-columns:1fr 1fr}
/* Four groups of uneven length in a 2-col GRID align by row, so a two-item
   group leaves a 250px hole beside a four-item one. Columns pack instead. */
.grp--3{display:block;columns:2;column-gap:clamp(24px,3.4vw,48px)}
.grp--3 > .grp__i{break-inside:avoid;margin-bottom:clamp(24px,3.2vw,40px)}
.grp--3 > .grp__i:last-child{margin-bottom:0}
.sec--doc .grp--2{grid-template-columns:1fr}
.sec--doc .grp--3{columns:1}
.grp__i{padding-top:20px;border-top:2px solid var(--plum)}
.grp__h{margin-bottom:12px}
/* one column inside a group, whatever the section shape: a 2-up definition
   list of two or three items leaves a ragged empty cell under it */
.grp__i .ticks,.sec .grp__i .feat--2{grid-template-columns:1fr}
.sec .grp__i .feat--2 .feat__i:nth-child(2){border-top:1px solid var(--line-2);
  padding-top:18px}
.grp__i .plate{padding-block:2px}
@media (max-width:820px){
  .grp--2{grid-template-columns:1fr}
  .grp--3{columns:1}
}

/* ===================================================== price bands ======= */
/* A cost section's job is to let someone find a number. As a definition list
   the figure carried no more weight than the sentence around it, so thirteen
   rows scanned as one grey block. The figure now leads its own line in the
   display face, at tabular width, with the rest of the client's sentence
   beside it as a note. */
/* Columns, not a grid. A grid aligns by row, so a two-row band beside a
   four-row one leaves a 180px hole; stretching the short one to match just
   moves the hole inside the card, which looks like missing content. Columns
   let each plate size to its own rows and balance the two stacks. */
.prg{display:block;columns:2;column-gap:clamp(18px,2.2vw,28px)}
.prg > .grp__i{break-inside:avoid;margin-bottom:clamp(18px,2.2vw,28px)}
.prg > .grp__i{padding:0;border-top:0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(22,19,32,.04),0 16px 34px -24px rgba(22,19,32,.26)}
.sec--white .prg > .grp__i{background:var(--panel);border-color:var(--line-2);
  box-shadow:none}
.on-dark .prg > .grp__i{background:rgba(255,255,255,.035);border-color:var(--line-dk);
  box-shadow:none}

.prg .grp__h{margin:0;padding:19px clamp(18px,1.9vw,24px) 16px;
  font-size:clamp(16.4px,1.35vw,18.4px);line-height:1.2;
  border-bottom:1px solid var(--line-2);position:relative}
.prg .grp__h::before{content:"";position:absolute;left:clamp(18px,1.9vw,24px);
  top:0;width:34px;height:2px;background:var(--plum)}
.on-dark .prg .grp__h{border-bottom-color:var(--line-dk)}
.on-dark .prg .grp__h::before{background:var(--plum-br)}

.pr{padding:2px clamp(18px,1.9vw,24px) 14px}
.pr__i{padding:15px 0;border-top:1px solid var(--line)}
.sec--white .pr__i{border-top-color:var(--line-2)}
.on-dark .pr__i{border-top-color:var(--line-dk)}
.pr__i:first-child{border-top:0}
.pr__t{display:block;font-family:var(--f-disp);font-weight:600;font-size:15.3px;
  line-height:1.32;color:var(--ink);letter-spacing:var(--tr-sm)}
.on-dark .pr__t{color:#fff}
.pr__v{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 9px;margin-top:6px}
.pr__f{font-family:var(--f-disp);font-weight:700;font-size:clamp(18px,1.5vw,20.5px);
  line-height:1.16;color:var(--acc-2);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tr-sm);white-space:nowrap}
.on-dark .pr__f{color:var(--plum-br)}
.pr__n{font-size:13.7px;line-height:1.5;color:var(--gray)}
.on-dark .pr__n{color:rgba(255,255,255,.72)}
/* a value whose remainder is a whole sentence, not a short note, wraps under */
.pr__n{flex:1 1 auto;min-width:0}
/* a band that closes on its own unlabelled sentence */
.pr__f-note{margin:0;padding:15px 0;border-top:1px solid var(--line);
  font-size:14.4px;line-height:1.56;color:var(--gray)}
.sec--white .pr__f-note{border-top-color:var(--line-2)}
.on-dark .pr__f-note{border-top-color:var(--line-dk);color:rgba(255,255,255,.72)}
@media (max-width:900px){ .prg{columns:1} }

/* ===================================================== FAQ v2 =========== */
/* One plate of hairline-divided rows, not a stack of floating cards with gaps
   between them - the same containment language the tick plates, the price
   plates and the rate index already use. The marker is a circled +/- rather
   than a bare glyph, so the row states plainly that it opens. */
.faq--v2{display:block;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);overflow:hidden}
.sec--white .faq--v2{background:var(--panel);border-color:var(--line-2)}
.on-dark .faq--v2{background:rgba(255,255,255,.035);border-color:var(--line-dk)}

.faq--v2 .faq__i{background:transparent;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--line-2)}
.on-dark .faq--v2 .faq__i{border-top-color:var(--line-dk)}
.faq--v2 .faq__i:first-child{border-top:0}

.faq--v2 .faq__q{grid-template-columns:auto 1fr auto;gap:16px;
  padding:clamp(18px,2vw,23px) clamp(18px,2.1vw,26px)}
.faq--v2 .faq__n{font-size:12.4px;font-weight:500;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;align-self:start;margin-top:4px}
/* regular weight, softer ink - see the note on .faq__q .h3 in page.css. This
   rule had been set to 600, undoing an earlier "too bold" fix. */
.faq--v2 .faq__q .h3{font-size:clamp(16.2px,1.26vw,17.4px);line-height:1.42;
  font-weight:400;letter-spacing:-.008em;color:var(--ink-2)}

/* the marker: a ring that fills on open and drops its vertical stroke */
.faq--v2 .faq__x{width:30px;height:30px;border-radius:50%;flex:none;
  border:1px solid var(--line-2);align-self:start;
  transition:background var(--t-feedback) var(--ease),
             border-color var(--t-feedback) var(--ease),
             transform var(--t-gesture) var(--ease)}
.on-dark .faq--v2 .faq__x{border-color:var(--line-dk2)}
.faq--v2 .faq__x::before{width:11px;height:1.8px}
.faq--v2 .faq__x::after{width:1.8px;height:11px}
.faq--v2 .faq__i[open] .faq__x{background:var(--plum);border-color:var(--plum);
  transform:rotate(180deg)}
.faq--v2 .faq__i[open] .faq__x::before{background:#fff}
.faq--v2 .faq__i[open] .faq__q .h3{color:var(--acc-2)}
.on-dark .faq--v2 .faq__i[open] .faq__q .h3{color:var(--plum-br)}
@media (hover:hover){
  .faq--v2 .faq__q:hover .faq__x{border-color:var(--plum)}
  .faq--v2 .faq__q:hover .h3{color:var(--acc-2)}
}
.faq--v2 .faq__q:focus-visible .faq__x{border-color:var(--plum)}

/* the answer lines up under the question, not under the numeral */
.faq--v2 .faq__a{padding:0 clamp(18px,2.1vw,26px) clamp(20px,2.2vw,26px)
  calc(clamp(18px,2.1vw,26px) + 38px)}
/* 16, not 15.4: an answer smaller than the page's own body copy read as a
   footnote to its question */
.faq--v2 .faq__a .copy{font-size:16px;line-height:1.66;max-width:64ch}
@media (max-width:560px){
  .faq--v2 .faq__a{padding-left:clamp(18px,2.1vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .faq--v2 .faq__x{transition:none}
}

/* ===================================================== price bento ====== */
/* Each price a tile; the board's shape comes from the count. Odd counts put
   the last priced item - on every list here, the top of the range - in a tall
   accent tile down the right. DOM order is the source's; grid placement does
   the arranging, so the stripped text still matches the .docx. */
.sbody--lad{display:block}
.sbody--lad > * + *{margin-top:clamp(16px,1.9vw,24px)}
.sbody--lad > .copy{max-width:64ch}
.sbody--lad > .bento{margin-top:clamp(20px,2.6vw,30px)}

.bento{display:grid;gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.bento--4{grid-template-columns:repeat(2,1fr)}
/* 3 = two tiles stacked left, the feature tall on the right */
.bento--3.bento--feat{grid-template-columns:1fr 1.12fr;grid-auto-rows:auto}
.bento--3.bento--feat .bento__i--feat{grid-column:2;grid-row:1 / span 2}
/* 5 = a 2x2 grid, the feature tall on the right */
.bento--5.bento--feat{grid-template-columns:1fr 1fr 1.12fr}
.bento--5.bento--feat .bento__i--feat{grid-column:3;grid-row:1 / span 2}

.bento__i{position:relative;display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,2.1vw,28px);border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--line);overflow:hidden}
.sec--white .bento__i{background:var(--panel);border-color:var(--line-2)}

.bento__t{font-family:var(--f-disp);font-weight:600;font-size:15px;line-height:1.3;
  color:var(--ink-2);letter-spacing:var(--tr-sm);text-wrap:balance}
.bento__f{font-family:var(--f-disp);font-weight:700;
  font-size:clamp(28px,2.9vw,40px);line-height:1.02;letter-spacing:var(--tr-lg);
  color:var(--acc-2);font-variant-numeric:tabular-nums;margin-top:auto;
  padding-top:clamp(14px,1.8vw,26px)}
.bento__s{font-size:13.8px;line-height:1.5;color:var(--gray)}
.bento__d{margin:6px 0 0;font-size:14.6px;line-height:1.58;color:var(--gray)}
.bento__i--nofig .bento__d{margin-top:auto;padding-top:14px}

/* the feature: filled in the accent, the figure at its largest */
/* a solid base under the gradient: if the image layer ever fails to paint the
   white text must still land on plum, not on the pale section ground - and it
   is what the contrast audit resolves against */
.bento__i--feat{background-color:var(--plum);
  background-image:linear-gradient(155deg,var(--plum-dp),var(--plum) 68%);
  border-color:transparent;color:#fff;justify-content:flex-end}
.sec--white .bento__i--feat{background-color:var(--plum);
  background-image:linear-gradient(155deg,var(--plum-dp),var(--plum) 68%)}
.bento__i--feat::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 100% 0%,rgba(201,143,216,.28),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px)}
.bento__i--feat > *{position:relative}
.bento__i--feat .bento__t{color:#fff;font-size:16.5px}
/* one line: a range broken at its dash reads as two numbers */
.bento__i--feat .bento__f{color:#fff;font-size:clamp(28px,3.05vw,46px);margin-top:auto;
  white-space:nowrap}
.bento__i--feat .bento__s,.bento__i--feat .bento__d{color:rgba(255,255,255,.93)}

.rate__note{margin:18px 0 0;font-size:15.4px;line-height:1.6;color:var(--gray);
  max-width:64ch}

/* the tiles sit inside a block that is itself fading in, so what the eye gets
   is the PRODUCT of the two opacities - keep the inner fade short and the
   cascade tight, or the board arrives long after its heading */
.js .bento__i{opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .6s var(--ease)}
.js .ro.in .bento__i{opacity:1;transform:none}
.js .ro.in .bento__i:nth-child(2){transition-delay:.04s}
.js .ro.in .bento__i:nth-child(3){transition-delay:.08s}
.js .ro.in .bento__i:nth-child(4){transition-delay:.12s}
.js .ro.in .bento__i:nth-child(n+5){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .js .bento__i{opacity:1;transform:none;transition:none}
}
@media (max-width:900px){
  .bento--5.bento--feat{grid-template-columns:1fr 1fr}
  .bento--5.bento--feat .bento__i--feat{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:620px){
  .bento,.bento--4,.bento--3.bento--feat,.bento--5.bento--feat{grid-template-columns:1fr}
  .bento__i--feat{grid-column:auto!important;grid-row:auto!important}
}

/* ===================================================== process band ====== */
/* The one inverted band, and the document's mid-point visual break. */
.sec--proc{background:var(--coal)}
.proc{display:grid;grid-template-columns:minmax(0,.40fr) minmax(0,.60fr);
  gap:clamp(30px,4.6vw,76px);align-items:start}
.proc__ph{position:sticky;top:calc(var(--bar) + 34px);align-self:start;
  aspect-ratio:4/5;max-height:min(64vh,600px);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-dk)}
.proc__ph img{width:100%;height:100%;object-fit:cover;object-position:46% 42%;
  filter:saturate(.92) contrast(1.04)}
.proc__gl{position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(16,12,21,.74),transparent)}
.proc__bd{min-width:0}
.proc__bd .chap__l{max-width:46ch}
.proc__bd .sbody{margin-top:clamp(22px,2.6vw,32px)}
/* a band chosen from a bulleted or subheaded process section: its groups and
   lists read down the 60% column, one at a time */
.sec--proc .grp--2,.sec--proc .grp--3{display:grid;columns:auto;grid-template-columns:1fr}
.sec--proc .grp--3 > .grp__i{margin-bottom:0}
.sec--proc .ticks--2{grid-template-columns:1fr}
.sec--proc .ticks--2 .ticks__i:nth-child(2){border-top:1px solid var(--line-dk)}
@media (max-width:980px){
  .proc{grid-template-columns:1fr;gap:28px}
  /* a ratio PLUS a max-height means the height cap wins and the frame stops
     short of its own column - band it by height instead */
  .proc__ph{position:relative;top:0;order:2;width:100%;
    aspect-ratio:auto;height:clamp(210px,32vw,300px);max-height:none}
  .proc__bd{order:1}
}

/* ===================================================== vertical steps ==== */
/* A ten-step installation sequence is a ledger, not a three-across row. */
.steps--v{grid-template-columns:1fr;gap:0;margin-top:clamp(22px,2.6vw,32px);
  counter-reset:none}
.steps--v .steps__s{display:grid;grid-template-columns:52px 1fr;gap:4px 18px;
  padding:17px 0;border-top:1px solid var(--line-dk)}
.steps--v .steps__s:first-child{border-top:0;padding-top:0}
.steps--v .steps__n{grid-row:span 2;margin-bottom:0;width:44px;height:44px;
  font-size:17px;background:var(--coal);color:#fff;
  border:1px solid var(--plum-br);box-shadow:none}
.steps--v .steps__t{color:#fff;align-self:end}
/* a step that is a single sentence occupies the body column on its own */
.steps--v .steps__d--solo{align-self:center;font-size:15.6px;line-height:1.62}
.steps--v .steps__d{color:rgba(255,255,255,.78)}
@media (max-width:560px){
  .steps--v .steps__s{grid-template-columns:40px 1fr;gap:4px 14px}
  .steps--v .steps__n{width:38px;height:38px;font-size:15px}
}

/* ===================================================== price table ======= */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.ledger{width:100%;border-collapse:collapse;font-size:15.2px;min-width:460px}
.ledger th,.ledger td{text-align:left;padding:15px 18px;
  border-bottom:1px solid var(--line)}
.ledger thead th{font-family:var(--f-disp);font-size:11.4px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gray);
  background:var(--panel);border-bottom:1px solid var(--line-2)}
.ledger tbody th{font-weight:600;color:var(--ink)}
.ledger tbody td{color:var(--gray);font-variant-numeric:tabular-nums}
.ledger tbody tr:last-child th,.ledger tbody tr:last-child td{border-bottom:0}
@media (hover:hover){ .ledger tbody tr:hover th,.ledger tbody tr:hover td{
  background:var(--plum-tint)} }

/* ===================================================== interior heads ==== */
/* Hero H1 > wide H2 (38) > chapter H2 (30): the width of a section and the
   size of its heading say the same thing. */
.sec .h2{font-size:clamp(27px,3vw,38px)}
.sec--doc .h2.chap__h{font-size:clamp(24.5px,2.25vw,30px)}
.sec .shd{grid-template-columns:1.06fr .94fr;align-items:end}
/* page.css collapses .shd at 860px, but that rule is one class less specific
   than this one and interior.css loads after it - so without this the wide
   section heads stayed two-up all the way down to 400px. */
@media (max-width:860px){
  .sec .shd{grid-template-columns:1fr;gap:16px;align-items:start}
}

/* ===================================================== on the glass ====== */
.on-dark .feat--2 .feat__i{border-top-color:var(--line-dk)}
.on-dark .feat__t{color:#fff}
.on-dark .grp__i{border-top-color:var(--plum-br)}
.on-dark .grp__h{color:#fff}
.on-dark .tw{border-color:var(--line-dk);background:rgba(255,255,255,.03)}
.on-dark .ledger thead th{background:rgba(255,255,255,.05);color:rgba(255,255,255,.72);
  border-bottom-color:var(--line-dk2)}
.on-dark .ledger th,.on-dark .ledger td{border-bottom-color:rgba(255,255,255,.12)}
.on-dark .ledger tbody th{color:#fff}
.on-dark .ledger tbody td{color:rgba(255,255,255,.8)}

/* ===================================================== stacked block ===== */
/* A `lines` node - the address block the privacy and terms pages close on.
   render_lines emits spans, which run together inline without this. */
.lines{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.lines__l{font-size:16px;line-height:1.5;color:var(--gray)}
.lines__l:first-child{font-family:var(--f-disp);font-weight:700;color:var(--ink);
  font-size:17px}
.on-dark .lines__l,.on-dark .lines__l{color:rgba(255,255,255,.82)}
.on-dark .lines__l:first-child,.on-dark .lines__l:first-child{color:#fff}

/* ===================================================== misc ============== */
.sub{margin-top:8px}
.lk--row{padding:12px 0}
.sbody .svc__gr{margin-top:clamp(18px,2.2vw,26px)}
.sbody .faq{margin-top:clamp(14px,1.8vw,22px)}

/* ===================================================== collapse ========== */
/* Below the chapter width the rail stops being a column and becomes a header:
   sticky in a single column would pin a heading over its own body. */
@media (max-width:1000px){
  .chap{grid-template-columns:1fr;gap:clamp(20px,3vw,30px)}
  .chap__hd{position:static;top:auto}
  .chap__l{max-width:60ch}
}

/* ===================================================== closing band ====== */
/* The closing band is .con.on-dark, not .dark, and every dark-ground rule in
   this file used to be scoped to .dark - so a checklist here fell back to its
   LIGHT plate: a bright white slab beside the white quote card, competing with
   the one thing the band exists for. Rules are now keyed to .on-dark, which
   both dark grounds carry. And here the list drops its plate entirely: the
   request card is the only card in this band. */
.con__body > * + *{margin-top:14px}
.con__body > .copy + .ticks,.con__body > .ticks + .copy{margin-top:18px}
.con .plate{background:transparent;border:0;border-radius:0;padding:0}
.con .ticks__i{padding:10px 0;font-size:15.2px;border-top-color:rgba(255,255,255,.14)}
.con .ticks:not(.ticks--2) .ticks__i:first-child{border-top:0;padding-top:4px}
.con .ticks__i svg{color:var(--plum-lt)}

/* The left column carries the whole closing section - heading, prose, a
   checklist, the call line and the facts - and can run twice the height of the
   request card. The card rides alongside instead of stopping halfway, so the
   form is in reach wherever the reader is. Wide screens only; stacked below. */
@media (min-width:981px){
  .con__gr{align-items:start}
  .con__r{position:sticky;top:calc(var(--bar) + 24px)}
}

/* ===================================================== ABOUT ============= */
/* A company profile, composed in inc/compose-about-us.php. Every section is on
   the ONE site wrap and opens with the ONE head - hairline, plum tick, small
   numeral, H2 - so nothing jumps between bands. What sits under the head is a
   different object per section, and the three lists are three different
   objects: a hairline INDEX board, reason CARDS, a FLEET strip.

   Repeated items (service names, reasons, vehicle classes) are the display
   face at REGULAR weight in the softer ink - a stack of bold items is the
   thing this client has flagged three times as pulling at the eye. */
.abh__r .lede + .lede{margin-top:12px}
/* .sec .shd sets align-items:end for a lede under a short heading; a statement
   is several paragraphs, and bottom-aligned its heading sank to the foot of
   the row while the prose started at the top */
.sec .abh--st{align-items:start;margin-bottom:0}
.abh--st .abh__r{padding-top:clamp(2px,.7vw,10px)}
.abh--st .stmt__p{max-width:none}

/* inner hairlines only: every cell draws its top and left rule 1px outside its
   own box, and the board clips them at its edge - so a short last row leaves
   clean empty space rather than a grey gap */
.aidx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--white)}
.aidx__l{display:contents;list-style:none;margin:0;padding:0}
.aidx__i,.aidx__note{margin:-1px 0 0 -1px;border-top:1px solid var(--line-2);
  border-left:1px solid var(--line-2);padding:clamp(18px,1.8vw,26px);
  min-height:clamp(132px,11.4vw,164px)}
.aidx__i{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;
  gap:0 12px}
.aidx__n{font-family:var(--f-disp);font-size:12.4px;font-weight:600;
  letter-spacing:.15em;color:var(--gray);font-variant-numeric:tabular-nums;
  line-height:30px}
.aidx__ic{color:var(--acc)}
.aidx__ic svg{display:block;width:30px;height:30px;fill:none;stroke:currentColor;
  stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.aidx__t{grid-column:1/-1;align-self:end;margin-top:24px;
  font-family:var(--f-disp);font-size:clamp(16.8px,1.34vw,18.8px);font-weight:400;
  line-height:1.26;letter-spacing:-.01em;color:var(--ink-2);text-wrap:balance}
.aidx__note{display:flex;align-items:flex-end;margin-bottom:0;
  background:var(--panel);font-size:14.9px;line-height:1.6;color:var(--gray);
  text-wrap:pretty}

.arsn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);list-style:none;margin:0;padding:0}
.arsn__i{display:flex;flex-direction:column;justify-content:space-between;
  gap:26px;min-height:clamp(146px,12.4vw,176px);padding:clamp(18px,1.7vw,24px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.arsn__t{font-family:var(--f-disp);font-size:clamp(15.8px,1.2vw,17.2px);
  font-weight:400;line-height:1.38;letter-spacing:-.006em;color:var(--ink-2);
  text-wrap:pretty}

/* the fleet stands on one shared ground line - the strip's own rules */
.afl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-block:1px solid var(--line-2);overflow:hidden;
  list-style:none;margin:0;padding:0}
.afl__i{margin:-1px 0 0 -1px;border-top:1px solid var(--line-2);
  border-left:1px solid var(--line-2);display:flex;flex-direction:column;
  align-items:center;gap:12px;text-align:center;
  padding:clamp(24px,2.6vw,36px) 12px clamp(22px,2.4vw,32px)}
.afl__ic{color:var(--acc)}
.afl__ic svg{display:block;width:clamp(54px,4.6vw,66px);height:clamp(54px,4.6vw,66px);
  fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.afl__t{font-family:var(--f-disp);font-size:clamp(15.6px,1.2vw,17.2px);
  font-weight:400;line-height:1.3;letter-spacing:-.006em;color:var(--ink-2)}

/* a section's closing sentence, after its object */
.abn{margin:clamp(22px,2.6vw,32px) 0 0;max-width:72ch;font-size:15.8px;
  line-height:1.64;color:var(--gray);text-wrap:pretty}

/* the territory: the head's rule and numeral sit on the statement column, which
   is centred against the map - top-aligned it left a 250px hole under eighty
   words beside a 620px figure */
.ater{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.ater__l{position:relative;padding-top:26px;border-top:1px solid var(--line-2)}
.ater__l::before{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;
  background:var(--plum)}
.ater__l .h2{margin-top:0}
.ater__l .stmt__p{margin-top:clamp(18px,2vw,26px);max-width:none}
.ab--band .sbody{margin-top:clamp(22px,2.6vw,30px)}
.ab--band .stmt__p{max-width:56ch}

@media (max-width:1100px){
  .aidx{grid-template-columns:repeat(3,minmax(0,1fr))}
  .arsn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .afl{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .ater{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
}
@media (max-width:620px){
  /* two tiles across put the closing note beside the eleventh service and
     stretched that cell to 270px - on a phone the index is a ruled list */
  .aidx{grid-template-columns:1fr}
  .aidx__i,.aidx__note{min-height:0;padding:13px 16px}
  .aidx__i{grid-template-columns:34px 1fr auto;grid-template-rows:auto;
    align-items:center;gap:0 10px}
  .aidx__n{grid-column:1;grid-row:1;line-height:1.3}
  .aidx__t{grid-column:2;grid-row:1;margin-top:0;align-self:center;
    font-size:16.6px}
  .aidx__ic{grid-column:3;grid-row:1}
  .aidx__ic svg{width:24px;height:24px}
  .aidx__note{padding-block:16px}
  .arsn{grid-template-columns:1fr}
  .arsn__i{flex-direction:row;align-items:center;justify-content:flex-start;
    gap:16px;min-height:0;padding:16px 18px}
  .arsn__i .feat__ic{flex:none}
  .afl{grid-template-columns:repeat(2,minmax(0,1fr))}
}