/* ==========================================================================
   Desmo Shed — single stylesheet
   Hand-written. No frameworks, no build step, no preprocessor.
   Order: tokens · reset · primitives · layout · components · sections · utils
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand:          #d81e2c;   /* Ducati rosso */
  --brand-bright:   #ff2f3c;
  --brand-deep:     #9d0c17;

  /* Neutral ramp (near-black → white) */
  --ink-950:        #07080a;
  --ink-900:        #0b0d10;
  --ink-850:        #101318;
  --ink-800:        #14171d;
  --ink-750:        #1a1e26;
  --ink-700:        #232833;
  --ink-500:        #4b525f;
  --ink-300:        #8d95a3;
  --ink-200:        #b6bcc7;
  --ink-100:        #dfe3ea;
  --white:          #f7f8fa;

  /* Semantic */
  --bg:             var(--ink-950);
  --bg-raised:      color-mix(in oklab, var(--ink-850) 88%, var(--brand) 12%);
  --surface:        var(--ink-900);
  --surface-2:      var(--ink-850);
  --text:           var(--white);
  --text-muted:     var(--ink-300);
  --text-dim:       var(--ink-500);
  --line:           color-mix(in oklab, var(--white) 9%, transparent);
  --line-strong:    color-mix(in oklab, var(--white) 16%, transparent);
  --focus:          color-mix(in oklab, var(--brand-bright) 70%, var(--white));

  /* Typography */
  --font-display:   "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:      ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --step--1:  clamp(0.80rem, 0.77rem + 0.15vw, 0.875rem);
  --step-0:   clamp(0.95rem, 0.91rem + 0.20vw, 1.05rem);
  --step-1:   clamp(1.10rem, 1.02rem + 0.38vw, 1.35rem);
  --step-2:   clamp(1.35rem, 1.18rem + 0.80vw, 1.90rem);
  --step-3:   clamp(1.70rem, 1.35rem + 1.65vw, 2.75rem);
  --step-4:   clamp(2.20rem, 1.55rem + 3.10vw, 4.25rem);

  /* Space */
  --gap:      clamp(1rem, 0.7rem + 1.4vw, 1.6rem);
  --pad-x:    clamp(1.15rem, 0.6rem + 2.6vw, 2.5rem);
  --section-y:clamp(3.75rem, 2.4rem + 6.2vw, 7.5rem);
  --measure:  68ch;
  --container: 1160px;

  /* Shape & depth */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 12px 32px -12px rgb(0 0 0 / .7);
  --shadow-3: 0 32px 70px -24px rgb(0 0 0 / .85);

  /* Motion */
  --ease: cubic-bezier(.22, .68, 0, 1);
  --dur:  .4s;

  --header-h: 76px;

  color-scheme: dark;
}

@media (max-width: 960px) {
  :root { --header-h: 64px; }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

ul[class], ol[class] { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2b. Feature flags
   The switch is `FEATURES` at the top of assets/js/main.js. main.js writes the
   result onto the <html> element as data-<flag>="on" | "off" as its very first
   action, then removes the elements of any flag that is off.

   Markup contract:
     data-feature="<flag>"       hidden unless that flag is on
     data-feature="<flag>-off"   the copy shown in its place when it is off

   Hidden is the DEFAULT. With no attribute present at all — JavaScript
   blocked, or the script failing to load — the feature stays off and there is
   no flash of content that then vanishes. The trade-off runs the other way:
   when a flag is switched back on, its elements appear as the deferred script
   runs. CLAUDE.md has the one-line <head> snippet that removes even that.
   -------------------------------------------------------------------------- */
html:not([data-whatsapp="on"]) [data-feature="whatsapp"]     { display: none !important; }
html[data-whatsapp="on"]       [data-feature="whatsapp-off"] { display: none !important; }

/* --------------------------------------------------------------------------
   3. Primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand-bright) 62%, var(--white));
}
.eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure);
  letter-spacing: -0.01em;
}

.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }

/* Buttons */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78em 1.35em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform .18s var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover  { background: color-mix(in oklab, var(--btn-bg) 82%, var(--white)); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { box-shadow: 0 8px 24px -10px color-mix(in oklab, var(--brand) 90%, transparent); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: color-mix(in oklab, var(--white) 7%, transparent);
  border-color: color-mix(in oklab, var(--white) 28%, transparent);
}
.btn--sm { padding: .58em 1em; font-size: var(--step--1); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* Card surface shared by services, about, contact panels */
.card {
  position: relative;
  padding: clamp(1.35rem, 1rem + 1.3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--white) 4%, transparent),
      transparent 55%),
    var(--surface-2);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.card:hover {
  border-color: color-mix(in oklab, var(--brand) 42%, var(--line));
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   4. Header — always visible
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--ink-950) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] {
  background: color-mix(in oklab, var(--ink-950) 92%, transparent);
  box-shadow: var(--shadow-2);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.2vw, 1.4rem);
  width: 100%;
  min-inline-size: 0;
}

/* Brand lockup */
.brand { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.brand__mark { inline-size: 36px; block-size: 36px; border-radius: 9px; }
.brand__text { display: grid; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand__name em { font-style: normal; color: var(--brand-bright); }
.brand__tag {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Nav */
.nav { margin-inline-start: auto; }
.nav > .contact-chip { display: none; }   /* only surfaces inside the mobile panel */
.nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  display: block;
  padding: .5rem .6rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--text-muted);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav__link:hover { color: var(--text); background: color-mix(in oklab, var(--white) 6%, transparent); }
.nav__link[aria-current="true"] { color: var(--text); }
.nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset-inline: .6rem;
  bottom: .12rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* Header contact cluster */
.header-contact { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.contact-chip:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: color-mix(in oklab, var(--white) 5%, transparent);
}
.contact-chip svg { inline-size: 15px; block-size: 15px; flex: 0 0 auto; opacity: .8; }
.contact-chip--tel {
  border-color: color-mix(in oklab, var(--brand) 55%, transparent);
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  color: var(--text);
}
.contact-chip--tel:hover { background: color-mix(in oklab, var(--brand) 30%, transparent); }

/* WhatsApp — deliberately NOT WhatsApp green. The glyph carries the
   recognition on its own, and a second accent colour would break the
   single-accent rule the rest of the page is built on. See BRAND.md §1. */
.contact-chip--wa { color: var(--text); }
.contact-chip--wa svg { opacity: 1; }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  inline-size: 17px;
  block-size: 1.8px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { transform: translateY(-5.5px); }
.nav-toggle span::after  { transform: translateY(3.7px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

/* Header contact ladder.
   The header carries three channels (email, WhatsApp, phone) plus the nav, and
   the container caps it at 1160px — so labels are dropped one at a time, least
   important first, rather than letting the row overflow. Every channel keeps a
   tappable icon at every width; only the spelled-out text goes. */
/* The email address never fits the header alongside the nav and two other
   channels without pushing the row outside the 1160px container and out of
   alignment with the rest of the page — so in the header it is the envelope
   icon only, and the address is spelled out in the contact card and footer.
   To put it back, delete this rule and widen .site-header .container. */
.header-contact .contact-chip--mail .contact-chip__label { display: none; }
.header-contact .contact-chip--mail { padding: .55rem .68rem; }

@media (max-width: 1040px) {
  .header-contact .contact-chip--wa .contact-chip__label { display: none; }
  .header-contact .contact-chip--wa { padding: .55rem .68rem; }
}

@media (max-width: 960px) {
  .nav-toggle { display: grid; }
  .brand__mark { inline-size: 32px; block-size: 32px; }
  .brand__name { font-size: .95rem; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: .5rem var(--pad-x) 1.25rem;
    /* Solid, not translucent: this panel sits directly over the hero, and any
       transparency at all leaves the headline legible through the nav links. */
    background: var(--ink-900);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    display: grid;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: .85rem .25rem;
    font-size: var(--step-0);
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__link[aria-current="true"]::after { inset-inline: .25rem auto; inline-size: 18px; bottom: .55rem; }
  .nav > .contact-chip { display: flex; justify-content: center; padding: .7rem 1rem; margin-top: .5rem; }
  /* Order-independent, so the spacing below the nav links is right whichever
     contact chips a feature flag happens to leave in place. */
  .nav > .contact-chip:first-of-type { margin-top: 1rem; }
}

@media (max-width: 560px) {
  .header-contact .contact-chip--tel .contact-chip__label { display: none; }
  .header-contact .contact-chip--tel { padding: .55rem .68rem; }
  .header-contact .contact-chip--mail { display: none; }
}

/* --------------------------------------------------------------------------
   5. Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section + .section { border-top: 1px solid color-mix(in oklab, var(--white) 5%, transparent); }

.section__head { max-width: var(--measure); margin-bottom: clamp(1.75rem, 1rem + 2.4vw, 3rem); }
.section__head .eyebrow { margin-bottom: .9rem; }
.section__title { font-size: var(--step-3); margin-bottom: .75rem; }
.section__intro { color: var(--text-muted); font-size: var(--step-1); line-height: 1.55; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: min(88svh, 780px);
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  /* photographic layer — falls back to gradient when the image is absent */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ink-950) 62%, transparent) 0%,
      color-mix(in oklab, var(--ink-950) 78%, transparent) 45%,
      var(--ink-950) 100%),
    linear-gradient(100deg,
      color-mix(in oklab, var(--ink-950) 92%, transparent) 0%,
      color-mix(in oklab, var(--ink-950) 30%, transparent) 70%),
    url("../img/hero.jpg") center / cover no-repeat,
    linear-gradient(135deg, var(--ink-850), var(--ink-950) 60%);
}
.hero::after {
  /* rosso glow */
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -10%;
  inset-block-start: -25%;
  inline-size: min(70vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
      color-mix(in oklab, var(--brand) 30%, transparent) 0%,
      transparent 68%);
  filter: blur(30px);
  pointer-events: none;
}

.hero__inner { display: grid; gap: clamp(1.4rem, 1rem + 1.5vw, 2.1rem); max-width: 44rem; }
.hero__title {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.hero__title .accent {
  background: linear-gradient(100deg, var(--brand-bright), color-mix(in oklab, var(--brand) 70%, var(--white)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin-top: .5rem;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.stat__value {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat__label {
  margin-top: .35rem;
  font-size: var(--step--1);
  color: var(--text-dim);
  letter-spacing: .02em;
}
.stars { display: inline-flex; gap: 1px; color: var(--brand-bright); }
.stars svg { inline-size: 15px; block-size: 15px; }

/* Trust strip */
.trust {
  border-block: 1px solid var(--line);
  background: color-mix(in oklab, var(--white) 2.5%, transparent);
}
.trust__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 2.25rem);
  padding-block: 1.1rem;
}
.trust__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.trust__items { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.trust__items li {
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   7. Services grid
   -------------------------------------------------------------------------- */
.grid-services {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.service__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  background: color-mix(in oklab, var(--brand) 15%, transparent);
  color: var(--brand-bright);
}
.service__icon svg { inline-size: 21px; block-size: 21px; }
.service__title { font-size: var(--step-1); margin-bottom: .55rem; }
.service__body { color: var(--text-muted); font-size: var(--step-0); }
.service__points { margin-top: 1.1rem; display: grid; gap: .45rem; list-style: none; padding: 0; }
.service__points li {
  position: relative;
  padding-inline-start: 1.35rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.service__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .58em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* --------------------------------------------------------------------------
   8. Data table (services & fees) — columns derived from the data
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  -webkit-overflow-scrolling: touch;
}
.data-table { inline-size: 100%; border-collapse: collapse; font-size: var(--step-0); }
.data-table caption {
  caption-side: bottom;
  padding: .9rem 1.15rem;
  font-size: var(--step--1);
  color: var(--text-dim);
  text-align: start;
  border-top: 1px solid var(--line);
}
.data-table th, .data-table td {
  padding: .95rem 1.15rem;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in oklab, var(--white) 6%, transparent);
}
.data-table thead th {
  position: sticky;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: color-mix(in oklab, var(--ink-800) 96%, var(--brand) 4%);
  white-space: nowrap;
}
.data-table tbody tr { transition: background .22s var(--ease); }
.data-table tbody tr:hover { background: color-mix(in oklab, var(--white) 3.5%, transparent); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td[data-col="service"] { font-weight: 600; white-space: nowrap; }
.data-table td[data-col="price"],
.data-table td[data-col="from"] {
  font-family: var(--font-mono);
  font-size: .92em;
  font-weight: 600;
  color: color-mix(in oklab, var(--brand-bright) 55%, var(--white));
  white-space: nowrap;
}

/* Card fallback when a table has few columns / on very small screens */
@media (max-width: 620px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table tr {
    display: grid;
    gap: .2rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid color-mix(in oklab, var(--white) 6%, transparent);
  }
  .data-table td { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; padding: .18rem 0; border: 0; }
  .data-table td::before {
    content: attr(data-label);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
}

.note {
  display: flex;
  gap: .7rem;
  margin-top: 1.1rem;
  padding: .9rem 1.1rem;
  border: 1px solid color-mix(in oklab, var(--brand) 28%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.note svg { inline-size: 17px; block-size: 17px; flex: 0 0 auto; margin-top: .18em; color: var(--brand-bright); }

/* --------------------------------------------------------------------------
   9. Gallery — dynamic 3-up grid + <dialog> lightbox
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.tile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter var(--dur) var(--ease);
}
.tile:hover { border-color: color-mix(in oklab, var(--brand) 50%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tile:hover img { transform: scale(1.045); }
.tile__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1.6rem .9rem .75rem;
  font-size: var(--step--1);
  font-weight: 550;
  text-align: start;
  color: var(--white);
  background: linear-gradient(to top, rgb(0 0 0 / .8), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover .tile__caption, .tile:focus-visible .tile__caption { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
  inline-size: min(96vw, 1180px);
  max-inline-size: none;
  max-block-size: 94svh;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--ink-900);
  color: var(--text);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.lightbox::backdrop {
  background: color-mix(in oklab, var(--ink-950) 82%, transparent);
  backdrop-filter: blur(8px);
}
.lightbox[open] { animation: lb-in .28s var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.lightbox__figure { margin: 0; display: grid; }
.lightbox__img {
  inline-size: 100%;
  max-block-size: calc(94svh - 76px);
  object-fit: contain;
  background: var(--ink-950);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--ink-850);
}
.lightbox__caption { font-size: var(--step--1); color: var(--text-muted); flex: 1 1 auto; }
.lightbox__count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-dim); }
.icon-btn {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.icon-btn:hover { background: color-mix(in oklab, var(--white) 8%, transparent); border-color: var(--line-strong); }
.icon-btn svg { inline-size: 17px; block-size: 17px; }

/* --------------------------------------------------------------------------
   10. About + reviews
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

.about__body { display: grid; gap: 1.1rem; color: var(--text-muted); max-width: var(--measure); }
.about__body strong { color: var(--text); font-weight: 600; }

.quotes { display: grid; gap: var(--gap); }
.quote { padding: clamp(1.1rem, 1rem + .8vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.quote__text { color: var(--text); font-size: var(--step-0); line-height: 1.6; }
.quote__text::before { content: "\201C"; }
.quote__text::after  { content: "\201D"; }
.quote__meta { margin-top: .8rem; display: flex; align-items: center; gap: .55rem; font-size: var(--step--1); color: var(--text-dim); }
.quote__meta .stars svg { inline-size: 13px; block-size: 13px; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .6rem; max-width: 52rem; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq__item[open] { border-color: color-mix(in oklab, var(--brand) 38%, var(--line)); }
.faq__q {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.15rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 2px solid var(--brand-bright);
  border-block-end: 2px solid var(--brand-bright);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
  flex: 0 0 auto;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a { padding: 0 1.15rem 1.15rem; color: var(--text-muted); font-size: var(--step-0); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field--row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .field--row { grid-template-columns: 1fr; } }
.field label { font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; color: var(--text-muted); }
.field label .req { color: var(--brand-bright); }
.field input, .field select, .field textarea {
  inline-size: 100%;
  padding: .78rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink-950) 70%, transparent);
  color: var(--text);
  font-size: var(--step-0);
  transition: border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.field textarea { resize: vertical; min-block-size: 8.5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--brand) 65%, transparent);
  background: color-mix(in oklab, var(--ink-950) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-300) 50%),
                    linear-gradient(135deg, var(--ink-300) 50%, transparent 50%);
  background-position: right 1.05rem center, right .8rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.hp { position: absolute; left: -9999px; opacity: 0; }

.form__status {
  padding: .8rem 1rem;
  border-radius: var(--r-md);
  font-size: var(--step--1);
  border: 1px solid var(--line);
}
.form__status[data-state="ok"]  { border-color: color-mix(in oklab, #22c55e 45%, transparent); background: color-mix(in oklab, #22c55e 12%, transparent); color: #b7f3cd; }
.form__status[data-state="err"] { border-color: color-mix(in oklab, var(--brand) 55%, transparent); background: color-mix(in oklab, var(--brand) 12%, transparent); color: #ffc9cd; }
.form__status[hidden] { display: none; }
.form__small { font-size: var(--step--1); color: var(--text-dim); }

.info-list { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.info-item { display: flex; gap: .85rem; align-items: flex-start; }
.info-item > span:last-child { display: block; flex: 1 1 auto; min-inline-size: 0; }
.info-item__label, .info-item__value { display: block; }
.info-item__label { margin-bottom: .15rem; }
.info-item__icon {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);
  background: color-mix(in oklab, var(--brand) 13%, transparent);
  color: var(--brand-bright);
}
.info-item__icon svg { inline-size: 17px; block-size: 17px; }
.info-item__label { font-size: var(--step--1); color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.info-item__value { font-weight: 550; }
.info-item__value a:hover { color: var(--brand-bright); }

.hours { display: grid; gap: .1rem; margin-top: .4rem; }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--white) 8%, transparent);
  font-size: var(--step-0);
}
.hours__row:last-child { border-bottom: 0; }
.hours__day { color: var(--text-muted); }
.hours__time { font-family: var(--font-mono); font-size: .92em; }
.hours__row[data-today="true"] .hours__day,
.hours__row[data-today="true"] .hours__time { color: var(--brand-bright); font-weight: 600; }
.hours__row[data-closed="true"] .hours__time { color: var(--text-dim); }

.map {
  margin-top: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.map iframe { inline-size: 100%; block-size: clamp(260px, 38svh, 420px); border: 0; filter: grayscale(.35) contrast(1.05); }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--ink-900); padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--gap) clamp(1.5rem, 4vw, 4rem); justify-content: space-between; }
.footer__blurb { max-width: 30rem; color: var(--text-muted); font-size: var(--step--1); margin-top: .9rem; }
.footer__links { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.footer__links a { color: var(--text-muted); transition: color .22s var(--ease); }
.footer__links a:hover { color: var(--text); }
.footer__heading { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .9rem; }
.socials { display: flex; gap: .5rem; }
.social {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text-muted);
  transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.social:hover { color: var(--text); border-color: color-mix(in oklab, var(--brand) 55%, transparent); background: color-mix(in oklab, var(--brand) 14%, transparent); }
.social svg { inline-size: 18px; block-size: 18px; }
.footer__legal {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   14. Reveal-on-scroll + loading states
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

.is-loading { color: var(--text-dim); font-size: var(--step--1); padding: 1.1rem 0; }
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--ink-850) 30%, var(--ink-800) 50%, var(--ink-850) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}