/* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Mulish:wght@300;400;600&display=swap');

:root {
  --color-bg: #fbf7f0;
  --color-surface: #ffffff;
  --color-text: #29231c;
  --color-accent: #9a7128;
  --color-accent-2: #4c5a3d;
  --color-divider: color-mix(in srgb, #29231c 14%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #fbf7f1;
  --color-neutral-200: #f2ece2;
  --color-neutral-300: #e3dacd;
  --color-neutral-400: #c9bdac;
  --color-neutral-500: #a89b88;
  --color-neutral-600: #877b6a;
  --color-neutral-700: #665d4f;
  --color-neutral-800: #474137;
  --color-neutral-900: #2b2620;

  --color-accent-100: #fbf3df;
  --color-accent-200: #f5e6bf;
  --color-accent-300: #e8d094;
  --color-accent-400: #d3b264;
  --color-accent-500: #b8933c;
  --color-accent-600: #9a7128;
  --color-accent-700: #7a591c;
  --color-accent-800: #594014;
  --color-accent-900: #3a2a0e;

  --color-accent-2-100: #f1f4e9;
  --color-accent-2-200: #dfe5d0;
  --color-accent-2-300: #c4cfae;
  --color-accent-2-400: #a1b087;
  --color-accent-2-500: #7f9066;
  --color-accent-2-600: #63734c;
  --color-accent-2-700: #4c5a3d;
  --color-accent-2-800: #353f28;
  --color-accent-2-900: #202718;

  --font-heading: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-heading-weight: 400;
  --font-body: "Mulish", system-ui, sans-serif;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 3px;

  /* Elevation — near-flat and warm: this system separates with whitespace and
     hairlines first, shadow only where something genuinely floats. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2620 8%, transparent);
  --shadow-md: 0 6px 18px color-mix(in srgb, #2b2620 10%, transparent);
  --shadow-lg: 0 20px 48px color-mix(in srgb, #2b2620 16%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* Photographs run full-strength and full-bleed — the wrapper only warms the
   image very slightly so it belongs to the cream ground. Never rounds. */
.washed{filter:saturate(1.04) contrast(1.03);border-radius:0}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.65; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.08; letter-spacing: 0; margin: 0 0 var(--space-3);
}
h1 { font-size: 60px; }
h2 { font-size: 44px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }
h5 { font-size: 19px; }
h6 {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-700);
}
p { margin: 0 0 var(--space-3); max-width: 68ch; }
a { color: var(--color-accent-700); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 12px; margin-top: var(--space-2); font-style: italic;
  font-family: var(--font-heading);
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 58%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

/* — rules: a hairline is the system's structural device — */
.hr {
  height: 1px; border: 0; margin: var(--space-6) 0;
  background: var(--color-divider);
}

/* — buttons: letterspaced small caps in a thin rectangle — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 15px var(--space-6);
  border-radius: var(--radius-sm);
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-neutral-100); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-secondary { border-color: var(--color-accent); color: var(--color-accent-700); }
.btn-secondary:hover { background: var(--color-accent-100); }
.btn-secondary:active { background: var(--color-accent-200); }
.btn-ghost { color: var(--color-accent-700); padding-inline: 0; letter-spacing: 0.14em; }
.btn-ghost:hover { color: var(--color-accent-800); text-decoration: underline; }
.btn-ghost:active { color: var(--color-accent-900); }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-3); }

/* — forms — */
.field > label {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 8px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit;
  font-size: 15px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1px solid var(--color-neutral-400);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-surface);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px var(--space-4); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-neutral-100); }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-accent-100); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards: an editorial caption block, not a boxed tile — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.card-kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: 1.15;
}
.card-body { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 72%, transparent); flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  font-family: var(--font-heading); font-style: italic;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px;
  border-radius: var(--radius-sm);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* — navigation: a hairline-ruled bar with the wordmark in small caps — */
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-right: auto;
}
.nav a {
  color: inherit; text-decoration: none; font-size: 13px; letter-spacing: 0.02em;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-text);
}
.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: var(--color-accent-100); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
}
.dialog {
  width: min(480px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-sm);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 30px; line-height: 1.1;
}
.dialog-body { font-size: 15px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-3); }

/* — sharp frame: edges stay square; nothing goes pill — */
.card, .dialog, .btn, .tag, .seg, .input { border-radius: var(--radius-sm); }
/* AETHER Safari Collection — page scaffolding.
   Colour, font family and spacing tokens all come from ../../styles.css (the
   Organic design system, loaded by ds-base.js). Nothing here invents a colour.

   ── The design, stated once ──────────────────────────────────────────────
   Reference language shared by the luxury-safari field: a very large
   high-contrast serif set against full-bleed photography, letterspaced
   small-caps labels doing all the navigational work, centred editorial
   intros, warm ivory ground, one metallic earth accent, and hairlines
   instead of boxes.

   The scale contrast is the whole idea. Display type runs to 112px; labels
   run at 10-11px with 0.22em tracking. There is deliberately almost nothing
   in between, because the middle is where luxury design goes to die.

   Rhythm: a 32px leading unit with a 16px half-step. Every edge is square.
   Photography is always the loudest element on the page.
   ─────────────────────────────────────────────────────────────────────── */

:root{
  --leading:32px;--half:16px;
  --edge:clamp(20px,5vw,88px);--gutter:clamp(24px,4vw,72px);--max:1320px;
  --measure:66ch;
  /* measured sticky chrome: the masthead alone, and masthead + section nav.
     Anchor jumps and every sticky offset derive from these two. */
  --nav-h:150px;--chrome-h:210px;
  --rule:1px solid var(--color-divider);
  --rule-strong:1px solid color-mix(in srgb,var(--color-text) 30%,transparent);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media(max-width:1024px){:root{--nav-h:104px;--chrome-h:164px}}
@media(max-width:520px){:root{--nav-h:92px;--chrome-h:150px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--chrome-h)}
body{margin:0;text-wrap:pretty;overflow-x:clip;font-size:17px;letter-spacing:.004em}
img{display:block;max-width:100%}
[id]{scroll-margin-top:var(--chrome-h)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--edge)}
.narrow{max-width:74ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--edge);top:8px;z-index:40;background:var(--color-surface);padding:10px 16px;border:1px solid var(--color-accent)}

/* ── type ─────────────────────────────────────────────────────────────── */
/* Cormorant is a high-contrast Garamond: it wants size, tight tracking and
   generous leading. Below ~24px it goes weak, which is why every small item
   on this site is the sans instead. */
.display{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(46px,7.4vw,112px);line-height:.98;letter-spacing:-.018em;margin:0}
.display .line{display:block}
.h-lg{font-family:var(--font-heading);font-size:clamp(34px,4.4vw,64px);line-height:1.04;letter-spacing:-.014em;margin:0}
.h-md{font-family:var(--font-heading);font-size:clamp(27px,2.9vw,42px);line-height:1.08;letter-spacing:-.008em;margin:0}

.kicker{display:block;font-family:var(--font-body);font-size:10px;font-weight:600;line-height:1.4;letter-spacing:.24em;text-transform:uppercase;color:var(--color-accent-700);margin:0 0 var(--leading)}
.kicker-light{color:var(--color-accent-300)}
/* the ornamented label: a hairline lead-in, used where a label opens a block */
.kicker-rule{display:flex;align-items:center;gap:14px}
.kicker-rule::before{content:"";width:34px;height:1px;background:currentColor;flex:none;opacity:.55}

.lede{font-size:clamp(19px,1.55vw,23px);line-height:1.58;max-width:54ch;color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.body-col p{font-size:17px;line-height:1.72;max-width:var(--measure);margin:0 0 var(--leading)}

/* the centred editorial intro — the single most consistent device across the
   luxury-travel field, and the right home for a page's thesis sentence */
.editorial{max-width:44ch;margin-inline:auto;text-align:center}
.editorial .kicker{margin-bottom:var(--leading)}
.editorial .kicker-rule{justify-content:center}
.editorial .kicker-rule::after{content:"";width:34px;height:1px;background:currentColor;flex:none;opacity:.55}
.editorial p{font-family:var(--font-heading);font-size:clamp(23px,2.5vw,34px);line-height:1.42;letter-spacing:-.006em;margin:0;max-width:none;color:var(--color-text)}
.editorial .sub{font-family:var(--font-body);font-size:16px;line-height:1.75;margin-top:var(--leading);color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.editorial .actions{justify-content:center}

.stack{display:flex;flex-direction:column;gap:var(--leading)}
.stack-half{display:flex;flex-direction:column;gap:var(--half)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:calc(1.25*var(--leading))}

.section{padding:calc(3.25*var(--leading)) 0}
.section-tight{padding:calc(1.75*var(--leading)) 0}
.ruled{border-top:var(--rule)}
@media(max-width:720px){.section{padding:calc(2.25*var(--leading)) 0}}

/* ── utility bar: the thin dark strip above the masthead, carrying contact
      details and the secondary links.

      It must be positioned. The hero that follows it is position:relative and
      pulled up by margin-top:calc(-1*var(--nav-h)), so a static bar loses the
      paint order to it and its links become unclickable on every hero page.
      z-index sits just above the masthead's 20. ──────────────────────────── */
.utility{position:relative;z-index:21;background:var(--color-neutral-900);color:color-mix(in srgb,var(--color-neutral-100) 78%,transparent);font-family:var(--font-heading);font-size:14px;letter-spacing:.06em}
.utility-in{max-width:var(--max);margin:0 auto;padding:8px var(--edge);display:flex;gap:var(--space-6);align-items:center;justify-content:space-between;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.utility a{color:inherit;text-decoration:none}
.utility a:hover{color:var(--color-accent-300)}
.utility-set{display:flex;gap:var(--space-6);align-items:center}
@media(max-width:1100px){.utility-set:last-child{display:none}}
@media(max-width:520px){.utility-in{justify-content:center}}

/* ── masthead: two rows, transparent over photography. Row one carries the
      wordmark and the contact actions; row two carries navigation beneath it.
      Serif throughout — the reference field sets even its navigation in the
      display face, which is what separates it from an ordinary travel site. ─ */
.masthead{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--color-bg) 95%,transparent);backdrop-filter:saturate(1.15) blur(10px);border-bottom:var(--rule);transition:background .4s var(--ease),border-color .4s var(--ease)}
.masthead-in{max-width:var(--max);margin:0 auto;padding:var(--space-3) var(--edge) var(--space-2)}
.mast-row{display:flex;align-items:center;gap:var(--gutter)}
.mast-row-1{justify-content:space-between}
.mast-row-2{justify-content:flex-start;gap:var(--space-6);padding-top:6px;min-height:38px}

.nav-brand{text-decoration:none;color:inherit;font-family:var(--font-heading);font-size:clamp(23px,2.1vw,31px);line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav-brand small{display:none}

.mast-actions{display:flex;align-items:center;gap:var(--space-6)}
.mast-contact{display:flex;align-items:center;gap:var(--space-6);font-family:var(--font-heading);font-size:16px}
.mast-contact a{color:inherit;text-decoration:none;white-space:nowrap}
.mast-contact a:hover{color:var(--color-accent-700)}
@media(max-width:1240px){.mast-contact{display:none}}

/* navigation: serif, sentence case, with a caret where a section has children */
.nav-links{display:flex;gap:var(--space-6);align-items:center}
.nav-links a{font-family:var(--font-heading);font-size:17px;font-weight:var(--font-heading-weight);letter-spacing:.01em;text-transform:none;text-decoration:none;color:var(--color-text);padding:5px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:border-color .3s var(--ease),color .3s var(--ease)}
.nav-links a:hover{color:var(--color-accent-700);border-bottom-color:var(--color-accent)}
.nav-links a.has-more::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;vertical-align:2px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.65}
/* Hide the link list, never the row itself — the hamburger fallback is a
   child of this row, and a display:none parent takes the child with it. */
@media(max-width:1024px){.mast-row-2 .nav-links{display:none}.mast-row-2{min-height:0;padding-top:0}}

/* over a hero the masthead floats, inverted, until the page scrolls past it */
.masthead.is-over{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.masthead.is-over .nav-brand,.masthead.is-over .nav-links a,.masthead.is-over .nav-menu>summary,.masthead.is-over .mast-contact,.masthead.is-over .mast-contact a{color:var(--color-neutral-100)}
.masthead.is-over .btn-secondary{border-color:color-mix(in srgb,var(--color-neutral-100) 62%,transparent);color:var(--color-neutral-100)}
.masthead.is-over .btn-secondary:hover{background:color-mix(in srgb,var(--color-neutral-100) 14%,transparent)}

.nav-menu{position:relative;display:none}
.nav-menu>summary{cursor:pointer;list-style:none;font-family:var(--font-heading);font-size:17px;letter-spacing:.01em;padding:8px 0;color:var(--color-text)}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu-panel{position:absolute;left:0;top:calc(100% + 10px);min-width:240px;max-height:calc(100svh - var(--nav-h) - 24px);overflow-y:auto;overscroll-behavior:contain;background:var(--color-surface);border:var(--rule);box-shadow:var(--shadow-md);display:flex;flex-direction:column;padding:var(--space-2) 0;z-index:3}
.nav-menu-panel a{font-family:var(--font-heading);padding:10px var(--space-4);font-size:17px;letter-spacing:.01em;text-transform:none;text-decoration:none;color:var(--color-text)}
.nav-menu-panel a:hover{background:var(--color-accent-100);color:var(--color-accent-800)}
@media(max-width:1024px){.nav-menu{display:block}}
@media(max-width:560px){.masthead .btn{display:none}}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:flex-end;margin-top:calc(-1*var(--nav-h));isolation:isolate}
.hero-short{min-height:min(72vh,640px)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--color-neutral-900) 78%,transparent) 0%,color-mix(in srgb,var(--color-neutral-900) 34%,transparent) 42%,color-mix(in srgb,var(--color-neutral-900) 20%,transparent) 100%)}
/* the media layer carries an opaque dark ground: the slot is transparent until
   a photograph is dropped, and the ivory hero type would otherwise sit on the
   ivory body. A dropped image paints straight over it. */
.hero-media{position:absolute;inset:-8% 0;z-index:0;will-change:transform;background:var(--color-neutral-800)}
.hero-media image-slot{position:absolute;inset:0;width:100%;height:100%;color:var(--color-neutral-100)}
/* the slot's empty state is centred, which would put it through the hero
   copy; pin it to the top of the frame instead */
.hero-media image-slot::part(empty){justify-content:flex-start;padding-top:calc(var(--nav-h) + 6vh)}
/* on a centred hero the copy already owns the band below the masthead, so the
   drop-target label goes to the foot of the frame rather than the head */
.hero-centre .hero-media image-slot::part(empty){justify-content:flex-end;padding-top:0;padding-bottom:8vh}
.hero-copy{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--nav-h) + var(--leading)) var(--edge) calc(2.75*var(--leading));color:var(--color-neutral-100)}
.hero-copy .kicker{color:var(--color-accent-300);margin-bottom:calc(1.25*var(--leading))}
.hero-copy .lede{color:color-mix(in srgb,var(--color-neutral-100) 90%,transparent);max-width:46ch;margin-top:calc(1.25*var(--leading))}
.hero-copy .display{text-shadow:0 2px 40px color-mix(in srgb,var(--color-neutral-900) 40%,transparent)}
/* a centred hero, for the home page */
.hero-centre{align-items:center}
.hero-centre .hero-copy{text-align:center;padding-bottom:calc(3.5*var(--leading))}
.hero-centre .lede{margin-inline:auto}
.hero-centre .actions,.hero-centre .kicker-rule{justify-content:center}
.hero-centre .kicker-rule::after{content:"";width:34px;height:1px;background:currentColor;flex:none;opacity:.55}

.scroll-cue{position:absolute;left:50%;bottom:var(--half);z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--color-neutral-100) 74%,transparent);text-decoration:none}
.scroll-cue::after{content:"";width:1px;height:40px;background:linear-gradient(to bottom,color-mix(in srgb,var(--color-neutral-100) 70%,transparent),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.7);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

.on-photo{border-color:color-mix(in srgb,var(--color-neutral-100) 62%,transparent);color:var(--color-neutral-100)}
.on-photo:hover{background:color-mix(in srgb,var(--color-neutral-100) 14%,transparent);border-color:var(--color-neutral-100)}

.crumbs{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:calc(1.25*var(--leading)) 0 0;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--color-accent-700)}
.crumbs span{margin:0 10px;opacity:.45}

/* ── buttons: thin, letterspaced, generous. The field's house style. ───── */
.btn{font-family:var(--font-heading);font-weight:600;padding:16px var(--space-6);letter-spacing:.17em;font-size:12px;border-radius:0;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-ghost{padding-inline:0}
.btn-ghost::after{content:"";display:block}

/* ── grids ────────────────────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.75*var(--leading)) var(--gutter)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1.75*var(--leading)) var(--gutter)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(1.75*var(--leading)) var(--gutter)}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--leading) clamp(32px,5vw,96px);align-items:center}
.split-reverse .split-figure{order:2}
.split-figure{margin:0}
.split-figure image-slot{width:100%;aspect-ratio:4/5}
.split-wide image-slot{aspect-ratio:3/2}
@media(max-width:880px){.split{grid-template-columns:1fr}.split-figure,.split-reverse .split-figure{order:-1}}

/* full-bleed: photography escapes the measure, which is what makes a page
   feel like a magazine rather than a brochure */
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.bleed image-slot{width:100%;aspect-ratio:21/9}
@media(max-width:720px){.bleed image-slot{aspect-ratio:4/3}}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gutter);padding-bottom:calc(1.25*var(--leading));border-bottom:var(--rule)}
.section-head + *{padding-top:calc(1.75*var(--leading))}
.section-head .kicker{margin-bottom:var(--half)}
@media(max-width:620px){.section-head{flex-direction:column;align-items:flex-start;gap:var(--half)}}
/* the centred variant, for a page's opening statement */
.section-head-centre{flex-direction:column;align-items:center;text-align:center;border-bottom:0;padding-bottom:0}
.section-head-centre .kicker-rule{justify-content:center}
.section-head-centre .kicker-rule::after{content:"";width:34px;height:1px;background:currentColor;flex:none;opacity:.55}

/* ── the tile: a photograph with its caption beneath, never a boxed card ── */
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tile image-slot{width:100%;aspect-ratio:3/2;transition:opacity .5s var(--ease)}
.tile-tall image-slot{aspect-ratio:3/4}
.tile h3{font-family:var(--font-heading);font-size:clamp(23px,1.9vw,29px);line-height:1.12;letter-spacing:-.008em;margin:calc(1.1*var(--leading)) 0 0;transition:color .3s var(--ease)}
.tile .place{display:block;font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--color-accent-700);margin-top:12px}
.tile p{font-size:15px;line-height:1.7;margin:var(--half) 0 0;max-width:46ch;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.tile .more{margin-top:calc(.75*var(--leading));font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--color-accent-700);display:inline-flex;align-items:center;gap:9px}
.tile .more::after{content:"";width:20px;height:1px;background:currentColor;transition:width .35s var(--ease)}
a.tile:hover .more::after{width:34px}
a.tile:hover h3{color:var(--color-accent-800)}
a.tile:hover image-slot{opacity:.88}
a.tile:focus-visible{outline:2px solid var(--color-accent);outline-offset:6px}

/* ── figures & standings ──────────────────────────────────────────────── */
.standing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(1.25*var(--leading)) var(--gutter);padding:calc(1.75*var(--leading)) 0;border-top:var(--rule);border-bottom:var(--rule)}
.stat-num{font-family:var(--font-heading);font-size:clamp(40px,4.2vw,66px);line-height:1;letter-spacing:-.02em;margin:0}
.stat-label{font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;line-height:1.6;margin:var(--half) 0 0;max-width:22ch;color:color-mix(in srgb,var(--color-text) 58%,transparent)}
@media(max-width:780px){.standing{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── numbered process list ────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(1.25*var(--leading)) var(--gutter);counter-reset:s}
.step{border-top:var(--rule-strong);padding-top:var(--leading)}
.step::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--font-heading);font-size:34px;color:var(--color-accent-700);line-height:1}
.step h4{font-family:var(--font-heading);margin:var(--leading) 0 10px;font-size:23px;line-height:1.15}
.step p{font-size:15px;line-height:1.68;margin:0;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ── dark olive panel: the second voice, once per page at most ─────────── */
.panel-dark{background:var(--color-accent-2-800);color:var(--color-neutral-100)}
.panel-dark .lede,.panel-dark p{color:color-mix(in srgb,var(--color-neutral-100) 84%,transparent)}
.panel-dark .kicker{color:var(--color-accent-300)}
.panel-dark .stat-num{color:var(--color-accent-300)}
.panel-dark .stat-label{color:color-mix(in srgb,var(--color-neutral-100) 68%,transparent)}
.panel-dark .standing{border-color:color-mix(in srgb,var(--color-neutral-100) 22%,transparent)}
.panel-dark a{color:var(--color-accent-300)}
.panel-dark .editorial p{color:var(--color-neutral-100)}
.panel-dark .btn-secondary{border-color:color-mix(in srgb,var(--color-neutral-100) 55%,transparent);color:var(--color-neutral-100)}
.panel-dark .btn-secondary:hover{background:color-mix(in srgb,var(--color-neutral-100) 12%,transparent)}

/* ── pull quote ───────────────────────────────────────────────────────── */
.quote{text-align:center}
.quote blockquote{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(27px,3.4vw,46px);line-height:1.26;letter-spacing:-.012em;max-width:24ch;margin:0 auto}
.quote figcaption{font-family:var(--font-body);font-style:normal;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-top:calc(1.5*var(--leading));color:color-mix(in srgb,var(--color-text) 55%,transparent)}

/* ── enquiry ──────────────────────────────────────────────────────────── */
.enquiry{background:var(--color-surface);border:var(--rule);padding:calc(2*var(--leading)) clamp(24px,5vw,88px)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.1*var(--leading)) var(--gutter);margin-top:calc(1.5*var(--leading))}
.form-grid .full{grid-column:1/-1}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}
.input{border-radius:0;border-color:color-mix(in srgb,var(--color-text) 22%,transparent);background:transparent;min-height:48px}
.input:focus-visible{border-color:var(--color-accent);box-shadow:inset 0 -1px 0 var(--color-accent)}
.field-error{display:none;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8f2d2d;margin-top:7px}
.field.is-invalid .field-error{display:block}
.field.is-invalid .input{border-color:#8f2d2d}
.form-note{font-size:13px;line-height:1.65;color:color-mix(in srgb,var(--color-text) 62%,transparent);margin:var(--leading) 0 0;max-width:60ch}
.form-status{margin-top:var(--leading);padding:var(--leading);border:1px solid var(--color-accent);background:var(--color-accent-100)}
.form-status h3{font-family:var(--font-heading);font-size:26px;margin:0 0 10px}
.form-status p{margin:0;font-size:16px;line-height:1.65}

.trust{display:flex;flex-wrap:wrap;gap:var(--half) var(--space-6);align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.trust span{display:inline-flex;align-items:center;gap:10px}
.trust span::before{content:"";width:20px;height:1px;background:var(--color-accent)}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq details{border-top:var(--rule)}
.faq details:last-of-type{border-bottom:var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-4);padding:calc(.85*var(--leading)) 0;font-family:var(--font-heading);font-size:clamp(20px,1.8vw,25px);line-height:1.25;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);font-size:17px;font-weight:400;color:var(--color-accent-700);flex:none;padding-top:4px}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--color-accent-800)}
.faq p{font-size:16px;line-height:1.75;margin:0 0 var(--leading);max-width:70ch;color:color-mix(in srgb,var(--color-text) 76%,transparent)}

/* ── itinerary day list ───────────────────────────────────────────────── */
.days{border-top:var(--rule-strong)}
.day{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--gutter);padding:calc(.9*var(--leading)) 0;border-bottom:var(--rule)}
.day-no{font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--color-accent-700);padding-top:8px}
.day h4{font-family:var(--font-heading);margin:0 0 10px;font-size:24px;line-height:1.15}
.day p{margin:0;font-size:16px;line-height:1.72;max-width:64ch;color:color-mix(in srgb,var(--color-text) 74%,transparent)}
@media(max-width:620px){.day{grid-template-columns:1fr;gap:8px}}

/* ── footer ───────────────────────────────────────────────────────────── */
.site-foot{background:var(--color-neutral-900);color:var(--color-neutral-300);margin-top:calc(3*var(--leading))}
.site-foot a{color:var(--color-neutral-300);text-decoration:none;font-size:14px;transition:color .3s var(--ease)}
.site-foot a:hover{color:var(--color-accent-300)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:calc(1.5*var(--leading)) var(--gutter);padding:calc(2.75*var(--leading)) 0}
.foot-grid h5{font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent-300);margin:0 0 var(--leading)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.foot-brand{font-family:var(--font-heading);font-size:30px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 var(--leading);color:var(--color-neutral-100)}
.foot-grid p{font-size:14px;line-height:1.8;max-width:38ch;color:var(--color-neutral-400)}
.foot-legal{display:flex;flex-wrap:wrap;gap:var(--half) var(--space-6);justify-content:space-between;padding:calc(.9*var(--leading)) 0;border-top:1px solid color-mix(in srgb,var(--color-neutral-100) 14%,transparent);font-size:11px;letter-spacing:.1em;color:var(--color-neutral-500)}
@media(max-width:1000px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ── sticky enquiry + WhatsApp ────────────────────────────────────────── */
.dock{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:14;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
/* While the hero fills the screen its own buttons are the call to action, and
   the dock would sit on top of the centred lede. Hold it back until scroll. */
.dock.is-hidden{display:none}
.dock .btn{box-shadow:var(--shadow-md)}
.dock-wa{background:var(--color-accent-2-700);color:var(--color-neutral-100);border-color:var(--color-accent-2-700)}
.dock-wa:hover{background:var(--color-accent-2-800);border-color:var(--color-accent-2-800)}
@media(max-width:620px){.dock{right:12px;bottom:12px}.dock .btn{padding:14px var(--space-4)}}
@media(max-height:640px){.scroll-cue{display:none}}

/* ── reveal on scroll ─────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero-media{inset:0;transform:none!important}.scroll-cue::after{animation:none}}

@view-transition{navigation:auto}

/* ── in-page section nav ──────────────────────────────────────────────── */
.section-nav{position:sticky;top:var(--nav-h);z-index:8;background:color-mix(in srgb,var(--color-bg) 95%,transparent);backdrop-filter:blur(10px);border-bottom:var(--rule)}
.section-nav ul{list-style:none;display:flex;gap:var(--space-6);margin:0;padding:var(--space-3) 0;overflow-x:auto;scrollbar-width:none}
.section-nav ul::-webkit-scrollbar{display:none}
.section-nav a{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:color-mix(in srgb,var(--color-text) 58%,transparent);padding-bottom:5px;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.section-nav a:hover{color:var(--color-accent-700)}
.section-nav a.is-current{color:var(--color-text);border-bottom-color:var(--color-accent)}

/* ── image slots ──────────────────────────────────────────────────────── */
.slot-note-inline{margin:0;padding:var(--half) 0;font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent-700)}
.slot-note{position:absolute;left:var(--space-4);top:var(--space-4);z-index:3;font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--color-neutral-100) 78%,transparent);border:1px solid color-mix(in srgb,var(--color-neutral-100) 38%,transparent);padding:5px 10px}

/* ── comparison table ─────────────────────────────────────────────────── */
.compare-scroll{overflow-x:auto;scrollbar-width:thin}
.compare{min-width:880px}
.compare th[scope=row]{font-family:var(--font-heading);font-size:21px;font-weight:var(--font-heading-weight);letter-spacing:0;text-transform:none;color:var(--color-text);border-bottom:var(--rule);vertical-align:top;width:250px}
.compare td{vertical-align:top;font-size:15px;line-height:1.65}
.compare .yes{color:var(--color-accent-2-700);font-weight:600}
.compare .no{color:color-mix(in srgb,var(--color-text) 38%,transparent)}
.compare .price{font-family:var(--font-heading);font-size:24px;white-space:nowrap}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th{text-align:left;font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent);padding:0 var(--space-4) var(--half) 0;border-bottom:var(--rule-strong)}
.table td{padding:var(--space-3) var(--space-4) var(--space-3) 0;border-bottom:var(--rule);line-height:1.6;vertical-align:top}
.table tr:hover td{background:color-mix(in srgb,var(--color-accent-100) 55%,transparent)}

/* ── price / facts band ───────────────────────────────────────────────── */
.price-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--leading) var(--gutter);padding:calc(1.1*var(--leading)) 0;border-top:var(--rule-strong);border-bottom:var(--rule);margin:0}
.price-band dt{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.price-band dd{margin:12px 0 0;font-family:var(--font-heading);font-size:clamp(24px,2.1vw,30px);line-height:1.1}
@media(max-width:720px){.price-band{grid-template-columns:1fr 1fr}}

/* ── gallery + lightbox ───────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.gallery figure{margin:0;grid-column:span 4}
.gallery figure.wide{grid-column:span 8}
.gallery figure.full{grid-column:span 12}
.gallery figure.half{grid-column:span 6}
.gallery image-slot{width:100%;aspect-ratio:3/2}
.gallery figure.tall image-slot{aspect-ratio:3/4}
.gallery button{all:unset;display:block;cursor:zoom-in;width:100%}
.gallery button:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
.gallery figcaption{font-size:13px}
@media(max-width:860px){.gallery{grid-template-columns:repeat(6,1fr)}.gallery figure,.gallery figure.wide,.gallery figure.half{grid-column:span 6}}
.lightbox{position:fixed;inset:0;z-index:40;border:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;background:color-mix(in srgb,var(--color-neutral-900) 95%,transparent)}
.lightbox::backdrop{background:color-mix(in srgb,var(--color-neutral-900) 92%,transparent)}
.lightbox-inner{position:absolute;inset:clamp(16px,5vh,64px)}
.lightbox-inner .stage{width:100%;height:100%;display:grid;place-items:center}
.lightbox-inner image-slot{width:min(100%,1240px);aspect-ratio:3/2}
.lightbox-cap{position:absolute;left:0;right:0;bottom:calc(-1*var(--space-6));text-align:center;font-family:var(--font-heading);font-style:italic;font-size:15px;color:color-mix(in srgb,var(--color-neutral-100) 78%,transparent)}
.lightbox-close{position:absolute;top:var(--space-4);right:var(--space-4);z-index:2}

/* ── migration calendar ───────────────────────────────────────────────── */
.calendar{display:grid;grid-template-columns:210px repeat(12,minmax(0,1fr));gap:1px;font-size:10px}
.calendar .cell{padding:12px 4px;text-align:center;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.calendar .head{color:color-mix(in srgb,var(--color-text) 55%,transparent);border-bottom:var(--rule-strong);background:transparent}
.calendar .row-label{padding:14px var(--space-3) 14px 0;text-align:left;font-family:var(--font-heading);font-size:17px;font-weight:var(--font-heading-weight);letter-spacing:0;text-transform:none;background:transparent}
.calendar .m{background:var(--color-neutral-200)}
.calendar .m-1{background:var(--color-accent-200)}
.calendar .m-2{background:var(--color-accent-400)}
.calendar .m-3{background:var(--color-accent-600);color:var(--color-neutral-100)}
.calendar-key{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-4);font-size:9px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.calendar-key span{display:inline-flex;align-items:center;gap:9px}
.calendar-key i{width:24px;height:10px;display:block}
.calendar-scroll{overflow-x:auto}
@media(max-width:900px){.calendar{min-width:860px}}

/* ── map with clickable pins ──────────────────────────────────────────── */
.map-wrap{position:relative}
.map-wrap image-slot{width:100%;aspect-ratio:4/3}
.map-pin{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text);background:color-mix(in srgb,var(--color-bg) 93%,transparent);border:var(--rule);padding:7px 11px;transition:background .25s var(--ease),color .25s var(--ease)}
.map-pin::before{content:"";width:5px;height:5px;background:var(--color-accent);flex:none;border-radius:50%}
.map-pin:hover,.map-pin:focus-visible{background:var(--color-accent);color:var(--color-neutral-100);border-color:var(--color-accent);z-index:2}
.map-pin:hover::before,.map-pin:focus-visible::before{background:var(--color-neutral-100)}

/* ── long-form article ────────────────────────────────────────────────── */
.article{max-width:64ch;margin:0 auto}
.article p{font-size:19px;line-height:1.78;margin:0 0 var(--leading);max-width:none}
.article>p:first-of-type::first-letter{float:left;font-family:var(--font-heading);font-size:88px;line-height:.76;padding:8px 14px 0 0;color:var(--color-accent-700)}
.article h3{font-family:var(--font-heading);font-size:clamp(26px,2.3vw,33px);line-height:1.15;margin:calc(2*var(--leading)) 0 var(--leading)}
.article blockquote{margin:calc(2*var(--leading)) 0;font-family:var(--font-heading);font-size:clamp(25px,2.5vw,33px);line-height:1.3;border-top:var(--rule-strong);border-bottom:var(--rule-strong);padding:calc(1.25*var(--leading)) 0;color:var(--color-accent-800)}
.article ul{margin:0 0 var(--leading);padding-left:1.15em;font-size:18px;line-height:1.78}
.article li{margin-bottom:12px}
.article figure{margin:calc(2*var(--leading)) 0}
.byline{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:baseline;font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent);padding-bottom:calc(.9*var(--leading));border-bottom:var(--rule);margin-bottom:calc(1.75*var(--leading))}

/* ── attributed testimonial: the visible twin of the Review nodes in the
      page's structured data. Keep the two in step — a rating shown but not
      marked up (or the reverse) is the classic structured-data mismatch. ── */
.testimonial{display:flex;flex-direction:column;gap:var(--half);padding-top:calc(1.25*var(--leading));border-top:var(--rule-strong)}
.testimonial p{font-family:var(--font-heading);font-size:20px;line-height:1.5;margin:0;text-wrap:pretty}
.testimonial cite{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.testimonial .rating{font-family:var(--font-body);font-size:11px;letter-spacing:.36em;color:var(--color-accent);margin:0}
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1.25*var(--leading)) var(--gutter);padding:calc(1.75*var(--leading)) 0;border-top:var(--rule-strong)}
/* Collapse doubled hairlines where these ruled blocks stack. The site's whole
   visual language is one deliberate rule; two parallel rules read as a fault. */
.standing+.creds,.section-head+.standing{border-top:0}
.creds:has(+.grid-3 .testimonial){border-bottom:0}
.creds h5{font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin:0 0 var(--leading);color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.creds ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.55}
@media(max-width:780px){.creds{grid-template-columns:1fr}}

/* ── WordPress & Elementor Integration ──────────────────────────────── */
.admin-bar .masthead{top:32px}
@media(max-width:782px){.admin-bar .masthead{top:46px}}
.elementor-section,.e-con{overflow:visible!important}
.elementor-widget-wrap{background-color:transparent}
.wp-caption{margin:0}
.wp-caption-text{font-size:12px;font-style:italic;font-family:var(--font-heading);color:color-mix(in srgb,var(--color-text) 62%,transparent);margin-top:var(--space-2)}
.site-footer{background:var(--color-neutral-900);color:color-mix(in srgb,var(--color-neutral-100) 68%,transparent);padding:calc(4*var(--leading)) 0 calc(2*var(--leading))}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:var(--leading) var(--gutter);padding-bottom:calc(2.5*var(--leading));border-bottom:1px solid color-mix(in srgb,var(--color-neutral-100) 10%,transparent)}
.footer-wordmark{display:block;font-family:var(--font-heading);font-size:clamp(20px,1.8vw,27px);letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-100);text-decoration:none;margin-bottom:var(--space-4)}
.footer-tagline{font-family:var(--font-heading);font-size:18px;font-style:italic;line-height:1.48;color:color-mix(in srgb,var(--color-neutral-100) 72%,transparent);max-width:30ch;margin-bottom:var(--space-4)}
.footer-address{font-size:14px;line-height:1.8;color:color-mix(in srgb,var(--color-neutral-100) 50%,transparent);font-style:normal}
.footer-address a{color:inherit;text-decoration:none}
.footer-address a:hover{color:var(--color-accent-300)}
.footer-col-label{font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent-400);margin:0 0 var(--space-4)}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.footer-links a{font-family:var(--font-heading);font-size:17px;color:color-mix(in srgb,var(--color-neutral-100) 62%,transparent);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--color-neutral-100)}
.footer-cta-col p{font-size:14px;line-height:1.75;margin-bottom:var(--space-6);max-width:28ch}
.footer-legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);padding-top:calc(1.5*var(--leading));font-size:12px;color:color-mix(in srgb,var(--color-neutral-100) 35%,transparent)}
.footer-legal a{color:inherit;text-decoration:none}
.footer-legal a:hover{color:var(--color-accent-300)}
.footer-members{font-size:11px;letter-spacing:.06em}
@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.footer-grid{grid-template-columns:1fr}}