@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { scroll-behavior: smooth; }
  body { min-height: 100dvh; }
  img { display: block; max-width: 100%; }
  button, a { font: inherit; }
}

@layer tokens {
  :root {
    --cyan: oklch(66% 0.14 218);
    --cyan-dark: oklch(49% 0.13 218);
    --navy: oklch(22% 0.055 245);
    --ink: oklch(24% 0.025 240);
    --muted: oklch(47% 0.025 240);
    --paper: oklch(98% 0.008 215);
    --white: oklch(100% 0 0);
    --honey: oklch(80% 0.15 82);
    --line: oklch(89% 0.025 220);
    --shadow: 0 1rem 3rem oklch(20% 0.04 235 / 0.12);
    --radius-s: 0.7rem;
    --radius-m: 1.2rem;
    --radius-l: 2rem;
    --space-xs: clamp(0.55rem, 0.45rem + 0.35vw, 0.8rem);
    --space-s: clamp(0.8rem, 0.65rem + 0.55vw, 1.15rem);
    --space-m: clamp(1.1rem, 0.8rem + 1vw, 1.8rem);
    --space-l: clamp(1.8rem, 1.2rem + 2vw, 3.2rem);
    --space-xl: clamp(3.5rem, 2.4rem + 4vw, 7rem);
    --page: min(100% - 2rem, 74rem);
    --font-sans: "Noto Sans", "Segoe UI", Arial, sans-serif;
    --font-display: Georgia, "Noto Serif", serif;
  }
}

@layer base {
  html { scroll-padding-block-start: 6rem; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    overflow-x: clip;
  }
  h1, h2, h3 {
    color: var(--navy);
    font-family: var(--font-display);
    line-height: 1.08;
    text-wrap: balance;
  }
  h1 { font-size: clamp(2rem, 1.25rem + 4vw, 5.25rem); letter-spacing: -0.055em; }
  h2 { font-size: clamp(2rem, 1.35rem + 3vw, 4rem); letter-spacing: -0.035em; }
  h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem); }
  a { color: inherit; }
  address { font-style: normal; }
  :focus-visible { outline: 0.2rem solid var(--honey); outline-offset: 0.22rem; }
}

@layer layout {
  .section-shell { width: var(--page); margin-inline: auto; }
  .section-heading { max-width: 47rem; }
  .section-heading > p:last-child { color: var(--muted); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); margin-block-start: var(--space-s); }
}

@layer components {
  .skip-link { position: fixed; z-index: 100; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; padding: 0.7rem 1rem; background: var(--navy); color: var(--white); transform: translateY(-150%); }
  .skip-link:focus { transform: translateY(0); }

  .site-header {
    position: sticky;
    z-index: 20;
    inset-block-start: 0;
    min-height: 5rem;
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding-inline: max(1rem, calc((100% - 74rem) / 2));
    background: oklch(100% 0 0 / 0.94);
    border-block-end: 1px solid var(--line);
  }
  .brand { flex: 0 0 auto; }
  .brand img { width: 4rem; height: 4rem; object-fit: contain; }
  .site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(0.7rem, 1.5vw, 2rem); margin-inline: auto; }
  .site-nav a { min-height: 2.75rem; display: grid; place-items: center; text-decoration: none; font-weight: 700; }
  .site-nav a:hover { color: var(--cyan-dark); }
  .header-call { display: grid; justify-items: end; text-decoration: none; text-align: end; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }
  .header-call svg { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; fill: var(--cyan-dark); }
  .header-call-row { display: flex; align-items: center; gap: 0.4rem; }
  .header-call-number { color: var(--cyan-dark); font-size: 1rem; letter-spacing: 0; }

  .hero { position: relative; min-height: min(51rem, calc(100svh - 5rem)); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
  .hero-media, .hero-shade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
  .hero-media { object-fit: cover; object-position: center; }
  .hero-shade { z-index: -1; background: linear-gradient(90deg, oklch(16% 0.045 240 / 0.94) 0%, oklch(18% 0.04 240 / 0.72) 47%, transparent 78%), linear-gradient(0deg, oklch(13% 0.03 240 / 0.5), transparent 50%); }
  .hero-content { width: var(--page); margin-inline: auto; padding-block: var(--space-xl) var(--space-l); color: var(--white); }
  .hero-content h1 { max-width: 13ch; color: var(--white); }
  .hero-content > p:not(.eyebrow) { max-width: 38rem; margin-block-start: var(--space-m); font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); }
  .eyebrow { color: var(--cyan-dark); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; margin-block-end: var(--space-s); }
  .hero .eyebrow { color: oklch(82% 0.12 218); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-m); }
  .button { min-height: 3.2rem; display: inline-flex; justify-content: center; align-items: center; padding: 0.7rem 1.25rem; border: 0.1rem solid transparent; border-radius: 100vmax; text-decoration: none; font-weight: 850; transition: transform 180ms ease, background-color 180ms ease; }
  .button:hover { transform: translateY(-0.15rem); }
  .button-primary { background: var(--cyan); color: var(--navy); }
  .button-primary:hover { background: oklch(74% 0.14 218); }
  .button-secondary { border-color: oklch(100% 0 0 / 0.55); background: oklch(100% 0 0 / 0.08); color: var(--white); }
  .hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-l); padding: var(--space-m) 0 0; margin-block-start: var(--space-l); border-block-start: 1px solid oklch(100% 0 0 / 0.3); list-style: none; }
  .hero-facts li { display: grid; align-content: start; }
  .hero-facts .hero-fact-label { display: flex; align-items: center; gap: 0.45rem; color: var(--white); }
  .hero-facts svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .hero-facts strong { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .hero-facts span { color: oklch(93% 0.01 220); }

  .trust { position: relative; isolation: isolate; padding-block: var(--space-xl); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-l); align-items: center; }
  .trust-links { display: grid; gap: var(--space-s); }
  .trust-card { min-height: 6rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-s); padding: var(--space-m); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); text-decoration: none; box-shadow: 0 0.5rem 1.5rem oklch(20% 0.04 235 / 0.06); transition: transform 180ms ease, border-color 180ms ease; }
  .trust-card:hover { transform: translateY(-0.2rem); border-color: var(--cyan); }
  .trust-card strong, .trust-card small { display: block; }
  .trust-card small { color: var(--muted); }
  .trust-logo { width: 4.5rem; height: 3rem; object-fit: contain; }

  .menu-section { padding-block: var(--space-xl); background: var(--navy); color: var(--white); }
  .menu-heading h2 { color: var(--white); }
  .menu-heading > p:last-child { color: oklch(82% 0.025 225); }
  .menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); margin-block-start: var(--space-l); }
  .menu-card { padding: var(--space-m); background: var(--white); color: var(--ink); border-radius: var(--radius-m); container-type: inline-size; }
  .menu-card header { display: flex; align-items: center; gap: 0.75rem; padding-block-end: var(--space-s); margin-block-end: var(--space-xs); border-block-end: 0.15rem solid var(--cyan); }
  .menu-card header > span { font-size: 1.5rem; }
  .menu-card ul { padding: 0; list-style: none; }
  .menu-card li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding-block: 0.55rem; border-block-end: 1px dashed var(--line); line-height: 1.35; }
  .menu-card data { color: var(--cyan-dark); font-weight: 850; white-space: nowrap; }
  .menu-note { margin-block-start: var(--space-s); color: var(--muted); font-size: 0.8rem; font-weight: 700; }
  .featured { background: var(--cyan); }
  .featured .menu-note, .featured data { color: var(--navy); }
  .featured header { border-color: var(--navy); }
  .accent-card { background: oklch(96% 0.035 218); }
  .honey-card { background: oklch(96% 0.06 85); }
  .honey-card header { border-color: var(--honey); }
  .honey-card data { color: oklch(47% 0.12 68); }
  .price-disclaimer { max-width: 56rem; margin-block-start: var(--space-l); color: oklch(76% 0.025 225); font-size: 0.82rem; }

  .location { position: relative; isolation: isolate; padding-block: var(--space-xl); display: grid; grid-template-columns: 0.78fr 1.22fr; gap: var(--space-l); align-items: stretch; }
  .trust::before, .location::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 50%; width: 100vw; transform: translateX(-50%); background: var(--paper) url("images/honeycomb-pattern.svg") repeat center / 37.5rem auto; }
  .location-copy address { margin-block: var(--space-m); font-size: 1.05rem; }
  .location-copy address a { color: var(--cyan-dark); font-weight: 800; }
  .hours { margin-block-end: var(--space-m); }
  .hours div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.55rem; border-block-end: 1px solid var(--line); }
  .hours dd { font-weight: 850; }
  .map { width: 100%; min-height: 31rem; border: 0; border-radius: var(--radius-l); box-shadow: var(--shadow); }

  .site-footer { display: grid; justify-items: center; gap: var(--space-s); padding: var(--space-l) 1rem; background: oklch(16% 0.04 240); color: var(--white); text-align: center; }
  .site-footer img { width: 6rem; height: 6rem; object-fit: contain; border-radius: 50%; }
  .site-footer nav { display: flex; gap: var(--space-m); }
  .site-footer a { min-height: 2.75rem; display: grid; place-items: center; color: oklch(82% 0.12 218); font-weight: 800; }
  .site-footer small { color: oklch(72% 0.02 220); }

  @media (width < 56em) {
    .site-header { flex-wrap: wrap; gap: 0; padding-block: 0.4rem; }
    .brand img { width: 3.5rem; height: 3.5rem; }
    .site-nav { order: 3; width: 100%; border-block-start: 1px solid var(--line); }
    .header-call { margin-inline-start: auto; }
    .hero { min-height: 44rem; }
    .hero-shade { background: linear-gradient(0deg, oklch(14% 0.04 240 / 0.96) 0%, oklch(16% 0.04 240 / 0.58) 75%, transparent 100%); }
    .trust, .location { grid-template-columns: 1fr; }
    .map { min-height: 24rem; }
  }

  @media (width < 43em) {
    html { scroll-padding-block-start: 8rem; }
    .site-header { padding-block-start: 0.65rem; }
    .header-call-label { display: none; }
    .header-call-number { font-size: 0.9rem; }
    .site-nav { justify-content: space-around; margin-block-start: 0.55rem; }
    .hero-media { transform: scale(1.16); transform-origin: 52% 64%; }
    .hero-content { padding-block-end: var(--space-m); }
    .hero .eyebrow { font-size: 0.68rem; letter-spacing: 0.1em; }
    .hero-content h1 { max-width: none; line-height: 1.05; }
    .hero-content > p:not(.eyebrow) { font-size: clamp(0.95rem, 3.8vw, 1.05rem); line-height: 1.5; }
    .hero-facts { gap: var(--space-s); }
    .hero-facts li { flex: 1 1 8rem; }
    .menu-grid { grid-template-columns: 1fr; }
    .button { width: 100%; }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms; }
  }
  @media (forced-colors: active) {
    .hero-shade { background: Canvas; opacity: 0.8; }
    .button, .trust-card, .menu-card { border: 1px solid CanvasText; }
  }
}