/* ============================================================================
   VENTURA AUTO GLASS REPAIR — "Clear Coast"
   Direction : an optical inspection card. The printed spec sheet a glass
               technician fills out — registration grid, corner ticks, dotted
               leader rows, tabular figures, plate numbers, a stamped seal.
   Tone      : precise / sunlit / calm.
   Signature : every heading collides a light optical serif with a technical
               uppercase grotesque; a fracture-radial (the star-break geometry
               of a chipped windshield) is the recurring drawn mark.
   Palette   : bone paper world · marine ink · the brand's own green as accent.
               Every text pairing computed for WCAG AA — see the token notes.
   ========================================================================== */

:root{
  /* --- base world --- */
  --paper:#f7f4ed;
  --paper-2:#eee9de;
  --paper-3:#e4ddcd;

  /* --- ink --- */
  --ink:#101c1e;          /* 15.84:1 on paper */
  --ink-soft:#3f4f50;     /*  7.82:1 on paper */
  --ink-mute:#63696a;     /*  5.09:1 on paper, 4.61:1 on paper-2 — AA on BOTH */

  /* --- inverted grounds --- */
  --marine:#0c2a2b;

  /* --- accent: the brand green, in text-safe and decorative steps ---
     green    5.49:1 on paper — the only green allowed for TEXT on light
     green-br brand value, FAILS as text (3.79) — fills/rules/glyphs ONLY
     green-lt 9.10:1 on marine — the tint for accent TEXT on dark grounds */
  --green:#17722f;
  --green-br:#1f8f3a;
  /* green-btn: the fill used UNDER white text/glyphs. The brand value reaches
     only 4.16:1 against white, so anything carrying a white label uses this. */
  --green-btn:#1b8033;
  --green-lt:#7fdc95;
  --green-wash:rgba(31,143,58,.09);

  --sun:#95600d;          /* 4.83:1 on paper — secondary accent */

  /* --- hairlines, derived from ink --- */
  --line:rgba(16,28,30,.17);
  --line-soft:rgba(16,28,30,.09);
  --line-hair:rgba(16,28,30,.055);
  --line-inv:rgba(247,244,237,.20);

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

  --bar:58px;             /* smart bar height */
  --folio:32px;
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;            /* clip, not hidden — keeps position:sticky alive */
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.72;
  overflow-x:clip;
  font-synthesis-weight:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:1px}
::selection{background:var(--green-br);color:var(--paper)}

/* film grain — the printed-card material layer */
body::before{
  content:"";position:fixed;inset:0;z-index:998;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- layout -- */
.wrap{width:min(1240px,calc(100% - 76px));margin-inline:auto}
.sec{padding:clamp(74px,10vh,128px) 0;position:relative}
.sec--tight{padding:clamp(54px,7vh,84px) 0}
section[id]{scroll-margin-top:calc(var(--bar) + 24px)}

/* ------------------------------------------------------------ typography -- */
.ser{font-family:'Fraunces',Georgia,serif;font-weight:300;font-optical-sizing:auto}
.ser-i{font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic}
.grot{
  font-family:'Bricolage Grotesque','Archivo',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.028em;
}
.mono{
  font-family:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  text-transform:uppercase;letter-spacing:.24em;font-size:10px;font-weight:500;
  line-height:1.5;
}
.tnum{font-variant-numeric:tabular-nums}

/* chapter label: [ 03 ] — The Services */
.chap{
  display:flex;align-items:center;gap:13px;color:var(--ink-mute);
  margin-bottom:26px;
}
.chap b{color:var(--green);font-weight:500}
.chap i{flex:1;height:1px;background:var(--line);font-style:normal;max-width:120px}

/* the H2 system — serif × grot collision, repeated on every section */
.h2{
  font-size:clamp(30px,4.5vw,58px);line-height:1.03;letter-spacing:-.02em;
  margin-bottom:20px;text-wrap:balance;
}
.h2 .grot{display:block;font-size:.86em;letter-spacing:-.03em}
.h2 .ser-i{display:block}
.h2 em{font-style:italic;font-family:'Fraunces',Georgia,serif;color:var(--green)}

.lede{
  font-size:clamp(16px,1.35vw,18.5px);line-height:1.72;color:var(--ink-soft);
  max-width:62ch;text-wrap:pretty;
}
.lede--wide{max-width:74ch}
p + p{margin-top:1.05em}

/* ------------------------------------------------------- fracture radial --
   The signature drawn mark: the star-break geometry of a windshield chip,
   drawn as inline SVG (see inc/frac.php) so the rays, rings and impact point
   are exact. A CSS conic-gradient version was tried first and rejected - its
   centre is a hard-edged blur and it reads as a smudge, not a fracture.
   Decorative only; always aria-hidden.                                     */
.frac{
  position:absolute;pointer-events:none;aspect-ratio:1;
  width:min(430px,74vw);color:var(--ink);opacity:.34;
}
.frac svg{width:100%;height:100%;display:block;overflow:visible}
.band .frac{color:var(--paper);opacity:.3}

/* ------------------------------------------------------------ folio strip -- */
.folio{
  height:var(--folio);border-bottom:1px solid var(--line-soft);
  background:var(--paper);display:flex;align-items:center;
  position:relative;z-index:60;
}
.folio .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.folio .mono{font-size:9.5px;letter-spacing:.3em;color:var(--ink-mute);white-space:nowrap}
.folio .fr{display:flex;gap:22px;align-items:center}
.folio a.mono:hover{color:var(--green)}
.pulse{
  width:5px;height:5px;border-radius:50%;background:var(--green-br);
  display:inline-block;margin-right:8px;vertical-align:middle;
  animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* -------------------------------------------------------------- smart bar -- */
.bar{
  position:sticky;top:0;z-index:70;height:var(--bar);
  background:rgba(247,244,237,.93);backdrop-filter:blur(11px);
  border-bottom:1px solid var(--line-soft);
  transition:transform .5s var(--ease),box-shadow .4s var(--ease);
}
/* .bar.hide is no longer applied — the bar stays pinned at all times. Kept as
   a no-op guard so any stale cached JS can't shove the nav off-screen. */
.bar.hide{transform:none}
.bar.stuck{box-shadow:0 1px 22px rgba(16,28,30,.07)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:20px}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand .seal{
  width:29px;height:29px;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;font-family:'Fraunces',serif;font-size:14px;
  font-weight:400;flex-shrink:0;position:relative;
}
.brand .seal::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--line-soft);
}
.brand .bn{display:block;line-height:1.05}
.brand .bn span{display:block}                     /* never let flex split text */
.brand .b1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15.5px;
  text-transform:uppercase;letter-spacing:-.02em;
}
.brand .b2{
  font-family:'Spline Sans Mono',monospace;font-size:8px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-mute);margin-top:1px;
}

.nav{display:flex;align-items:center;gap:27px}
.nav a{
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-soft);position:relative;padding:5px 0;
  transition:color .22s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--green-br);transition:width .4s var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}

/* dropdown */
.drop{position:relative}
.drop > button{
  background:none;border:0;cursor:pointer;padding:5px 0;
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:6px;
  transition:color .22s var(--ease);
}
.drop > button:hover,.drop[data-open] > button{color:var(--ink)}
.drop > button svg{transition:transform .35s var(--ease)}
.drop[data-open] > button svg{transform:rotate(180deg)}
.drop-menu{
  position:absolute;top:calc(100% + 13px);left:50%;transform:translate(-50%,-8px);
  background:var(--paper);border:1px solid var(--line);min-width:264px;padding:9px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  box-shadow:0 18px 46px rgba(16,28,30,.12);
}
.drop[data-open] .drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop-menu::before{           /* corner tick, the inspection-card detail */
  content:"";position:absolute;top:-1px;left:-1px;width:11px;height:11px;
  border-top:2px solid var(--green-br);border-left:2px solid var(--green-br);
}
.drop-menu a{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:9px 12px;font-family:'Archivo',sans-serif;font-size:13.5px;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);line-height:1.35;
  transition:background .25s var(--ease),color .25s var(--ease),padding-left .3s var(--ease);
}
.drop-menu a::after{display:none}
.drop-menu a i{
  font-style:normal;font-family:'Spline Sans Mono',monospace;font-size:9px;
  letter-spacing:.1em;color:var(--ink-mute);transition:color .25s var(--ease);
}
.drop-menu a:hover{background:var(--green-wash);color:var(--ink);padding-left:17px}
.drop-menu a:hover i{color:var(--green)}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;gap:11px;padding:14px 24px;
  font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;border:1.5px solid var(--ink);background:none;
  position:relative;overflow:hidden;cursor:pointer;isolation:isolate;
  transition:color .3s var(--ease),border-color .45s var(--ease);
}
.btn::before{                 /* lacquer sweep */
  content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:translateX(-101%);transition:transform .55s var(--ease);
}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:translateX(0)}
.btn svg{transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn--fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--fill::before{background:var(--green-br);transform:translateX(-101%)}
.btn--fill:hover{color:#fff;border-color:var(--green-br)}

.btn--green{background:var(--green-btn);border-color:var(--green-btn);color:#fff}
.btn--green::before{background:var(--ink)}
.btn--green:hover{color:var(--paper);border-color:var(--ink)}

.btn--ghost{border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}

.btn--sm{padding:10px 17px;font-size:9.5px;letter-spacing:.16em}

/* inline text link with a growing rule */
.ilink{
  color:var(--green);position:relative;font-weight:500;
  background-image:linear-gradient(var(--green-br),var(--green-br));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease);
}
.ilink:hover{background-size:100% 1px}

/* --------------------------------------------------------------- plates --- */
/* the inspection card itself: 1px frame + green corner ticks */
.plate{position:relative;border:1px solid var(--line);background:var(--paper);padding:26px}
.plate::before,.plate::after{content:"";position:absolute;width:13px;height:13px}
.plate::before{top:-1px;left:-1px;border-top:2px solid var(--green-br);border-left:2px solid var(--green-br)}
.plate::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--green-br);border-right:2px solid var(--green-br)}
.plate-hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:13px;margin-bottom:17px;border-bottom:1px solid var(--line-soft);
}
.plate-hd .mono{color:var(--ink-mute)}

/* dotted-leader rows — beats two-column key/value, which wraps badly */
.leader{display:flex;align-items:baseline;gap:9px;padding:7.5px 0;font-size:14px}
.leader dt{white-space:nowrap;color:var(--ink-soft);flex-shrink:0}
.leader i{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:16px}
.leader dd{
  white-space:nowrap;margin:0;font-family:'Fraunces',serif;font-style:italic;
  font-size:15.5px;color:var(--ink);flex-shrink:0;
}

/* --------------------------------------------------------- reveal system -- */
.ro{
  opacity:0;transform:translateY(28px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.ro.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* ------------------------------------------------------------- ruled rows -- */
.rows{border-top:2px solid var(--ink)}
.row{
  display:grid;grid-template-columns:.3fr 1.25fr 1.5fr auto;gap:26px;align-items:center;
  padding:23px 0;border-bottom:1px solid var(--line-soft);position:relative;
  transition:padding-left .5s var(--ease);
}
.row::before{
  content:"";position:absolute;inset:0 -22px;z-index:-1;
  background:linear-gradient(90deg,var(--green-wash),transparent 78%);
  transform:translateX(-100%);opacity:0;
  transition:transform .55s var(--ease),opacity .55s var(--ease);
}
.row .rn{
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.16em;
  color:var(--ink-mute);font-variant-numeric:tabular-nums;
}
.row .rt{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(16px,1.5vw,20px);
  text-transform:uppercase;letter-spacing:-.012em;line-height:1.16;
}
.row .rd{font-size:14.2px;color:var(--ink-soft);line-height:1.6;text-wrap:pretty}
.arrow{
  width:39px;height:39px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;flex-shrink:0;
  transition:background .45s var(--ease),border-color .45s var(--ease),
             transform .45s var(--ease),color .45s var(--ease);
}
@media(hover:hover){
  .row:hover{padding-left:20px}
  .row:hover::before{transform:translateX(0);opacity:1}
  .row:hover .arrow{background:var(--green-btn);border-color:var(--green-btn);color:#fff;transform:rotate(-45deg)}
  .row:hover .rt{color:var(--green)}
}
.row:focus-visible{padding-left:20px;outline-offset:-2px}
.row:focus-visible .arrow{background:var(--green-btn);border-color:var(--green-btn);color:#fff;transform:rotate(-45deg)}

/* ------------------------------------------------------------ inverted band */
.band{
  background:var(--marine);color:var(--paper);position:relative;overflow:clip;
}
.band::before{                /* pinstripe texture */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(247,244,237,.03) 0 1px,transparent 1px 10px);
}
.band::after{                 /* corner glow — anchored right:0, never negative */
  content:"";position:absolute;top:-16%;right:0;width:min(560px,88vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(31,143,58,.16),transparent 68%);
  pointer-events:none;
}
.band .chap{color:rgba(247,244,237,.62)}
.band .chap b{color:var(--green-lt)}
.band .chap i{background:var(--line-inv)}
.band .lede{color:rgba(247,244,237,.78)}
.band .h2 em{color:var(--green-lt)}
.band .plate{background:transparent;border-color:var(--line-inv)}
.band .leader dt{color:rgba(247,244,237,.72)}
.band .leader dd{color:var(--paper)}
.band .leader i{border-bottom-color:var(--line-inv)}
.band .btn{border-color:var(--line-inv);color:var(--paper)}
.band .btn::before{background:var(--paper)}
.band .btn:hover{color:var(--ink);border-color:var(--paper)}
.band .btn--green{background:var(--green-btn);border-color:var(--green-btn);color:#fff}
.band .btn--green::before{background:var(--paper)}
.band .btn--green:hover{color:var(--ink)}

/* --------------------------------------------------------------- reviews -- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.quote{
  position:relative;padding:34px 26px 26px;border:1px solid var(--line-inv);
  display:flex;flex-direction:column;gap:17px;
}
.quote::before{
  content:"\201C";position:absolute;top:-16px;left:16px;
  font-family:'Fraunces',serif;font-style:italic;font-size:78px;line-height:1;
  color:var(--green-lt);opacity:.42;pointer-events:none;
}
.quote p{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:16.5px;line-height:1.62;color:rgba(247,244,237,.93);flex:1;
}
.quote .qa{
  display:flex;align-items:center;gap:10px;padding-top:15px;
  border-top:1px solid var(--line-inv);
}
.quote .qa .stars{color:var(--green-lt);font-size:11px;letter-spacing:.14em}
.quote .qa a{
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--paper);
  transition:color .28s var(--ease);
}
.quote .qa a:hover{color:var(--green-lt)}

/* ------------------------------------------------------------------ cards -- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.cell{background:var(--paper);padding:30px 26px;position:relative;transition:background .45s var(--ease)}
.cell .cn{
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  color:var(--green);display:block;margin-bottom:14px;
}
.cell h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:15.5px;letter-spacing:-.012em;line-height:1.22;margin-bottom:11px;
}
.cell p{font-size:14.2px;color:var(--ink-soft);line-height:1.65;text-wrap:pretty}
@media(hover:hover){.cell:hover{background:var(--paper-2)}}

/* ------------------------------------------------------------------- FAQ -- */
.faq{border-top:2px solid var(--ink);--qcol:44px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  display:grid;grid-template-columns:var(--qcol) 1fr 38px;gap:18px;align-items:center;
  padding:21px 0;cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qn{
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--ink-mute);font-variant-numeric:tabular-nums;
}
.faq summary h3{
  font-family:'Fraunces',serif;font-weight:400;font-size:clamp(16.5px,1.5vw,20px);
  line-height:1.34;letter-spacing:-.008em;transition:color .3s var(--ease);
}
.faq .chip{
  width:29px;height:29px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;justify-self:end;position:relative;
  transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
}
.faq .chip::before,.faq .chip::after{
  content:"";position:absolute;background:var(--ink);transition:background .4s var(--ease)
}
.faq .chip::before{width:11px;height:1.5px}
.faq .chip::after{width:1.5px;height:11px}
.faq details[open] .chip{transform:rotate(45deg);background:var(--green-btn);border-color:var(--green-btn)}
.faq details[open] .chip::before,.faq details[open] .chip::after{background:#fff}
.faq details[open] summary h3{color:var(--green)}
@media(hover:hover){.faq summary:hover h3{color:var(--green)}}
/* answer grid MUST share the summary's column template or it misaligns */
.faq .ans{
  display:grid;grid-template-columns:var(--qcol) 1fr 38px;gap:18px;
  padding:0 0 25px;animation:ansIn .55s var(--ease);
}
.faq .ans p{grid-column:2;font-size:15px;color:var(--ink-soft);line-height:1.72;max-width:68ch;text-wrap:pretty}
@keyframes ansIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- ticker -- */
.ticker{
  background:var(--ink);color:var(--paper);overflow:hidden;
  border-top:2px solid var(--green-br);border-bottom:2px solid var(--green-br);
  padding:15px 0;position:relative;z-index:2;
}
.ticker .track{display:flex;width:max-content;animation:march 34s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:13px;letter-spacing:.02em;white-space:nowrap;
}
.ticker em{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;text-transform:none;
  font-size:16px;letter-spacing:0;color:var(--green-lt);
}
.ticker b{color:var(--green-lt);font-weight:400}
@keyframes march{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------- CTA marquee */
.cta-band{
  display:block;background:var(--green-btn);color:#fff;overflow:hidden;
  padding:26px 0;position:relative;
  transition:background .5s var(--ease),color .5s var(--ease);
}
.cta-band .track{display:flex;width:max-content;animation:march 26s linear infinite}
.cta-band span{
  display:inline-flex;align-items:center;gap:30px;padding-right:30px;white-space:nowrap;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(23px,3.1vw,42px);letter-spacing:-.025em;
}
.cta-band i{font-family:'Fraunces',serif;font-style:italic;font-weight:300;text-transform:none;letter-spacing:0}
@media(hover:hover){.cta-band:hover{background:var(--ink);color:var(--paper)}}

/* --------------------------------------------------------------- figures -- */
.fig{position:relative;overflow:hidden;background:var(--paper-2)}
.fig img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.16) contrast(1.03) saturate(.96);
  transition:filter .8s var(--ease),transform .8s var(--ease);
}
@media(hover:hover){.fig:hover img{filter:none;transform:scale(1.035)}}
.fig-cap{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 2px 0;border-top:1px solid var(--line);margin-top:11px;
}
.fig-cap .mono{color:var(--ink-mute);font-size:9px}

/* ------------------------------------------------------------------ maps -- */
.mapwrap{position:relative;border:1px solid var(--line);background:var(--paper-2)}
.mapwrap iframe{
  display:block;width:100%;height:clamp(300px,44vh,440px);border:0;
  filter:grayscale(1) sepia(.14) contrast(1.04);
  transition:filter .8s var(--ease);
}
@media(hover:hover){.mapwrap:hover iframe{filter:grayscale(0) sepia(0)}}

/* ------------------------------------------------------- areas / pill list */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;
  border:1px solid var(--line);font-size:13px;color:var(--ink-soft);
  transition:border-color .38s var(--ease),color .38s var(--ease),
             background .38s var(--ease),transform .38s var(--ease);
}
.pill b{
  font-family:'Spline Sans Mono',monospace;font-size:8.5px;letter-spacing:.13em;
  color:var(--green);font-weight:500;
}
a.pill:hover{border-color:var(--green-br);color:var(--ink);background:var(--green-wash);transform:translateY(-2px)}
.pill--flat{color:var(--ink-mute);border-style:dashed}

/* --------------------------------------------------------------- colophon -- */
.colophon{background:var(--ink);color:var(--paper);padding-top:74px}
.colophon a{color:rgba(247,244,237,.74);transition:color .28s var(--ease)}
.colophon a:hover{color:var(--green-lt)}
.col-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:44px;padding-bottom:52px}
.col-grid h4{
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green-lt);margin-bottom:17px;font-weight:500;
}
.col-grid li{margin-bottom:9px;font-size:13.7px}
.col-brand .b1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:23px;letter-spacing:-.025em;line-height:1.05;
}
.col-brand .b2{
  font-family:'Spline Sans Mono',monospace;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green-lt);margin-top:5px;
}
.col-brand p{font-size:13.7px;color:rgba(247,244,237,.7);margin-top:17px;max-width:34ch}
.col-bot{
  border-top:1px solid var(--line-inv);padding:19px 0 25px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.col-bot .mono{font-size:9px;color:rgba(247,244,237,.55);letter-spacing:.2em}

/* ---------------------------------------------------------- weather widget
   Third-party embed (client-supplied). It injects its own iframe, so the slot
   is labelled and given a reserved height; if the script is blocked the link
   below still reads as a sensible fallback rather than dead space. */
.wx{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft)}
.wx > .mono{color:var(--ink-mute);display:block;margin-bottom:10px}
.weather{min-height:44px}
.weather a{
  color:var(--ink-soft);font-size:12px;
  font-family:'Spline Sans Mono',monospace;letter-spacing:.14em;
}
.weather a:hover{color:var(--green)}

/* ============================== RESPONSIVE ================================= */
@media(max-width:1080px){
  .wrap{width:min(1240px,calc(100% - 48px))}
  .col-grid{grid-template-columns:1.4fr 1fr 1fr;gap:34px}
  .col-brand{grid-column:1 / -1}
}
@media(max-width:980px){
  .nav{display:none}
  .quotes{grid-template-columns:1fr;gap:18px}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  /* ruled rows: RESTACK the description under the title — never hide it */
  .row{grid-template-columns:auto 1fr auto;gap:14px 16px;padding:20px 0;align-items:start}
  .row .rn{grid-row:1;align-self:center}
  .row .rt{grid-row:1}
  .row .rd{grid-column:2;grid-row:2;font-size:13.6px}
  .row .arrow{grid-row:1;align-self:center}
  .faq{--qcol:32px}
  .faq summary{gap:12px}
}
@media(max-width:760px){
  .wrap{width:min(1240px,calc(100% - 34px))}
  /* folio: keep the phone fully visible; the announcement truncates instead */
  .folio .wrap{gap:12px}
  .folio > .wrap > .mono:first-child{
    overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .folio .fr{flex-shrink:0}
  .grid-3{grid-template-columns:1fr}
  .col-grid{grid-template-columns:1fr 1fr;gap:30px}
  .folio .fr .hide-sm{display:none}
  .sec{padding:clamp(56px,8vh,88px) 0}
}
@media(max-width:560px){
  .plate{padding:20px}
  .leader{font-size:13.2px;flex-wrap:wrap}
  .leader dd{font-size:14.5px}
  .col-grid{grid-template-columns:1fr}
  .btn{padding:13px 19px;font-size:10px}
}

/* touch: reset every hover state so taps don't freeze rows mid-gesture */
@media(hover:none){
  .row:hover{padding-left:0}
  .row:hover::before{transform:translateX(-100%);opacity:0}
  .row:hover .arrow{background:none;border-color:var(--line);color:inherit;transform:none}
  .fig:hover img{filter:grayscale(.16) contrast(1.03) saturate(.96);transform:none}
  .cta-band:hover{background:var(--green-btn);color:#fff}
  .mapwrap:hover iframe{filter:grayscale(1) sepia(.14) contrast(1.04)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-delay:0s!important;
    animation-iteration-count:1!important;transition-duration:.001s!important;
  }
  html{scroll-behavior:auto}
  .ro{opacity:1!important;transform:none!important}
  .ticker .track,.cta-band .track{animation:none;transform:none}
}

@media print{
  .bar,.folio,.ticker,.cta-band,.colophon{display:none}
  body::before{display:none}
}

/* the client's per-service CTA wording, carried inside the ruled row */
.row .rcta{
  display:block;margin-top:7px;font-style:normal;
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--green);
}
@media(hover:hover){.row:hover .rcta{color:var(--green)}}

/* ---------------------------------------------------------- section tag --
   Replaces the mono "[ 01 ] — The Name" chapter eyebrow, which appears ~20x
   on sibling sites built from this pipeline. A bracketed corner device: a
   drawn tick, the section name, and a quiet count. */
.tag{
  display:inline-flex;align-items:stretch;gap:0;margin-bottom:24px;
  position:relative;padding-left:13px;
}
.tag::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  border-left:2px solid var(--green-br);
  border-top:1px solid var(--green-br);
  border-bottom:1px solid var(--green-br);
}
.tag span{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:11px;letter-spacing:.02em;
  color:var(--ink);padding:3px 12px 3px 6px;
}
.tag i{
  font-style:normal;font-family:'Spline Sans Mono',monospace;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);align-self:center;
  padding-left:12px;border-left:1px solid var(--line);
}
.band .tag span{color:var(--paper)}
.band .tag i{color:rgba(247,244,237,.62);border-left-color:var(--line-inv)}
.band .tag::before{border-color:var(--green-lt)}

/* ===== SHARED COMPONENTS =================================================
   Moved out of home.css: the glass plan and the spec table are used by
   BOTH the homepage and every location page. They lived in home.css and
   silently lost all styling on location pages, which load service.css +
   location.css instead. Anything used by more than one template belongs
   here.
   ====================================================================== */

/* ============================================================== GLASS PLAN ==
   The services section: a top-down schematic of a vehicle's glazing. Replaces
   the full-width ruled rows this pipeline has used on sibling sites.
   ========================================================================== */
.plan{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:start}

.plan-fig{margin:0;position:relative}
.plan-fig-hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.plan-fig-hd .mono{color:var(--ink-mute)}
.plan-hint{color:var(--green)}

.plan-svg{
  width:100%;height:auto;display:block;color:var(--ink);
  max-height:min(660px,72vh);margin-inline:auto;
}
.plan-legend{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  color:var(--ink-mute);letter-spacing:.06em;text-transform:none;
  font-size:10.5px;line-height:1.7;max-width:46ch;
}

/* --- zones --- */
.zone{cursor:pointer;outline:none}
.zone .zg{
  fill:url(#glassSheen);stroke:currentColor;stroke-width:1.2;opacity:.85;
  transition:fill .45s var(--ease),stroke-width .45s var(--ease),opacity .45s var(--ease);
}
.zone .zt{
  font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  fill:var(--ink-mute);text-anchor:middle;pointer-events:none;
  transition:fill .4s var(--ease);
}
.zone .zt-v{font-size:8.5px;letter-spacing:.14em}
.zone .zh{fill:transparent;stroke:currentColor;stroke-width:1;stroke-dasharray:3 4;opacity:.4;
  transition:opacity .45s var(--ease),stroke-width .45s var(--ease)}
.zone .zstar,.zone .zmech,.zone .zbox,.zone .zbeam{
  color:var(--ink-soft);transition:color .45s var(--ease),opacity .45s var(--ease);
}
.zone .zbox{fill:none;stroke:currentColor;stroke-width:1.1}
.zone .zbeam{stroke:currentColor;stroke-width:.9;opacity:.5}
.zone .zmech{fill:none;stroke-width:1.1}
.zone .zdefrost{transition:opacity .45s var(--ease)}

/* active / hovered zone: the glass fills green and the label reads */
.zone.on .zg,
.zone:focus-visible .zg{
  fill:rgba(31,143,58,.17);stroke-width:2;opacity:1;
}
.zone.on .zt,.zone:focus-visible .zt{fill:var(--green)}
.zone.on .zh,.zone:focus-visible .zh{opacity:1;stroke-width:1.4;color:var(--green-br)}
.zone.on .zstar,.zone.on .zmech,.zone.on .zbox,.zone.on .zbeam,
.zone:focus-visible .zstar,.zone:focus-visible .zmech,
.zone:focus-visible .zbox,.zone:focus-visible .zbeam{color:var(--green)}
.zone:focus-visible .zg{stroke-dasharray:none}
.plan-body{color:var(--ink);opacity:.85}

/* --- detail panel --- */
.plan-detail{position:sticky;top:calc(var(--bar) + 30px)}
.pd{
  border-top:2px solid var(--ink);padding-top:22px;
  animation:pdIn .5s var(--ease);
}
@keyframes pdIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.pd-pos{
  display:inline-block;color:var(--green);margin-bottom:14px;
  padding:5px 11px;border:1px solid var(--line);
}
.pd-t{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(26px,3.1vw,40px);line-height:1.06;letter-spacing:-.015em;
  margin-bottom:16px;
}
.pd-b{font-size:15.4px;line-height:1.72;color:var(--ink-soft);text-wrap:pretty}
.pd-b + .pd-b{margin-top:.9em}
.pd-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--green);
  padding-bottom:5px;border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease),gap .4s var(--ease);
}
.pd-cta svg{transition:transform .4s var(--ease)}
@media(hover:hover){
  .pd-cta:hover{border-color:var(--green-br);gap:14px}
  .pd-cta:hover svg{transform:translateX(3px)}
}

/* the four services that are not a single position on the drawing */
.plan-more{
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:30px;
}
.pm-h{display:block;color:var(--ink-mute);margin-bottom:13px}
.pm-row{
  display:block;padding:11px 0;border-bottom:1px solid var(--line-soft);
  transition:padding-left .4s var(--ease);
}
.pm-t{
  display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:12.5px;letter-spacing:-.005em;line-height:1.25;
  transition:color .35s var(--ease);
}
.pm-c{
  display:block;margin-top:5px;font-size:8.5px;letter-spacing:.15em;
  color:var(--ink-mute);transition:color .35s var(--ease);
}
@media(hover:hover){
  .pm-row:hover{padding-left:10px}
  .pm-row:hover .pm-t{color:var(--green)}
  .pm-row:hover .pm-c{color:var(--green)}
}

@media(max-width:1080px){
  .plan{grid-template-columns:1fr;gap:40px}
  .plan-detail{position:static}
  .plan-svg{max-height:none;max-width:420px}
}
@media(max-width:560px){
  .plan-more{grid-template-columns:1fr;gap:24px}
}
@media(prefers-reduced-motion:reduce){
  .pd{animation:none}
}

/* ============================================================ SPEC TABLE ==
   The "why choose" section as a technical specification sheet, replacing the
   row of five equal feature cells used across sibling sites.
   ========================================================================== */
.spec{border-top:2px solid var(--ink)}
.spec-hd{
  display:grid;grid-template-columns:42px 168px 132px 1fr;gap:26px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.spec-hd .mono{color:var(--ink-mute)}
.spec-hd .mono:first-child{grid-column:1 / 3}
.spec-hd-d{grid-column:4}

.spec-row{
  display:grid;grid-template-columns:42px 168px 132px 1fr;gap:26px;
  padding:22px 0;border-bottom:1px solid var(--line-soft);align-items:start;
  position:relative;transition:background .45s var(--ease);
}
.sr-n{
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--ink-mute);padding-top:4px;
}
.sr-k{
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:4px;
}
/* the specification value: the one figure that carries the row */
.sr-v{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(19px,2vw,26px);line-height:1.1;color:var(--green);
  letter-spacing:-.01em;
}
.sr-t{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:12.5px;letter-spacing:-.008em;
  line-height:1.25;margin-bottom:7px;
}
.sr-d p{font-size:14.4px;line-height:1.68;color:var(--ink-soft);text-wrap:pretty;max-width:62ch}

@media(hover:hover){
  .spec-row:hover{background:var(--green-wash)}
}

@media(max-width:980px){
  .spec-hd{display:none}
  /* restack: number + key on one line, value beside the detail below it */
  .spec-row{grid-template-columns:36px 1fr;gap:8px 16px;padding:20px 0}
  .sr-n{grid-row:1;padding-top:2px}
  .sr-k{grid-row:1;grid-column:2}
  .sr-v{grid-row:2;grid-column:2;font-size:21px;margin-bottom:4px}
  .sr-d{grid-row:3;grid-column:2}
}