@layer nordic-base, nordic-authored, nordic-custom;
@layer nordic-base {/* Palette and fonts: Visual Identity 2, pp. 15–18.
   Text: 16px minimum. Known smaller text, kept for now: the user-requested
   14px safety notice, the map panel and its markers, the booking calendar in
   containers up to 420px, the assistant's labels, and 14px helper text in the
   booking summary, waitlist, personal booking and account pages. */
:root {
  --primary: #776b62;
  --cream: #f7f3ef;
  --paper: #fcfaf7;
  --input-surface: #fff;
  --sand: #e9e0d8;
  --beige: #ccb8aa;
  --ink: #49423d;
  /* Muted text on sand: primary is 3.97:1 there, this darker taupe 4.96:1. */
  --primary-on-sand: #685c54;
  /* Selected S01 / I01: neutral ink, with interaction conveyed by the line. */
  --link-light: var(--ink);
  --link-light-hover: var(--ink);
  --link-light-active: var(--ink);
  --link-light-visited: var(--ink);
  /* Keep the same approved cream in every state on taupe (guide p. 15). */
  --link-inverse: var(--cream);
  --link-inverse-hover: var(--cream);
  --link-inverse-active: var(--cream);
  --link-inverse-visited: var(--cream);
  --line: rgb(119 107 98 / 23%);
  --glass-light: rgb(252 250 247 / 78%);
  --glass-taupe-rgb: 73 66 61;
  --glass-taupe: rgb(var(--glass-taupe-rgb) / 64%);
  --glass-taupe-chat: rgb(var(--glass-taupe-rgb) / 78%);
  --assistant-available: #32b96b;
  --input-border: var(--line);
  --input-focus: var(--ink);
  --input-error: #a13932;
  --input-error-focus: #6d211c;
  /* Error messages: at least 5.7:1 on white, paper and sand. */
  --error-text: #96332d;
  --font-heading: 'Almarai', sans-serif;
  --font-body: 'Inter Display', sans-serif;
  --type-display: clamp(52px, 6vw, 88px);
  --type-heading: clamp(34px, 3.6vw, 52px);
  --type-subheading: clamp(22px, 2.2vw, 30px);
  --type-body: 16px;
  --type-small: 16px;
  --heading-tracking: -0.025em;
  --button-height: 46.4px;
  --button-radius: 10px;
  --checkbox-radius: 4px;
  --button-font-size: 16px;
  --button-line-height: 1.4;
  --button-padding-block: 12px;
  --button-padding-inline: 24px;
  --gutter: clamp(24px, 5vw, 88px);
  --max: 1152px;
  /* Extended background images keep their photographic composition while
     the foreground content follows the smaller shared page measure. */
  --media-max: 1320px;
  --header: 64px;
  --notice-height: 36px;
  --mobile-menu-duration: 700ms;
  --mobile-menu-ease: cubic-bezier(0.15, 0.2, 0.1, 1);
  --floating-nav-gap: clamp(16px, 2vw, 28px);
  /* Room kept free for the fixed chat launcher (bottom right), so the footer's
     last row, the mobile pop-up badge and scroll targets stay uncovered. */
  --dock-clearance: calc(
    76px + 2 * clamp(16px, 2vw, 28px) + env(safe-area-inset-bottom)
  );
  --section-space: clamp(64px, 7.2vw, 112px);
}
/* Native underline thickness snaps to pixel boundaries in some engines.
   Fade in its extra lower edge instead; keep the native 1px line throughout. */
@property --nsb-inline-underline-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* Surface tokens inherit through sections and can reset inside nested cards. */
:root,
[data-link-surface='light'] {
  --link-color: var(--link-light);
  --link-hover: var(--link-light-hover);
  --link-active: var(--link-light-active);
  --link-visited: var(--link-light-visited);
}
[data-link-surface='inverse'],
[data-nav-theme='dark']:not([data-link-surface]) {
  --link-color: var(--link-inverse);
  --link-hover: var(--link-inverse-hover);
  --link-active: var(--link-inverse-active);
  --link-visited: var(--link-inverse-visited);
}
[data-link-surface='sand'] {
  --link-color: var(--ink);
  --link-hover: var(--ink);
  --link-active: var(--ink);
  --link-visited: var(--ink);
}

/* Shared motion is independent of content styling. Navigation, breadcrumbs,
   footer lists and utility controls keep their own typography and color. */
.link-effect {
  color: inherit;
}

/* Plain links inside future prose also get I01. Buttons and other composed
   link surfaces keep their explicit component styles. */
.text-link,
.inline-link,
:where(.prose a[href], p a[href]):not([class]) {
  color: var(--link-color);
}
.link--visited:visited {
  color: var(--link-visited);
}

/* Native decoration wraps with each line and never creates an icon. */
:where(.inline-link, .prose a[href]:not([class]), p a[href]:not([class])):not(
  .button,
  .text-link,
  .link-effect
) {
  --nsb-inline-underline-opacity: 0;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  border-radius: 1px;
  /* Inter's native underline ends at the inline box edge with a 3px offset.
     Vertical inline padding extends only the paint box, not the text layout. */
  padding-bottom: 0.5px;
  background-image: linear-gradient(
    color-mix(
      in srgb,
      currentColor calc(var(--nsb-inline-underline-opacity) * 100%),
      transparent
    ),
    color-mix(
      in srgb,
      currentColor calc(var(--nsb-inline-underline-opacity) * 100%),
      transparent
    )
  );
  background-size: 100% 0.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: --nsb-inline-underline-opacity 180ms ease;
}
:where(
  .link-effect,
  .inline-link,
  .prose a[href]:not([class]),
  p a[href]:not([class])
):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
:where(
  .text-link,
  .inline-link,
  .prose a[href]:not([class]),
  p a[href]:not([class])
):focus-visible {
  outline-offset: 5px;
}
:where(.inline-link, .prose a[href]:not([class]), p a[href]:not([class])):not(
    .button,
    .text-link,
    .link-effect
  ):is(:focus-visible, :active) {
  --nsb-inline-underline-opacity: 1;
}

/* S01 only sizes standalone content links, never the shared navigation label. */
.text-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 42px;
  padding-block: 9px;
  font: 400 var(--type-body)/1.5 var(--font-body);
}
.text-link .link-label {
  line-height: inherit;
}
.text-link .link-label--with-icon {
  gap: 0.5em;
}
.text-link .link-label__text {
  text-wrap: pretty;
}
.text-link .link-label__icon {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1.5;
  transform: none;
}

/* Keep the standalone underline close to the label, separate from the hit area. */
.link-label {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  vertical-align: baseline;
  line-height: inherit;
}
.link-label--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
.link-label__text {
  min-width: 0;
}
.link-label__icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke-width: 1.5;
  /* Optically align the arrow with Inter's capitals, rather than the line box. */
  transform: translateY(-0.5px);
}
.link-label::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.link-effect:is(
    [aria-current],
    [data-current],
    [data-active-branch],
    [aria-expanded='true'],
    :focus-visible,
    :active
  )
  .link-label::before {
  transform: scaleX(1);
}

/* A navigation label can wrap inside a flex item. Paint each inline fragment
   instead of stretching one positioned line across the label's bounding box. */
.site-header .link-label::before {
  content: none;
}
.site-header .link-label__content {
  display: inline;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header .link-effect:is(
    [aria-current],
    [data-current],
    [data-active-branch],
    [aria-expanded='true'],
    :focus-visible,
    :active
  ) .link-label__content,
.site-header .nav-item:has(> [aria-expanded='true']) > a .link-label__content {
  background-size: 100% 1px;
}
.site-header .link-effect:focus-visible .link-label__content {
  transition: none;
}
@media (hover: hover) and (pointer: fine) {
  :where(
      .text-link,
      .inline-link,
      .prose a[href]:not([class]),
      p a[href]:not([class])
    ):not(:disabled, .link-effect--label):hover {
    color: var(--link-hover);
  }
  :where(.inline-link, .prose a[href]:not([class]), p a[href]:not([class])):not(
      .button,
      .text-link,
      .link-effect
    ):hover {
    --nsb-inline-underline-opacity: 1;
  }
  .link-effect:not(:disabled):hover .link-label::before {
    transform: scaleX(1);
  }
  .site-header .link-effect:not(:disabled):hover .link-label__content {
    background-size: 100% 1px;
  }
}
:where(
    .text-link,
    .inline-link,
    .prose a[href]:not([class]),
    p a[href]:not([class])
  ):not(:disabled, .link-effect--label):active {
  color: var(--link-active);
}
/* A linked editorial tile keeps its own color; the CTA uses its local surface. */
.link-effect--label {
  color: inherit;
}
.link-effect--label .link-label {
  color: var(--link-color);
}
@media (hover: hover) and (pointer: fine) {
  .link-effect--label:hover .link-label {
    color: var(--link-hover);
  }
}
.link-effect--label:active .link-label {
  color: var(--link-active);
}
@media (prefers-reduced-motion: reduce) {
  .site-header .link-label__content,
  .link-label::before,
  .link-effect,
  .inline-link,
  :where(.prose a[href], p a[href]):not([class]),
  .link-effect--label .link-label {
    transition: none;
  }
}
@media (forced-colors: active) {
  .site-header .link-label__content {
    background-image: none;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .link-effect,
  .inline-link,
  :where(.prose a[href], p a[href]):not([class]),
  .link-effect--label .link-label {
    color: LinkText;
  }
  .link--visited:visited {
    color: VisitedText;
  }
}
@font-face {
  font-family: Almarai;
  src: url('/fonts/Almarai-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('/fonts/InterDisplay-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('/fonts/InterDisplay-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 24px);
  scroll-padding-bottom: var(--dock-clearance);
}
body {
  margin: 0;
}
html.has-mobile-menu {
  overflow: hidden;
}
.has-overlay-header > main {
  margin-top: calc(-1 * (var(--header) + var(--notice-height)));
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button {
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
picture,
svg {
  display: block;
}
img {
  max-width: 100%;
  height: auto;
}
p,
h1,
h2,
h3,
h4,
figure {
  margin: 0;
}
h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: var(--heading-tracking);
  text-wrap: balance;
}
h1 {
  font-size: var(--type-display);
}
h2 {
  font-size: var(--type-heading);
}
h3,
h4 {
  font: 400 var(--type-subheading)/1.3 var(--font-body);
  letter-spacing: -0.015em;
}
p {
  line-height: 1.65;
  text-wrap: pretty;
}
strong,
b {
  font-weight: 400;
}
address {
  font-style: normal;
  line-height: 1.65;
}
::selection {
  background: var(--beige);
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
[hidden] {
  display: none !important;
}
.container {
  width: min(calc(100% - var(--gutter) * 2), var(--max));
  margin-inline: auto;
}
.section {
  padding-block: var(--section-space);
}
.eyebrow {
  display: block;
  font: 400 var(--type-small)/1.5 var(--font-body);
  letter-spacing: 0;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: 20px;
  top: 12px;
  transform: translateY(-160%);
  padding: 14px;
  background: var(--paper);
  z-index: 200;
}
.skip-link:focus {
  transform: none;
}
/* Shared photographic treatment: deep taupe builds gradually beneath text. */
.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
.hero-veil,
.photo-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-veil {
  background: linear-gradient(
    180deg,
    transparent 10%,
    rgb(73 66 61 / 8%) 26%,
    rgb(73 66 61 / 60%) 62%,
    rgb(73 66 61 / 91%) 100%
  );
}
.hero-veil::before,
.photo-veil::before {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  backdrop-filter: blur(6px);
  mask-image: linear-gradient(transparent, #000);
}
.photo-veil {
  background: linear-gradient(
    180deg,
    transparent 32%,
    rgb(73 66 61 / 8%) 43%,
    rgb(73 66 61 / 80%) 76%,
    rgb(73 66 61 / 96%) 100%
  );
}
@media (max-width: 800px) {
  :root {
    --gutter: 28px;
  }
}
@media (max-width: 600px) {
  :root {
    --notice-height: 32px;
    --gutter: 22px;
  }
}
@media (max-width: 370px) {
  :root {
    --gutter: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
}
@layer nordic-base, nordic-authored, nordic-custom;
@layer nordic-base {/* One shared text-entry contract. Component styles own geometry; this module
   owns the reserved border and all focus/error states, including lazy widgets.
   Only text-entry controls lose their browser outline. Buttons, links and
   checkbox/radio controls retain their own visible keyboard focus. */
html body :is(input:not([type='hidden'], [type='checkbox'], [type='radio'], [type='range'], [type='submit'], [type='button'], [type='reset'], [type='color'], [type='file']), textarea, select:not(.phone-input__country)) {
  background-color: var(--input-surface) !important;
  opacity: 1;
  outline: none;
  box-shadow: none;
  border-color: var(--input-border);
}
html body :is(input:not([type='hidden'], [type='checkbox'], [type='radio'], [type='range'], [type='submit'], [type='button'], [type='reset'], [type='color'], [type='file']), textarea, select:not(.phone-input__country)):focus {
  outline: none;
  box-shadow: none;
  border-color: var(--input-focus);
}
html body :is(input, textarea, select):not([data-otp-slot])[aria-invalid='true'] { border-color: var(--input-error); }
html body :is(input, textarea, select):not([data-otp-slot])[aria-invalid='true']:focus { border-color: var(--input-error-focus); }
/* Shared class for composed controls. There is one boundary around the whole
   telephone/search/composer/OTP surface, rather than a second input outline. */
html body .input-surface { --input-border: var(--line); border-color: var(--input-border); }
html body .input-surface:has([aria-invalid='true']) { border-color: var(--input-error); }
html body .input-surface:focus-within { outline: none; box-shadow: none; border-color: var(--input-focus); }
html body .input-surface:has([aria-invalid='true']):focus-within { border-color: var(--input-error-focus); }
html body .input-surface :is(input, textarea, select):not([type='checkbox'], [type='radio']) {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
/* The current OTP position remains visible inside its existing single group. */
html body .input-surface [data-otp-slot]:focus { border-bottom-color: var(--input-focus); }
html body .input-surface [data-otp-slot][aria-invalid='true']:focus { border-bottom-color: var(--input-error-focus); }
html body .phone-input__tools { border: 1px solid transparent; box-sizing: border-box; }
html body .phone-input__tools:has(select:focus-visible) { border-color: var(--input-focus); background: var(--cream); outline: none; box-shadow: none; }
html body .phone-input__country { background: transparent !important; opacity: 0; outline: none; box-shadow: none; }
html body :is(input, textarea, select):disabled { cursor: not-allowed; color: var(--primary); }
html body :is(input:not([type='hidden'], [type='checkbox'], [type='radio'], [type='range'], [type='submit'], [type='button'], [type='reset'], [type='color'], [type='file']), textarea, select:not(.phone-input__country)):disabled { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  html body :is(input, textarea, select, .input-surface) { transition: none; }
}
/* Autofill's inset is solely the surface fill. Focus always uses the real
   border, so autofill does not add an independent ring or obscure errors. */
html body :is(input, textarea, select):autofill {
  box-shadow: inset 0 0 0 1000px var(--input-surface) !important;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
html body :is(input, textarea, select):-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px var(--input-surface) !important;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
@media (forced-colors: active) {
  html body { --input-border: CanvasText; --input-focus: Highlight; --input-error: LinkText; --input-error-focus: Highlight; }
  html body .input-surface { --input-border: CanvasText; }
  html body :is(input, textarea, select) { background-color: Canvas !important; color: CanvasText; }
  html body :is(input, textarea, select):autofill { box-shadow: none !important; -webkit-text-fill-color: CanvasText; }
  html body :is(input, textarea, select):-webkit-autofill { -webkit-box-shadow: none !important; -webkit-text-fill-color: CanvasText; }
  html body .phone-input__tools:has(select:focus-visible) { border-color: Highlight; background: Canvas; }
}
}