/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 */
/* Hallmark · macrostructure: Price board · nav: N2 (2 destinations + action) · footer: Ft1 · tone: direct, unhurried · theme: custom "Kruin" · anchor hue: 340 */
@font-face { font-family: "Bricolage Grotesque"; src: url("../../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../../fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
:root {
  --color-paper: oklch(22% 0.035 340);
  --color-paper-2: oklch(28% 0.045 340);
  --color-light: oklch(94% 0.02 75);
  --color-ink: oklch(94% 0.02 75);
  --color-ink-2: oklch(80% 0.03 350);
  --color-dark: oklch(22% 0.035 340);
  --color-dark-2: oklch(40% 0.04 340);
  --color-accent: oklch(80% 0.13 65);
  --color-accent-deep: oklch(48% 0.13 25);
  --color-rule: oklch(42% 0.05 340);
  --color-rule-light: oklch(80% 0.03 75);
  --color-demo: oklch(88% 0.13 92);
  --color-demo-ink: oklch(21% 0.02 264);
  --font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-h3: 0.875rem;
  --text-price: 1.25rem;
  --text-h2: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --text-display: clamp(2.5rem, 0.9rem + 7.4vw, 6.75rem);
  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius-1: 999px;
  --radius-2: 4px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 160ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--text-base)/1.6 var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; margin: 0; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; max-width: 12em; }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--space-8); }
h3 { font: 600 var(--text-h3)/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); }
p { margin: 0 0 var(--space-4); max-width: 32em; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.demo-bar { margin: 0; max-width: none; background: var(--color-demo); color: var(--color-demo-ink); font-size: var(--text-sm); padding: var(--space-2) var(--gutter); text-align: center; }
.demo-bar a { color: var(--color-demo-ink); white-space: nowrap; }
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-6) var(--gutter); }
.name { font: 800 1.6rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); text-decoration: none; }
.top nav { display: flex; align-items: center; gap: var(--space-6); }
.top nav a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.top nav a:hover { color: var(--color-ink); }
.cta, .top nav .cta, button { display: inline-block; font: 600 var(--text-sm)/1.2 var(--font-body); background: var(--color-accent); color: var(--color-dark); border: 0; border-radius: var(--radius-1); padding: 0.7em 1.3em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.cta:hover, .top nav .cta:hover, button:hover { background: var(--color-light); color: var(--color-dark); }
.cta:active, button:active { transform: translateY(1px); }
.cta.big, button { font-size: var(--text-base); padding: 0.9em 1.7em; }
.hero { padding: clamp(2rem, 7vw, 6rem) var(--gutter) var(--space-section); }
.kicker { font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-6); max-width: none; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 30rem) auto; justify-content: space-between; align-items: end; gap: var(--space-6) var(--space-12); margin-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--color-rule); padding-top: var(--space-6); }
.hero-foot p { margin: 0; color: var(--color-ink-2); }
.board { background: var(--color-light); color: var(--color-dark); padding: var(--space-section) var(--gutter); }
.board h3 { color: var(--color-accent-deep); }
.board :focus-visible { outline-color: var(--color-accent-deep); }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); border-top: 1px solid var(--color-rule-light); padding: var(--space-3) 0; }
dt { min-width: 0; }
dd { margin: 0; font: 700 var(--text-price)/1.2 var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.note { margin: var(--space-12) 0 0; color: var(--color-dark-2); font-size: var(--text-sm); }
.hours { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8) var(--space-12); padding: var(--space-section) var(--gutter); }
.hours h2 { margin: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; font-weight: 400; padding: var(--space-3) 0; border-top: 1px solid var(--color-rule); vertical-align: baseline; }
td { text-align: right; white-space: nowrap; padding-left: var(--space-4); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.where p { color: var(--color-ink-2); font-size: var(--text-sm); }
.book { background: var(--color-paper-2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-12); padding: var(--space-section) var(--gutter); }
.book p { color: var(--color-ink-2); }
.addr { overflow-wrap: anywhere; }
form { display: grid; gap: var(--space-4); }
label { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; min-width: 0; }
input, select { font: inherit; font-weight: 400; background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-2); padding: 0.7em 0.8em; width: 100%; min-width: 0; }
input:hover, select:hover { border-color: var(--color-ink-2); }
button { justify-self: start; }
.status { background: var(--color-demo); color: var(--color-demo-ink) !important; padding: var(--space-4); margin: 0; font-size: var(--text-sm); border-radius: var(--radius-2); }
.end { padding: var(--space-8) var(--gutter); font-size: var(--text-sm); color: var(--color-ink-2); }
.end p { margin: 0; max-width: none; }
[hidden] { display: none !important; }
@media (max-width: 59.99rem) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hours h2 { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .cols, .hours, .book, .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .hero-foot { justify-items: start; }
  .top nav { gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 1ms !important; } }