/* =========================================================================
   LBI EXTERIOR CLEANERS — site.css

   The component layer. Reads every colour, size and space from tokens.css.

   STRUCTURE, in one paragraph, because the structure IS the design.
   The page is a stack of full-bleed BANDS. Each band is one flat colour —
   bone, pine or chalk yellow — and carries a giant index numeral in its top
   corner, like a plate in a field guide. Inside a band, content sits in a
   .wrap and is set flush left against a heavy display face. There are no
   cards floating over gradients, no drop shadows, and no rounded corners to
   speak of. Where the site needs to separate things it uses a 2px rule or a
   change of ground colour, never elevation.

   MOBILE. Everything is written mobile-first and nothing may overflow at
   390px. The two things that historically do are the display type (clamped,
   with hyphenation off and overflow-wrap on) and wide tables (wrapped in
   .scroller, which scrolls itself rather than the page).
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}

a{color:var(--moss-700);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--pine-900)}

:focus-visible{outline:var(--focus);outline-offset:2px}

h1,h2,h3,h4{color:var(--ink);margin:0 0 var(--s4)}

p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}

hr{border:0;border-top:var(--hair);margin:var(--s6) 0}

/* Skip link — visible only when focused. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--sun);color:var(--sun-ink);padding:.7rem 1.1rem;
  font-weight:700;
}
.skip:focus{left:0}

/* =========================================================================
   1. TYPE SCALE — the poster half
   ========================================================================= */

.display,
.band h1,
.hero__line{
  font-family:var(--display);
  font-weight:400;               /* Archivo Black has one weight */
  line-height:var(--lh-poster);
  letter-spacing:var(--track-poster);
  text-transform:none;
  hyphens:none;
  overflow-wrap:break-word;
}

.hero__line{font-size:var(--t-3xl);margin:0 0 var(--s5)}

.band h1{font-size:clamp(2.1rem,5.5vw,3.4rem);margin:0 0 var(--s4)}
.band h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,4vw,2.6rem);
  line-height:var(--lh-tight);letter-spacing:var(--track-poster);
  margin:0 0 var(--s4);
}
.band h3{
  font-family:var(--sans);font-weight:700;
  font-size:var(--t-lg);line-height:var(--lh-snug);
  letter-spacing:var(--track-tight);
  margin:0 0 var(--s3);
}
.band h4{
  font-family:var(--sans);font-weight:700;font-size:var(--t-md);
  margin:0 0 var(--s2);
}

.kicker{
  font-family:var(--sans);font-weight:700;
  font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 var(--s3);
}

.deck{
  font-size:var(--t-md);
  max-width:var(--measure);
  color:var(--ink-2);
}

.lede{font-size:var(--t-lg);line-height:var(--lh-snug);color:var(--ink);max-width:24ch}

.measure{max-width:var(--measure)}

/* =========================================================================
   2. BANDS — the page is a stack of these
   ========================================================================= */

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.wrap--narrow{max-width:var(--wrap-narrow)}

.band{
  position:relative;
  padding:var(--s8) 0;
  overflow:hidden;              /* contains the index numeral */
}
.band--tight{padding:var(--s7) 0}
.band--tall{padding:var(--s9) 0}

.band--bone{background:var(--bone);color:var(--ink-2)}
.band--paper{background:var(--paper);color:var(--ink-2)}

.band--pine{background:var(--pine-900);color:var(--on-pine)}
.band--pine h1,.band--pine h2,.band--pine h3,.band--pine h4{color:var(--paper)}
.band--pine .kicker{color:var(--on-pine-2)}
.band--pine .deck{color:var(--on-pine)}
/* :not(.btn) ON EVERY BAND-LEVEL LINK RULE, and this is not a nicety.

   `.band--sun a` is (0,1,1) and `.btn` is (0,1,0), so a band's link colour
   silently WINS over the button's own. The result shipped: a pine button on a
   chalk-yellow band with chalk-yellow-ink text — dark on dark, legible as a
   shape and not as words, on the primary call to action of every CTA band on
   the site. The footer had the same bug with pale green on yellow.

   It reads as a colour choice rather than a bug, which is why it survived a
   full visual pass. Excluding buttons from the cascade is the fix; raising
   .btn's specificity instead would just move the collision somewhere else. */
.band--pine a:not(.btn){color:var(--sun)}
.band--pine a:not(.btn):hover{color:var(--paper)}
.band--pine hr{border-top-color:var(--on-pine-rule)}

.band--sun{background:var(--sun);color:var(--sun-ink)}
.band--sun h1,.band--sun h2,.band--sun h3,.band--sun h4{color:var(--sun-ink)}
.band--sun .kicker{color:rgba(36,29,6,.62)}
.band--sun .deck{color:var(--sun-ink)}
.band--sun a:not(.btn){color:var(--sun-ink)}

/* The plate numeral. Decorative, so it is hidden from assistive tech in the
   markup and simply painted very large and very faint here. */
.band__idx{
  position:absolute;top:-.18em;right:.06em;
  font-family:var(--display);font-weight:400;
  font-size:var(--t-4xl);line-height:1;
  letter-spacing:-.06em;
  color:var(--ink);opacity:.055;
  pointer-events:none;user-select:none;
}
.band--pine .band__idx{color:var(--paper);opacity:.07}
.band--sun .band__idx{color:var(--sun-ink);opacity:.09}

/* A 2px rule is the only separator this design uses. */
.rule{border:0;border-top:2px solid var(--ink);opacity:.85;margin:var(--s6) 0}
.band--pine .rule{border-top-color:var(--paper);opacity:.28}
.band--sun .rule{border-top-color:var(--sun-ink);opacity:.35}

/* =========================================================================
   3. HEADER + NAV
   ========================================================================= */

.hdr{
  background:var(--bone);
  border-bottom:2px solid var(--ink);
  position:sticky;top:0;z-index:60;
}
.hdr__in{
  display:flex;align-items:center;gap:var(--s4);
  min-height:66px;
}
.hdr__brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--ink);
  margin-right:auto;
}
.hdr__mark{flex:none;width:34px;height:34px}
.hdr__name{
  font-family:var(--display);font-weight:400;
  font-size:1.02rem;line-height:1;letter-spacing:-.02em;
  color:var(--ink);
  white-space:nowrap;
}
/* THE TAGLINE SHOWS AT EVERY WIDTH, and this was the more serious of the two
   presentation bugs.

   It used to be display:none below 900px. So on a phone — which is most of
   this site's traffic — the header read "LBI Exterior Cleaners" and nothing
   else, which is exactly the impression the tagline exists to correct. The
   desktop visitor got told the site is a referral service and the mobile
   visitor did not.

   It wraps to two lines on a narrow screen, which is fine; a header a few
   pixels taller is a cheaper problem than a homeowner who thinks they just
   hired us. */
.hdr__tag{
  display:block;
  font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
  margin-top:.2rem;line-height:1.3;
}
.hdr__util{display:none;font-size:var(--t-sm);color:var(--ink-3)}
.hdr__util a{color:var(--ink);font-weight:700;text-decoration:none}

.nav{display:none}
.nav a{
  color:var(--ink);text-decoration:none;font-weight:700;
  font-size:var(--t-sm);letter-spacing:.01em;
  padding:.4rem 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--moss-600)}

.burger{
  appearance:none;border:2px solid var(--ink);background:transparent;
  width:44px;height:44px;border-radius:var(--r-sm);
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  align-items:center;cursor:pointer;padding:0;flex:none;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink)}
.burger:focus-visible{outline:var(--focus)}

/* The drawer. Only rendered as a drawer while JS has flagged the document —
   without JS the nav list stays in flow and is always reachable. */
[data-jsnav] .drawer{
  display:none;
  border-top:2px solid var(--ink);
  background:var(--bone-2);
  padding:var(--s4) 0 var(--s5);
}
[data-jsnav] .drawer[data-open]{display:block}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li + li{border-top:var(--hair)}
.drawer a{
  display:block;padding:.85rem 0;color:var(--ink);
  text-decoration:none;font-weight:700;font-size:var(--t-md);
}
.drawer .drawer__cta{margin-top:var(--s4)}

/* 1080px, not 900. Seven nav links plus the wordmark and the tagline do not
   fit a 1024px tablet: the nav wrapped to two rows inside a header with a
   fixed 66px min-height, so the second row rendered outside its own box. The
   drawer already exists and handles that width properly — this is what it is
   for. Anything narrower than a small laptop gets the hamburger. */
@media (min-width:1080px){
  .burger{display:none}
  [data-jsnav] .drawer{display:none !important}
  .nav{display:flex;gap:var(--s5);align-items:center}
  .hdr__tag{font-size:var(--t-xs);letter-spacing:var(--track-label);margin-top:.28rem}
  .hdr__util{display:block}
  .hdr__name{font-size:1.15rem}
}

/* =========================================================================
   4. BUTTONS
   ========================================================================= */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:700;font-size:var(--t-base);
  letter-spacing:.01em;
  padding:.85rem 1.4rem;
  border:2px solid var(--pine-900);
  border-radius:var(--r-sm);
  background:var(--pine-900);color:var(--paper);
  text-decoration:none;cursor:pointer;
  transition:background .12s linear,color .12s linear;
}
.btn:hover{background:var(--moss-700);border-color:var(--moss-700);color:var(--paper)}
.btn:disabled{opacity:.55;cursor:default}

.btn--sun{background:var(--sun);border-color:var(--sun-ink);color:var(--sun-ink)}
.btn--sun:hover{background:var(--sun-2);border-color:var(--sun-ink);color:var(--sun-ink)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone)}

/* A ghost button sitting on any dark ground has to invert, and the hero is a
   dark ground that is not a .band. Listing it here rather than duplicating the
   rule is the difference between a readable CTA and a dark-on-dark one that
   reads as disabled — which is exactly how it shipped the first time. */
.band--pine .btn--ghost,
.hero .btn--ghost,
.ftr .btn--ghost{color:var(--paper);border-color:var(--paper)}
.band--pine .btn--ghost:hover,
.hero .btn--ghost:hover,
.ftr .btn--ghost:hover{background:var(--paper);color:var(--pine-900)}

.btn--call{background:var(--moss-600);border-color:var(--moss-600);color:var(--paper)}
.btn--call:hover{background:var(--moss-700);border-color:var(--moss-700)}

.btnrow{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* =========================================================================
   5. HERO
   ========================================================================= */

.hero{
  background:var(--pine-900);color:var(--on-pine);
  border-bottom:2px solid var(--ink);
  padding:var(--s8) 0 0;
  position:relative;overflow:hidden;
}
.hero h1{color:var(--paper)}
.hero__kicker{
  font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;font-weight:700;color:var(--sun);
  margin:0 0 var(--s4);
}
.hero__deck{
  font-size:var(--t-md);color:var(--on-pine);
  max-width:52ch;margin:0 0 var(--s6);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
.hero__note{
  font-size:var(--t-sm);color:var(--on-pine-2);max-width:46ch;
  border-top:1px solid var(--on-pine-rule);padding-top:var(--s4);
  margin:0 0 var(--s7);
}
.hero__art{margin:0 calc(var(--s5) * -1);padding:0}

/* The three-fact strip that sits under the hero. Flat, ruled, no cards. */
.facts{
  background:var(--sun);color:var(--sun-ink);
  border-bottom:2px solid var(--ink);
}
.facts__g{display:grid;grid-template-columns:1fr;gap:0}
.facts__i{padding:var(--s5) 0}
.facts__i + .facts__i{border-top:2px solid rgba(36,29,6,.25)}
.facts__k{
  font-family:var(--display);font-weight:400;
  font-size:1.6rem;line-height:1;letter-spacing:-.02em;
  color:var(--sun-ink);margin:0 0 .5rem;
}
.facts__v{font-size:var(--t-sm);color:rgba(36,29,6,.82);margin:0}

@media (min-width:760px){
  .facts__g{grid-template-columns:repeat(3,1fr);gap:0}
  .facts__i{padding:var(--s6) var(--s5)}
  .facts__i:first-child{padding-left:0}
  .facts__i:last-child{padding-right:0}
  .facts__i + .facts__i{border-top:0;border-left:2px solid rgba(36,29,6,.25)}
}

@media (min-width:980px){
  .hero__in{display:grid;grid-template-columns:1fr minmax(380px,.85fr);gap:var(--s8);align-items:start}
  .hero__art{margin:0}
  .hero{padding-bottom:var(--s7)}
}

/* =========================================================================
   6. THE PLATE GRID — services, posts, anything countable
   ========================================================================= */

.plates{display:grid;grid-template-columns:1fr;gap:2px;background:var(--ink)}
.plate{
  background:var(--paper);
  padding:var(--s5);
  display:flex;flex-direction:column;
  min-width:0;
}
.plate__k{
  font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;font-weight:700;color:var(--ink-3);
  margin:0 0 var(--s3);
}
.plate h3{margin:0 0 var(--s3)}
.plate h3 a{color:var(--ink);text-decoration:none}
.plate h3 a:hover{color:var(--moss-700);text-decoration:underline}
.plate p{font-size:var(--t-sm);color:var(--ink-2)}
.plate__foot{
  margin-top:auto;padding-top:var(--s4);
  border-top:var(--hair);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
}
.plate__fig{
  font-family:var(--display);font-weight:400;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--ink);white-space:nowrap;
}
.plate__cav{font-size:var(--t-xs);color:var(--ink-3);text-align:right}

/* Group tinting — the one place colour carries meaning. */
.plate--wash{border-top:6px solid var(--moss-600)}
.plate--wood{border-top:6px solid var(--dia-cedar)}
.plate--hardscape{border-top:6px solid var(--pine-700)}
.plate--glass{border-top:6px solid var(--dia-salt)}

@media (min-width:680px){ .plates{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .plates--3{grid-template-columns:repeat(3,1fr)} }

/* =========================================================================
   7. THE INDEX LIST — towns, links, anything alphabetical
   ========================================================================= */

.index{list-style:none;margin:0;padding:0}
.index li{border-top:var(--hair)}
.index li:last-child{border-bottom:var(--hair)}
.index a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:.75rem 0;color:var(--ink);text-decoration:none;font-weight:700;
}
.index a:hover{color:var(--moss-700)}
.index__meta{font-weight:400;font-size:var(--t-sm);color:var(--ink-3);text-align:right}
.band--pine .index li{border-color:var(--on-pine-rule)}
.band--pine .index a{color:var(--paper)}
.band--pine .index a:hover{color:var(--sun)}
.band--pine .index__meta{color:var(--on-pine-2)}

.cols{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media (min-width:760px){ .cols--2{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .cols--3{grid-template-columns:repeat(3,1fr)} }
/* Four geographic profiles since the mainland was added, and a 4-up row of
   town indexes is too narrow below ~1180px — it wraps to 3+1, which reads as
   a mistake. Two-up first, then four. */
@media (min-width:760px){ .cols--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1180px){ .cols--4{grid-template-columns:repeat(4,1fr)} }

/* =========================================================================
   8. THE SPLIT — two elevations, side by side. Used on town pages and
      anywhere the point is that two things differ.
   ========================================================================= */

.split{display:grid;grid-template-columns:1fr;gap:2px;background:var(--ink)}
.split__side{background:var(--paper);padding:var(--s5)}
.split__side--alt{background:var(--bone-2)}
.split__k{
  font-family:var(--display);font-weight:400;font-size:1.1rem;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 var(--s3);
}
@media (min-width:760px){ .split{grid-template-columns:1fr 1fr} }

/* =========================================================================
   9. LONG-FORM PROSE
   ========================================================================= */

.prose{max-width:var(--measure)}
.prose h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:var(--lh-tight);
  letter-spacing:var(--track-poster);
  margin:var(--s7) 0 var(--s4);
}
.prose h3{
  font-family:var(--sans);font-weight:700;font-size:var(--t-lg);
  margin:var(--s6) 0 var(--s3);
}
.prose ul,.prose ol{margin:0 0 var(--s4);padding-left:1.25rem}
.prose li{margin-bottom:.45rem}
.prose blockquote{
  margin:var(--s5) 0;padding:0 0 0 var(--s4);
  border-left:4px solid var(--sun);color:var(--ink);font-size:var(--t-md);
}
.prose > :first-child{margin-top:0}

/* Symptom / checklist blocks. */
.ticks{list-style:none;margin:0 0 var(--s5);padding:0}
.ticks li{
  position:relative;padding:.55rem 0 .55rem 1.9rem;
  border-top:var(--hair);
}
.ticks li:last-child{border-bottom:var(--hair)}
.ticks li::before{
  content:"";position:absolute;left:.35rem;top:1.15rem;
  width:9px;height:9px;background:var(--sun);border:1px solid var(--sun-ink);
}
.band--pine .ticks li{border-color:var(--on-pine-rule);color:var(--on-pine)}

/* The disclosure / small-print block. Deliberately plain. */
.fineprint{
  border-top:2px solid var(--ink);
  padding-top:var(--s4);margin-top:var(--s6);
  font-size:var(--t-sm);color:var(--ink-3);
}
.band--pine .fineprint{border-top-color:var(--on-pine-rule);color:var(--on-pine-2)}
.fineprint strong{color:var(--ink)}
.band--pine .fineprint strong{color:var(--paper)}

/* Wide content scrolls itself, never the page. */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.scroller table{border-collapse:collapse;min-width:520px;width:100%;font-size:var(--t-sm)}
.scroller th,.scroller td{text-align:left;padding:.6rem .8rem;border-bottom:var(--hair)}
.scroller th{font-weight:700;color:var(--ink);white-space:nowrap}

/* =========================================================================
   10. CALL SURFACES  (rendered only when SITE.phone is set)
   ========================================================================= */

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--ink);
  border-top:2px solid var(--ink);
}
.callbar a{
  padding:.9rem .6rem;text-align:center;text-decoration:none;
  font-weight:700;font-size:var(--t-sm);
}
.callbar__call{background:var(--moss-600);color:var(--paper)}
.callbar__form{background:var(--sun);color:var(--sun-ink)}
@media (min-width:1080px){ .callbar{display:none} }
@media (max-width:1079px){ body.has-callbar{padding-bottom:56px} }

.callfirst{
  border:2px solid var(--ink);background:var(--sun);color:var(--sun-ink);
  padding:var(--s5);margin:0 0 var(--s6);
}
.callfirst__k{font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:700;margin:0 0 var(--s2)}
.callfirst__n{font-family:var(--display);font-size:1.7rem;line-height:1;margin:0 0 var(--s2)}
.callfirst__n a{color:var(--sun-ink);text-decoration:none}
.callfirst__s{font-size:var(--t-sm);margin:0;color:rgba(36,29,6,.82)}
.callfirst__or{font-size:var(--t-sm);font-weight:700;margin:var(--s4) 0 0}

/* =========================================================================
   11. FORMS
   ========================================================================= */

.fs{
  border:2px solid var(--ink);border-radius:var(--r-sm);
  padding:var(--s5);margin:0 0 var(--s5);background:var(--paper);
}
.fs legend{
  font-family:var(--display);font-weight:400;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--ink);
  padding:0 .5rem;margin-left:-.5rem;
}
.fs label{display:block;margin-bottom:var(--s4);font-weight:700;color:var(--ink);font-size:.95rem}
.fs label[hidden]{display:none}
.fs label.chk{font-weight:400;display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2)}
.fs input[type=checkbox]{margin-top:.32rem;flex:none;width:18px;height:18px;accent-color:var(--moss-600)}
.fs input,.fs select,.fs textarea{
  display:block;width:100%;margin-top:.35rem;padding:.65rem;
  border:1px solid var(--ink);border-radius:var(--r-sm);
  font:inherit;font-weight:400;background:var(--paper);color:var(--ink);
}
.fs textarea{min-height:7rem}
.svcgrp{
  font-family:var(--display);font-weight:400;font-size:.95rem;
  color:var(--ink);margin:var(--s5) 0 var(--s3);
  padding-bottom:.3rem;border-bottom:2px solid var(--ink);
}
.svcgrp:first-child{margin-top:0}
.opt{font-weight:400;color:var(--ink-3);font-size:.85rem}
.note{font-size:.88rem;color:var(--ink-3);margin:.4rem 0 0}
.note.err{color:var(--flag);font-weight:700}

.consent{
  border:2px solid var(--ink);background:var(--bone-2);
  padding:var(--s5);margin:0 0 var(--s5);
}
.consent label.chk{font-size:.9rem;display:flex;gap:.6rem;align-items:flex-start}
.consent input[type=checkbox]{margin-top:.32rem;flex:none;width:18px;height:18px;accent-color:var(--moss-600)}

/* =========================================================================
   12. BREADCRUMBS, PAGINATION, META
   ========================================================================= */

.crumbs{
  font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);
  padding:var(--s4) 0 0;margin:0;
}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--moss-700)}
.crumbs span{opacity:.5;padding:0 .4rem}
.band--pine .crumbs,.band--pine .crumbs a{color:var(--on-pine-2)}

.meta{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--s4)}
.meta span + span::before{content:"·";padding:0 .5rem;opacity:.6}

/* =========================================================================
   13. FOOTER
   ========================================================================= */

.ftr{background:var(--pine-950);color:var(--on-pine);padding:var(--s8) 0 var(--s6);border-top:2px solid var(--ink)}
.ftr h2{
  font-family:var(--display);font-weight:400;color:var(--paper);
  font-size:clamp(1.9rem,6vw,3.2rem);line-height:var(--lh-poster);
  letter-spacing:var(--track-poster);margin:0 0 var(--s5);
}
.ftr__g{display:grid;grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s7)}
.ftr h3{
  font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--on-pine-2);font-weight:700;margin:0 0 var(--s3);
}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.5rem}
.ftr a:not(.btn){color:var(--on-pine);text-decoration:none;font-size:var(--t-sm)}
.ftr a:not(.btn):hover{color:var(--sun);text-decoration:underline}
.ftr__legal{
  border-top:1px solid var(--on-pine-rule);
  margin-top:var(--s7);padding-top:var(--s5);
  font-size:var(--t-xs);color:var(--on-pine-2);line-height:1.6;
}
.ftr__legal p{margin:0 0 var(--s3)}
@media (min-width:760px){ .ftr__g{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .ftr__g{grid-template-columns:repeat(4,1fr)} }

/* =========================================================================
   14. THE DIAGNOSTIC KEY — the signature element

   Five rows, a hairline between each, a colour chip in the gutter. It sits in
   the hero beside the headline on a wide screen and under it on a handset,
   and it is the only place on the site where five different colours are
   allowed at once.

   Deliberately NOT a card: no radius to speak of, no shadow, a 2px rule for
   an edge. It should read as a printed key on the same sheet as everything
   else, not as a widget floating above it.
   ========================================================================= */

.key{
  border:2px solid var(--paper);
  background:rgba(244,240,230,.045);
  padding:var(--s5);
}
.key__hd{
  font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;font-weight:700;color:var(--sun);
  margin:0 0 var(--s4);
}
.key__list{list-style:none;margin:0;padding:0;counter-reset:key}
.key__row{
  display:grid;grid-template-columns:14px 1fr;gap:var(--s4);
  padding:var(--s4) 0;
  border-top:1px solid var(--on-pine-rule);
}
.key__row:first-child{border-top:0;padding-top:0}
/* The chip needs an outline that works against BOTH grounds it can sit on,
   and a dark outline on a dark band makes the near-black roof-streak chip
   disappear entirely — which is the one row where the colour is the point. */
.key__chip{
  display:block;width:14px;height:14px;margin-top:.34rem;
  border:1px solid rgba(244,240,230,.45);
}
.band--bone .key__chip,.band--paper .key__chip{border-color:rgba(18,26,22,.45)}
.key__body{min-width:0}
.key__see{
  font-weight:700;color:var(--paper);font-size:var(--t-base);
  line-height:var(--lh-snug);margin:0 0 .4rem;
}
.key__is,.key__needs{
  font-size:var(--t-sm);color:var(--on-pine);line-height:1.5;margin:0 0 .3rem;
}
.key__is b,.key__needs b{color:var(--sun);font-weight:700}
.key__go{margin:.45rem 0 0;font-size:var(--t-sm)}
.key__go a{color:var(--sun);font-weight:700;text-decoration:none}
.key__go a:hover{text-decoration:underline}
.key__foot{
  margin:var(--s4) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--on-pine-rule);
  font-size:var(--t-xs);color:var(--on-pine-2);
}
/* The key sits in the hero, which is a dark ground that is NOT a .band — so
   nothing was inverting this link and it inherited the global moss green,
   measured at 2.06:1 against the pine behind it. Effectively invisible, on the
   one link in the panel. */
.key__foot a{color:var(--sun);font-weight:700}
.key__foot a:hover{color:var(--paper)}

/* On a light band the same component inverts. Used nowhere yet; here so the
   key can be reused on a bone section without anybody re-deriving it. */
.band--bone .key,.band--paper .key{border-color:var(--ink);background:transparent}
.band--bone .key__hd,.band--paper .key__hd{color:var(--ink-3)}
.band--bone .key__row,.band--paper .key__row{border-top-color:var(--rule)}
.band--bone .key__see,.band--paper .key__see{color:var(--ink)}
.band--bone .key__is,.band--bone .key__needs,
.band--paper .key__is,.band--paper .key__needs{color:var(--ink-2)}
.band--bone .key__is b,.band--bone .key__needs b,
.band--paper .key__is b,.band--paper .key__needs b{color:var(--ink)}
.band--bone .key__go a,.band--paper .key__go a{color:var(--moss-700)}
.band--bone .key__foot,.band--paper .key__foot{color:var(--ink-3);border-top-color:var(--rule)}
.band--bone .key__foot a,.band--paper .key__foot a{color:var(--moss-700)}

/* =========================================================================
   15. PRINT
   ========================================================================= */
@media print{
  .hdr,.callbar,.burger,.drawer,.hero__art{display:none !important}
  body{background:#fff;color:#000}
  .band{padding:1rem 0}
  .band--pine,.band--sun{background:#fff !important;color:#000 !important}
  .band__idx{display:none}
  a{text-decoration:underline}
}

/* =========================================================================
   16. DISCLOSURE LISTS  (<details> — FAQs, crew questions)

   Native <details> rather than a scripted accordion, so the answers are in
   the DOM, searchable in-page, printable, and open without JavaScript. The
   only styling is a rule between them and a marker that turns.
   ========================================================================= */
details{border-top:var(--hair);padding:0}
details:last-of-type{border-bottom:var(--hair)}
details summary{
  list-style:none;cursor:pointer;
  padding:.95rem 2rem .95rem 0;position:relative;
  color:var(--ink);font-size:var(--t-md);
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"";position:absolute;right:.4rem;top:1.35rem;
  width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .15s linear;
}
details[open] summary::after{transform:rotate(225deg)}
details summary:focus-visible{outline:var(--focus);outline-offset:-2px}
details p{font-size:var(--t-sm);padding-bottom:var(--s4);margin:0}
details p + p{padding-top:0;margin-top:calc(var(--s3) * -1 + var(--s3))}

.band--pine details{border-color:var(--on-pine-rule)}
.band--pine details summary{color:var(--paper)}
.band--pine details p{color:var(--on-pine)}
.band--sun details{border-color:rgba(36,29,6,.3)}
.band--sun details summary{color:var(--sun-ink)}