/* The design system. The Design screen edits the tokens in this first block. */
:root {
  --color-background: #ffffff;
  --color-surface: #f5f6f8;
  --color-text: #16181d;
  --color-muted: #555b66;
  --color-primary: #2f5bea;
  --color-on-primary: #ffffff;
  --color-accent: #e8a33d;
  --color-border: #dfe2e8;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --text-xs: 0.68rem;
  --text-sm: 0.85rem;
  --text-base: 1.063rem;
  --text-lg: 1.328rem;
  --text-xl: 1.66rem;
  --text-2xl: 2.075rem;
  --text-3xl: 2.594rem;
  --text-4xl: 3.242rem;
  --text-5xl: 4.053rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
  --measure: 65ch;
  --width-narrow: 42rem;
  --width-wide: 72rem;
  --screen: 100svh;
  --duration: 180ms;
}

/* Built from the tokens above. */
:root {
  --text-display: clamp(var(--text-4xl), 7.5vw, 6.485rem);
  --section-tight: clamp(var(--space-5), 6vw, var(--space-7));
  --section: clamp(var(--space-7), 8vw, var(--space-9));
  --section-loose: clamp(var(--space-8), 11vw, calc(var(--space-9) * 1.5));
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li { overflow-wrap: break-word; }
/* Headings never split a word at a random letter (seen: "RESTAURANT / S"): they hyphenate by the
   page language; a word that still does not fit is caught by the rendered checks. */
h1, h2, h3, h4, .display { overflow-wrap: normal; hyphens: auto; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; color: var(--color-text); text-wrap: balance; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
a { color: var(--color-primary); text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (min-width: 1024px) { h1 { font-size: var(--text-5xl); } }

/* Gutters by padding, not width: a section that sets its container's width cannot remove them. */
.container { width: 100%; max-width: calc(var(--width-wide) + 2 * var(--space-4)); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--section); }

.bg-base { background: var(--color-background); }
.bg-surface { background: var(--color-surface); }
.bg-inverse { --color-background: #16181d; --color-surface: #2d2f34; --color-text: #ffffff; --color-muted: #c7c8c9; --color-border: #505256; background: var(--color-background); color: var(--color-text); }
.bg-primary { --color-background: #2f5bea; --color-surface: #486fed; --color-text: #ffffff; --color-muted: #e6ebfc; --color-border: #6d8cf0; --color-primary: #ffffff; --color-on-primary: #2f5bea; background: var(--color-background); color: var(--color-text); }

.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 2.75rem; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform var(--duration) ease, opacity var(--duration) ease; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border: 2px solid var(--color-primary); }
.btn-secondary { background: transparent; color: var(--color-text); border: 2px solid var(--color-border); }
.btn-primary:hover, .btn-secondary:hover { opacity: 0.88; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.eyebrow { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.display { font-family: var(--font-heading); font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.02em; }
.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--color-muted); max-width: var(--measure); }
.media-cover { width: 100%; height: 100%; object-fit: cover; }

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