/* ==========================================================================
   San Bernardino Car Wash - "Showroom"
   Editorial detail-studio direction built around the two detailer photos.
   Graphite grounds, ivory reading pages, candy-apple red taken from the
   pickup, chrome hairlines. Fraunces (display serif) + Inter Tight.
   Every price is set like a typeset service menu: leaders, tabular figures.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* grounds */
  --ink:#131211;           /* near-black graphite, warm */
  --ink-2:#1C1B19;         /* raised panel on ink */
  --ink-3:#2A2826;
  --ivory:#F7F5F0;         /* reading pages: menu, craft, visit */
  --bone:#EDE9E1;          /* row hover, quiet fills */
  --paper:#FFFFFF;

  /* text */
  --text:#151413;          /* 16.89:1 on ivory */
  --muted:#5C5853;         /* 6.48:1 on ivory, 5.83:1 on bone */
  --on-dark:#F2EFE9;       /* 16.30:1 on ink */
  --on-dark-2:#A7A29A;     /* 7.38:1 on ink, 6.78:1 on ink-2 */

  /* rules */
  --line:#DDD7CC;          /* hairline on ivory */
  --line-2:#BDB5A8;        /* leaders, not-included dashes */
  --line-dark:rgba(242,239,233,.14);
  --chrome:linear-gradient(90deg,#55595E 0%,#C9CDD1 18%,#7E8389 40%,#F1F2F3 62%,#9A9FA5 82%,#55595E 100%);

  /* accent */
  --red:#C8161D;           /* candy-apple red: fills, and text on light (5.37:1 on ivory) */
  --red-dk:#A50F15;        /* hover fill (white text 7.84:1) */
  --red-lt:#F0565B;        /* red TEXT on dark only (5.51:1 on ink). #C8161D is 3.20:1 there */
  --silver:#B7BBC0;        /* labels on dark, 9.70:1 on ink */
  --ok:#5BC48E;            /* open-now dot only (decorative, state is also in text) */

  /* type */
  --f-serif:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* layout */
  --wrap:1280px;
  --pad:clamp(1rem,4vw,2.5rem);
  --inner:calc(var(--wrap) - 2 * var(--pad));
  --sec:clamp(4.5rem,9vw,8rem);
  --nav-h:4rem;
  --ease:cubic-bezier(.2,.7,.2,1);
  --focus:var(--red);
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;
  scroll-padding-top:calc(var(--nav-h) + .75rem)}
/* No CSS scroll-behavior:smooth. It also animates script and find-in-page
   scrolls (the audit's scroll pass never left the hero, so every reveal below
   it stayed hidden). main.js smooth-scrolls in-page links instead. */

body{
  font-family:var(--f-sans);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.6;
  color:var(--text);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* height:auto is load-bearing. With width/height attributes present (needed to
   reserve layout space), the height attribute is a presentational hint that
   beats aspect-ratio. Elements that need a fixed height set it themselves. */
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
address{font-style:normal}
ul,ol{list-style:none}
figure{margin:0}
[hidden]{display:none !important}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* sections focused by the in-page link handler (tabindex=-1) get no ring */
[tabindex="-1"]:focus{outline:none}
.is-dark,.hero,.bar,.dock,.feature{--focus:var(--on-dark)}

.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:.75rem;left:.75rem;z-index:1000;background:var(--red);color:#fff;
  padding:.8rem 1.2rem;font-weight:600;transform:translateY(-220%);
  transition:transform .2s var(--ease)}
.skip:focus{transform:none}

/* ---------- 3. Layout + grounds ------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.menu,.craft,.visit{background:var(--ivory);color:var(--text)}
.is-dark{background:var(--ink);color:var(--on-dark)}
.menu,.process,.craft,.since,.visit{padding-block:var(--sec)}

/* ---------- 4. Type ------------------------------------------------------ */
.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:.85rem;margin-bottom:1.25rem;
  font:600 .75rem/1.2 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.eyebrow--silver{color:var(--silver)}
/* section folio: "01 ----- The menu" */
.folio{display:inline-flex;align-items:center;gap:.85rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.folio::after{content:"";width:2.25rem;height:1px;background:currentColor;opacity:.6}
.is-dark .folio{color:var(--on-dark-2)}

.h2{font-family:var(--f-serif);font-weight:400;
  font-size:clamp(2.25rem,1.35rem + 3.4vw,4.25rem);
  line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
.h2 em,.hero__h1 em{font-style:italic;font-weight:360;color:var(--red)}
.is-dark .h2 em,.hero__h1 em{color:var(--red-lt)}

.label{font:600 .72rem/1.2 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.is-dark .label,.feature .label{color:var(--silver)}

.sec-head{display:grid;gap:1.25rem 4rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head__lede{color:var(--muted);font-size:1.0625rem;max-width:44ch;text-wrap:pretty}
@media (min-width:900px){
  .sec-head--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .sec-head--split .sec-head__lede{padding-bottom:.5rem}
}

/* shared figure caption: "FIG. 1  Caption text" */
.craft figcaption,.process__fig figcaption{display:flex;gap:.85rem;align-items:baseline;
  margin-top:.9rem;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.craft figcaption span,.process__fig figcaption span{flex:none;font:600 .6875rem/1 var(--f-sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.process__fig figcaption{color:var(--on-dark-2)}
.process__fig figcaption span{color:var(--on-dark)}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:3.25rem;padding:.85rem 1.6rem;
  font:600 .9375rem/1.1 var(--f-sans);letter-spacing:.01em;
  border:1px solid transparent;border-radius:2px;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn svg{width:1.1rem;height:1.1rem;flex:none}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dk)}
.btn--line{background:transparent;color:inherit;border-color:rgba(242,239,233,.55)}
.btn--line:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.btn--ink{background:var(--ink);color:var(--on-dark)}
.btn--ink:hover{background:#000}

/* ---------- 6. Nav + drawer ---------------------------------------------- */
/* Solid graphite from the start (it reads as part of the hero's dark column);
   once the page scrolls it gains a chrome hairline and a shadow. */
.bar{position:sticky;top:0;z-index:100;background:var(--ink);color:var(--on-dark);
  transition:box-shadow .35s var(--ease)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--chrome);opacity:0;transition:opacity .35s var(--ease)}
.bar.is-stuck{box-shadow:0 12px 30px rgba(0,0,0,.28)}
.bar.is-stuck::after{opacity:.55}
.bar__in{display:flex;align-items:center;gap:1.25rem;min-height:var(--nav-h)}

.mark{display:flex;align-items:center;gap:.7rem;min-height:44px;flex:none}
.mark__sb{position:relative;display:grid;place-items:center;flex:none;
  width:2.375rem;height:2.375rem;border-radius:50%;
  border:1px solid rgba(242,239,233,.42);
  font:italic 400 .95rem/1 var(--f-serif);letter-spacing:.01em;color:var(--on-dark)}
.mark__sb::after{content:"";position:absolute;right:1px;bottom:3px;width:6px;height:6px;
  border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--ink)}
.mark__txt{display:flex;flex-direction:column;gap:.28rem}
.mark__name{font:400 1.0625rem/1 var(--f-serif);letter-spacing:-.005em;white-space:nowrap}
.mark__est{font:600 .625rem/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-2)}

.bar__nav{margin-left:auto}
.bar__nav ul{display:flex;gap:.15rem}
.bar__nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 .8rem;
  font:500 .875rem/1 var(--f-sans);color:rgba(242,239,233,.8);transition:color .2s}
.bar__nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.55rem;height:1px;
  background:var(--red-lt);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.bar__nav a:hover,.bar__nav a.is-on{color:var(--on-dark)}
.bar__nav a:hover::after,.bar__nav a.is-on::after{transform:none}

.bar__tel{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;flex:none;
  padding-left:1.25rem;border-left:1px solid var(--line-dark);
  font:500 .9375rem/1 var(--f-sans);font-variant-numeric:tabular-nums;color:var(--on-dark)}
.bar__tel svg{width:1rem;height:1rem;color:var(--red-lt)}
.bar__tel:hover{color:#fff}

.bar__burger{display:none;place-items:center;width:44px;height:44px;margin-left:auto;margin-right:-.5rem}
.bar__lines{display:grid;gap:7px;width:24px}
.bar__lines i{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.bar__burger[aria-expanded="true"] .bar__lines i:first-child{transform:translateY(4.25px) rotate(45deg)}
.bar__burger[aria-expanded="true"] .bar__lines i:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* in-flow panel, not an off-canvas fixed element: nothing to overflow sideways */
.drawer{display:none;border-top:1px solid var(--line-dark);padding-block:.25rem 1.5rem;
  max-height:calc(100vh - var(--nav-h));max-height:calc(100svh - var(--nav-h));overflow-y:auto}
.drawer.is-open{display:block}
.drawer__list a{display:flex;align-items:center;min-height:3.5rem;
  font:400 1.5rem/1.1 var(--f-serif);letter-spacing:-.01em;border-bottom:1px solid var(--line-dark)}
.drawer__cta{display:grid;gap:.75rem;margin-top:1.5rem}
@media (min-width:600px){ .drawer__cta{grid-template-columns:1fr 1fr} }

@media (max-width:1023.98px){
  .bar__nav,.bar__tel{display:none}
  .bar__burger{display:grid}
  .no-js .bar__burger{display:none}   /* no script, no drawer: the dock covers navigation */
}
@media (min-width:1024px){ .drawer{display:none !important} }
@media (max-width:374px){ .mark__name{font-size:.98rem} .mark{gap:.55rem} }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero{display:grid;background:var(--ink);color:var(--on-dark);overflow:hidden}

.hero__media{position:relative;overflow:hidden;aspect-ratio:6/5;background:var(--ink-2)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 59%}
/* scrim under the caption: white text measures 5.9:1 or better against the
   brightest pixel behind it at 360, 390, 768, 1440 and 1920 */
.hero__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(to top,rgba(10,9,9,.78) 0%,rgba(10,9,9,.5) 30%,rgba(10,9,9,0) 100%)}
@media (prefers-reduced-motion:no-preference){
  .hero__media img{animation:settle 1.8s var(--ease) both}
}
@keyframes settle{from{transform:scale(1.045)}to{transform:none}}
.hero__cap{position:absolute;z-index:1;left:var(--pad);bottom:1rem;display:flex;align-items:center;gap:.65rem;
  font:500 .75rem/1.2 var(--f-sans);letter-spacing:.06em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero__cap::before{content:"";width:1.5rem;height:1px;background:currentColor}

.hero__body{display:flex;flex-direction:column;gap:2.5rem;padding:2.25rem var(--pad) 2.25rem}
.hero__h1{font-family:var(--f-serif);font-weight:400;
  font-size:clamp(2.6rem,1rem + 4.7vw,5.6rem);
  line-height:.98;letter-spacing:-.028em;margin-bottom:1.35rem}
.hero__h1 span{display:block}
.hero__lede{max-width:40ch;margin-bottom:1.85rem;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  line-height:1.6;color:rgba(242,239,233,.84);text-wrap:pretty}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__call{display:inline-flex;align-items:center;min-height:3.25rem;
  font-size:.9375rem;color:var(--on-dark-2)}
.hero__call span{margin-left:.35em;color:var(--on-dark);font-variant-numeric:tabular-nums;
  text-decoration:underline;text-decoration-color:rgba(242,239,233,.4);text-underline-offset:.3em}
.hero__call:hover span{text-decoration-color:var(--on-dark)}

.hero__now{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.75rem;margin-top:1.6rem}
.status{display:inline-flex;align-items:center;gap:.6rem;
  font:600 .72rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--silver);flex:none}
.status.is-open i{background:var(--ok);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(91,196,142,.55)}70%,100%{box-shadow:0 0 0 7px rgba(91,196,142,0)}}
.today{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;font-size:.9375rem}
.today__k{font:600 .72rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red-lt)}
.today__v{color:var(--on-dark);text-decoration:underline;text-decoration-color:rgba(242,239,233,.35);
  text-underline-offset:.3em;padding-block:.65rem}
.today__v:hover{text-decoration-color:var(--on-dark)}

.hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.hero__facts li{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem .75rem 0 0}
.hero__facts li + li{padding-left:1rem;border-left:1px solid var(--line-dark)}
.hero__facts b{font:400 clamp(1.5rem,1.2rem + 1vw,2.1rem)/1 var(--f-serif);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;color:var(--on-dark)}
.hero__facts b span{font-size:.55em;vertical-align:.4em;margin-left:.12em;color:var(--red-lt)}
.hero__facts li > span{font:500 .6875rem/1.3 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}

@media (min-width:600px){
  .hero__media{aspect-ratio:16/10}
  .hero__media img{object-position:50% 47%}
  .hero__body{padding-block:3rem 2.75rem}
  .hero__call{margin-left:.6rem}   /* inline beside the buttons; flush left when it wraps on phones */
}
/* split: copy column aligned to the page wrap, photo bleeds to the right edge */
@media (min-width:960px){
  .hero{
    grid-template-columns:minmax(var(--pad),1fr) minmax(0,calc(var(--inner) * .56)) minmax(0,calc(var(--inner) * .44)) minmax(var(--pad),1fr);
    min-height:clamp(640px,calc(100vh - var(--nav-h)),960px);
    min-height:clamp(640px,calc(100svh - var(--nav-h)),960px);
  }
  .hero__body{grid-column:2;grid-row:1;justify-content:space-between;
    padding:clamp(2.5rem,7vh,5rem) clamp(2rem,4.5vw,5rem) clamp(1.75rem,4vh,2.75rem) 0}
  .hero__main{margin-block:auto}
  .hero__media{grid-column:3 / -1;grid-row:1;aspect-ratio:auto}
  .hero__media img{position:absolute;inset:0;object-position:60% 50%}
  .hero__cap{left:1.75rem;bottom:1.5rem}
}

/* ---------- 8. Menu: header + at a glance -------------------------------- */
.glance{margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.glance + .item{padding-top:0;border-top:0}
.glance ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--text)}
.glance li{border-bottom:1px solid var(--line)}
.glance li:nth-child(even){border-left:1px solid var(--line)}
.glance a{display:flex;flex-direction:column;justify-content:space-between;gap:.75rem;height:100%;
  min-height:5.75rem;padding:1rem .9rem 1.1rem}
.glance li:nth-child(odd) a{padding-left:0}
.glance__k{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  font:600 .6875rem/1.25 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.glance__k::after{content:"\2193";content:"\2193" / "";font:400 .95rem/1 var(--f-sans);color:var(--line-2);
  transition:transform .25s var(--ease),color .2s}
.glance__v{font:400 clamp(1.55rem,1.25rem + 1vw,2.1rem)/1 var(--f-serif);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.015em;transition:color .2s}
.glance__v small{font:500 .75rem/1 var(--f-sans);letter-spacing:.03em;color:var(--muted);margin-right:.2rem}
.glance a:hover .glance__v{color:var(--red)}
.glance a:hover .glance__k::after{transform:translateY(3px);color:var(--red)}
@media (min-width:760px){
  .glance ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .glance li:nth-child(even){border-left:0}
  .glance li:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
  .glance li:nth-child(odd) a{padding-left:.9rem}
  .glance li:nth-child(3n+1) a{padding-left:0}
}
@media (min-width:1200px){
  .glance ul{grid-template-columns:repeat(6,minmax(0,1fr))}
  .glance li:not(:nth-child(3n+1)){border-left:0}
  .glance li + li{border-left:1px solid var(--line)}
  .glance li:nth-child(3n+1) a{padding-left:.9rem}
  .glance li:first-child a{padding-left:0}
}

/* ---------- 9. Menu items + price lists ---------------------------------- */
.item,.item__split{display:grid;gap:1.75rem 4rem}
.item{padding-block:clamp(2.75rem,5vw,4.5rem);border-top:1px solid var(--text)}
.item > *,.item__split > *{min-width:0}
/* packages: head + list in their own grid, the matrix below it. The sticky head's
   containing block then ends with the list instead of sliding over the matrix. */
.item--multi{display:block}
@media (min-width:900px){
  .item,.item__split{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .item--multi{display:block}
  .item__head{position:sticky;top:calc(var(--nav-h) + 2rem);align-self:start}
}
.item__no{margin-bottom:1rem;font:600 .72rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);font-variant-numeric:tabular-nums}
.item__no--light{color:var(--red-lt)}
.item__title{font:400 clamp(1.95rem,1.45rem + 1.8vw,2.9rem)/1.02 var(--f-serif);letter-spacing:-.02em;margin-bottom:.8rem}
.item__desc{max-width:34ch;color:var(--muted);text-wrap:pretty}
.incl{max-width:34ch;margin-top:1.1rem}
.incl__k{display:block;margin-bottom:.45rem;font:600 .6875rem/1 var(--f-sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.note{max-width:36ch;margin-top:1.25rem;padding-left:1rem;border-left:2px solid var(--red);
  font-size:.875rem;line-height:1.5;color:var(--muted)}

/* leader dots: an empty box with baseline alignment sits on the text baseline,
   so the dots read like typeset periods rather than a dotted border */
.plist > div,.pkg__row{display:flex;align-items:baseline;gap:.9rem}
.plist > div::after,.pkg__row::after{content:"";order:1;flex:1 1 1.5rem;min-width:1.5rem;height:3px;
  align-self:baseline;background:radial-gradient(circle,var(--line-2) 1px,transparent 1.35px) 0 50% / 7px 3px repeat-x}
.plist > div{padding-block:.9rem}
.plist > div:first-child{padding-top:.25rem}
.plist dt{font-size:1.0625rem;line-height:1.3}
.plist dt small{display:block;margin-top:.2rem;font-size:.8125rem;color:var(--muted)}
.plist dd,.pkg__price{order:2;white-space:nowrap;
  font:400 clamp(1.6rem,1.3rem + 1vw,2.1rem)/1 var(--f-serif);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.plist dd small{display:block;margin-top:.35rem;text-align:right;font:500 .75rem/1 var(--f-sans);letter-spacing:.03em;color:var(--muted)}

/* ---------- 10. Packages + comparison matrix ----------------------------- */
.pkg{padding-block:1.35rem;border-bottom:1px solid var(--line)}
.pkg:first-child{padding-top:.25rem}
.pkg__name{font:400 clamp(1.4rem,1.2rem + .8vw,1.8rem)/1.15 var(--f-serif);letter-spacing:-.012em}
.tags{margin-top:.5rem;font-size:.9375rem;line-height:1.65;color:var(--muted)}
.tags li{display:inline;white-space:nowrap}
.tags li:not(:last-child)::after{content:"\00a0\00b7";color:var(--line-2)}
.tags b{font-weight:600;color:var(--text)}
.new{display:inline-block;vertical-align:.1em;margin-left:.3rem;padding:.24rem .42rem .2rem;border-radius:2px;
  background:var(--red);color:#fff;font:700 .625rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase}

.compare{margin-top:clamp(2.25rem,4vw,3.25rem)}
.compare__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:1.1rem}
.compare__title{font:400 1.375rem/1.2 var(--f-serif);letter-spacing:-.01em}
.compare__hint{display:inline-flex;align-items:center;gap:.4rem;
  font:500 .72rem/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.compare__hint svg{width:1rem;height:1rem}
.compare__frame{position:relative}
.compare__frame::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2.75rem;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,245,240,0),var(--ivory));transition:opacity .2s}
.compare__frame.is-end::after,.compare__frame.is-fit::after{opacity:0}
/* position:relative is load-bearing: the visually-hidden "Included" spans are
   position:absolute, and without a positioned scroller their containing block
   was .compare__frame, outside the scroll box, so the last column's spans
   escaped the clip and pushed the page 160px wide at 360-390px. */
.compare__scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

.matrix{min-width:36rem;table-layout:fixed;border-collapse:separate;border-spacing:0}
.matrix__c1{width:9.5rem}
.matrix th,.matrix td{padding:.8rem .4rem;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.matrix thead th{vertical-align:bottom;padding-block:0 1rem;border-bottom:1px solid var(--text)}
.matrix__pkg{display:block;font:400 1.0625rem/1.15 var(--f-serif);letter-spacing:-.005em}
.matrix__price{display:block;margin-top:.4rem;font:500 .9375rem/1 var(--f-sans);
  font-variant-numeric:tabular-nums;color:var(--muted)}
.matrix th.matrix__corner{text-align:left}
.matrix__corner span{font:600 .6875rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.matrix tbody th{text-align:left;font-weight:500;font-size:.9375rem;line-height:1.3;padding-right:.75rem}
/* sticky label column so rows stay readable while the checks scroll */
.matrix th[scope="row"],.matrix th.matrix__corner{position:sticky;left:0;z-index:1;background:var(--ivory)}
.matrix tbody tr:hover > *{background:var(--bone)}
.matrix .ck{width:1.25rem;height:1.25rem;margin-inline:auto;color:var(--red)}
.matrix .no{display:block;width:.75rem;height:1px;margin-inline:auto;background:var(--line-2)}
/* the tag hangs to the right of the check, out of flow, so the check stays on
   the column centre line and the row keeps the same height as its neighbours */
.matrix .is-new{position:relative}
.matrix .is-new .new{position:absolute;top:50%;left:calc(50% + .95rem);margin:0;transform:translateY(-50%)}
@media (min-width:640px){ .compare__hint{display:none} }
@media (min-width:900px){
  .matrix__c1{width:24%}
  .matrix th,.matrix td{padding-block:.9rem}
  .matrix__pkg{font-size:1.25rem}
}

/* ---------- 11. Daily specials ------------------------------------------- */
@media (min-width:900px){
  .item--wide{grid-template-columns:1fr}
  .item--wide .item__head{position:static;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:4rem}
  .item--wide .item__no,.item--wide .item__title{grid-column:1}
  .item--wide .item__title{margin-bottom:0}
  .item--wide .item__desc{grid-column:2;grid-row:2;align-self:end;max-width:44ch;padding-bottom:.3rem}
}
.week{border-top:1px solid var(--text)}
.week li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"day reg" "name price";gap:.35rem 1rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line)}
.week__day{grid-area:day;display:flex;align-items:center;gap:.6rem;
  font:600 .72rem/1.2 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.week__name{grid-area:name;font:400 1.1875rem/1.25 var(--f-serif);letter-spacing:-.005em}
.week__off{display:inline-block;margin-right:.25rem;font:600 .8125rem/1 var(--f-sans);color:var(--red)}
.week__price{grid-area:price;text-align:right;font:400 1.875rem/1 var(--f-serif);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.week__reg{grid-area:reg;text-align:right;white-space:nowrap;font-size:.8125rem;color:var(--muted)}
.week__reg s{text-decoration-thickness:1px}
.week__today{display:none;padding:.28rem .45rem .24rem;border-radius:2px;background:var(--red);color:#fff;
  font:700 .5625rem/1 var(--f-sans);letter-spacing:.16em}
/* today (set by JS in America/Los_Angeles) */
.week li.is-today{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);background:var(--ink);color:var(--on-dark);border-bottom-color:var(--ink)}
.week li.is-today .week__day{color:var(--on-dark)}
.week li.is-today .week__reg{color:var(--on-dark-2)}
.week li.is-today .week__off{color:var(--red-lt)}
.week li.is-today .week__today{display:inline-block}
@media (min-width:1024px){
  .week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .week li{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:14rem;
    padding:1.25rem 1rem 1.4rem;border-bottom:0}
  .week li + li{border-left:1px solid var(--line)}
  .week__day{margin-bottom:1.1rem;min-height:1.1rem;justify-content:space-between;width:100%}
  .week__name{font-size:1.125rem;margin-bottom:auto}
  .week__off{display:block;margin:0 0 .35rem}
  .week__price{order:3;margin-top:1.5rem;text-align:left;font-size:2.4rem}
  .week__reg{order:4;margin-top:.4rem;text-align:left}
  .week li.is-today{margin-inline:0;padding-inline:1rem;box-shadow:inset 0 3px 0 var(--red)}
  .week li.is-today + li{border-left-color:transparent}
}

/* ---------- 12. Detail Special: feature ---------------------------------- */
.feature{display:grid;margin-inline:calc(var(--pad) * -1);margin-bottom:clamp(2.75rem,5vw,4.5rem);
  background:var(--ink);color:var(--on-dark)}
.feature > *{min-width:0}
.feature__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-2)}
.feature__media img{width:100%;height:100%;object-fit:cover;object-position:50% 47%}
.feature__body{padding:2.25rem var(--pad) 2.5rem}
.feature__title{font:400 clamp(2.4rem,1.7rem + 2.6vw,3.75rem)/1 var(--f-serif);letter-spacing:-.022em}
.feature__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .9rem;
  margin:1.25rem 0 2rem;padding-bottom:1.75rem;border-bottom:1px solid var(--line-dark);position:relative}
.feature__price::after{content:"";position:absolute;left:0;bottom:-1px;width:4rem;height:1px;background:var(--red-lt)}
.feature__amt{font:300 clamp(3.5rem,2.4rem + 4.4vw,6rem)/.9 var(--f-serif);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.035em}
.feature__up{font:600 .75rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.feature__cols{display:grid;gap:2rem}
.feature .label{margin-bottom:.85rem}
.ticks li,.extras li{display:flex;align-items:flex-start;gap:.65rem;padding-block:.42rem;line-height:1.4}
.ticks svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.1em;color:var(--red-lt)}
.extras li{color:var(--on-dark-2)}
.extras li::before{content:"+";flex:none;width:1.1rem;text-align:center;font-weight:500;color:var(--silver)}
.dropoff{margin:2rem 0 2rem;padding:1.4rem 1.4rem 1.1rem;border:1px solid var(--line-dark);background:var(--ink-2)}
.dropoff ol{display:grid;gap:.15rem;counter-reset:drop}
.dropoff li{counter-increment:drop;display:flex;align-items:baseline;gap:.75rem;padding-block:.35rem;line-height:1.4}
.dropoff li::before{content:counter(drop);display:inline-grid;place-items:center;flex:none;
  width:1.5rem;height:1.5rem;transform:translateY(-.08em);border:1px solid rgba(242,239,233,.35);border-radius:50%;
  font:500 .72rem/1 var(--f-sans);font-variant-numeric:tabular-nums;color:var(--on-dark)}
@media (min-width:600px){
  .feature__cols,.dropoff ol{grid-template-columns:1fr 1fr}
  .dropoff ol{column-gap:1.5rem}
}
@media (min-width:900px){
  .feature{margin-inline:0;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .feature__media{aspect-ratio:auto}
  .feature__media img{position:absolute;inset:0;object-position:50% 30%}
  .feature__body{padding:clamp(2.5rem,4.5vw,4.5rem)}
}

/* ---------- 13. Add-ons, scents, fine print ------------------------------ */
.scents{margin-top:2.25rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.scents__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem}
.scents__note{font-size:.8125rem;color:var(--muted)}
.scents__list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.scents__list li{padding:.45rem .95rem .5rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font:italic 400 1rem/1.2 var(--f-serif)}

.fine{display:grid;gap:1.25rem 2.5rem;padding-top:1.6rem;border-top:1px solid var(--text);
  font-size:.875rem;line-height:1.55;color:var(--muted)}
.fine b{display:block;margin-bottom:.45rem;font:600 .6875rem/1 var(--f-sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text)}
@media (min-width:900px){ .fine{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- 14. Process -------------------------------------------------- */
.process__grid{display:grid;gap:3rem}
.process__grid > *{min-width:0}
.process__lede{max-width:38ch;margin-top:1.25rem;font-size:1.0625rem;color:var(--on-dark-2)}
.process__fig{margin-top:2.5rem}
.process__fig img{width:100%;aspect-ratio:5/4;object-fit:cover}   /* file is pre-cropped to 5:4 */
.steps li{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:1.25rem;
  padding-block:1.9rem;border-top:1px solid var(--line-dark)}
.steps li:last-child{border-bottom:1px solid var(--line-dark)}
.steps__no{font:300 2.25rem/1 var(--f-serif);font-variant-numeric:lining-nums tabular-nums;color:var(--silver)}
.steps h3{margin-bottom:.55rem;font:400 clamp(1.5rem,1.25rem + 1vw,2rem)/1.1 var(--f-serif);letter-spacing:-.015em}
.steps p{max-width:44ch;color:var(--on-dark-2)}
.notunnel{margin-top:2rem;padding:1.35rem 1.5rem;border:1px solid var(--line-dark);border-left:2px solid var(--red-lt);
  background:var(--ink-2);font-size:1.0625rem;color:var(--on-dark-2)}
.notunnel strong{margin-right:.35rem;font:italic 400 1.3rem/1.3 var(--f-serif);color:var(--on-dark)}
@media (min-width:960px){
  .process__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,7vw,7rem);align-items:start}
  .process__steps{padding-top:.4rem}
  .steps li{grid-template-columns:4.5rem minmax(0,1fr);padding-block:2.2rem}
  .steps__no{font-size:2.75rem}
}

/* ---------- 15. Craft ---------------------------------------------------- */
.craft__grid{display:grid;gap:2.75rem}
.craft__grid > *{min-width:0}
.craft__lead img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
.craft__text{max-width:40ch;margin-top:1.5rem;font-size:1.125rem;line-height:1.65}
.pull{max-width:22ch;margin-top:2rem;padding-left:1.25rem;border-left:2px solid var(--red);
  font:italic 300 clamp(1.5rem,1.2rem + 1.2vw,2.15rem)/1.25 var(--f-serif);letter-spacing:-.01em}
.craft__second img{width:100%;aspect-ratio:7/5;object-fit:cover;object-position:50% 40%}
/* below the split: copy first, then the two photographs */
@media (max-width:959.98px){
  .craft__copy{display:contents}
  .craft__copy > div{order:1}
  .craft__lead{order:2}
  .craft__second{order:3;width:86%;margin-left:auto}
}
/* tablet: the photographs sit side by side as a diptych instead of a
   900px-tall portrait followed by a second full-width frame */
@media (min-width:600px) and (max-width:959.98px){
  .craft__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.5rem}
  .craft__copy > div{grid-column:1 / -1}
  .craft__second{width:auto;margin-left:0;margin-top:clamp(3rem,10vw,6rem)}
  .craft__second img{aspect-ratio:4/5;object-position:58% 50%}
}
@media (min-width:960px){
  .craft__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .craft__copy{display:flex;flex-direction:column;gap:clamp(3rem,6vw,5rem);padding-top:clamp(2rem,5vw,5rem)}
  .craft__second{width:88%}
}

/* ---------- 16. Since 1989 + reviews ------------------------------------- */
.since__head{margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.since__year{display:flex;align-items:baseline;gap:clamp(1rem,2.5vw,2rem);margin:.25rem 0 0 -.05em;
  font:250 clamp(6rem,3.25rem + 12vw,13.5rem)/.8 var(--f-serif);
  font-variant-numeric:lining-nums;letter-spacing:-.045em;color:var(--silver)}
.since__year::after{content:"";flex:1;height:1px;background:var(--chrome);opacity:.55}
.since__grid{display:grid;gap:3rem}
.since__grid > *{min-width:0}
.since__prose{display:grid;gap:1rem;max-width:54ch;margin-top:1.5rem;font-size:1.0625rem;color:var(--on-dark-2)}
.rating{position:relative;padding:2rem 1.75rem 2rem;border:1px solid var(--line-dark);background:var(--ink-2)}
.rating::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--chrome);opacity:.8}
.rating__num{margin-top:1.25rem;font:300 clamp(4.75rem,3.75rem + 4vw,7rem)/.85 var(--f-serif);
  font-variant-numeric:lining-nums;letter-spacing:-.035em}
.stars{margin:1rem 0 .6rem;font-size:1.3rem;line-height:1;letter-spacing:.12em}
.stars span{color:var(--on-dark)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stars span{background:linear-gradient(90deg,var(--on-dark) 0 94%,rgba(242,239,233,.25) 94%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.rating__txt{margin-bottom:1.6rem;color:var(--on-dark-2)}
.rating .btn{width:100%}
@media (min-width:960px){
  .since__grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(3rem,7vw,7rem);align-items:start}
}

/* ---------- 17. Visit ---------------------------------------------------- */
.visit__grid{display:grid;gap:3rem}
.visit__grid > *{min-width:0}
.contact{display:grid;gap:1.75rem;margin-bottom:2.5rem}
.contact dt{margin-bottom:.1rem;font:600 .6875rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact dd a{display:inline-block;padding-block:.5rem;
  font:400 clamp(1.4rem,1.2rem + .8vw,1.8rem)/1.25 var(--f-serif);letter-spacing:-.01em;font-variant-numeric:lining-nums;
  text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line-2);text-underline-offset:.22em;
  transition:text-decoration-color .2s}
.contact dd a:hover{text-decoration-color:var(--red)}
.hours{table-layout:fixed;margin:.9rem 0 2rem;border-top:1px solid var(--text)}
.hours th,.hours td{padding:.72rem 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;font-size:1rem}
.hours th{width:52%}
.hours td{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.hours tr.is-today th,.hours tr.is-today td{color:var(--text);font-weight:600}
.hours tr.is-today th::after{content:"Today";display:inline-block;vertical-align:.12em;margin-left:.6rem;
  padding:.26rem .42rem .22rem;border-radius:2px;background:var(--red);color:#fff;
  font:700 .5625rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase}
.visit__btns{display:flex;flex-wrap:wrap;gap:.75rem}
.visit__map{position:relative;width:100%;aspect-ratio:1/1;background:var(--bone);border:1px solid var(--line-2)}
.visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.9) contrast(1.04)}
@media (min-width:600px){
  .contact{grid-template-columns:1fr 1fr}
  .visit__map{aspect-ratio:4/3}
}
@media (min-width:960px){
  .visit__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .contact{grid-template-columns:1fr}
  .visit__map{aspect-ratio:auto;height:100%;min-height:34rem}
}

/* ---------- 18. Footer --------------------------------------------------- */
.foot{padding-block:clamp(3.5rem,7vw,5rem) 1.75rem;border-top:1px solid var(--line-dark)}
.foot__grid{display:grid;gap:2.5rem;padding-bottom:3rem}
.foot__grid > *{min-width:0}
.foot__tag{max-width:36ch;margin-top:1.25rem;font-size:.9375rem;color:var(--on-dark-2)}
.foot__col .label{margin-bottom:.9rem}
.foot__col address,.foot__col p{display:grid;gap:.35rem;font-size:.9375rem;line-height:1.6;color:var(--on-dark)}
.foot__col address{gap:0}
.foot__col address a{display:inline-block;padding-block:.625rem}
.foot__col address a:hover,.foot__col ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.foot__col ul a{display:flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--on-dark-2)}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-top:1.5rem;
  border-top:1px solid var(--line-dark);font-size:.8125rem;color:var(--on-dark-2)}
@media (min-width:700px){ .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .foot__grid{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:3rem} }
/* room for the mobile dock */
@media (max-width:1023.98px){ .foot{padding-bottom:calc(1.75rem + 3.5rem + env(safe-area-inset-bottom))} }

/* ---------- 19. Mobile dock ---------------------------------------------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr 1.25fr;
  background:rgba(19,18,17,.97);border-top:1px solid var(--line-dark);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(105%);visibility:hidden;
  transition:transform .35s var(--ease),visibility 0s linear .35s}
.dock.is-up,.no-js .dock{transform:none;visibility:visible;transition:transform .35s var(--ease)}
.dock a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;
  font:600 .8125rem/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark)}
.dock a + a{border-left:1px solid var(--line-dark)}
.dock svg{width:1rem;height:1rem;color:var(--silver)}
.dock .dock__cta{background:var(--red);color:#fff;border-left:0}
@media (min-width:1024px){ .dock{display:none} }

/* ---------- 20. Reveal --------------------------------------------------- */
/* Hidden state only exists once main.js has run and opted in (.reveal-on),
   so no-JS, failed-JS and reduced-motion visitors always get a full page. */
.reveal-on [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-on [data-reveal].in{opacity:1;transform:none}

/* ---------- 21. Reduced motion + print ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal-on [data-reveal]{opacity:1;transform:none}
}

@media print{
  .bar,.dock,.visit__map,.hero__media,.feature__media,.compare__hint,.skip{display:none !important}
  body,.is-dark,.hero,.feature{background:#fff !important;color:#000 !important}
  .hero__lede,.steps p,.since__prose,.process__lede,.extras li,.rating__txt{color:#333 !important}
  section{padding-block:1rem;break-inside:avoid}
  .item,.week li,.matrix tr{break-inside:avoid}
  .compare__scroll{overflow:visible}
  .reveal-on [data-reveal]{opacity:1 !important;transform:none !important}
  .matrix th[scope="row"],.matrix th.matrix__corner{position:static}
  @page{size:letter;margin:.55in}
}