/* =====================================================================
   Restaurant brand site v2: base layer (reset, skeleton, shared classes,
   reveal states). Adapted from agency-site-v2/css/base.css.
   Layer rules: never put transform, filter, perspective, backdrop-filter
   or overflow (other than visible/clip) on main or on a .sec root. Reveal
   attributes go on inner blocks. js/stage.js (css/stage.css) owns the
   .sec root's inline transform, opacity and filter under html.stage.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-bg);
  color-scheme: dark;
}
body {
  margin: 0;
  min-height: 100%;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--c-brass-dim); }
[hidden] { display: none !important; }
::selection { background: var(--c-brass); color: var(--c-ink); }
@media (hover: hover) and (pointer: fine) {
  a:not([class]) { transition: color var(--dur-hover) var(--ease-std); }
  a:not([class]):hover { color: var(--c-brass); }
}
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* ---------- Page skeleton ---------- */
main {
  display: block;
  position: relative;
  z-index: var(--z-main);
  background: var(--c-bg);
  overflow: clip;
}

/* Ambient warmth: two soft lamps, blurred. Sticky, so it costs one viewport. */
.st-ambient {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  z-index: var(--z-ambient);
  pointer-events: none;
  overflow: hidden;
}
.st-ambient > i {
  position: absolute;
  display: block;
  border-radius: 100%;
  background: var(--c-glow);
  filter: blur(80px);
}
.st-ambient > i:nth-child(1) { width: 38vw; height: 38vw; top: -14vw; right: -8vw; opacity: 0.22; }
.st-ambient > i:nth-child(2) { width: 46vw; height: 30vw; bottom: -16vw; left: -12vw; opacity: 0.16; }

/* ---------- Layout ---------- */
.wrap { width: var(--content-w); margin-inline: auto; }
.wrap--narrow { width: var(--content-narrow); margin-inline: auto; }

.sec {
  position: relative;
  isolation: isolate;
  z-index: var(--z-sec);
  padding-block: var(--sec-pad-y);
  scroll-margin-top: var(--nav-offset);
}
#contact, #lead-form { scroll-margin-top: var(--nav-offset); }

.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--head-gap);
  margin-bottom: var(--head-to-body);
  max-width: 44rem;
}
.sec-head--center { align-items: center; text-align: center; margin-inline: auto; }

/* ---------- Type ---------- */
.h-hero, .h-sec, .h-page {
  font-family: var(--font-serif);
  font-weight: var(--fw-head);
  font-variation-settings: "opsz" 120;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
  color: var(--c-fg);
}
.h-hero { font-size: var(--fs-h1); }
.h-sec { font-size: var(--fs-h2); }
.h-page { font-size: var(--fs-6xl); }
.h-card {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 48;
  font-size: var(--fs-h3);
  font-weight: var(--fw-head);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sub {
  font-size: var(--fs-sub);
  line-height: var(--lh-snug);
  color: var(--c-fg-2);
  max-width: 38em;
  text-wrap: pretty;
}
.body { max-width: 66ch; text-wrap: pretty; }
.muted { color: var(--c-fg-2); }
.small { font-size: var(--fs-sm); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brass);
}
.eyebrow::before { content: ""; width: 1.6em; height: 1px; background: var(--c-brass); opacity: 0.8; }

/* ---------- Surfaces ---------- */
.glass {
  background: var(--glass-fill);
  border: var(--glass-border);
  border-radius: var(--r-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .tag, .btn--secondary { background: var(--glass-fill-solid); }
}
.paper {
  background: var(--paper-fill);
  color: var(--c-ink);
  color-scheme: light;
  border-radius: var(--r-paper);
  box-shadow: var(--paper-shadow);
}
.paper ::selection { background: var(--c-ink); color: var(--c-paper); }
.paper :focus-visible { outline-color: var(--c-ink); }
.hair { display: block; height: 1px; border: 0; margin: 0; background: var(--c-hair); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-fg-2);
  background: var(--glass-fill);
  border: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  white-space: nowrap;
}

.chip {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-round);
  background: var(--chip-fill);
  border: var(--chip-border);
  color: var(--c-brass);
}
.chip svg, .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic { width: 1.05em; height: 1.05em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  padding-inline: var(--btn-pad-x);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 1.05em; height: 1.05em; }
.btn--primary {
  background: var(--btn-primary-fill);
  color: var(--btn-primary-fg);
  box-shadow: var(--btn-primary-shadow);
}
.btn--secondary {
  background: transparent;
  color: var(--c-fg);
  border: 1px solid rgba(244, 236, 223, 0.32);
}
.btn--ink { background: var(--btn-ink-fill); color: var(--btn-ink-fg); box-shadow: 0 10px 24px -12px rgba(23, 17, 14, 0.7); }
.btn--ghost { background: transparent; color: var(--c-ink); border: 1px solid rgba(23, 17, 14, 0.32); }
.btn { min-height: 52px; font-size: var(--fs-sm); }
.btn--lg { min-height: 56px; padding-inline: 2.1rem; font-size: var(--fs-base); }
.btn--round {
  position: relative;
  isolation: isolate;
  width: var(--btn-round);
  height: var(--btn-round);
  min-height: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--c-ink);
}
.btn--round::before {
  content: "";
  position: absolute;
  inset: calc((var(--btn-round) - var(--btn-round-visual)) / 2);
  z-index: -1;
  border-radius: var(--r-round);
  background: var(--btn-primary-fill);
  box-shadow: var(--btn-primary-shadow);
}
.btn--round svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.btn--secondary:hover, .btn--ghost:hover { border-color: currentColor; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: default; opacity: 0.6; }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: transform var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std); }
  .btn--primary:hover, .btn--ink:hover { transform: translateY(-1px); }
}

/* Letter roll (core.js wraps .btn-label.roll on hover devices) */
.btn-label.roll { display: inline-flex; height: 1.25em; line-height: 1.25; overflow: hidden; }
.btn-label.roll > span {
  display: inline-block;
  white-space: pre;
  text-shadow: 0 1.25em currentColor;
  transition: transform var(--dur-roll) var(--ease-roll);
  transition-delay: calc(var(--ci, 0) * var(--stagger-roll));
}
@media (hover: hover) and (pointer: fine) {
  html:not(.rm) .btn:hover .btn-label.roll > span { transform: translateY(-1.25em); }
}

/* CTA rows: every section ends in one */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}
.cta-row--center { justify-content: center; }
.cta-after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-hair);
}
.cta-after p { max-width: 36em; color: var(--c-fg-2); text-wrap: pretty; }

/* ---------- Masks and helpers ---------- */
.mask-x { -webkit-mask-image: var(--mask-x); mask-image: var(--mask-x); }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Reveal states ----------
   Hidden states exist only under html.js:not(.rm). Without JS, with
   reduced motion, or after the 3s head failsafe, everything renders
   finished. core.js adds .is-in at the reveal line. */
html.js:not(.rm) [data-fog]:not(.fog-on):not(.fog-done) { opacity: 0; }
html.js [data-fog].fog-on { -webkit-text-fill-color: currentColor; }
[data-fog] .w { display: inline-block; }
html.js:not(.rm) [data-fog].fog-on .w {
  opacity: 0;
  filter: blur(var(--blur-word));
  transition: opacity var(--dur-word) var(--ease-fog), filter var(--dur-word) var(--ease-fog);
  transition-delay: calc(var(--fog-delay, 0ms) + var(--i, 0) * var(--stagger-word));
}
html.js:not(.rm) [data-fog].fog-on.is-in .w { opacity: 1; filter: blur(0); }
html.js:not(.rm) [data-fog].fog-on.fog-rush .w { transition-duration: 200ms; transition-delay: 0ms; }
html.js:not(.rm) [data-fog].fog-on.fog-now .w { transition: none; }

html.js:not(.rm) [data-rise] {
  transition: opacity var(--dur-rise) var(--ease-out), transform var(--dur-rise) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-item));
}
html.js:not(.rm) [data-rise]:not(.is-in) { opacity: 0; transform: translateY(var(--rise-y)); }
html.js:not(.rm) [data-light] { transition: opacity var(--dur-light) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger-item)); }
html.js:not(.rm) [data-light]:not(.is-in) { opacity: 0; }

/* Stage scenes: a list taller than the screen scrolls inside its clip. */
.scene-clip { overflow: clip; margin: -8px; padding: 8px; }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  .sub, .h-sec, .sec-head { max-width: 100%; }
  .cta-row .btn { flex: 1 1 auto; }
  .cta-after { flex-direction: column; align-items: flex-start; }
}