/* Base: reset, typography, focus, utilities. Colours and sizes come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); scroll-padding-bottom: var(--sx-bottom-safe, 0px); }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; padding-bottom: var(--sx-bottom-safe, 0px); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--font-display); font-weight: var(--fw-heading); line-height: var(--lh-heading); color: var(--c-ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p, ul, ol, dl, blockquote, figure, address { margin: 0 0 1em; }
address { font-style: normal; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; margin: 0; }
a { color: var(--c-brand); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--c-brand-strong); text-decoration-thickness: 0.14em; }
strong, b { font-weight: var(--fw-strong); }
small { font-size: var(--fs-small); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--space-6) 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; padding: 0.6em 0.8em; border-bottom: 1px solid var(--c-line); vertical-align: top; }
[hidden] { display: none !important; }

/* Focus: one visible indicator everywhere, readable on light and dark grounds. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 2px; box-shadow: 0 0 0 6px var(--c-bg); }
.sx-footer :focus-visible, .sx-section--cta :focus-visible, .sx-on-dark :focus-visible, .sx-section--page-header.has-image :focus-visible { outline-color: var(--c-focus-on-dark); box-shadow: 0 0 0 6px var(--c-dark); }
main:focus-visible { outline: none; box-shadow: none; }

/* Utilities */
.sx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sx-skip { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 1000; padding: 0.75rem 1.25rem; background: var(--c-ink); color: var(--c-bg); border-radius: var(--radius-s); font-weight: var(--fw-strong); }
.sx-skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sx-skip:focus { color: var(--c-bg); }
.sx-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sx-container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.sx-center { text-align: center; }
.sx-lead { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 40em; }
.sx-eyebrow { margin: 0 0 0.75rem; font-size: var(--fs-eyebrow); font-weight: var(--fw-strong); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-brand); }
.sx-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }

/* Rich text written in the backend */
.sx-prose { max-width: 46rem; }
.sx-prose > :last-child { margin-bottom: 0; }
.sx-prose h2 { font-size: var(--fs-h3); margin-top: 2em; }
.sx-prose h3 { font-size: var(--fs-h4); margin-top: 1.6em; }
.sx-prose ul, .sx-prose ol { padding-inline-start: 1.4em; }
.sx-prose li { margin-bottom: 0.4em; }
.sx-prose blockquote { margin-inline: 0; padding-inline-start: 1.25rem; border-inline-start: 3px solid var(--c-brand); color: var(--c-ink-soft); }
.sx-prose img { border-radius: var(--radius-m); }
.sx-prose--legal { font-size: var(--fs-body); }

/* Buttons */
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.875rem; padding: 0.7rem 1.35rem; border: 2px solid transparent; border-radius: var(--radius-pill); font-weight: var(--fw-strong); font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.sx-btn:active { transform: translateY(1px); }
.sx-btn--lg { min-height: 3.25rem; padding: 0.85rem 1.75rem; font-size: 1.0625rem; }
.sx-btn--block { display: flex; width: 100%; }
.sx-btn--primary, .sx-btn:not([class*="sx-btn--"]) { background: var(--c-brand); color: var(--c-on-brand); }
.sx-btn--primary:hover, .sx-btn:not([class*="sx-btn--"]):hover { background: var(--c-brand-strong); color: var(--c-on-brand); }
.sx-btn--ghost { background: transparent; color: var(--c-brand); border-color: var(--c-brand); }
.sx-btn--ghost:hover { background: var(--c-brand); color: var(--c-on-brand); }
.sx-btn--invert { background: var(--c-on-dark); color: var(--c-dark); }
.sx-btn--invert:hover { background: var(--c-bg); color: var(--c-dark); }
.sx-btn--outline-invert { background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark); }
.sx-btn--outline-invert:hover { background: var(--c-on-dark); color: var(--c-dark); }
.sx-btn[disabled], .sx-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.sx-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.sx-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.sx-actions--center { justify-content: center; }
.sx-more { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: var(--fw-strong); }

/* Forms (shared by the contact form and the booking widget) */
.sx-form { display: grid; gap: var(--space-4); }
.sx-form__row { display: grid; gap: var(--space-4); }
.sx-field { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.sx-field > label, .sx-field > legend { font-weight: var(--fw-strong); font-size: var(--fs-small); padding: 0; }
.sx-field__req { color: var(--c-danger); }
.sx-field__hint { margin: 0; font-size: var(--fs-small); color: var(--c-ink-soft); }
.sx-input, .sx-field input[type="text"], .sx-field input[type="email"], .sx-field input[type="tel"], .sx-field input[type="url"], .sx-field input[type="number"], .sx-field input[type="date"], .sx-field select, .sx-field textarea { width: 100%; min-height: 2.875rem; padding: 0.65rem 0.85rem; background: var(--c-bg); color: var(--c-ink); border: 1.5px solid var(--c-ink-soft); border-radius: var(--radius-s); }
.sx-field textarea { min-height: 8rem; resize: vertical; }
.sx-field [aria-invalid="true"] { border-color: var(--c-danger); border-width: 2px; }
.sx-field__error { margin: 0; display: flex; gap: 0.35rem; align-items: flex-start; font-size: var(--fs-small); font-weight: var(--fw-strong); color: var(--c-danger); }
.sx-check { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: var(--fs-small); }
.sx-check input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--c-brand); }
.sx-check label { font-weight: var(--fw-body); }
.sx-form__note { margin: 0; font-size: var(--fs-small); color: var(--c-ink-soft); }
.sx-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sx-alert { margin: 0; padding: 0.9rem 1.1rem; border-radius: var(--radius-s); border: 1.5px solid currentColor; font-weight: var(--fw-strong); }
.sx-alert--ok { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 8%, var(--c-bg)); }
.sx-alert--error { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 6%, var(--c-bg)); }
.sx-alert ul { margin: 0.4rem 0 0; padding-inline-start: 1.2rem; font-weight: var(--fw-body); list-style: disc; }
.sx-alert a { color: inherit; }
@media (min-width: 640px) { .sx-form__row--2 { grid-template-columns: 1fr 1fr; } }

/* Placeholders: unmistakably not final content */
.sx-ph { display: grid; place-items: center; width: 100%; min-height: 6rem; background: repeating-linear-gradient(135deg, var(--c-surface) 0 14px, var(--c-surface-alt) 14px 28px); border: 2px dashed var(--c-ink-soft); border-radius: var(--radius-m); color: var(--c-ink); text-align: center; }
.sx-ph__text { display: grid; gap: 0.15rem; padding: 0.6rem 0.9rem; background: var(--c-bg); border-radius: var(--radius-s); font-size: var(--fs-small); font-weight: var(--fw-strong); max-width: 90%; }
.sx-ph__text small { font-weight: var(--fw-body); color: var(--c-ink-soft); }
.sx-adminnote { padding: 0.75rem 1rem; background: #fff8e1; color: #3d2f00; border: 1px solid #8a6d00; border-radius: var(--radius-s); font-size: var(--fs-small); }

/* Click-to-load embeds and video */
.sx-embed { position: relative; display: grid; place-items: center; width: 100%; background: var(--c-dark); color: var(--c-on-dark); border-radius: var(--radius-m); overflow: hidden; }
.sx-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.sx-embed__ui { position: relative; display: grid; gap: 0.6rem; justify-items: center; padding: var(--space-5); text-align: center; }
.sx-embed__note { margin: 0; font-size: var(--fs-small); color: var(--c-on-dark-soft); max-width: 30em; }
.sx-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sx-embed .sx-btn { background: var(--c-on-dark); color: var(--c-dark); }
.sx-embed :focus-visible { outline-color: var(--c-focus-on-dark); box-shadow: 0 0 0 6px var(--c-dark); }
.sx-video { width: 100%; border-radius: var(--radius-m); background: #000; }
.sx-transcript { margin-top: var(--space-3); }
.sx-transcript summary { cursor: pointer; font-weight: var(--fw-strong); padding: 0.4rem 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media print {
  .sx-header, .sx-footer, .sx-drawer, .sx-skip, .sx-actions { display: none !important; }
  body { color: #000; background: #fff; }
}