/* Site styles. Light page with dark nav / hero / footer and a colour per service. Spacing comes from one 8px-based scale (--s-*) plus two fluid tokens (--gutter, --section);
   grouped by module in page order. --accent is a fill, never small text. */
:root{
  /* Colour — every colour on the site comes from these. Rules read var(--hue) directly: a token defined as
     var(--hue) here would resolve once on :root and never follow a section's own --hue. Light page; the nav, hero, footer, and table headers
     re-declare them as dark scopes below, and each service section sets its own --hue. */
  --bg:#f5f2ec;               /* warm paper */
  --ink:#14171c;              /* headings, body */
  --ink-2:#4a5059;            /* secondary text */
  --ink-3:#656b74;            /* labels, fine print (4.8:1 on --bg) */
  --accent:#135272;           /* brand blue: buttons, default --hue */
  --on-accent:#ffffff;
  --hue:var(--accent);        /* per-section colour, see "Service hues" */
  --price:var(--ink);
  --deal:#9c4523;             /* specials: burnt orange (5.1:1 on the sand band) */
  --line:rgba(20,23,28,.1);
  --line-strong:rgba(20,23,28,.18);
  --card:#ffffff;
  --card-edge:inset 0 1px 0 #ffffff;
  --shadow:0 1px 2px rgba(20,23,28,.05),0 14px 32px -18px rgba(20,23,28,.22);
  --band:#ece5da;             /* sand band behind Specials */
  --dark:#101318;             /* nav, hero, footer, table headers */
  --nav-bg:rgba(16,19,24,.86);
  --nav-bg-open:rgba(16,19,24,.97);
  --nav-shadow:0 12px 32px -14px rgba(16,19,24,.45);
  --chip:rgba(255,255,255,.1);
  --cta-bg:#f2f2f2;
  --cta-ink:var(--dark);
  --cta-hover:#d9d9d5;
  --hero-bg:radial-gradient(60% 50% at 50% 48%,rgba(214,196,164,.16),transparent 70%),var(--dark);
  --hero-ink-2:#c6c6c2;
  --hero-ink-3:#ffffff;
  --sign-ink:var(--dark);
  --sign-halo:drop-shadow(0 0 1px #e3d6bf) drop-shadow(0 0 14px rgba(227,206,168,.55)) drop-shadow(0 0 42px rgba(227,206,168,.25));
  --radius:16px;
  --display:'Montserrat',sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gutter:clamp(20px,5vw,56px);
  --section:clamp(88px,11vw,152px);
  --wrap:1180px;
  --nav-row:56px;
  --nav-h:calc(var(--s-3) + var(--nav-row) + 2px); /* top gap + pill row + pill border */
  color-scheme:light;
}

/* Dark scopes: same token names, dark values. Anything inside just works. */
.site-header nav,footer{
  --ink:#f2f2f2;--ink-2:#c6c6c2;--ink-3:#9da2a9;
  --line:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.2);
  color:var(--ink);color-scheme:dark;
}
footer{background:var(--dark);}

/* Service hues — set on a section (or tile) and picked up by its eyebrow, table header, tint, badges, checks. */
.hue-wash{--hue:#135272;}
.hue-detailing{--hue:#0f5e5a;}
.hue-ceramic{--hue:#3a3f73;}
.hue-specials{--hue:var(--deal);}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--s-5));}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;}
p{text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);}
a[href^="tel:"]{white-space:nowrap;}
.wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);}
.num{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;}
.mono{width:1em;height:1.075em;flex:none;}
.eyebrow{color:var(--hue);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s-4);}

/* Nav — floating pill whose edges line up with the content edges.
   Wide: brand | links | actions in one row (the menu wrappers use display:contents, so they add no boxes).
   Narrow: brand + menu button; the menu opens the pill downward (see "Collapsed nav" below). The header box keeps a
   fixed height, so an open menu overlays the page instead of pushing it down. */
.site-header{position:sticky;top:0;z-index:10;height:var(--nav-h);padding:var(--s-3) var(--gutter) 0;margin-bottom:calc(-1 * var(--nav-h));}
.site-header nav{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--s-5);
  max-width:var(--wrap);margin:0 auto;padding:0 var(--s-2) 0 var(--s-5);
  background:var(--nav-bg);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--nav-shadow);
}
.brand{height:var(--nav-row);display:flex;align-items:center;gap:var(--s-3);font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;}
.brand .mono{font-size:26px;}
.menu-btn{display:none;}
.nav-menu,.nav-menu-inner{display:contents;}
.navlinks{display:flex;gap:var(--s-1);font-size:14px;font-weight:500;color:var(--ink);}
.navlinks a{padding:var(--s-2) var(--s-3);border-radius:10px;white-space:nowrap;transition:background-color .2s;}
.navlinks a:hover,.navlinks a[aria-current]{background:var(--chip);}
.nav-actions{display:flex;align-items:center;gap:var(--s-1);}
.nav-call{padding:var(--s-2) var(--s-3);font-size:14px;font-weight:500;color:var(--ink);transition:opacity .2s;}
.nav-call:hover{opacity:.75;}
.nav-cta{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);padding:10px var(--s-4);border-radius:11px;
  background:var(--cta-bg);color:var(--cta-ink);font-size:14px;font-weight:600;
  transition:background-color .2s,scale .2s;
}
.nav-cta svg{width:14px;height:14px;}
.nav-cta:hover{background:var(--cta-hover);}
.nav-cta:active{scale:.97;}

/* Hero sign — halo-lit letters like the backlit-sign mockup. Sits under the floating nav. */
.sign-hero{
  min-height:100svh;padding:var(--nav-h) var(--gutter) calc(var(--s-9) + var(--s-8));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-7);
  background:var(--hero-bg);
  overflow:clip;
}
.sign{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);color:var(--sign-ink);
  filter:var(--sign-halo);
}
.sign-mono{width:clamp(96px,14vw,168px);height:auto;aspect-ratio:1221/1312;}
.wordmark{display:flex;flex-direction:column;font-family:var(--display);line-height:1;}
.wordmark span{font-size:clamp(40px,6.4vw,84px);font-weight:600;letter-spacing:.06em;}
.wordmark small{font-size:clamp(11px,1.45vw,19px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:.7em;color:var(--hero-ink-2);}
.sign-tag{color:var(--hero-ink-3);font-size:13px;font-weight:500;letter-spacing:.1em;text-align:center;text-wrap:balance;}
.sign-tag a{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:4px;transition:color .2s;}
.sign-tag a:hover{color:var(--hero-ink-2);}

/* Section shell — every module is a <section> with the same head: title left, one-line summary pinned right. */
section{padding-block:var(--section);border-top:1px solid var(--line);}
.band{background:var(--band);color:var(--ink);}
.band + section,.band{border-top:0;}
.sign-hero,.tiles-section{border-top:0;}
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:var(--s-8);row-gap:var(--s-4);
  align-items:end;margin-bottom:var(--s-8);
}
.section-head h2{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.03em;}
.section-head > p{color:var(--ink-2);font-size:15px;line-height:1.65;}
.sub-head{
  display:flex;align-items:center;gap:var(--s-4);margin:var(--s-9) 0 var(--s-5);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.sub-head::after{content:"";flex:1;height:1px;background:var(--line);}
.fine{margin-top:var(--s-5);font-size:13px;line-height:1.7;color:var(--ink-3);max-width:68ch;}

/* Cards — shared floating surface. Hover uses `transform`; the reveal uses `opacity`/`translate`/`scale`,
   so they never fight. --i staggers cards in a row, and only the reveal is delayed, never the hover. */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--card-edge),var(--shadow);
  transition:
    opacity 1s var(--ease-out) calc(var(--i,0) * 110ms),
    translate 1s var(--ease-out) calc(var(--i,0) * 110ms),
    scale 1s var(--ease-out) calc(var(--i,0) * 110ms),
    transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--hue) 45%,transparent);box-shadow:var(--card-edge),var(--shadow);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);}
.grid-3 > .card{padding:var(--s-6);}
.grid-3 h3{font-size:19px;line-height:1.3;}
.grid-3 p:not(.eyebrow){margin-top:var(--s-3);font-size:14px;line-height:1.6;color:var(--ink-2);}

/* Service tiles */
.tiles-section{padding-block:0 var(--section);}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:calc(-1 * var(--s-8));} /* overlap the hero's bottom edge */
.tile{display:flex;flex-direction:column;padding:var(--s-6);border-top:3px solid var(--hue);}
.tile-price{color:var(--hue);font-family:var(--display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em;margin-bottom:var(--s-4);}
.tile-price small{display:block;margin-bottom:var(--s-2);font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.tile p:last-child{font-size:14px;color:var(--ink-2);}
.tile::after{content:"View prices \2192";margin-top:auto;padding-top:var(--s-6);font-size:13px;font-weight:600;color:var(--ink-3);transition:color .2s;}
.tile:hover::after{color:var(--ink);}

/* Price tables */
table{width:100%;border-collapse:collapse;}
.table-card{--pad:var(--s-6);padding:0;overflow:hidden;background:color-mix(in srgb,var(--hue) 4%,#ffffff);}
.table-card :is(th,td):first-child{padding-left:var(--pad);}
.table-card :is(th,td):last-child{padding-right:var(--pad);}
thead th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.82);background:var(--hue);padding:var(--s-4) 0;
}
tbody td{padding:var(--s-5) 0;border-bottom:1px solid var(--line);vertical-align:middle;}
tbody tr:last-child td{border-bottom:0;}
td:first-child{font-weight:600;font-size:16px;padding-right:var(--s-5);}
.prices th:not(:first-child),.prices td:not(:first-child){text-align:right;padding-left:var(--s-4);}
.prices td:not(:first-child){color:var(--price);font-family:var(--display);font-weight:700;font-size:21px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.desc{display:block;font-size:14px;font-weight:400;line-height:1.55;color:var(--ink-2);margin-top:var(--s-1);max-width:460px;}
.badge{
  display:inline-block;margin-left:var(--s-3);vertical-align:2px;padding:var(--s-1) 10px;border-radius:999px;
  background:var(--hue);color:var(--on-accent);white-space:nowrap;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.matrix td{padding:14px 0;}
.matrix td:first-child{font-size:15px;font-weight:500;}
.matrix th:not(:first-child),.matrix td:not(:first-child){text-align:center;width:18%;}
.yes,.no{display:inline-block;width:16px;height:16px;vertical-align:middle;}
.yes{background:var(--hue);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat;}
.no::before{content:"";display:block;width:10px;height:1px;margin:7px auto;background:var(--ink-3);}

/* Add-ons */
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5);align-items:start;}
.addons > .card{padding:var(--s-5) var(--s-6) var(--s-2);}
.addons h4{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--hue);padding-bottom:var(--s-4);border-bottom:1px solid var(--line-strong);}
.addon-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--line);font-weight:600;}
.addon-row:last-child{border-bottom:0;}
.addon-row .num{font-size:17px;white-space:nowrap;}

/* Notes and the dealer strip */
.note{margin-top:var(--s-5);padding:var(--s-5) var(--s-6);font-size:14px;line-height:1.65;color:var(--ink-2);}
.note strong{display:block;color:var(--hue);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s-2);}
.strip{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-7);margin-top:var(--s-5);padding:var(--s-6);
  box-shadow:inset 3px 0 0 var(--hue),var(--card-edge),var(--shadow);
}
.strip h3{font-size:19px;margin-bottom:var(--s-2);}
.strip p{font-size:14px;color:var(--ink-2);max-width:56ch;}
.strip .strip-big{color:var(--price);font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,44px);letter-spacing:-.03em;white-space:nowrap;}

/* Footer */
footer{padding:var(--s-9) 0 var(--s-6);}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);margin-bottom:var(--s-8);}
.foot-grid h4{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-4);}
.foot-grid p{font-size:14px;color:var(--ink-2);margin-bottom:var(--s-3);}
.foot-grid a{color:var(--ink);}
.foot-brand{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4) !important;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink) !important;}
.foot-brand .mono{font-size:34px;}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s-5);font-size:12.5px;color:var(--ink-3);}

/* Motion
   Intro timing chart (each step starts --step after the previous one begins, 1.1s each):
     0          monogram      ├──────────┤
     1 × step   wordmark        ├──────────┤
     2 × step   tagline           ├──────────┤
     3 × step   nav pill            ├──────────┤
   Scroll reveals: .reveal is set on <html> before first paint (motion allowed); site.js adds .in once per element. */
@media (prefers-reduced-motion:no-preference){
  :root{--step:140ms;}
  .sign-mono,.wordmark,.sign-tag{animation:rise-in 1.1s var(--ease-out) both;}
  .wordmark{animation-delay:calc(var(--step) * 1);}
  .sign-tag{animation-delay:calc(var(--step) * 2);}
  .site-header nav{animation:drop-in 1.1s var(--ease-out) calc(var(--step) * 3) both;}

  .reveal .card:not(.in){opacity:0;translate:0 64px;scale:.96;}
  :is(.sub-head,.fine,.section-head > *){transition:opacity 1s var(--ease-out),translate 1s var(--ease-out);}
  .section-head > p{transition-delay:.15s;}
  .reveal :is(.sub-head,.fine):not(.in),
  .reveal .section-head:not(.in) > *{opacity:0;translate:0 28px;}

  /* Scroll-linked: the sign drifts back as you leave the hero. Unsupported browsers just keep it static. */
  @supports (animation-timeline:scroll()){
    .sign{animation:sign-away linear both;animation-timeline:scroll(root);animation-range:0 70vh;}
  }
}
@keyframes rise-in{from{opacity:0;translate:0 24px;}}
@keyframes drop-in{from{opacity:0;translate:0 -16px;}}
@keyframes sign-away{to{opacity:0;scale:.82;translate:0 -60px;}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .card,.card:hover{transition:none;transform:none;}
}

/* Collapsed nav — below 820px one row no longer fits. Pill = brand + menu button; .open (site.js) expands it:
   links first, then Call / Visit as two full buttons. The expand animates grid-template-rows 0fr → 1fr, which
   transitions to the content's natural height without measuring it. Closed items are visibility:hidden so the
   keyboard can't tab into an invisible menu. */
@media (max-width:820px){
  :root{--nav-row:52px;}
  .site-header nav{padding:0 var(--s-2) 0 var(--s-4);transition:background-color .3s;}
  .site-header nav.open{background:var(--nav-bg-open);}
  .menu-btn{
    display:grid;place-content:center;gap:5px;width:44px;height:44px;margin-right:-2px;
    background:var(--chip);border:0;border-radius:12px;color:var(--ink);cursor:pointer;
  }
  .menu-btn span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:translate .35s var(--ease-out),rotate .35s var(--ease-out),opacity .2s;}
  .open .menu-btn span:first-child{translate:0 7px;rotate:45deg;}
  .open .menu-btn span:nth-child(2){opacity:0;}
  .open .menu-btn span:last-child{translate:0 -7px;rotate:-45deg;}
  .nav-menu{display:grid;grid-template-rows:0fr;flex-basis:100%;transition:grid-template-rows .45s var(--ease-out);}
  .open .nav-menu{grid-template-rows:1fr;}
  .nav-menu-inner{
    display:block;min-height:0;overflow:hidden;padding-right:var(--s-2);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .45s;
  }
  .open .nav-menu-inner{opacity:1;visibility:visible;transition:opacity .35s .05s,visibility 0s;}
  .navlinks{flex-direction:column;gap:0;border-top:1px solid var(--line);padding-top:var(--s-2);}
  .navlinks a{padding:var(--s-3) 0;text-align:center;border-radius:0;font:700 20px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink);}
  .navlinks a[aria-current]{background:none;}
  .nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);padding:var(--s-4) 0;}
  .nav-call{
    display:flex;justify-content:center;padding:12px;border:1px solid var(--line-strong);border-radius:11px;
    font-size:14px;font-weight:600;color:var(--ink);
  }
  .nav-cta{padding:12px;border:1px solid var(--ink);}
  .section-head{grid-template-columns:1fr;}
}

/* Phone */
@media (max-width:720px){
  :root{--radius:14px;--nav-h:calc(var(--s-2) + var(--nav-row) + 2px);}
  .site-header{padding-top:var(--s-2);}
  .sign-hero{padding-bottom:calc(var(--s-7) + var(--s-8));}
  .sign{flex-direction:column;text-align:center;gap:var(--s-5);}
  .wordmark span{font-size:44px;}
  .wordmark small{font-size:11.5px;}
  .section-head{margin-bottom:var(--s-7);}
  .sub-head{margin-top:var(--s-8);}
  .tiles,.grid-3,.addons,.foot-grid{grid-template-columns:1fr;}
  .tiles,.grid-3{gap:var(--s-4);}
  .grid-3 > .card,.tile{padding:var(--s-5);}
  .tile-price{font-size:38px;}
  .tile::after{padding-top:var(--s-5);}
  .table-card{--pad:var(--s-5);}
  .addons > .card{padding:var(--s-4) var(--s-5) var(--s-1);}
  .note{padding:var(--s-5);}
  td:first-child{font-size:15px;padding-right:var(--s-3);}
  .prices,.prices tbody{display:block;}
  .prices thead{display:none;}
  .prices{border-top:4px solid var(--hue);}
  .prices tr{display:grid;grid-template-columns:repeat(3,1fr);padding:var(--s-5) var(--pad);border-bottom:1px solid var(--line);}
  .prices tr:last-child{border-bottom:0;}
  .table-card .prices td{padding:0;border:0;}
  .prices td:first-child{grid-column:1/-1;margin-bottom:var(--s-4);}
  .prices td:not(:first-child){text-align:left;padding-left:0;font-size:19px;}
  .prices td[data-size]::before{content:attr(data-size);display:block;margin-bottom:2px;font:600 10.5px/1.6 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
  .matrix th{font-size:9.5px;letter-spacing:.04em;}
  .matrix th:not(:first-child),.matrix td:not(:first-child){width:17%;}
  .strip{flex-direction:column;align-items:flex-start;gap:var(--s-4);padding:var(--s-5);}
  .foot-grid{gap:var(--s-6);}
}
@media (max-width:359px){
  .brand span{display:none;}
}