/* Sardal website: tokens from the Sardal · Leclef design system, plus site layout.
   Logical properties throughout so the layout mirrors under dir="rtl". */

@font-face { font-family: "Neutra Text"; src: url("../fonts/NeutraText-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Neutra Text"; src: url("../fonts/NeutraText-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neutra Text"; src: url("../fonts/NeutraText-Alt.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Neutra Text"; src: url("../fonts/NeutraText-Bold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --pearl-ivory: #f1ede4;
  --stone-grey: #93897a;
  --sand-dune: #c9a46c;
  --mystic-purple: #4b3b5c;
  --basalt-ink: #1c1815;

  --font-display: "Neutra Text", "Jost", "Century Gothic", sans-serif;
  --font-ui: "Neutra Text", "Jost", "Century Gothic", sans-serif;
  --font-body: "Graphik", "Karla", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  --radius-none: 0; --radius-sm: 4px; --radius-lg: 24px; --radius-xl: 40px; --radius-pill: 999px;
  --shadow-float: 0 24px 48px rgba(28, 24, 21, 0.18);

  --ink-on-card: #1c1815;
  --ink-on-card-muted: #5a5248;
  --hairline-on-card: #d0cabf;
  --rule-accent: #c9a46c;
  --step-done: #c9a46c;

  --page-pad: clamp(24px, 8.9vw, 128px);
}

:root, [data-theme="pearl"] {
  --surface: #f1ede4; --surface-raised: #e9e5dc; --surface-card: #ffffff;
  --ink: #1c1815; --ink-body: #3a332c; --ink-muted: #5a5248; --ink-faint: #93897a;
  --eyebrow: #4b3b5c; --hairline: #d0cabf; --rule-brand: #4b3b5c;
  --action: #4b3b5c; --on-action: #f1ede4;
  --step-current: #4b3b5c; --on-step-current: #f1ede4;
  --focus-ring: #4b3b5c; --link: #4b3b5c; --field-border: #5a5248;
}
[data-theme="mystic"] {
  --surface: #4b3b5c; --surface-raised: #584967; --surface-card: #f1ede4;
  --ink: #f1ede4; --ink-body: #d8d2d0; --ink-muted: #bcb4b8; --ink-faint: #bcb4b8;
  --eyebrow: #c9a46c; --hairline: #70627a; --rule-brand: #f1ede4;
  --action: #c9a46c; --on-action: #1c1815;
  --step-current: #f1ede4; --on-step-current: #4b3b5c;
  --focus-ring: #c9a46c; --link: #f1ede4; --field-border: #bcb4b8;
}
[data-theme="basalt"] {
  --surface: #1c1815; --surface-raised: #292521; --surface-card: #f1ede4;
  --ink: #f1ede4; --ink-body: #cbc7bf; --ink-muted: #a09c95; --ink-faint: #93897a;
  --eyebrow: #93897a; --hairline: #423e3a; --rule-brand: #c9a46c;
  --action: #c9a46c; --on-action: #1c1815;
  --step-current: #f1ede4; --on-step-current: #1c1815;
  --focus-ring: #c9a46c; --link: #f1ede4; --field-border: #a09c95;
}
[data-theme] { background: var(--surface); color: var(--ink); }

/* Base */
.site { font-family: var(--font-body); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site img { max-width: 100%; }
.site em, .site i, .site cite { font-style: normal; }
.site :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.site ul { margin: 0; padding: 0; list-style: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--page-pad); }
.band { padding-block: var(--space-9); }
.band-top { padding-block-start: var(--space-8); }
.raised { background: var(--surface-raised); }
.divided { border-block-start: 1px solid var(--hairline); }

/* Type */
.eyebrow { margin: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.32em; text-transform: uppercase; color: var(--eyebrow); }
[data-theme="mystic"] .eyebrow { font-size: 15px; }
.h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1.1; color: var(--ink); }
.h1-hero { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.08; color: var(--ink); max-width: 17ch; }
.h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.15; color: var(--ink); }
.quote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.35; color: var(--ink); }
.quote-lg { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.2; color: var(--ink); }
.title { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--ink); }
.subtitle { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--ink); }
.lead { margin: 0; font-size: 20px; line-height: 1.55; color: var(--ink-body); }
.body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-body); }
.small { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-body); }
.spec { margin: 0; font-size: 12px; line-height: 1.5; letter-spacing: 0.04em; color: var(--ink-muted); }
.measure { max-width: 60ch; }
.numeral { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1; color: var(--ink-faint); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.text-link:hover { color: var(--ink); }

/* Stacks */
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-5 { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 900px; margin-block-end: var(--space-8); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.center { text-align: center; align-items: center; margin-inline: auto; }

/* Grids */
.grid { display: grid; column-gap: var(--space-5); row-gap: var(--space-8); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
.split-top { align-items: start; }
.split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

/* Columns with the 2px rule */
.col { display: flex; flex-direction: column; gap: var(--space-3); border-block-start: 2px solid var(--rule-accent); padding-block-start: var(--space-4); }
.col-brand { border-block-start-color: var(--rule-brand); }

/* Photography and honest placeholders */
.photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.photo-tall { aspect-ratio: 4 / 5; object-position: 50% 15%; }
.photo-wide { aspect-ratio: 16 / 10; }
.col .photo, .col .placeholder { margin-block: var(--space-2); }
.placeholder { display: flex; align-items: flex-end; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-raised); border: 1px dashed var(--stone-grey); border-radius: var(--radius-sm); padding: var(--space-4); }

/* Hero: full bleed, flat mystic scrim where the text sits */
.hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 84vh, 820px); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: rgba(75, 59, 92, 0.72); }
.hero-content { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-10) var(--space-9); }
.hero-content .lead { max-width: 46ch; }

/* Page opener (mystic) */
.opener { padding-block: var(--space-8) var(--space-9); }
.opener .sd-chapter { margin-block-end: var(--space-7); }
.running { margin-block-end: var(--space-7); }

/* Journey rooms */
.room { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; padding-block: var(--space-7); border-block-start: 1px solid var(--hairline); }
.room-flip .room-media { order: 2; }

/* Lists */
.name-list { display: flex; flex-direction: column; }
.name-list li { font-family: var(--font-display); font-size: 28px; line-height: 1.35; color: var(--ink); padding-block: var(--space-2); border-block-end: 1px solid var(--hairline); }
.partner-list li { display: flex; align-items: center; min-height: 64px; font-family: var(--font-ui); font-size: 20px; line-height: 1.3; color: var(--ink); border-block-end: 1px solid var(--hairline); }
.partner-list li:first-child { border-block-start: 1px solid var(--hairline); }

/* Quote */
.blockquote { margin: 0; padding-inline-start: var(--space-6); border-inline-start: 2px solid var(--rule-accent); display: flex; flex-direction: column; gap: var(--space-4); }
.blockquote footer { font-family: var(--font-ui); font-size: 15px; color: var(--ink-muted); }

/* Brand tiles */
.tile { background: var(--surface-raised); border-radius: var(--radius-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.tile .text-link { margin-block-start: auto; }

/* Forms */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label, .legend { font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.req { color: var(--ink-muted); }
.input { width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--font-body); font-size: 16px; line-height: 1.4; color: var(--ink-on-card); background: var(--surface-card); border: 1px solid var(--field-border); border-radius: var(--radius-sm); }
textarea.input { min-height: 160px; resize: vertical; }
select.input { appearance: auto; }
.fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.checks { display: flex; flex-wrap: wrap; column-gap: var(--space-6); }
.check { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; font-size: 15px; color: var(--ink-body); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--action); }
.form-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.form-note a { color: var(--link); }
.confirm { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.35; color: var(--ink); }

/* Header */
.site-header { position: relative; background: var(--surface); border-block-end: 1px solid var(--hairline); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 104px; }
.logo { display: inline-flex; padding-block: var(--space-4); }
.logo img { display: block; height: 64px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-ui); font-size: 15px; letter-spacing: 0.01em; color: var(--ink-body); text-decoration: none; border-block-end: 1px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--mystic-purple); }
.tools { display: flex; align-items: center; gap: var(--space-4); }
.lang { position: relative; font-family: var(--font-ui); }
.lang summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-2); cursor: pointer; list-style: none; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.lang summary::-webkit-details-marker { display: none; }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; padding: var(--space-3) var(--space-4); background: var(--surface-card); color: var(--ink-on-card); border-radius: var(--radius-sm); box-shadow: var(--shadow-float); }
.lang-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); font-size: 15px; }
.soon { color: var(--ink-on-card-muted); font-size: 12px; letter-spacing: 0.04em; }
.menu-toggle { display: none; min-height: 44px; padding-inline: var(--space-4); font-family: var(--font-ui); font-size: 15px; color: var(--ink); background: transparent; border: 1px solid var(--field-border); border-radius: var(--radius-pill); cursor: pointer; }
.mobile-menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-5); background: var(--pearl-ivory); overflow-y: auto; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { display: flex; align-items: center; min-height: 64px; font-family: var(--font-display); font-size: 32px; color: var(--ink); text-decoration: none; border-block-end: 1px solid var(--hairline); }

/* Footer */
.site-footer { padding-block: var(--space-9) var(--space-7); }
.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.footer-logos img { display: block; height: 88px; width: auto; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-block: var(--space-8); }
.footer-grid .eyebrow { margin-block-end: var(--space-4); }
.footer-links li { padding-block: 2px; }
.footer-links a, .footer-links span { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--ink-body); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-note { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-muted); margin-inline-start: var(--space-2); }
.thanks { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6); margin-block-end: var(--space-7); font-family: var(--font-display); font-size: 44px; line-height: 1.2; color: var(--sand-dune); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block-start: var(--space-5); border-block-start: 1px solid var(--hairline); font-size: 13px; color: var(--ink-muted); }
.legal p { margin: 0; }
.legal a { color: var(--ink-body); }

/* Responsive */
@media (max-width: 1080px) {
  .nav, .tools .partner, .tools .lang { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .cols-3, .cols-4, .values, .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .split, .split-5-7, .split-7-5, .split-4-8, .room { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .room-flip .room-media { order: 0; }
  .band { padding-block: var(--space-8); }
  .h1 { font-size: 40px; }
  .h2 { font-size: 30px; }
  .lead { font-size: 18px; }
}
@media (max-width: 640px) {
  .cols-2, .cols-3, .cols-4, .values, .footer-grid, .form-row { grid-template-columns: minmax(0, 1fr); }
  .bar { min-height: 72px; }
  .logo img { height: 52px; }
  .thanks { font-size: 34px; }
  .footer-logos img { height: 72px; }
}

/* Static-site additions */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
.photo, .sd-value-img { height: auto; }
.mobile-menu[hidden] { display: none; }
.skip-link { position: absolute; inset-inline-start: 16px; top: -64px; z-index: 100; padding: 12px 16px; background: var(--mystic-purple); color: var(--pearl-ivory); font-family: var(--font-ui); border-radius: var(--radius-sm); }
.skip-link:focus { top: 16px; }
.sd-steps::before { left: auto; inset-inline-start: 23px; }
.form-status { margin: 0; font-size: 14px; color: var(--ink-muted); }
.plain-name { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--ink-body); }