/* ===========================================================================
   SUMMERLIN MOBILE AUTO GLASS — design system "WAYPOINT" (palette: DAYLIGHT)
   ---------------------------------------------------------------------------
   Direction : Summerlin is a master-planned community of named villages laced
               with trails, and this business drives TO you across it. So the
               page is built as a wayfinding guide, not a technical datasheet:
               a single routed line threads the whole page and every section
               begins at a numbered marker post on it.
   Metaphor  : the routed trailhead sign + the village index of a planned
               community — marker posts, route line, village badges, vista
               plaques.
   Tone      : bright / marked / plainspoken.
   Signature : one continuous route-line down the page; each section starts at
               a marker post carrying its own number, and the community's real
               village names are set as wayfinding badges.
   World     : LIGHT AND VIBRANT (client direction). A bright, airy near-white
               sky; a saturated desert turquoise as the dominant accent — the
               colour of laminated glass on edge — with Red Rock vermilion as
               the energy signal. The single inverted band is a deep TEAL, not
               near-black: on a vibrant palette a black band reads as a hole.
   Type      : Big Shoulders Display (a signage face) collides with Newsreader
               italic — deliberately NOT the Bricolage x Fraunces pairing the
               sibling sites use.
   Contrast  : every pairing solved, not picked by eye. Lowest text ratio in
               use is 4.56:1 (white on the vermilion button fill); the bright
               steps --aqua-br / --flame-br are DECORATIVE only. Accent text on
               any dark ground uses --aqua-lt (8.18) or --flame-lt (6.59).
   =========================================================================== */

:root{
  /* --- the bright, airy ground --- */
  --paper:#ffffff;
  --sky:#f2f7fa;
  --sky-2:#e4eef4;
  --sky-3:#d3e5ee;

  /* --- ink: a deep teal-navy, still the brand family but richer --- */
  --navy:#0c2a38;        /* 13.86 on --sky */
  --navy-soft:#2f5d70;   /*  6.66 on --sky, 5.55 on --sky-3 */
  --navy-mute:#3b687b;   /*  5.64 on --sky, 4.70 on --sky-3 */

  /* --- the one inverted world: deep TEAL, not black --- */
  --deep:#06323f;
  --deep-2:#0b4557;
  --on-dark:#f4fbfd;      /* 13.06 on --deep */
  --on-dark-soft:#b8dbe5; /*  9.31 */
  --on-dark-mute:#7fb4c6; /*  6.02 */

  /* --- dominant accent: desert turquoise, 3 steps + a dark-ground tint --- */
  --aqua:#008195;         /* fills; white on it 4.59 */
  --aqua-dp:#006d7e;      /* 5.58 on --sky — accent TEXT */
  --aqua-br:#12b8d0;      /* DECORATIVE ONLY */
  --aqua-lt:#5fd8ef;      /* 8.18 on --deep — accent text on dark */

  /* --- energy accent: Red Rock vermilion --- */
  --flame:#d93c0b;        /* fills; white on it 4.56 */
  --flame-dp:#b73309;     /* 5.57 on --sky — accent TEXT */
  --flame-br:#ff6a33;     /* DECORATIVE ONLY */
  --flame-lt:#ff9a72;     /* 6.59 on --deep */

  /* --- hairlines, derived from the inks --- */
  --line:rgba(12,42,56,.16);
  --line-soft:rgba(12,42,56,.085);
  --line-hard:rgba(12,42,56,.30);
  --line-inv:rgba(244,251,253,.20);
  --line-inv-soft:rgba(244,251,253,.10);

  /* --- ONE easing curve, everywhere --- */
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* --- type --- */
  --sign:'Big Shoulders Display','Arial Narrow',sans-serif;
  --ser:'Newsreader',Georgia,serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;

  /* --- measure --- */
  --bar:62px;
  --folio:32px;
  --wrap:1220px;
  --rail:86px;
  --sec-y:clamp(72px,10vh,132px);
  --sec-y-lg:clamp(96px,14vh,180px);
}


/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* clip, never hidden: hidden can make body a scroll container on iOS and
     position:sticky then dies silently (design-patterns.md, Navbar). */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--sky);
  color:var(--navy);
  font-family:var(--body);
  font-size:16px;
  line-height:1.72;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0}
::selection{background:var(--aqua);color:var(--paper)}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:2px}

.wrap{width:min(100% - 2*clamp(18px,4vw,44px),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--navy);color:var(--sky);
  padding:10px 16px;border-radius:3px}

/* ------------------------------------------------------- type primitives -- */
.eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--navy-mute);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:var(--aqua);flex:none;
}
/* a mono label that is rendering the CLIENT's words, not furniture we wrote:
   it must not be shouted into caps (typography-responsive.md). */
.eyebrow.is-copy{text-transform:none;letter-spacing:.06em;font-size:12px}

.sign{font-family:var(--sign);font-weight:700;letter-spacing:.004em;line-height:.94}
.ser{font-family:var(--ser);font-weight:300;font-style:italic;letter-spacing:-.008em}

h1.h-display{
  font-size:clamp(35px,5.4vw,70px);line-height:1.0;letter-spacing:.002em;
  font-family:var(--sign);font-weight:800;
}
h1.h-display .ser{font-size:.86em;line-height:1.06}

.h-sec{
  font-family:var(--sign);font-weight:700;
  font-size:clamp(28px,3.9vw,50px);line-height:1.02;letter-spacing:.004em;
}
.h-sec .ser{font-size:.84em}
.h-sub{
  font-family:var(--sign);font-weight:700;
  font-size:clamp(21px,2.1vw,27px);line-height:1.1;
}
.lede{font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.68;color:var(--navy-soft);max-width:46ch}
.body-copy{color:var(--navy-soft);max-width:66ch}
.body-copy + .body-copy{margin-top:1.05em}

.rock{color:var(--flame-dp)}
.on-dark .rock,.band .rock{color:var(--flame-lt)}

/* -------------------------------------------------------- the route line -- */
/* The signature: one continuous hairline down the page. It is drawn by the
   section rail, not by a single absolutely-positioned element, so it survives
   any section being added or removed. */
.sec{position:relative;padding-block:var(--sec-y)}
.sec-in{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);
}
.sec-rail{position:relative}
/* The route. It must bleed past the rail to meet the neighbouring section's
   line, but the bleed is bounded to exactly this section's own padding.
   A -999em bleed (the obvious way to write this) is ~16000px of real
   scrollable height per section — it added 15059px of blank page below the
   footer. Vertical overflow is NOT clipped by overflow-x:clip, and a
   querySelectorAll-based overflow hunter cannot see pseudo-elements, so
   nothing flags it. */
.sec-rail::before{
  content:"";position:absolute;left:19px;width:2px;background:var(--line);
  top:calc(-1 * var(--sec-y));
  bottom:calc(-1 * var(--sec-y));
}
.band .sec-rail::before{
  top:calc(-1 * var(--sec-y-lg));
  bottom:calc(-1 * var(--sec-y-lg));
}
.sec-body{min-width:0}

/* marker post — a routed wayfinding plate sitting on the route */
.post{
  position:sticky;top:calc(var(--bar) + 22px);
  width:40px;height:52px;display:grid;place-items:center;
  background:var(--aqua);color:var(--paper);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;
  /* the routed-sign silhouette: a notch cut from the foot */
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);
}
.post::after{
  content:"";position:absolute;left:8px;right:8px;top:10px;height:2px;
  background:var(--flame-br);
}

/* ------------------------------------------------------------ folio bar -- */
.folio{
  height:var(--folio);background:var(--deep);color:var(--on-dark-mute);
  display:flex;align-items:center;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
}
.folio .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.folio a{text-decoration:none;color:var(--aqua-lt)}
.folio-r{display:flex;gap:26px}

/* ---------------------------------------------------------------- navbar -- */
.bar{
  position:sticky;top:0;z-index:90;height:var(--bar);
  background:rgba(242,247,250,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease);
}
.bar.scrolled{box-shadow:0 10px 30px -22px rgba(12,42,56,.5)}
.bar .wrap{height:100%;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
/* The client's real mark, cropped from the supplied lockup. It carries its own
   silhouette (car inside an arc), so it gets no tile behind it — the old aqua
   pentagon was scaffolding for a generic icon and would now fight the artwork. */
.brand-mark{width:36px;height:36px;flex:none;display:block;object-fit:contain}
.brand-txt{display:block;line-height:1}
.brand-txt b{
  display:block;font-family:var(--sign);font-weight:800;font-size:19px;
  letter-spacing:.01em;color:var(--navy);
}
.brand-txt span{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy-mute);margin-top:3px;
}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-item{position:relative;height:var(--bar);display:flex;align-items:center}
.nav-link{
  display:flex;align-items:center;gap:7px;height:100%;padding:0 12px;
  text-decoration:none;font-size:13.5px;font-weight:500;color:var(--navy);
  letter-spacing:.005em;position:relative;background:none;border:0;
  font-family:var(--body);cursor:pointer;
}
.nav-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:14px;height:2px;
  background:var(--aqua);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
@media(hover:hover){.nav-link:hover::after{transform:scaleX(1)}}
.nav-link .caret{
  width:8px;height:8px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .4s var(--ease);opacity:.6;
}
.nav-item.open .nav-link .caret{transform:rotate(225deg) translateY(-2px)}

.menu{
  position:absolute;top:100%;left:0;z-index:95;
  min-width:280px;padding:14px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 30px 60px -36px rgba(12,42,56,.44);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
  max-height:calc(100vh - var(--bar) - 30px);overflow:auto;
}
.menu.two{
  min-width:min(640px,86vw);
  display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;
}
.nav-item.open .menu{opacity:1;visibility:visible;transform:none}
.nav-item:focus-within .menu{opacity:1;visibility:visible;transform:none}
/* invisible bridge so crossing the gap to the menu never closes it */
.nav-item::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.menu-h{
  grid-column:1/-1;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy-mute);padding:4px 10px 10px;
  border-bottom:1px solid var(--line-soft);margin-bottom:6px;
}
.menu a{
  display:block;padding:8px 10px;text-decoration:none;font-size:13.5px;
  color:var(--navy-soft);border-left:2px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background .25s var(--ease),padding-left .35s var(--ease);
}
@media(hover:hover){
  .menu a:hover{color:var(--navy);border-left-color:var(--aqua);
    background:var(--sky);padding-left:15px}
}
.menu a[aria-current="page"]{color:var(--aqua-dp);border-left-color:var(--aqua);font-weight:600}

.bar-call{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:10px 17px;background:var(--aqua);color:var(--paper);
  text-decoration:none;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.04em;position:relative;overflow:hidden;
}
.bar-call span{position:relative;z-index:1}
.bar-call svg{width:14px;height:14px;fill:currentColor;position:relative;z-index:1}
.bar-call::before{
  content:"";position:absolute;inset:0;background:var(--flame);
  transform:translateX(-101%);transition:transform .5s var(--ease);
}
@media(hover:hover){.bar-call:hover::before{transform:none}}

.burger{
  display:none;width:42px;height:42px;flex:none;border:1px solid var(--line);
  background:none;cursor:pointer;padding:0;position:relative;
}
.burger i{
  position:absolute;left:11px;right:11px;height:1.8px;background:var(--navy);
  transition:transform .4s var(--ease),opacity .25s var(--ease);
}
.burger i:nth-child(1){top:14px}
.burger i:nth-child(2){top:20px}
.burger i:nth-child(3){top:26px}
.burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------- mobile nav panel -- */
.mnav{
  position:fixed;left:0;right:0;z-index:89;
  background:var(--sky);border-top:1px solid var(--line);
  overflow-y:auto;padding:8px 0 40px;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;
}
.mnav.on{opacity:1;transform:none;visibility:visible}
.mnav .wrap > a,.macc > summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 2px;border-bottom:1px solid var(--line-soft);
  text-decoration:none;font-size:16px;color:var(--navy);
  font-family:var(--sign);font-weight:700;letter-spacing:.01em;
}
.macc{border:0}
.macc>summary{list-style:none;cursor:pointer}
.macc>summary::-webkit-details-marker{display:none}
.macc .chev{
  width:9px;height:9px;border-right:1.8px solid var(--navy-mute);
  border-bottom:1.8px solid var(--navy-mute);transform:rotate(45deg);
  transition:transform .4s var(--ease);flex:none;
}
.macc[open] .chev{transform:rotate(225deg)}
.macc-in{padding:6px 0 14px}
.macc-in a{
  display:block;padding:9px 0 9px 16px;border-left:2px solid var(--line);
  text-decoration:none;font-size:14.5px;color:var(--navy-soft);
}
.macc-in a[aria-current="page"]{color:var(--aqua-dp);border-left-color:var(--aqua);font-weight:600}
body.locked{overflow:hidden}

/* --------------------------------------------------------- floating call -- */
.fcall{
  position:fixed;right:16px;bottom:16px;z-index:88;
  display:none;align-items:center;gap:10px;
  padding:13px 19px;background:var(--flame);color:var(--paper);
  text-decoration:none;font-family:var(--mono);font-size:13px;font-weight:600;
  box-shadow:0 18px 34px -18px rgba(217,60,11,.75);
}
.fcall svg{width:15px;height:15px;fill:currentColor}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative;padding-block:clamp(40px,6vh,78px) 0;overflow:clip}
.hero-grid{
  display:grid;grid-template-columns:var(--rail) minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(18px,3vw,48px);align-items:start;
}
.hero-rail{position:relative;align-self:stretch}
.hero-rail::before{
  content:"";position:absolute;left:19px;top:8px;bottom:0;width:2px;background:var(--line);
}
.hero-rail .post{position:absolute;top:0;left:0}
.hero-vert{
  position:absolute;left:11px;top:78px;transform-origin:left top;
  transform:rotate(90deg);white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--navy-mute);
}

.hero-lead{padding-top:4px}
.hero h1{margin-bottom:22px}
.h-line{display:block;overflow:hidden;padding:.05em 0}
.h-line > span{display:block}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.05em;
  position:relative;overflow:hidden;border:1px solid transparent;cursor:pointer;
}
.btn span{position:relative;z-index:1}
.btn svg{width:15px;height:15px;fill:currentColor;position:relative;z-index:1}
.btn-p{background:var(--aqua);color:var(--paper)}
.btn-p::before{content:"";position:absolute;inset:0;background:var(--flame);
  transform:translateX(-101%);transition:transform .5s var(--ease)}
.btn-s{border-color:var(--line-hard);color:var(--navy)}
.btn-s::before{content:"";position:absolute;inset:0;background:var(--navy);
  transform:translateX(-101%);transition:transform .5s var(--ease)}
.btn-s:hover{color:var(--sky)}
@media(hover:hover){.btn:hover::before{transform:none}}

/* the credential plate — a routed trailhead sign, not a floating card */
.plate{
  border:1px solid var(--line-hard);background:var(--paper);position:relative;
  padding:clamp(20px,2vw,28px);
}
.plate::before,.plate::after{
  content:"";position:absolute;width:13px;height:13px;border:2px solid var(--aqua);
}
.plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.plate-h{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:13px;margin-bottom:16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy-mute);
}
.plate-h b{color:var(--aqua-dp);font-weight:600}

/* the client's own promise lines, as routed sign slats */
.slats{list-style:none;display:grid;gap:1px;background:var(--line-soft)}
.slat{
  display:flex;align-items:flex-start;gap:12px;background:var(--paper);
  padding:11px 2px;font-size:14.2px;line-height:1.46;color:var(--navy);
}
.slat .tick{
  width:16px;height:16px;flex:none;margin-top:3px;
  border:1.6px solid var(--aqua);position:relative;
}
.slat .tick::after{
  content:"";position:absolute;left:3px;top:6px;width:7px;height:3.5px;
  border-left:1.8px solid var(--aqua);border-bottom:1.8px solid var(--aqua);
  transform:rotate(-45deg);
}

/* ------------------------------------------------------------ vista plate -- */
.vista{position:relative;margin-top:clamp(40px,6vh,72px)}
.vista-img{position:relative;aspect-ratio:16/7;overflow:hidden;background:var(--sky-3)}
.vista-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.vista-cap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;background:var(--deep);color:var(--on-dark-mute);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
}
.vista-cap b{color:var(--aqua-lt);font-weight:600}

/* ---------------------------------------------------------------- ticker -- */
.ticker{
  background:var(--deep);color:var(--on-dark);overflow:hidden;
  border-block:2px solid var(--aqua);
}
.ticker-in{
  display:flex;width:max-content;animation:marq 34s linear infinite;
  padding-block:15px;
}
.ticker-in span{
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--sign);font-weight:700;font-size:19px;letter-spacing:.02em;
  white-space:nowrap;
}
.ticker i{color:var(--aqua-lt);font-style:normal}
.ticker em{font-family:var(--ser);font-style:italic;font-weight:300;
  font-size:.92em;color:var(--on-dark-soft)}
@keyframes marq{to{transform:translateX(-50%)}}
@media(hover:hover){.ticker:hover .ticker-in{animation-play-state:paused}}

/* ------------------------------------------------------------ split head -- */
.shead{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(34px,5vh,58px);
}
.shead .eyebrow{margin-bottom:16px}

/* ------------------------------------------------------- index rows (svc) -- */
.rows{border-top:2px solid var(--aqua);list-style:none}
/* position:relative is LOad-BEARING. Without it the hover wash below
   (position:absolute;inset:0) resolves against the nearest positioned
   ancestor — .sec — and sweeps a 1300px-tall panel across the whole section
   instead of the 114px row. isolation:isolate keeps the wash under the row's
   own content without depending on paint order. */
.row{border-bottom:1px solid var(--line);position:relative;isolation:isolate}
.row > a{
  display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1.35fr) 44px;
  gap:clamp(14px,2vw,30px);align-items:center;
  padding:22px 0;text-decoration:none;position:relative;
  transition:padding-left .5s var(--ease);
}
/* The wash wipes in from the left as scaleX, NOT translateX(-101%): a
   translated copy of a 1050px row still has ~10px of itself inside the
   viewport at rest, which painted grey bars down the page's left gutter.
   A scale from the left origin is the same gesture and cannot leave the row. */
.row::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--sky-2);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease);
  pointer-events:none;
}
.row > a{z-index:1}
.row-n{font-family:var(--mono);font-size:11px;color:var(--navy-mute);
  letter-spacing:.1em;position:relative}
.row-t{font-family:var(--sign);font-weight:700;font-size:clamp(19px,1.9vw,25px);
  line-height:1.1;color:var(--navy);position:relative}
.row-d{color:var(--navy-soft);font-size:14.4px;line-height:1.56;position:relative}
.row-a{
  width:40px;height:40px;border:1px solid var(--line-hard);border-radius:50%;
  display:grid;place-items:center;position:relative;justify-self:end;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease);
}
.row-a svg{width:15px;height:15px;fill:none;stroke:var(--navy);stroke-width:1.8;
  transition:stroke .4s var(--ease)}
@media(hover:hover){
  .row:hover::before{transform:none}
  .row:hover > a{padding-left:20px}
  .row:hover .row-a{background:var(--aqua);border-color:var(--aqua);transform:rotate(-45deg)}
  .row:hover .row-a svg{stroke:var(--paper)}
}
.row > a:focus-visible .row-a{background:var(--aqua);border-color:var(--aqua)}
.row > a:focus-visible .row-a svg{stroke:var(--paper)}

/* ------------------------------------------------------- village badges -- */
.badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;background:var(--paper);
  border:1px solid var(--line);font-size:13.4px;color:var(--navy);
  line-height:1.3;
}
.badge::before{
  content:"";width:6px;height:6px;background:var(--aqua);flex:none;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
a.badge{text-decoration:none;transition:border-color .3s var(--ease),
  background .3s var(--ease),transform .4s var(--ease)}
@media(hover:hover){
  a.badge:hover{border-color:var(--aqua);background:var(--sky-2);transform:translateY(-2px)}
}

/* ------------------------------------------------------------- def list -- */
.defs{list-style:none;display:grid;gap:0}
.def{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;
  padding:17px 0;border-bottom:1px solid var(--line-soft);
}
.def-l{
  font-family:var(--sign);font-weight:700;font-size:17.5px;line-height:1.24;
  color:var(--navy);grid-column:1/-1;
}
.def-t{color:var(--navy-soft);font-size:14.8px;line-height:1.6;
  grid-column:1/-1;max-width:72ch}

/* numbered variant — the process steps */
.defs.numbered{counter-reset:step}
.defs.numbered .def{grid-template-columns:44px minmax(0,1fr)}
.defs.numbered .def::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;color:var(--aqua-dp);
  letter-spacing:.08em;grid-row:1/3;padding-top:4px;
}
.defs.numbered .def-l,.defs.numbered .def-t{grid-column:2}

/* ------------------------------------------------------------ spec table -- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line)}
table.spec{border-collapse:collapse;width:100%;min-width:520px;background:var(--paper)}
table.spec th,table.spec td{
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft);
  font-size:14.4px;color:var(--navy-soft);vertical-align:top;
}
table.spec th{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);background:var(--sky-2);border-bottom:1px solid var(--line);
}
table.spec td:first-child{color:var(--navy);font-weight:500}
table.spec tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------ FAQ -- */
.qa{border-bottom:1px solid var(--line);--qc:44px}
.qa summary{
  list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) var(--qc);gap:20px;align-items:center;
  padding:21px 0;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{
  font-family:var(--sign);font-weight:700;font-size:clamp(17.5px,1.6vw,20px);
  line-height:1.24;color:var(--navy);
}
.qa-chip{
  width:var(--qc);height:var(--qc);border:1px solid var(--line-hard);border-radius:50%;
  position:relative;justify-self:end;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease);
}
.qa-chip::before,.qa-chip::after{
  content:"";position:absolute;left:50%;top:50%;width:13px;height:1.8px;
  background:var(--navy);transform:translate(-50%,-50%);
}
.qa-chip::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] .qa-chip{background:var(--aqua);border-color:var(--aqua);transform:rotate(45deg)}
.qa[open] .qa-chip::before,.qa[open] .qa-chip::after{background:var(--paper)}
.qa-a{
  display:grid;grid-template-columns:minmax(0,1fr) var(--qc);gap:20px;
  padding:0 0 24px;
}
.qa-a > div{grid-column:1}
.qa-a p{color:var(--navy-soft);max-width:68ch;font-size:15.2px}
.qa-a p + p{margin-top:.9em}
.qa[open] .qa-a{animation:fadeup .55s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(hover:hover){.qa summary:hover h3{color:var(--aqua-dp)}}

/* -------------------------------------------------------- inverted band -- */
.band{
  background:var(--deep);color:var(--on-dark);position:relative;overflow:clip;
  padding-block:var(--sec-y-lg);
}
.band::before{           /* contour lines — the escarpment behind the page */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(-16deg,
    rgba(244,251,253,.055) 0 1px,transparent 1px 34px);
}
.band::after{
  content:"";position:absolute;right:0;top:0;width:min(560px,80vw);height:min(560px,80vw);
  pointer-events:none;
  background:radial-gradient(circle,rgba(18,184,208,.20),transparent 66%);
}
.band .wrap{position:relative}
.band .h-sec,.band h2,.band h3{color:var(--on-dark)}
.band p{color:var(--on-dark-soft)}
.band .eyebrow{color:var(--on-dark-mute)}
.band .eyebrow::before{background:var(--aqua-lt)}
.band .plate{background:var(--deep-2);border-color:var(--line-inv)}
.band .plate-h{border-color:var(--line-inv);color:var(--on-dark-mute)}
.band .plate-h b{color:var(--aqua-lt)}
.band .slats{background:var(--line-inv-soft)}
.band .slat{background:var(--deep-2);color:var(--on-dark)}
.band .slat .tick{border-color:var(--aqua-lt)}
.band .slat .tick::after{border-color:var(--aqua-lt)}
.band .badge{background:var(--deep-2);border-color:var(--line-inv);color:var(--on-dark)}
.band .badge::before{background:var(--aqua-lt)}

/* ------------------------------------------------------------- CTA band -- */
.cta-band{
  display:block;background:var(--flame);color:var(--paper);text-decoration:none;
  overflow:hidden;border-block:2px solid var(--flame-dp);
  transition:background .4s var(--ease);
}
.cta-band .ticker-in{animation-duration:26s}
@media(hover:hover){.cta-band:hover{background:var(--navy)}}

/* ------------------------------------------------------------ map/weather -- */
.figs{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,28px);align-items:start}
.map-frame{border:1px solid var(--line);background:var(--paper);padding:8px}
.map-frame iframe{
  display:block;width:100%;height:340px;border:0;
  filter:grayscale(1) sepia(.12);transition:filter .6s var(--ease);
}
@media(hover:hover){.map-frame:hover iframe{filter:none}}
.wx{border:1px solid var(--line);background:var(--paper);padding:8px}
.wx-h{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--navy-mute);padding:6px 6px 10px;
}

/* ----------------------------------------------------------------- footer -- */
.foot{background:var(--deep);color:var(--on-dark-soft);padding-block:clamp(52px,7vh,86px) 0}
.foot a{text-decoration:none;color:var(--on-dark-soft)}
@media(hover:hover){.foot a:hover{color:var(--aqua-lt)}}
.foot-top{
  display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,50px);padding-bottom:44px;
}
.foot-h{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--on-dark-mute);margin-bottom:16px;padding-bottom:10px;
  border-bottom:1px solid var(--line-inv);
}
.foot ul{list-style:none;display:grid;gap:9px;font-size:13.6px}
.foot .brand-txt b{color:var(--on-dark)}
.foot .brand-txt span{color:var(--on-dark-mute)}
/* the footer serves the knockout file itself, so no tile or border here either */
.foot-blurb{font-size:14px;line-height:1.68;margin-top:18px;max-width:38ch;color:var(--on-dark-soft)}
.foot-cta{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.foot-bot{
  border-top:1px solid var(--line-inv);padding-block:20px 26px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-mute);
}
.foot-bot .sp{margin-left:auto}

/* ------------------------------------------------------------ breadcrumb -- */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-mute);margin-bottom:18px;
}
.crumb a{text-decoration:none}
.crumb span{opacity:.5}
@media(hover:hover){.crumb a:hover{color:var(--aqua-dp)}}

/* --------------------------------------------------------------- reveals -- */
.ro{opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.ro.in{opacity:1;transform:none}
.ro.d1{transition-delay:.08s}
.ro.d2{transition-delay:.16s}
.ro.d3{transition-delay:.24s}
html:not(.js) .ro{opacity:1;transform:none}

/* hero entrance — CSS-driven, so a JS failure can never strand it */
.h-line > span{transform:translateY(105%);animation:rise 1s var(--ease) forwards}
.h-line:nth-child(1) > span{animation-delay:.10s}
.h-line:nth-child(2) > span{animation-delay:.20s}
.h-line:nth-child(3) > span{animation-delay:.30s}
.h-line:nth-child(4) > span{animation-delay:.40s}
@keyframes rise{to{transform:none}}
.fade-a{opacity:0;animation:fadein .9s var(--ease) .55s forwards}
.fade-b{opacity:0;animation:fadein .9s var(--ease) .70s forwards}
.fade-c{opacity:0;animation:fadein .9s var(--ease) .85s forwards}
@keyframes fadein{to{opacity:1}}

/* ---------------------------------------------------------- breakpoints -- */
@media(max-width:1100px){
  .hero-grid{grid-template-columns:var(--rail) minmax(0,1fr);}
  /* NOTE: no grid-column on .hero-plate here. It lives inside .hero-split,
     not .hero-grid, so forcing it to column 2 created an implicit second
     track and defeated the single-column collapse below 980px. */
  .row > a{grid-template-columns:62px minmax(0,1fr) minmax(0,1.05fr) 44px}
}
@media(max-width:980px){
  .nav{display:none}
  .burger{display:block;margin-left:auto}
  .bar .wrap{gap:12px}
  .bar-call span.long{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
  .figs{grid-template-columns:1fr}
  .shead{grid-template-columns:1fr;align-items:start}
}
@media(max-width:860px){
  :root{--rail:54px}
  .sec-rail::before,.hero-rail::before{left:13px}
  .post{width:28px;height:38px;font-size:9.5px}
  .hero-vert{display:none}
  /* ruled rows restack — the description is CLIENT COPY and must never be
     dropped at a breakpoint (typography-responsive.md). */
  .row > a{
    grid-template-columns:52px minmax(0,1fr) 40px;
    grid-template-areas:"n t a" ". d d";
    row-gap:8px;align-items:start;
  }
  .row-n{grid-area:n;padding-top:4px}
  .row-t{grid-area:t}
  .row-d{grid-area:d}
  .row-a{grid-area:a;width:34px;height:34px;align-self:start}
  .row-a svg{width:13px;height:13px}
}
@media(max-width:700px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-rail{display:none}
  .sec-in{grid-template-columns:1fr;gap:0}
  .sec-rail{display:none}
  .foot-top{grid-template-columns:1fr;gap:30px}
  .vista-img{aspect-ratio:4/3}
  .fcall{display:inline-flex}
  body.locked .fcall{display:none}
  .qa{--qc:36px}
}
@media(max-width:560px){
  .folio-r{display:none}
  .ticker-in span{font-size:16px;gap:18px;padding-right:18px}
  .foot-bot{font-size:9px;letter-spacing:.14em}
}

/* ------------------------------------------------------------- a11y gates -- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important;
  }
  .ro{opacity:1!important;transform:none!important}
  .h-line > span{transform:none!important}
  .fade-a,.fade-b,.fade-c{opacity:1!important}
  .ticker-in{animation:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .bar,.folio,.mnav,.fcall,.ticker,.cta-band{display:none}
  body{background:#fff}
}

/* ------------------------------------------------- copy-level primitives -- */
/* The client's own link wording inside an index row. It is CLIENT COPY, so it
   is rendered visibly here rather than hidden in an aria-label. */
.row-c{
  display:block;margin-top:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--aqua-dp);
}
.row-c::after{content:" \2192"}

.cta-line{margin:26px 0 0}
.inline-cta{margin-top:12px}
.inline-cta a{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--aqua-dp);text-decoration:none;border-bottom:1px solid var(--line-hard);
  padding-bottom:2px;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.inline-cta a::after{content:" \2192";display:inline-block;transition:transform .4s var(--ease)}
@media(hover:hover){
  .inline-cta a:hover{color:var(--aqua);border-color:var(--aqua)}
  .inline-cta a:hover::after{transform:translateX(5px)}
}
.band .row-c,.band .inline-cta a{color:var(--aqua-lt)}

/* rhythm inside a rendered section */
.sec-body > .ro > .body-copy + .badges,
.sec-body > .ro > .body-copy + .defs,
.sec-body > .ro > .body-copy + .tbl-wrap{margin-top:22px}
.sec-body > .ro > .badges + .body-copy,
.sec-body > .ro > .defs + .body-copy,
.sec-body > .ro > .tbl-wrap + .body-copy{margin-top:22px}
.sec-body > .ro > .h-sub + .body-copy{margin-top:8px}

/* ------------------------------------------------------------ hero layout -- */
/* The headline spans the full content column; the lede and the credential
   plate share the row beneath it. A narrower lead column made the longest
   masked line overrun, which breaks the rise effect. */
.hero-split{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(24px,3.4vw,56px);align-items:start;margin-top:30px;
}
.hero-note{
  margin-top:18px;font-family:var(--mono);font-size:12px;line-height:1.6;
  color:var(--navy-mute);max-width:42ch;
}
.hero-plate{align-self:start}

/* two-up definition list, used on the inverted band */
.defs.two-up{grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,52px);display:grid}
.band .def{border-color:var(--line-inv-soft)}
.band .def-l{color:var(--on-dark)}
.band .def-t{color:var(--on-dark-soft)}
/* the route line continues through the dark band */
.band .band-rail::before{background:var(--line-inv)}
.band .post{background:var(--flame);color:var(--paper)}
.band .post::after{background:var(--deep)}

@media(max-width:980px){
  .hero-split{grid-template-columns:1fr;gap:30px}
  .defs.two-up{grid-template-columns:1fr}
}
@media(max-width:700px){
  .hero-lead{grid-column:1/-1!important}
}

/* On the dark band a navy primary button all but disappears (2.0:1 against
   --deep). Accent fill instead: white on --aqua is 6.02:1. */
.band .btn-p{background:var(--aqua);color:var(--paper)}
.band .btn-p::before{background:var(--aqua-lt)}
.band .btn-p:hover{color:var(--deep)}
.band .btn-s{border-color:var(--line-inv);color:var(--on-dark)}
.band .btn-s::before{background:var(--aqua)}

/* ============================================================== [02] board ==
   The trailhead orientation board: a sticky photo panel beside a legend of
   drawn marks. Replaces a flat two-column definition list, which was the one
   genuinely generic moment on the page — and it sat on the page's only dark
   band, which should be its strongest. */
.board{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
.board-side{position:sticky;top:calc(var(--bar) + 34px)}
.board-side .lede{max-width:40ch}

.board-fig{margin:26px 0 0;position:relative}
.board-fig img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%;
  border:1px solid var(--line-inv);
}
.board-fig figcaption{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 13px;background:var(--deep-2);border:1px solid var(--line-inv);
  border-top:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.board-fig figcaption b{color:var(--aqua-lt);font-weight:600}

/* the legend panel — one bordered object with corner ticks, not eight cards */
.legend{position:relative;border:1px solid var(--line-inv);background:var(--deep-2)}
.legend::before,.legend::after{
  content:"";position:absolute;width:13px;height:13px;border:2px solid var(--aqua-lt);
}
.legend::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.legend::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.legend-h{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(16px,2vw,22px);border-bottom:1px solid var(--line-inv);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.legend-h b{color:var(--aqua-lt);font-weight:600}
.legend-list{list-style:none}

.leg{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(13px,1.5vw,18px);align-items:start;
  padding:clamp(14px,1.6vw,18px) clamp(16px,2vw,22px);
  border-bottom:1px solid var(--line-inv-soft);
}
.leg:last-child{border-bottom:0}
.leg-sym{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-inv);color:var(--aqua-lt);
  transition:background .4s var(--ease),border-color .4s var(--ease),
             color .4s var(--ease);
}
.leg-sym svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.leg-body{min-width:0}
.leg-l{
  display:block;font-family:var(--sign);font-weight:700;
  font-size:clamp(17px,1.5vw,19.5px);line-height:1.18;color:var(--on-dark);
  margin-bottom:5px;
}
.leg-t{display:block;color:var(--on-dark-soft);font-size:14.6px;line-height:1.6}
@media(hover:hover){
  .leg:hover .leg-sym{background:var(--aqua);border-color:var(--aqua);color:var(--paper)}
}

@media(max-width:980px){
  .board{grid-template-columns:1fr;gap:30px}
  .board-side{position:static}
  .board-side .lede{max-width:56ch}
  .board-fig img{aspect-ratio:16/9}
}
@media(max-width:560px){
  .leg{grid-template-columns:1fr;gap:10px}
  .leg-sym{width:34px;height:34px}
}

/* ------------------------------------------------------------ ground rhythm --
   A tonal SHELF, not a second dark band. Accent discipline allows exactly one
   inverted field per page, so a long light run is broken with the ground's own
   second step instead. See design-patterns.md, "Ground rhythm". */
.sec--shelf{background:var(--sky-2)}
/* the row hover wash is --sky-2, which is invisible ON --sky-2 */
.sec--shelf .row::before{background:var(--sky-3)}

/* ------------------------------------------------------------ service page -- */
.hero--svc{padding-block:clamp(28px,4vh,52px) 0}
.hero--svc .h-display{font-size:clamp(31px,4.6vw,58px)}
.hero--svc .crumb{margin-bottom:18px}
section[id]{scroll-margin-top:calc(var(--bar) + 20px)}

/* A generated section's definition rows ran the full 1050px column while their
   text stopped at the 66ch reading measure — hairlines crossing an empty right
   half. Two-up above 900px fills the width instead of leaving a void. Numbered
   steps stay single-column: a sequence has to read top-to-bottom. */
@media(min-width:900px){
  .sec-body--wide .defs:not(.numbered){
    grid-template-columns:1fr 1fr;column-gap:clamp(26px,3vw,54px);
  }
  .sec-body--wide .defs:not(.numbered) .def{align-content:start}
  /* keep the reading measure honest on long-form service copy */
  .sec-body--wide > .ro > .body-copy{max-width:72ch}
}

/* ================================================================ quote form ==
   Sits under the hero on every page. Designed as an object in the system —
   corner-ticked plate, mono labels, underline inputs — never a default form. */
.qf-band{position:relative;padding-block:clamp(52px,7vh,86px);background:var(--sky-2)}
.qf{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,3.6vw,60px);align-items:start;
}
.qf-intro .eyebrow{margin-bottom:16px}
.qf-intro .h-sec{margin-bottom:14px}
.qf-intro .lede{max-width:44ch}
.qf-tel{color:var(--aqua-dp);text-decoration:none;border-bottom:1px solid var(--line-hard);
  font-weight:600;white-space:nowrap}
@media(hover:hover){.qf-tel:hover{color:var(--aqua);border-color:var(--aqua)}}
.qf-notes{list-style:none;margin-top:22px;display:grid;gap:9px}
.qf-notes li{
  position:relative;padding-left:20px;font-size:14.2px;color:var(--navy-soft);
}
.qf-notes li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--aqua);clip-path:polygon(50% 0,100% 100%,0 100%);
}

.qf-plate{background:var(--paper)}
.qf-row{margin-bottom:17px}
.qf-lab{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--navy-mute);margin-bottom:7px;
  transition:color .3s var(--ease);
}
.qf-row:focus-within .qf-lab{color:var(--aqua-dp)}
.qf-q{color:var(--navy);font-weight:600;letter-spacing:.06em}
/* underline inputs, not boxes */
.qf-in{
  width:100%;border:0;border-bottom:1px solid var(--line-hard);background:none;
  font-family:var(--body);font-size:15.5px;color:var(--navy);
  padding:8px 2px;border-radius:0;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.qf-in:focus{outline:0;border-bottom-color:var(--aqua);background:var(--sky)}
.qf-in::placeholder{color:var(--navy-mute);opacity:.72}
.qf-ta{resize:vertical;min-height:72px;line-height:1.6}
.qf-cap{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px;align-items:end}
.qf-cap .qf-lab{margin-bottom:0;align-self:end;padding-bottom:9px}
/* honeypots: off-screen to the LEFT (leftward absolutes don't extend scroll) */
.qf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qf-btn{width:100%;justify-content:center;margin-top:6px}
.qf-btn[disabled]{opacity:.55;cursor:not-allowed}
.qf-msg{margin-top:12px;font-size:14px;line-height:1.55;color:var(--navy-soft);min-height:1px}
.qf-msg.is-err{color:var(--aqua-dp)}

/* stamped confirmation replaces the form */
.qf-done{
  border:1px solid var(--line-hard);background:var(--paper);position:relative;
  padding:clamp(26px,3vw,40px);text-align:center;
}
.qf-done::before,.qf-done::after{
  content:"";position:absolute;width:13px;height:13px;border:2px solid var(--aqua);
}
.qf-done::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.qf-done::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.qf-stamp{
  display:inline-block;margin-bottom:14px;padding:9px 20px;
  border:2px solid var(--aqua);color:var(--aqua-dp);
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  transform:rotate(-3deg);
}
.qf-done p{color:var(--navy-soft);max-width:46ch;margin-inline:auto}

@media(max-width:980px){
  .qf{grid-template-columns:1fr;gap:28px}
  .qf-intro .lede,.qf-intro .h-sec{max-width:none}
}

/* ======================================================== section treatments ==
   Nine sections rendered as "heading + paragraphs + definition list" is what
   made the service template read as generic. Each role now gets its own frame;
   the client's words are untouched in every case. */

/* --- price: a spec plate with dotted leaders and tabular figures ----------- */
.price-plate{max-width:680px;margin-top:8px}
.leaders{list-style:none}
.lead-row{
  display:flex;align-items:baseline;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--line-soft);
}
.lead-row:last-child{border-bottom:0}
.lead-l{font-size:15px;color:var(--navy);white-space:nowrap}
.lead-dots{
  flex:1 1 auto;min-width:18px;border-bottom:1px dotted var(--line-hard);
  transform:translateY(-4px);
}
.lead-v{
  font-family:var(--mono);font-size:14.5px;font-weight:600;color:var(--aqua-dp);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* --- specimen: named damage types as a grid of marked cells ---------------- */
.specimens{
  list-style:none;display:grid;gap:1px;background:var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:1px solid var(--line);margin-top:8px;
}
.spec-cell{
  background:var(--paper);padding:16px 18px;display:flex;align-items:baseline;gap:12px;
  transition:background .4s var(--ease);
}
.spec-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--aqua-dp);flex:none;
}
.spec-t{font-family:var(--sign);font-weight:700;font-size:18px;line-height:1.16;color:var(--navy)}
@media(hover:hover){.spec-cell:hover{background:var(--sky-2)}}
.sec--shelf .spec-cell{background:var(--paper)}
.sec--shelf .specimens{background:var(--line)}

/* --- process: the numbered steps sit on a drawn rule ----------------------- */
.sec--process .defs.numbered{position:relative;padding-left:4px}
.sec--process .defs.numbered::before{
  content:"";position:absolute;left:14px;top:14px;bottom:14px;width:2px;
  background:var(--line);
}
.sec--process .defs.numbered .def{position:relative}
.sec--process .defs.numbered .def::before{
  position:relative;z-index:1;background:var(--sky);padding:2px 0 6px;
}
.sec--shelf.sec--process .defs.numbered .def::before{background:var(--sky-2)}

/* --- ask: the closing section is a plate, not another block of prose ------- */
.sec--ask > .ro{
  border:1px solid var(--line-hard);background:var(--paper);position:relative;
  padding:clamp(24px,3vw,40px);
}
.sec--ask > .ro::before,.sec--ask > .ro::after{
  content:"";position:absolute;width:13px;height:13px;border:2px solid var(--aqua);
}
.sec--ask > .ro::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.sec--ask > .ro::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.sec--ask .body-copy{max-width:60ch}
.sec--ask .cta-line{margin-top:20px}

/* the captcha input sat at the far right of a 1fr track, visually divorced
   from the question it answers — keep them adjacent and left-aligned */
.qf-cap{grid-template-columns:auto 96px;justify-content:start;gap:14px}
.qf-cap .qf-lab{white-space:nowrap}
.qf-intro .h-sec{text-wrap:balance}

/* block rhythm inside a rendered section — every treatment needs air on both
   sides, not just above (the specimen grid butted into the next paragraph) */
.sec-body--wide .specimens,
.sec-body--wide .price-plate,
.sec-body--wide .tbl-wrap,
.sec-body--wide .badges,
.sec-body--wide .defs{margin-block:22px}
.sec-body--wide .defs:first-child,
.sec-body--wide .specimens:first-child{margin-top:8px}
.sec-body--wide .cta-line{margin-top:24px}

/* --- note: a pure-prose section, heading left / copy right ----------------- */
@media(min-width:900px){
  .sec--note{
    display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(24px,3.4vw,56px);align-items:start;
  }
  .sec--note > .h-sec{margin-bottom:0!important}
  .sec--note > .ro:last-child{padding-top:6px}
  .sec--note .body-copy{max-width:60ch}
}
.qf-title{margin:0 0 14px}

/* sec--shelf is on the <section>; sec--process is on the .sec-body inside it,
   so they are a DESCENDANT pair, never a compound one — the earlier
   `.sec--shelf.sec--process` selector matched nothing and left the step
   numerals sitting on light chips over the shelf. */
.sec--shelf .sec--process .defs.numbered .def::before{background:var(--sky-2)}
.band .sec--process .defs.numbered .def::before{background:var(--deep)}
.band .sec--process .defs.numbered::before{background:var(--line-inv)}

/* the split head gives the heading ~430px; the full section clamp overflowed it */
@media(min-width:900px){
  .sec--note > .h-sec{font-size:clamp(26px,2.6vw,36px)}
}

/* .foot a{color:--on-dark-soft} outranks .btn-p's own colour, so the footer's
   phone button rendered pale-blue text on the new aqua fill (3.13:1). */
.foot .btn-p,.foot .btn-p:hover{color:var(--paper)}
.foot .btn-s{border-color:var(--line-inv);color:var(--on-dark)}

.qf-hours{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-top:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--navy-mute);
}
.qf-hours .qf-tel{font-size:13.5px}

/* an in-content link the client put inside a sentence */
.inline-link{
  color:var(--aqua-dp);text-decoration:none;
  border-bottom:1px solid var(--aqua);padding-bottom:1px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
@media(hover:hover){.inline-link:hover{color:var(--flame-dp);border-color:var(--flame)}}
.band .inline-link{color:var(--aqua-lt);border-color:var(--aqua-lt)}

/* utility + article pages: one calm reading column */
.hero--util{padding-block:clamp(30px,4vh,56px) 0}
.util-h1{font-size:clamp(30px,4.2vw,54px)}
.sec-body--util .body-copy,.sec-body--util .lede{max-width:70ch}
.sec-body--util .body-copy + .body-copy{margin-top:1.05em}
.plain-list{list-style:none;display:grid;gap:9px;margin:18px 0;max-width:70ch}
.plain-list li{position:relative;padding-left:20px;color:var(--navy-soft)}
.plain-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--aqua);clip-path:polygon(50% 0,100% 100%,0 100%);
}
/* The sitemap's longest group is the 20 areas served — a single 20-item column
   is a scroll with nothing to read. Columns are flowed, not fixed, so shorter
   groups (4 company links) stay a single tidy column instead of stretching. */
/* Link-list sections carry no prose, so the full --sec-y rhythm leaves each
   group floating in a field of air. This is the one page where tighter is
   right: it is a directory, read by scanning. */
.sec--index{padding-block:clamp(30px,4.4vh,54px)}

.sitemap-cols{max-width:none;display:block;columns:2;column-gap:clamp(26px,3vw,54px)}
.sitemap-cols li{break-inside:avoid;margin-bottom:9px}
@media(min-width:1000px){.sitemap-cols{columns:3}}
@media(max-width:620px){.sitemap-cols{columns:1}}

.article .h-sec{font-size:clamp(24px,2.8vw,36px);margin:34px 0 12px}
.article .h-sub{margin:26px 0 8px}
.article .body-copy + .h-sec{margin-top:40px}