/* Raleway and Montserrat (SIL Open Font License), served from this site */
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:200;src:url(/fonts/raleway-latin-ext-200-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:300;src:url(/fonts/raleway-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/raleway-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/raleway-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/raleway-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/raleway-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:200;src:url(/fonts/raleway-latin-200-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:300;src:url(/fonts/raleway-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/raleway-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/raleway-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/raleway-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Raleway';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/raleway-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:300;src:url(/fonts/montserrat-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/montserrat-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/montserrat-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/montserrat-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:300;src:url(/fonts/montserrat-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/montserrat-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/montserrat-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/montserrat-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/montserrat-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* ---- Palette: warm, light-led. Navy & teal are used strategically, not as the default background. ---- */
  --ivory:#FAF7F0;        /* primary background */
  --sand:#EFE7D8;         /* secondary surface, section alternation */
  --stone:#E6DECC;        /* tertiary surface / borders on sand */
  --offwhite:#FFFDF9;     /* lifted surface (cards, inputs) */
  --charcoal:#26241F;     /* primary text (warm near-black, not pure black) */
  --muted:#6B6458;        /* secondary text */
  --rule:#DDD4BF;         /* hairline borders on ivory/sand */
  --navy:#211D18;         /* deep warm charcoal — strategic dark accent — used sparingly, never as default bg */
  --navy-2:#494642;       /* lighter warm charcoal, for gradients/hover on navy */
  --teal:#3E6D63;         /* primary interactive accent */
  --teal-deep:#2E524A;    /* hover/active state of teal */
  --teal-tint:#E4EDE9;    /* pale teal wash for selected/active backgrounds on light surfaces */
  --accent-warm:#A84D2A;  /* warm terracotta — used sparingly as a standout accent (kickers, link underlines); meets AA contrast on ivory/sand */
  --accent-warm-on-dark:#C2826A; /* lightened terracotta for use on navy — meets AA contrast (5.3:1) on --navy */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{ background:var(--ivory); color:var(--charcoal); font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* Subtle cross-fade between routes — see renderRoute() in app.js */
#app{ opacity:1; transition:opacity .16s ease; }
#app.is-transitioning{ opacity:0; }
@media (prefers-reduced-motion: reduce){ #app{ transition:none; } }
a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }
.container{ max-width:1360px; margin:0 auto; position:relative; }
.side-pad{ padding-left:64px; padding-right:64px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

::selection{ background:var(--teal); color:var(--ivory); }

/* ---------- Focus visibility (accessibility) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:2px;
}

/* ---------- Type scale ---------- */
.eyebrow{ font-size:11px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); }
.eyebrow.accent{ color:var(--accent-warm); }
.eyebrow.on-dark{ color:rgba(250,247,240,0.7); }
.eyebrow.accent-on-dark{ color:var(--accent-warm-on-dark); }
h1,h2,h3{ font-family:'Raleway',sans-serif; font-weight:300; color:var(--charcoal); margin:0; }
.on-dark{ color:var(--ivory); }
.display-1{ font-size:clamp(40px,6vw,80px); line-height:1.04; font-weight:200; letter-spacing:-0.01em; text-wrap:balance; }
.display-2{ font-size:clamp(30px,4vw,50px); line-height:1.18; font-weight:200; letter-spacing:-0.005em; text-wrap:balance; }
.display-3{ font-size:clamp(24px,3vw,34px); line-height:1.28; font-weight:300; text-wrap:balance; }
.lede{ font-size:18px; line-height:1.75; color:var(--muted); font-weight:400; }
p{ font-size:16px; line-height:1.8; color:var(--muted); font-weight:400; }
.small{ font-size:14px; line-height:1.7; }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--charcoal); border-bottom:1px solid var(--teal); padding-bottom:5px; transition:opacity .2s ease, gap .3s ease; }
.link-arrow:hover{ gap:12px; opacity:.75; }
.link-arrow svg{ width:13px; height:13px; }
/* Reset a <button> element's UA defaults (border/background/padding/font)
   so the "Discover Pressure Drop" trigger can share .link-arrow's look —
   every other .link-arrow use is an <a>, which needs no reset. */
button.link-arrow{ background:none; border:0; border-bottom:1px solid var(--teal); padding:0 0 5px 0; font:inherit; cursor:pointer; }
button.link-arrow.on-dark{ border-bottom-color:var(--accent-warm-on-dark); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:12.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:16px 32px; border-radius:2px; cursor:pointer; transition:background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease, transform .2s ease; border:1px solid transparent; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--teal); color:var(--ivory); border-color:var(--teal); }
.btn-primary:hover{ background:var(--teal-deep); border-color:var(--teal-deep); }
/* Orange variant — used for the homepage closing CTA only, to pick up the
   accent-warm thread running through that page (eyebrows, wheel, dividers)
   rather than the site-wide teal primary button; 5.2:1 contrast on ivory text. */
.btn-accent{ background:var(--accent-warm); color:var(--ivory); border-color:var(--accent-warm); }
.btn-accent:hover{ background:#8A3F22; border-color:#8A3F22; }
.btn-ghost-dark{ border-color:rgba(38,36,31,0.35); color:var(--charcoal); }
.btn-ghost-dark:hover{ background:rgba(38,36,31,0.06); }
.btn-ghost-light{ border-color:rgba(250,247,240,0.55); color:var(--ivory); }
.btn-ghost-light:hover{ background:rgba(250,247,240,0.12); }
.btn-block{ width:100%; }

/* ---------- Section rhythm ---------- */
.section{ width:100%; padding:128px 64px; }
.section.tight{ padding:96px 64px; }
.section.what-is-solace{ padding-top:64px; padding-bottom:64px; }
.section.navy.perf-diff{ padding-top:64px; }
/* Final "Wherever you are in the journey" CTA: same tightened top-gap
   treatment as the other sections below a full section (less dead space
   between the previous section and this heading). */
.section#finalCta{ padding-top:64px; }
/* "The Solace Experience" section follows the tightened exp-intro section
   directly above it — same gap-reduction treatment as what-is-solace/perf-diff
   so the two sections read as one continuous rhythm, not a big empty gap. */
.section.exp-the{ padding-top:64px; padding-bottom:64px; }
/* Yacht section: a deliberate dark "premium" moment (client feedback) —
   the same deep charcoal-navy background as the homepage's Performance,
   Differently section, so discovering the yacht itself feels elevated
   rather than a continuation of the surrounding ivory pages. The colour
   change is itself a strong seam against the sections above/below, so the
   pale hairline border this used to have is no longer needed. Top padding
   trimmed to match the site's other tightened-gap sections.
   2026.4, fifth pass ("the yacht title needs to sit high, keep consistency
   all over the website"): 64px was still a full 24px more than
   #philosophy's and #day-aboard's own 40px, so this title sat measurably
   lower under the nav than theirs — matched down to 40px for real
   sitewide consistency instead of just this section's own trimmed value. */
.section.yacht-section{ padding-top:40px; padding-bottom:64px; }
/* 2026.4, seventh pass: the new .pd-stage (see further down) bleeds to the
   section's top edge, like the angled image in Anais's mockup, and carries
   the 40px title offset itself (.pd-head) — so the section's own top
   padding goes to zero rather than stacking a second 40px above it. The
   section also clips its own overflow now: the sixth pass's thumbnail rail
   rendered far larger than intended and spilled into the Day Aboard
   section above ("when I scroll down from Plan your escape, the pictures
   from the yacht section overlap") and Destinations below. */
.section.yacht-section{ padding-top:0; padding-bottom:56px; position:relative; overflow:hidden; }
/* Rebuilt on client feedback: a centred editorial opening (title top and
   middle) instead of the old side-by-side split, a single narrow column of
   copy, a horizontal video/photo moment straight after the text (sized to
   sit comfortably rather than run full-bleed — this slot is built to take
   Anais's drone footage of Pressure Drop under sail once it's ready, an
   <img> standing in for the <video> until then), and the existing static
   gallery filmstrip last for the interior/onboard photos.
   Superseded (2026.4, sixth pass): the main section no longer opens with
   this centered title block — see .yacht-showcase further down, which
   replaces it with the angled photo + headline composition. Nothing in
   the current yacht-section markup references .yacht-head any more; left
   in place as harmless dead code rather than deleted. */
.yacht-head{ max-width:640px; margin:0 auto; text-align:center; }
.yacht-head .eyebrow{ margin-bottom:18px; }
.yacht-copy{ max-width:860px; margin:40px auto 0 auto; text-align:center; }
.yacht-copy p{ color:rgba(250,247,240,0.82); margin-bottom:14px; line-height:1.6; }
.yacht-copy p:last-child{ margin-bottom:0; }
@media (max-width:860px){
  .yacht-copy{ max-width:520px; }
}
.yacht-video{ position:relative; max-width:900px; margin:56px auto 0 auto; }
.yacht-video-inner, .yacht-video img{ width:100%; display:block; }
.yacht-video{ aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(250,247,240,0.16); }
.yacht-video img{ height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.16,.8,.3,1); }
.yacht-video:hover img{ transform:scale(1.03); }
.yacht-video figcaption{ position:absolute; left:16px; bottom:14px; z-index:2; font-family:'Raleway',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:rgba(250,247,240,0.9); background:rgba(21,29,24,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:6px 12px; border-radius:999px; }
@media (prefers-reduced-motion: reduce){ .yacht-video img, .yacht-video:hover img{ transition:none; transform:none; } }
@media (max-width:860px){
  .yacht-video{ margin-top:40px; }
}
/* Advisory's "Why independent advisory?" — same dark "premium moment"
   treatment as the Yacht section, and top padding trimmed since it follows
   directly on from Technical Advisory's own bottom padding above. */
.section.why-independent{ padding-top:48px; }
.section.why-independent .split-index{ color:var(--accent-warm-on-dark); }
/* Sized down just enough from the shared clamp(22px,2.6vw,31px) that "We
   advise. We don't sell you a boat." settles on one line at typical desktop
   widths instead of wrapping its last word. */
.section.why-independent .split-text h3{ color:var(--ivory); font-size:clamp(21px,2.3vw,27px); }
/* Technical Advisory: same one-line treatment as "We advise. We don't sell
   you a boat." above, so "Independent expertise when you need it." settles
   on one line at typical desktop widths instead of wrapping its last word. */
#technical-advisory .split-text h3{ font-size:clamp(21px,2.3vw,26px); }
.section.why-independent .split-text p{ color:rgba(250,247,240,0.82); }
/* This photo's boat sits well left of the frame's true centre, so the
   default centred crop pushed it off to one side with a large dead patch
   of open water opposite it. Shifting the crop's focal point onto the
   boat itself re-centres the actual subject in the frame. */
.section.why-independent .split-img img{ object-position:18% 46%; }
/* Advisory body copy: each of these three keeps its original wording, only
   widened from the shared .split-text p 440px cap so it settles on the
   client's requested line count at typical desktop widths, rather than
   wrapping into a taller, denser block. */
#build-advisory .split-text > div.reveal-d2 p{ max-width:660px; }
#commissioning .split-text > div.reveal-d2 p{ max-width:520px; }
#technical-advisory .split-text > div.reveal-d2 p{ max-width:520px; }
.section.tight.booking-section{ padding-top:48px; }
/* The Solace Difference: per client feedback the gap above the eyebrow was
   still too big at the shared .section.tight default (96px) — same
   tightened-top-padding pattern as .booking-section above.
   padding-bottom trimmed too (client: "too much gap after" the closing
   line — most of that gap was actually this section's own unchanged 96px
   bottom padding stacking with #day-aboard's own top padding right below
   it, not the closing line's margin). */
#philosophy{ padding-top:40px; padding-bottom:40px; }
/* ============================================================
   EXPERIENCE PAGE — guest-facing redesign (2026)
   One continuous scroll journey — hero, three-way choice, Adventure,
   Coaching, Watersports, the Yacht, Made Around You, Included, Pricing,
   Booking — rather than a directory of cards behind separate clicks.
   Anchors below let the choice panels' "Explore" links smooth-scroll to
   the matching section further down this same page (html already has
   scroll-behavior:smooth sitewide) instead of navigating anywhere.
   ============================================================ */
#philosophy, #day-aboard, #yacht, #destinations, #details, #how-it-works{ scroll-margin-top:84px; }

/* Revived for the 2026.2 compact/premium redesign. This sat directly under
   the hero as three large photographic panels originally; was replaced by
   .exp-tabs below (a tab switcher, also since dead — see its own comment);
   was replaced again by the 2026 master redesign's stacked splitSection()
   Explore/Learn/Play chapters. Client feedback on that version (too
   "messy," "catastrophic" scroll length, Rolex.com/Edmiston named as
   references, both of which favour full-bleed photo tiles over stacked
   text blocks) brought this back via choicePanels() in app.js, now used
   for both the Explore/Learn/Play triptych and the Destinations duo. */
.exp-choice{ display:grid; grid-template-columns:repeat(var(--choice-cols,3),1fr); }
.exp-choice-item{ position:relative; display:flex; align-items:flex-end; min-height:640px; overflow:hidden; border-right:1px solid rgba(250,247,240,0.14); }
.exp-choice-item:last-child{ border-right:none; }
.exp-choice-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.16,.8,.3,1); }
.exp-choice-item:hover .exp-choice-img{ transform:scale(1.045); }
.exp-choice-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,42,54,0.86) 0%, rgba(21,42,54,0.42) 40%, rgba(21,42,54,0.05) 68%); }
.exp-choice-content{ position:relative; z-index:2; padding:0 40px 48px 40px; width:100%; }
.exp-choice-label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-warm-on-dark); margin-bottom:14px; }
.exp-choice-tagline{ display:block; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(24px,2.4vw,32px); line-height:1.2; color:var(--ivory); text-wrap:balance; }
/* 2026.3 interactive-editorial redesign: optional price line for the
   Where/When/Price destinations duo (choicePanels()'s new `price` field) —
   a quiet accent-colored line under the tagline, not a badge or a card. */
.exp-choice-price{ display:block; margin-top:14px; font-family:'Raleway',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--accent-warm-on-dark); }
.exp-choice-link{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(250,247,240,0.85); transition:gap .3s ease, opacity .2s ease; }
.exp-choice-link svg{ width:12px; height:12px; }
.exp-choice-item:hover .exp-choice-link{ gap:12px; opacity:.85; }
@media (prefers-reduced-motion: reduce){ .exp-choice-img{ transition:none; } }
@media (max-width:900px){
  .exp-choice{ grid-template-columns:1fr; }
  .exp-choice-item{ min-height:420px; border-right:none; border-bottom:1px solid rgba(250,247,240,0.14); }
  .exp-choice-item:last-child{ border-bottom:none; }
}

/* Superseded again (2026.4): revived for the 2026.3 interactive-editorial
   redesign (originally built for the 2026 master redesign's Adventure/
   Coaching/Watersports choice, then marked dead when that choice was
   removed) as the interactive Explore/Learn/Play composition inside "One
   Experience" — a tab row, a crossfading photo and one short text panel,
   never a card and never a jump-link. The panel no longer carried a
   kicker line or a "Explore X" CTA (see experienceTabs() in app.js: these
   are dimensions of one experience, not separate products), so
   .exp-tabs-panels/.exp-tab-panel-desc below were tightened for a single
   terse sentence instead of a kicker + description + link. Replaced by
   .dim-panels below (see dimensionPanels()/wireDimensionPanels() in
   app.js) — left in place as harmless dead code. */
.exp-tabs{ max-width:1180px; margin:72px auto 0 auto; }
.exp-tabs-nav{ display:flex; justify-content:center; gap:56px; padding:0 32px 22px 32px; }
.exp-tab-btn{ background:none; border:none; cursor:pointer; padding:8px 0 14px 0; font-family:'Raleway',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); position:relative; transition:color .3s ease; }
.exp-tab-btn::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent-warm); transform:scaleX(0); transition:transform .4s cubic-bezier(.16,.8,.3,1); }
.exp-tab-btn:hover{ color:var(--charcoal); }
.exp-tab-btn.is-active{ color:var(--charcoal); }
.exp-tab-btn.is-active::after{ transform:scaleX(1); }

.exp-tabs-body{ display:grid; grid-template-columns:1.15fr 1fr; min-height:380px; background:var(--offwhite); box-shadow:0 40px 90px -44px rgba(38,36,31,0.32), 0 2px 0 rgba(38,36,31,0.04); }
.exp-tabs-media{ position:relative; overflow:hidden; }
.exp-tab-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1); transition:opacity 1s ease; }
.exp-tab-img.is-active{ opacity:1; animation:expTabKenBurns 9s ease-out forwards; }
.exp-tabs-panels{ position:relative; display:flex; align-items:center; padding:56px 72px; }
.exp-tab-panel{ display:none; }
.exp-tab-panel.is-active{ display:block; animation:expTabFadeIn .6s ease; }
@keyframes expTabFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes expTabKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
/* Unused by the 2026.3 render (no per-tab kicker line any more) — left in
   place as harmless dead code should a future pass want it back. */
.exp-tab-panel-kicker{ display:block; font-family:'Raleway',sans-serif; font-weight:400; font-style:italic; font-size:14px; color:var(--accent-warm); margin-bottom:16px; letter-spacing:0.01em; }
.exp-tab-panel-desc{ font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(24px,2.6vw,34px); line-height:1.4; color:var(--charcoal); margin-bottom:0; max-width:420px; text-wrap:balance; }
@media (prefers-reduced-motion: reduce){
  .exp-tab-img{ transition:none; }
  .exp-tab-img.is-active{ animation:none; }
  .exp-tab-panel.is-active{ animation:none; }
}
@media (max-width:860px){
  .exp-tabs{ margin-top:48px; }
  .exp-tabs-nav{ gap:8px; padding:0 8px 16px 8px; }
  .exp-tab-btn{ flex:1 1 0; padding:6px 4px 12px 4px; font-size:10.5px; }
  .exp-tabs-body{ grid-template-columns:1fr; min-height:auto; box-shadow:0 26px 60px -34px rgba(38,36,31,0.3); }
  .exp-tabs-media{ height:240px; }
  .exp-tabs-panels{ padding:36px 26px; }
  .exp-tab-panel-desc{ max-width:none; font-size:clamp(20px,5vw,24px); }
}

/* Superseded (2026 master redesign): Adventure/Coaching/Watersports full-
   bleed bands (name + positioning line over a photo, followed by a content
   panel with moment cards) — three separate product sections, replaced by
   the Explore/Learn/Play splitSection() chapters. .exp-band-quote below is
   the one exception: it's still used, by the new Philosophy section's
   closing statement. Left in place as harmless dead code. ---- */
.exp-band-media{ position:relative; height:66vh; min-height:440px; max-height:720px; overflow:hidden; display:flex; align-items:flex-end; }
.exp-band-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Dark at both edges, clear in the middle: the top cap means each band's
   photo fades in from shadow rather than starting at full brightness right
   where the previous section (choice panel, or another band) ends — a soft
   dissolve instead of a hard seam between two stacked visuals, with no gap
   needed. The bottom stays dark for the heading/eyebrow text over the image. */
.exp-band-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,42,54,0.5) 0%, rgba(21,42,54,0.04) 18%, rgba(21,42,54,0.02) 50%, rgba(21,42,54,0.72) 100%); }
.exp-band-media-content{ position:relative; z-index:2; padding:0 64px 56px 64px; }
.exp-band-media-content h2{ margin-top:14px; }
.exp-band-body{ padding:72px 64px; background:var(--ivory); }
.exp-band-body.sand{ background:var(--sand); }
.exp-band-copy{ max-width:640px; margin:0 auto; text-align:center; }
.exp-band-copy p{ margin-bottom:16px; }
.exp-band-copy p:last-child{ margin-bottom:0; }
/* No longer used by The Solace Difference's closing statement (2026.4,
   fourth pass replaced it with the two-line + orange-rule .exp-closing-mark
   treatment just below, per client feedback to drop the italic here) — left
   in place as harmless dead code; renderBand()'s optional `quote` param
   (app.js) still renders through this class for any band that supplies one. */
.exp-band-quote{ max-width:680px; margin:36px auto 0 auto; text-align:center; font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:clamp(19px,2vw,24px); line-height:1.5; color:var(--accent-warm); text-wrap:balance; }
@media (max-width:860px){
  .exp-band-media{ height:52vh; min-height:340px; }
  .exp-band-media-content{ padding:0 22px 32px 22px; }
  .exp-band-body{ padding:48px 22px; }
}

/* The Solace Difference's closing statement (2026.4, fourth pass): "Three
   dimensions." and "One Solace experience." either side of a short,
   centered orange rule, replacing the single italic accent-warm line the
   client felt didn't need to be in italic — the rule alone now carries the
   accent color, and both lines sit in plain charcoal for a quieter,
   more editorial finish. Margin trimmed to 32px (from the old quote's
   36px) since #philosophy's own oversized bottom padding, not this
   element's margin, was the real source of the "too much gap after it"
   feedback (see #philosophy above).
   Fifth pass (client: "the line... need to be vertical"): the two lines
   no longer stack with a short horizontal rule between them — they now
   sit side by side on one row with a vertical divider between, so "Three
   dimensions." and "One Solace experience." read as one balanced
   statement rather than two stacked ones. Stacks back to the original
   vertical arrangement below 640px, where the two phrases together don't
   comfortably fit one line, using a horizontal rule there instead (the
   fourth pass's original treatment) since a vertical divider only reads
   correctly between two things sitting side by side. */
.exp-closing-mark{ margin-top:32px; display:flex; align-items:center; justify-content:center; gap:24px; }
.exp-closing-line{
  font-family:'Raleway',sans-serif; font-weight:300; font-style:normal;
  font-size:clamp(19px,2vw,24px); line-height:1.5; color:var(--charcoal);
  text-wrap:balance; margin:0;
}
.exp-closing-rule{ display:inline-block; flex:0 0 auto; width:2px; height:28px; background:var(--accent-warm); }
@media (max-width:640px){
  .exp-closing-mark{ flex-direction:column; gap:14px; text-align:center; }
  .exp-closing-rule{ width:56px; height:2px; }
}

/* Superseded (2026 master redesign): moment grid, the photographic detail
   behind each of the old Adventure/Coaching/Watersports bands (momentGrid()
   in app.js, now dead). Left in place as harmless dead code. ---- */
.exp-moments{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:32px; max-width:1160px; margin:56px auto 0 auto; }
.exp-moment-img{ position:relative; height:200px; overflow:hidden; margin-bottom:18px; }
.exp-moment-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.16,.8,.3,1); }
.exp-moment:hover .exp-moment-img img{ transform:scale(1.05); }
/* Optional time-of-day kicker (Adventure's moments, framed as a typical
   day aboard) — small and quiet, above the title, same accent as the
   band's own eyebrow so the four cards read as one timeline. */
.exp-moment-time{ display:block; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-warm); margin-bottom:6px; }
.exp-moment h4{ font-family:'Raleway',sans-serif; font-weight:400; font-size:17px; color:var(--charcoal); margin:0 0 8px 0; }
.exp-moment p{ font-size:14px; line-height:1.6; margin:0; color:var(--muted); }
@media (prefers-reduced-motion: reduce){ .exp-moment-img img{ transition:none; } }
@media (max-width:640px){
  .exp-moments{ grid-template-columns:1fr; gap:28px; max-width:420px; }
  .exp-moment-img{ height:220px; }
}

/* Superseded (2026 master redesign): "what it can include" per-experience
   detail — this per-product includes list is replaced by the single,
   sitewide Included section (serviceList(), reused unchanged). Left in
   place as harmless dead code. ---- */
.exp-band-extra{ max-width:640px; margin:48px auto 0 auto; padding-top:40px; border-top:1px solid var(--rule); text-align:center; }
.exp-band-extra-label{ font-weight:600; color:var(--accent-warm); margin-bottom:4px; }
.exp-band-extra-copy{ text-align:left; margin-top:16px; }
.exp-band-extra .service-list{ text-align:left; }
.exp-band-note{ font-style:italic; margin-top:20px; }
.exp-band-extra .exp-partner{ margin-top:20px; }

/* Superseded (2026 master redesign): Adventure's own bespoke sections below
   its shared opening media/intro/moment-grid (see renderAdventureBand() in
   app.js, now dead). Left in place as harmless dead code. ---- */
.exp-adv-note{ max-width:640px; margin:24px auto 0 auto; text-align:center; font-style:italic; color:var(--charcoal); }

/* "A typical day?" — one full-bleed editorial moment rather than a card
   grid: the copy's point is that there isn't a fixed itinerary, so this
   reads as a single atmospheric photograph carrying a longer piece of
   writing, deliberately different in shape from the moment grid above it. */
/* Shrunk from an initial 640/520px: client feedback was that the whole
   Adventure section ran far too long compared to Coaching/Watersports, so
   this now runs shorter and also carries the closing "freedom to change
   the plan" line as its last (italic) line, rather than that idea getting
   its own separate full-width section further down. */
.exp-adv-day{ position:relative; min-height:440px; display:flex; align-items:center; overflow:hidden; }
.exp-adv-day img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.exp-adv-day-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(21,42,54,0.8) 0%, rgba(21,42,54,0.45) 46%, rgba(21,42,54,0.12) 100%); }
.exp-adv-day-content{ position:relative; z-index:2; max-width:560px; padding:56px 64px; }
.exp-adv-day-kicker{ font-family:'Raleway',sans-serif; font-size:15px; font-weight:300; font-style:italic; color:rgba(250,247,240,0.78); margin:0 0 6px 0; }
.exp-adv-day-lead{ font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(26px,3.2vw,38px); line-height:1.15; color:var(--ivory); margin:0 0 18px 0; text-wrap:balance; }
.exp-adv-day-body p{ color:rgba(250,247,240,0.85); font-size:15.5px; line-height:1.65; margin:0 0 12px 0; }
.exp-adv-day-body p:last-child{ margin-bottom:0; font-style:italic; color:var(--accent-warm-on-dark); }
@media (max-width:860px){
  .exp-adv-day{ min-height:auto; }
  .exp-adv-day-scrim{ background:linear-gradient(180deg, rgba(21,42,54,0.42) 0%, rgba(21,42,54,0.58) 42%, rgba(21,42,54,0.88) 100%); }
  .exp-adv-day-content{ padding:36px 24px; max-width:none; }
}

/* "What you might experience" — short phrases set as one flowing, poetic
   line rather than a checklist grid, per client feedback that the emphasis
   here should be on feeling, not a list of activities. Tighter vertical
   padding than the shared .exp-band-body default (this block is just a
   label and one line, so the full 72px reads as excess empty space). */
/* Still used: reused by the new Philosophy section's "ingredients" line
   (sailing, exploring, learning, coaching, watersports...) — see
   renderExperiencePage(). */
.exp-adv-feelings-wrap{ text-align:center; padding-top:48px; padding-bottom:48px; }
.exp-adv-feelings{ max-width:820px; margin:20px auto 0 auto; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,2vw,22px); line-height:2.1; color:var(--charcoal); text-wrap:balance; }
.exp-adv-feelings-dot{ display:inline-block; width:4px; height:4px; margin:0 14px; border-radius:50%; background:var(--accent-warm); opacity:0.6; vertical-align:middle; }

/* Superseded: "the freedom to change the plan" used to be its own
   full-width navy section here. Folded into .exp-adv-day's closing line
   instead once the whole Adventure section was cut down for length, so
   this is no longer rendered. Left in place as harmless dead code. */
.exp-adv-freedom{ background:var(--navy); padding:96px 64px; text-align:center; }
.exp-adv-freedom-body{ max-width:600px; margin:24px auto 0 auto; }
.exp-adv-freedom-body p{ color:rgba(250,247,240,0.82); margin:0 0 14px 0; }
.exp-adv-freedom-body p:last-child{ margin-bottom:0; }
.exp-adv-freedom-line{ max-width:560px; margin:28px auto 0 auto; font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:clamp(19px,2vw,24px); line-height:1.5; color:var(--accent-warm-on-dark); text-wrap:balance; }
@media (max-width:860px){
  .exp-adv-freedom{ padding:64px 24px; }
}

/* Superseded (2026 master redesign): full-bleed atmospheric photograph that
   used to close the Adventure band. Left in place as harmless dead code
   (.link-arrow.on-dark just below is a small generic utility and stays
   live either way). */
.exp-adv-final{ position:relative; min-height:42vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.exp-adv-final img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.exp-adv-final-scrim{ position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(21,42,54,0.48) 0%, rgba(21,42,54,0.34) 55%, rgba(21,42,54,0.6) 100%); }
.exp-adv-final-content{ position:relative; z-index:2; text-align:center; padding:40px; }
.exp-adv-final-line{ font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(24px,3.2vw,38px); color:var(--ivory); margin:0 0 24px 0; text-wrap:balance; }
.link-arrow.on-dark{ color:var(--ivory); border-bottom-color:var(--accent-warm-on-dark); }
@media (max-width:860px){
  .exp-adv-final{ min-height:340px; }
}

/* ---- The Yacht: supporting line, key message and a quiet spec row.
   Still used by the always-dark #yachtOverlay only (see .yacht-sub
   there) — the main section no longer uses either of these two. ---- */
.yacht-sub{ margin-top:10px; font-size:15px; color:rgba(250,247,240,0.72); }
/* Superseded (2026.4, sixth pass): the key message now renders inside
   .yacht-showcase-content as .yacht-showcase-tagline, styled for the
   section's new light background instead of navy. Nothing references
   .yacht-keymessage any more; left in place as harmless dead code. */
.yacht-keymessage{ max-width:720px; margin:40px auto 0 auto; text-align:center; font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:clamp(21px,2.4vw,28px); line-height:1.4; color:var(--accent-warm-on-dark); text-wrap:balance; }
/* 2026.4, fourth pass: client feedback that the whole boat lived behind the
   "Discover Pressure Drop" link, specs included — .yacht-lead (the first
   body paragraph, previously only shown inside the overlay) and
   .yacht-facts (below) put the section's most important information
   directly on the page. Reference was a spec-sheet page for a different,
   motorized boat with a two-column draught/displacement/fuel/max-speed
   layout — that data doesn't exist for this sailing catamaran, so rather
   than invent numbers, .yacht-facts took the same "quiet spec row"
   .yacht-specs already used here and gave each figure real presence: a
   large value plus a small label underneath, one .yacht-fact per existing
   c.yacht.specs string (split on its first space in app.js — a plain
   string split, not new data).
   2026.4, sixth pass: kept exactly as a value/label fact row (still no
   invented specs — the new reference layout's "2 × 45 HP · Yanmar" is an
   engine spec that doesn't exist for this sailing catamaran either), just
   recolored from ivory-on-navy to charcoal-on-light now that the section
   around it is light (see .yacht-showcase below), and nudged up under the
   showcase instead of under a centered lead paragraph — .yacht-lead itself
   is superseded by .yacht-showcase-lead inside the new layout; nothing
   references .yacht-lead any more, left as harmless dead code. */
.yacht-lead{ max-width:640px; margin:24px auto 0 auto; text-align:center; font-size:16px; line-height:1.65; color:rgba(250,247,240,0.85); }
.yacht-facts{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:32px 0; max-width:760px; margin:32px auto 0 auto; }
.yacht-fact{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; padding:0 28px; border-right:1px solid var(--rule); }
.yacht-fact:last-child{ border-right:none; }
.yacht-fact-value{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(24px,2.6vw,32px); color:var(--charcoal); line-height:1.2; }
.yacht-fact-label{ margin-top:6px; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); text-align:center; }
@media (max-width:640px){
  .yacht-facts{ gap:24px 0; }
  .yacht-fact{ padding:0 16px; }
  .yacht-fact-value{ font-size:22px; }
  .yacht-fact-label{ font-size:10px; }
}

/* ---- The Yacht, sixth pass: an editorial showcase — Pressure Drop's own
   photo on an angled full-bleed panel, headline/specs/tagline beside it,
   a small thumbnail strip below. Modeled on a reference layout Anais
   commissioned and shared, adapted to this site's real content: see the
   long comment above the yacht-section markup in app.js for what was
   changed and why (no fabricated carousel chrome, no invented specs).
   Bleeds past the section's own 64px side padding (negative margin, same
   technique as .exp-carousel above) so the diagonal photo panel can
   actually reach the edge instead of sitting in a boxed-in column. ---- */
.yacht-showcase{ position:relative; margin:0 -64px; min-height:min(74vh,620px); display:flex; align-items:stretch; }
.yacht-showcase-photo{
  position:absolute; inset:0; width:60%;
  clip-path:polygon(0 0, 100% 0, 58% 100%, 0 100%);
  overflow:hidden;
}
.yacht-showcase-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.yacht-showcase-content{
  position:relative; z-index:2;
  margin-left:min(56%,720px); flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  max-width:480px; padding:64px 64px 64px 0;
}
.yacht-showcase-content .eyebrow{ margin-bottom:2px; }
.yacht-showcase-title{
  font-family:'Raleway',sans-serif; font-weight:300; text-transform:uppercase;
  letter-spacing:0.05em; font-size:clamp(36px,4.4vw,64px); line-height:1.08;
  color:var(--charcoal); margin:14px 0 0 0; text-wrap:balance;
}
.yacht-showcase-sub{ margin-top:14px; font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.yacht-showcase-rule{ display:block; width:44px; height:2px; margin:22px 0; background:var(--accent-warm); }
.yacht-showcase-tagline{ font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:clamp(18px,1.9vw,22px); line-height:1.4; color:var(--charcoal); text-wrap:balance; margin:0; }
.yacht-showcase-lead{ margin-top:16px; font-size:15px; line-height:1.65; color:var(--muted); max-width:420px; }
/* Small vertical filmstrip of the same photos the "Discover Pressure Drop"
   overlay's gallery uses in full — see the reused .yacht-gallery-item
   class on these figures in app.js for why clicking one already opens the
   standalone lightbox with no extra JS. Pinned to the showcase's right
   edge, over the light background past the photo's diagonal, echoing the
   reference layout's own thumbnail rail. */
.yacht-showcase-thumbs{ position:absolute; z-index:2; right:0; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:24px; }
.yacht-showcase-thumb{ width:56px; height:56px; margin:0; padding:0; overflow:hidden; cursor:pointer; border:1px solid transparent; border-radius:2px; opacity:0.6; transition:opacity .25s ease, border-color .25s ease; }
.yacht-showcase-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.yacht-showcase-thumb:hover{ opacity:1; }
.yacht-showcase-thumb.is-active{ opacity:1; border-color:var(--accent-warm); }
@media (max-width:900px){
  /* The diagonal composition needs real width either side of the cut to
     read as intentional rather than cramped — below 900px it stops
     working (checked visually, not just against the 860px sitewide
     breakpoint most of this page uses) so the whole showcase drops the
     angle and stacks: full-bleed photo on top (a plain rectangle, no
     clip-path), the text column below it at full width, thumbnails
     as a horizontal row under the photo instead of an overlay rail. */
  .yacht-showcase{ margin:0 -22px; flex-direction:column; min-height:auto; }
  .yacht-showcase-photo{ position:relative; width:auto; height:52vw; max-height:340px; clip-path:none; }
  .yacht-showcase-content{ margin-left:0; max-width:none; padding:32px 22px 0 22px; text-align:center; }
  .yacht-showcase-rule{ margin:18px auto; }
  .yacht-showcase-lead{ max-width:480px; margin-left:auto; margin-right:auto; }
  .yacht-showcase-thumbs{ position:relative; inset:auto; flex-direction:row; justify-content:center; padding:20px 22px 0 22px; }
}
/* Superseded (2026.4, seventh pass): everything from .yacht-showcase down
   to here, and .yacht-facts/.yacht-fact* further up, no longer render —
   replaced by .pd-stage just below. Left in place as harmless dead code. */

/* ============================================================
   THE YACHT — Pressure Drop product presentation (2026.4, seventh pass)
   Built from Anais's brief + mockup (an automotive-configurator layout
   translated to sailing). See the long comment above the yacht-section
   markup in app.js for the what/why; this is the how.

   Geometry. Everything in the angled image area is laid out in the lead
   photo's own coordinates, so the frame can never slice through the boat
   whatever the viewport: the photo is always rendered --pd-h tall, which
   makes it --pd-wi wide (its 1800×1012 aspect), with its left edge at
   --pd-x. The boat in it runs from ~22% (bows) to ~66% (stern) across
   and the masthead sits at ~45%, so every edge below is a fraction of
   --pd-wi from --pd-x:
     - the outer outline is one parallelogram leaning the mockup's way,
       both long sides at the same slope (0.25 × --pd-wi across the full
       height) — right side from 0.50 to 0.75, clearing the masthead at
       the top and the stern at the bottom;
     - inside it, a second diagonal (the "seam", 0.32 at the top to 0.18
       at the bottom) leans the other way, roughly parallel to the
       gennaker's leading edge, splitting the area into the environment
       photo (left) and the boat (right) with a thin ivory gap;
     - the title block sits in the light area right of the outline, its
       lower lines indented so they clear the diagonal as it moves right
       further down — the stepped indentation in the mockup.
   ============================================================ */
.pd-stage{
  /* Height: as tall as 46vw, but never so tall that the frame pushes the
     one-line title into the thumbnail rail (the second term is that
     limit, solved from the geometry below for a 3.5vw title). */
  --pd-h: clamp(480px, min(46vw, 67.8vw - 314px), 780px);
  --pd-wi: calc(var(--pd-h) * 1.7787);
  /* Placed so the outline's top-left corner always lands 16px from the
     left edge (0.1245 × h + 72px is that corner's offset from --pd-x). */
  --pd-x: calc(var(--pd-h) * 0.1245 + 72px);
  /* Eighth pass: one side photo from the section's left edge (client
     asked to drop the split frame / triangles). The photo therefore
     starts at x = 0, which frees the room the environment wedge used to
     take, so the height limit is recomputed for the title's new start
     (0.8894 × h + 90px) — overrides the two lines above. */
  --pd-h: clamp(480px, min(46vw, 77.3vw - 277px), 780px);
  --pd-x: 0px;
  --pd-gap: 12px;
  --pd-slope: calc(var(--pd-wi) * 0.25);        /* horizontal run of the outline over the full height */
  --pd-seam-t: calc(var(--pd-x) + var(--pd-wi) * 0.32);
  --pd-seam-b: calc(var(--pd-x) + var(--pd-wi) * 0.18);
  --pd-edge-t: calc(var(--pd-x) + var(--pd-wi) * 0.50);
  --pd-edge-b: calc(var(--pd-edge-t) + var(--pd-slope));
  --pd-env-b: calc(var(--pd-seam-b) - var(--pd-gap) - 44px);
  --pd-env-t: calc(var(--pd-env-b) - var(--pd-slope));
  position:relative; margin:0 -64px; height:var(--pd-h);
}
.pd-frame{ position:absolute; inset:0; }
/* One quiet neutral plane (the brief's "subtle ivory / stone planes"):
   the light triangle left of the outline is filled a shade darker, its
   edge parallel to the outline with the same thin gap as the seam. */
/* Superseded (eighth pass): .pd-plane, .pd-env and .pd-env-img below, and
   .pd-index-num further down, no longer render (client removed the split
   frame and the "01" mark) — left in place as harmless dead code. */
.pd-plane{
  position:absolute; inset:0; background:var(--sand);
  clip-path:polygon(0 0, calc(var(--pd-env-t) - var(--pd-gap)) 0, calc(var(--pd-env-b) - var(--pd-gap)) 100%, 0 100%);
}
/* The frame fades in rather than sliding up: it's anchored to the
   section's top edge, so the site-wide .reveal translate would open a gap
   there while it animated. */
html.js-anim .pd-frame.reveal{ transform:none; transition:opacity 1.1s ease; }
.pd-env, .pd-hero{ position:absolute; inset:0; overflow:hidden; }
.pd-env{
  clip-path:polygon(var(--pd-env-t) 0, calc(var(--pd-seam-t) - var(--pd-gap)) 0, calc(var(--pd-seam-b) - var(--pd-gap)) 100%, var(--pd-env-b) 100%);
  background:var(--stone);
}
/* Scaled up (1.43 × the frame height) and anchored top-left so the angle
   frames Es Vedrà and open water, and the boat sailing further down this
   same photo stays tucked behind the seam under .pd-hero — otherwise
   she'd appear twice, side by side. The extra height also covers the
   scroll parallax in initYachtViewer() (±18px) with room to spare. */
.pd-env-img{
  position:absolute; top:-18px; height:calc(var(--pd-h) * 1.43); width:auto; max-width:none;
  left:calc(var(--pd-env-t) - 12px);
  will-change:transform;
}
.pd-hero{
  clip-path:polygon(var(--pd-seam-t) 0, var(--pd-edge-t) 0, var(--pd-edge-b) 100%, var(--pd-seam-b) 100%);
  background:var(--stone);
}
/* Every view renders at the frame's full height (so each keeps its own
   aspect ratio — no distorting cover crop), its left edge placed per view
   via --vx (c.yacht.views[].x in content.js). Crossfade + a slow settle
   from a hair larger, ~0.7s, per the brief ("smooth, slow, deliberate"). */
.pd-hero-img{
  position:absolute; top:0; height:100%; width:auto; max-width:none;
  left:calc(var(--pd-x) + var(--pd-wi) * var(--vx, 0));
  opacity:0; transform:scale(1.035); transform-origin:50% 60%;
  transition:opacity .7s ease, transform 1.2s cubic-bezier(.16,.8,.3,1);
}
.pd-hero-img.is-active{ opacity:1; transform:none; z-index:2; }
/* Eighth pass: the single side photo — from the left edge to the same
   leaning right edge as before (clear of the masthead at the top and the
   stern at the bottom). The 4:3 views are only just as wide as the frame
   at this height, so they get a hair of extra width (cropped, never
   stretched) to guarantee the bottom-right corner is always covered. */
.pd-hero{ clip-path:polygon(0 0, var(--pd-edge-t) 0, var(--pd-edge-b) 100%, 0 100%); }
.pd-hero-img{ min-width:calc(var(--pd-edge-b) + 4px); object-fit:cover; object-position:left center; }
.pd-hero-img.is-prev{ opacity:1; transform:none; z-index:1; transition:none; }

/* Title block — top of the section at the same 40px as every other
   section title (client feedback), in the light area right of the angle.
   Two alignment lines, as in the mockup: eyebrow + title start just clear
   of the diagonal at the title's own height (the outline leans 0.4447px
   right per px down — 0.25 × 1.7787 — and the title's baseline sits
   ~126px down, hence the +90px incl. a 34px margin), and the sub-line,
   rule and tagline are indented further (--pd-indent) so they clear it
   lower down too. */
.pd-head{
  position:absolute; z-index:2; top:0;
  --pd-indent: clamp(96px, 9vw, 170px);
  left:calc(var(--pd-edge-t) + 90px);
  right:calc(52px + 64px + 40px);   /* clear of the thumbnail rail + its indicator */
  text-align:left;
}
/* 38px (not 40): this eyebrow is a <p>, whose taller line box adds ~2px
   of leading above the text — 38 lands the letters exactly where
   #philosophy's and every other section's eyebrow sits (measured). */
.pd-head .eyebrow{ margin:38px 0 0 0; }
.pd-head .pd-sub, .pd-head .pd-tagline{ margin-left:var(--pd-indent); }
.pd-title{
  margin:14px 0 0 0;
  font-family:'Raleway',sans-serif; font-weight:200; text-transform:uppercase;
  font-size:clamp(34px,3.5vw,56px); line-height:1.05; letter-spacing:0.075em;
  color:var(--charcoal); white-space:nowrap;
}
.pd-sub{ margin:16px 0 0 0; font-family:'Raleway',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--charcoal); line-height:1.4; }
.pd-rule{ display:block; width:34px; height:1px; margin:26px 0 0 var(--pd-indent); background:var(--accent-warm); }
.pd-tagline{ margin:22px 0 0 0; font-family:'Raleway',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.26em; line-height:1.9; text-transform:uppercase; color:var(--charcoal); max-width:18em; text-wrap:balance; }

/* Thumbnail rail — right edge, small, like the mockup; a short orange
   rule marks the active view. Hover/click swaps the main image. */
.pd-thumbs{ position:absolute; z-index:2; top:62px; right:52px; display:flex; flex-direction:column; gap:10px; }
.pd-thumb{
  position:relative; display:block; width:64px; height:46px; padding:0; margin:0;
  border:0; background:var(--stone); cursor:pointer; overflow:visible;
  opacity:.55; transition:opacity .4s ease;
}
.pd-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.pd-thumb::after{
  content:''; position:absolute; top:50%; left:calc(100% + 12px); width:20px; height:1px;
  background:var(--accent-warm); transform:scaleX(0); transform-origin:left center;
  transition:transform .5s cubic-bezier(.16,.8,.3,1);
}
.pd-thumb:hover, .pd-thumb:focus-visible{ opacity:.85; }
.pd-thumb.is-active{ opacity:1; }
.pd-thumb.is-active::after{ transform:scaleX(1); }

.pd-arrow{
  position:absolute; z-index:2; top:max(58%, 330px); width:44px; height:44px; margin-top:-22px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer; color:var(--charcoal);
  opacity:.7; transition:opacity .3s ease, transform .3s ease;
}
.pd-arrow svg{ width:22px; height:22px; display:block; }
.pd-arrow:hover{ opacity:1; }
.pd-arrow-prev{ left:36px; }
/* Eighth pass: with the photo now running to the left edge, the "‹"
   arrow would sit on the photo — both arrows are paired under the
   thumbnail rail instead, on the light background. */
.pd-arrow-prev{ left:auto; right:92px; }
.pd-arrow-prev:hover{ transform:translateX(-3px); }
.pd-arrow-next{ right:48px; }
.pd-arrow-next:hover{ transform:translateX(3px); }

.pd-index-num{
  position:absolute; z-index:2; right:52px; bottom:-6px;
  font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(64px,6.4vw,104px);
  line-height:1; letter-spacing:0.02em; color:var(--charcoal);
}

/* Foot: live counter (left), spec row (centre), "— Pressure Drop" (right). */
.pd-foot{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:32px; margin-top:28px; }
.pd-mini-rule{ display:inline-block; width:22px; height:1px; background:var(--accent-warm); vertical-align:middle; margin-right:14px; }
.pd-counter{ display:flex; flex-direction:column; gap:14px; justify-self:start; }
.pd-counter-label, .pd-index{ font-size:10.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--charcoal); white-space:nowrap; }
.pd-counter-row{ display:flex; align-items:center; font-size:10.5px; font-weight:500; letter-spacing:0.16em; color:var(--muted); white-space:pre; }
.pd-counter-row #pdViewNum{ color:var(--charcoal); font-weight:600; }
.pd-progress{ position:relative; display:inline-block; width:72px; height:1px; margin-left:18px; background:var(--rule); }
.pd-progress-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--accent-warm); transition:width .6s cubic-bezier(.16,.8,.3,1); }
.pd-index{ justify-self:end; }

/* Spec row — small, precise, technical; thin ORANGE dividers (client). */
.pd-specs{ display:flex; align-items:stretch; justify-content:center; }
.pd-spec{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:2px 40px; }
.pd-spec + .pd-spec{ border-left:1px solid var(--accent-warm); }
.pd-spec-value{ font-family:'Raleway',sans-serif; font-size:17px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:var(--charcoal); white-space:nowrap; line-height:1.2; }
.pd-spec-label{ font-size:9.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }

.pd-cta{ text-align:center; margin-top:40px; }
/* Orange underline (client) instead of the site-wide teal .link-arrow one. */
.pd-cta .link-arrow, button.link-arrow.pd-cta-btn{ border-bottom-color:var(--accent-warm); }

/* ---- Eighth pass: the spec plate (client: "move this to the left and
   make it follow the diagonal... elegant, high end... refer to the Porsche
   example"). A dark plate hung directly under the photo, its right side
   continuing the photo's own diagonal edge down (same 0.4447px-per-px
   lean) and its left side parallel to it — the reference's move of
   carrying the figures in the lower, darker part of its angled band.
   Figures in ivory, dividers in the light orange that reads on dark.
   Width scales with the photo so it always clears the counter at left. */
.yacht-section{ --pd-plate-h:104px; }
.pd-stage{
  --pd-plate-run: calc(var(--pd-plate-h) * 0.4447);
  --pd-plate-w: clamp(420px, calc(var(--pd-wi) * 0.5), 640px);
}
.pd-plate{
  position:absolute; z-index:1; left:0; right:0; top:100%; height:var(--pd-plate-h);
  background:var(--navy);
  clip-path:polygon(calc(var(--pd-edge-b) - var(--pd-plate-w)) 0, var(--pd-edge-b) 0, calc(var(--pd-edge-b) + var(--pd-plate-run)) 100%, calc(var(--pd-edge-b) - var(--pd-plate-w) + var(--pd-plate-run)) 100%);
}
html.js-anim .pd-plate.reveal{ transform:none; transition:opacity 1.1s ease .15s; }
.pd-plate .pd-specs{
  position:absolute; top:50%;
  left:calc(var(--pd-edge-b) - var(--pd-plate-w) / 2 + var(--pd-plate-run) / 2);
  transform:translate(-50%, -50%);
}
.pd-plate .pd-spec{ padding:2px clamp(18px, calc(5.8vw - 50px), 34px); }
.pd-plate .pd-spec + .pd-spec{ border-left-color:var(--accent-warm-on-dark); }
.pd-plate .pd-spec-value{ color:var(--ivory); }
.pd-plate .pd-spec-label{ color:rgba(250,247,240,0.62); }
/* The foot row now shares the plate's band: same height, no top margin,
   counter and "— Pressure Drop" vertically centred beside it. */
.pd-foot{ margin-top:0; min-height:var(--pd-plate-h); }
.pd-cta{ margin-top:36px; }

/* ---- Ninth pass (client): "Balance 526 · 2025" flush left under the
   title, "The boat behind the experience." on one line straight under
   it, then the new body copy and the "Discover the specs" button (moved
   up from the bottom of the section).
   The block starts a little further right than before (120px past the
   diagonal's top, was 90) so the title, sub-line and tagline all sit
   flush on one left edge and still clear the photo. Below them, the
   body's lines step right along the diagonal instead — an invisible float
   (::before) whose slanted edge runs exactly parallel to the photo's
   edge, 34px off it, so every line of the paragraph (and the button)
   keeps the same distance from the angle: the text follows the diagonal
   rather than colliding with it. (0.4447 is the diagonal's lean in px per
   px; 86px = 120 − 34 offsets it to start at y ≈ 193, just below the
   tagline.) */
.pd-head{ left:calc(var(--pd-edge-t) + 120px); }
.pd-head::before{
  content:''; float:left;
  width:calc(var(--pd-h) * 0.4447 - 86px); height:var(--pd-h);
  shape-outside:polygon(0 0, 0 193px, 100% 100%, 0 100%);
}
.pd-head .pd-sub, .pd-head .pd-tagline{ margin-left:0; }
.pd-head .pd-sub{ margin-top:14px; }
.pd-head .pd-tagline{ margin-top:10px; max-width:none; white-space:nowrap; line-height:1.5; }
.pd-head .pd-rule{ margin:22px 0 0 0; }
.pd-body{ margin-top:20px; max-width:620px; }   /* keeps lines to a readable length on wide screens */
.pd-body p{ font-size:15px; line-height:1.7; color:var(--muted); margin:0 0 12px 0; }
.pd-body p:last-child{ margin-bottom:0; }
.pd-head-cta{ margin-top:22px; }
/* Twelfth pass: back under the text (client), a little more air above it
   than in the ninth pass, and the same type as the foot-row version. */
.pd-head .pd-head-cta{ margin-top:30px; }
.pd-head-cta .link-arrow{ font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0.14em; line-height:1.4; }
.pd-head-cta .link-arrow{ border-bottom-color:var(--accent-warm); }
/* Tenth pass: with the tagline gone and the copy condensed, the text fits
   beside the photo again at every desktop width at full size (measured),
   so the ninth pass's 14px laptop override is dropped and the stacked
   layout goes back to starting at 1180px. */
/* Eleventh pass: the slightly longer copy is set a touch smaller on the
   narrowest side-by-side widths so it keeps clear air above the plate. */
@media (max-width:1439px) and (min-width:1321px){
  .pd-body p{ font-size:14px; line-height:1.62; }
}
@media (max-width:1320px){
  .pd-head::before{ display:none; }
  .pd-head .pd-rule{ margin:22px auto 0 auto; }
  .pd-body{ max-width:600px; margin-left:auto; margin-right:auto; }
}
@media (max-width:900px){
  .pd-head .pd-tagline{ font-size:11px; letter-spacing:0.18em; margin-top:10px; }
  .pd-body p{ font-size:14.5px; }
}

/* Tenth pass: "Discover the specs" now sits in the foot row where
   "— Pressure Drop" was, right-aligned (client). Set explicitly because a
   <button>.link-arrow inherits its font from its parent. */
.pd-foot-cta .link-arrow{ font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0.14em; line-height:1.4; border-bottom-color:var(--accent-warm); }
@media (max-width:900px){
  .pd-index.pd-foot-cta{ display:block; order:3; justify-self:center; }
}

@media (prefers-reduced-motion: reduce){
  .pd-hero-img, .pd-thumb, .pd-thumb::after, .pd-progress-fill, .pd-arrow{ transition:none; }
  .pd-hero-img{ transform:none; }
}

/* Twelfth pass: now starts at 1320px, measured with the button back
   under the copy (eleventh pass: 1260px).
   Ninth pass: this stacked layout now starts at 1320px (was 1180) — with
   the new body copy in the title block, the side-by-side version only has
   room for it from ~1320px up (measured).
   Tablet / small laptop: below ~1180px the one-line title can no longer
   sit beside the angled frame at a useful size, so the title block moves
   above it, centred like every other section title; the frame, rail,
   arrows and "01" keep the desktop composition underneath. The rail and
   arrows are placed from the stage's bottom edge (= the frame's) since
   the title block's height above them isn't fixed. */
@media (max-width:1320px) and (min-width:901px){
  .pd-stage{ --pd-h: clamp(440px, 48vw, 560px); height:auto; display:flex; flex-direction:column; }
  .pd-head{ position:relative; left:auto; right:auto; order:0; text-align:center; padding:0 64px; }
  .pd-head .pd-sub, .pd-head .pd-tagline{ margin-left:auto; margin-right:auto; }
  .pd-rule{ margin:24px auto 0 auto; }
  .pd-frame{ position:relative; inset:auto; order:1; height:var(--pd-h); margin-top:40px; }
  .pd-thumbs{ top:auto; bottom:calc(var(--pd-h) - 40px - 214px); }
  .pd-arrow{ top:auto; margin-top:0; bottom:calc(var(--pd-h) * 0.42 - 22px); }
  .pd-spec{ padding:2px 28px; }
  .pd-plate .pd-spec{ padding:2px 16px; }
}

/* Phones / small tablets: the title block moves above the image area,
   centred (like every other section title at this size); the angled area
   keeps its two-photo split but spans the full width; thumbnails become a
   row; the big "01" mark and the arrows drop out (thumbs are the control
   on touch). */
@media (max-width:900px){
  .pd-stage{
    --pd-h: clamp(280px, 80vw, 460px);
    /* The whole boat has to fit the phone's width here, so the frame's
       left corner is allowed off-screen instead (the env photo is then
       just the visible wedge at the top-left). */
    --pd-x: 0px;
    --pd-gap: 8px;
    margin:0 -22px; height:auto;
    display:flex; flex-direction:column;
  }
  .pd-head{ position:relative; left:auto; right:auto; order:0; text-align:center; padding:0 22px; }
  .pd-head .eyebrow{ margin-top:-2px; }
  .pd-title{ font-size:clamp(28px,8vw,40px); letter-spacing:0.06em; }
  .pd-head .pd-sub{ font-size:11.5px; letter-spacing:0.26em; margin-left:0; }
  .pd-rule{ margin:20px auto 0 auto; }
  .pd-head .pd-tagline{ font-size:11.5px; letter-spacing:0.22em; margin:18px auto 0 auto; }
  .pd-frame{ position:relative; inset:auto; order:1; height:var(--pd-h); margin-top:32px; }
  .pd-thumbs{ position:relative; top:auto; right:auto; order:2; flex-direction:row; justify-content:center; gap:10px; margin-top:18px; padding:0 22px; }
  .pd-thumb{ width:58px; height:42px; }
  .pd-thumb::after{ top:auto; bottom:-10px; left:50%; width:18px; margin-left:-9px; transform-origin:center; }
  .pd-arrow, .pd-index-num{ display:none; }
  .pd-foot{ grid-template-columns:1fr; row-gap:26px; justify-items:center; margin-top:30px; }
  .pd-counter{ align-items:center; justify-self:center; order:2; }
  .pd-specs{ order:1; flex-wrap:nowrap; }
  .pd-spec{ padding:2px clamp(8px, 2.6vw, 18px); }
  .pd-spec-value{ font-size:15px; letter-spacing:0.08em; }
  .pd-spec-label{ font-size:8.5px; letter-spacing:0.14em; }
  .pd-index{ display:none; }
  .pd-cta{ margin-top:30px; }
  /* Eighth pass: on phones the plate becomes a plain centred row again,
     back in the flow under the thumbnails (no room for the angle). */
  .pd-plate{ position:relative; top:auto; left:auto; right:auto; order:3; height:auto; background:none; clip-path:none; margin-top:28px; }
  .pd-plate .pd-specs{ position:static; transform:none; justify-content:center; }
  .pd-plate .pd-spec{ padding:2px clamp(8px, 2.6vw, 18px); }
  .pd-plate .pd-spec + .pd-spec{ border-left-color:var(--accent-warm); }
  .pd-plate .pd-spec-value{ color:var(--charcoal); }
  .pd-plate .pd-spec-label{ color:var(--muted); }
  .pd-foot{ min-height:0; margin-top:26px; }
  .pd-foot-gap{ display:none; }
}
/* Superseded (2026.4, fourth pass): this quiet uppercase strip was the
   yacht section's whole spec display, hidden behind the "Discover
   Pressure Drop" link. No markup references it any more — .yacht-facts
   above replaced it directly (see the yacht-section markup in app.js) —
   left in place as harmless dead code rather than deleted. */
.yacht-specs{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 0; max-width:820px; margin:40px auto 0 auto; }
.yacht-specs span{ font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(250,247,240,0.75); padding:0 16px; border-right:1px solid rgba(250,247,240,0.22); }
.yacht-specs span:last-child{ border-right:none; }
@media (max-width:640px){
  .yacht-specs span{ padding:0 10px; font-size:10.5px; }
}

/* Light-mode mirror of .yacht-specs above, for the same quiet uppercase
   spec-row treatment on a sand/ivory background (the 2026.2 redesign's
   merged Details section) rather than the navy yacht section. */
.facts-line{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 0; max-width:820px; margin:32px auto 0 auto; }
.facts-line span{ font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); padding:0 16px; border-right:1px solid var(--rule); }
.facts-line span:last-child{ border-right:none; }
@media (max-width:640px){
  .facts-line span{ padding:0 10px; font-size:10.5px; }
}

/* Experience page's post-hero intro (superseded by the choice panels and
   bands above, kept only in case any archived content still refers to it). */
.section.exp-intro{ padding:48px 64px; background:var(--sand); }
.exp-intro-lede{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,2.2vw,26px); line-height:1.55; color:var(--charcoal); }
.exp-intro-lede .ws-accent{ color:var(--accent-warm); font-style:normal; font-weight:400; }
.exp-intro-support{ margin-top:20px; font-size:15.5px; }
/* "The experience" six elements — a horizontally scrolling filmstrip of
   icon cards rather than a static grid. Cards bleed to the viewport edge
   (negative margin cancels the section's own padding) and peek at the
   right so the row visibly continues, inviting a swipe/scroll rather than
   a full stop-and-read list. Scroll-snap for a settled resting position;
   native touch/trackpad scrolling on all devices, no arrow controls needed
   for only six items. Scoped to this section only. */
.exp-carousel{ margin:0 -64px; }
.exp-carousel-track{
  display:flex; gap:18px; overflow-x:auto; padding:6px 64px 20px 64px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
/* On wide desktop, all six cards already fit without scrolling, so the
   left-aligned "peek" track leaves a large dead gap on the right that the
   64px left padding doesn't mirror. Past the width where six cards + gaps
   comfortably fit (1266px of content), center the row instead — narrower
   viewports keep the original scrollable, edge-peeking filmstrip. */
@media (min-width:1440px){
  .exp-carousel-track{ justify-content:center; }
}
.exp-carousel-card{
  scroll-snap-align:start; flex:0 0 auto; width:196px;
  background:var(--ivory); border:1px solid var(--rule); border-radius:2px;
  padding:22px 20px;
  transition:transform .35s cubic-bezier(.16,.8,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.exp-carousel-card:hover{ transform:translateY(-5px); border-color:var(--accent-warm); box-shadow:0 16px 28px -18px rgba(38,36,31,0.28); }
.exp-carousel-icon{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  color:var(--accent-warm);
  transition:background-color .3s ease, color .3s ease;
}
.exp-carousel-card:hover .exp-carousel-icon{ background:var(--accent-warm); color:var(--ivory); }
.exp-carousel-icon svg{ width:18px; height:18px; }
.exp-carousel-card h4{ font-family:'Raleway',sans-serif; font-weight:400; font-size:16px; color:var(--charcoal); margin:0 0 6px 0; }
.exp-carousel-card p{ font-size:13px; line-height:1.6; margin:0; color:var(--muted); }
/* Per-card scroll-triggered stagger (the --rd delay is already set inline
   per card in renderExperiencePage()) — same reveal-with-stagger pattern as
   .stmt-track-item / .booking-step-icon, so this first Experience-page
   section arrives with the same sense of motion as the homepage does,
   instead of only the plain single-block .reveal the wrapper already has. */
html.js-anim .exp-carousel-card{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.3,1); transition-delay:var(--rd,0ms); }
html.js-anim .exp-carousel.is-visible .exp-carousel-card{ opacity:1; transform:none; }
/* Higher specificity than the reveal's own "transform:none" above, so the
   hover lift still works once the card has settled into view. */
html.js-anim .exp-carousel.is-visible .exp-carousel-card:hover{ transform:translateY(-5px); }
@media (prefers-reduced-motion: reduce){
  html.js-anim .exp-carousel-card{ opacity:1; transform:none; transition:none; }
  .exp-carousel-card, .exp-carousel-card:hover{ transition:none; transform:none; }
}

/* ---------- Day at Sea (Experience page editorial timeline) ----------
   Replaces the old six-card "combines" grid with an immersive, alternating
   photo/text timeline: a slim vertical spine with a small marker per
   moment, image and text swapping sides as the visitor scrolls so the
   section reads as editorial travel writing rather than a feature list. */
/* Section head runs wider than the shared .section-head's 760px so this
   intro line can sit on one line (per client request) rather than the
   default centered-column width used by every other section head. Whole
   section also compressed (smaller media height, tighter padding
   throughout) on client feedback that the original scale made this one
   section far too much scrolling — same design, just condensed. */
.section.exp-the.day-at-sea{ padding-top:40px; padding-bottom:40px; }
.day-at-sea .section-head{ max-width:1040px; margin-bottom:32px; }
.day-at-sea-intro{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(14px,1.5vw,21px); line-height:1.55; color:var(--charcoal); max-width:none; margin:16px auto 0 auto; white-space:nowrap; }
@media (max-width:860px){
  .day-at-sea-intro{ white-space:normal; font-size:clamp(15px,4vw,18px); max-width:480px; margin-left:auto; margin-right:auto; text-wrap:balance; }
}
.day-timeline{ position:relative; max-width:1160px; margin:28px auto 0 auto; }
.day-timeline::before{ content:''; position:absolute; left:50%; top:8px; bottom:8px; width:1px; background:var(--rule); transform:translateX(-50%); }
.day-moment{ position:relative; display:grid; grid-template-columns:1fr 96px 1fr; column-gap:20px; align-items:center; padding:14px 0; }
.day-moment-media{ grid-column:1; position:relative; height:200px; overflow:hidden; }
.day-moment-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.6s cubic-bezier(.16,.8,.3,1); }
.day-moment-media:hover img{ transform:scale(1.045); }
.day-moment-marker{ grid-column:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }
.day-moment-dot{ width:9px; height:9px; border-radius:50%; background:var(--rule); transition:background .6s ease, box-shadow .6s ease; }
.day-moment-time{ font-family:'Raleway',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.13em; color:var(--muted); background:var(--sand); padding:3px 2px; transition:color .6s ease, font-weight .6s ease; }
.day-moment-text{ grid-column:3; padding:0 8px; }
.day-moment-title{ font-family:'Raleway',sans-serif; font-weight:400; font-size:clamp(19px,2vw,25px); color:var(--charcoal); margin:0 0 8px 0; text-wrap:balance; }
.day-moment-text p{ font-size:15px; line-height:1.55; color:var(--charcoal); max-width:400px; margin:0; }
.day-moment:nth-child(even) .day-moment-media{ grid-column:3; }
.day-moment:nth-child(even) .day-moment-text{ grid-column:1; text-align:right; }
.day-moment:nth-child(even) .day-moment-text p{ margin-left:auto; }
/* Marker stays put on the spine (no slide) — only its dot and time label
   brighten on reveal, so the small badge never jitters against the line. */
html.js-anim .day-at-sea .day-moment-marker.reveal{ opacity:1; transform:none; transition:none; }
html.js-anim .day-at-sea .day-moment-marker.is-visible .day-moment-dot{ background:var(--accent-warm); box-shadow:0 0 0 5px rgba(168,77,42,0.16); }
html.js-anim .day-at-sea .day-moment-marker.is-visible .day-moment-time{ color:var(--charcoal); font-weight:700; }
/* Photos scale gently into place rather than sliding, distinct from the
   plain translateY fade the rest of the site's .reveal elements use. */
html.js-anim .day-at-sea .day-moment-media.reveal{ opacity:0; transform:scale(1.055); transition:opacity 1s ease, transform 1.2s cubic-bezier(.16,.8,.3,1); }
html.js-anim .day-at-sea .day-moment-media.reveal.is-visible{ opacity:1; transform:scale(1); }
/* Desktop snap-scroll frame — replaces an earlier version where one photo
   crossfaded on its own scroll-threshold timing while the text scrolled
   past independently; client feedback was that the two felt out of sync
   and confusing. Each slide here is a single unit (its own photo + its own
   text move together, always in step, nothing to desync) inside a fixed-
   height box with native scroll-snap. Scrolling with the cursor over the
   frame steps through the six slides; once the last one is reached the
   same scroll gesture falls through to the page below it automatically —
   ordinary nested-scroll behaviour, so none of that hand-off needs JS.
   Hidden by default (mobile keeps the plain stacked .day-timeline above);
   switched on past the 860px breakpoint, where it replaces .day-timeline
   entirely. */
.day-scroller{ display:none; }
@media (min-width:861px){
  /* Superseded (2026.4, arc redesign): this whole media-query block
     (.day-scroller and everything nested in it below) backed the old
     desktop snap-scroll day-scroller, replaced by .day-arc — see its
     rules further down, and the day-aboard section markup in app.js,
     which no longer renders .day-scroller at all. The one line actually
     removed from here was ".day-timeline{ display:none; }": that was
     this same block hiding the plain stacked fallback in favour of the
     (now-dead) scroller; .day-arc's own rules below decide .day-timeline's
     visibility instead (gated on html.js-anim, not on this breakpoint,
     since the arc is one responsive component rather than a desktop-only
     one). Everything else below is left in place as harmless dead code —
     none of it paints since .day-scroller never renders. */
  .day-scroller{ display:block; max-width:1160px; margin:16px auto 0 auto; }
  .day-scroller-inner{
    height:min(560px, 62vh); min-height:400px;
    overflow-y:auto;
    scroll-snap-type:y proximity;
    -webkit-overflow-scrolling:touch;
  }
  .day-scroller-inner::-webkit-scrollbar{ width:6px; }
  .day-scroller-inner::-webkit-scrollbar-track{ background:transparent; }
  .day-scroller-inner::-webkit-scrollbar-thumb{ background:var(--accent-warm); border-radius:3px; }
  .day-slide{
    scroll-snap-align:start;
    height:100%; min-height:100%;
    display:grid; grid-template-columns:1fr 1fr; column-gap:48px; align-items:center;
    padding:0 40px;
  }
  .day-slide-media{ position:relative; height:78%; max-height:440px; overflow:hidden; }
  .day-slide-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .day-slide-badge{ position:absolute; left:16px; bottom:16px; z-index:2; display:flex; align-items:center; gap:8px; background:rgba(38,36,31,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:7px 14px; border-radius:999px; color:var(--ivory); font-family:'Raleway',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:0.12em; }
  .day-slide-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-warm-on-dark); flex-shrink:0; }
  .day-slide-text{ padding:0 8px; }
  .day-slide-time{ font-family:'Raleway',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.13em; color:var(--accent-warm); margin-bottom:12px; }
  .day-slide-text h3{ font-family:'Raleway',sans-serif; font-weight:400; font-size:clamp(21px,2.1vw,28px); color:var(--charcoal); margin:0 0 12px 0; text-wrap:balance; }
  .day-slide-text p{ font-size:15.5px; line-height:1.65; color:var(--charcoal); max-width:420px; margin:0; }
  /* The dots are centered on the frame itself (justify-content:center),
     with the "Scroll for more" hint pinned to the right via absolute
     positioning so it never pulls the dots off-center — previously the two
     sat side by side as one flex group, which visually shifted the dots
     away from the frame's true center. */
  .day-scroller-foot{ position:relative; display:flex; align-items:center; justify-content:center; margin-top:16px; }
  /* 2026.3 interactive-editorial redesign: dots relabeled as visible text
     tabs (Wake/Sail/Learn/Swim/Explore/Sunset — see initDayScroller()'s
     markup in app.js; its click/scroll-sync logic is unchanged), styled
     with the same underline-on-active language as .exp-tab-btn so the
     page's two "choose a facet" selectors read as one consistent idiom. */
  .day-scroller-progress{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:center; }
  .day-progress-dot{ width:auto; height:auto; padding:6px 10px 10px 10px; border:none; background:none; border-radius:0; font-family:'Raleway',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); cursor:pointer; position:relative; transition:color .3s ease; }
  .day-progress-dot::after{ content:''; position:absolute; left:10px; right:10px; bottom:2px; height:1px; background:var(--accent-warm); transform:scaleX(0); transition:transform .4s cubic-bezier(.16,.8,.3,1); }
  .day-progress-dot:hover{ color:var(--charcoal); }
  .day-progress-dot.is-active{ color:var(--charcoal); background:none; transform:none; }
  .day-progress-dot.is-active::after{ transform:scaleX(1); }
  .day-scroller-hint{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:7px; font-family:'Raleway',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); opacity:1; transition:opacity .4s ease, transform .4s ease; }
  .day-scroller-hint svg{ width:12px; height:12px; animation:bob 2.2s ease-in-out infinite; }
  .day-scroller-hint.is-hidden{ opacity:0; }
  @media (prefers-reduced-motion: reduce){
    .day-scroller-hint svg{ animation:none; }
  }
}
@media (max-width:860px){
  .day-timeline{ margin-top:20px; }
  .day-timeline::before{ display:none; }
  .day-moment{ display:flex; flex-direction:column; gap:10px; padding:16px 0; border-bottom:1px solid var(--rule); }
  .day-moment:last-child{ border-bottom:none; }
  .day-moment-marker{ flex-direction:row; justify-content:flex-start; }
  .day-moment-media{ height:150px; }
  .day-moment-text{ padding:0; }
  .day-moment:nth-child(even) .day-moment-text{ text-align:left; }
  .day-moment:nth-child(even) .day-moment-text p{ margin-left:0; }
  .day-moment-text p{ max-width:none; }
}

/* ---------- Day-aboard arc (2026.4) ----------
   A single pinned stage, scrubbed by ordinary page scroll (see
   initDayArc() in app.js): a thin orange arc represents the day
   (sunrise -> sunset), a marker travels along it with scroll position, six
   small photo+hour dots sit on the arc for every moment at once, and the
   current moment's full card (photo + time + title + body) crossfades in
   the zone above it. One responsive layout at every width, not a separate
   desktop/mobile pair — .day-arc-wrap is hidden by default and only shown
   under html.js-anim (see initReveals() in app.js for that gate), so
   .day-timeline above is what no-JS and prefers-reduced-motion visitors
   see instead, exactly as it always rendered. */
.day-arc-wrap{ display:none; }
html.js-anim .day-timeline{ display:none; }
html.js-anim .day-timeline-tomorrow{ display:none; }
html.js-anim .day-arc-wrap{ display:block; position:relative; max-width:1160px; margin:8px auto 0 auto; }
/* Third pass (client feedback: "I want the day to start when we are at
   this view", pointing at the section's pre-lock scroll frame — eyebrow +
   first card + arc all together): that composition now lives permanently
   inside the pin as .day-arc-eyebrow (see the day-aboard markup in
   app.js), so the plain .section-head above .day-arc-wrap would otherwise
   show the exact same "A Day Aboard" text a second time once the arc path
   is active. Hidden here, scoped to this section only; the reduced-
   motion/no-JS fallback never gets html.js-anim, so its .section-head is
   untouched. */
html.js-anim #day-aboard > .section-head{ display:none; }

/* 2026.4, second pass: client feedback that the whole pinned scene felt
   "a bit too big" — shorter pin (was 100vh), a smaller per-moment scroll
   distance (see the day-aboard markup's dayArcWrap height, was 42vh/moment,
   now 30), and tighter internal spacing throughout this block, all while
   keeping every moment's full photo + hour + sentence (nothing here was
   cut, only compacted). */
/* Third pass (client comment on the "A Day Aboard" label itself: "This
   needs to be higher please"): the pin was vertically centering its whole
   stage, which put the eyebrow roughly as far below the fixed nav as the
   arc's empty tail was below the line-wrap — reads as sitting in the
   middle of the screen rather than settled near the top. align-items
   switched from center to flex-start, with a flat padding-top just large
   enough to clear the fixed nav (68px tall on desktop, 60px on mobile —
   measured directly, not assumed) plus a small gap, so the eyebrow now
   sits right under the nav instead of vertically centered; the freed
   space moves to the bottom of the pin, which already had plenty to
   spare (both the desktop and mobile stage heights were checked to still
   fit comfortably under the pin's 86vh with this padding added).
   Fourth pass ("needs to sit higher as the other titles on the website"):
   64px landed the eyebrow ~80px from the viewport top — close, but every
   other section's eyebrow sits at exactly 84px (the sitewide
   #philosophy,#day-aboard,#yacht,...{scroll-margin-top:84px} convention
   further down this file — #day-aboard is already in that list). The
   .day-arc-stage below adds its own 16px top padding, so padding-top here
   is 84 - 16 = 68px, measured to land the eyebrow at the same distance
   under the nav as everywhere else on the site, not just "higher".
   Fifth pass ("still way too low... look at the gap that The Solace
   Difference have"): the scroll-margin-top:84 convention above is the
   right target for a JUMP to a section (an anchor link), but it's the
   wrong comparison for this element specifically. #philosophy and #yacht
   aren't pinned — the moment you scroll even slightly further, their
   titles keep sliding up and the gap above them keeps shrinking. This
   eyebrow is pinned: whatever gap it lands on is the gap you see for the
   entire time you're scrubbing through the day, so it needs to be the
   tightest gap that still clearly clears the fixed nav (68px desktop/60px
   mobile), not the same number a passing, non-pinned title uses for one
   instant. Reduced from 68 to 56 (measured: eyebrowTop = 56 + the stage's
   own 16px = 72px, a 4px clearance under the 68px desktop nav — as tight
   as this can go without the text visibly touching the nav; 12px on the
   60px-tall mobile nav). See also the .day-arc-feature height reduction
   below this pass — the fourth pass's taller full-bleed photo pushed the
   whole stage's content past the pin's 86vh box, silently clipping
   .day-arc-tomorrow off the bottom (client: "I can't see the button and
   the tomorrow, etc" after scrolling past 6:30pm) — fixed together since
   both are a consequence of the same over-tall stage. */
.day-arc-pin{ position:sticky; top:0; height:86vh; display:flex; align-items:flex-start; justify-content:center; overflow:hidden; padding-top:56px; }
/* Sixth pass (client comment: "way too much gap on top of A Day Aboard...
   put that title more up of the section like all the other similar titles,
   and have a normal gap between the title and the picture"). The fifth
   pass fixed where the eyebrow sits while PINNED, but in normal flow — as
   the section scrolls up into view — it still sat ~120px below the
   section's top edge (section padding 40 + wrap margin 8 + pin padding 56
   + stage padding 16), three times the 40px every other section title
   uses. The two positions are now set independently:
     - in flow: the section's own top padding and the wrap's margin go to
       zero and the pin's padding drops to 20px, so the eyebrow's letters
       land 40px below the section top (20 + the stage's 16 + ~4px of the
       label's own line leading), measured identical to #philosophy and
       #yacht;
     - pinned: the pin now sticks 32px below the viewport top instead of
       at 0, so while scrubbing the eyebrow still sits at the same 72px
       as the fifth pass (32 + 40) — clear of the 68px nav.
   initDayArc() reads that sticky offset back from the computed style, so
   the scrub progress and the dot-click scroll targets stay exact.
   Mobile uses 12px padding / 40px sticky offset for the same result
   against its 32px section rhythm and 60px nav. The no-JS / reduced-motion fallback (no
   html.js-anim) keeps its original .section-head and padding untouched. */
html.js-anim .section.exp-the.day-at-sea{ padding-top:0; }
html.js-anim .day-arc-wrap{ margin-top:0; }
html.js-anim .day-arc-pin{ top:32px; padding-top:20px; }
@media (max-width:860px){
  html.js-anim .day-arc-pin{ top:40px; padding-top:12px; }
}
/* Eighth pass, two client comments:
   - "the animation should start when the top of the A Day Aboard section
     meets the bottom of the header (at the moment it seems to start when
     the top of the section is roughly in the middle of the header)": the
     pin — and with it the animation — now locks exactly at the header's
     bottom edge (68px desktop / 60px mobile, measured), so the locked view
     is the section as it arrives, title 40px (32px mobile) below its top
     like every other section, rather than sliding a further 36px under
     the header first;
   - "Reduce the gap here" (between "Plan Your Escape" and The Yacht): the
     pin no longer has a fixed 86vh height — it's exactly as tall as its
     content, so the ~120px of empty sand it carried below the button is
     gone and the section ends 56px after it (the stage's 16px + the
     section's 40px bottom padding). The stage's photo and arc are already
     capped by viewport height (see .day-arc-feature), so the content
     still always fits on screen while locked. */
html.js-anim .day-arc-pin{ top:68px; height:auto; }
@media (max-width:860px){
  html.js-anim .day-arc-pin{ top:60px; }
}
.day-arc-stage{ width:100%; max-width:1120px; margin:0 auto; padding:16px 24px; display:flex; flex-direction:column; gap:clamp(10px,2.2vw,20px); }

/* The section's own label, now living inside the pin (see the third-pass
   comment above .day-arc-wrap) so it locks in and stays put for the whole
   scrubbing sequence instead of scrolling away the moment the pin engages.
   Spacing below it comes from the stage's own flex `gap`, same as every
   other gap between the stage's children. */
.day-arc-eyebrow{ text-align:center; }
/* Sixth pass: a normal title-to-picture gap (client) — the stage's flex
   gap alone left only ~18px between the eyebrow's letters and the photo,
   tighter than anywhere else a title leads into content on the site. */
html.js-anim .day-arc-eyebrow{ margin-bottom:12px; }

/* Fourth pass, full redesign ("looks like a powerpoint and it doesn work"):
   the photo-beside-text layout above is gone. Each moment is now a single
   full-bleed photo with a bottom gradient scrim and the time/title/body
   overlaid on top of it — the same premium-photo idiom already used for
   the Explore/Learn/Play and Destinations choice panels elsewhere on this
   page (.exp-choice-item/-scrim/-content/-label/-tagline further up this
   file). .day-arc-card-scrim and the flex/inset structure below are
   modeled directly on that block rather than invented fresh, so this
   reads as one consistent photo treatment across the site instead of a
   one-off slide layout just for this section.
   Fifth pass: shrunk from clamp(300px,34vw,420px) — that size looked
   right in isolation but pushed the stage's total content height (eyebrow
   + feature + line-wrap + tomorrow, plus the stage's own padding and the
   gaps between all four) past the pin's fixed 86vh box. The pin clips
   with overflow:hidden rather than growing, so the overflow wasn't a
   visible glitch — it silently cut .day-arc-tomorrow off the bottom
   entirely once you'd scrolled to 6:30pm (client: "I can't see the button
   and the tomorrow, etc"). A flat clamp(220px,24vw,290px) alone still
   overflowed on shorter windows — this height only ever responded to
   viewport *width*, so at a normal width but a shorter height (a 1440x768
   laptop window, measured directly: stage content came to 630px against
   only 604px available) it clipped again. Wrapped in min() against a
   vh-based cap so it also shrinks on a short window instead of only a
   narrow one, re-measured with real DOM heights down to a 700px-tall
   viewport with margin to spare, instead of guessing one fixed number. */
.day-arc-feature{ position:relative; min-height:min(clamp(220px,24vw,290px), 32vh); }
/* Constrained to its own max-width and centred (margin:0 auto) rather than
   stretching the photo to the full stage width — keeps the feature reading
   as one deliberate, contained photo (matching the arc and points below it,
   which share the same 820px column) instead of a full-width banner. */
.day-arc-card{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  max-width:820px; margin:0 auto;
  border-radius:2px; overflow:hidden;
  pointer-events:none;
}
.day-arc-card.is-active{ pointer-events:auto; }
/* The photo and the text pane fade on two different rhythms, deliberately.
   The photo's opacity is set continuously from scroll position (see
   initDayArc() in app.js) so adjacent moments dissolve into one another as
   the marker travels between them — exactly the "each picture can fade in
   / out" the client asked for. Text can't do that: with six-plus-word
   titles and full sentences, two paragraphs overlapping mid-dissolve reads
   as a jumble rather than a transition. So the text pane instead snaps
   between exactly one moment at a time (is-active, driven off the single
   nearest moment, not a continuous value) with its own quick fade — never
   more than one moment's words on screen together. */
.day-arc-card-media{ position:absolute; inset:0; opacity:0; }
.day-arc-card.is-active .day-arc-card-media{ opacity:1; }
.day-arc-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Same gradient as .exp-choice-scrim: dark enough at the bottom for the
   overlaid text to read cleanly, fading to nearly nothing by two-thirds up
   so the photo itself still reads as the feature, not just a backdrop. */
.day-arc-card-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,42,54,0.86) 0%, rgba(21,42,54,0.42) 40%, rgba(21,42,54,0.05) 68%); }
.day-arc-card-text{ position:relative; z-index:2; width:100%; padding:0 40px 30px 40px; opacity:0; transition:opacity .3s ease; }
.day-arc-card.is-active .day-arc-card-text{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .day-arc-card-text{ transition:none; } }
.day-arc-card-time{ font-family:'Raleway',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-warm-on-dark); margin:0 0 12px 0; }
.day-arc-card-text h3{ font-family:'Raleway',sans-serif; font-weight:400; font-size:clamp(21px,2.2vw,28px); color:var(--ivory); margin:0 0 10px 0; text-wrap:balance; }
.day-arc-card-text p{ font-size:15px; line-height:1.55; color:rgba(250,247,240,0.85); max-width:480px; margin:0; }
/* Seventh pass (client comment on 11:30am's line: "This needs to fit on
   one line"): the 480px cap wrapped the longest of the six body lines
   onto two. Uncapped on desktop and held to a single line wherever the
   photo is wide enough for the longest one (checked at 1024px+); between
   the mobile breakpoint and that, it simply uses the full width. */
@media (min-width:861px){ .day-arc-card-text p{ max-width:none; } }
@media (min-width:1024px){ .day-arc-card-text p{ white-space:nowrap; } }

/* height also capped against viewport *height* (min()), not just width —
   same short-window overflow fix as .day-arc-feature above, and for the
   same reason: this only ever scaled with vw before, so a shorter browser
   window at a normal width didn't shrink it at all. */
.day-arc-line-wrap{ position:relative; width:100%; height:min(clamp(90px,12vw,140px), 15vh); }
.day-arc-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.day-arc-track{ fill:none; stroke:var(--rule); stroke-width:2; }
.day-arc-progress{ fill:none; stroke:var(--accent-warm); stroke-width:2.4; stroke-linecap:round; }

.day-arc-marker{ position:absolute; width:20px; height:20px; left:0; top:0; margin:-10px 0 0 -10px; color:var(--accent-warm); filter:drop-shadow(0 2px 5px rgba(168,77,42,0.35)); z-index:3; }
.day-arc-marker svg{ width:100%; height:100%; display:block; }

.day-arc-point{
  position:absolute; left:0; top:0; margin:0; padding:0; border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transform:translate(-50%,-50%); z-index:2;
}
.day-arc-point-dot{ width:38px; height:38px; border-radius:50%; overflow:hidden; border:2px solid var(--offwhite); box-shadow:0 1px 4px rgba(38,36,31,0.18); transition:transform .35s cubic-bezier(.16,.8,.3,1), border-color .35s ease; }
.day-arc-point-dot img{ width:100%; height:100%; object-fit:cover; display:block; }
.day-arc-point-time{ font-family:'Raleway',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.1em; color:var(--muted); white-space:nowrap; transition:color .35s ease, font-weight .35s ease; }
.day-arc-point.is-active .day-arc-point-dot{ transform:scale(1.22); border-color:var(--accent-warm); }
.day-arc-point.is-active .day-arc-point-time{ color:var(--charcoal); font-weight:700; }

/* Sits at the top corners of the line-wrap, not the bottom — the arc's
   start/end points (and their photo+time dots) are down near the bottom
   of this box, so anchoring the sunrise/sunset marks up top keeps them
   from colliding with the first/last dot's own time label.
   2026.4, second pass: plain "Sunrise"/"Sunset" text replaced with small
   orange icons per client feedback (ICON.sunrise/ICON.sunset in app.js) —
   kept deliberately small (18px) rather than matching other icon uses on
   the page, since these are a quiet detail, not a focal point.
   2026.4, fourth pass: unused. Client feedback was blunt — "it's ugly,
   gone" — no replacement, so the .day-arc-endcap spans are removed from
   the day-aboard markup in app.js entirely. Left here as harmless dead
   CSS rather than deleted. */
.day-arc-endcap{ position:absolute; top:0; color:var(--accent-warm); }
.day-arc-endcap svg{ width:21px; height:21px; display:block; }
.day-arc-endcap.start{ left:0; }
.day-arc-endcap.end{ right:0; }

/* "Tomorrow? We'll decide together" + its CTA, living inside the pinned
   stage itself (client feedback: these should sit right under the arc and
   appear as soon as the marker reaches 6:30pm, not after a further scroll
   past the whole section) — see the tomorrowT fade in initDayArc(). Starts
   invisible and slightly lowered; JS drives both continuously via inline
   style, this is just the base state plus the transition. */
.day-arc-tomorrow{ text-align:center; opacity:0; pointer-events:none; transition:opacity .2s linear; }
.day-arc-tomorrow.is-active{ pointer-events:auto; }
.day-arc-tomorrow-line{ font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:clamp(16px,1.6vw,19px); color:var(--charcoal); margin:0 0 14px 0; }
.day-arc-tomorrow .btn{ padding:12px 26px; }
@media (prefers-reduced-motion: reduce){ .day-arc-tomorrow{ transition:none; } }

@media (max-width:860px){
  /* Fourth-pass redesign note: the old mobile rules here stacked the photo
     above the text (a separate layout just for narrow widths, needed
     because the photo-beside-text desktop layout ran out of horizontal
     room on mobile first). The full-bleed photo-with-overlay treatment
     doesn't have that problem — text sits on top of the photo at every
     width — so mobile only needs a shorter feature box and smaller type,
     not a different structure. Height/text sizes re-measured against all
     six moments' actual copy (the longest, "A little coaching, better
     sail trim, boat handling, or simply enjoying the sailing.", is 3 lines
     at this width) so the scrim always has enough photo height to read
     as a photo, not just a strip behind the text.
     Fifth pass: also capped against viewport height (min()), same short-
     window overflow fix as the desktop rules above — a short phone in
     landscape, or a small browser window, is still a width under 860px. */
  .day-arc-feature{ min-height:min(clamp(260px,58vw,320px), 34vh); }
  .day-arc-card-text{ padding:0 22px 22px 22px; }
  .day-arc-card-text p{ max-width:none; }
  .day-arc-point-dot{ width:26px; height:26px; border-width:1.5px; }
  .day-arc-point-time{ font-size:9px; }
  .day-arc-line-wrap{ height:min(clamp(80px,20vw,120px), 16vh); }
  .day-arc-tomorrow-line{ font-size:15px; }
}

.display-2.one-line{ font-size:clamp(22px,3vw,38px); white-space:nowrap; }
.display-3.one-line{ font-size:clamp(18px,2.6vw,32px); white-space:nowrap; }
@media (max-width:640px){
  .display-2.one-line{ white-space:normal; font-size:clamp(22px,5.4vw,30px); }
  .display-3.one-line{ white-space:normal; font-size:clamp(20px,5vw,26px); }
}
.section.sand{ background:var(--sand); }
.section.navy{ background:var(--navy); }
.section-head{ max-width:760px; margin:0 auto 56px auto; text-align:center; }
.section-head.left{ margin:0 0 56px 0; text-align:left; }
/* what-is-solace headline runs wider than 760px at its one-line size (desktop);
   widen just this instance so the nowrap line doesn't overflow off-center */
.section.what-is-solace .section-head{ max-width:900px; }
/* Philosophy's section-head is followed directly by body copy (its first
   paragraph), not by a card grid or panel row like most other uses of the
   shared .section-head — the sitewide 56px margin-bottom above was sized
   for that latter case, and reads as a big dead gap directly over a
   sentence. Scoped down to a small breathing gap instead; the first
   paragraph's own margin-top:10px (inline, see renderExperiencePage())
   adds a little more on top of this. */
#philosophy .section-head{ margin-bottom:20px; }

/* ---------- Reveal-on-scroll (default visible; JS only opts in when safe) ---------- */
.reveal{ opacity:1; transform:none; }
html.js-anim .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1); transition-delay:var(--rd,0ms); }
html.js-anim .reveal.is-visible{ opacity:1; transform:none; }
html.js-anim .reveal-d1{ transition-delay:.10s; }
html.js-anim .reveal-d2{ transition-delay:.20s; }
html.js-anim .reveal-d3{ transition-delay:.30s; }
@media (prefers-reduced-motion: reduce){ html.js-anim .reveal{ transition:none; opacity:1; transform:none; } }

.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform 1.2s cubic-bezier(.16,.8,.3,1); }
.img-zoom:hover img{ transform:scale(1.045); }
@media (prefers-reduced-motion: reduce){ .img-zoom img{ transition:none; } }

/* ================= NAV ================= */
.nav{ position:fixed; top:0; left:0; right:0; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 56px; z-index:200; background:transparent; transition:background-color .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom:1px solid transparent; }
.nav.on-light{ background:transparent; }
.nav.is-scrolled{ background:rgba(250,247,240,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(38,36,31,0.06); }
.nav-logo{ font-family:'Raleway',sans-serif; font-weight:500; font-size:19px; letter-spacing:0.36em; color:var(--ivory); transition:color .3s ease; }
.nav.is-scrolled .nav-logo{ color:var(--charcoal); }
.logo-o{ color:var(--accent-warm-on-dark); transition:color .3s ease; }
.nav.is-scrolled .logo-o, .nav.solid-from-start .logo-o{ color:var(--accent-warm); }
.nav-right{ display:flex; align-items:center; gap:40px; }
.nav-links{ display:flex; align-items:center; gap:40px; }
.nav-links a{ font-family:'Raleway',sans-serif; font-size:10.5px; font-weight:400; letter-spacing:0.16em; color:var(--ivory); text-transform:uppercase; transition:color .3s ease, opacity .2s ease; padding-bottom:4px; border-bottom:1px solid transparent; }
.nav-links a:hover{ opacity:.7; }
.nav-links a.is-active{ border-bottom-color:currentColor; }
.nav.is-scrolled .nav-links a{ color:var(--charcoal); }
.nav-cta{ font-family:'Raleway',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ivory); border:1px solid var(--accent-warm); padding:11px 22px; transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.nav-cta:hover{ background:rgba(168,77,42,0.14); }
.nav.is-scrolled .nav-cta{ color:var(--charcoal); border-color:var(--accent-warm); }
.nav.is-scrolled .nav-cta:hover{ background:rgba(168,77,42,0.08); }
.nav-burger{ display:none; }

/* Nav variant for non-hero (light-background) pages: always solid from the start */
.nav.solid-from-start{ background:rgba(250,247,240,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(38,36,31,0.06); }
.nav.solid-from-start .nav-logo, .nav.solid-from-start .nav-links a{ color:var(--charcoal); }
.nav.solid-from-start .nav-cta{ color:var(--charcoal); border-color:var(--accent-warm); }

/* ---------- Full-screen mobile nav ---------- */
.nav-burger-btn{ display:none; background:none; border:none; cursor:pointer; padding:10px; margin:-10px; width:40px; height:40px; position:relative; z-index:210; }
.nav-burger-btn span{ position:absolute; left:9px; right:9px; height:1.5px; background:var(--ivory); transition:transform .25s ease, opacity .2s ease, background-color .3s ease; }
.nav-burger-btn span:nth-child(1){ top:15px; }
.nav-burger-btn span:nth-child(2){ top:22px; }
.nav-burger-btn span:nth-child(3){ top:29px; }
.nav.is-scrolled .nav-burger-btn span, .nav.solid-from-start .nav-burger-btn span{ background:var(--charcoal); }
.nav-burger-btn[aria-expanded="true"] span{ background:var(--charcoal); }
.nav-burger-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.full-nav{ position:fixed; inset:0; background:var(--ivory); z-index:190; display:flex; flex-direction:column; justify-content:center; padding:120px 40px 60px 40px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .35s ease, transform .35s ease; }
.full-nav.is-open{ opacity:1; pointer-events:auto; transform:none; }
.full-nav-links{ display:flex; flex-direction:column; gap:6px; }
.full-nav-links a{ font-family:'Raleway',sans-serif; font-weight:300; font-size:15vw; line-height:1.15; color:var(--charcoal); }
.full-nav-foot{ margin-top:56px; display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
@media (min-width: 640px){ .full-nav-links a{ font-size:64px; } }

/* ================= FOOTER ================= */
/* The rule above the footer closes out the homepage's final CTA section, so
   it reads as deliberate punctuation rather than the same pale hairline used
   for internal dividers elsewhere — charcoal at low opacity, quieter than
   the accent-warm button just above it. */
.footer{ width:100%; background:var(--ivory); border-top:1px solid rgba(38,36,31,0.18); padding:72px 64px 32px 64px; }
/* Experience page only: matches the section immediately above it (sand),
   so the page ends on that warm tone rather than snapping back to ivory. */
.footer.sand-footer{ background:var(--sand); }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; max-width:1360px; margin:0 auto 48px auto; }
.footer-brand{ display:flex; flex-direction:column; gap:14px; }
.footer-logo{ font-family:'Raleway',sans-serif; font-weight:500; font-size:18px; letter-spacing:0.36em; color:var(--charcoal); }
.footer-logo .logo-o{ color:var(--accent-warm); }
.footer-tag{ font-size:13.5px; color:var(--muted); }
.footer-links{ display:flex; gap:36px; flex-wrap:wrap; }
.footer-links a{ font-size:13.5px; color:var(--charcoal); }
.footer-bottom{ border-top:1px solid var(--rule); max-width:1360px; margin:0 auto; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-copy{ font-size:11.5px; color:var(--muted); }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a{ font-size:11.5px; color:var(--muted); }

/* ================= HERO (shared shape across pages) ================= */
.page-hero{ position:relative; width:100%; height:88vh; min-height:560px; overflow:hidden; display:flex; align-items:flex-end; }
.page-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; }
.page-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,42,54,0.42) 0%, rgba(21,42,54,0.08) 30%, rgba(21,42,54,0.05) 55%, rgba(21,42,54,0.62) 100%); }
.page-hero-content{ position:relative; z-index:2; padding:0 64px 88px 64px; max-width:820px; }
.page-hero-eyebrow{ font-size:11px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:rgba(250,247,240,0.92); margin-bottom:24px; }
/* Sized to match the Home/Experience hero treatment sitewide (those two
   pages used to override this smaller via .home-hero/.exp-hero; now every
   page's hero heading reads at the same scale). */
.page-hero h1{ color:var(--ivory); font-size:clamp(34px,4.4vw,62px); line-height:1.06; font-weight:200; letter-spacing:-0.01em; text-wrap:balance; margin-bottom:24px; }
.page-hero-body{ color:rgba(250,247,240,0.9); font-size:17px; line-height:1.75; max-width:560px; margin-bottom:0; font-weight:300; }
.hero-scrolldown{ position:absolute; left:64px; bottom:34px; z-index:2; display:flex; align-items:center; gap:10px; font-size:10.5px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(250,247,240,0.85); background:none; border:none; cursor:pointer; padding:6px 0; font-family:'Raleway',sans-serif; }
.hero-scrolldown svg{ width:14px; height:14px; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }
@media (prefers-reduced-motion: reduce){ .hero-scrolldown svg{ animation:none; } }

/* Row for the hero's primary CTA button (the .hero-scrolldown corner button
   already covers the secondary "Explore the experience" action, so this is
   just a spacer + flex row for the one accent button beneath the body copy). */
.page-hero-ctas{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:36px; }

/* Experience hero variant (2026 redesign): left-aligned like the base
   .page-hero, just with a slightly wider content column so the supporting
   sentence and CTA row have room, and normal wrapping rather than a forced
   one-line treatment (this class previously held a since-removed one-line/
   nowrap subhead from when the page opened on a short tagline instead). */
.page-hero.exp-hero .page-hero-content{ max-width:640px; }
/* 2026.4: the hero's body copy moved out into .exp-hero-follow-content
   below (see the Edmiston-style scroll transition further down), so
   .page-hero-body no longer renders inside .exp-hero at all — this rule is
   now unreachable, left in place as harmless dead CSS rather than deleted. */
.exp-hero .page-hero-body{ max-width:560px; }
/* Per client feedback: force the (now single-sentence) h1 onto one line —
   same nowrap-on-desktop/normal-on-mobile technique as .home-hero h1 below.
   Safe because .page-hero has overflow:hidden (line 661) while
   .page-hero-content itself does not clip its children, so the nowrap text
   can bleed past the 640px column without being cut off. */
.exp-hero h1{ white-space:nowrap; }
@media (max-width:860px){
  .exp-hero h1{ white-space:normal; }
}
/* 2026.2 compact/premium redesign: the hero-integrated facts strip that
   replaces the separate Quick Facts section — .yacht-specs reused directly
   (this hero has the same dark photo scrim as the yacht section) but
   left-aligned in flow with the rest of the content column instead of
   centered, so it can't overlap the corner scrolldown button below it.
   (A larger h1 was tried here first but, at this column's 640px width,
   pushed the heading to an uneven 3-line break — reverted; the base
   .page-hero h1 size already reads as premium against the full-bleed photo.) */
.exp-hero-facts{ justify-content:flex-start; margin:32px 0 0 0; max-width:none; }
/* Editorial focal-word heading treatment, reused from the homepage's Why
   Solace statement (.ws-accent, defined further down under
   .why-solace-statement, scoped there) so the same device works generically
   wherever highlightWord() output lands — used sparingly on the Experience
   page (How It Works only as of 2026.4 — Philosophy's "Your experience."
   used to be its other use here, but per client feedback that heading now
   sets the whole line in plain accent-warm orange instead of italicizing
   just one word, see renderExperiencePage()), the quiet equivalent of the
   mixed-emphasis headlines on Rolex/Edmiston's sites, in Solace's own
   established visual language rather than a copy of theirs (italic +
   accent-warm on one word/phrase, not the whole line). */
.display-2 .ws-accent, .display-3 .ws-accent{ color:var(--accent-warm); font-weight:300; font-style:italic; }
.exp-hero-facts span:first-child{ padding-left:0; }

/* 2026.4: Edmiston-style scroll transition on the Experience hero — see
   the class comment above renderExperiencePage() in app.js and
   initHeroBlur() for the full explanation. .exp-hero pins in place
   (position:sticky) while .exp-hero-follow rises over it in normal
   document flow, painted on top via z-index, so the crisp hero reads as
   gradually blurring into this scene rather than a hard cut to something
   unrelated (initHeroBlur() drives that blur on the pinned photo itself).
   Per client feedback (artifact comment): .exp-hero-follow was originally
   a full-viewport dark scene with its own blurred-photo backdrop (see
   .exp-hero-follow-bg/.exp-hero-follow-scrim just below, now unused and
   left as harmless dead CSS) — now a plain, much shorter sand-colored
   band sized to its own two lines of text, so the pin only lasts a brief
   moment rather than a whole extra full-bleed scene.
   2026.4, second pass: per further client feedback the "Plan Your
   Adventure" button was removed from this scene entirely (see
   renderExperiencePage() — only the <p> remains), the column was widened
   so the paragraph wraps to two lines instead of four, and the padding
   was cut again to make the whole band noticeably smaller now that it
   holds only two short lines of text.
   2026.4, third pass: client feedback was that the gap above this text was
   still too big — cut again (56px → 32px desktop, 40px → 24px mobile);
   align-items:center means this is a symmetric top+bottom gap, so the
   whole band shrinks with it.
   2026.4, fourth pass: client feedback was that the pinned-photo curtain
   never actually covered the whole hero — because .exp-hero-follow's own
   height is deliberately short (per the "way smaller" feedback above),
   while the pinned hero is a full 88vh tall, the short band could only ever
   cover the bottom sliver of the photo before the pin released, leaving the
   photo's upper portion permanently exposed above it (a real geometry
   limit of the sticky+short-follower technique, not a rendering bug). A
   short follower can only ever fully mask a pinned element at least as
   tall as itself, and making the follower that tall again would recreate
   the oversized empty band the client already asked twice to shrink — so
   rather than trade one complaint for the other, .exp-hero is no longer
   pinned: it now scrolls away normally, immediately followed (zero gap,
   since they're just ordinary stacked flow siblings) by
   .exp-hero-follow, which trivially "covers" it completely because
   there's nothing left to cover — the hero has simply scrolled past. The
   blur/dim still plays as the photo scrolls up and out (see the
   rewritten initHeroBlur(), now keyed off the hero's own scroll position
   instead of .exp-hero-follow's), just without the pin/hold. */
.exp-hero-scene{ position:relative; }
.exp-hero-follow{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:32px 32px;
  background:var(--sand);
}
/* Unused since the client's "way smaller / sand background" feedback
   replaced the full-bleed blurred-photo backdrop with a flat sand fill
   above — left in place as harmless dead CSS rather than deleted, along
   with the now-unrendered <img>/scrim elements they styled. */
.exp-hero-follow-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(30px) brightness(0.6) saturate(1.05);
  transform:scale(1.15);
}
.exp-hero-follow-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(33,29,24,0.32) 0%, rgba(33,29,24,0.58) 100%);
}
.exp-hero-follow-content{ position:relative; z-index:2; max-width:900px; text-align:center; padding:0 32px; }
/* margin-bottom removed: the paragraph is now the section's last child
   (the CTA button below it was removed per client feedback), so the
   band's own padding provides all the bottom spacing. */
.exp-hero-follow-content p{ color:var(--charcoal); font-size:clamp(17px,1.8vw,20px); line-height:1.65; font-weight:300; text-wrap:balance; margin-bottom:0; }
/* Client comment: "a gap difference between the top and the bottom — it
   needs to be even". The paragraph still carried the browser's default
   1em top margin, so the space above the text was ~20px bigger than the
   space below it; zeroed so the band's own equal top/bottom padding is
   the only spacing, and the line block sits exactly centred. */
.exp-hero-follow-content p{ margin:0 auto; }
@media (max-width:860px){
  .exp-hero-follow{ padding:24px 22px; }
  .exp-hero-follow-content{ padding:0 22px; }
  .exp-hero-follow-content p{ font-size:16px; margin-bottom:0; }
}
/* Note: the pin/blur transition above relies on scroll position, not a CSS
   animation/transition, so there is nothing to gate behind a
   prefers-reduced-motion media query here — initHeroBlur() itself already
   skips its scroll-linked filter update for reduced motion. */

/* 2026.4: Discover/Perform/Play as three large hover(desktop)/tap(mobile)
   expand photo panels (see dimensionPanels()/wireDimensionPanels() in
   app.js), modeled directly on a "Tully Difference"-style reference the
   client supplied — one continuous editorial composition, not three
   cards. Flexbox rather than CSS Grid: each panel's own `flex-grow`
   transitions smoothly (an animatable number, same technique as many
   "hover expand" photo galleries), so expanding one panel and contracting
   the other two needs no per-combination CSS the way a fixed-track grid
   would. At rest all three sit at flex-grow:1 (equal thirds); the active
   panel (see .has-active/.is-active, toggled by wireDimensionPanels())
   grows to roughly 55% while the other two stay equal to each other,
   narrower but always visible — never fully hidden.
   2026.4, second pass: per client feedback ("doesnt feel prenium at
   all", pointing back at "The Tully Difference" reference a second
   time) the panels were made taller and the hover-expand more dramatic
   (2.6 → 3.4) for a more editorial, less boxy feel — see
   .dim-panel-title/.dim-panel-desc just below for the accompanying
   orange-title + hidden-until-hover copy treatment.
   2026.4, third pass: client feedback again ("still not super happy...
   try to make it more prenium"), pointing at the same Tully reference —
   on inspection, Tully's own active panel doesn't just caption its photo,
   it REPLACES the photo with a flat panel (heading + body copy on a plain
   light background), while the other panels stay narrow photo strips with
   a single centered caption. That structural contrast (photo strip vs.
   flat content pane) is what reads as editorial/premium, so it's rebuilt
   here the same way rather than iterating again on the photo+overlay
   idiom: at rest, .dim-panel-content is centered (title only, like
   Tully's centered captions); .dim-panel-img/-scrim fade to fully
   transparent on .is-active, uncovering this panel's own --sand
   background, and .dim-panel-content re-anchors left/top with its
   heading + now-revealed body copy reading as a real text panel — same
   fonts/colors as the rest of Solace throughout, per the brief ("keeping
   the font and colors of solace"), just this one structural idea borrowed
   from the reference. */
.dim-panels{
  display:flex;
  align-items:stretch;
  height:min(760px, 82vh);
  overflow:hidden;
  max-width:1180px;
  margin:72px auto 0 auto;
}
.dim-panel{
  position:relative;
  display:block;
  flex:1 1 0%;
  min-width:0;
  overflow:hidden;
  background:var(--sand); border:none; margin:0; padding:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:flex-grow .65s cubic-bezier(.16,.8,.3,1);
}
/* 2026.4, fourth pass: client feedback was that the hover-expand rectangle
   read as "a bit too big" — dialed back from 3.4 (third pass) to 2.2,
   under even the original 2.6, for a more modest expand. */
.dim-panels.has-active .dim-panel.is-active{ flex-grow:2.2; }
.dim-panel:focus-visible{ outline:2px solid var(--accent-warm-on-dark); outline-offset:-4px; }
.dim-panel-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.1s cubic-bezier(.16,.8,.3,1), opacity .6s ease;
}
.dim-panel.is-active .dim-panel-img{ transform:scale(1.1); opacity:0; }
.dim-panel-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(33,29,24,0.85) 0%, rgba(33,29,24,0.3) 45%, rgba(33,29,24,0.1) 70%);
  transition:opacity .6s ease;
}
.dim-panel.is-active .dim-panel-scrim{ opacity:0; }
/* 2026.4, fourth pass: default (inactive) state anchors to the bottom of
   the panel again, not vertically centered — client feedback was that the
   centered title sat in the middle of each photo, where the scrim below is
   at its thinnest, so it was "very difficult to see" against a bright
   patch of some photos. Anchoring to the bottom keeps it inside
   .dim-panel-scrim's darkest band (see the gradient above), where it's
   readable against any photo. Only .is-active re-centers into the "flat
   content pane" layout (photo already faded away by then, so there's no
   contrast problem to solve there). */
.dim-panel-content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  text-align:center; padding:0 26px 32px 26px;
}
.dim-panel.is-active .dim-panel-content{ justify-content:center; align-items:flex-start; text-align:left; padding:0 40px; }
/* 2026.4, second pass: set in accent-warm-on-dark (the same token
   .exp-choice-label uses for orange text over a dark photo scrim
   elsewhere on this page) per client feedback ("make discover/perform/
   play in orange"), replacing the plain ivory title.
   2026.4, third pass: swaps to the plain (light-background) accent-warm
   token once the panel goes active and its photo fades away to the sand
   fill beneath — same light/dark-background swap .eyebrow.accent /
   .eyebrow.accent-on-dark already use elsewhere on this page. Size bumped
   up slightly for more presence against Tully's own larger captions. */
.dim-panel-title{
  display:block; font-family:'Raleway',sans-serif; font-weight:500; font-size:14px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-warm-on-dark);
  transition:color .5s ease;
}
.dim-panel.is-active .dim-panel-title{ color:var(--accent-warm); }
/* 2026.4, second pass: per client feedback ("The text should be there
   until the mouse goes over it") the supporting sentence is now fully
   hidden at rest — not just dimmed/clipped as in the first pass — and
   only fades/slides into view once the panel is active (hover on
   desktop, tap on mobile via wireDimensionPanels()'s existing
   is-active toggle; no JS change needed for this).
   2026.4, third pass: color swaps from the on-dark ivory tone (for the
   pre-fade photo backdrop) to plain charcoal, since by the time this is
   visible (.is-active) the panel's own sand background is what's showing
   through, not the photo. */
.dim-panel-desc{
  font-family:'Raleway',sans-serif; font-weight:300; font-size:15px; line-height:1.65;
  color:var(--charcoal); max-width:280px; margin-top:14px;
  opacity:0; max-height:0; overflow:hidden;
  transform:translateY(8px);
  transition:opacity .5s ease, max-height .5s cubic-bezier(.16,.8,.3,1), transform .5s cubic-bezier(.16,.8,.3,1), color .5s ease;
}
.dim-panel.is-active .dim-panel-desc{ opacity:1; max-height:180px; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .dim-panel, .dim-panel-img, .dim-panel-scrim, .dim-panel-title, .dim-panel-desc{ transition:none; }
}
@media (max-width:860px){
  /* Stacked instead of side-by-side: three narrow vertical slivers would
     be unreadable at phone width, so tapping expands height instead of
     width, with the other two still visible above/below per the brief. */
  .dim-panels{ flex-direction:column; height:auto; }
  .dim-panel{ flex:none; height:220px; transition:height .6s cubic-bezier(.16,.8,.3,1); }
  /* Explicit flex-grow:0 here overrides the desktop .is-active rule above
     (same selector specificity, so source order decides) — at this
     breakpoint the expand/contract happens via `height`, not flex-grow. */
  .dim-panels.has-active .dim-panel.is-active{ flex-grow:0; height:420px; }
  .dim-panels.has-active .dim-panel:not(.is-active){ height:110px; }
}

/* Small persistent CTA for mobile only (brief: "elegant and minimal", not an
   aggressive banner) — a slim pill fixed to the bottom of the viewport so
   the primary conversion action stays reachable through the whole scroll,
   without needing to hunt back up to the hero or down to the final CTA. */
.sticky-mobile-cta{ display:none; }
@media (max-width:860px){
  .sticky-mobile-cta{
    display:flex; align-items:center; justify-content:center;
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:40;
    padding:13px 28px; border-radius:999px;
    background:var(--accent-warm); color:var(--ivory);
    font-family:'Raleway',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    box-shadow:0 12px 28px -10px rgba(38,36,31,0.45);
  }
}

/* ---- Homepage hero variant: copy sits to the right of the frame ---- */
.page-hero.home-hero{ justify-content:flex-end; }
.home-hero .page-hero-content{ text-align:right; padding:0 64px 96px 64px; }
.home-hero h1{ font-size:clamp(34px,4.4vw,62px); white-space:nowrap; }
.home-hero .page-hero-body{ margin-left:auto; }
.home-hero .hero-scrolldown{ left:auto; right:64px; }
@media (max-width:860px){
  .home-hero .page-hero-content{ text-align:left; padding:0 22px 56px 22px; }
  .home-hero h1{ font-size:38px; white-space:normal; }
  .home-hero .page-hero-body{ margin-left:0; }
  .home-hero .hero-scrolldown{ right:auto; left:22px; }
}

/* ---- Advisory hero variant: same right-aligned treatment as the homepage ---- */
.page-hero.adv-hero{ justify-content:flex-end; }
.adv-hero .page-hero-content{ text-align:right; padding:0 64px 96px 64px; }
.adv-hero .page-hero-body{ margin-left:auto; max-width:660px; }
.adv-hero .hero-scrolldown{ left:auto; right:64px; }
@media (max-width:860px){
  .adv-hero .page-hero-content{ text-align:left; padding:0 22px 56px 22px; }
  .adv-hero .page-hero-body{ margin-left:0; }
  .adv-hero .hero-scrolldown{ right:auto; left:22px; }
}

/* ---- Ownership hero variant: same right-aligned treatment as Advisory's,
   with a smaller body line since this one runs to three sentences. ---- */
.page-hero.own-hero{ justify-content:flex-end; }
.own-hero .page-hero-content{ text-align:right; padding:0 64px 96px 64px; }
.own-hero .page-hero-body{ margin-left:auto; max-width:640px; font-size:15px; }
.own-hero .hero-scrolldown{ left:auto; right:64px; }
@media (max-width:860px){
  .own-hero .page-hero-content{ text-align:left; padding:0 22px 56px 22px; }
  .own-hero .page-hero-body{ margin-left:0; }
  .own-hero .hero-scrolldown{ right:auto; left:22px; }
}

/* ---------- Editorial two-col split (image + text), used repeatedly ---------- */
.split{ width:100%; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.split.reverse .split-img{ order:2; }
.split.reverse .split-text{ order:1; }
.split-img{ position:relative; min-height:520px; overflow:hidden; }
.split-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.16,.8,.3,1); }
.split:hover .split-img img{ transform:scale(1.035); }
.split-text{ display:flex; flex-direction:column; justify-content:center; padding:80px 88px; }
.split-index{ font-size:12px; font-weight:600; letter-spacing:0.2em; color:var(--teal); margin-bottom:18px; }
/* Accent kickers (Advisory's section titles, week types, etc.) match the
   same small-caps "orange title" treatment used sitewide (.eyebrow.accent)
   rather than the plain teal label style above. */
.split-index.accent{ font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-warm); }
.split-text h3{ font-size:clamp(22px,2.6vw,31px); line-height:1.32; margin-bottom:20px; }
.split-text p{ max-width:440px; margin-bottom:24px; }
@media (prefers-reduced-motion: reduce){ .split-img img, .split:hover .split-img img{ transition:none; transform:none; } }

/* ---------- Three Worlds (home) ---------- */
.worlds{ display:grid; grid-template-columns:repeat(3,1fr); }
.world{ position:relative; min-height:620px; overflow:hidden; display:flex; align-items:flex-end; border-right:1px solid rgba(250,247,240,0.14); }
.world:last-child{ border-right:none; }
.world-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.16,.8,.3,1); }
.world:hover .world-img{ transform:scale(1.04); }
.world-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,42,54,0.85) 0%, rgba(21,42,54,0.55) 26%, rgba(21,42,54,0.1) 52%, rgba(21,42,54,0) 68%); }
.world-content{ position:relative; z-index:2; padding:22px 26px; }
.world-eyebrow{ font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(250,247,240,0.75); margin-bottom:8px; }
.world-h{ font-family:'Raleway',sans-serif; font-weight:300; font-size:18px; line-height:1.3; color:var(--ivory); margin-bottom:8px; text-wrap:balance; min-height:2.6em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.world-p{ font-size:12.5px; line-height:1.55; color:rgba(250,247,240,0.8); margin-bottom:14px; max-width:300px; min-height:3.1em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.world-link{ display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--ivory); border-bottom:1px solid var(--accent-warm); padding-bottom:4px; }
.world-link svg{ width:11px; height:11px; flex-shrink:0; }
@media (prefers-reduced-motion: reduce){ .world-img{ transition:none; } }

/* ---------- Principle grid (Why Solace) ---------- */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px 40px; max-width:1100px; margin:0 auto; }
.principle-index{ font-size:12px; color:var(--teal); font-weight:600; letter-spacing:.14em; margin-bottom:14px; transition:color .25s ease; }
.principle h4{ font-family:'Raleway',sans-serif; font-weight:400; font-size:19px; color:var(--charcoal); margin:0 0 10px 0; }
.principle p{ font-size:14.5px; margin:0; }
/* A quiet hover response (Advisory/Ownership/About feature grids) — these
   items were plain and static next to the rest of the site's now-consistent
   "everything responds to touch" feel. Kept editorial (no card box/border,
   which this grid never had) rather than borrowing the boxed-card look used
   for Experience's carousel. */
.principle{ transition:transform .3s cubic-bezier(.16,.8,.3,1); }
.principle:hover{ transform:translateY(-4px); }
.principle:hover .principle-index{ color:var(--accent-warm); }
/* Per-item scroll-triggered stagger (--rd set inline per item), same motif
   as .exp-carousel-card / .fact — the parent grid carries its own .reveal
   for the group fade, while each item also staggers in on its own delay. */
html.js-anim .principle{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.16,.8,.3,1); transition-delay:var(--rd,0ms); }
html.js-anim .principles.is-visible .principle{ opacity:1; transform:none; }
html.js-anim .principles.is-visible .principle:hover{ transform:translateY(-4px); }
@media (prefers-reduced-motion: reduce){
  .principle{ transition:color .25s ease; }
  .principle:hover{ transform:none; }
  html.js-anim .principle{ opacity:1; transform:none; transition:color .25s ease; }
}

/* ---------- Build Advisory: stage timeline (Advisory page only) ----------
   Replaces an earlier always-expanded 5-card grid that read as too busy for
   one section. Five numbered stops sit on a single connecting line ending
   in a small arrow (the same course-line motif as the homepage's
   Performance, Differently statement track); hovering, focusing or tapping
   a stage's title pops its detail open beneath it, the same reveal-on-hover
   interaction as the homepage's Why Solace principle row — so all five
   stages stay reachable while the section itself stays quiet by default. */
.stage-track{ max-width:1080px; margin:0 auto; }
.stage-track-row{ display:grid; grid-template-columns:repeat(var(--stage-cols,5),1fr); align-items:start; gap:8px 10px; position:relative; }
.stage-track-row::before{ content:''; position:absolute; top:11px; left:10%; right:5%; height:1px; background:var(--accent-warm); opacity:0.45; }
.stage-track-arrow{ position:absolute; left:95%; top:11px; transform:translate(-50%,-50%); line-height:0; opacity:0.75; }
.stage-track-arrow .stmt-track-arrow-svg{ width:18px; height:11px; }
.stage-item{ position:relative; z-index:1; text-align:center; padding:0 4px; }
.stage-term-btn{ width:100%; display:flex; flex-direction:column; align-items:center; background:none; border:none; padding:0; cursor:pointer; }
.stage-num{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; margin-bottom:14px; font-size:10.5px; font-weight:600; color:var(--accent-warm); background:var(--ivory); border:1px solid var(--accent-warm); border-radius:50%; transition:background-color .25s ease, color .25s ease; }
.stage-term{ position:relative; display:inline-block; font-family:'Raleway',sans-serif; font-weight:300; font-size:15.5px; line-height:1.3; color:var(--charcoal); padding-bottom:8px; transition:color .25s ease; }
.stage-term::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:center; transition:transform .35s ease; }
.stage-item.is-open .stage-term, .stage-item:hover .stage-term, .stage-item:focus-within .stage-term{ color:var(--accent-warm); }
.stage-item.is-open .stage-term::after, .stage-item:hover .stage-term::after, .stage-item:focus-within .stage-term::after{ transform:scaleX(1); }
.stage-item.is-open .stage-num, .stage-item:hover .stage-num, .stage-item:focus-within .stage-num{ background:var(--accent-warm); color:var(--ivory); }
.stage-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.stage-item.is-open .stage-a, .stage-item:hover .stage-a, .stage-item:focus-within .stage-a{ max-height:220px; }
.stage-a p{ margin:12px auto 0 auto; font-size:13px; line-height:1.55; color:var(--muted); max-width:190px; }
@media (max-width:900px){
  .stage-track-row{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .stage-track-row::before, .stage-track-arrow{ display:none; }
}

/* ---------- Why Solace: statement + principle index (home page only) ---------- */
.section.why-solace{ padding-top:64px; }
.why-solace-statement{ display:block; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(30px,3.6vw,46px); line-height:1.28; letter-spacing:-0.015em; text-wrap:balance; color:var(--charcoal); }
.why-solace-statement .ws-line{ display:block; }
.why-solace-statement .ws-accent{ color:var(--accent-warm); font-weight:300; font-style:italic; letter-spacing:0.002em; }

.principle-row-index{ position:relative; display:flex; align-items:flex-start; flex-wrap:nowrap; justify-content:center; max-width:1140px; margin:56px auto 0 auto; }
.principle-item{ flex:0 1 auto; min-width:0; text-align:center; padding:0 20px; }
.principle-divider{ flex-shrink:0; width:5px; height:5px; margin-top:calc(clamp(14px,1.5vw,19px) / 2 - 1px); background:var(--accent-warm); opacity:0.55; transform:rotate(45deg); }
.principle-term-btn{ width:100%; background:none; border:none; padding:0; cursor:pointer; }
.principle-term{ position:relative; display:inline-block; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(14px,1.5vw,19px); color:var(--charcoal); padding-bottom:8px; white-space:nowrap; transition:color .25s ease; }
.principle-term::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:center; transition:transform .35s ease; }
.principle-item.is-open .principle-term,
.principle-item:hover .principle-term,
.principle-item:focus-within .principle-term{ color:var(--accent-warm); }
.principle-item.is-open .principle-term::after,
.principle-item:hover .principle-term::after,
.principle-item:focus-within .principle-term::after{ transform:scaleX(1); }
.principle-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.principle-item.is-open .principle-a,
.principle-item:hover .principle-a,
.principle-item:focus-within .principle-a{ max-height:220px; }
.principle-a p{ margin:12px auto 0 auto; font-size:13.5px; line-height:1.55; color:var(--muted); max-width:190px; }

/* ---------- Editorial statement (Performance, Differently) ---------- */
.statement{ max-width:1040px; margin:0 auto; text-align:center; }
.statement-list-lead{ margin-top:48px; font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-warm-on-dark); }

/* ---------- Statement track (horizontal course-line + wake/arrow) ----------
   Replaces an earlier hub-and-spoke / ship's-wheel treatment that read as
   too literal a nautical icon. This version is a single horizontal line —
   a "course line" the ten items sit along, alternating above and below —
   ending in a small wake-and-chevron mark that reads as forward motion /
   speed, without needing any measured JS: everything here is plain CSS.
   Each row holds all 10 slots (five real items + five invisible spacers,
   alternating) so every item gets its own tick along the spine instead of
   a top item and a bottom item sharing one. */
.stmt-track-wrap{ max-width:1040px; margin:56px auto 0 auto; }
.stmt-track-row{ display:flex; justify-content:space-between; gap:6px; }
.stmt-track-item{ flex:1 1 0; min-width:0; text-align:center; font-size:13px; font-weight:300; line-height:1.4; color:rgba(250,247,240,0.9); padding:0 4px; position:relative; }
.stmt-track-top .stmt-track-item:not(.stmt-track-empty){ padding-bottom:18px; }
.stmt-track-top .stmt-track-item:not(.stmt-track-empty)::after{ content:''; position:absolute; left:50%; bottom:0; width:1px; height:18px; background:var(--accent-warm-on-dark); opacity:0.5; transform:translateX(-50%); }
.stmt-track-bottom .stmt-track-item:not(.stmt-track-empty){ padding-top:18px; }
.stmt-track-bottom .stmt-track-item:not(.stmt-track-empty)::before{ content:''; position:absolute; left:50%; top:0; width:1px; height:18px; background:var(--accent-warm-on-dark); opacity:0.5; transform:translateX(-50%); }
.stmt-track-empty{ visibility:hidden; }
/* .stmt-track-spine is just a positioning strip now; the visible line lives
   on .stmt-track-line so it can be scaled (drawn) without also squashing
   the arrow icons that sit absolutely-positioned alongside it. */
.stmt-track-spine{ position:relative; height:1px; }
.stmt-track-line{ position:absolute; inset:0; background:var(--accent-warm-on-dark); opacity:0.7; transform-origin:left center; }
.stmt-track-arrow{ position:absolute; right:-6px; top:50%; transform:translateY(-50%); line-height:0; }
.stmt-track-arrow-svg{ display:block; width:26px; height:16px; overflow:visible; }
.stmt-track-arrow-svg .wake{ stroke:var(--accent-warm-on-dark); stroke-width:1.1; opacity:0.45; fill:none; stroke-linecap:round; }
.stmt-track-arrow-svg .tip{ stroke:var(--accent-warm-on-dark); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* Travelling marker: a smaller copy of the same end-arrow, animated along
   the spine. Hidden by default (opacity:0, no animation) so it only ever
   appears where scroll-triggered motion is actually supported; the
   reduced-motion query below removes it outright rather than freezing it
   mid-line. */
.stmt-track-runner{ position:absolute; left:0; top:50%; transform:translate(-50%,-50%); line-height:0; opacity:0; }
.stmt-track-runner .stmt-track-arrow-svg{ width:20px; height:12px; }
/* Slowed twice now on client feedback ("giving headache when reading the
   points") — a long, gentle 10s crossing plus a softer peak opacity so the
   runner reads as ambient motion in the background rather than something
   the eye has to track while reading the item text. */
html.js-anim .stmt-track-runner{ animation:stmt-track-run 10s linear infinite; animation-play-state:paused; }
html.js-anim .stmt-track-wrap.is-visible .stmt-track-runner{ animation-play-state:running; }
@keyframes stmt-track-run{
  0%{ left:0%; opacity:0; }
  8%{ opacity:0.7; }
  92%{ opacity:0.7; }
  100%{ left:100%; opacity:0; }
}
/* One-time draw-in: the line fills left-to-right and each item switches on
   with a delay (--rd, set per item in statementTrack()) timed to roughly
   match the runner's first pass. Both stay fully drawn/visible afterwards;
   only the runner keeps moving once this has finished. */
html.js-anim .stmt-track-line{ transform:scaleX(0); transition:transform 4s cubic-bezier(.4,0,.2,1); }
html.js-anim .stmt-track-wrap.is-visible .stmt-track-line{ transform:scaleX(1); }
html.js-anim .stmt-track-item:not(.stmt-track-empty){ opacity:0; transform:translateY(6px); transition:opacity .6s ease, transform .6s ease; transition-delay:var(--rd, 0ms); }
html.js-anim .stmt-track-wrap.is-visible .stmt-track-item:not(.stmt-track-empty){ opacity:1; transform:none; }
html.js-anim .stmt-track-top .stmt-track-item:not(.stmt-track-empty)::after,
html.js-anim .stmt-track-bottom .stmt-track-item:not(.stmt-track-empty)::before{
  opacity:0; transition:opacity .4s ease; transition-delay:var(--rd, 0ms);
}
html.js-anim .stmt-track-wrap.is-visible .stmt-track-top .stmt-track-item:not(.stmt-track-empty)::after,
html.js-anim .stmt-track-wrap.is-visible .stmt-track-bottom .stmt-track-item:not(.stmt-track-empty)::before{
  opacity:0.5;
}
@media (prefers-reduced-motion: reduce){
  .stmt-track-runner{ display:none; }
  html.js-anim .stmt-track-line{ transform:scaleX(1); transition:none; }
  html.js-anim .stmt-track-item:not(.stmt-track-empty){ opacity:1; transform:none; transition:none; }
  html.js-anim .stmt-track-top .stmt-track-item:not(.stmt-track-empty)::after,
  html.js-anim .stmt-track-bottom .stmt-track-item:not(.stmt-track-empty)::before{ opacity:0.5; transition:none; }
}

/* ---------- Private by design (Experience page) ----------
   Rebuilt as the section's key selling point: a private whole-yacht
   proposition told through spacious editorial typography rather than a
   row of generic spec cards. Light ivory, not navy — this now sits as an
   airy break between the sand-toned week types above and the sand
   "Start your experience" section below, alternating the same way the
   rest of the page already does. No bordered cards anywhere.
   The main title is deliberately quiet — set in the same small kicker
   style as "The Solace Experience" above it (the .eyebrow.accent class,
   reused directly) rather than a big display heading, per client
   direction: this section reads as a run of calm editorial statements
   rather than a punchy banner. */
.section.pbd{ padding-top:80px; padding-bottom:64px; }
.pbd-head{ max-width:900px; margin:0 auto; text-align:center; }
/* Shared type style for the three "statement" lines that sit between the
   tiny title and the body copy: the intro line, and the two chapter
   headings below. All three read as the same quiet editorial voice,
   forced onto one line at desktop widths (client request) and released
   back to normal wrapping on mobile. */
.pbd-caption-line{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(16px,1.8vw,22px); line-height:1.5; color:var(--charcoal); white-space:nowrap; text-wrap:balance; }
.pbd-lede{ margin:20px auto 0 auto; max-width:860px; }
.pbd-body{ margin:16px auto 0 auto; }

/* Superseded (2026.2 compact/premium redesign): this big-numeral stat row
   was the Experience page's Quick Facts section, folded into the hero
   itself (.exp-hero-facts, reusing .yacht-specs instead) so that whole
   section could be removed — the large numerals also read too much like a
   dashboard for the more premium/editorial tone this pass is after. Left in
   place as harmless dead code (also unused since .pbd-chapter/.pbd-finale/
   .section.pbd around it, from an earlier design entirely). */
.pbd-stats{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; max-width:1080px; margin:72px auto 0 auto; }
.pbd-stat{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 40px; }
/* All three figures now carry the warm accent (client request) — a
   typographic accent rather than a background block of orange. */
.pbd-stat-num{ font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(46px,6vw,72px); line-height:1; color:var(--accent-warm); letter-spacing:-0.01em; }
.pbd-stat-label{ margin-top:14px; font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.pbd-stat-divider{ width:1px; height:56px; background:var(--rule); flex-shrink:0; align-self:center; }

/* Shared by both prose chapters ("Built around you." and "Once you step
   aboard, everything is taken care of.") so the two read as matching
   editorial beats rather than one being a bespoke afterthought. Widened
   from the paragraphs' own reading width so the one-line chapter heading
   has room to sit on a single line above them. */
.pbd-chapter{ max-width:860px; margin:88px auto 0 auto; text-align:center; }
/* The gap into the second chapter ("Once you step aboard...") read slightly
   too big next to the first — trimmed just this one, so "Built around you."
   keeps its fuller 88px breathing room. */
.pbd-chapter-included{ margin-top:68px; }
.pbd-chapter-h{ margin-bottom:20px; }
.pbd-chapter p{ max-width:640px; margin:0 auto 18px auto; }
.pbd-chapter p:last-child{ margin-bottom:0; }
/* Kept on one line at desktop widths (client request), releasing back to
   normal wrap on mobile like the other forced one-liners on this page. */
.pbd-chapter p.pbd-oneline{ font-size:13.5px; white-space:nowrap; }
/* The one exception (spirits/alcohol) stays secondary to the main
   inclusions message — smaller, muted, quietly set apart rather than
   another full-weight paragraph in the flow, and kept on one line. */
.pbd-exception{ margin:14px auto 0 auto!important; max-width:820px; font-size:14px; font-style:italic; color:var(--muted); white-space:nowrap; }

/* The closing statement gets a small design moment of its own — the two
   lines fade in with a stagger either side of a thin accent rule that
   draws in between them, rather than sitting as a single static line. */
.pbd-finale{ margin:88px auto 0 auto; max-width:680px; text-align:center; }
.pbd-finale-line{ display:block; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(30px,4vw,50px); line-height:1.18; color:var(--accent-warm); text-wrap:balance; }
.pbd-finale-rule{ display:block; width:0; height:1px; background:var(--accent-warm); margin:18px auto; transition:width 1s cubic-bezier(.4,0,.2,1); transition-delay:.5s; }
html.js-anim .pbd-finale-line{ opacity:0; transform:translateY(10px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.8,.3,1); }
html.js-anim .pbd-finale.is-visible .pbd-finale-line.pbd-finale-d1{ opacity:1; transform:none; transition-delay:.05s; }
html.js-anim .pbd-finale.is-visible .pbd-finale-rule{ width:64px; }
html.js-anim .pbd-finale.is-visible .pbd-finale-line.pbd-finale-d2{ opacity:1; transform:none; transition-delay:.85s; }

/* Per-stat scroll-triggered stagger (--rd set inline per stat in app.js) */
html.js-anim .pbd-stat{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.3,1); transition-delay:var(--rd,0ms); }
html.js-anim .pbd-stats.is-visible .pbd-stat{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js-anim .pbd-stat{ opacity:1; transform:none; transition:none; }
  .pbd-finale-line{ opacity:1!important; transform:none!important; transition:none!important; }
  .pbd-finale-rule{ width:64px!important; transition:none!important; }
}
@media (max-width:860px){
  .section.pbd{ padding-top:64px; padding-bottom:48px; }
  .pbd-caption-line{ white-space:normal; font-size:clamp(15px,4vw,18px); }
  .pbd-chapter{ margin-top:56px; }
  .pbd-chapter-included{ margin-top:40px; }
  .pbd-chapter p.pbd-oneline{ white-space:normal; }
  .pbd-exception{ white-space:normal; font-size:13.5px; }
  .pbd-stats{ display:grid; grid-template-columns:1fr 1fr; row-gap:36px; margin-top:56px; }
  .pbd-stat{ padding:0 12px; }
  .pbd-stat-divider{ display:none; }
  .pbd-stat-num{ font-size:44px; }
  .pbd-finale{ margin-top:64px; }
  .pbd-finale-line{ font-size:clamp(26px,6vw,34px); }
}


/* ---------- Experience type page section ----------
   Was a full-bleed 64vh hero image stacked above a text block — read as
   "big big pictures" three times in a row. Now reuses the site's standard
   editorial split (image half-width, capped height, alternating sides) for
   the intro, with the fuller includes/price/CTA content below it in its own
   centered column, alternating a quiet sand tint per section for separation. */
.exp-type{ width:100%; padding:64px 0; }
.exp-type.sand{ background:var(--sand); }
.exp-type-body{ padding:48px 64px; max-width:920px; margin:0 auto; }
.exp-type-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 32px; margin:36px 0; }
.exp-type-grid div{ font-size:14.5px; color:var(--charcoal); padding:8px 0; border-bottom:1px solid var(--rule); }
.exp-price{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 64px; margin:32px 0; padding:28px 36px; background:var(--sand); border-radius:2px; }
.exp-price div{ font-size:14.5px; color:var(--charcoal); }
.exp-price strong{ display:block; font-family:'Raleway',sans-serif; font-weight:400; font-size:20px; margin-bottom:4px; }
/* Keep the price card visually distinct from the section's own background
   when that section already carries the sand tint. */
.exp-type.sand .exp-price{ background:var(--offwhite); }
/* Condensing pass: Adventure/Coaching/Watersports read as too much scroll
   per section. Tighten the internal rhythm (paragraph gaps, price margins)
   without touching the base rules above, which .exp-price also serves on
   Advisory and Ownership. */
.exp-type-body p{ margin:0 0 12px 0; }
/* Stacked-photo treatment for these three sections only (img2/img3 in
   splitSection()): the base .split rule stretches the image column to match
   the text column's own height (align-items:stretch), which is long here
   thanks to the includes list. A single photo stretched that tall read as
   oversized; capping it at a fixed height instead left a bare gap below it.
   Splitting it into two (or, for Watersports, three — a dedicated gear
   shot) photos sharing the stretched column via flex keeps each photo a
   sane, editorial size while the set still fills the row. */
.exp-type-photos{ display:flex; flex-direction:column; gap:4px; height:100%; }
.exp-type-photo{ position:relative; overflow:hidden; flex:1 1 0; min-height:0; }
.exp-type-photo-a{ flex-grow:1.4; }
/* Three-photo variant (Watersports' extra gear shot): even thirds read
   better than one dominant photo over two small ones. */
.exp-type-photos.three .exp-type-photo-a{ flex-grow:1; }
.exp-type-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.16,.8,.3,1); }
/* .exp-type-photos keeps the shared "split-img" class, so the sitewide
   ".split:hover .split-img img" zoom rule already reaches both photos here
   (a descendant selector matches any depth) — no extra rule needed. */
@media (prefers-reduced-motion: reduce){ .exp-type-photo img{ transition:none; } }
.exp-type .exp-price{ margin:18px 0; padding:22px 30px; }
.exp-type .exp-partner{ margin-top:16px; }
/* The "what's included" list now sits in the split's own text column
   (see includesExtra in renderExperienceType()), condensed into a tight
   two-column list rather than the old full-width three-column grid below
   the photo — a new class, so it can't collide with the shared
   .exp-type-grid still used bare by Advisory/Ownership. */
.exp-type-includes{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin:10px 0 0 0; max-width:420px; }
.exp-type-includes div{ font-size:13.5px; color:var(--charcoal); padding:6px 0; border-bottom:1px solid var(--rule); }

/* ---------- Service list (Ownership: Owner Support / Delivery & Repositioning) ----------
   Replaces the old bottom-bordered .exp-type-grid text list on this page —
   full-width with no photo to carry it, that bordered-rows treatment read
   as a plain spreadsheet. A small accent-outlined check mark beside each
   line, generous spacing and no rules underneath reads as a considered,
   reassuring list of services rather than a slide of bullet points. */
.service-list{ display:grid; gap:20px 36px; max-width:760px; margin:28px auto 0 auto; text-align:left; }
.service-item{ display:flex; align-items:flex-start; gap:13px; }
.service-check{ display:flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; border:1px solid var(--accent-warm); color:var(--accent-warm); flex-shrink:0; margin-top:1px; }
.service-check svg{ width:10px; height:10px; }
.service-item span:last-child{ font-size:14.5px; line-height:1.55; color:var(--charcoal); padding-top:2px; }
@media (max-width:768px){ .service-list{ grid-template-columns:1fr 1fr!important; max-width:480px; } }
@media (max-width:480px){ .service-list{ grid-template-columns:1fr!important; max-width:340px; } }
/* Delivery & Repositioning's list only has two columns of short lines, so
   the shared 760px/1fr-1fr sizing above left a lot of dead air between
   them (each column stretched far wider than its text). Sizing the two
   columns to their own content and centring the pair pulls them back
   together into one deliberate block instead of two columns spread across
   the full width. */
#delivery-repositioning .service-list{ grid-template-columns:repeat(2,max-content)!important; justify-content:center; column-gap:52px; max-width:none; }
@media (max-width:640px){
  #delivery-repositioning .service-list{ grid-template-columns:1fr!important; justify-content:stretch; max-width:340px; }
}

/* Selective Partnership's closing line ("If you think your yacht might
   qualify...") widened (text size unchanged, matching the paragraphs above
   it) just enough that it settles on one line at typical desktop widths —
   this column's width tracks the viewport (the split isn't capped to a
   container) and is narrower than it looks once its own 88px side padding
   is accounted for, so the default 440px cap wrapped it. Not
   white-space:nowrap: a block paragraph left at its normal wrapping
   behaviour just wraps gracefully below the widths where even this doesn't
   fit, with no risk of it forcing the grid column wider than its 50% share. */
#selective-partnership .split-text > div.reveal-d2 p:last-child{ max-width:620px; }

/* Stewardship's opening paragraphs: widened and given a touch less
   line-height than the shared p{} default so six short paragraphs read as
   an airy, horizontal block rather than a tall, dense column. */
#stewardship .stewardship-body{ max-width:880px; margin:0 auto; text-align:center; }
#stewardship .stewardship-body p{ line-height:1.6; margin-bottom:14px; }
#stewardship .stewardship-body p:last-child{ margin-bottom:0; }
/* "Your yacht. Professionally operated. Meticulously maintained." needs a
   wider head than the shared .section-head's 760px to settle on one line
   at typical desktop widths without overflowing it. */
#stewardship .section-head{ max-width:920px; }

/* One-line ledes (Delivery & Repositioning / Owner relationship). Both
   sentences run longer than the shared .section-head's 760px, so the head
   is widened for both. */
#delivery-repositioning .section-head, #owner-relationship .section-head{ max-width:1040px; }
/* Delivery & Repositioning's line kept at a smaller nowrap size (not
   max-width:none — since it sits centred, letting nowrap text outgrow its
   own box overflows unevenly rather than growing the box). Normal-wrapping
   again below the width where even the smaller size stops fitting. */
.delivery-lede{ white-space:nowrap; font-size:12.5px; }
@media (max-width:1020px){
  .delivery-lede{ white-space:normal; font-size:16px; }
}
/* Owner relationship's line is kept at the normal paragraph size (client
   feedback: shrinking it like Delivery & Repositioning's line made it look
   inconsistent with the rest of the page's text) — its widened 1040px
   section-head is already roomy enough for this longer sentence to land on
   one line at typical desktop widths at that default size, so no shrinking
   or nowrap is needed; it simply wraps below the widths where it doesn't. */
/* Price + CTA below the photo — for Watersports, preceded by the partner
   credit, which now sits here rather than after the equipment copy (that
   copy moved up into the split's own text column). Centred so it reads
   as a deliberate call-to-action rather than a left-aligned leftover. */
.exp-type-cta{ text-align:center; }
.exp-type-cta .exp-price{ justify-content:center; }
/* Text-based partner credit for the North Action Sports equipment
   partnership — a typographic lockup in the site's own editorial style
   rather than an external logo file, since no licensed brand asset is
   available to embed here. */
.exp-partner{ display:inline-flex; flex-wrap:wrap; align-items:center; margin-top:22px; padding:14px 22px; border:1px solid var(--rule); border-radius:2px; }
.exp-partner-label{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.exp-partner-name{ font-family:'Raleway',sans-serif; font-size:15px; letter-spacing:0.03em; color:var(--charcoal); padding-left:14px; margin-left:14px; border-left:1px solid var(--rule); }

/* ---------- The Yacht: auto-scrolling photo band ----------
   A continuous, self-playing filmstrip under the Pressure Drop intro copy,
   giving the section more visual presence without turning it into a manual
   carousel the visitor has to operate. The track is the image list rendered
   twice back to back and animated exactly half its own width, so the loop
   point is invisible; the duplicate copy is aria-hidden. Paused on hover so
   a caption can actually be read, and disabled for reduced motion, where it
   falls back to a manually scrollable strip showing the same images once. */
.yacht-gallery{ margin:48px -64px 0 -64px; overflow:hidden; }
.yacht-gallery-track{ display:flex; gap:4px; width:max-content; animation:yacht-scroll 42s linear infinite; }
.yacht-gallery:hover .yacht-gallery-track{ animation-play-state:paused; }
.yacht-gallery-item{ position:relative; flex:0 0 auto; width:340px; height:230px; overflow:hidden; cursor:zoom-in; }
.yacht-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,.8,.3,1); }
.yacht-gallery-item:hover img, .yacht-gallery-item:focus-visible img{ transform:scale(1.06); }
.yacht-gallery-item figcaption{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:10px 16px; font-size:12px; letter-spacing:0.03em; color:var(--ivory); background:linear-gradient(180deg, rgba(21,42,54,0), rgba(21,42,54,0.7)); }
@media (prefers-reduced-motion: reduce){ .yacht-gallery-item img{ transition:none; } }

/* ---------- Lightbox (click-to-enlarge yacht photos) ---------- */
.lightbox{ position:fixed; inset:0; z-index:400; background:rgba(15,20,18,0.94); display:flex; align-items:center; justify-content:center; padding:64px 40px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ position:relative; max-width:1100px; width:100%; text-align:center; }
.lightbox-inner img{ width:100%; height:auto; max-height:78vh; object-fit:contain; display:block; margin:0 auto; }
.lightbox-caption{ margin:16px 0 0 0; color:rgba(250,247,240,0.85); font-size:14px; }
.lightbox-close{ position:absolute; top:-52px; right:0; background:none; border:none; cursor:pointer; padding:10px; color:var(--ivory); }
.lightbox-close svg{ width:22px; height:22px; display:block; }
@media (max-width:640px){
  .lightbox{ padding:88px 20px 40px 20px; }
  .lightbox-close{ top:-40px; right:-4px; }
}

/* ---------- "Discover Pressure Drop" overlay (2026.3 interactive-editorial
   redesign) ---------- Reuses .lightbox's scrim/open-close/escape-key
   mechanics (see openYachtOverlay()/closeYachtOverlay() in app.js, modeled
   directly on openYachtLightbox()/closeYachtLightbox() above) but swaps the
   centered single image for a scrollable navy card holding the yacht's
   full copy, video and gallery filmstrip — the detail moved out of the
   compressed Pressure Drop scene so that scene can stay to a headline, a
   descriptor and a 5-item spec line. */
.yacht-overlay .lightbox-close{ top:20px; right:20px; z-index:2; }
.yacht-overlay-inner{ position:relative; width:100%; max-width:900px; max-height:86vh; overflow-y:auto; background:var(--navy); padding:56px; text-align:left; box-shadow:0 60px 120px -40px rgba(0,0,0,0.5); }
.yacht-overlay-inner .yacht-copy{ margin:0 auto; max-width:none; text-align:left; }
/* 2026.4, seventh pass: the full spec sheet the "Discover the specs"
   button now leads with (c.yacht.fullSpecs). Two quiet columns of
   label/value rows on hairlines — technical, not a feature list. */
.yacht-spec-table{ margin:32px 0 36px 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px; border-top:1px solid rgba(250,247,240,0.16); }
.yacht-spec-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid rgba(250,247,240,0.16); }
.yacht-spec-row dt{ font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:rgba(250,247,240,0.6); }
.yacht-spec-row dd{ margin:0; font-family:'Raleway',sans-serif; font-size:17px; font-weight:400; letter-spacing:0.04em; color:var(--ivory); text-align:right; }
@media (max-width:640px){
  .yacht-spec-table{ grid-template-columns:1fr; }
}
.yacht-overlay-inner .yacht-video{ margin:40px auto 0 auto; }
.yacht-overlay-inner .yacht-gallery{ margin:40px -56px 0 -56px; }
@media (max-width:640px){
  .yacht-overlay-inner{ padding:32px 24px; max-height:82vh; }
  .yacht-overlay-inner .yacht-gallery{ margin:32px -24px 0 -24px; }
}
@keyframes yacht-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .yacht-gallery{ overflow-x:auto; }
  .yacht-gallery-track{ animation:none; }
}

/* ---------- Start your experience (Experience page closing section) ----------
   Back to a single framed invitation card (client feedback: the split
   photo+text felt generic — the earlier boxed container, holding the copy
   and the button together inside one frame, felt "privileged and private,
   almost unique to have it and be able to click on it"). No photo pulling
   focus here; the card itself, on the section's own sand background, is
   the focal point, with a small centred accent mark standing in for a
   wax-seal/emblem and a hover response that makes the whole thing feel
   like something worth opening. */
.section.start-exp{ padding-top:64px; }
.start-exp-card{
  position:relative; max-width:820px; margin:0 auto; text-align:center;
  background:var(--offwhite); border:1px solid var(--rule);
  padding:88px 64px; transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.start-exp-card:hover{ border-color:var(--accent-warm); box-shadow:0 32px 64px -32px rgba(38,36,31,0.28); transform:translateY(-3px); }
.start-exp-card .eyebrow{ margin-bottom:20px; }
.start-exp-card h2{ margin-bottom:22px; }
/* Kept on one line at desktop widths (client request); releases back to
   normal wrap on mobile. */
.start-exp-lede{ font-size:clamp(26px,3vw,38px); white-space:nowrap; }
.start-exp-body{ max-width:520px; margin:0 auto; }
.start-exp-body p{ margin-bottom:16px; }
.start-exp-body p:last-child{ margin-bottom:0; }
.start-exp-card .btn{ margin-top:32px; }
@media (prefers-reduced-motion: reduce){ .start-exp-card{ transition:none; } .start-exp-card:hover{ transform:none; } }

.start-exp-how{ margin-top:64px; max-width:1080px; margin-left:auto; margin-right:auto; text-align:center; }
/* Horizontal three-up step row with the site's original animated icon
   badges restored above each numeral (a bouncing-dot chat bubble, a
   popping calendar check and a beating heart — the ICON.chat/calendar/heart
   markup was already in app.js from the earlier "Booking journey" design,
   just unused since; only the animation CSS needed rebuilding). A thin
   vertical rule separates each step the way .pbd-stat-divider separates
   the stats above. */
.start-exp-steps{ margin-top:56px; display:grid; grid-template-columns:repeat(var(--steps-cols,3),1fr); gap:0; text-align:left; }
.start-exp-step{ display:flex; flex-direction:column; align-items:flex-start; padding:0 36px; border-left:1px solid var(--rule); }
.start-exp-step:first-child{ border-left:none; padding-left:0; }
.start-exp-step:last-child{ padding-right:0; }
.start-exp-step-icon-wrap{ position:relative; display:inline-flex; margin-bottom:20px; }
.start-exp-step-icon{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; border:1px solid var(--rule); color:var(--accent-warm); }
.start-exp-step-icon svg{ width:22px; height:22px; }
/* Numeral shrunk to a small badge tucked against the icon, rather than a
   large standalone figure — same information, far less visual weight. */
.start-exp-num{
  position:absolute; top:-5px; right:-7px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--offwhite); border:1px solid var(--rule);
  font-family:'Raleway',sans-serif; font-weight:600; font-size:10px; line-height:1;
  color:var(--accent-warm);
}
.start-exp-step-text h4{ font-family:'Raleway',sans-serif; font-weight:400; font-size:20px; color:var(--charcoal); margin:0 0 10px 0; }
.start-exp-step-text p{ font-size:14.5px; line-height:1.65; color:var(--muted); max-width:none; margin:0; }
html.js-anim .start-exp-step{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.3,1); transition-delay:var(--rd,0ms); }
html.js-anim .start-exp-steps.is-visible .start-exp-step{ opacity:1; transform:none; }
/* Chat bubble: the three dots bounce in a gentle wave, looping. */
@keyframes chat-dot-bounce{ 0%,60%,100%{ transform:translateY(0); } 30%{ transform:translateY(-2.5px); } }
.start-exp-step-icon .chat-dot{ animation:chat-dot-bounce 1.4s ease-in-out infinite; }
.start-exp-step-icon .chat-dot-2{ animation-delay:.15s; }
.start-exp-step-icon .chat-dot-3{ animation-delay:.3s; }
/* Calendar check: draws in, holds, then fades and redraws — a continuous
   loop like the other two icons, rather than a one-off pop that only fires
   once and then just sits there looking inert. */
@keyframes cal-check-pop{
  0%{ stroke-dashoffset:12; opacity:0; }
  18%{ opacity:1; }
  40%{ stroke-dashoffset:0; opacity:1; }
  78%{ stroke-dashoffset:0; opacity:1; }
  92%{ opacity:0; }
  100%{ stroke-dashoffset:12; opacity:0; }
}
.start-exp-step-icon .cal-check{ stroke-dasharray:12; stroke-dashoffset:0; opacity:1; }
html.js-anim .start-exp-step-icon .cal-check{ animation:cal-check-pop 3.2s ease-in-out .3s infinite; }
/* Heart: a slow, quiet double-beat, looping. */
@keyframes heart-beat{ 0%,100%{ transform:scale(1); } 15%{ transform:scale(1.12); } 30%{ transform:scale(1); } 45%{ transform:scale(1.08); } 60%{ transform:scale(1); } }
.start-exp-step-icon .heart-path{ transform-origin:center; animation:heart-beat 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  html.js-anim .start-exp-step{ opacity:1; transform:none; transition:none; }
  .start-exp-step-icon .chat-dot, .start-exp-step-icon .heart-path{ animation:none; }
  .start-exp-step-icon .cal-check{ animation:none; opacity:1; }
}
@media (max-width:860px){
  .start-exp-card{ padding:56px 28px; }
  .start-exp-lede{ white-space:normal; font-size:clamp(24px,6vw,32px); }
  .start-exp-how{ margin-top:44px; }
  .start-exp-steps{ grid-template-columns:1fr; margin-top:40px; }
  .start-exp-step{ display:grid; grid-template-columns:52px 1fr; column-gap:20px; align-items:start; border-left:none; border-top:1px solid var(--rule); padding:28px 0; }
  .start-exp-step:first-child{ border-top:none; padding-top:0; }
  .start-exp-step-icon-wrap{ grid-row:1 / 3; margin-bottom:0; }
}

/* ---------- FAQ ---------- */
/* Sized down: at the previous 18px/24px-padding treatment, a handful of
   Q&As read as a much bigger commitment on the page than "a FAQ" should. */
.faq{ max-width:720px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; font-family:'Raleway',sans-serif; font-size:15px; font-weight:400; color:var(--charcoal); }
.faq-q svg{ flex-shrink:0; width:13px; height:13px; transition:transform .3s ease; color:var(--accent-warm); }
.faq-item.is-open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.is-open .faq-a{ max-height:400px; }
.faq-a p{ padding:0 0 16px 0; max-width:640px; font-size:14px; }

/* ---------- Experience Details accordion (2026.3 interactive-editorial
   redesign) ---------- A single collapsed toggle for the practical facts,
   included list and booking terms (see detailsToggle()/wireDetailsToggle()
   in app.js), modeled on the FAQ accordion just above but using a CSS
   grid-template-rows 0fr->1fr transition instead of a guessed max-height
   pixel value, since the included list's length can vary. */
.exp-details{ max-width:520px; margin:0 auto; text-align:center; }
.exp-details-toggle{ display:inline-flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; padding:14px 0; font-family:'Raleway',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--charcoal); border-bottom:1px solid var(--rule); }
.exp-details-icon{ display:inline-flex; color:var(--accent-warm); transition:transform .3s ease; }
.exp-details-icon svg{ width:13px; height:13px; display:block; }
.exp-details.is-open .exp-details-icon{ transform:rotate(45deg); }
.exp-details-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.16,.8,.3,1); }
.exp-details-panel > div{ overflow:hidden; }
.exp-details.is-open .exp-details-panel{ grid-template-rows:1fr; }
.exp-details-panel > div > *:first-child{ margin-top:32px; }
@media (prefers-reduced-motion: reduce){ .exp-details-panel{ transition:none; } .exp-details-icon{ transition:none; } }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; max-width:760px; margin:0 auto; }
/* Sized down from the shared display-2 clamp so "Wherever you are in
   the journey," — the longer of the closing statement's two forced
   lines — holds to a single line at typical widths, keeping the
   whole heading to two lines total instead of wrapping into three. */
#finalCtaHeading{ font-size:clamp(24px,3vw,38px); }
@media (max-width:400px){
  /* The smallest phones can't fit "Wherever you are in the journey," on
     one line even at the clamp's 24px floor once real font metrics are
     in play, so it needs its own smaller size here rather than relying
     on vw scaling alone. */
  #finalCtaHeading{ font-size:19px; }
}

/* ================= PLANNER (Experience) ================= */
.planner-overlay{ position:fixed; inset:0; background:var(--ivory); z-index:300; display:flex; flex-direction:column; opacity:0; pointer-events:none; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease; }
.planner-overlay.is-open{ opacity:1; pointer-events:auto; transform:none; }
.planner-top{ display:flex; align-items:center; justify-content:space-between; padding:28px 40px; border-bottom:1px solid var(--rule); }
.planner-progress{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.planner-close{ background:none; border:none; cursor:pointer; padding:8px; color:var(--charcoal); }
.planner-close svg{ width:20px; height:20px; }
.planner-track{ height:2px; background:var(--rule); }
.planner-track-fill{ height:100%; background:var(--teal); transition:width .5s cubic-bezier(.16,.8,.3,1); }
.planner-body{ flex:1; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:56px 32px; }
.planner-step{ width:100%; max-width:760px; margin:0 auto; }
.planner-step-eyebrow{ font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; text-align:center; }
.planner-step h2{ font-size:clamp(26px,3.6vw,42px); text-align:center; margin-bottom:44px; text-wrap:balance; }
.planner-choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.planner-choice{ border:1px solid var(--rule); background:var(--offwhite); padding:30px 26px; text-align:left; cursor:pointer; transition:border-color .2s ease, background-color .2s ease, transform .2s ease; }
.planner-choice:hover{ border-color:var(--teal); transform:translateY(-2px); }
.planner-choice.is-selected{ border-color:var(--teal); background:var(--teal-tint); }
.planner-choice-h{ font-family:'Raleway',sans-serif; font-size:19px; font-weight:400; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.planner-choice-check{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--rule); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.planner-choice.is-selected .planner-choice-check{ background:var(--teal); border-color:var(--teal); }
.planner-choice-check svg{ width:11px; height:11px; color:var(--ivory); opacity:0; }
.planner-choice.is-selected .planner-choice-check svg{ opacity:1; }
.planner-choice-p{ font-size:14px; color:var(--muted); margin:0; }
.planner-pills{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.planner-pill{ border:1px solid var(--rule); background:var(--offwhite); padding:14px 24px; font-size:14px; cursor:pointer; transition:border-color .2s ease, background-color .2s ease; }
.planner-pill.is-selected{ border-color:var(--teal); background:var(--teal-tint); color:var(--teal-deep); font-weight:600; }
.planner-toggle-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:560px; margin:0 auto; }
.planner-nav{ display:flex; justify-content:space-between; padding:28px 40px; border-top:1px solid var(--rule); }
.planner-field{ width:100%; }
.planner-field label{ display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.planner-field input, .planner-field textarea{ width:100%; border:1px solid var(--rule); background:var(--offwhite); padding:15px 16px; font-family:'Montserrat',sans-serif; font-size:15px; color:var(--charcoal); border-radius:2px; }
.planner-field textarea{ min-height:110px; resize:vertical; }
.planner-fields-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
/* Contact page's three interest groups (Experience/Advisory/Ownership) —
   previously an inline grid with no mobile breakpoint at all, so on narrow
   viewports its fixed 3 columns squeezed every checkbox label (long ones
   especially, e.g. "Delivery & Repositioning") into a sliver too narrow to
   wrap, overflowing the page horizontally. Given its own class here so it
   can drop to one column below 700px, same pattern as the fields grid above. */
.contact-groups-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:44px; }
@media (max-width:700px){
  .contact-groups-grid{ grid-template-columns:1fr; gap:32px; }
}
.planner-summary{ background:var(--sand); border:1px solid var(--rule); padding:36px; }
.planner-summary h3{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:20px; }
.planner-summary-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--rule); font-size:15px; }
.planner-summary-row:last-child{ border-bottom:none; }
.planner-summary-row span:first-child{ color:var(--muted); }
.planner-summary-row span:last-child{ font-weight:500; }
.planner-thanks{ text-align:center; max-width:520px; margin:0 auto; }

@media (max-width: 900px){
  .planner-fields-grid{ grid-template-columns:1fr; }
  .principles{ grid-template-columns:1fr; }
  .booking-steps{ grid-template-columns:1fr; gap:36px; }
  .booking-steps::before{ display:none; }
  .principle-row-index{ flex-wrap:wrap; row-gap:28px; gap:0 18px; }
  .principle-item{ flex:0 1 28%; padding:0 8px; }
  .principle-divider{ display:none; }
  .worlds{ grid-template-columns:1fr; }
  .world{ min-height:420px; }
  .split{ grid-template-columns:1fr; }
  .split-img{ min-height:300px; }
  .split-text{ padding:48px 28px; }
  .split.reverse .split-img{ order:1; }
  .split.reverse .split-text{ order:2; }
  /* .exp-type-photos loses the grid stretch once .split stacks to one
     column above, so its two photos (each absolutely positioned, no
     intrinsic height of their own) need an explicit height to split here. */
  .exp-type-photos{ height:320px; }
  .exp-type-photos.three{ height:440px; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 860px){
  .side-pad{ padding-left:22px; padding-right:22px; }
  .section{ padding:80px 22px; }
  .section.what-is-solace{ padding-top:48px; padding-bottom:48px; }
  .section#finalCta{ padding-top:48px; }
  /* The cta-band's 64px side padding is set inline (shared with the
     Experience/Advisory closing bands), so it needs !important here to
     narrow just on mobile — otherwise it eats too much of a phone's
     width and pushes the heading back to wrapping onto three lines. */
  #finalCta .cta-band{ padding-left:22px!important; padding-right:22px!important; }
  .section.why-solace{ padding-top:48px; }
  .section.navy.perf-diff{ padding-top:48px; }
  .section.exp-the{ padding-top:48px; padding-bottom:48px; }
  /* Mobile counterpart of the fifth-pass desktop fix above: matched down
     to #philosophy's mobile top padding (32px) for the same consistency,
     bottom padding left as-is. */
  .section.yacht-section{ padding-top:32px; padding-bottom:48px; }
  .section.why-independent{ padding-top:36px; }
  .section.tight.booking-section{ padding-top:32px; }
  #philosophy{ padding-top:32px; padding-bottom:32px; }
  .exp-carousel{ margin:0 -22px; }
  .exp-carousel-track{ padding:6px 22px 18px 22px; gap:14px; }
  .exp-carousel-card{ width:62vw; }
  /* Flatten both rows into a single column: display:contents un-groups each
     row's own flex context so its children become direct flex items of
     stmt-track-wrap, and `order` (via each item's --i custom property) puts
     all ten back into their original reading order regardless of which row
     they started in. */
  .stmt-track-wrap{ max-width:100%; display:flex; flex-direction:column; }
  .stmt-track-top, .stmt-track-bottom{ display:contents; }
  .stmt-track-item{ text-align:left; padding:13px 0!important; border-bottom:1px solid rgba(250,247,240,0.14); order:var(--i, 0); }
  .stmt-track-top .stmt-track-item::after, .stmt-track-bottom .stmt-track-item::before{ display:none; }
  .stmt-track-empty{ display:none; }
  .stmt-track-spine{ display:none; }
  .why-solace-statement{ font-size:clamp(24px,6vw,32px); }
  .principle-row-index{ flex-direction:column; row-gap:0; margin-top:44px; }
  .principle-item{ flex:1 1 auto; padding:16px 0; border-bottom:1px solid var(--rule); }
  .principle-divider{ display:none; }
  .principle-term{ font-size:18px; white-space:normal; }
  .section.tight{ padding:64px 22px; }
  .section.exp-intro{ padding-top:36px; padding-bottom:36px; }
  .nav{ padding:0 20px; height:60px; }
  .nav-logo{ font-size:16px; letter-spacing:0.3em; }
  .nav-links, .nav-cta{ display:none; }
  .nav-burger-btn{ display:block; }
  .full-nav{ padding:100px 26px 40px 26px; }
  .page-hero-content{ padding:0 22px 56px 22px; }
  .page-hero h1{ font-size:38px; }
  .hero-scrolldown{ left:22px; bottom:22px; }
  .exp-type{ padding:40px 0; }
  .exp-type-body{ padding:36px 22px; }
  .exp-type-grid{ grid-template-columns:1fr 1fr; }
  .yacht-gallery{ margin:36px -22px 0 -22px; }
  .yacht-gallery-item{ width:240px; height:170px; }
  .exp-partner-name{ padding-left:0; margin-left:0; border-left:none; flex-basis:100%; }
  .planner-body{ padding:32px 18px; }
  .planner-top, .planner-nav{ padding:20px 18px; }
  .footer{ padding:56px 22px 24px 22px; }
  .footer-inner{ flex-direction:column; gap:28px; }
  .footer-links{ gap:20px 28px; }
}

/* ============================================================
   THE TECHNICAL SIDE (thirteenth pass, 28 Sep 2026)
   The Yacht section's second layer, unfolded inline by "The technical
   side" button (see renderTechnicalSide()/toggleTechnicalSide() in
   app.js). Same ivory ground, charcoal type and hairlines as the rest of
   the site; terracotta only on the dimension lines, callouts, the boards
   and a few small labels. The drawings are the designer's own linework
   (drawings.js), drawn at hairline weight whatever their size
   (vector-effect: non-scaling-stroke).
   ============================================================ */
.ts-toggle svg{ transition:transform .55s cubic-bezier(.3,.7,.2,1); }
.ts-toggle.is-open svg{ transform:rotate(-90deg); }

.ts{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 1.05s cubic-bezier(.25,.8,.25,1); }
.ts.is-open{ grid-template-rows:1fr; }
.ts-clip{ min-height:0; overflow:hidden; }
.ts-sheet{ position:relative; padding-top:160px; padding-bottom:96px; }
/* the hairline the panel hangs from, and a short terracotta drop from it —
   "one layer down" */
.ts-sheet::before{ content:''; position:absolute; top:56px; left:0; right:0; height:1px; background:var(--rule); }
.ts-descent{ position:absolute; top:56px; left:0; width:1px; height:64px; background:var(--accent-warm); transform:scaleY(0); transform-origin:top center; transition:transform 1.1s cubic-bezier(.3,.7,.2,1) .25s; }
.ts.is-open .ts-descent{ transform:scaleY(1); }

/* reveal: each block settles in as it scrolls into view once open */
html.js-anim .ts .ts-rise{ opacity:0; transform:translateY(16px); transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform 1s cubic-bezier(.16,.8,.3,1); transition-delay:calc(var(--d, 0) * 90ms); }
html.js-anim .ts .ts-rise.is-in{ opacity:1; transform:none; }
html.js-anim .ts .ts-hero .ts-art-profile .ts-svg{ clip-path:inset(0 0 100% 0); transition:clip-path 2s cubic-bezier(.45,.05,.2,1) .35s; }
html.js-anim .ts .ts-hero.is-in .ts-art-profile .ts-svg{ clip-path:inset(0 0 0 0); }
html.js-anim .ts .ts-art-profile .ts-callout{ opacity:0; transition:opacity .8s ease 1.9s; }
html.js-anim .ts .ts-hero.is-in .ts-art-profile .ts-callout{ opacity:1; }

/* ---- opening ---- */
.ts-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(40px,5vw,96px); align-items:end; }
.ts-trail{ grid-column:1 / -1; list-style:none; margin:0 0 34px 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; font-size:10px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }
.ts-trail li{ display:inline-flex; align-items:center; }
.ts-trail li + li::before{ content:''; display:inline-block; width:26px; height:1px; margin:0 14px; background:var(--rule); }
.ts-trail li[aria-current]{ color:var(--charcoal); }
.ts-eyebrow{ margin:0; display:flex; align-items:center; }
.ts-title{ margin:18px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; text-transform:uppercase; font-size:clamp(30px,3.3vw,52px); line-height:1.08; letter-spacing:0.07em; color:var(--charcoal); text-wrap:balance; }
.ts-lede{ margin:22px 0 0 0; max-width:31em; font-size:15px; line-height:1.75; color:var(--muted); }
.ts-head-model{ padding-bottom:4px; }
.ts-model{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; text-transform:uppercase; font-size:clamp(22px,2.1vw,32px); letter-spacing:0.14em; line-height:1.2; color:var(--charcoal); }
.ts-model-sub{ margin:12px 0 0 0; display:flex; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); line-height:1.4; }
.ts-dossier{ margin:28px 0 0 0; padding-top:14px; border-top:1px solid var(--rule); display:grid; grid-template-columns:repeat(3, minmax(0, auto)); justify-content:start; column-gap:30px; row-gap:12px; }
.ts-dossier dt{ font-size:9.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.ts-dossier dd{ margin:5px 0 0 0; font-size:12.5px; line-height:1.4; color:var(--charcoal); }

/* ---- the profile + the first three groups ---- */
.ts-main{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(40px,5vw,96px); align-items:start; margin-top:72px; }
.ts-hero{ margin:0; }
.ts-art{ position:relative; width:100%; }
.ts-svg{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; overflow:hidden; }
.ts-art-profile .ts-svg{ overflow:visible; }

.ts-ln-p{ fill:none; stroke:var(--charcoal); stroke-width:0.85px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.ts-ln-s{ fill:none; stroke:var(--charcoal); stroke-opacity:0.46; stroke-width:0.55px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.ts-ln-f{ fill:var(--charcoal); fill-opacity:0.72; stroke:none; }
#tsBoard path{ fill:none; stroke-width:1px; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.ts-board-down{ stroke:var(--accent-warm); }
.ts-board-up{ stroke:var(--charcoal); stroke-opacity:0.6; }
.ts-ghost{ opacity:0.42; }
.ts-dim line, .ts-dim polyline{ fill:none; stroke:var(--accent-warm); stroke-width:0.8px; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.ts-dim circle{ fill:var(--accent-warm); stroke:none; }
.ts-ext line{ fill:none; stroke:var(--accent-warm); stroke-opacity:0.4; stroke-width:0.6px; vector-effect:non-scaling-stroke; }

.ts-callout{ position:absolute; z-index:1; display:flex; align-items:center; gap:8px; white-space:nowrap; pointer-events:none; }
.ts-callout.is-mid{ transform:translateY(-50%); }
.ts-callout.is-below{ transform:translateX(-50%); }
.ts-callout.is-beam{ transform:translate(-50%,-50%) rotate(-90deg); }
.ts-c-key{ display:none; }
.ts-c-text{ display:flex; flex-direction:column; gap:4px; padding:3px 6px; margin:-3px -6px; background:rgba(250,247,240,0.9); }
.ts-c-label{ font-size:9.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-warm); line-height:1.3; }
.ts-c-value{ font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--charcoal); line-height:1.3; }
.ts-c-sub{ margin-left:8px; font-size:11px; font-weight:400; color:var(--muted); }
.ts-callout.is-below .ts-c-text, .ts-callout.is-small .ts-c-text{ flex-direction:row; align-items:baseline; gap:10px; }
.ts-callout.is-small .ts-c-value{ font-size:12px; }
.ts-legend{ display:none; }

.ts-cap{ display:flex; align-items:baseline; gap:16px; margin:22px 0 0 0; padding-top:12px; border-top:1px solid var(--rule); font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--charcoal); }
.ts-cap-sheet{ color:var(--accent-warm); white-space:nowrap; }
.ts-hero .ts-cap{ margin-top:34px; }

.ts-specs{ display:flex; flex-direction:column; gap:52px; }
.ts-group-title{ margin:0; padding-bottom:13px; border-bottom:1px solid var(--rule); font-family:'Raleway',sans-serif; font-weight:500; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--charcoal); }
.ts-rows{ margin:0; }
.ts-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); column-gap:18px; align-items:baseline; padding:11px 0; border-bottom:1px solid rgba(221,212,191,0.6); }
.ts-row dt{ font-size:10.5px; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); line-height:1.5; }
.ts-row dd{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:3px; }
.ts-val{ font-size:14px; font-weight:500; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.ts-alt{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ts-note{ flex-basis:100%; font-size:11px; line-height:1.5; color:var(--muted); }
.ts-row.is-feature dt, .ts-row.is-feature .ts-val{ color:var(--accent-warm); }

/* carbon daggerboards — the one feature given its own moment */
.ts-feature{ margin-top:26px; padding:4px 0 4px 24px; border-left:1px solid var(--accent-warm); }
.ts-feature-eyebrow{ margin:0; font-size:10px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-warm); }
.ts-feature-eyebrow .pd-mini-rule{ display:none; }
.ts-feature-h{ margin:10px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:22px; letter-spacing:0.05em; text-transform:uppercase; color:var(--charcoal); line-height:1.2; }
.ts-feature-text{ margin:12px 0 0 0; font-size:14px; line-height:1.7; color:var(--muted); max-width:30em; }
.ts-feature-figs{ display:flex; align-items:flex-end; gap:26px; margin-top:20px; }
.ts-fig{ display:flex; flex-direction:column; gap:6px; }
.ts-fig-value{ font-family:'Raleway',sans-serif; font-weight:200; font-size:36px; line-height:1; letter-spacing:0.02em; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.ts-fig-label{ font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.ts-fig-sep{ width:1px; height:44px; background:var(--rule); }

/* ---- construction / propulsion / tankage ---- */
.ts-lower{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(32px,4vw,72px); margin-top:104px; }
.ts-list{ list-style:none; margin:0; padding:0; }
.ts-list li{ padding:11px 0; border-bottom:1px solid rgba(221,212,191,0.6); font-size:13.5px; line-height:1.5; color:var(--charcoal); }
.ts-group-text{ margin:16px 0 0 0; font-size:13.5px; line-height:1.7; color:var(--muted); }
.ts-lower .ts-row{ grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); }

/* ---- what the numbers mean ---- */
.ts-meaning, .ts-plates{ margin-top:112px; padding-top:56px; border-top:1px solid var(--rule); }
.ts-section-title{ margin:0; display:flex; align-items:center; font-size:11px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-warm); }
.ts-meaning-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(32px,4vw,72px); margin-top:44px; }
.ts-idea-n{ margin:0; font-size:10.5px; font-weight:600; letter-spacing:0.2em; color:var(--muted); line-height:1; }
.ts-idea-title{ margin:16px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(30px,2.9vw,44px); line-height:1; letter-spacing:0.12em; text-transform:uppercase; color:var(--charcoal); }
.ts-idea-fig{ margin:24px 0 0 0; padding:12px 0; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:12px; row-gap:4px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.ts-idea-fig-value{ font-size:16px; font-weight:500; color:var(--accent-warm); font-variant-numeric:tabular-nums; }
.ts-idea-fig-label{ font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.ts-idea-text{ margin:18px 0 0 0; max-width:26em; font-size:14.5px; line-height:1.75; color:var(--muted); }
.ts-ratios{ margin:40px 0 0 0; max-width:62em; font-size:11px; line-height:1.65; color:var(--muted); }
.ts-ratios sup{ font-size:0.72em; line-height:0; vertical-align:0.5em; }

/* ---- drawings ---- */
.ts-plates-grid{ display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); column-gap:clamp(32px,4vw,72px); row-gap:56px; align-items:end; margin-top:44px; }
.ts-plate{ margin:0; }

.ts-foot{ margin-top:88px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:28px 48px; }
.ts-footnote{ margin:0; max-width:50em; font-size:11px; line-height:1.65; color:var(--muted); }
.ts-foot .ts-close{ font-family:'Montserrat',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.14em; line-height:1.4; border-bottom-color:var(--accent-warm); }
.ts-close svg{ transform:rotate(-90deg); }

@media (prefers-reduced-motion: reduce){
  .ts, .ts-descent, .ts-toggle svg{ transition:none; }
}

/* ---- laptop / tablet ---- */
@media (max-width:1180px){
  .ts-head{ grid-template-columns:1fr; row-gap:40px; }
  .ts-trail{ margin-bottom:-6px; }
  .ts-main{ grid-template-columns:1fr; row-gap:72px; }
  .ts-hero{ width:100%; max-width:640px; margin:0 auto; }
  .ts-specs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px; row-gap:56px; }
  .ts-group-rig{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:48px; align-items:start; }
  .ts-group-rig .ts-group-title{ grid-column:1 / -1; }
  .ts-group-rig .ts-feature{ margin-top:22px; }
}
@media (max-width:900px){
  .ts-sheet{ padding-top:132px; padding-bottom:80px; }
  .ts-sheet::before, .ts-descent{ top:44px; }
  .ts-head{ grid-template-columns:1fr; row-gap:40px; }
  .ts-trail{ margin-bottom:-6px; }
  .ts-lower, .ts-meaning-grid{ grid-template-columns:1fr; row-gap:56px; }
  .ts-lower{ margin-top:88px; }
  .ts-meaning, .ts-plates{ margin-top:88px; padding-top:48px; }
  .ts-plates-grid{ grid-template-columns:1fr; }
  .ts-plate-boards{ max-width:460px; }
  .ts-specs{ grid-template-columns:1fr; }
}
/* ---- phone: recomposed, in the order of the brief ---- */
@media (max-width:640px){
  .ts-sheet{ padding-top:112px; padding-bottom:64px; }
  .ts-sheet::before, .ts-descent{ top:36px; }
  /* one layer under the next, read downwards */
  .ts-trail{ flex-direction:column; align-items:flex-start; row-gap:0; font-size:9.5px; letter-spacing:0.2em; }
  .ts-trail li{ flex-direction:column; align-items:flex-start; }
  .ts-trail li + li::before{ width:1px; height:12px; margin:6px 0 6px 0; }
  .ts-title{ font-size:clamp(26px,8vw,34px); letter-spacing:0.06em; }
  .ts-lede{ font-size:14.5px; }
  .ts-dossier{ grid-template-columns:1fr 1fr; }
  .ts-dossier div:last-child{ grid-column:1 / -1; }
  .ts-main{ margin-top:52px; row-gap:56px; }
  .ts-specs{ grid-template-columns:1fr; row-gap:48px; }
  .ts-group-rig{ grid-template-columns:1fr; }
  /* the profile keeps its lines and numbered markers; what they mark is
     listed right under it, so nothing has to be read at a tiny size */
  .ts-art-profile .ts-callout{ gap:0; }
  .ts-art-profile .ts-callout .ts-c-text{ display:none; }
  .ts-art-profile .ts-c-key{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border:1px solid var(--accent-warm); border-radius:50%; background:var(--ivory); font-size:9px; font-weight:600; color:var(--accent-warm); line-height:1; }
  .ts-art-profile .ts-callout.is-below{ transform:translate(-50%, 0); }
  .ts-art-profile .ts-callout.is-air{ transform:translate(-50%, 0); }
  .ts-legend{ display:block; list-style:none; margin:26px 0 0 0; padding:0; }
  .ts-legend li{ display:grid; grid-template-columns:17px minmax(0,1fr) auto; column-gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(221,212,191,0.6); }
  .ts-legend .ts-c-key{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border:1px solid var(--accent-warm); border-radius:50%; font-size:9px; font-weight:600; color:var(--accent-warm); line-height:1; align-self:center; }
  .ts-legend .ts-c-label{ font-size:10px; letter-spacing:0.16em; color:var(--muted); }
  .ts-legend .ts-c-value{ font-size:13px; text-align:right; }
  .ts-legend .ts-c-sub{ display:none; }
  .ts-hero .ts-cap{ margin-top:22px; }
  .ts-feature{ padding-left:18px; }
  .ts-fig-value{ font-size:30px; }
  .ts-idea-title{ font-size:30px; }
  .ts-callout.is-small .ts-c-label{ font-size:8.5px; letter-spacing:0.16em; }
  .ts-callout.is-small .ts-c-value{ font-size:11px; }
  .ts-callout.is-small .ts-c-text{ gap:6px; }
  .ts-foot{ margin-top:64px; flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   THE TECHNICAL SIDE — fourteenth pass (28 Sep 2026)
   Client: open it "like our previous version" — a page over the section,
   no scrolling added to the site — and fit it on one or two screens.
   An ivory sheet over the dimmed page (same pattern as the old
   #yachtOverlay), everything condensed: profile beside the specs in two
   columns, plan + daggerboards + footnote in one row below. Everything
   here is scoped to .ts-overlay, so the thirteenth pass's inline rules
   above no longer shape it (most of them now match nothing — dead code).
   ============================================================ */
.ts-overlay{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(33,29,24,0.55); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s; }
.ts-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s; }
.ts-overlay .ts-panel{ position:relative; width:min(1440px, 100%); height:100%; background:var(--ivory); box-shadow:0 30px 80px -40px rgba(20,16,12,0.45); transform:translateY(14px); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.ts-overlay.is-open .ts-panel{ transform:none; }
.ts-overlay .ts-scroll{ height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.ts-overlay .ts-doc{ position:relative; padding:30px 48px 34px 48px; }
.ts-x{ position:absolute; z-index:3; top:14px; right:16px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:none; cursor:pointer; color:var(--charcoal); opacity:.75; transition:opacity .2s ease; }
.ts-x:hover{ opacity:1; }
.ts-x svg{ width:20px; height:20px; display:block; }

/* gentle settle on open */
.ts-overlay .ts-rise{ opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .7s cubic-bezier(.16,.8,.3,1); transition-delay:calc(.12s + var(--d, 0) * 55ms); }
.ts-overlay.is-open .ts-rise{ opacity:1; transform:none; }
.ts-overlay .ts-art-profile .ts-svg{ clip-path:inset(0 0 100% 0); transition:clip-path 1.4s cubic-bezier(.45,.05,.2,1) .25s; }
.ts-overlay.is-open .ts-art-profile .ts-svg{ clip-path:inset(0 0 0 0); }
.ts-overlay .ts-art-profile .ts-callout{ opacity:0; transition:opacity .6s ease 1.25s; }
.ts-overlay.is-open .ts-art-profile .ts-callout{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .ts-overlay, .ts-overlay .ts-panel, .ts-overlay .ts-rise, .ts-overlay .ts-art-profile .ts-svg, .ts-overlay .ts-art-profile .ts-callout{ transition:none; }
}

/* ---- top bar ---- */
.ts-overlay .ts-bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap; padding:0 56px 16px 0; border-bottom:1px solid var(--rule); }
.ts-overlay .ts-eyebrow{ margin:0; display:flex; align-items:center; font-size:10px; }
.ts-overlay .ts-title{ margin:10px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; text-transform:uppercase; font-size:clamp(20px,1.9vw,27px); line-height:1.1; letter-spacing:0.08em; color:var(--charcoal); }
.ts-overlay .ts-bar-model{ display:flex; align-items:flex-end; gap:36px; }
.ts-overlay .ts-model{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; text-transform:uppercase; font-size:17px; letter-spacing:0.16em; line-height:1.2; color:var(--charcoal); white-space:nowrap; }
.ts-overlay .ts-dossier{ margin:0; padding:0; border:0; display:flex; gap:24px; }
.ts-overlay .ts-dossier dt{ font-size:8.5px; letter-spacing:0.2em; }
.ts-overlay .ts-dossier dd{ margin:3px 0 0 0; font-size:11.5px; white-space:nowrap; }

/* ---- profile + specs ---- */
.ts-overlay .ts-body{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(32px,3.6vw,60px); align-items:start; margin-top:24px; }
.ts-overlay .ts-hero{ margin:0; width:auto; max-width:none; }
.ts-overlay .ts-art-profile{ width:auto; height:clamp(430px, calc(100vh - 262px), 650px); max-width:100%; }
.ts-overlay .ts-callout{ gap:6px; }
.ts-overlay .ts-c-text{ gap:2px; }
.ts-overlay .ts-c-label{ font-size:8.5px; letter-spacing:0.18em; }
.ts-overlay .ts-c-value{ font-size:12px; }
.ts-overlay .ts-c-sub{ margin-left:6px; font-size:10px; }

.ts-overlay .ts-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(28px,3vw,48px); align-items:start; }
.ts-overlay .ts-col{ display:flex; flex-direction:column; gap:22px; }
.ts-overlay .ts-group-title{ padding-bottom:8px; font-size:10.5px; letter-spacing:0.28em; }
.ts-overlay .ts-row{ padding:6px 0; column-gap:14px; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.ts-overlay .ts-row dt{ font-size:9.5px; letter-spacing:0.14em; line-height:1.45; }
.ts-overlay .ts-row dd{ column-gap:9px; row-gap:1px; }
.ts-overlay .ts-val{ font-size:13px; line-height:1.4; }
.ts-overlay .ts-alt{ font-size:11px; }
.ts-overlay .ts-note{ font-size:10px; line-height:1.4; }
.ts-overlay .ts-list li{ padding:6px 0; font-size:12.5px; line-height:1.45; }
.ts-overlay .ts-group-text{ margin:10px 0 0 0; font-size:12px; line-height:1.6; }
.ts-overlay .ts-col-b .ts-row{ grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); }
/* the thirteenth pass split the rig group into rows + feature block at
   tablet widths; here it's always one list */
.ts-overlay .ts-group-rig{ display:block; }

/* ---- smaller drawings + footnote ---- */
.ts-overlay .ts-plates-row{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr) minmax(0,0.9fr); column-gap:clamp(28px,3vw,48px); align-items:end; margin-top:30px; padding-top:22px; border-top:1px solid var(--rule); }
.ts-overlay .ts-plate{ margin:0; }
.ts-overlay .ts-cap{ margin-top:12px; padding-top:9px; font-size:9px; letter-spacing:0.18em; }
.ts-overlay .ts-notes{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding-bottom:2px; }
.ts-overlay .ts-footnote{ margin:0; font-size:10.5px; line-height:1.6; color:var(--muted); }
.ts-overlay .ts-close{ font-family:'Montserrat',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.14em; line-height:1.4; border-bottom-color:var(--accent-warm); white-space:nowrap; }
@media (max-width:1100px){ .ts-overlay .ts-close{ letter-spacing:0.08em; } }
.ts-overlay .ts-close svg{ width:11px; height:11px; transform:none; }

/* ---- laptop / tablet ---- */
@media (max-width:1100px){
  /* profile beside the first column; construction / propulsion /
     tankage become one row of three underneath */
  .ts-overlay .ts-cols{ display:contents; }
  .ts-overlay .ts-col-a{ grid-column:2; grid-row:1; }
  .ts-overlay .ts-col-b{ grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(24px,3vw,40px); margin-top:30px; }
  .ts-overlay .ts-col-b .ts-row{ grid-template-columns:minmax(0,0.75fr) minmax(0,1.25fr); }
  .ts-overlay .ts-art-profile{ height:clamp(420px, calc(100vh - 262px), 560px); }
}
@media (max-width:760px){
  .ts-overlay{ padding:0; }
  .ts-overlay .ts-doc{ padding:22px 22px 30px 22px; }
  .ts-overlay .ts-x{ top:8px; right:8px; }
  .ts-overlay .ts-bar{ padding-right:44px; }
  .ts-overlay .ts-bar-model{ flex-direction:column; align-items:flex-start; gap:12px; }
  .ts-overlay .ts-dossier{ flex-wrap:wrap; gap:10px 20px; }
  .ts-overlay .ts-body{ grid-template-columns:1fr; row-gap:28px; }
  .ts-overlay .ts-col-a, .ts-overlay .ts-col-b{ grid-column:1; grid-row:auto; }
  .ts-overlay .ts-col-b{ display:flex; flex-direction:column; gap:22px; margin-top:0; }
  .ts-overlay .ts-hero{ justify-self:stretch; }
  .ts-overlay .ts-art-profile{ width:100%; height:auto; }
  .ts-overlay .ts-plates-row{ grid-template-columns:1fr; row-gap:28px; }
  .ts-overlay .ts-plate-boards{ max-width:420px; }
}
@media (max-width:900px) and (min-width:761px){
  /* tablet portrait: the profile centred on top, the two columns under it */
  .ts-overlay .ts-body{ grid-template-columns:1fr; row-gap:28px; }
  .ts-overlay .ts-hero{ justify-self:center; }
  .ts-overlay .ts-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:36px; }
  .ts-overlay .ts-col-a, .ts-overlay .ts-col-b{ grid-column:auto; grid-row:auto; }
  .ts-overlay .ts-col-b{ display:flex; flex-direction:column; gap:22px; margin-top:0; }
}

/* ============================================================
   THE TECHNICAL SIDE — fifteenth pass (28 Sep 2026)
   One quiet drawing sheet: the profile the full height on the left, four
   numbered spec tables on the right (metric and imperial in aligned
   columns, no rules between rows), the plan and footnote under a
   hairline. --ts-h is the sheet's working height: the profile is that
   tall, and the plan takes what the tables leave, so on a laptop the
   whole sheet sits on one screen.
   ============================================================ */
.ts-v15{ --ts-h: clamp(460px, calc(100vh - 190px), 660px); }
.ts-overlay .ts-doc.ts-v15{ padding:28px 52px 30px 52px; }

.tsx-bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px 40px; padding:0 64px 14px 0; border-bottom:1px solid var(--rule); }
.tsx-eyebrow{ margin:0; display:flex; align-items:center; font-size:9.5px; letter-spacing:0.26em; }
.tsx-title{ margin:9px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:12.5px; line-height:1.3; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); }
.tsx-model{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:17px; line-height:1.2; letter-spacing:0.22em; text-transform:uppercase; color:var(--charcoal); white-space:nowrap; }

.tsx-grid{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:clamp(40px,4.2vw,68px); margin-top:26px; }
.ts-v15 .ts-hero{ grid-column:1; grid-row:1 / span 2; margin:0; width:auto; max-width:none; justify-self:start; }
.ts-v15 .ts-art-profile{ width:auto; height:var(--ts-h); max-width:100%; }

.tsx-specs{ grid-column:2; grid-row:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(32px,3.2vw,52px); padding-top:4px; }
.tsx-col{ display:flex; flex-direction:column; gap:30px; }
.tsx-gtitle{ display:flex; align-items:baseline; gap:12px; margin:0 0 13px 0; padding-bottom:9px; border-bottom:1px solid var(--rule); font-family:'Raleway',sans-serif; font-weight:500; font-size:10.5px; line-height:1.3; letter-spacing:0.28em; text-transform:uppercase; color:var(--charcoal); }
.tsx-gnum{ font-family:'Montserrat',sans-serif; font-size:9px; font-weight:600; letter-spacing:0.12em; color:var(--accent-warm); }
.tsx-tbl{ margin:0; display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:18px; row-gap:9px; align-items:baseline; }
.tsx-tbl dt{ font-size:9.5px; font-weight:600; letter-spacing:0.13em; line-height:1.4; text-transform:uppercase; color:var(--muted); }
.tsx-tbl dd{ margin:0; }
.tsx-tbl .m{ font-size:13px; font-weight:500; line-height:1.35; color:var(--charcoal); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tsx-tbl.is-metric{ grid-template-columns:minmax(0,1fr) auto; }
.tsx-col:first-child .tsx-tbl .i{ width:5.6em; }
.tsx-tbl .i{ width:7.6em; font-size:11px; line-height:1.35; color:var(--muted); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tsx-tbl .n{ grid-column:1 / -1; margin-top:-6px; font-size:10px; line-height:1.4; color:var(--muted); text-align:right; }

.tsx-lower{ grid-column:2; grid-row:2; align-self:end; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(28px,3vw,48px); align-items:end; margin-top:30px; padding-top:22px; border-top:1px solid var(--rule); }
.ts-v15 .ts-plate{ margin:0; }
.ts-v15 .ts-art-plan{ width:auto; height:max(190px, calc(var(--ts-h) - 432px)); max-width:100%; }
.ts-v15 .ts-cap{ margin-top:10px; padding-top:0; border-top:0; font-size:9px; letter-spacing:0.2em; color:var(--muted); }
/* sixteenth pass (client comment: "make that fit on three lines"):
   no narrow measure any more — it takes the room beside the plan */
.ts-v15 .ts-footnote{ margin:0; max-width:none; font-size:10px; line-height:1.65; color:var(--muted); }

/* small laptops / landscape tablets: the tables in one column beside the
   profile, plan and footnote across the foot */
@media (max-width:1100px){
  .ts-v15{ --ts-h: clamp(440px, calc(100vh - 190px), 600px); }
  .ts-overlay .ts-doc.ts-v15{ padding:26px 36px 28px 36px; }
  .tsx-grid{ grid-template-rows:auto auto; }
  .ts-v15 .ts-hero{ grid-row:1; }
  .tsx-specs{ grid-template-columns:1fr; row-gap:30px; }
  .tsx-lower{ grid-column:1 / -1; grid-row:2; }
  .ts-v15 .ts-art-plan{ height:240px; }
}
/* tablet portrait: profile centred on top, two table columns, then the plan */
@media (max-width:900px){
  .tsx-grid{ grid-template-columns:1fr; grid-template-rows:none; row-gap:30px; }
  .ts-v15 .ts-hero{ grid-column:1; grid-row:auto; justify-self:center; }
  .tsx-specs{ grid-column:1; grid-row:auto; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tsx-lower{ grid-column:1; grid-row:auto; margin-top:0; }
}
/* phone: one column, in reading order */
@media (max-width:760px){
  .ts-overlay .ts-doc.ts-v15{ padding:20px 22px 28px 22px; }
  .tsx-bar{ padding-right:44px; flex-direction:column; align-items:flex-start; gap:14px; }
  .ts-v15 .ts-hero{ justify-self:stretch; }
  .ts-v15 .ts-art-profile{ width:100%; height:auto; }
  .tsx-specs{ grid-template-columns:1fr; }
  .tsx-lower{ grid-template-columns:1fr; row-gap:18px; }
  .ts-v15 .ts-art-plan{ width:100%; height:auto; }
}
@media (max-width:1360px) and (min-width:1101px){
  /* the dimensions column carries the longer labels and two figures */
  .tsx-specs{ grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); }
  .tsx-tbl dt{ font-size:9px; letter-spacing:0.1em; }
  .tsx-tbl{ column-gap:14px; }
}
.ts-v15 ~ .ts-x, .ts-overlay .ts-x{ border-radius:50%; background:rgba(250,247,240,0.92); }
@media (max-width:760px){
  .tsx-title{ letter-spacing:0.2em; }
}

/* ---- sixteenth pass (client comments, 28 Sep 2026) ----
   "Align this one with the one on the left (Weight & hydrodynamics)":
   whenever the tables sit in two columns they now share rows, so
   04 Tankage starts on the same line as 02 Weight & hydrodynamics
   (row 1 is as tall as the taller of Dimensions / Rig). The column
   wrappers step aside (display:contents) so the DOM order — and the
   one-column order on phones — stays dims, weight, rig, tankage.
   "Make that fit on three lines" (the footnote): it now uses the full
   width beside the plan, and drops under the plan wherever that space
   would be too narrow for three lines. */
.tsx-specs{ row-gap:30px; }
.tsx-col{ display:contents; }
.tsx-group-dims{ grid-column:1; grid-row:1; }
.tsx-group-weight{ grid-column:1; grid-row:2; }
.tsx-group-rig{ grid-column:2; grid-row:1; }
.tsx-group-tankage{ grid-column:2; grid-row:2; }
@media (max-width:1100px) and (min-width:901px), (max-width:760px){
  .tsx-group-dims, .tsx-group-weight, .tsx-group-rig, .tsx-group-tankage{ grid-column:1; grid-row:auto; }
}
@media (max-width:1360px) and (min-width:1251px){
  .ts-v15 .ts-art-plan{ height:max(172px, calc(var(--ts-h) - 432px)); }
  .tsx-lower{ column-gap:30px; }
  .ts-v15 .ts-footnote{ font-size:9.5px; }
}
@media (max-width:1250px) and (min-width:1101px), (max-width:900px){
  .tsx-lower{ grid-template-columns:1fr; row-gap:16px; }
  .ts-v15 .ts-footnote{ max-width:44em; }
}

/* Sixteenth pass (client comment: "put the gap on top of the title like
   the others on the website, to keep consistency"): Destinations and How
   It Works still opened with the shared .section.tight 96px, so their
   eyebrows sat at 96px under the section edge instead of the 40px every
   other section title on this page uses (32px on phones). Also the
   Technical Side sheet's eyebrow, 36px -> 40px from its top edge. */
#destinations, #how-it-works{ padding-top:40px; }
.ts-overlay .ts-doc.ts-v15{ padding-top:32px; }
@media (max-width:860px){
  #destinations, #how-it-works{ padding-top:32px; }
}
@media (max-width:760px){ .ts-overlay .ts-doc.ts-v15{ padding-top:24px; } }

/* ---- sixteenth pass: the drawings sail in (client comment) ----
   Both the profile and the plan glide in from the left on opening, bow
   first, easing to a stop like a boat coming up to her mark; the
   dimension lines and their labels are drawn in once she has arrived.
   Replaces the thirteenth/fourteenth passes' top-down wipe of the
   profile. On closing nothing moves: .is-sailing only comes off after
   the sheet has faded (see toggleTechnicalSide()). */
.ts-overlay .ts-art-profile .ts-svg{ clip-path:none; transition:none; }
.ts-overlay.is-open .ts-art-profile .ts-svg{ clip-path:none; }
.ts-overlay .ts-art-plan .ts-svg{ overflow:hidden; }
.ts-overlay .ts-boat{ transform-box:view-box; transform:translateX(-46%); opacity:0; }
.ts-overlay .ts-art-plan .ts-boat{ transform:translateX(-62%); }
.ts-overlay.is-sailing .ts-boat{ transform:none; opacity:1; transition:transform 2.6s cubic-bezier(.215,.61,.355,1) .1s, opacity .7s ease .1s; }
.ts-overlay.is-sailing .ts-art-plan .ts-boat{ transition-delay:.55s, .55s; }
.ts-overlay .ts-dim, .ts-overlay .ts-ext{ opacity:0; }
.ts-overlay.is-sailing .ts-dim, .ts-overlay.is-sailing .ts-ext{ opacity:1; transition:opacity .8s ease 1.9s; }
.ts-overlay.is-sailing .ts-art-plan .ts-dim, .ts-overlay.is-sailing .ts-art-plan .ts-ext{ transition-delay:2.3s; }
.ts-overlay .ts-art-profile .ts-callout, .ts-overlay .ts-art-plan .ts-callout{ opacity:0; transition:none; }
.ts-overlay.is-open .ts-art-profile .ts-callout{ opacity:0; }
.ts-overlay.is-sailing .ts-art-profile .ts-callout{ opacity:1; transition:opacity .8s ease 2s; }
.ts-overlay.is-sailing .ts-art-plan .ts-callout{ opacity:1; transition:opacity .8s ease 2.4s; }
@media (prefers-reduced-motion: reduce){
  .ts-overlay .ts-boat, .ts-overlay .ts-art-plan .ts-boat{ transform:none; opacity:1; transition:none; }
  .ts-overlay .ts-dim, .ts-overlay .ts-ext, .ts-overlay .ts-art-profile .ts-callout, .ts-overlay .ts-art-plan .ts-callout{ opacity:1; transition:none; }
}

/* the close cross in the site's terracotta (client comment) */
.ts-overlay .ts-x{ color:var(--accent-warm); opacity:1; }
.ts-overlay .ts-x:hover{ opacity:.75; }
.ts-overlay .ts-x:focus-visible{ outline-color:var(--accent-warm); }

/* Seventeenth pass (client): The Yacht moved up to follow The Solace
   Difference, and the grounds swapped so the page still alternates —
   The Yacht on sand, A Day Aboard on ivory (see the note above the yacht
   section in app.js). The one sand-specific detail in the Day Aboard
   styles, the knock-out behind the old moment times, follows it. */
/* Eighteenth pass: A Day Aboard is back on sand (Destinations now sits
   between it and The Yacht), so this override is no longer needed:
   .day-at-sea .day-moment-time{ background:var(--ivory); } */

/* ============================================================
   SEA IN SEASON (nineteenth pass, 28 Sep 2026) — see renderSeaSeason()
   / initSeaSeason() in app.js. One photographic panel, two faces, turned
   by scrolling: the section locks under the nav while the panel turns
   180° about its vertical axis (restrained perspective, a little depth
   mid-turn, a flat tint as each face turns from the light, the photo
   drifting a few percent inside its face, and a thin board edge seen
   side-on at 90°). No cards, no gradients, no arrows.
   ============================================================ */
.section.ss{ padding-bottom:0; }
.ss-wrap{ position:relative; height:calc(100vh - 68px + 130vh); margin-top:8px; }
.ss-pin{ position:sticky; top:68px; height:calc(100vh - 68px); display:flex; align-items:center; }
.ss-grid{ width:100%; max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); column-gap:clamp(40px,5vw,88px); align-items:stretch; }

.ss-stage{ perspective:2200px; perspective-origin:50% 50%; }
.ss-panel{
  --ss-h: clamp(360px, calc(100vh - 188px), 680px);
  position:relative; width:100%; height:var(--ss-h);
  transform-style:preserve-3d;
  transform:translateZ(var(--ss-z, 0px)) rotateY(var(--ss-a, 0deg));
  will-change:transform;
}
.ss-face{ position:absolute; inset:0; margin:0; overflow:hidden; background:var(--stone); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ss-front{ transform:translateZ(4px); }
.ss-back{ transform:rotateY(180deg) translateZ(4px); }
.ss-face img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transform:translateX(var(--ss-pf, 0%)) scale(1.09); }
.ss-back img{ transform:translateX(var(--ss-pb, 0%)) scale(1.09); }
.ss-shade{ position:absolute; inset:0; background:var(--navy); opacity:var(--ss-shade, 0); pointer-events:none; }
.ss-edge{ position:absolute; top:0; bottom:0; left:calc(50% - 4px); width:8px; background:#D6CCB8; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ss-edge-l{ transform:rotateY(-90deg) translateZ(var(--ss-half, 400px)); }
.ss-edge-r{ transform:rotateY(90deg) translateZ(var(--ss-half, 400px)); }

/* copy beside the panel */
.ss-copy{ position:relative; display:flex; flex-direction:column; justify-content:center; min-height:320px; }
.ss-seasons{ position:relative; flex:1 1 auto; }
.ss-season{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); }
.ss-season > *{ will-change:opacity, transform; }
.ss-season[data-i="1"] > *{ opacity:0; }
.ss-index{ margin:0; display:flex; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:0.24em; color:var(--accent-warm); line-height:1.4; }
.ss-name{ margin:20px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; text-transform:uppercase; font-size:clamp(30px,3vw,46px); line-height:1.05; letter-spacing:0.06em; color:var(--charcoal); }
.ss-months{ margin:16px 0 0 0; font-family:'Raleway',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--charcoal); line-height:1.4; }
.ss-line{ position:relative; margin:44px 0 0 0; max-width:21em; font-size:16px; line-height:1.7; color:var(--muted); }
.ss-line::before{ content:''; position:absolute; left:0; top:-22px; width:34px; height:1px; background:var(--accent-warm); }
/* the quiet sign that another season follows — and how far the turn has got */
.ss-track{ display:flex; align-items:center; gap:14px; padding-top:18px; font-size:9.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.ss-track > span:first-child, .ss-track > span:last-child{ opacity:.55; transition:opacity .5s ease, color .5s ease; }
.ss-track .is-on{ opacity:1 !important; color:var(--charcoal); }
.ss-bar{ position:relative; flex:1 1 auto; height:1px; background:var(--rule); }
.ss-bar-fill{ position:absolute; inset:0; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; }

/* reduced motion: no turning — a plain crossfade, still under the reader's scroll */
.ss-wrap.is-reduced .ss-panel{ transform:none; }
.ss-wrap.is-reduced .ss-back{ transform:none; opacity:var(--ss-t, 0); }
.ss-wrap.is-reduced .ss-shade, .ss-wrap.is-reduced .ss-edge{ display:none; }
.ss-wrap.is-reduced .ss-face img{ transform:none; }

/* ---- the practical layer: sailing dates ---- */
.ss-dates{ max-width:1360px; margin:112px auto 0 auto; padding-top:56px; border-top:1px solid var(--rule); display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:clamp(40px,5vw,88px); align-items:start; }
.ss-dates-title{ margin:0; font-family:'Raleway',sans-serif; font-weight:200; text-transform:uppercase; font-size:clamp(26px,2.4vw,34px); line-height:1.1; letter-spacing:0.1em; color:var(--charcoal); }
.ss-dates-note{ margin:18px 0 0 0; max-width:22em; font-size:15px; line-height:1.7; color:var(--muted); }
.ss-dates-group{ margin:6px 0 14px 0; display:flex; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-warm); }
.ss-dates-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.ss-date{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto; column-gap:32px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--rule); }
.ss-date p{ margin:0; }
.ss-date-when{ font-family:'Raleway',sans-serif; font-weight:300; font-size:20px; line-height:1.3; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.ss-date-route{ display:flex; align-items:center; gap:14px; font-size:11.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--charcoal); line-height:1.4; }
.ss-route-arrow{ width:30px; height:8px; flex:0 0 auto; fill:none; stroke:var(--accent-warm); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.ss-date-cta{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; transition:color .25s ease, gap .3s ease; }
.ss-date-cta svg{ width:12px; height:12px; }
.ss-date:hover .ss-date-cta, .ss-date-cta:focus-visible{ color:var(--accent-warm); gap:12px; }
.ss-alt{ margin-top:44px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px 40px; flex-wrap:wrap; }
.ss-alt-q{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:21px; line-height:1.3; color:var(--charcoal); }
.ss-alt-line{ margin:6px 0 0 0; font-size:15px; line-height:1.6; color:var(--muted); }
.ss-alt-cta{ border-bottom-color:var(--accent-warm); }
.ss-details{ max-width:640px; margin:0 auto; padding:72px 24px 72px 24px; }

@media (max-width:1100px){
  .ss-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
}
/* tablets and phones: the same turn, simplified — panel above the copy,
   flatter perspective, no depth, drift or board edge (JS zeroes them too) */
@media (max-width:900px){
  .ss-wrap{ height:calc(100vh - 68px + 115vh); }
  .ss-grid{ grid-template-columns:1fr; row-gap:26px; align-content:center; }
  .ss-stage{ perspective:3600px; }
  .ss-panel{ --ss-h: clamp(240px, 46vh, 460px); }
  .ss-edge{ display:none; }
  .ss-face img{ transform:none; }
  .ss-copy{ min-height:230px; justify-content:flex-start; }
  .ss-seasons{ min-height:196px; }
  .ss-season{ top:0; transform:none; }
  .ss-name{ margin-top:14px; font-size:clamp(28px,7vw,40px); }
  .ss-months{ margin-top:12px; font-size:11.5px; letter-spacing:0.26em; }
  .ss-line{ margin-top:34px; font-size:15px; }
  .ss-line::before{ top:-18px; }
  .ss-track{ padding-top:10px; }
  .ss-dates{ grid-template-columns:1fr; row-gap:28px; margin-top:72px; padding-top:44px; }
  .ss-date{ grid-template-columns:1fr; row-gap:8px; padding:20px 0; }
  .ss-date-when{ font-size:19px; }
  .ss-date-cta{ margin-top:4px; }
  .ss-alt{ margin-top:36px; flex-direction:column; align-items:flex-start; }
  .ss-details{ padding:56px 0 64px 0; }
}
@media (max-width:860px){
  .ss-wrap{ height:calc(100vh - 60px + 115vh); }
  .ss-pin{ top:60px; height:calc(100vh - 60px); }
}

/* ============================================================
   SEA IN SEASON — twentieth pass (28 Sep 2026). Replaces the
   nineteenth pass's turning panel (its .ss-* rules above are dead code,
   except .ss-dates*, reused by the Sailing Dates section). An editorial
   spread per season: full-height hero photograph left (42%), ivory story
   right (58%): heading, a short intro, three supporting photographs of
   different sizes, and a quiet season line. See renderSeaSeason() /
   initSeaSeason() for the page-turn between the two spreads.
   ============================================================ */
.sx{ position:relative; background:var(--ivory); }
.sx-head-m{ display:none; }
.sx-wrap{ position:relative; height:calc(100vh - 68px + 140vh); }
.sx-pin{ position:sticky; top:68px; height:calc(100vh - 68px); overflow:hidden; }
.sx-stage{ display:grid; grid-template-columns:42% 58%; height:100%; }

/* the layered photographs (both spreads live in every slot; the
   Caribbean layer sits on top and is turned away) */
.sx-frame{ position:relative; overflow:hidden; perspective:1600px; background:var(--stone); }
.sx-layer{ position:absolute; inset:0; overflow:hidden; transform-origin:left center; will-change:clip-path, transform; }
.sx-layer[data-s="0"]{ z-index:2; }
.sx-layer[data-s="1"]{ z-index:1; }
/* a hairline of ivory on the turning edge, like the edge of a page */
.sx-layer[data-s="0"]::after{ content:''; position:absolute; top:0; bottom:0; width:1px; left:calc((1 - var(--u, 0)) * 100% - 1px); background:rgba(250,247,240,0.85); opacity:calc(var(--u, 0) * (1 - var(--u, 0)) * 4); pointer-events:none; }
.sx-img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transform:scale(1.06); will-change:transform; }
.sx-layer[data-s="1"] .sx-img{ transform:translateX(4%) scale(1.11); }
.sx-ph-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; text-align:center; background:var(--stone); }
.sx-ph-empty-k{ font-size:9px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }
.sx-ph-empty-v{ font-family:'Raleway',sans-serif; font-weight:300; font-size:15px; color:var(--charcoal); }

/* left: the hero photograph with the season written on it */
.sx-hero{ position:relative; height:100%; }
.sx-hero .sx-frame{ position:absolute; inset:0; }
.sx-tint{ position:absolute; inset:0; background:rgba(20,18,15,0.24); pointer-events:none; }
.sx-hc-wrap{ position:absolute; z-index:5; top:40px; left:clamp(32px,4vw,64px); right:clamp(32px,4vw,64px); }
.sx-hc{ position:absolute; top:0; left:0; right:0; }
.sx-hc[data-s="1"] > *{ opacity:0; }
.sx-hc > *{ will-change:opacity, transform; text-shadow:0 1px 22px rgba(15,13,10,0.28); }
.sx-hc-index{ margin:0; font-size:10.5px; font-weight:600; letter-spacing:0.24em; color:var(--ivory); line-height:1.4; }
.sx-hc-name{ margin:22px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; text-transform:uppercase; font-size:clamp(38px,4.2vw,66px); line-height:1.02; letter-spacing:0.06em; color:var(--ivory); }
.sx-hc-months{ margin:18px 0 0 0; font-family:'Raleway',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--ivory); line-height:1.4; }
.sx-hc-copy{ position:relative; margin:46px 0 0 0; max-width:25em; font-size:16px; line-height:1.72; color:rgba(250,247,240,0.94); }
.sx-hc-copy::before{ content:''; position:absolute; left:0; top:-23px; width:34px; height:1px; background:var(--accent-warm-on-dark); }

/* right: the story */
.sx-story{ position:relative; display:flex; flex-direction:column; min-height:0; padding:40px clamp(40px,4.4vw,72px) 30px clamp(40px,4.4vw,72px); }
.sx-head .eyebrow{ margin:0; }
.sx-title{ margin:14px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(26px,2.5vw,38px); line-height:1.2; letter-spacing:-0.005em; color:var(--charcoal); }
.sx-intro{ position:relative; margin-top:18px; min-height:3.4em; }
.sx-intro-p{ position:absolute; top:0; left:0; right:0; margin:0; max-width:34em; font-size:15px; line-height:1.7; color:var(--muted); }
.sx-intro-p[data-s="1"]{ opacity:0; }
.sx-photos{ flex:1 1 auto; min-height:0; margin-top:26px; display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); grid-template-rows:minmax(0,1.12fr) minmax(0,0.88fr); column-gap:clamp(20px,2.2vw,32px); row-gap:clamp(18px,2vw,28px); }
.sx-ph{ position:relative; margin:0; display:flex; flex-direction:column; min-height:0; }
.sx-ph .sx-frame{ flex:1 1 auto; min-height:0; }
.sx-ph-a{ grid-column:1; grid-row:1 / 3; }
.sx-ph-b{ grid-column:2; grid-row:1; }
.sx-ph-c{ grid-column:2; grid-row:2; width:72%; justify-self:end; }
.sx-cap{ position:relative; height:24px; margin-top:10px; }
.sx-cap span{ position:absolute; top:0; left:0; font-size:9.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }
.sx-cap span[data-s="1"]{ opacity:0; }
.sx-track{ display:flex; align-items:center; gap:14px; margin-top:22px; font-size:9.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.sx-track > span:first-child, .sx-track > span:last-child{ opacity:.55; transition:opacity .5s ease, color .5s ease; }
.sx-track .is-on{ opacity:1 !important; color:var(--charcoal); }
.sx-bar{ position:relative; flex:1 1 auto; height:1px; background:var(--rule); }
.sx-bar-fill{ position:absolute; inset:0; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; }

/* Sailing Dates, its own section right after */
.sx-dates-section{ padding-top:40px; padding-bottom:0; }
.sx-dates-section .ss-dates{ margin-top:0; padding-top:0; border-top:0; }
.sx-dates-section h2.ss-dates-title{ margin:0; }

@media (max-width:1100px){
  .sx-stage{ grid-template-columns:44% 56%; }
  .sx-hc-copy{ font-size:15px; }
}
/* tablets and phones: the heading above; hero on top, the story's three
   photographs in one row under it; same turn, flat (no lift) */
@media (max-width:900px){
  .sx-head-m{ display:block; padding:40px 22px 26px 22px; text-align:center; }
  .sx-head-d{ display:none; }
  .sx-wrap{ height:calc(100vh - 68px + 120vh); }
  .sx-stage{ grid-template-columns:1fr; grid-template-rows:minmax(0,1.15fr) minmax(0,1fr); }
  .sx-hc-wrap{ top:24px; left:22px; right:22px; }
  .sx-hc-name{ margin-top:14px; font-size:clamp(30px,8vw,44px); }
  .sx-hc-months{ margin-top:12px; font-size:11px; letter-spacing:0.26em; }
  .sx-hc-copy{ margin-top:34px; font-size:14px; line-height:1.6; }
  .sx-hc-copy::before{ top:-18px; }
  .sx-story{ padding:20px 22px 16px 22px; }
  .sx-intro{ margin-top:0; min-height:3.3em; }
  .sx-intro-p{ font-size:14px; line-height:1.6; }
  .sx-photos{ margin-top:14px; grid-template-columns:minmax(0,0.9fr) minmax(0,1.25fr) minmax(0,0.85fr); grid-template-rows:1fr; column-gap:12px; row-gap:0; align-items:end; }
  .sx-ph-a, .sx-ph-b, .sx-ph-c{ grid-column:auto; grid-row:1; width:auto; justify-self:stretch; }
  .sx-ph-a{ height:100%; }
  .sx-ph-b{ height:78%; }
  .sx-ph-c{ height:62%; }
  .sx-cap{ display:none; }
  .sx-ph-empty-v{ font-size:12px; }
  .sx-ph-empty-k{ font-size:8px; letter-spacing:0.16em; }
  .sx-track{ margin-top:14px; }
}
@media (max-width:860px){
  .sx-wrap{ height:calc(100vh - 60px + 120vh); }
  .sx-pin{ top:60px; height:calc(100vh - 60px); }
  .sx-dates-section{ padding-top:32px; }
}
/* the season's name always fits the hero, whatever its width */
.sx-hero{ container-type:inline-size; }
.sx-hc-name{ font-size:clamp(30px, 8.3cqi, 62px); }
/* the Mediterranean hero has a pale, hazy sky behind the text — a
   deeper flat tint keeps the ivory type readable */
.sx-tint-mediterranean{ background:rgba(20,18,15,0.36); }
/* the outgoing page dims a touch as it lifts away */
.sx-layer[data-s="0"]::before{ content:''; position:absolute; inset:0; z-index:1; background:var(--navy); opacity:calc(var(--u, 0) * 0.24); pointer-events:none; }
.sx-layer[data-s="0"]::after{ z-index:2; }
@media (max-width:900px){
  .sx-hc-name{ font-size:clamp(28px, 9cqi, 44px); }
}

/* ============================================================
   SEA IN SEASON — twenty-first pass (28 Sep 2026): the client's
   reference layout, in Solace's palette and type. The twentieth pass's
   .sx-* rules above are now dead code (.ss-dates* still serve Sailing
   Dates). Everything is placed on one stage the height of the screen
   under the nav, so the proportions hold like the reference:
   hero 42% | seam button | side 58% with tabs, heading, paragraph,
   details and pill | three cards along the bottom from 27% to 97%.
   ============================================================ */
.sq{ position:relative; background:var(--ivory); }
.sq-head-m{ display:none; }
.sq-wrap{ position:relative; height:calc(100vh - 68px + 140vh); }
.sq-pin{ position:sticky; top:68px; height:calc(100vh - 68px); overflow:hidden; }
.sq-stage{ position:relative; height:100%; }

/* layered photographs (both seasons in every frame; the Caribbean layer
   on top is turned away as the visitor scrolls) */
.sq-frame{ position:absolute; inset:0; overflow:hidden; perspective:1600px; background:var(--stone); }
.sq-layer{ position:absolute; inset:0; overflow:hidden; transform-origin:left center; will-change:clip-path, transform; }
.sq-layer[data-s="0"]{ z-index:2; }
.sq-layer[data-s="1"]{ z-index:1; }
.sq-layer[data-s="0"]::before{ content:''; position:absolute; inset:0; z-index:3; background:var(--navy); opacity:calc(var(--u, 0) * 0.24); pointer-events:none; }
.sq-layer[data-s="0"]::after{ content:''; position:absolute; top:0; bottom:0; z-index:4; width:1px; left:calc((1 - var(--u, 0)) * 100% - 1px); background:rgba(250,247,240,0.85); opacity:calc(var(--u, 0) * (1 - var(--u, 0)) * 4); pointer-events:none; }
.sq-img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transform:scale(1.06); will-change:transform; }
.sq-layer[data-s="1"] .sq-img, .sq-layer[data-s="1"] .sq-empty{ transform:translateX(4%) scale(1.11); }
.sq-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#DCD3C1; }
.sq-empty span{ margin-top:-30%; font-size:9px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }

/* hero */
.sq-hero{ position:absolute; top:0; bottom:0; left:0; width:42%; container-type:inline-size; }
.sq-tint{ position:absolute; inset:0; z-index:1; background:rgba(20,18,15,0.2); pointer-events:none; }
.sq-tint-mediterranean{ background:rgba(20,18,15,0.34); }
.sq-hero-copy{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.sq-hero-copy[data-s="1"] > *{ opacity:0; }
.sq-hero-copy > *{ will-change:opacity, transform; text-shadow:0 1px 22px rgba(15,13,10,0.25); }
.sq-hero-label{ position:absolute; top:40px; left:clamp(32px,10.5cqi,64px); margin:0; font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(250,247,240,0.78); line-height:1.4; }
.sq-hero-name{ position:absolute; top:19%; left:clamp(32px,10.5cqi,64px); right:24px; margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(40px,10.4cqi,82px); line-height:1.05; letter-spacing:0.005em; color:var(--ivory); }
.sq-hero-meta{ position:absolute; bottom:12%; left:clamp(32px,10.5cqi,64px); margin:0; font-size:14px; font-weight:500; letter-spacing:0.04em; color:rgba(250,247,240,0.82); line-height:1.4; }
.sq-bar-sep{ display:inline-block; margin:0 12px; opacity:.6; }

/* the round button on the seam */
.sq-go{ position:absolute; z-index:8; left:calc(42% - 46px); top:27%; width:92px; height:92px; border-radius:50%; border:0; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--accent-warm); color:var(--ivory); box-shadow:0 18px 36px -18px rgba(120,50,25,0.6); transition:background-color .3s ease, transform .3s ease; }
.sq-go:hover{ background:#8A3F22; transform:scale(1.04); }
.sq-go:focus-visible{ outline:2px solid var(--charcoal); outline-offset:4px; }
.sq-go svg{ width:24px; height:24px; margin-left:3px; transition:transform .5s cubic-bezier(.3,.7,.2,1); }
.sq-go.is-back svg{ transform:rotate(180deg); margin-left:-3px; }

/* the right-hand side */
.sq-side{ position:absolute; top:0; bottom:0; left:42%; right:0; }
.sq-tabs{ position:absolute; top:30px; right:5.2%; display:flex; gap:clamp(28px,3.4vw,56px); }
.sq-tab{ position:relative; padding:6px 0 12px 0; border:0; background:none; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.08em; color:rgba(107,100,88,0.55); transition:color .4s ease; }
.sq-tab::after{ content:''; position:absolute; left:50%; bottom:0; width:28px; height:2px; margin-left:-14px; border-radius:2px; background:var(--accent-warm); transform:scaleX(0); transition:transform .45s cubic-bezier(.3,.7,.2,1); }
.sq-tab.is-on{ color:var(--charcoal); }
.sq-tab.is-on::after{ transform:scaleX(1); }
.sq-text{ position:absolute; top:15%; left:16.5%; right:13%; }
.sq-titlerow{ display:flex; align-items:flex-start; justify-content:space-between; gap:32px; }
.sq-title{ margin:0; font-family:'Raleway',sans-serif; font-weight:400; font-size:clamp(26px,2.45vw,37px); line-height:1.18; letter-spacing:-0.005em; color:var(--charcoal); }
.sq-months{ position:relative; margin:4px 0 0 0; flex:0 0 auto; min-width:8.9em; height:1.3em; text-align:right; font-family:'Raleway',sans-serif; font-weight:500; font-size:clamp(16px,1.5vw,22px); line-height:1.3; color:var(--accent-warm); }
.sq-months span{ position:absolute; top:0; right:0; white-space:nowrap; }
.sq-months span[data-s="1"], .sq-para p[data-s="1"], .sq-rows dl[data-s="1"], .sq-card-txt[data-s="1"]{ opacity:0; }
.sq-para{ position:relative; margin-top:clamp(16px,2.6vh,26px); min-height:5.1em; }
.sq-para p{ position:absolute; top:0; left:0; right:0; margin:0; max-width:36em; font-size:15px; line-height:1.7; color:var(--muted); }
.sq-rule{ height:1px; margin-top:clamp(14px,2.4vh,24px); background:var(--rule); }
.sq-foot{ margin-top:clamp(14px,2.2vh,22px); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sq-rows{ position:relative; min-height:3em; flex:1 1 auto; }
.sq-rows dl{ position:absolute; top:0; left:0; margin:0; display:grid; grid-template-columns:auto auto; column-gap:44px; row-gap:4px; }
.sq-rows dl > div{ display:contents; }
.sq-rows dt{ font-size:13px; line-height:1.5; color:var(--muted); }
.sq-rows dt::after{ content:':'; }
.sq-rows dd{ margin:0; font-size:13px; line-height:1.5; font-weight:600; color:var(--charcoal); }
.sq-pill{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:14px 40px; border:1px solid rgba(168,77,42,0.32); border-radius:999px; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-warm); transition:background-color .3s ease, border-color .3s ease; }
.sq-pill:hover{ background:rgba(168,77,42,0.06); border-color:rgba(168,77,42,0.6); }

/* the three cards along the bottom, the first overlapping the hero */
.sq-cards{ position:absolute; z-index:6; left:27%; right:3%; top:53%; bottom:3.5%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:2.4%; }
.sq-card{ position:relative; margin:0; border-radius:10px; overflow:hidden; background:var(--stone); box-shadow:0 26px 48px -26px rgba(20,16,12,0.55); }
.sq-card .sq-frame{ border-radius:inherit; }
.sq-card-tint{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(20,18,15,0.52) 0%, rgba(20,18,15,0.14) 42%, rgba(20,18,15,0.06) 100%); pointer-events:none; }
.sq-card-cap{ position:absolute; z-index:5; left:clamp(16px,1.7vw,26px); right:clamp(16px,1.7vw,26px); bottom:clamp(16px,2.6vh,26px); height:3.6em; pointer-events:none; }
.sq-card-txt{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:6px; }
.sq-card-title{ font-family:'Raleway',sans-serif; font-weight:500; font-size:clamp(19px,1.75vw,27px); line-height:1.15; color:var(--ivory); text-shadow:0 1px 16px rgba(15,13,10,0.3); }
.sq-card-meta{ font-size:12.5px; font-weight:500; letter-spacing:0.04em; color:rgba(250,247,240,0.85); }
.sq-empty + .sq-card-tint{ display:none; }
/* placeholder cards: a deeper warm stone so the ivory caption still reads;
   the caption itself carries 'Photograph to come' */
.sq-card .sq-empty{ background:linear-gradient(170deg, #CBBFA9 0%, #A99880 58%, #8C7B64 100%); }
.sq-card .sq-empty span{ display:none; }

/* shorter laptop screens: tighten the right-hand text a little */
@media (max-height:820px) and (min-width:901px){
  .sq-text{ top:11%; }
  .sq-title{ font-size:clamp(24px,2.4vw,34px); }
  .sq-para p{ font-size:14px; line-height:1.6; }
  .sq-cards{ top:55%; }
}
@media (max-width:1180px) and (min-width:901px){
  .sq-text{ left:12%; right:6%; }
  .sq-cards{ left:28%; right:2.5%; }
  .sq-hero-meta{ font-size:12.5px; letter-spacing:0.02em; }
  .sq-bar-sep{ margin:0 8px; }
  .sq-rows dl{ column-gap:28px; }
}

/* tablets and phones: heading above; hero on top with the button on its
   lower edge; months and paragraph; the three cards in a row */
@media (max-width:900px){
  .sq-head-m{ display:block; padding:40px 22px 26px 22px; text-align:center; }
  .sq-wrap{ height:calc(100vh - 68px + 120vh); }
  .sq-hero{ width:100%; bottom:auto; height:44%; }
  .sq-hero-label{ top:22px; left:22px; font-size:10px; }
  .sq-hero-name{ top:auto; bottom:52px; left:22px; font-size:clamp(34px,11cqi,52px); }
  .sq-hero-meta{ bottom:22px; left:22px; font-size:12px; }
  .sq-go{ left:auto; right:22px; top:calc(44% - 32px); width:64px; height:64px; }
  .sq-go svg{ width:20px; height:20px; }
  .sq-side{ left:0; top:44%; }
  .sq-tabs, .sq-title, .sq-rule, .sq-foot{ display:none; }
  .sq-text{ top:24px; left:22px; right:22px; }
  .sq-titlerow{ display:block; }
  .sq-months{ margin:0; text-align:left; min-width:0; font-size:17px; }
  .sq-months span{ left:0; right:auto; }
  .sq-para{ margin-top:10px; min-height:6.4em; }
  .sq-para p{ font-size:14px; line-height:1.6; }
  .sq-cards{ left:22px; right:22px; top:auto; bottom:76px; height:25%; column-gap:10px; } /* clears the floating Talk to Solace button */
  .sq-card{ border-radius:8px; }
  .sq-card-cap{ left:10px; right:10px; bottom:10px; height:2.4em; }
  .sq-card-title{ font-size:13px; }
  .sq-card-meta{ display:none; }
}
@media (max-width:860px){
  .sq-wrap{ height:calc(100vh - 60px + 120vh); }
  .sq-pin{ top:60px; height:calc(100vh - 60px); }
}
/* the pill's jump to Sailing Dates lands clear of the fixed nav, like the
   page's other in-page anchors */
#sailing-dates{ scroll-margin-top:84px; }

/* ============================================================
   SEA IN SEASON — twenty-second pass (28 Sep 2026): the passage.
   The twenty-first pass layout stays as each season's resting state;
   between them the photograph opens to the whole screen, the camera
   moves toward the horizon, a route line runs Caribbean → Mediterranean
   and the Med arrives and settles back into its window. Positions and
   the camera move are scrubbed by initSeaSeason(); these rules set the
   pieces and the starting (Caribbean at rest) state.
   ============================================================ */
.sqp .sq-wrap{ height:calc(100vh - 68px + 230vh); }
.sqp-hero{ position:absolute; inset:0; z-index:0; }
.sqp-media{ position:absolute; inset:0; overflow:hidden; background:#1E2A30; clip-path:inset(0 58% 0 0); will-change:clip-path; }
.sqp-shot{ position:absolute; inset:0; will-change:opacity; }
.sqp-shot[data-s="1"]{ opacity:0; }
.sqp .sqp-img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transform-origin:0 0; transform:none; will-change:transform; }
.sqp .sqp-img.is-placed{ right:auto; bottom:auto; object-fit:fill; }
.sqp-shot .sq-tint{ z-index:1; }
/* light along the horizon at the moment one sea becomes the other */
.sqp-haze{ position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; background:radial-gradient(ellipse 110% 26% at 50% 36%, rgba(252,246,232,0.9) 0%, rgba(252,246,232,0.28) 50%, rgba(252,246,232,0) 76%); mix-blend-mode:screen; }
.sqp-shade{ position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; background:linear-gradient(to top, rgba(15,13,10,0.55) 0%, rgba(15,13,10,0.12) 34%, rgba(15,13,10,0) 50%); }
.sqp-box{ position:absolute; top:0; bottom:0; left:0; width:42%; z-index:5; container-type:inline-size; pointer-events:none; }

/* the route line along the foot of the full-screen photograph */
.sqp-passage{ position:absolute; z-index:9; left:0; right:0; bottom:9%; display:flex; flex-direction:column; align-items:center; gap:20px; opacity:0; pointer-events:none; color:var(--ivory); text-shadow:0 1px 18px rgba(15,13,10,0.35); }
.sqp-pass-label{ margin:0; font-size:11px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; color:rgba(250,247,240,0.82); }
.sqp-route{ display:flex; align-items:center; gap:30px; width:min(900px, 78%); }
.sqp-end{ flex:0 0 auto; display:flex; flex-direction:column; gap:6px; }
.sqp-to{ align-items:flex-end; text-align:right; }
.sqp-end-name{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,2.1vw,32px); line-height:1.1; letter-spacing:0.01em; }
.sqp-end-m{ font-size:11.5px; font-weight:500; letter-spacing:0.1em; color:rgba(250,247,240,0.78); }
.sqp-line{ position:relative; flex:1 1 auto; height:1px; background:rgba(250,247,240,0.34); }
.sqp-line-fill{ position:absolute; inset:0; background:var(--ivory); transform-origin:left center; transform:scaleX(0); }
.sqp-dot{ position:absolute; top:50%; left:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--accent-warm); box-shadow:0 0 0 5px rgba(250,247,240,0.22); }

/* the resting layout's pieces are faded and moved by script now */
.sqp .sq-go{ transition:background-color .3s ease; }
.sqp .sq-go:hover{ transform:none; }
.sqp .sq-card .sq-img, .sqp .sq-card .sq-empty{ transform:scale(1.03); }
.sqp .sq-card .sq-layer[data-s="1"]{ opacity:0; }

@media (max-width:900px){
  .sqp .sq-wrap{ height:calc(100vh - 68px + 200vh); }
  .sqp-media{ clip-path:inset(0 0 56% 0); }
  .sqp-box{ width:100%; bottom:auto; height:44%; }
  .sqp-passage{ bottom:13%; gap:14px; }
  .sqp-route{ width:calc(100% - 44px); gap:14px; }
  .sqp-end-name{ font-size:17px; }
  .sqp-end-m{ font-size:10px; letter-spacing:0.06em; }
}
@media (max-width:860px){
  .sqp .sq-wrap{ height:calc(100vh - 60px + 200vh); }
}

/* 22nd pass, client comments: the section's own title (orange eyebrow +
   one line) above the stage, at the site's 40px title gap (#destinations
   padding-top above); the in-layout heading is gone, so the months lead
   the right-hand text and the paragraph takes more room. */
.sqp .sq-head-m{ display:none; }
.sqp-head{ max-width:1040px; margin:0 auto 48px auto; padding:0 64px; }
.sqp .sq-titlerow{ display:block; }
.sqp .sq-months{ margin:0; min-width:0; text-align:left; font-size:clamp(20px,1.9vw,28px); }
.sqp .sq-months span{ left:0; right:auto; }
.sqp .sq-text{ top:17%; }
.sqp .sq-para{ margin-top:clamp(14px,2.2vh,22px); min-height:7em; }
.sqp .sq-para p{ max-width:34em; font-size:16px; line-height:1.75; }
@media (max-height:820px) and (min-width:901px){
  .sqp .sq-text{ top:14%; }
  .sqp .sq-para p{ font-size:15px; line-height:1.65; }
}
@media (max-width:900px){
  .sqp-head{ padding:0 22px; margin-bottom:32px; }
  .sqp .sq-text{ top:20px; }
  .sqp .sq-months{ font-size:17px; }
  .sqp .sq-para{ margin-top:8px; min-height:0; }
  .sqp .sq-para p{ font-size:13.5px; line-height:1.55; }
}
/* phones: the longer season copy needs a little more room above the cards */
@media (max-width:900px){
  .sqp-box{ height:40%; }
  .sqp-media{ clip-path:inset(0 0 60% 0); }
  .sqp .sq-side{ top:40%; }
  .sqp .sq-go{ top:calc(40% - 32px); }
  .sqp .sq-cards{ height:23%; }
}
@media (max-width:900px) and (max-height:720px){
  .sqp-box{ height:34%; }
  .sqp-media{ clip-path:inset(0 0 66% 0); }
  .sqp .sq-side{ top:34%; }
  .sqp .sq-go{ top:calc(34% - 28px); width:56px; height:56px; }
  .sqp .sq-hero-name{ bottom:44px; font-size:clamp(30px,9cqi,40px); }
  .sqp .sq-cards{ height:20%; }
  .sqp .sq-para p{ font-size:13px; line-height:1.5; }
}
/* client: the Destinations line at the same size as "One week. Many ways to
   experience it." (.display-2.one-line's sizes, but allowed to wrap) */
#sqHeading{ font-size:clamp(22px,3vw,38px); }
@media (max-width:640px){ #sqHeading{ font-size:clamp(22px,5.4vw,30px); } }

/* client comment: too big a gap between "Solace follows the sun…" and the
   months. The right-hand text now starts at the top of the stage, the
   months on one line with the hero's "Sea in Season" label and the season
   tabs (one clean top line across the whole composition), and the cards
   move up to take the space, so the photographs get taller. */
@media (min-width:901px){
  .sqp-head{ margin-bottom:36px; }
  .sqp .sq-tabs{ top:37px; }
  .sqp .sq-text{ top:34px; }
  .sqp .sq-cards{ top:clamp(330px, 41%, 360px); }
}

/* client comment: the round seam button a little smaller, for a lighter,
   more elegant touch (92px → 72px on desktop, 64px → 54px on phones) */
.sqp .sq-go{ width:72px; height:72px; left:calc(42% - 36px); box-shadow:0 14px 28px -16px rgba(120,50,25,0.55); }
.sqp .sq-go svg{ width:19px; height:19px; margin-left:2px; }
.sqp .sq-go.is-back svg{ margin-left:-2px; }
@media (max-width:900px){
  .sqp .sq-go{ left:auto; right:22px; width:54px; height:54px; top:calc(40% - 27px); }
  .sqp .sq-go svg{ width:17px; height:17px; }
}
@media (max-width:900px) and (max-height:720px){
  .sqp .sq-go{ width:48px; height:48px; top:calc(34% - 24px); }
}

/* client comment: the cards lose their titles and open larger on click.
   A quiet expand mark sits in each photo's corner; placeholder tiles show
   their "Photograph to come" label again now that the caption is gone. */
.sqp .sq-card-tint{ background:rgba(20,18,15,0.05); }
.sqp .sq-card .sq-img{ transition:transform .9s cubic-bezier(.16,.8,.3,1); }
.sqp .sq-card.is-zoomable{ cursor:zoom-in; }
.sqp .sq-card.is-zoomable:hover .sq-layer .sq-img{ transform:scale(1.07); }
.sqp .sq-card:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:4px; }
.sqp-zoom{ position:absolute; z-index:5; top:14px; right:14px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(250,247,240,0.2); border:1px solid rgba(250,247,240,0.45); color:var(--ivory); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transform:scale(.9); transition:opacity .35s ease, transform .35s ease, background-color .35s ease; pointer-events:none; }
.sqp-zoom svg{ width:14px; height:14px; }
.sqp .sq-card.is-zoomable .sqp-zoom{ opacity:.85; transform:none; }
.sqp .sq-card.is-zoomable:hover .sqp-zoom{ opacity:1; background:rgba(250,247,240,0.32); }
.sqp .sq-card .sq-empty span{ display:block; margin-top:0; color:rgba(250,247,240,0.78); }
@media (max-width:900px){
  .sqp-zoom{ top:8px; right:8px; width:26px; height:26px; }
  .sqp-zoom svg{ width:11px; height:11px; }
  .sqp .sq-card .sq-empty span{ font-size:8px; letter-spacing:0.14em; text-align:center; padding:0 8px; }
}
@media (prefers-reduced-motion: reduce){
  .sqp .sq-card .sq-img{ transition:none; }
  .sqp .sq-card.is-zoomable:hover .sq-layer .sq-img{ transform:scale(1.03); }
}
/* The photo lightbox's close cross sat 52px above the top of the screen
   (it is a child of the full-screen .lightbox, not of .lightbox-inner), so
   it was never visible. Now in the top-right corner, in the same orange as
   the Technical Side's cross; the photo settles in gently as it opens. */
#yachtLightbox .lightbox-close{ top:20px; right:22px; z-index:2; color:var(--accent-warm-on-dark); transition:opacity .25s ease; }
#yachtLightbox .lightbox-close:hover{ opacity:.75; }
#yachtLightbox .lightbox-close svg{ width:26px; height:26px; }
#yachtLightbox .lightbox-inner img{ transform:scale(.97); transition:transform .5s cubic-bezier(.16,.8,.3,1); }
#yachtLightbox.is-open .lightbox-inner img{ transform:none; }
#yachtLightbox{ cursor:zoom-out; }
#yachtLightbox .lightbox-inner img, #yachtLightbox .lightbox-close{ cursor:default; }
#yachtLightbox .lightbox-close{ cursor:pointer; }
@media (max-width:860px){ #yachtLightbox .lightbox-close{ top:12px; right:12px; } }
@media (prefers-reduced-motion: reduce){ #yachtLightbox .lightbox-inner img{ transition:none; transform:none; } }

/* the two season paragraphs share one grid cell, so the block is as tall
   as the longer one and the details line always sits below it (they used
   to be absolutely placed over a fixed min-height); the text column is a
   little wider for the client's longer Caribbean copy */
.sqp .sq-para{ display:grid; min-height:0; }
.sqp .sq-para p{ position:relative; top:auto; left:auto; right:auto; grid-area:1 / 1; }
@media (min-width:901px){
  .sqp .sq-text{ right:8%; }
  .sqp .sq-para p{ max-width:40em; font-size:15.5px; line-height:1.72; }
}
@media (max-height:820px) and (min-width:901px){
  .sqp .sq-para p{ font-size:14.5px; line-height:1.62; }
}
/* Fix (client: "why can the user not click here anymore?"): since the
   months moved up onto the tabs' line, the months paragraph (full width of
   the text column) sat on top of the season tabs and swallowed their
   clicks. The tabs now sit above it. */
.sqp .sq-tabs{ z-index:4; }
/* client comments: the hero's small "Sea in Season · 01 / 02" label is
   removed and the season name moves up to share the top line with the
   months: the tops of its capitals sit exactly level with the tops of
   "January — May". Worked from Raleway's metrics (ascent .94, descent .234,
   cap height .71 em): the months' capitals start .293 em below their line
   box, the name's (line-height 1.05) .168 em below its own. */
@media (min-width:901px){
  .sqp .sq-hero-name{ top:calc(34px + 0.293 * clamp(20px,1.9vw,28px) - 0.168 * clamp(40px,10.4cqi,82px)); }
}

/* client comment: Home base / Days aboard / Guests / Price as one quiet
   spec line under the hairline — small spaced labels over the values, thin
   dividers between, the price with its "per week" underneath. The two
   seasons' lines share one grid cell (like the paragraphs). The Sailing
   dates pill sits at the end of the line when there is room, otherwise
   on its own line below, right-aligned. */
.sqp .sq-foot{ flex-wrap:wrap; align-items:flex-end; row-gap:22px; }
.sqp .sq-rows{ display:grid; min-height:0; flex:0 1 auto; }
.sqp .sq-rows dl{ position:relative; grid-area:1 / 1; display:flex; align-items:flex-start; column-gap:0; row-gap:0; }
.sqp .sq-rows dl > div{ display:flex; flex-direction:column; gap:7px; padding:0 22px; border-left:1px solid var(--rule); }
.sqp .sq-rows dl > div:first-child{ padding-left:0; border-left:0; }
.sqp .sq-rows dt{ font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; line-height:1.3; color:var(--muted); }
.sqp .sq-rows dt::after{ content:none; }
.sqp .sq-rows dd{ font-family:'Raleway',sans-serif; font-size:17px; font-weight:400; line-height:1.2; color:var(--charcoal); white-space:nowrap; }
.sq-row-note{ display:block; margin-top:4px; font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:0.03em; color:var(--muted); }
.sqp .sq-pill{ margin-left:auto; }
@media (max-width:1180px) and (min-width:901px){
  .sqp .sq-rows dl > div{ padding:0 16px; }
  .sqp .sq-rows dd{ font-size:15.5px; }
}
/* phones: the same four facts, compact, between the text and the photos
   (the pill and hairline stay hidden there) */
@media (max-width:900px){
  .sqp .sq-foot{ display:flex; margin-top:14px; }
  .sqp .sq-pill{ display:none; }
  .sqp .sq-rows{ width:100%; }
  .sqp .sq-rows dl{ width:100%; }
  .sqp .sq-rows dl > div{ flex:1 1 0; min-width:0; gap:4px; padding:0 8px; }
  .sqp .sq-rows dt{ font-size:8px; letter-spacing:0.12em; }
  .sqp .sq-rows dd{ font-size:12.5px; white-space:normal; }
  .sq-row-note{ font-size:9px; margin-top:2px; }
}
.sqp .sq-foot{ row-gap:18px; }
@media (max-width:900px){
  .sqp-box{ height:36%; }
  .sqp-media{ clip-path:inset(0 0 64% 0); }
  .sqp .sq-side{ top:36%; }
  .sqp .sq-go{ top:calc(36% - 27px); }
  .sqp .sq-para p{ font-size:13px; line-height:1.55; }
  .sqp .sq-rows dd{ font-size:12px; }
  .sqp .sq-rows dl > div{ padding:0 7px; }
  .sq-wrap.is-cramped .sq-cards{ display:none; }
}
@media (max-width:900px) and (max-height:720px){
  .sqp-box{ height:32%; }
  .sqp-media{ clip-path:inset(0 0 68% 0); }
  .sqp .sq-side{ top:32%; }
  .sqp .sq-go{ top:calc(32% - 24px); }
  .sqp .sq-para p{ font-size:12.5px; line-height:1.5; }
}
.sqp .sq-rows dt{ white-space:nowrap; }
@media (max-width:1180px) and (min-width:901px){
  .sqp .sq-rows dl > div:first-child dd{ white-space:normal; max-width:8.5em; }
}
@media (min-width:901px){
  .sqp .sq-rows dl > div:first-child dd{ white-space:normal; max-width:8.5em; }
}
@media (max-width:1180px) and (min-width:901px){
  .sqp .sq-rows dl > div:first-child dd{ max-width:7.5em; }
}

/* client comments: the Sailing dates button moves to the left, under the
   facts and in line with the text, with the "other dates" button beside
   it (Talk to Solace, filled, the same destination as Sailing Dates' own
   "Talk to Solace"). Phones keep their floating Talk to Solace instead. */
.sqp-ctas{ flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sqp .sqp-ctas .sq-pill{ margin-left:0; padding:14px 34px; }
.sqp-pill-solid{ background:var(--accent-warm); border-color:var(--accent-warm) !important; color:var(--ivory) !important; }
.sqp-pill-solid:hover{ background:#8A3F22 !important; border-color:#8A3F22 !important; }
@media (max-width:900px){ .sqp-ctas{ display:none; } }
/* phones, with the client's longer season texts: a slightly shorter photo
   on top so the three photos still fit below the facts */
@media (max-width:900px){
  .sqp-box{ height:33%; }
  .sqp-media{ clip-path:inset(0 0 67% 0); }
  .sqp .sq-side{ top:33%; }
  .sqp .sq-go{ top:calc(33% - 27px); }
}
@media (max-width:900px) and (max-height:720px){
  .sqp-box{ height:30%; }
  .sqp-media{ clip-path:inset(0 0 70% 0); }
  .sqp .sq-side{ top:30%; }
  .sqp .sq-go{ top:calc(30% - 24px); }
}

/* client comment "reduce the gap here": the Sailing Dates section was
   picking up .section.tight's 96px top and bottom padding (it outranked the
   20th pass's own .sx-dates-section rule), so its title sat far below the
   end of Sea in Season. Back to the site's 40px title gap (32px on
   phones), with a lighter bottom as well. */
.section.tight.sx-dates-section{ padding-top:40px; padding-bottom:56px; }
@media (max-width:860px){ .section.tight.sx-dates-section{ padding-top:32px; padding-bottom:40px; } }

/* ============================================================
   Client comment: "it looks very crowded — more spacing or another
   layout, for a premium, high-end feel". The right-hand column is now
   just the months, the description and the two buttons, with generous
   space between them (no hairline). The four facts move onto the photo,
   bottom left, in ivory: a 2 × 2 spec block like a configurator sheet,
   clear of the first card, over a soft shade for legibility. Phones keep
   the facts line under the text (there is no room on the smaller photo).
   ============================================================ */
@media (min-width:901px){
  .sqp .sq-rule{ display:none; }
  .sqp .sq-foot .sq-rows{ display:none; }
  .sqp .sq-para{ margin-top:clamp(20px,3.2vh,30px); }
  .sqp .sq-foot{ margin-top:clamp(26px,4.2vh,40px); }
  .sqp .sq-para p{ font-size:15.5px; line-height:1.8; }
  .sqp-hero-facts{
    --fl: clamp(32px,10.5cqi,64px);
    position:absolute; left:var(--fl); bottom:9%; width:calc(62cqi - var(--fl) - 24px);
    margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(18px,5cqi,36px); row-gap:clamp(16px,2.6vh,24px);
    padding-top:clamp(16px,2.4vh,22px); border-top:1px solid rgba(250,247,240,0.34);
  }
  .sqp-hero-facts > div{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .sqp-hero-facts dt{ font-size:9.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; line-height:1.3; color:rgba(250,247,240,0.72); white-space:nowrap; }
  .sqp-hero-facts dd{ margin:0; font-family:'Raleway',sans-serif; font-size:clamp(15px,3.1cqi,19px); font-weight:400; line-height:1.2; color:var(--ivory); }
  .sqp-hero-facts .sq-row-note{ color:rgba(250,247,240,0.7); }
  /* the soft shade under the facts (inside the photo's own layer, so it
     travels with the photo and never shows over the ivory side) */
  .sqp-shot::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:52%; z-index:2; pointer-events:none;
    background:linear-gradient(to top, rgba(15,13,10,0.5) 0%, rgba(15,13,10,0.22) 45%, rgba(15,13,10,0) 100%); }
}
@media (max-height:820px) and (min-width:901px){
  .sqp .sq-para p{ font-size:14.5px; line-height:1.7; }
  .sqp-hero-facts{ bottom:7%; }
}
@media (max-width:900px){
  .sqp-hero-facts{ display:none; }
}
/* phones: with the "5–10 days | Up to 4 guests" line gone from the photo,
   the season name settles to the photo's lower edge */
@media (max-width:900px){ .sqp .sq-hero-name{ bottom:20px; } }
/* client comment "fit this in one line": the Destinations sentence stays on
   one line on laptop and desktop screens — 38px (the size of "One week.
   Many ways to experience it.") wherever it fits, easing down only as
   much as needed on narrower screens; tablets and phones wrap as before. */
@media (min-width:901px){
  .sqp-head{ max-width:none; }
  #sqHeading{ white-space:nowrap; font-size:min(38px, calc((100vw - 190px) / 34.5)); }
}

/* client comment: "I want the infos to sit between the text and the
   button, to make it very clear as they are essential information". The
   facts come back into the text column, between the description and the
   two buttons, as a clear spec band: fine hairlines above and below, four
   equal columns with thin dividers, spaced labels over larger values.
   The on-photo spec block of the previous round is retired (kept in the
   markup, hidden) and the photo's bottom shade goes with it. */
@media (min-width:901px){
  .sqp-hero-facts{ display:none; }
  .sqp-shot::after{ content:none; }
  .sqp .sq-foot{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; row-gap:0; gap:clamp(22px,3.6vh,32px); margin-top:clamp(24px,3.8vh,34px); }
  .sqp .sq-foot .sq-rows{ display:grid; width:100%; }
  .sqp .sq-rows dl{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); padding:clamp(14px,2.2vh,20px) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .sqp .sq-rows dl > div{ padding:0 clamp(12px,1.4vw,22px); gap:8px; min-width:0; }
  .sqp .sq-rows dl > div:first-child{ padding-left:0; }
  .sqp .sq-rows dt{ font-size:10px; letter-spacing:0.2em; }
  .sqp .sq-rows dd{ font-size:clamp(16px,1.3vw,19px); }
  .sqp .sq-rows dl > div:first-child dd{ max-width:none; }
  .sqp-ctas{ flex:0 0 auto; }
}
@media (max-width:1180px) and (min-width:901px){
  .sqp .sq-rows dd{ white-space:normal; font-size:15px; }
  .sqp .sq-rows dt{ letter-spacing:0.14em; }
}
@media (max-height:820px) and (min-width:901px){
  .sqp .sq-foot{ gap:20px; margin-top:22px; }
  .sqp .sq-rows dl{ padding:12px 0; }
}

/* Each season's description + facts + buttons as one block (see the
   markup comment in renderSeaSeason()): the two blocks share one grid
   cell and swap during the passage; the hidden one is inert. */
.sqp-stack{ display:grid; }
.sqp-st{ grid-area:1 / 1; min-width:0; }
.sqp-st[data-s="1"]{ opacity:0; }
.sqp-st > p{ margin:0; }
.sqp-facts{ margin:0; }
.sqp-facts dd{ margin:0; }
@media (min-width:901px){
  .sqp-facts{ margin-top:clamp(24px,3.8vh,34px); display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); padding:clamp(14px,2.2vh,20px) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .sqp-facts > div{ display:flex; flex-direction:column; gap:8px; min-width:0; padding:0 clamp(12px,1.4vw,22px); border-left:1px solid var(--rule); }
  .sqp-facts > div:first-child{ padding-left:0; border-left:0; }
  .sqp-facts dt{ font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; line-height:1.3; color:var(--muted); white-space:nowrap; }
  .sqp-facts dd{ font-family:'Raleway',sans-serif; font-size:clamp(16px,1.3vw,19px); font-weight:400; line-height:1.2; color:var(--charcoal); white-space:nowrap; }
  .sqp-st .sqp-ctas{ margin-top:clamp(22px,3.6vh,32px); }
}
@media (max-width:1180px) and (min-width:901px){
  .sqp-facts dd{ white-space:normal; font-size:15px; }
  .sqp-facts dt{ letter-spacing:0.14em; }
}
@media (max-height:820px) and (min-width:901px){
  .sqp-facts{ margin-top:22px; padding:12px 0; }
  .sqp-st .sqp-ctas{ margin-top:20px; }
}
@media (max-width:900px){
  .sqp-facts{ margin-top:14px; display:flex; }
  .sqp-facts > div{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px; padding:0 7px; border-left:1px solid var(--rule); }
  .sqp-facts > div:first-child{ padding-left:0; border-left:0; }
  .sqp-facts dt{ font-size:8px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; line-height:1.3; color:var(--muted); white-space:nowrap; }
  .sqp-facts dd{ font-family:'Raleway',sans-serif; font-size:12px; line-height:1.2; color:var(--charcoal); }
  .sqp-facts .sq-row-note{ font-size:9px; margin-top:2px; }
}
/* client comment on "Sailing dates": "in orange as well please" — both
   buttons are now filled terracotta */
.sqp-st .sqp-ctas .sq-pill{ background:var(--accent-warm); border-color:var(--accent-warm); color:var(--ivory); }
.sqp-st .sqp-ctas .sq-pill:hover{ background:#8A3F22; border-color:#8A3F22; }

/* Experience details → Included only (client, 28 Sep 2026) */
.inc-wrap{ padding-top:8px; text-align:center; }
.inc-list{ list-style:none; margin:22px auto 0 auto; padding:0; display:grid; grid-template-columns:repeat(2, max-content); justify-content:center; column-gap:clamp(40px,6vw,88px); row-gap:14px; text-align:left; }
.inc-list li{ position:relative; padding-left:20px; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,1.5vw,20px); line-height:1.35; color:var(--charcoal); white-space:nowrap; }
.inc-list li::before{ content:''; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--accent-warm); opacity:.75; }
.inc-note{ margin:22px 0 0 0; font-size:14px; font-style:italic; color:var(--muted); }
@media (max-width:640px){
  .inc-list{ grid-template-columns:1fr; justify-content:start; max-width:320px; row-gap:10px; }
  .inc-list li{ white-space:normal; font-size:17px; }
}
.inc-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:560px; column-gap:44px; justify-content:stretch; }
.inc-list li{ white-space:normal; font-size:clamp(16px,1.3vw,18px); }
@media (max-width:640px){ .inc-list{ grid-template-columns:1fr; max-width:320px; } }
.inc-list{ max-width:600px; column-gap:36px; }
.inc-list li{ font-size:17px; }
@media (max-width:640px){ .inc-list{ max-width:320px; } }

/* ============================================================
   SAILING DATES — twenty-third pass (28 Sep 2026). An editorial
   invitation rather than a booking list: eyebrow, supporting line and a
   quiet destination switch on the left; the destination, its season and
   the sailing windows set as typography on the right. Warm ivory,
   charcoal type, orange only as a fine accent. No cards, shadows,
   gradients, icons or calendar.
   ============================================================ */
.sw{ background:var(--ivory); }
.sw-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(48px,7vw,120px); align-items:start; }
.sw-intro .eyebrow{ margin:0; }
.sw-line{ margin:18px 0 0 0; max-width:15em; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(22px,2.05vw,30px); line-height:1.38; color:var(--charcoal); text-wrap:balance; }
.sw-switch{ margin-top:clamp(28px,4.4vh,40px); display:flex; align-items:baseline; gap:16px; }
.sw-tab{ position:relative; padding:4px 0 10px 0; border:0; background:none; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:rgba(107,100,88,0.62); transition:color .35s ease; }
.sw-tab:hover{ color:var(--charcoal); }
.sw-tab::after{ content:''; position:absolute; left:0; bottom:0; width:24px; height:2px; border-radius:2px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.3,.7,.2,1); }
.sw-tab.is-on{ color:var(--charcoal); }
.sw-tab.is-on::after{ transform:scaleX(1); }
.sw-slash{ font-size:13px; color:var(--rule); transform:translateY(-1px); }

/* the two destinations share one grid cell, so switching never changes
   the section's height; the outgoing one fades first, then the next */
.sw-dests{ display:grid; }
.sw-dest{ grid-area:1 / 1; min-width:0; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
.sw-dest.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .5s ease .16s, transform .6s cubic-bezier(.2,.7,.2,1) .16s, visibility 0s; }
.sw-place{ margin:0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(40px,4.2vw,62px); line-height:1; letter-spacing:0.14em; text-transform:uppercase; color:var(--charcoal); }
.sw-season{ margin:16px 0 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:11px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; line-height:1.4; color:var(--muted); }
.sw-season span:last-child{ color:var(--charcoal); }
.sw-dot{ width:4px; height:4px; border-radius:50%; background:var(--accent-warm); opacity:.8; }
.sw-list{ list-style:none; margin:clamp(26px,4vh,36px) 0 0 0; padding:clamp(20px,3vh,28px) 0 0 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:repeat(3, minmax(0, max-content)); column-gap:clamp(36px,4.6vw,72px); row-gap:clamp(14px,2.2vh,20px); }
.sw-date{ position:relative; display:inline-block; padding:4px 0 8px 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.85vw,27px); line-height:1.15; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; color:var(--charcoal); transition:color .35s ease; }
.sw-date::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.3,.7,.2,1); }
.sw-date:hover, .sw-date:focus-visible{ color:#3A342C; }
.sw-date:hover::after, .sw-date:focus-visible::after{ transform:scaleX(1); }
.sw-date:focus-visible{ outline:none; }
.sw-pending{ margin:clamp(26px,4vh,36px) 0 0 0; padding-top:clamp(20px,3vh,28px); border-top:1px solid var(--rule); font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:clamp(18px,1.6vw,22px); color:var(--muted); }
.sw-alt{ margin:clamp(28px,4.4vh,40px) 0 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px; font-size:14px; color:var(--muted); }
.sw-alt-cta{ padding-bottom:4px; border-bottom:1px solid rgba(168,77,42,0.55); font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--charcoal); transition:color .3s ease, border-color .3s ease; }
.sw-alt-cta:hover{ color:var(--accent-warm); border-color:var(--accent-warm); }
.sw .ss-details{ margin-top:clamp(36px,5vh,52px); }
@media (prefers-reduced-motion: reduce){
  .sw-dest, .sw-dest.is-on{ transition:none; transform:none; }
  .sw-date::after, .sw-tab::after{ transition:none; }
}
@media (max-width:1100px) and (min-width:901px){
  .sw-list{ grid-template-columns:repeat(2, minmax(0, max-content)); }
}
@media (max-width:900px){
  .sw-grid{ grid-template-columns:1fr; row-gap:32px; }
  .sw-line{ font-size:21px; max-width:none; }
  .sw-switch{ margin-top:24px; }
  .sw-place{ font-size:38px; letter-spacing:0.12em; }
  .sw-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:20px; }
  .sw-date{ font-size:19px; }
}
/* keep the whole section compact: the Experience details toggle sits a
   comfortable step below the dates instead of inside a 72px frame */
.sw .ss-details{ margin-top:clamp(40px,6vh,56px); padding:0 24px; }
.section.tight.sx-dates-section.sw{ padding-bottom:48px; }
@media (max-width:860px){ .sw .ss-details{ padding:0; margin-top:36px; } .section.tight.sx-dates-section.sw{ padding-bottom:40px; } }
/* client comment on the supporting line: "too big, make it smaller to be
   more refined" (was clamp(22px,2.05vw,30px)) */
.sw-line{ margin-top:16px; max-width:21em; font-size:clamp(17px,1.3vw,19px); line-height:1.65; color:#4A453D; }
@media (max-width:900px){ .sw-line{ font-size:16.5px; max-width:none; } }
/* client comment on "ANTIGUA": the same size and font as "Caribbean" on the
   photo in Sea in Season — Raleway 300, sentence case, and the same size
   (the hero name is 10.4% of its 42%-wide photo, i.e. 4.368vw, within the
   same 40–82px bounds; on phones 11vw within 34–52px) */
.sw-place{ font-weight:300; font-size:clamp(40px,4.368vw,82px); line-height:1.05; letter-spacing:0.005em; text-transform:none; }
@media (max-width:900px){ .sw-place{ font-size:clamp(34px,11vw,52px); letter-spacing:0.005em; } }

/* client comment (with the seam button gone): "there's quite the space here
   and the section feels busy — could we use that space so it's less busy
   and overwhelming?" The text column moves into the empty band beside the
   photo, so the words get more width (fewer, calmer lines) and the facts
   more room; the spacing between text, facts, buttons and photos opens up. */
@media (min-width:1181px){
  .sqp .sq-text{ left:9%; right:7%; }
}
@media (max-width:1180px) and (min-width:901px){
  .sqp .sq-text{ left:7%; right:5%; }
}
@media (min-width:901px){
  .sqp .sq-para p, .sqp-st > p{ max-width:46em; line-height:1.85; }
  .sqp-facts{ margin-top:clamp(28px,4.4vh,40px); }
  .sqp-st .sqp-ctas{ margin-top:clamp(26px,4vh,36px); }
}
@media (max-height:820px) and (min-width:901px){
  .sqp .sq-para p, .sqp-st > p{ line-height:1.72; }
  .sqp-facts{ margin-top:24px; }
  .sqp-st .sqp-ctas{ margin-top:22px; }
}

/* ============================================================
   29 Sep 2026 — client comments on Sea in Season and Sailing Dates
   ============================================================ */
/* the buttons: centred under the facts band ("center those two buttons"),
   with Experience details beside them as a quieter outline pill */
@media (min-width:901px){
  .sqp-st .sqp-ctas{ justify-content:center; }
}
.sqp-st .sqp-ctas .sq-pill.sqp-pill-line{ background:transparent; border:1px solid rgba(168,77,42,0.55); color:var(--accent-warm); font-family:inherit; cursor:pointer; }
.sqp-st .sqp-ctas .sq-pill.sqp-pill-line:hover{ background:rgba(168,77,42,0.07); border-color:var(--accent-warm); color:var(--accent-warm); }
@media (max-width:1180px) and (min-width:901px){
  .sqp-st .sqp-ctas{ gap:10px; }
  .sqp .sqp-ctas .sq-pill{ padding:13px 24px; font-size:11px; }
}

/* Experience details overlay */
.inc-overlay{ position:fixed; inset:0; z-index:420; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(33,29,24,0.5); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s; }
.inc-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s; }
.inc-sheet{ position:relative; width:min(640px, 100%); max-height:calc(100vh - 44px); overflow:auto; padding:clamp(40px,6vh,56px) clamp(28px,5vw,64px) clamp(36px,5vh,48px); background:var(--ivory); border-radius:4px; text-align:center; transform:translateY(10px); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.inc-overlay.is-open .inc-sheet{ transform:none; }
.inc-sheet .eyebrow{ margin:0; }
.inc-title{ margin:12px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(26px,2.4vw,34px); line-height:1.15; color:var(--charcoal); }
.inc-sheet .inc-list{ margin-top:28px; }
.inc-x{ position:absolute; top:14px; right:16px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:none; cursor:pointer; color:var(--accent-warm); transition:opacity .2s ease; }
.inc-x:hover{ opacity:.7; }
.inc-x svg{ width:20px; height:20px; display:block; }
@media (prefers-reduced-motion: reduce){ .inc-overlay, .inc-sheet{ transition:none; } }

/* ------------------------------------------------------------
   SAILING DATES — twenty-fourth pass: centred and symmetrical,
   the destinations as the switch, the windows as one row of numerals
   ------------------------------------------------------------ */
.sw2{ background:var(--ivory); }
.section.tight.sx-dates-section.sw2{ padding-bottom:clamp(56px,8vh,80px); }
.sw2-inner{ max-width:1180px; margin:0 auto; text-align:center; }
.sw2-inner > .eyebrow{ margin:0; }
.sw2-line{ margin:14px auto 0 auto; max-width:34em; font-size:clamp(15.5px,1.15vw,17px); line-height:1.7; color:var(--muted); }
.sw2-switch{ margin-top:clamp(30px,4.6vh,44px); display:flex; align-items:center; justify-content:center; gap:clamp(28px,4vw,56px); }
.sw2-tab{ position:relative; padding:0 0 14px 0; border:0; background:none; cursor:pointer; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(34px,3.6vw,58px); line-height:1.05; letter-spacing:0.005em; color:rgba(107,100,88,0.42); transition:color .45s ease; }
.sw2-tab:hover{ color:rgba(38,36,31,0.72); }
.sw2-tab.is-on{ color:var(--charcoal); }
.sw2-tab::after{ content:''; position:absolute; left:50%; bottom:0; width:34px; height:2px; margin-left:-17px; border-radius:2px; background:var(--accent-warm); transform:scaleX(0); transition:transform .5s cubic-bezier(.3,.7,.2,1); }
.sw2-tab.is-on::after{ transform:scaleX(1); }
.sw2-tab:focus-visible{ outline:2px solid var(--teal); outline-offset:6px; }
.sw2-sep{ width:1px; height:clamp(28px,3vw,44px); background:var(--rule); transform:translateY(-6px); }
.sw2-dests{ margin-top:clamp(22px,3.4vh,30px); }
.sw2-season{ margin:0; display:flex; align-items:center; justify-content:center; gap:12px; font-size:11px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; line-height:1.4; color:var(--muted); }
.sw2-season span:last-child{ color:var(--charcoal); }
.sw2-dot{ width:4px; height:4px; border-radius:50%; background:var(--accent-warm); opacity:.8; }
.sw2-list{ list-style:none; margin:clamp(30px,4.6vh,44px) auto 0 auto; padding:clamp(26px,4vh,36px) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:flex; justify-content:center; }
.sw2-list li{ flex:1 1 0; min-width:0; display:flex; justify-content:center; border-left:1px solid var(--rule); }
.sw2-list li:first-child{ border-left:0; }
.sw2-date{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:10px; padding:6px 10px 12px 10px; color:var(--charcoal); }
.sw2-days{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(24px,2.2vw,32px); line-height:1; letter-spacing:0.02em; white-space:nowrap; transition:color .35s ease; }
.sw2-month{ font-size:10.5px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); transition:color .35s ease; }
.sw2-date::after{ content:''; position:absolute; left:50%; bottom:0; width:28px; height:1px; margin-left:-14px; background:var(--accent-warm); transform:scaleX(0); transition:transform .45s cubic-bezier(.3,.7,.2,1); }
.sw2-date:hover .sw2-month, .sw2-date:focus-visible .sw2-month{ color:var(--accent-warm); }
.sw2-date:hover::after, .sw2-date:focus-visible::after{ transform:scaleX(1); }
.sw2-date:focus-visible{ outline:none; }
.sw2-pending{ margin:clamp(30px,4.6vh,44px) auto 0 auto; padding:clamp(34px,5vh,46px) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:clamp(19px,1.6vw,23px); line-height:1.2; color:var(--muted); }
.sw2-alt{ margin:clamp(26px,4vh,36px) 0 0 0; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:10px 20px; font-size:14px; color:var(--muted); }
@media (prefers-reduced-motion: reduce){ .sw2-tab::after, .sw2-date::after{ transition:none; } }
@media (max-width:900px){
  .sw2-tab{ font-size:clamp(30px,9vw,40px); }
  .sw2-switch{ gap:22px; }
  .sw2-list{ flex-wrap:wrap; padding:6px 0; }
  .sw2-list li{ flex:0 0 50%; border-left:0; padding:14px 0; }
  .sw2-list li:nth-child(2n){ border-left:1px solid var(--rule); }
  .sw2-list li:nth-child(n+3){ border-top:1px solid var(--rule); }
  .sw2-list li:last-child:nth-child(odd){ flex-basis:100%; }
  .sw2-days{ font-size:23px; }
}
.sw2-tab{ text-transform:none; letter-spacing:0.005em; }
.sw2-tab::after{ left:50%; }
.sw2-line{ max-width:40em; text-wrap:balance; }
@media (max-width:900px){
  .sw2-tab{ font-size:clamp(28px,8.4vw,38px); }
  .sw2-switch{ gap:18px; }
}
.inc-sheet{ width:min(720px, 100%); }
.inc-sheet .inc-list{ max-width:600px; }
.sw2-more{ display:none; }
@media (max-width:900px){
  .sw2-more{ display:block; margin:22px 0 0 0; }
  .sw2-more-btn{ background:none; border:0; border-bottom:1px solid rgba(168,77,42,0.55); padding:0 0 4px 0; cursor:pointer; font-family:inherit; }
  .inc-sheet .inc-list{ grid-template-columns:1fr; max-width:300px; margin-left:auto; margin-right:auto; }
}

/* ============================================================
   ON BOARD (29 Sep 2026): the client's interior photographs, as taken,
   under the yacht — an asymmetric editorial pair, captions beneath.
   ============================================================ */
.ob{ max-width:1240px; margin:clamp(64px,9vh,96px) auto 0 auto; }
.ob-head{ text-align:center; }
.ob-head .eyebrow{ margin:0; }
.ob-title{ margin:14px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(24px,2.3vw,34px); line-height:1.2; color:var(--charcoal); }
.ob-grid{ margin-top:clamp(32px,5vh,48px); display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); column-gap:clamp(24px,3vw,44px); row-gap:40px; align-items:start; }
.ob-grid.ob-n1{ grid-template-columns:minmax(0,1fr); max-width:900px; margin-left:auto; margin-right:auto; }
.ob-grid > .ob-item:nth-child(2n){ margin-top:clamp(40px,7vw,96px); }
.ob-grid.ob-n3, .ob-grid.ob-n4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ob-item{ margin:0; cursor:zoom-in; }
.ob-item:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:6px; }
.ob-media{ position:relative; overflow:hidden; aspect-ratio:16 / 9; background:var(--stone); border-radius:3px; }
.ob-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,.8,.3,1); }
.ob-item:hover .ob-media img, .ob-item:focus-visible .ob-media img{ transform:scale(1.03); }
.ob-cap{ display:flex; flex-direction:column; gap:8px; margin-top:18px; max-width:34em; }
.ob-label{ font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-warm); }
.ob-text{ font-size:15px; line-height:1.7; color:var(--muted); }
@media (prefers-reduced-motion: reduce){ .ob-media img{ transition:none; } }
@media (max-width:860px){
  .ob{ margin-top:56px; }
  .ob-grid, .ob-grid.ob-n3, .ob-grid.ob-n4{ grid-template-columns:1fr; row-gap:32px; }
  .ob-grid > .ob-item:nth-child(2n){ margin-top:0; }
  .ob-text{ font-size:14.5px; }
}

/* the yacht's views now include the client's interior photos; the one on
   show can carry a short line under its label (29 Sep 2026) */
.pd-view-text{ margin:0; max-width:34em; font-size:14.5px; line-height:1.65; color:var(--muted); white-space:normal; opacity:0; transform:translateY(4px); transition:opacity .6s ease, transform .6s ease; }
.pd-view-text.is-in{ opacity:1; transform:none; }
.pd-view-text[hidden]{ display:none; }
@media (max-width:900px){ .pd-view-text{ text-align:center; max-width:28em; } }
@media (prefers-reduced-motion: reduce){ .pd-view-text{ transition:none; opacity:1; transform:none; } }
/* the interior captions over the photo (replaces .pd-view-text under it) */
.pd-cap{ position:absolute; z-index:3; left:clamp(28px,4.4vw,64px); bottom:clamp(22px,3.4vw,40px); width:min(420px, 30vw); margin:0; font-size:14px; line-height:1.65; color:rgba(250,247,240,0.95); text-shadow:0 1px 14px rgba(15,13,10,0.45); opacity:0; transform:translateY(6px); transition:opacity .7s ease .15s, transform .7s ease .15s; pointer-events:none; }
.pd-cap.is-in{ opacity:1; transform:none; }
.pd-cap[hidden]{ display:none; }
.pd-cap-shade{ position:absolute; left:0; right:0; bottom:0; height:46%; z-index:3; pointer-events:none; opacity:0; transition:opacity .7s ease; background:linear-gradient(to top, rgba(18,15,12,0.55) 0%, rgba(18,15,12,0.22) 48%, rgba(18,15,12,0) 100%); }
.pd-stage.has-cap .pd-cap-shade{ opacity:1; }
@media (max-width:900px){
  .pd-cap{ left:18px; right:18px; bottom:16px; width:auto; font-size:12.5px; line-height:1.55; }
  .pd-cap-shade{ height:62%; }
}
@media (prefers-reduced-motion: reduce){ .pd-cap, .pd-cap-shade{ transition:none; } }

/* client comments (29 Sep): the thumbnails smaller, and the rail (with its
   arrows) centred top-to-bottom beside the photo */
@media (min-width:901px){
  .pd-thumb{ width:54px; height:38px; }
  .pd-thumbs{ gap:8px; right:56px; }
  .pd-thumb::after{ left:calc(100% + 10px); width:16px; }
  .pd-stage{ --pd-rail: calc(var(--pd-n, 4) * 38px + (var(--pd-n, 4) - 1) * 8px); --pd-group: calc(var(--pd-rail) + 58px); }
  .pd-arrow{ width:36px; height:36px; margin-top:0; }
  .pd-arrow svg{ width:18px; height:18px; }
  .pd-arrow-prev{ right:92px; }
  .pd-arrow-next{ right:54px; }
}
@media (min-width:1321px){
  .pd-thumbs{ top:calc((var(--pd-h) - var(--pd-group)) / 2); }
  .pd-arrow{ top:calc((var(--pd-h) - var(--pd-group)) / 2 + var(--pd-rail) + 22px); }
}
@media (max-width:1320px) and (min-width:901px){
  .pd-thumbs{ bottom:calc((var(--pd-h) - var(--pd-group)) / 2 + 58px); }
  .pd-arrow{ bottom:calc((var(--pd-h) - var(--pd-group)) / 2); }
}
/* the yacht's main photo opens in full on click (29 Sep 2026); the photo
   lightbox is also larger now, so the detail can be seen */
.pd-hero[role="button"]{ cursor:zoom-in; }
.pd-hero:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:-4px; }
#yachtLightbox{ padding:56px 28px 40px; }
#yachtLightbox .lightbox-inner{ max-width:min(1640px, 96vw); }
#yachtLightbox .lightbox-inner img{ max-height:84vh; width:auto; max-width:100%; }
#yachtLightbox .lightbox-caption{ font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(250,247,240,0.78); }
/* client comment: the thumbnails themselves centred top-to-bottom (the
   arrows sit just under them and are no longer counted in the centring) */
@media (min-width:1321px){
  .pd-thumbs{ top:calc((var(--pd-h) - var(--pd-rail)) / 2); }
  .pd-arrow{ top:calc((var(--pd-h) - var(--pd-rail)) / 2 + var(--pd-rail) + 20px); }
}
@media (max-width:1320px) and (min-width:901px){
  .pd-thumbs{ bottom:calc((var(--pd-h) - var(--pd-rail)) / 2); }
  .pd-arrow{ bottom:calc((var(--pd-h) - var(--pd-rail)) / 2 - 56px); }
}
.sqp-st{ align-self:start; }

/* 29 Sep 2026 — full view: step through the yacht's photos */
.lb-step{ display:none; position:absolute; z-index:3; top:50%; width:52px; height:52px; margin-top:-26px; padding:0; border:0; background:none; cursor:pointer; color:rgba(250,247,240,0.8); transition:color .25s ease, transform .25s ease; }
.lb-step svg{ width:28px; height:28px; display:block; margin:auto; }
.lb-prev{ left:clamp(4px,1.4vw,22px); }
.lb-next{ right:clamp(4px,1.4vw,22px); }
.lb-step:hover{ color:var(--accent-warm-on-dark); }
.lb-prev:hover{ transform:translateX(-3px); }
.lb-next:hover{ transform:translateX(3px); }
#yachtLightbox.is-set .lb-step{ display:block; }
#yachtLightbox.is-set{ padding-left:72px; padding-right:72px; }
@media (max-width:860px){
  #yachtLightbox.is-set{ padding-left:16px; padding-right:16px; }
  .lb-step{ top:auto; bottom:14px; margin-top:0; }
  .lb-prev{ left:calc(50% - 60px); } .lb-next{ right:calc(50% - 60px); }
}

/* five specs in the dark plate now (top speed added): a little less
   padding between them and a slightly longer plate */
.yacht-section .pd-stage{ --pd-plate-w: clamp(460px, calc(var(--pd-wi) * 0.57), 720px); }
.pd-plate .pd-spec{ padding:2px clamp(14px, calc(4.4vw - 40px), 28px); }
@media (max-width:1320px) and (min-width:901px){ .pd-plate .pd-spec{ padding:2px 13px; } }
@media (max-width:900px){ .pd-plate .pd-spec{ padding:2px clamp(5px, 1.8vw, 14px); } .pd-plate .pd-spec-label{ font-size:8.5px; letter-spacing:0.1em; } }

/* Sea in Season: a touch more air above and below the three buttons */
@media (min-width:901px){
  .sqp-st .sqp-ctas{ margin-top:clamp(34px,5.2vh,48px); }
}
@media (max-height:820px) and (min-width:901px){
  .sqp-st .sqp-ctas{ margin-top:30px; }
}
/* tablets / small laptops: the five-spec plate stays clear of the photo
   label on its left */
@media (max-width:1320px) and (min-width:901px){
  .yacht-section .pd-stage{ --pd-plate-w: clamp(360px, calc(var(--pd-edge-b) - 206px), 720px); }
  .pd-plate .pd-spec{ padding:2px clamp(7px, calc(1.4vw - 4px), 13px); }
  .pd-plate .pd-spec-label{ letter-spacing:0.12em; }
}
@media (max-width:1060px) and (min-width:901px){
  .pd-plate .pd-spec-value{ font-size:17px; }
  .pd-plate .pd-spec-label{ font-size:8.5px; letter-spacing:0.08em; }
}

/* Experience details, 30 Sep 2026 (client: "doesn't look very aligned"):
   the two ragged bulleted columns become three centred groups — a small
   orange heading over each, the items as quiet lines beneath, hairlines
   dividing the columns — so everything sits on the sheet's centre line. */
.inc-sheet{ width:min(900px, 100%); padding-left:clamp(28px,4vw,56px); padding-right:clamp(28px,4vw,56px); }
.inc-groups{ margin-top:clamp(28px,4.4vh,40px); padding-top:clamp(24px,3.6vh,32px); border-top:1px solid var(--rule); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
.inc-group{ padding:0 clamp(14px,2vw,28px); text-align:center; }
.inc-group + .inc-group{ border-left:1px solid var(--rule); }
.inc-group-h{ margin:0 0 16px 0; font-size:10.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-warm); }
.inc-group ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.inc-group li{ font-family:'Raleway',sans-serif; font-weight:300; font-size:16.5px; line-height:1.35; color:var(--charcoal); }
.inc-sheet .inc-note{ margin-top:clamp(24px,3.6vh,32px); padding-top:clamp(18px,2.8vh,24px); border-top:1px solid var(--rule); }
.inc-x:focus{ outline:none; }
.inc-x:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:2px; border-radius:2px; }
@media (max-width:760px){
  .inc-groups{ grid-template-columns:1fr; row-gap:24px; }
  .inc-group{ padding:0; }
  .inc-group + .inc-group{ border-left:0; border-top:1px solid var(--rule); padding-top:22px; }
  .inc-group-h{ margin-bottom:12px; }
  .inc-group ul{ gap:8px; }
  .inc-group li{ font-size:16px; }
}
.inc-sheet{ width:min(960px, 100%); }
/* 16 Oct: longer, fuller lists. Equal columns, items wrap onto two lines where needed. */
.inc-groups{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.inc-group li{ font-size:16px; white-space:normal; text-wrap:balance; }
.inc-lead{ margin:14px auto 0 auto; max-width:34em; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(16px,1.4vw,18px); line-height:1.45; color:var(--muted); }
.inc-x:focus-visible{ outline:1px solid rgba(168,77,42,0.45); outline-offset:0; }
@media (max-width:900px){ .inc-group li{ white-space:normal; } }

/* Sailing Dates — the island maps (30 Sep 2026): a faint engraving behind
   the section, the chosen island drifting in as the other fades away */
.sw2{ position:relative; overflow:hidden; }
.sw2-inner{ position:relative; z-index:1; }
.sw2-maps{ position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 52%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 62% 70% at 50% 52%, #000 55%, transparent 100%); }
.sw2-map{ position:absolute; left:50%; top:52%; height:118%; width:auto; max-width:none;
  opacity:0; transform:translate(-50%,-50%) scale(1.035); transition:opacity 1.1s ease, transform 1.8s cubic-bezier(.2,.7,.2,1); }
.sw2-map.is-on{ opacity:.11; transform:translate(-50%,-50%) scale(1); transition:opacity 1.2s ease .15s, transform 2s cubic-bezier(.2,.7,.2,1) .15s; }
.sw2-map-mallorca{ height:106%; top:54%; }
.sw2-map-mallorca.is-on{ opacity:.10; }
@media (max-width:900px){
  .sw2-map{ height:auto; width:150%; top:55%; }
  .sw2-map-mallorca{ width:175%; }
  .sw2-maps{ -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 55%, #000 50%, transparent 100%); mask-image:radial-gradient(ellipse 80% 60% at 50% 55%, #000 50%, transparent 100%); }
}
@media (prefers-reduced-motion: reduce){ .sw2-map, .sw2-map.is-on{ transition:opacity .3s ease; transform:translate(-50%,-50%); } }
.sw2-map-mallorca.is-on{ opacity:.085; }

/* ============================================================
   SAILING DATES — twenty-fifth pass (30 Sep 2026): the split. The island
   map on the left as its own quiet illustration (never behind text); the
   destination switch, season and sailing windows on the right, the windows
   as a calm timetable. Warm ivory, charcoal, orange only as a fine accent.
   ============================================================ */
.sw3{ background:var(--ivory); overflow:hidden; }
.section.tight.sx-dates-section.sw3{ padding-top:clamp(56px,8vh,80px); padding-bottom:clamp(56px,8vh,80px); }
.sw3-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(40px,6vw,96px); align-items:center; }
.sw3-maps{ position:relative; aspect-ratio:1 / 1; width:100%; max-height:560px; }
.sw3-map{ position:absolute; inset:0; margin:auto; width:100%; height:100%; object-fit:contain; max-width:none;
  opacity:0; transform:scale(1.03); transition:opacity .9s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); }
.sw3-map.is-on{ opacity:.78; transform:none; transition:opacity 1.1s ease .12s, transform 1.8s cubic-bezier(.2,.7,.2,1) .12s; }
.sw3-map-mallorca.is-on{ opacity:.72; }
.sw3-body{ text-align:left; max-width:480px; }
.sw3-body > .eyebrow{ margin:0; }
.sw3-line{ margin:14px 0 0 0; max-width:26em; font-size:clamp(15px,1.1vw,16.5px); line-height:1.7; color:var(--muted); }
.sw3-switch{ margin-top:clamp(28px,4.4vh,40px); display:flex; align-items:center; justify-content:flex-start; gap:clamp(20px,2.6vw,36px); }
.sw3-tab{ font-size:clamp(32px,3vw,46px); }
.sw3-tab::after{ left:0; margin-left:0; }
.sw3-dests{ margin-top:clamp(18px,2.8vh,26px); }
.sw3-season{ justify-content:flex-start; }
.sw3-list{ list-style:none; margin:clamp(20px,3vh,28px) 0 0 0; padding:0; border-top:1px solid var(--rule); }
.sw3-list li{ border-bottom:1px solid var(--rule); }
.sw3-date{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto 22px; align-items:baseline; column-gap:18px; padding:14px 2px 13px 0; color:var(--charcoal); }
.sw3-days{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(21px,1.75vw,26px); line-height:1.1; letter-spacing:0.02em; white-space:nowrap; transition:transform .5s cubic-bezier(.3,.7,.2,1); }
.sw3-month{ font-size:10.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); transition:color .35s ease; }
.sw3-arrow{ width:16px; height:16px; align-self:center; color:var(--accent-warm); opacity:0; transform:translateX(-6px); transition:opacity .35s ease, transform .45s cubic-bezier(.3,.7,.2,1); }
.sw3-date::after{ content:''; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .55s cubic-bezier(.3,.7,.2,1); }
.sw3-date:hover .sw3-month, .sw3-date:focus-visible .sw3-month{ color:var(--accent-warm); }
.sw3-date:hover .sw3-arrow, .sw3-date:focus-visible .sw3-arrow{ opacity:1; transform:none; }
.sw3-date:hover .sw3-days, .sw3-date:focus-visible .sw3-days{ transform:translateX(4px); }
.sw3-date:hover::after, .sw3-date:focus-visible::after{ transform:scaleX(1); }
.sw3-date:focus-visible{ outline:none; }
.sw3-pending{ margin:clamp(20px,3vh,28px) 0 0 0; padding:24px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:clamp(18px,1.5vw,21px); color:var(--muted); }
.sw3-alt{ margin:clamp(22px,3.4vh,30px) 0 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; font-size:14px; color:var(--muted); }
/* the two destinations' blocks share one cell so the column never jumps */
.sw3 .sw-dests{ display:grid; }
@media (prefers-reduced-motion: reduce){ .sw3-map, .sw3-map.is-on, .sw3-days, .sw3-arrow{ transition:opacity .3s ease; transform:none; } }
@media (max-width:1100px) and (min-width:901px){
  .sw3-grid{ column-gap:40px; }
}
@media (max-width:900px){
  .section.tight.sx-dates-section.sw3{ padding-top:40px; padding-bottom:48px; }
  .sw3-grid{ grid-template-columns:1fr; row-gap:8px; }
  .sw3-maps{ aspect-ratio:auto; height:min(62vw, 300px); max-height:none; }
  .sw3-body{ max-width:none; }
  .sw3-tab{ font-size:clamp(30px,8.4vw,38px); }
  .sw3-date{ padding:12px 0 11px 0; column-gap:12px; }
  .sw3-days{ font-size:22px; }
}
/* Mallorca (no windows yet): the "to be confirmed" line fills the same
   framed space as Antigua's list, so the section keeps its shape */
.sw3 .sw-dest{ display:flex; flex-direction:column; }
.sw3 .sw3-pending{ flex:1 1 auto; display:flex; align-items:center; }

/* client comment (30 Sep): the map a little smaller, the right-hand content
   given more room and more air between its parts */
@media (min-width:901px){
  .sw3-grid{ max-width:1200px; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); column-gap:clamp(56px,7.5vw,128px); }
  .sw3-maps{ width:86%; max-height:460px; justify-self:center; }
  .sw3-body{ max-width:560px; }
  .sw3-line{ margin-top:18px; }
  .sw3-switch{ margin-top:clamp(40px,6vh,56px); }
  .sw3-dests{ margin-top:clamp(24px,3.6vh,32px); }
  .sw3-list{ margin-top:clamp(28px,4.4vh,40px); }
  .sw3-date{ padding:18px 2px 17px 0; }
  .sw3-pending{ margin-top:clamp(28px,4.4vh,40px); }
  .sw3-alt{ margin-top:clamp(32px,5vh,44px); }
}
@media (max-height:820px) and (min-width:901px){
  .sw3-date{ padding:15px 2px 14px 0; }
  .sw3-switch{ margin-top:36px; }
}
@media (min-width:901px){ .sw3-maps{ width:94%; max-height:500px; } }

/* client comment (30 Sep): header top-left across the section, the line on
   one line; the switch now opens the right column. The section title sits
   at the site's 40px, like every other section. */
.section.tight.sx-dates-section.sw3{ padding-top:40px; }
.sw3-head{ grid-column:1 / -1; margin-bottom:clamp(36px,5.6vh,56px); }
.sw3-head .eyebrow{ margin:0; }
.sw3-head .sw3-line{ margin:16px 0 0 0; max-width:none; }
@media (min-width:901px){
  .sw3-grid{ align-items:center; row-gap:0; }
  .sw3-head .sw3-line{ white-space:nowrap; font-size:clamp(15px,1.2vw,17px); }
  .sw3-maps{ justify-self:start; }
  .sw3-switch{ margin-top:0; }
}
@media (max-width:1060px) and (min-width:901px){ .sw3-head .sw3-line{ white-space:normal; } }
@media (max-width:860px){ .section.tight.sx-dates-section.sw3{ padding-top:32px; } }
@media (max-width:900px){
  .sw3-head{ margin-bottom:8px; }
  .sw3-switch{ margin-top:clamp(20px,5vw,28px); }
}

/* 26th pass: "Can't see your dates?" matches the supporting line's size */
.sw3-alt > span:first-child{ font-size:clamp(15px,1.1vw,16.5px); line-height:1.7; color:var(--muted); }
@media (min-width:901px){ .sw3-alt > span:first-child{ font-size:clamp(15px,1.2vw,17px); } }
.sw3-alt{ align-items:baseline; }

/* 27th pass (Contact, colour only; form fields and flow untouched):
   group headings in the sitewide orange, ticked boxes in orange */
#contactForm .contact-group .eyebrow{ color:var(--accent-warm); }
#contactForm input[type="checkbox"]{ accent-color:var(--accent-warm) !important; }

/* 31st pass: personal thank-you after an enquiry is sent */
.section.ct-sent{ min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center; padding-top:140px !important; padding-bottom:96px; }
.ct-thanks{ width:100%; max-width:620px; margin:0 auto; text-align:center; outline:none; opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.ct-thanks.is-in{ opacity:1; transform:none; }
.ct-eyebrow{ margin:0; }
.ct-title{ margin:18px 0 0 0; }
.ct-text{ margin:22px auto 0 auto; max-width:30em; text-wrap:pretty; }
.ct-email{ color:var(--charcoal); white-space:nowrap; }
.ct-recap{ margin:44px auto 0 auto; max-width:460px; text-align:left; }
.ct-recap-h{ margin:0 0 12px 0; font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); text-align:center; }
.ct-recap dl{ margin:0; border-top:1px solid rgba(38,36,31,0.14); }
.ct-row{ display:grid; grid-template-columns:132px 1fr; gap:16px; padding:15px 0; border-bottom:1px solid rgba(38,36,31,0.14); align-items:baseline; }
.ct-row dt{ font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-warm); }
.ct-row dd{ margin:0; font-size:15px; line-height:1.6; color:var(--charcoal); }
.ct-sign{ margin:44px 0 0 0; display:flex; flex-direction:column; align-items:center; gap:16px; font-family:'Raleway',sans-serif; font-weight:300; font-style:italic; font-size:20px; color:var(--charcoal); }
.ct-sign-rule{ display:block; width:36px; height:1px; background:var(--accent-warm); }
@media (max-width:600px){
  .section.ct-sent{ padding-top:120px !important; align-items:flex-start; }
  .ct-row{ grid-template-columns:1fr; gap:4px; }
  .ct-email{ white-space:normal; word-break:break-word; }
}
@media (prefers-reduced-motion:reduce){ .ct-thanks{ transition:none; transform:none; } }

/* ============================================================
   32nd pass: A Day Aboard as a one-screen, self-playing reel
   (renderDayReel / initDayReel). Replaces the pinned scroll arc.
   ============================================================ */
.dr{ max-width:1160px; margin:0 auto; }
.dr-stage{ position:relative; overflow:hidden; height:clamp(380px,58vh,580px); background:#1d2521; isolation:isolate; touch-action:pan-y; }
.dr-slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.2s ease; z-index:0; }
.dr-slide img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); }
.dr-slide.is-on{ opacity:1; z-index:1; }
.dr-slide.is-on img{ animation:drDrift0 7.8s cubic-bezier(.25,.1,.25,1) both; }
.dr-slide-1.is-on img{ animation-name:drDrift1; }
.dr-slide-2.is-on img{ animation-name:drDrift2; }
@keyframes drDrift0{ from{ transform:scale(1.12) translate3d(-1.4%,0.6%,0); } to{ transform:scale(1.02) translate3d(0,0,0); } }
@keyframes drDrift1{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.11) translate3d(1.2%,-0.8%,0); } }
@keyframes drDrift2{ from{ transform:scale(1.12) translate3d(1.4%,0.4%,0); } to{ transform:scale(1.03) translate3d(-0.4%,0,0); } }
.is-paused .dr-slide.is-on img{ animation-play-state:paused; }
.dr-shade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(14,20,18,0.62) 0%, rgba(14,20,18,0.34) 38%, rgba(14,20,18,0) 66%),
             linear-gradient(0deg, rgba(14,20,18,0.5) 0%, rgba(14,20,18,0) 46%); }
.dr-copy{ position:absolute; z-index:3; left:clamp(28px,4.4vw,64px); bottom:clamp(28px,4.6vw,60px); width:min(520px, calc(100% - 56px)); display:grid; }
.dr-text{ grid-area:1 / 1; align-self:end; pointer-events:none; }
.dr-text > *{ opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .35s ease; }
.dr-text.is-on > *{ opacity:1; transform:none; transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.dr-text.is-on .dr-title{ transition-delay:.12s; }
.dr-text.is-on .dr-body{ transition-delay:.24s; }
.dr-time{ margin:0; font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-warm-on-dark); }
.dr-title{ margin:12px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(30px,3.5vw,48px); line-height:1.12; color:var(--ivory); text-wrap:balance; }
.dr-body{ margin:14px 0 0 0; font-size:16px; line-height:1.65; color:rgba(250,247,240,0.88); max-width:28em; text-wrap:pretty; }
.dr-ctrl{ position:absolute; z-index:4; right:clamp(20px,3vw,40px); bottom:clamp(24px,4vw,52px); display:flex; align-items:center; gap:10px; }
.dr-count{ display:inline-flex; align-items:center; gap:10px; margin-right:10px; font-size:12px; font-weight:600; letter-spacing:0.16em; color:rgba(250,247,240,0.8); font-variant-numeric:tabular-nums; }
.dr-count-sep{ display:block; width:22px; height:1px; background:rgba(250,247,240,0.5); }
.dr-btn{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(250,247,240,0.45); background:rgba(14,20,18,0.18); color:var(--ivory); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .25s ease, border-color .25s ease; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.dr-btn:hover{ background:rgba(250,247,240,0.16); border-color:rgba(250,247,240,0.9); }
.dr-btn:focus-visible{ outline:2px solid var(--accent-warm-on-dark); outline-offset:2px; }
.dr-btn svg{ width:18px; height:18px; }
.dr-i-play{ display:none; }
.is-user-paused .dr-i-play{ display:block; }
.is-user-paused .dr-i-pause{ display:none; }

/* the arc of the day */
.dr-rail{ position:relative; height:clamp(88px,9vw,112px); margin:clamp(22px,3vw,34px) clamp(10px,3vw,40px) 0; }
.dr-arc{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dr-arc-track{ fill:none; stroke:rgba(38,36,31,0.18); stroke-width:1; }
.dr-arc-fill{ fill:none; stroke:var(--accent-warm); stroke-width:1.5; stroke-dasharray:1 1; stroke-dashoffset:1; }
.dr-sun{ position:absolute; z-index:2; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--accent-warm); box-shadow:0 0 0 6px rgba(168,77,42,0.14), 0 0 22px 4px rgba(214,140,90,0.35); pointer-events:none; }
.dr-times{ position:absolute; inset:0; }
.dr-t{ position:absolute; z-index:3; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; background:none; border:0; padding:10px 8px 0; cursor:pointer; font-family:inherit; }
.dr-t-dot{ width:9px; height:9px; border-radius:50%; background:var(--sand); border:1px solid rgba(38,36,31,0.35); transition:background .3s ease, border-color .3s ease, transform .3s ease; }
.dr-t.is-past .dr-t-dot{ background:var(--accent-warm); border-color:var(--accent-warm); }
.dr-t-time{ margin-top:12px; font-size:11.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; transition:color .3s ease; }
.dr-t:hover .dr-t-time, .dr-t.is-on .dr-t-time{ color:var(--charcoal); }
.dr-t:hover .dr-t-dot{ transform:scale(1.25); }
.dr-t.is-on .dr-t-time{ color:var(--accent-warm); }
.dr-t:focus-visible{ outline:none; }
.dr-t:focus-visible .dr-t-time{ text-decoration:underline; text-underline-offset:4px; }

.dr-tomorrow{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 28px; margin-top:clamp(18px,2.6vw,30px); }
.dr-tomorrow-line{ margin:0; font-family:'Raleway',sans-serif; font-style:italic; font-weight:300; font-size:clamp(17px,1.4vw,20px); color:var(--charcoal); }

@media (max-width:700px){
  .dr-stage{ height:auto; aspect-ratio:4 / 5; max-height:78vh; }
  .dr-shade{ background:linear-gradient(0deg, rgba(14,20,18,0.72) 0%, rgba(14,20,18,0.38) 42%, rgba(14,20,18,0) 70%); }
  .dr-copy{ left:22px; right:22px; width:auto; bottom:84px; }
  .dr-title{ font-size:clamp(28px,8vw,36px); }
  .dr-body{ font-size:15px; }
  .dr-ctrl{ left:22px; right:22px; bottom:22px; justify-content:flex-end; }
  .dr-count{ margin-right:auto; }
  .dr-btn{ width:38px; height:38px; }
  .dr-rail{ margin:18px 4px 0; height:84px; }
  .dr-t{ padding:10px 2px 0; }
  .dr-t-time{ font-size:10px; letter-spacing:0.04em; margin-top:10px; }
  .dr-tomorrow{ flex-direction:column; gap:16px; margin-top:14px; }
}
@media (prefers-reduced-motion:reduce){
  .dr-slide{ transition:opacity .3s ease; }
  .dr-slide.is-on img{ animation:none; transform:none; }
  .dr-text > *, .dr-text.is-on > *{ transition:opacity .3s ease; transform:none; }
}
/* 32nd pass fixes: the eyebrow shows again above the reel (the pinned
   stage that carried its own copy is no longer rendered); dots sit exactly
   on the arc; clearer time on bright photos; phones label only the
   current time so the arc never crowds. */
html.js-anim #day-aboard > .section-head{ display:block; }
#day-aboard > .section-head{ margin-bottom:clamp(22px,3vw,32px); }
.dr-t{ transform:translate(-50%, -14.5px); }
.dr-time{ text-shadow:0 1px 14px rgba(10,14,12,0.55); }
.dr-title, .dr-body{ text-shadow:0 1px 18px rgba(10,14,12,0.28); }
@media (max-width:700px){
  .dr-shade{ background:linear-gradient(0deg, rgba(14,20,18,0.8) 0%, rgba(14,20,18,0.52) 48%, rgba(14,20,18,0) 82%); }
  .dr-rail{ height:70px; margin:20px 14px 0; }
  .dr-t-time{ opacity:0; transform:translateY(-3px); transition:opacity .35s ease, transform .35s ease, color .3s ease; font-size:11px; letter-spacing:0.1em; }
  .dr-t.is-on .dr-t-time{ opacity:1; transform:none; }
  .dr-t{ padding:10px 10px 0; }
  .dr-tomorrow{ margin-top:22px; }
}

.dr-arc-fill{ stroke-dasharray:none; stroke-dashoffset:0; stroke-linecap:round; }

/* 33rd pass (client: "the animation is not working properly", title too
   high, "Tomorrow?" above the button) */
html.js-anim .section.exp-the.day-at-sea{ padding-top:40px; }
#day-aboard > .section-head{ margin-bottom:28px; }
/* outgoing photo keeps drifting while it fades, instead of snapping back */
.dr-slide.is-out{ opacity:0; z-index:0; }
.dr-slide.is-out img{ animation:drDrift0 7.8s cubic-bezier(.25,.1,.25,1) both; }
.dr-slide-1.is-out img{ animation-name:drDrift1; }
.dr-slide-2.is-out img{ animation-name:drDrift2; }
/* words: the old ones leave first, then the new ones rise in — no overlap */
.dr-text > *{ transition:opacity .3s ease, transform .3s ease; transition-delay:0s; }
.dr-text.is-on .dr-time{ transition-delay:.38s; }
.dr-text.is-on .dr-title{ transition-delay:.5s; }
.dr-text.is-on .dr-body{ transition-delay:.62s; }
/* "Tomorrow? We'll decide together." sits above the button */
.dr-tomorrow{ flex-direction:column; gap:18px; margin-top:clamp(20px,2.6vw,30px); }
.dr-tomorrow-line{ text-align:center; }
@media (prefers-reduced-motion:reduce){
  .dr-slide.is-out img{ animation:none; }
}
/* dissolve: the new photo fades in over the old one (the old stays fully
   visible underneath), so there's no dark dip between moments */
.dr-slide.is-out{ opacity:1; z-index:0; transition:none; }
.dr-slide.is-on{ z-index:1; }
/* keep the whole day (title, photo, arc, Tomorrow + button) on one laptop screen */
@media (min-width:701px){
  .dr-stage{ height:clamp(340px,calc(100vh - 444px),560px); }
  .dr-rail{ height:clamp(80px,7.6vw,100px); margin-top:clamp(18px,2.4vw,28px); }
  .dr-tomorrow{ gap:14px; margin-top:clamp(14px,2vw,22px); }
}
/* 34th pass (client: "this should fit on one line"): each moment's title and
   sentence sit on one line on laptops and desktops; the counter and arrows
   move to the photo's top-right corner so the words have the full width */
@media (min-width:701px){
  .dr-copy{ width:calc(100% - 2 * clamp(28px,4.4vw,64px)); }
  .dr-title{ white-space:nowrap; text-wrap:nowrap; }
  .dr-body{ max-width:none; white-space:nowrap; text-wrap:nowrap; }
  .dr-ctrl{ top:clamp(20px,2.6vw,32px); bottom:auto; right:clamp(20px,2.6vw,32px); }
  .dr-shade{ background:linear-gradient(90deg, rgba(14,20,18,0.6) 0%, rgba(14,20,18,0.3) 45%, rgba(14,20,18,0) 75%),
                        linear-gradient(0deg, rgba(14,20,18,0.55) 0%, rgba(14,20,18,0) 50%),
                        linear-gradient(180deg, rgba(14,20,18,0.28) 0%, rgba(14,20,18,0) 22%); }
}
@media (min-width:701px) and (max-width:840px){ .dr-body{ white-space:normal; text-wrap:pretty; } }
/* the button has gone, so the photo takes back that height */
@media (min-width:701px){ .dr-stage{ height:clamp(360px,calc(100vh - 392px),600px); } }

/* 35th pass: phone with its country code */
.ct-phone{ display:grid; grid-template-columns:104px minmax(0,1fr); gap:10px; }
.ct-cc{ position:relative; display:block; }
.ct-plus{ position:absolute; left:16px; top:50%; transform:translateY(-52%); font-size:15px; color:var(--charcoal); pointer-events:none; }
.planner-field .ct-cc input{ padding-left:30px; }

/* 36th pass: "What happens next" in the thank-you */
.ct-next{ margin:44px auto 0 auto; max-width:460px; text-align:left; }
.ct-steps{ list-style:none; margin:0; padding:0; position:relative; }
.ct-step{ position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:18px; padding:0 0 22px 0; }
.ct-step:last-child{ padding-bottom:0; }
.ct-step:not(:last-child)::before{ content:""; position:absolute; left:16.5px; top:36px; bottom:2px; width:1px; background:rgba(38,36,31,0.16); }
.ct-step-mark{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(168,77,42,0.55); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:0.08em; color:var(--accent-warm); background:var(--ivory); font-variant-numeric:tabular-nums; }
.ct-step.is-done .ct-step-mark{ background:var(--accent-warm); border-color:var(--accent-warm); color:var(--ivory); }
.ct-step-mark svg{ width:16px; height:16px; }
.ct-step-text{ padding-top:6px; }
.ct-step-h{ margin:0; font-size:15px; font-weight:600; line-height:1.45; color:var(--charcoal); }
.ct-step-tag{ display:inline-block; margin-left:8px; vertical-align:2px; font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-warm); }
.ct-step-b{ margin:6px 0 0 0; font-size:14.5px; line-height:1.65; color:var(--muted); }
.ct-step.is-done .ct-step-h, .ct-step.is-done .ct-step-b{ color:var(--muted); }

/* 37th pass: Experience closing band in charcoal */
.section.xc-close{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(112px,13vw,168px) 24px; text-align:center;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(194,130,106,0.10), rgba(194,130,106,0) 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(0,0,0,0.35), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #2A2823 0%, #23211D 55%, #1D1B18 100%); color:var(--ivory); }
.xc-frame{ position:absolute; inset:clamp(14px,2.2vw,28px); border:1px solid rgba(250,247,240,0.09); pointer-events:none; z-index:0; }
.xc-inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }
.xc-rule{ display:block; width:44px; height:1px; margin:0 auto 34px auto; background:var(--accent-warm-on-dark); }
.xc-h{ color:var(--ivory); font-size:clamp(34px,4.6vw,60px); font-weight:200; letter-spacing:-0.01em; }
.xc-h .ws-accent{ color:var(--accent-warm-on-dark); font-style:italic; font-weight:200; }
.xc-body{ margin:26px auto 0 auto; max-width:34em; font-size:clamp(15.5px,1.2vw,17px); line-height:1.8; color:rgba(250,247,240,0.7); text-wrap:balance; }
.xc-btn{ margin-top:40px; }
@media (max-width:700px){ .xc-rule{ margin-bottom:26px; } .xc-body{ margin-top:20px; } .xc-btn{ margin-top:32px; } }
/* 38th pass (client: "reduce the size slightly"): the charcoal close a touch smaller */
.section.xc-close{ padding:clamp(88px,10vw,128px) 24px; }
.xc-h{ font-size:clamp(30px,3.8vw,50px); }
.xc-rule{ margin-bottom:28px; }
.xc-body{ margin-top:22px; font-size:clamp(15px,1.1vw,16.5px); }
.xc-btn{ margin-top:34px; }
/* 39th pass: charcoal close — less space inside the frame, and the button
   matches the rounded orange buttons in Destinations (.sqp-ctas .sq-pill) */
.section.xc-close{ padding:clamp(64px,7vw,92px) 24px; }
.xc-btn{ border-radius:999px; padding:14px 34px; font-size:12px; letter-spacing:0.1em; margin-top:30px; }
@media (max-width:700px){ .xc-btn{ padding:13px 28px; font-size:11.5px; } }
/* 40th pass (client: "reduce this word slightly"): closing headline a touch smaller */
.xc-h{ font-size:clamp(28px,3.3vw,44px); }
@media (max-width:700px){ .xc-h{ font-size:26px; } }

/* 41st pass: Sailing Dates' Talk to Solace as the Destinations pill */
.sw3-alt{ align-items:center; }
.sw3-alt-btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 34px; border:1px solid var(--accent-warm); border-radius:999px; background:var(--accent-warm); color:var(--ivory); font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; transition:background-color .3s ease, border-color .3s ease; }
.sw3-alt-btn:hover{ background:#8A3F22; border-color:#8A3F22; color:var(--ivory); }
.sw3-alt-btn:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:3px; }
@media (max-width:700px){ .sw3-alt-btn{ padding:13px 24px; font-size:11px; } }
.sw3-alt-btn{ line-height:1.2; }
/* phones: Experience details under the dates matches the outline pill in Destinations */
@media (max-width:900px){
  .sw3 .sw2-more-btn{ display:inline-flex; align-items:center; justify-content:center; padding:13px 24px; border:1px solid rgba(168,77,42,0.55); border-radius:999px; background:transparent; color:var(--accent-warm); font-size:11px; font-weight:600; letter-spacing:0.1em; line-height:1.2; text-transform:uppercase; }
  .sw3 .sw2-more-btn:hover{ background:rgba(168,77,42,0.07); border-color:var(--accent-warm); }
  .sw3 .sw2-more{ margin-top:14px; }
}

/* 42nd pass: footer email sign-up */
.footer-inner.has-news{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); grid-template-areas:"brand news" "links news"; column-gap:64px; row-gap:28px; align-items:start; }
.footer-inner.has-news .footer-brand{ grid-area:brand; }
.footer-inner.has-news .footer-links{ grid-area:links; align-self:end; }
.footer-news{ grid-area:news; justify-self:end; width:100%; }
.footer-news-h{ margin:0; font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-warm); }
.footer-news-line{ margin:12px 0 0 0; font-size:15px; line-height:1.6; color:var(--charcoal); }
.footer-news-form{ margin-top:18px; display:flex; gap:10px; }
.footer-news-form input{ flex:1 1 auto; min-width:0; height:46px; padding:0 20px; border:1px solid rgba(38,36,31,0.22); border-radius:999px; background:var(--ivory); font-family:'Montserrat',sans-serif; font-size:14px; color:var(--charcoal); transition:border-color .25s ease; }
.footer.sand-footer .footer-news-form input{ background:#F7F2E8; }
.footer-news-form input::placeholder{ color:#8C8577; }
.footer-news-form input:focus{ outline:none; border-color:var(--accent-warm); }
.footer-news-form.is-error input{ border-color:#A33A2A; }
.footer-news-btn{ flex:0 0 auto; height:46px; padding:0 26px; border:1px solid var(--accent-warm); border-radius:999px; background:var(--accent-warm); color:var(--ivory); font-family:inherit; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:background-color .3s ease, border-color .3s ease; }
.footer-news-btn:hover{ background:#8A3F22; border-color:#8A3F22; }
.footer-news-btn:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:3px; }
.footer-news-note{ margin:10px 0 0 20px; font-size:11.5px; color:var(--muted); }
.footer-news-note.is-error{ color:#A33A2A; }
.footer-news-done{ margin:18px 0 0 0; display:flex; align-items:center; gap:12px; font-size:15px; color:var(--charcoal); }
.footer-news-tick{ width:30px; height:30px; border-radius:50%; background:var(--accent-warm); color:var(--ivory); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.footer-news-tick svg{ width:15px; height:15px; }
@media (max-width:860px){
  .footer-inner.has-news{ grid-template-columns:1fr; grid-template-areas:"brand" "news" "links"; row-gap:36px; }
  .footer-news{ justify-self:stretch; max-width:460px; }
}
@media (max-width:420px){
  .footer-news-btn{ padding:0 18px; font-size:11px; }
}
@media (max-width:860px){ .footer-inner.has-news{ grid-template-columns:minmax(0,1fr); } .footer-news{ min-width:0; } }
.footer-news-form input{ width:100%; }
/* 43rd pass (client: "the gap on top of the title is too big"): less space
   above the headline in the charcoal close, bottom trimmed to keep balance */
.section.xc-close{ padding:clamp(48px,4.6vw,64px) 24px clamp(56px,5.2vw,72px); }
.xc-rule{ margin-bottom:22px; }
@media (max-width:700px){ .section.xc-close{ padding:52px 22px 56px; } .xc-rule{ margin-bottom:20px; } }
/* 44th pass (client: "make Pressure Drop slightly smaller") */
.pd-title{ font-size:clamp(30px,3vw,48px); }
@media (max-width:900px){ .pd-title{ font-size:clamp(26px,7vw,34px); } }
/* 45th pass (client: "remove those counting number from a day aboard"):
   the 01 — 06 counter on the photo is hidden; the arrows and pause stay */
.dr-count{ display:none; }
/* 46th pass (client): no frame line around the charcoal close, and
   "take her" plain white like the rest of the headline */
.xc-frame{ display:none; }
.xc-h .ws-accent{ color:var(--ivory); font-style:normal; font-weight:inherit; }

/* 47th pass: footer layout — sign-up band across the top, then one row */
.footer.fx{ padding-top:clamp(52px,5.4vw,72px); }
.fx-news{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); align-items:center; column-gap:clamp(40px,6vw,96px); row-gap:20px; padding-bottom:clamp(40px,4.4vw,56px); border-bottom:1px solid var(--rule); }
.fx-news-line{ margin:12px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.9vw,26px); line-height:1.3; color:var(--charcoal); text-wrap:balance; }
.fx-news .footer-news-form{ margin-top:0; }
.fx-news .footer-news-note{ margin:10px 0 0 20px; }
.fx-news .footer-news-done{ margin:0; }
.fx-row{ max-width:1360px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px 40px; padding:clamp(30px,3vw,40px) 0; }
.fx-row .footer-links{ display:flex; gap:36px; flex-wrap:wrap; }
.footer.fx .footer-bottom{ margin-top:0; }
@media (max-width:860px){
  .fx-news{ grid-template-columns:minmax(0,1fr); }
  .fx-news-line{ font-size:21px; }
  .fx-row{ flex-direction:column; align-items:flex-start; gap:22px; }
  .fx-row .footer-links{ gap:18px 28px; }
}
/* 48th pass (client: "remove that line"): no orange rule above the closing headline */
.xc-rule{ display:none; }
.section.xc-close{ padding-top:clamp(56px,5.2vw,72px); }
@media (max-width:700px){ .section.xc-close{ padding-top:56px; } }
/* 49th pass (client: "this is too big"): footer sign-up line back to body size */
.fx-news-line{ font-family:'Montserrat',sans-serif; font-weight:400; font-size:16px; line-height:1.6; margin-top:10px; }
@media (max-width:860px){ .fx-news-line{ font-size:15.5px; } }
/* 50th pass (client: "this in orange"): hero eyebrows in the site's orange —
   the lighter terracotta used on dark backgrounds, so it stays legible on the photos */
.page-hero-eyebrow{ color:var(--accent-warm-on-dark); font-weight:600; text-shadow:0 1px 12px rgba(10,14,12,0.35); }

/* 51st pass: Advisory lists as the Ownership service list */
.service-list.adv-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 32px; max-width:520px; margin:18px 0 26px 0; }
@media (max-width:480px){ .service-list.adv-list{ grid-template-columns:1fr!important; max-width:none; } }

/* 53rd pass (client: "can you make that on one line"): the workshop note sits
   on one line, its size fitted to the column (container units); where the
   column is too narrow to keep it readable (smaller laptops, tablets, phones)
   it wraps as before */
#pre-purchase .adv-list{ }
#pre-purchase .adv-list + .adv-outro, #pre-purchase .adv-outro{ max-width:none; }
#pre-purchase .adv-outro{ font-size:min(16px, calc(100cqw / 39.6)); }
@container (min-width:530px){ #pre-purchase .adv-outro{ white-space:nowrap; } }
@container (max-width:529px){ #pre-purchase .adv-outro{ font-size:15px; } }

#pre-purchase .adv-outro{ }
#pre-purchase div:has(> .adv-outro){ container-type:inline-size; }

/* 54th pass (client: the workshop "Preferred timing" choices showed in white):
   the dropdown and its options always use dark text on the light field, even
   when the visitor's device is in dark mode */
#ppWhen{ color-scheme:light; color:var(--charcoal); background-color:var(--offwhite); -webkit-text-fill-color:var(--charcoal); }
#ppWhen option{ color:var(--charcoal); background-color:#FFFFFF; }
#ppWhen option:checked{ color:var(--charcoal); background-color:var(--sand); }

/* 55th pass: Advisory pre-purchase, compact — everything fits in the right
   column beside the photo */
#pre-purchase.exp-type{ padding:40px 0; }
#pre-purchase .split-text{ padding:52px 72px; }
#pre-purchase .split-text h3{ margin-bottom:14px; }
#pre-purchase .split-text .reveal-d2 p{ margin-bottom:12px; font-size:15.5px; line-height:1.7; }
#pre-purchase .split-text .reveal-d3 > p:first-child{ margin-top:14px !important; margin-bottom:0; }
#pre-purchase .service-list.adv-list{ gap:9px 28px; margin:12px 0 14px 0; }
#pre-purchase .adv-list .service-item span:last-child{ font-size:14px; line-height:1.45; padding-top:3px; }
#pre-purchase .adv-list .service-check{ width:20px; height:20px; }
#pre-purchase .adv-outro{ margin:0; }
.pp-buy{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; margin-top:22px; padding-top:20px; border-top:1px solid var(--rule); }
.pp-price{ margin:0 !important; display:flex; align-items:baseline; gap:10px; }
.pp-price strong{ font-family:'Raleway',sans-serif; font-weight:300; font-size:28px; color:var(--charcoal); }
.pp-price span{ font-size:13.5px; color:var(--muted); }
.pp-buy .btn{ padding:14px 26px; }
.pp-form-body{ display:none; }
.pp-form-body.is-open{ display:block; padding-top:0; }
@media (max-width:900px){
  #pre-purchase .split-text{ padding:40px 22px; }
}
/* 56th pass (client: Build Advisory — "this can be aligned and take as much
   space as the text on top of it"): the Owner Advisory Library paragraph
   runs to the same width as the paragraph above */
#build-advisory .split-text > div.reveal-d3 p{ max-width:660px; }
/* pre-purchase: paragraphs use the full column width too (fewer lines) */
#pre-purchase .split-text .reveal-d2 p{ max-width:none; }
@media (min-width:901px) and (max-width:1360px){ #pre-purchase .split-text{ padding:44px 56px; } }

/* 57th pass: Build Advisory compact — everything in the text column */
#build-advisory.exp-type{ padding:40px 0; }
#build-advisory .split-text{ padding:52px 72px; }
#build-advisory .split-text h3{ margin-bottom:14px; }
#build-advisory .split-text > div.reveal-d2 p, #build-advisory .split-text > div.reveal-d3 p{ max-width:none; font-size:15.5px; line-height:1.7; margin-bottom:12px; }
#build-advisory .split-text > div.reveal-d3 p.stg-label{ margin:18px 0 14px 0; font-size:15px; font-weight:600; color:var(--accent-warm); line-height:1.4; }
.stg-row{ position:relative; display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:0 6px; }
.stg-row::before{ content:""; position:absolute; top:10px; left:10%; right:10%; height:1px; background:var(--accent-warm); opacity:0.4; }
.stg-b{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; background:none; border:0; padding:0 2px; cursor:pointer; font-family:inherit; text-align:center; }
.stg-n{ width:21px; height:21px; border-radius:50%; border:1px solid var(--accent-warm); background:var(--ivory); color:var(--accent-warm); font-size:10px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; transition:background-color .25s ease, color .25s ease; }
.stg-t{ font-family:'Raleway',sans-serif; font-size:13.5px; font-weight:400; line-height:1.3; color:var(--charcoal); transition:color .25s ease; }
.stg-b.is-on .stg-n{ background:var(--accent-warm); color:var(--ivory); }
.stg-b.is-on .stg-t{ color:var(--accent-warm); }
.stg-b:focus-visible{ outline:none; }
.stg-b:focus-visible .stg-t{ text-decoration:underline; text-underline-offset:4px; }
#build-advisory .split-text > div.reveal-d3 p.stg-cap{ margin:14px 0 0 0; min-height:3.4em; font-size:14.5px; line-height:1.7; color:var(--muted); text-align:center; transition:opacity .14s ease; }
.stg-cap.is-swap{ opacity:0; }
.pp-buy-stack{ align-items:flex-end; justify-content:space-between; flex-wrap:nowrap; gap:24px; margin-top:16px; }
#build-advisory .split-text > div.reveal-d3 .pp-price-stack{ flex-direction:column; align-items:flex-start; gap:4px; margin:0; }
.pp-price-stack strong{ font-size:22px; }
.pp-price-stack span{ font-size:13px; line-height:1.55; max-width:30em; }
.pp-buy-stack .btn{ flex:0 0 auto; padding:14px 26px; }
@media (min-width:901px) and (max-width:1360px){ #build-advisory .split-text{ padding:44px 56px; } }
@media (max-width:900px){
  #build-advisory .split-text{ padding:40px 22px; }
  .pp-buy-stack{ flex-wrap:wrap; }
  .stg-t{ font-size:11.5px; }
}
#build-advisory .split-text > div.reveal-d3 > p:first-child{ margin-top:0; }

/* 58th pass: Commissioning & Handover and Technical Advisory, compact like
   Pre-Purchase and Build — everything in the text column beside the photo */
#commissioning.exp-type, #technical-advisory.exp-type{ padding:40px 0; }
#commissioning .split-text, #technical-advisory .split-text{ padding:52px 72px; }
#commissioning .split-text h3, #technical-advisory .split-text h3{ margin-bottom:14px; }
#commissioning .split-text .reveal-d2 p, #technical-advisory .split-text .reveal-d2 p{ max-width:none; margin-bottom:12px; font-size:15.5px; line-height:1.7; }
#commissioning .split-text .reveal-d3 > p:first-child, #technical-advisory .split-text .reveal-d3 > p:first-child{ margin-top:14px !important; margin-bottom:0; }
#commissioning .service-list.adv-list, #technical-advisory .service-list.adv-list{ gap:9px 28px; margin:12px 0 4px 0; }
#commissioning .adv-list .service-item span:last-child, #technical-advisory .adv-list .service-item span:last-child{ font-size:14px; line-height:1.45; padding-top:3px; }
#commissioning .adv-list .service-check, #technical-advisory .adv-list .service-check{ width:20px; height:20px; }
#commissioning .pp-price-stack, #technical-advisory .pp-price-stack{ flex-direction:column; align-items:flex-start; gap:4px; margin:0 !important; }
#commissioning .pp-buy, #technical-advisory .pp-buy{ margin-top:20px; }
@media (min-width:901px) and (max-width:1360px){ #commissioning .split-text, #technical-advisory .split-text{ padding:44px 56px; } }
@media (max-width:900px){ #commissioning .split-text, #technical-advisory .split-text{ padding:40px 22px; } }
#technical-advisory .split-text > div.reveal-d2 p, #commissioning .split-text > div.reveal-d2 p{ max-width:none; }

/* ============================================================
   59th pass: Advisory — contained editorial layout. The four services sit
   in a centred 1240px grid: a smaller portrait photo (5 of 12 columns,
   4:5, never taller than 540px) beside the text (7 of 12), alternating
   sides, each numbered 01–04 and listed in a quiet index under the hero.
   ============================================================ */
.adv-index{ display:flex; justify-content:center; flex-wrap:wrap; gap:0; background:var(--ivory); border-bottom:1px solid var(--rule); padding:0 24px; }
.adv-index-link{ display:inline-flex; align-items:baseline; gap:12px; padding:26px clamp(18px,2.6vw,40px); font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--charcoal); position:relative; transition:color .25s ease; }
.adv-index-link + .adv-index-link::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:16px; transform:translateY(-50%); background:var(--rule); }
.adv-index-n{ font-family:'Raleway',sans-serif; font-size:12px; letter-spacing:0.08em; color:var(--accent-warm); }
.adv-index-link:hover{ color:var(--accent-warm); }
.adv-svc{ scroll-margin-top:68px; }
#page .adv-svc.exp-type{ padding:clamp(56px,6.2vw,92px) 0; }
#page .adv-svc .split{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(48px,6.5vw,104px); align-items:center; }
#page .adv-svc .split.reverse{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
#page .adv-svc .split-img{ min-height:0; aspect-ratio:4 / 5; max-height:540px; width:100%; align-self:center; }
#page .adv-svc .split-text{ padding:0; }
#page .adv-svc .split-index{ display:flex; align-items:center; gap:14px; }
#page .adv-svc .split-index::before{ font-family:'Raleway',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.08em; color:var(--muted); }
#page .adv-svc .split-index::after{ content:none; }
#pre-purchase.adv-svc .split-index::before{ content:"01"; }
#build-advisory.adv-svc .split-index::before{ content:"02"; }
#commissioning.adv-svc .split-index::before{ content:"03"; }
#technical-advisory.adv-svc .split-index::before{ content:"04"; }
#page .adv-svc .pp-form-body{ max-width:1240px; }
@media (min-width:901px) and (max-width:1100px){
  #page .adv-svc .split{ padding:0 40px; column-gap:44px; grid-template-columns:minmax(0,4fr) minmax(0,6fr); }
  #page .adv-svc .split.reverse{ grid-template-columns:minmax(0,6fr) minmax(0,4fr); }
}
@media (max-width:900px){
  .adv-index{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding:0 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .adv-index::-webkit-scrollbar{ display:none; }
  .adv-index-link{ padding:20px 14px; white-space:nowrap; font-size:10.5px; }
  #page .adv-svc.exp-type{ padding:44px 0; }
  #page .adv-svc .split, #page .adv-svc .split.reverse{ grid-template-columns:minmax(0,1fr); padding:0 22px; row-gap:28px; }
  #page .adv-svc .split-img{ aspect-ratio:16 / 11; max-height:none; }
  #page .adv-svc .split-text{ padding:0; }
}
/* Why independent follows the same contained grid, with even padding */
#page .section.adv-why{ padding:clamp(64px,7vw,104px) 0; }
#page .adv-why .split{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(48px,6.5vw,104px); align-items:center; }
#page .adv-why .split-img{ min-height:0; aspect-ratio:4 / 5; max-height:540px; width:100%; }
#page .adv-why .split-img img{ object-position:31% 50%; }
#page .adv-why .split-text{ padding:0; }
#page .adv-why .split-text p{ max-width:none; }
@media (min-width:901px) and (max-width:1100px){ #page .adv-why .split{ padding:0 40px; column-gap:44px; grid-template-columns:minmax(0,6fr) minmax(0,4fr); } }
@media (max-width:900px){
  #page .section.adv-why{ padding:48px 0; }
  #page .adv-why .split{ grid-template-columns:minmax(0,1fr); padding:0 22px; row-gap:28px; }
  #page .adv-why .split-img{ aspect-ratio:16 / 11; max-height:none; }
}
@media (max-width:900px){
  .adv-index{ display:grid; grid-template-columns:1fr 1fr; overflow:visible; padding:0; }
  .adv-index-link{ white-space:normal; padding:16px 18px; font-size:10px; letter-spacing:0.16em; line-height:1.4; border-top:1px solid var(--rule); }
  .adv-index-link:nth-child(odd){ border-right:1px solid var(--rule); }
  .adv-index-link + .adv-index-link::before{ content:none; }
  .adv-index-link:nth-child(-n+2){ border-top:0; }
}

/* 60th pass: Why independent advisory — statement + principles */
.section.why-v2{ background:linear-gradient(180deg,#24221E 0%,#1E1C19 100%); color:var(--ivory); padding:clamp(72px,8vw,120px) 0; }
.why-v2-grid{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(56px,7vw,120px); align-items:start; }
.why-v2-head .eyebrow{ margin:0; }
.why-v2-title{ margin:22px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(34px,3.5vw,52px); line-height:1.12; letter-spacing:-0.01em; color:var(--ivory); }
.why-v2-title span{ display:block; }
.why-v2-title span + span{ color:rgba(250,247,240,0.62); }
.why-v2-rule{ display:block; width:44px; height:1px; margin:34px 0 0 0; background:var(--accent-warm-on-dark); }
.why-v2-lead{ margin:26px 0 0 0; max-width:26em; font-size:16px; line-height:1.75; color:rgba(250,247,240,0.72); }
.why-v2-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(250,247,240,0.14); }
.why-v2-item{ display:grid; grid-template-columns:64px minmax(0,1fr); align-items:baseline; padding:clamp(26px,3vw,36px) 0; border-bottom:1px solid rgba(250,247,240,0.14); }
.why-v2-n{ font-family:'Raleway',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.12em; color:var(--accent-warm-on-dark); }
.why-v2-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(21px,1.9vw,26px); line-height:1.25; color:var(--ivory); }
.why-v2-b{ margin:10px 0 0 0; max-width:34em; font-size:15.5px; line-height:1.7; color:rgba(250,247,240,0.72); }
@media (min-width:901px){ .why-v2-list{ margin-top:8px; } }
@media (max-width:900px){
  .section.why-v2{ padding:56px 0; }
  .why-v2-grid{ grid-template-columns:minmax(0,1fr); padding:0 22px; row-gap:40px; }
  .why-v2-item{ grid-template-columns:44px minmax(0,1fr); padding:22px 0; }
  .why-v2-title{ font-size:clamp(30px,8.4vw,38px); }
}
.why-v2-title span{ text-wrap:balance; }
@media (min-width:901px){ .why-v2-grid{ grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr); } .why-v2-title{ font-size:clamp(34px,3.2vw,48px); } }

/* ============================================================
   61st pass: Ownership — editorial layout on one 1240px grid
   ============================================================ */
.ov-sec{ padding:clamp(72px,8vw,120px) 0; background:var(--ivory); }
.ov-sec.sand{ background:var(--sand); }
.ov-grid{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; display:grid; column-gap:clamp(56px,7vw,120px); row-gap:40px; align-items:start; }
.ov-grid-57{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.ov-grid-48{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
.ov-sec .eyebrow{ margin:0; }
.ov-statement{ margin:22px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(32px,3.3vw,48px); line-height:1.14; letter-spacing:-0.01em; color:var(--charcoal); }
.ov-statement span{ display:block; }
.ov-statement .ov-soft{ color:#8A8274; }
.ov-copy{ padding-top:44px; }
.ov-p{ margin:0 0 16px 0; font-size:16px; line-height:1.8; color:var(--muted); max-width:38em; }
.ov-h2{ margin:18px 0 18px 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(26px,2.4vw,34px); line-height:1.2; color:var(--charcoal); }
.ov-h2-lg{ font-weight:200; font-size:clamp(30px,3vw,44px); line-height:1.15; }

/* selective partnership reuses Advisory's contained split; its text has no heading */
#page .own-sel .split-text .reveal-d2 p{ max-width:none; font-size:16px; line-height:1.8; margin-bottom:14px; }
#page .own-sel .split-text .reveal-d3{ margin-top:14px; }
#page .own-sel .split-index{ margin-bottom:22px; }

/* the Standard on charcoal (why-v2 system) */
.ov-standard .why-v2-title{ font-size:clamp(34px,3.4vw,50px); }

/* services two-up */
.ov-duo{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:0; }
.ov-svc{ padding:0 clamp(32px,4.5vw,72px); display:flex; flex-direction:column; }
.ov-svc:first-child{ padding-left:0; border-right:1px solid var(--rule); }
.ov-svc:last-child{ padding-right:0; }
.ov-label{ margin:16px 0 14px 0; font-size:15px; font-weight:600; color:var(--accent-warm); }
#page .ov-svc .service-list.ov-list{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px 24px; margin:0; max-width:none; justify-content:stretch; }
#page .ov-svc .service-item span:last-child{ font-size:14.5px; line-height:1.45; padding-top:3px; }
#page .ov-svc .service-check{ width:20px; height:20px; }
.ov-buy{ margin-top:auto; padding-top:28px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.ov-duo .ov-buy{ border-top:0; }
.ov-price{ margin:28px 0 0 0; padding-top:20px; border-top:1px solid var(--rule); width:100%; font-size:14px; color:var(--muted); }
.ov-buy .btn{ padding:14px 26px; }

/* the owner journey as a vertical timeline */
.ov-sticky{ position:sticky; top:110px; }
.ov-rule{ margin-top:30px; background:var(--accent-warm); }
.ov-quote{ margin:22px 0 0 0; font-family:'Raleway',sans-serif; font-style:italic; font-weight:300; font-size:clamp(18px,1.5vw,21px); line-height:1.5; color:var(--charcoal); max-width:22em; }
.ov-journey{ list-style:none; margin:0; padding:0; position:relative; }
.ov-journey::before{ content:""; position:absolute; left:15.5px; top:18px; bottom:18px; width:1px; background:rgba(168,77,42,0.35); }
.ov-step{ position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:28px; padding:0 0 26px 0; }
.ov-step:last-child{ padding-bottom:0; }
.ov-step-n{ position:relative; z-index:1; width:32px; height:32px; border-radius:50%; border:1px solid var(--accent-warm); background:var(--sand); color:var(--accent-warm); display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600; letter-spacing:0.04em; }
.ov-step-h{ margin:4px 0 0 0; font-family:'Raleway',sans-serif; font-weight:400; font-size:19px; line-height:1.3; color:var(--charcoal); }
.ov-step-b{ margin:6px 0 0 0; font-size:15px; line-height:1.65; color:var(--muted); max-width:34em; }

/* FAQ */
.ov-faq-sec .faq{ max-width:none; margin:0; border-top:1px solid var(--rule); }
.ov-faq-sec .faq-q{ padding:20px 0; font-size:16px; }
.ov-faq-sec .faq-a p{ max-width:none; font-size:15px; line-height:1.7; }

@media (min-width:901px) and (max-width:1100px){
  .ov-grid{ padding:0 40px; column-gap:48px; }
}
@media (max-width:900px){
  .ov-sec{ padding:56px 0; }
  .ov-grid, .ov-grid-57, .ov-grid-48{ grid-template-columns:minmax(0,1fr); padding:0 22px; row-gap:28px; }
  .ov-copy{ padding-top:0; }
  .ov-duo{ row-gap:48px; }
  .ov-svc, .ov-svc:first-child, .ov-svc:last-child{ padding:0; border-right:0; }
  .ov-svc + .ov-svc{ padding-top:44px; border-top:1px solid var(--rule); }
  .ov-sticky{ position:static; }
  #page .ov-svc .service-list.ov-list{ grid-template-columns:minmax(0,1fr)!important; }
}
/* 61st pass refinements */
@media (min-width:901px){
  .ov-intro .ov-grid-57{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); }
  .ov-statement{ font-size:clamp(30px,2.9vw,42px); }
  .ov-copy{ padding-top:40px; }
  .ov-standard .why-v2-head{ position:sticky; top:120px; }
}
.ov-standard .why-v2-item{ padding:clamp(20px,2.2vw,28px) 0; }
.ov-standard .why-v2-h{ font-size:clamp(20px,1.7vw,24px); }
.ov-standard .why-v2-b{ margin-top:8px; }
.ov-duo{ align-items:stretch; }
/* 62nd pass (client: Stewardship "needs to be smaller, it is taking a lot of space") */
#page .ov-intro{ padding:clamp(52px,5vw,72px) 0; }
@media (min-width:901px){
  #page .ov-intro .ov-grid-57{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(48px,5.5vw,88px); }
  #page .ov-intro .ov-statement{ font-size:clamp(28px,2.4vw,34px); margin-top:16px; }
  #page .ov-intro .ov-copy{ padding-top:34px; }
}
#page .ov-intro .ov-p{ font-size:15.5px; line-height:1.7; margin-bottom:12px; max-width:none; }
@media (max-width:900px){ #page .ov-intro{ padding:44px 0; } #page .ov-intro .ov-statement{ font-size:28px; } }

/* 62nd pass: Ownership — "A selective partnership" as a compact band */
#page .ov-sel{ padding:clamp(52px,5vw,72px) 0; }
.ov-sel-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; column-gap:clamp(48px,5.5vw,88px); }
.ov-sel-img{ margin:0; aspect-ratio:3 / 2; overflow:hidden; }
.ov-sel-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.3s cubic-bezier(.16,.8,.3,1); }
.ov-sel-img:hover img{ transform:scale(1.03); }
.ov-sel-h{ margin:16px 0 14px 0; font-weight:200; font-size:clamp(26px,2.3vw,34px); }
.ov-sel .ov-p{ font-size:15.5px; line-height:1.7; margin-bottom:10px; max-width:none; }
.ov-sel-cta{ margin-top:20px; padding-top:18px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; }
.ov-sel-last{ margin:0; font-family:'Raleway',sans-serif; font-style:italic; font-weight:300; font-size:17px; line-height:1.5; color:var(--charcoal); max-width:26em; }
.ov-sel-cta .btn{ flex:0 0 auto; padding:14px 26px; }
@media (prefers-reduced-motion:reduce){ .ov-sel-img img{ transition:none; } .ov-sel-img:hover img{ transform:none; } }
@media (max-width:900px){
  #page .ov-sel{ padding:44px 0; }
  .ov-sel-grid{ grid-template-columns:minmax(0,1fr); row-gap:26px; }
  .ov-sel-img{ aspect-ratio:16 / 10; }
}
.ov-sel-last{ flex:1 1 260px; max-width:none; }

/* 63rd pass: Stewardship statement — line-by-line mask reveal */
.ov-statement .ov-line{ display:block; overflow:hidden; padding-bottom:0.06em; margin-bottom:-0.06em; }
.ov-statement .ov-line-in{ display:block; }
.ov-draw{ display:block; width:44px; height:1px; margin-top:26px; background:var(--accent-warm); transform-origin:left center; }
html.js-anim .reveal .ov-anim .ov-line-in{ transform:translateY(108%); opacity:0; transition:transform 1.15s cubic-bezier(.2,.75,.18,1) var(--ld,0ms), opacity .9s ease var(--ld,0ms); }
html.js-anim .reveal.is-visible .ov-anim .ov-line-in{ transform:none; opacity:1; }
html.js-anim .reveal .ov-draw{ transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.18,1) var(--ld,0ms); }
html.js-anim .reveal.is-visible .ov-draw{ transform:scaleX(1); }
/* the block itself no longer slides, so the lines' own rise reads clearly */
html.js-anim #stewardship .ov-grid > .reveal:first-child{ transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js-anim .reveal .ov-anim .ov-line-in, html.js-anim .reveal .ov-draw{ transform:none; opacity:1; transition:none; }
}
/* 63rd pass (client: "this smaller"): the invitation line beside the button */
.ov-sel-last{ font-size:15px; line-height:1.55; }

/* 64th pass: Ownership — The Solace Standard on one screen */
.section.ov-std{ background:linear-gradient(180deg,#24221E 0%,#1E1C19 100%); color:var(--ivory); padding:clamp(64px,6.5vw,96px) 0; }
.ov-std-in{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; }
.ov-std-head{ display:grid; grid-template-columns:minmax(0,1fr); }
.ov-std-head .eyebrow{ margin:0; }
.ov-std-title{ margin:18px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(34px,3.4vw,50px); line-height:1.1; letter-spacing:-0.01em; color:var(--ivory); }
.ov-anim .ov-line{ display:block; overflow:hidden; padding-bottom:0.06em; margin-bottom:-0.06em; }
.ov-anim .ov-line-in{ display:block; }
.ov-draw-dark{ background:var(--accent-warm-on-dark); margin-top:24px; }
.ov-std-list{ list-style:none; margin:clamp(34px,3.6vw,48px) 0 0 0; padding:0; border-top:1px solid rgba(250,247,240,0.14); }
.ov-std-row{ position:relative; display:grid; grid-template-columns:72px minmax(0,4fr) minmax(0,7fr); column-gap:32px; align-items:baseline; padding:clamp(18px,2vw,24px) 0; }
.ov-std-row::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(250,247,240,0.14); transform-origin:left center; }
.ov-std-n{ font-family:'Raleway',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.12em; color:var(--accent-warm-on-dark); transition:transform .5s cubic-bezier(.2,.75,.18,1); }
.ov-std-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.75vw,25px); line-height:1.25; color:var(--ivory); transition:transform .5s cubic-bezier(.2,.75,.18,1), color .4s ease; }
.ov-std-b{ margin:0; font-size:15.5px; line-height:1.65; color:rgba(250,247,240,0.66); transition:color .4s ease; }
.ov-std-row:hover .ov-std-h{ transform:translateX(6px); color:#FFFFFF; }
.ov-std-row:hover .ov-std-n{ transform:translateX(4px); }
.ov-std-row:hover .ov-std-b{ color:rgba(250,247,240,0.9); }
/* animation: rows fade up in turn while their hairline draws across */
html.js-anim .ov-std-row.reveal::after{ transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.75,.18,1) var(--rd,0ms); }
html.js-anim .ov-std-row.reveal.is-visible::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  html.js-anim .ov-std-row.reveal::after{ transform:none; transition:none; }
  .ov-std-row:hover .ov-std-h, .ov-std-row:hover .ov-std-n{ transform:none; }
}
@media (min-width:901px) and (max-width:1100px){ .ov-std-in{ padding:0 40px; } .ov-std-row{ grid-template-columns:56px minmax(0,4fr) minmax(0,6fr); column-gap:24px; } }
@media (max-width:900px){
  .section.ov-std{ padding:56px 0; }
  .ov-std-in{ padding:0 22px; }
  .ov-std-row{ grid-template-columns:44px minmax(0,1fr); row-gap:6px; padding:20px 0; }
  .ov-std-b{ grid-column:2; }
}
/* 64th pass tuning: keep the Standard within one laptop screen */
.section.ov-std{ padding:clamp(52px,5vw,84px) 0; }
.ov-std-list{ margin-top:clamp(28px,3vw,42px); }
.ov-std-row{ grid-template-columns:60px minmax(0,3.6fr) minmax(0,7.4fr); padding:clamp(16px,1.7vw,22px) 0; }
.ov-std-title{ font-size:clamp(32px,3.1vw,46px); }
@media (max-width:900px){
  .section.ov-std{ padding:48px 0; }
  .ov-std-row{ grid-template-columns:40px minmax(0,1fr); padding:16px 0; }
  .ov-std-h{ font-size:19px; }
  .ov-std-b{ font-size:14.5px; line-height:1.6; }
  .ov-std-title{ font-size:32px; }
}
@media (max-width:900px){ .ov-std-row{ column-gap:16px; } }

/* 65th pass: the Solace Standard seal (orange rosette + tick) beside the title */
.ov-std-titlerow{ display:flex; align-items:center; gap:clamp(14px,1.4vw,20px); margin-top:18px; }
.ov-std-titlerow .ov-std-title{ margin:0; }
.ov-seal{ position:relative; flex:0 0 auto; width:clamp(34px,3vw,44px); height:clamp(34px,3vw,44px); display:inline-block; transform:translateY(0.06em); }
.ov-seal svg{ position:relative; z-index:1; width:100%; height:100%; display:block; filter:drop-shadow(0 4px 14px rgba(168,77,42,0.35)); }
.ov-seal-ring{ position:absolute; inset:-2px; border-radius:50%; border:1px solid rgba(208,139,108,0.7); opacity:0; pointer-events:none; }
.ov-seal-tick{ stroke-dasharray:1 1; stroke-dashoffset:0; }
/* entrance: the seal turns and settles in after the title rises, the tick
   draws itself, and a soft ring pulses out once */
html.js-anim .reveal .ov-seal svg{ transform:scale(.35) rotate(-40deg); opacity:0; transition:transform .9s cubic-bezier(.34,1.56,.64,1) .75s, opacity .5s ease .75s; }
html.js-anim .reveal.is-visible .ov-seal svg{ transform:none; opacity:1; }
html.js-anim .reveal .ov-seal-tick{ stroke-dashoffset:1; transition:stroke-dashoffset .55s cubic-bezier(.65,0,.35,1) 1.35s; }
html.js-anim .reveal.is-visible .ov-seal-tick{ stroke-dashoffset:0; }
html.js-anim .reveal.is-visible .ov-seal-ring{ animation:ovSealRing 1.4s ease-out 1.7s 1 both; }
@keyframes ovSealRing{ 0%{ opacity:.9; transform:scale(.9); } 100%{ opacity:0; transform:scale(1.9); } }
.ov-std-head:hover .ov-seal-ring{ animation:ovSealRing 1.2s ease-out 0s 1 both; }
@media (prefers-reduced-motion:reduce){
  html.js-anim .reveal .ov-seal svg{ transform:none; opacity:1; transition:none; }
  html.js-anim .reveal .ov-seal-tick{ stroke-dashoffset:0; transition:none; }
  html.js-anim .reveal.is-visible .ov-seal-ring, .ov-std-head:hover .ov-seal-ring{ animation:none; }
}
@media (max-width:900px){ .ov-seal{ width:30px; height:30px; } }
html.js-anim .reveal .ov-seal-tick{ opacity:0; transition:stroke-dashoffset .55s cubic-bezier(.65,0,.35,1) 1.35s, opacity .1s linear 1.35s; }
html.js-anim .reveal.is-visible .ov-seal-tick{ opacity:1; }
@media (prefers-reduced-motion:reduce){ html.js-anim .reveal .ov-seal-tick{ opacity:1; } }

/* 66th pass: Owner Support and Delivery & Repositioning as two sections */
#page .ov-one{ padding:clamp(60px,6vw,88px) 0; }
.ov-one .ov-h2-lg{ margin:16px 0 18px 0; }
.ov-one .ov-p{ font-size:16px; line-height:1.75; margin-bottom:12px; }
.ov-one-side{ padding-top:6px; }
.ov-one-side .ov-label{ margin:0 0 16px 0; }
#page .ov-one .service-list.ov-list{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px 28px; margin:0; max-width:none; justify-content:stretch; }
#page .ov-one .service-item span:last-child{ font-size:15px; line-height:1.45; padding-top:3px; }
#page .ov-one .service-check{ width:21px; height:21px; }
.ov-one-buy{ margin-top:26px; padding-top:20px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; }
.ov-one-price{ margin:0; flex:1 1 240px; font-size:14.5px; line-height:1.6; color:var(--muted); }
.ov-one-buy .btn{ flex:0 0 auto; padding:14px 26px; }
@media (max-width:900px){
  #page .ov-one{ padding:48px 0; }
  #page .ov-one .service-list.ov-list{ grid-template-columns:minmax(0,1fr)!important; }
}
.ov-one-price{ flex:1 1 150px; }
/* journey dots sit on ivory now */
.ov-journey-sec:not(.sand) .ov-step-n{ background:var(--ivory); }

/* ============================================================
   67th pass: Ownership — the ownership cycle
   ============================================================ */
.ov-journey-sec.has-cycle .ov-grid-57{ align-items:center; }
.ov-journey-sec.has-cycle .ov-sticky{ position:static; }
.ov-cycle{ position:relative; width:min(520px, 100%); aspect-ratio:1 / 1; margin:0 auto; }
.ov-cycle-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:rotate(-90deg); }
.ov-cycle-track{ fill:none; stroke:rgba(38,36,31,0.16); stroke-width:0.28; }
.ov-cycle-arc{ fill:none; stroke:var(--accent-warm); stroke-width:0.5; stroke-linecap:round; transition:stroke-dasharray 1.1s cubic-bezier(.2,.75,.18,1); }
.ov-cycle-node{ position:absolute; z-index:2; transform:translate(-50%,-50%); background:none; border:0; padding:6px; cursor:pointer; }
.ov-cycle-dot{ width:34px; height:34px; border-radius:50%; border:1px solid var(--accent-warm); background:var(--ivory); color:var(--accent-warm); display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600; letter-spacing:0.04em; transition:background-color .35s ease, color .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
.ov-cycle-node.is-past .ov-cycle-dot{ background:rgba(168,77,42,0.08); }
.ov-cycle-node.is-on .ov-cycle-dot{ background:var(--accent-warm); color:var(--ivory); transform:scale(1.14); box-shadow:0 0 0 6px rgba(168,77,42,0.12); }
.ov-cycle-node:hover .ov-cycle-dot{ transform:scale(1.1); }
.ov-cycle-node:focus-visible{ outline:none; }
.ov-cycle-node:focus-visible .ov-cycle-dot{ box-shadow:0 0 0 3px rgba(168,77,42,0.35); }
.ov-cycle-label{ position:absolute; z-index:1; white-space:nowrap; font-family:'Raleway',sans-serif; font-size:14px; font-weight:400; letter-spacing:0.01em; color:var(--muted); transition:color .35s ease; pointer-events:none; transform:translate(-50%,-50%); }
.ov-cycle-label.ov-al-l{ transform:translate(0,-50%); }
.ov-cycle-label.ov-al-r{ transform:translate(-100%,-50%); }
.ov-cycle-label.is-on{ color:var(--charcoal); }
.ov-cycle-center{ position:absolute; left:50%; top:50%; width:56%; transform:translate(-50%,-50%); display:grid; text-align:center; }
.ov-cycle-txt{ grid-area:1 / 1; align-self:center; }
.ov-cycle-txt > *{ opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; }
.ov-cycle-txt.is-on > *{ opacity:1; transform:none; transition:opacity .7s ease .25s, transform .8s cubic-bezier(.2,.75,.18,1) .25s; }
.ov-cycle-txt.is-on .ov-cycle-h{ transition-delay:.33s; }
.ov-cycle-txt.is-on .ov-cycle-b{ transition-delay:.41s; }
.ov-cycle-n{ margin:0; font-size:11px; font-weight:600; letter-spacing:0.2em; color:var(--accent-warm); }
.ov-cycle-n span{ color:#A69E90; }
.ov-cycle-h{ margin:10px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(24px,2.2vw,30px); line-height:1.2; color:var(--charcoal); }
.ov-cycle-b{ margin:10px 0 0 0; font-size:14.5px; line-height:1.65; color:var(--muted); }
/* entrance: ring draws round, then the stages appear in turn */
html.js-anim .reveal .ov-cycle-track{ stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .15s; }
html.js-anim .reveal.is-visible .ov-cycle-track{ stroke-dashoffset:0; }
html.js-anim .reveal .ov-cycle-node, html.js-anim .reveal .ov-cycle-label{ opacity:0; transition:opacity .6s ease var(--nd,0ms); }
html.js-anim .reveal.is-visible .ov-cycle-node, html.js-anim .reveal.is-visible .ov-cycle-label{ opacity:1; }
.ov-journey-mobile{ display:none; }
@media (prefers-reduced-motion:reduce){
  html.js-anim .reveal .ov-cycle-track{ stroke-dashoffset:0; transition:none; }
  html.js-anim .reveal .ov-cycle-node, html.js-anim .reveal .ov-cycle-label{ opacity:1; transition:none; }
  .ov-cycle-arc, .ov-cycle-dot{ transition:none; }
}
@media (max-width:1100px) and (min-width:901px){ .ov-cycle-label{ font-size:12.5px; } .ov-cycle{ width:min(440px,100%); } }
@media (max-width:900px){
  .ov-cycle{ display:none; }
  .ov-journey-mobile{ display:block; }
}
.ov-cycle-node.is-past .ov-cycle-dot{ background:#F4EAE2; }
@media (max-width:1180px) and (min-width:901px){
  .ov-cycle{ width:min(390px, 78%); }
  .ov-cycle-label{ font-size:12.5px; }
  .ov-cycle-b{ font-size:13.5px; }
  .ov-cycle-h{ font-size:22px; }
}
.ov-cycle-node.is-on .ov-cycle-dot{ background:var(--accent-warm); color:var(--ivory); }
/* 68th pass (client: "too much gap on top of it" — Owner Support): tighter
   top and bottom spacing for the two service sections */
#page .ov-one{ padding:clamp(44px,4vw,56px) 0 clamp(52px,4.6vw,64px); }
@media (max-width:900px){ #page .ov-one{ padding:40px 0 44px; } }
/* 69th pass (client: owner relationship — "too much gap here, overall make
   the section slightly smaller") */
#page .ov-journey-sec.has-cycle{ padding:clamp(44px,4vw,56px) 0 clamp(52px,4.6vw,64px); }
@media (min-width:901px){
  .ov-journey-sec.has-cycle .ov-cycle{ width:min(440px, 100%); }
  .ov-journey-sec.has-cycle .ov-h2-lg{ font-size:clamp(28px,2.6vw,38px); margin:14px 0 14px 0; }
  .ov-journey-sec.has-cycle .ov-p{ font-size:15.5px; line-height:1.7; }
  .ov-journey-sec.has-cycle .ov-rule{ margin-top:22px; }
  .ov-journey-sec.has-cycle .ov-quote{ margin-top:16px; font-size:clamp(17px,1.35vw,19px); }
  .ov-journey-sec.has-cycle .ov-cycle-h{ font-size:clamp(22px,1.9vw,26px); }
  .ov-journey-sec.has-cycle .ov-cycle-b{ font-size:14px; }
  .ov-journey-sec.has-cycle .ov-cycle-dot{ width:30px; height:30px; font-size:10px; }
  .ov-journey-sec.has-cycle .ov-cycle-label{ font-size:13px; }
}
@media (max-width:1180px) and (min-width:901px){ .ov-journey-sec.has-cycle .ov-cycle{ width:min(370px, 76%); } }
@media (max-width:900px){ #page .ov-journey-sec.has-cycle{ padding:40px 0 44px; } }
/* 70th pass (client: Frequently asked "needs to be smaller") */
#page .ov-faq-sec{ padding:clamp(44px,4vw,56px) 0 clamp(52px,4.6vw,64px); }
.ov-faq-sec .ov-h2-lg{ font-size:clamp(26px,2.4vw,34px); margin:0; }
.ov-faq-sec .faq-q{ padding:13px 0; font-size:15px; }
.ov-faq-sec .faq-a p{ font-size:14.5px; line-height:1.65; padding-bottom:14px; }
@media (min-width:901px){ .ov-faq-sec .ov-grid-48{ grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr); } }
@media (max-width:900px){ #page .ov-faq-sec{ padding:40px 0 44px; } .ov-faq-sec .ov-grid-48{ row-gap:18px; } }

/* ============================================================
   71st pass: About — editorial redesign
   ============================================================ */
.ab-lead{ margin:0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(26px,2.5vw,36px); line-height:1.32; letter-spacing:-0.005em; color:var(--charcoal); text-wrap:pretty; }
.ab-lead-sm{ font-weight:300; font-size:clamp(21px,1.75vw,25px); line-height:1.45; margin-bottom:20px; }
.ab-rule{ margin:0 0 22px 0; }
.ab-pull{ margin:26px 0 26px 0; padding-left:22px; border-left:1px solid var(--accent-warm); font-family:'Raleway',sans-serif; font-style:italic; font-weight:300; font-size:clamp(19px,1.6vw,23px); line-height:1.45; color:var(--charcoal); max-width:26em; }
.ab-h2{ margin-top:16px; }
@media (min-width:901px){ .ab-sticky{ position:sticky; top:110px; } }

/* intro */
#page .ab-intro{ padding:clamp(56px,5.6vw,84px) 0; }
.ab-intro-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; }
.ab-intro .ab-lead{ max-width:22em; }
.ab-intro-side .ov-p{ margin:0; }

/* story */
#page .ab-story{ padding:clamp(56px,5.6vw,84px) 0; }
.ab-story-grid{ align-items:start; }
.ab-story-side .eyebrow{ margin-bottom:22px; }
.ab-photo{ margin:0; aspect-ratio:4 / 5; max-height:560px; overflow:hidden; }
.ab-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.3s cubic-bezier(.16,.8,.3,1); }
.ab-photo:hover img{ transform:scale(1.03); }
@media (min-width:901px){ .ab-story-side{ position:sticky; top:110px; } }
.ab-story-text .ov-p{ max-width:36em; }
.ab-more{ max-height:0; overflow:hidden; transition:max-height .9s cubic-bezier(.2,.75,.18,1); position:relative; }
.ab-more-btn{ margin-top:8px; display:inline-flex; align-items:center; gap:14px; background:none; border:0; padding:10px 0 4px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-warm); border-bottom:1px solid rgba(168,77,42,0.45); transition:border-color .3s ease; }
.ab-more-btn:hover{ border-color:var(--accent-warm); }
.ab-more-i{ position:relative; width:11px; height:11px; }
.ab-more-i::before, .ab-more-i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:currentColor; transition:transform .35s ease; }
.ab-more-i::after{ transform:rotate(90deg); }
.ab-more-btn[aria-expanded="true"] .ab-more-i::after{ transform:rotate(0deg); }

/* perspective */
#page .ab-persp{ padding:clamp(56px,5.6vw,84px) 0; }
.ab-copy .ov-p{ max-width:36em; }

/* independent: reuse advisory split; no eyebrow, heading only */
#page .ab-indep .split-text .reveal-d2 p{ max-width:none; font-size:16px; line-height:1.75; margin-bottom:12px; }
#page .ab-indep .split-text h3{ font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(28px,2.6vw,38px); margin-bottom:18px; }
#page .ab-indep .split-text .reveal-d2 p:last-child{ margin-top:18px; padding-top:18px; border-top:1px solid var(--rule); color:var(--charcoal); }

/* more than sailing */
#page .ab-more-than{ padding:clamp(56px,5.6vw,84px) 0; }
.ab-more-than .ov-grid-57{ align-items:end; }
.ab-more-than .ab-lead-sm{ margin:0; }
.ab-people{ margin-top:clamp(34px,3.4vw,48px); grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(40px,5vw,80px); }
.ab-person{ padding-top:22px; border-top:1px solid var(--rule); }
.ab-person-n{ margin:0 0 12px 0; font-size:11.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-warm); }
.ab-person .ov-p{ margin:0; }
.ab-closing-line{ margin:clamp(30px,3vw,42px) 0 0 0; max-width:46em; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(18px,1.45vw,21px); line-height:1.6; color:var(--charcoal); }

/* beliefs */
.section.ab-believe{ background:linear-gradient(180deg,#24221E 0%,#1E1C19 100%); color:var(--ivory); padding:clamp(56px,5.6vw,88px) 0; }
.ab-believe-grid{ list-style:none; margin:clamp(30px,3.2vw,44px) 0 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(28px,3.4vw,56px); row-gap:clamp(30px,3vw,44px); }
.ab-belief{ position:relative; padding-top:22px; }
.ab-belief::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(250,247,240,0.16); transform-origin:left center; }
.ab-belief-n{ font-family:'Raleway',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0.12em; color:var(--accent-warm-on-dark); }
.ab-belief-h{ margin:14px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.7vw,24px); line-height:1.25; color:var(--ivory); }
.ab-belief-b{ margin:10px 0 0 0; font-size:15px; line-height:1.65; color:rgba(250,247,240,0.66); }
html.js-anim .ab-belief.reveal::before{ transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.75,.18,1) var(--rd,0ms); }
html.js-anim .ab-belief.reveal.is-visible::before{ transform:scaleX(1); }

/* building */
#page .ab-build{ padding:clamp(56px,5.6vw,84px) 0; }
.ab-paths{ display:flex; flex-wrap:wrap; gap:0; margin:6px 0 26px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.ab-path{ flex:1 1 0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--charcoal); transition:color .3s ease, background-color .3s ease; }
.ab-path + .ab-path{ border-left:1px solid var(--rule); }
.ab-path svg{ width:18px; height:18px; color:var(--accent-warm); transition:transform .35s cubic-bezier(.2,.75,.18,1); }
.ab-path:hover{ color:var(--accent-warm); background:rgba(168,77,42,0.05); }
.ab-path:hover svg{ transform:translateX(4px); }

/* close */
.ab-close{ position:relative; overflow:hidden; min-height:clamp(360px,42vw,520px); display:flex; align-items:center; justify-content:center; text-align:center; }
.ab-close img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ab-close-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,16,0.35) 0%, rgba(20,18,16,0.55) 60%, rgba(20,18,16,0.72) 100%); }
.ab-close-in{ position:relative; z-index:1; padding:0 24px; }
.ab-close-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(34px,4vw,56px); line-height:1.1; color:var(--ivory); }
.ab-close .xc-btn{ margin-top:30px; }

@media (prefers-reduced-motion:reduce){
  html.js-anim .ab-belief.reveal::before{ transform:none; transition:none; }
  .ab-photo img, .ab-more{ transition:none; }
}
@media (max-width:1100px) and (min-width:901px){ .ab-believe-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  #page .ab-intro, #page .ab-story, #page .ab-persp, #page .ab-more-than, #page .ab-build{ padding:44px 0; }
  .ab-intro-grid{ grid-template-columns:minmax(0,1fr); row-gap:24px; }
  .ab-photo{ aspect-ratio:16 / 11; }
  .ab-people{ grid-template-columns:minmax(0,1fr); row-gap:26px; }
  .ab-believe-grid{ grid-template-columns:minmax(0,1fr); row-gap:26px; }
  .section.ab-believe{ padding:48px 0; }
  .ab-paths{ flex-direction:column; }
  .ab-path + .ab-path{ border-left:0; border-top:1px solid var(--rule); }
  .ab-pull{ margin:20px 0; }
}

/* 72nd pass: About intro — centred statement */
#page .ab-intro-c{ padding:clamp(64px,6.4vw,100px) 0; }
.ab-intro-in{ max-width:960px; margin:0 auto; padding:0 64px; box-sizing:border-box; text-align:center; }
.ab-intro-rule{ display:block; width:44px; height:1px; margin:0 auto 34px auto; background:var(--accent-warm); transform-origin:center; }
.ab-intro-lead{ margin:0 auto; max-width:25em; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(26px,2.5vw,36px); line-height:1.36; letter-spacing:-0.005em; color:var(--charcoal); text-wrap:balance; }
.ab-intro-sub{ margin:30px auto 0 auto; max-width:40em; font-size:16px; line-height:1.8; color:var(--muted); text-wrap:pretty; }
html.js-anim .reveal .ab-intro-rule{ transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.18,1) .2s; }
html.js-anim .reveal.is-visible .ab-intro-rule{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ html.js-anim .reveal .ab-intro-rule{ transform:none; transition:none; } }
@media (max-width:900px){
  #page .ab-intro-c{ padding:48px 0; }
  .ab-intro-in{ padding:0 22px; }
  .ab-intro-lead{ font-size:clamp(23px,6.4vw,28px); }
  .ab-intro-sub{ font-size:15.5px; margin-top:22px; }
}

/* 72nd pass: About — three-photo set in Our story */
.ov-draw.ab-intro-rule, .ab-intro-rule{ background:var(--accent-warm); }
.ab-photos{ display:grid; gap:14px; }
.ab-ph{ margin:0; position:relative; }
.ab-ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.3s cubic-bezier(.16,.8,.3,1); }
.ab-ph:not(.is-empty){ overflow:hidden; }
.ab-ph-main{ aspect-ratio:4 / 3; overflow:hidden; }
.ab-ph-main:hover img, .ab-ph-por:hover img{ transform:scale(1.03); }
.ab-ph-pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ab-ph-por{ display:flex; flex-direction:column; }
.ab-ph-por img, .ab-ph-por .ab-ph-empty{ aspect-ratio:4 / 5; }
.ab-ph-por img{ height:auto; }
.ab-ph-empty{ display:block; width:100%; background:linear-gradient(160deg, #E6DCCB 0%, #DED2BF 100%); position:relative; }
.ab-ph-empty::after{ content:""; position:absolute; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-50%); border:1px solid rgba(38,36,31,0.18); border-radius:50%; }
.ab-ph figcaption{ margin-top:10px; font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){ .ab-ph-main{ aspect-ratio:16 / 10; } .ab-photos, .ab-ph-pair{ gap:10px; } }
@media (min-width:901px){ .ab-ph-main{ aspect-ratio:3 / 2; } }

/* 72nd pass: beliefs marks instead of numbers */
.ab-belief-ic{ display:block; width:34px; height:34px; color:var(--accent-warm-on-dark); }
.ab-belief-ic svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.ab-belief-h{ margin-top:18px; }
html.js-anim .ab-belief.reveal .ab-belief-ic{ opacity:0; transform:translateY(6px) scale(.9); transition:opacity .7s ease calc(var(--rd,0ms) + 250ms), transform .9s cubic-bezier(.34,1.56,.64,1) calc(var(--rd,0ms) + 250ms); }
html.js-anim .ab-belief.reveal.is-visible .ab-belief-ic{ opacity:1; transform:none; }
.ab-belief:hover .ab-belief-ic{ color:#E1A283; }
@media (prefers-reduced-motion:reduce){ html.js-anim .ab-belief.reveal .ab-belief-ic{ opacity:1; transform:none; transition:none; } }

/* 72nd pass: "What we're building" centred */
.ab-build-in{ max-width:860px; margin:0 auto; padding:0 64px; box-sizing:border-box; text-align:center; }
.ab-build-c .ab-h2{ margin-top:0; }
.ab-build-c .ab-rule{ margin:20px auto 30px auto; }
.ab-build-c .ab-copy .ov-p, .ab-build-c .ab-lead{ margin-left:auto; margin-right:auto; }
.ab-build-c .ab-lead{ max-width:30em; text-wrap:balance; }
.ab-build-c .ab-copy .ov-p{ max-width:40em; text-wrap:pretty; }
.ab-build-c .ab-paths{ max-width:720px; margin:14px auto 30px auto; }
.ab-build-c .ab-path{ justify-content:center; gap:14px; }
@media (max-width:900px){ .ab-build-in{ padding:0 22px; } }
/* 73rd pass (client: "way of life" in orange) */
.ab-intro-lead .ws-accent{ color:var(--accent-warm); font-style:normal; font-weight:inherit; }


/* ===== 74th pass =====
   Client on the About intro: "too much gap". Tighter section padding and
   closer spacing between the rule, the statement and the sub-paragraph.
   Client "in orange": "experience" in the Perspective heading and
   "Independent" in the Independent by design heading. */
#page .ab-intro-c{ padding:clamp(40px,3.8vw,56px) 0; }
.ab-intro-rule{ margin-bottom:24px; }
.ab-intro-sub{ margin-top:20px; }
@media (max-width:900px){
  #page .ab-intro-c{ padding:36px 0; }
  .ab-intro-rule{ margin-bottom:20px; }
  .ab-intro-sub{ margin-top:18px; }
}
.ab-persp .ab-h2 .ws-accent,
.ab-indep .split-text h3 .ws-accent{ color:var(--accent-warm); font-style:normal; font-weight:inherit; }

/* ===== 75th pass =====
   1) Spec units in lowercase ("16 m", "24 kn"), out of the value's uppercase.
   2) Ownership: "Two ways to own" (Charter / Private) and "Why charter works"
      (owning alone vs the charter program), both after the Stewardship intro. */
.pd-spec-unit{ text-transform:none; letter-spacing:0.02em; margin-left:0.22em; }

.ow-in{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; }
#page .ow-ways, #page .ow-why{ padding:clamp(56px,5.4vw,84px) 0; }
.ow-head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(48px,5.5vw,88px); align-items:end; margin-bottom:clamp(34px,3.2vw,50px); }
.ow-head .ow-h2{ margin:16px 0 0 0; }
.ow-lead{ margin:0; font-size:16px; line-height:1.75; color:var(--muted); max-width:36em; text-wrap:pretty; }

/* Two ways to own */
.ow-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.2vw,32px); }
.ow-card{ position:relative; display:flex; flex-direction:column; background:var(--ivory); border:1px solid rgba(38,36,31,.07); padding:clamp(30px,3vw,44px) clamp(26px,3vw,44px) clamp(26px,2.4vw,34px); box-shadow:0 1px 0 rgba(38,36,31,.03), 0 26px 50px -34px rgba(38,36,31,.28); }
.ow-card-bar{ position:absolute; top:-1px; left:-1px; right:-1px; height:2px; background:var(--accent-warm); transform-origin:left center; }
.ow-card-top{ display:flex; align-items:center; gap:16px; }
.ow-ic{ flex:none; display:block; width:34px; height:34px; color:var(--accent-warm); }
.ow-ic svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.ow-card-t{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(26px,2.2vw,32px); line-height:1.1; letter-spacing:.01em; color:var(--charcoal); }
.ow-card-b{ margin:18px 0 0 0; font-size:16px; line-height:1.7; color:#4F4A41; text-wrap:pretty; }
.ow-pts{ list-style:none; margin:22px 0 24px 0; padding:22px 0 0 0; border-top:1px solid rgba(38,36,31,.1); display:grid; row-gap:12px; }
.ow-pts li{ display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:12px; align-items:start; font-size:15px; line-height:1.55; color:var(--charcoal); }
.ow-tick{ display:block; width:18px; height:18px; margin-top:2px; color:var(--accent-warm); }
.ow-tick svg{ display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ow-suits{ margin:auto 0 0 0; font-size:14px; line-height:1.6; font-style:italic; color:var(--muted); }
html.js-anim .reveal .ow-card-bar{ transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.75,.18,1) calc(var(--rd,0ms) + 220ms); }
html.js-anim .reveal.is-visible .ow-card-bar{ transform:scaleX(1); }
html.js-anim .ow-card.reveal .ow-ic{ opacity:0; transform:translateY(6px) scale(.9); transition:opacity .7s ease calc(var(--rd,0ms) + 260ms), transform .9s cubic-bezier(.34,1.56,.64,1) calc(var(--rd,0ms) + 260ms); }
html.js-anim .ow-card.reveal.is-visible .ow-ic{ opacity:1; transform:none; }
html.js-anim .ow-card.reveal .ow-tick polyline{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .6s cubic-bezier(.6,0,.3,1) var(--pd,0ms); }
html.js-anim .ow-card.reveal.is-visible .ow-tick polyline{ stroke-dashoffset:0; }

/* Why charter works: owning alone vs the charter program */
.ow-why-h{ margin-top:16px; }
.ow-cmp{ --lw:190px; position:relative; }
.ow-cmp::before{ content:''; position:absolute; top:0; bottom:0; right:0; left:calc(var(--lw) + (100% - var(--lw)) / 2); background:var(--charcoal); }
.ow-cmp-row{ position:relative; display:grid; grid-template-columns:var(--lw) minmax(0,1fr) minmax(0,1fr); }
.ow-cmp-row > span{ position:relative; box-sizing:border-box; }
.ow-cmp-l{ padding:24px 24px 24px 0; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-warm); line-height:1.9; }
.ow-cmp-a, .ow-cmp-s{ display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:14px; align-items:start; padding:24px 44px 24px 0; font-size:15.5px; line-height:1.6; }
.ow-cmp-a{ color:var(--muted); }
.ow-cmp-s{ padding-left:44px; color:var(--ivory); }
.ow-cmp-s .ow-tick{ color:var(--accent-warm-on-dark); margin-top:3px; }
.ow-cmp-m{ display:none; }
.ow-dash{ display:block; width:14px; height:1px; margin-top:.8em; background:rgba(38,36,31,.35); }
.ow-cmp-row:not(.ow-cmp-hd):not(:last-child) .ow-cmp-l,
.ow-cmp-row:not(.ow-cmp-hd):not(:last-child) .ow-cmp-a{ border-bottom:1px solid rgba(38,36,31,.12); }
.ow-cmp-row:not(.ow-cmp-hd):not(:last-child) .ow-cmp-s{ border-bottom:1px solid rgba(250,247,240,.12); }
.ow-cmp-hd > span{ display:block; padding-top:30px; padding-bottom:18px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.5; }
.ow-cmp-hd .ow-cmp-a{ color:var(--charcoal); border-bottom:1px solid rgba(38,36,31,.28); }
.ow-cmp-hd .ow-cmp-s{ color:var(--ivory); border-bottom:1px solid rgba(250,247,240,.28); }
.ow-cmp-hd .ow-cmp-l{ border-bottom:1px solid rgba(38,36,31,.28); }
.ow-cmp-brand{ display:block; margin-bottom:6px; font-family:'Raleway',sans-serif; font-weight:400; font-size:13px; letter-spacing:.42em; color:var(--accent-warm-on-dark); }
.ow-cmp-final .ow-cmp-l, .ow-cmp-final .ow-cmp-a, .ow-cmp-final .ow-cmp-s{ padding-bottom:34px; }
.ow-cmp-final .ow-cmp-tx{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.7vw,24px); line-height:1.35; }
.ow-cmp-final .ow-cmp-a .ow-cmp-tx{ color:#9B9385; }
.ow-cmp-final .ow-cmp-s .ow-cmp-tx{ color:var(--ivory); }
.ow-cmp-final .ow-dash{ margin-top:.95em; }
.ow-cmp-final .ow-cmp-s .ow-tick{ margin-top:6px; }
/* reveal: the dark panel wipes down, then each row's cells rise in and the ticks draw */
html.js-anim .ow-cmp.reveal{ opacity:1; transform:none; }
html.js-anim .ow-cmp.reveal::before{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s cubic-bezier(.2,.75,.18,1) .1s; }
html.js-anim .ow-cmp.reveal.is-visible::before{ clip-path:inset(0 0 0 0); }
html.js-anim .ow-cmp.reveal .ow-cmp-row > span{ opacity:0; transform:translateY(10px); transition:opacity .7s ease var(--cd,240ms), transform .9s cubic-bezier(.2,.75,.18,1) var(--cd,240ms); }
html.js-anim .ow-cmp.reveal .ow-cmp-row > .ow-cmp-s{ transition-delay:calc(var(--cd,240ms) + 120ms); }
html.js-anim .ow-cmp.reveal.is-visible .ow-cmp-row > span{ opacity:1; transform:none; }
html.js-anim .ow-cmp.reveal .ow-tick polyline{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .6s cubic-bezier(.6,0,.3,1) calc(var(--cd,240ms) + 380ms); }
html.js-anim .ow-cmp.reveal.is-visible .ow-tick polyline{ stroke-dashoffset:0; }
@media (prefers-reduced-motion:reduce){
  html.js-anim .reveal .ow-card-bar, html.js-anim .ow-card.reveal .ow-ic, html.js-anim .ow-cmp.reveal .ow-cmp-row > span{ transform:none; opacity:1; transition:none; }
  html.js-anim .ow-cmp.reveal::before{ clip-path:none; transition:none; }
  html.js-anim .reveal .ow-tick polyline{ stroke-dashoffset:0; transition:none; }
}
@media (max-width:1100px) and (min-width:901px){
  .ow-cmp{ --lw:150px; }
  .ow-cmp-a, .ow-cmp-s{ padding-right:30px; }
  .ow-cmp-s{ padding-left:30px; }
}
@media (max-width:900px){
  .ow-in{ padding:0 22px; }
  #page .ow-ways, #page .ow-why{ padding:44px 0; }
  .ow-head{ grid-template-columns:minmax(0,1fr); row-gap:16px; margin-bottom:28px; }
  .ow-lead{ font-size:15.5px; }
  .ow-cards{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .ow-card-b{ font-size:15.5px; }
  .ow-cmp::before{ display:none; }
  .ow-cmp-hd{ display:none !important; }
  .ow-cmp-row{ display:block; padding:20px 0; border-top:1px solid rgba(38,36,31,.12); }
  .ow-cmp-row:nth-child(2){ border-top:0; padding-top:0; }
  .ow-cmp-row > span{ border:0 !important; }
  .ow-cmp-l{ display:block; padding:0 0 12px 0; line-height:1.5; }
  .ow-cmp-a, .ow-cmp-s{ padding:0; }
  .ow-cmp-a{ padding-bottom:14px; }
  .ow-cmp-s{ padding:16px 18px 18px 18px; background:var(--charcoal); }
  .ow-cmp-m{ display:block; grid-column:1 / -1; margin-bottom:8px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A8274; }
  .ow-cmp-s .ow-cmp-m{ color:var(--accent-warm-on-dark); }
  .ow-cmp-final .ow-cmp-l, .ow-cmp-final .ow-cmp-a{ padding-bottom:12px; }
  .ow-cmp-final .ow-cmp-s{ padding-bottom:18px; }
  .ow-cmp-final .ow-cmp-tx{ font-size:20px; }
}
.ow-head .ow-h2{ text-wrap:balance; }

/* ===== 76th pass =====
   Client on the comparison's last row ("What you get"): "Put this in normal
   size please". Same type as the rows above; 75th-pass larger type overridden. */
.ow-cmp-final .ow-cmp-tx{ font-family:inherit; font-weight:inherit; font-size:15.5px; line-height:1.6; }
.ow-cmp-final .ow-cmp-a .ow-cmp-tx{ color:var(--muted); }
.ow-cmp-final .ow-cmp-s .ow-cmp-tx{ color:var(--ivory); }
.ow-cmp-final .ow-dash{ margin-top:.8em; }
.ow-cmp-final .ow-cmp-s .ow-tick{ margin-top:3px; }
@media (max-width:900px){ .ow-cmp-final .ow-cmp-tx{ font-size:15.5px; } }
/* Client on the comparison: "can you create a separation here". A clear gap
   now parts the "Owning alone" side from the dark charter-program panel; the
   row hairlines stop short of it instead of running into the panel. */
.ow-cmp{ --gap:36px; }
.ow-cmp-row{ grid-template-columns:var(--lw) minmax(0,1fr) var(--gap) minmax(0,1fr); }
.ow-cmp-row > .ow-cmp-s{ grid-column:4; }
.ow-cmp::before{ left:calc(var(--lw) + var(--gap) + (100% - var(--lw) - var(--gap)) / 2); }
.ow-cmp-a{ padding-right:28px; }
@media (max-width:1100px) and (min-width:901px){ .ow-cmp{ --gap:24px; } }
/* 77th pass: Why independent principles without numbers */
.why-v2-item.why-v2-nonum{ grid-template-columns:minmax(0,1fr); }

/* ===== 78th pass: Advisory motion (see initAdvMotion in app.js) ===== */
.mo-words .wm{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.mo-words .wi{ display:inline-block; }
html.js-anim .mo-words .wi{ transform:translateY(112%); transition:transform 1.15s cubic-bezier(.2,.75,.18,1) var(--wi,0ms); }
html.js-anim .mo-words.is-visible .wi,
html.js-anim .is-visible .mo-words .wi,
html.js-anim .is-in .mo-words .wi{ transform:none; }
html.js-anim .mo-words.reveal{ opacity:1; transform:none; }

/* hero */
html.js-anim .adv-mo .adv-hero .page-hero-img{ scale:1.09; transition:scale 3.2s cubic-bezier(.16,.8,.3,1); }
html.js-anim .adv-mo .adv-hero.is-in .page-hero-img{ scale:1; }
html.js-anim .adv-mo .adv-hero .page-hero-eyebrow,
html.js-anim .adv-mo .adv-hero .page-hero-body{ opacity:0; transform:translateY(16px); transition:opacity 1.1s ease, transform 1.3s cubic-bezier(.2,.75,.18,1); }
html.js-anim .adv-mo .adv-hero .page-hero-eyebrow{ transition-delay:80ms; }
html.js-anim .adv-mo .adv-hero .page-hero-body{ transition-delay:760ms; }
html.js-anim .adv-mo .adv-hero .hero-scrolldown{ opacity:0; transition:opacity 1.2s ease 1.3s; }
html.js-anim .adv-mo .adv-hero.is-in .page-hero-eyebrow,
html.js-anim .adv-mo .adv-hero.is-in .page-hero-body{ opacity:1; transform:none; }
html.js-anim .adv-mo .adv-hero.is-in .hero-scrolldown{ opacity:1; }

/* service index */
html.js-anim .adv-mo .adv-index.reveal{ opacity:1; transform:none; }
html.js-anim .adv-mo .adv-index.reveal .adv-index-link{ opacity:0; transform:translateY(12px); transition:opacity .8s ease var(--si,0ms), transform 1s cubic-bezier(.2,.75,.18,1) var(--si,0ms), color .25s ease; }
html.js-anim .adv-mo .adv-index.reveal.is-visible .adv-index-link{ opacity:1; transform:none; }
.adv-mo .adv-index-link::after{ content:""; position:absolute; left:clamp(18px,2.6vw,40px); right:clamp(18px,2.6vw,40px); bottom:18px; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.2,.75,.18,1); }
.adv-mo .adv-index-link:hover::after, .adv-mo .adv-index-link:focus-visible::after{ transform:scaleX(1); }

/* service photos: curtain from the outer edge + zoom settle */
html.js-anim .adv-mo .split-img.mo-curtain.reveal{ opacity:1; transform:none; transition:clip-path 1.5s cubic-bezier(.77,0,.18,1); }
html.js-anim .adv-mo .split-img.mo-curtain.from-l.reveal{ clip-path:inset(0 100% 0 0); }
html.js-anim .adv-mo .split-img.mo-curtain.from-r.reveal{ clip-path:inset(0 0 0 100%); }
html.js-anim .adv-mo .split-img.mo-curtain.reveal.is-visible{ clip-path:inset(0 0 0 0); }
html.js-anim .adv-mo .split-img.mo-curtain img{ scale:1.28; transition:scale 2.1s cubic-bezier(.16,.8,.3,1), transform 1.3s cubic-bezier(.16,.8,.3,1); }
html.js-anim .adv-mo .split-img.mo-curtain.is-visible img{ scale:1.08; }

/* ticks draw in one by one */
html.js-anim .adv-mo .reveal .adv-list .service-item{ opacity:0; transform:translateY(8px); transition:opacity .7s ease var(--si,0ms), transform .9s cubic-bezier(.2,.75,.18,1) var(--si,0ms); }
html.js-anim .adv-mo .reveal.is-visible .adv-list .service-item{ opacity:1; transform:none; }
html.js-anim .adv-mo .reveal .adv-list .service-check{ transform:scale(.6); transition:transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--si,0ms) + 120ms); }
html.js-anim .adv-mo .reveal.is-visible .adv-list .service-check{ transform:none; }
html.js-anim .adv-mo .reveal .adv-list .service-check polyline{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .55s cubic-bezier(.6,0,.3,1) calc(var(--si,0ms) + 260ms); }
html.js-anim .adv-mo .reveal.is-visible .adv-list .service-check polyline{ stroke-dashoffset:0; }

/* Build stepper: the stage line draws across, the stages follow it */
html.js-anim .adv-mo .reveal .stg-row::before{ transform:scaleX(0); transform-origin:left center; transition:transform 1.4s cubic-bezier(.2,.75,.18,1) .25s; }
html.js-anim .adv-mo .reveal.is-visible .stg-row::before{ transform:scaleX(1); }
html.js-anim .adv-mo .reveal .stg-b{ opacity:0; transform:translateY(10px); transition:opacity .7s ease var(--si,0ms), transform .9s cubic-bezier(.2,.75,.18,1) var(--si,0ms); }
html.js-anim .adv-mo .reveal.is-visible .stg-b{ opacity:1; transform:none; }

/* price rule draws in above the price and button */
.adv-mo .adv-svc .pp-buy{ position:relative; border-top-color:transparent; }
.adv-mo .adv-svc .pp-buy::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--rule); transform-origin:left center; }
html.js-anim .adv-mo .reveal .pp-buy::before{ transform:scaleX(0); transition:transform 1.3s cubic-bezier(.2,.75,.18,1) .5s; }
html.js-anim .adv-mo .reveal.is-visible .pp-buy::before{ transform:scaleX(1); }
html.js-anim .adv-mo .reveal .pp-buy > *{ opacity:0; transform:translateY(8px); transition:opacity .8s ease .8s, transform 1s cubic-bezier(.2,.75,.18,1) .8s; }
html.js-anim .adv-mo .reveal.is-visible .pp-buy > *{ opacity:1; transform:none; }

/* Why independent */
html.js-anim .adv-mo .why-v2-head.reveal .why-v2-rule{ transform:scaleX(0); transform-origin:left center; transition:transform 1s cubic-bezier(.2,.75,.18,1) .75s; }
html.js-anim .adv-mo .why-v2-head.reveal.is-visible .why-v2-rule{ transform:scaleX(1); }
html.js-anim .adv-mo .why-v2-head.reveal .why-v2-lead{ opacity:0; transform:translateY(10px); transition:opacity .9s ease .9s, transform 1.1s cubic-bezier(.2,.75,.18,1) .9s; }
html.js-anim .adv-mo .why-v2-head.reveal.is-visible .why-v2-lead{ opacity:1; transform:none; }
html.js-anim .adv-mo .why-v2-list.reveal{ opacity:1; transform:none; }
html.js-anim .adv-mo .why-v2-list.reveal .why-v2-item > div{ opacity:0; transform:translateY(14px); transition:opacity .9s ease var(--si,0ms), transform 1.1s cubic-bezier(.2,.75,.18,1) var(--si,0ms); }
html.js-anim .adv-mo .why-v2-list.reveal.is-visible .why-v2-item > div{ opacity:1; transform:none; }

/* FAQ + closing */
html.js-anim .adv-mo .reveal .faq-item{ opacity:0; transform:translateY(10px); transition:opacity .7s ease var(--si,0ms), transform .9s cubic-bezier(.2,.75,.18,1) var(--si,0ms); }
html.js-anim .adv-mo .reveal.is-visible .faq-item{ opacity:1; transform:none; }
html.js-anim .adv-mo img.mo-zoom.reveal{ opacity:1; transform:none; scale:1.12; transition:scale 3s cubic-bezier(.16,.8,.3,1); }
html.js-anim .adv-mo img.mo-zoom.reveal.is-visible{ scale:1; }

/* ===== 78th pass: footer sign-up, centred editorial version ===== */
.fx-news.fx-news3{ display:block; max-width:1360px; margin:0 auto; text-align:center; padding:clamp(4px,.6vw,10px) 0 clamp(46px,4.8vw,66px); border-bottom:1px solid var(--rule); }
.fx3-rule{ display:block; width:44px; height:1px; margin:0 auto 24px auto; background:var(--accent-warm); transform-origin:center; }
.fx-news3 .footer-news-h{ margin:0; }
.fx3-line{ margin:14px auto 0 auto; max-width:21em; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(24px,2.3vw,32px); line-height:1.3; letter-spacing:-0.005em; color:var(--charcoal); text-wrap:balance; }
.fx-news3 .fx3-form{ position:relative; display:flex; align-items:stretch; gap:0; max-width:500px; margin:32px auto 0 auto; border-bottom:1px solid rgba(38,36,31,.32); transition:border-color .3s ease; }
.fx-news3 .fx3-form::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:center; transition:transform .6s cubic-bezier(.2,.75,.18,1); }
.fx-news3 .fx3-form:focus-within::after{ transform:scaleX(1); }
.fx-news3 .fx3-form input{ flex:1 1 auto; min-width:0; height:54px; padding:0 4px; border:0; border-radius:0; background:transparent !important; font-family:'Montserrat',sans-serif; font-size:15px; color:var(--charcoal); text-align:left; }
.fx-news3 .fx3-form input::placeholder{ color:#958E80; }
.fx-news3 .fx3-form input:focus{ outline:none; }
.fx-news3 .fx3-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:12px; height:54px; padding:0 2px 0 20px; border:0; border-radius:0; background:transparent; color:var(--accent-warm); font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:color .3s ease; }
.fx-news3 .fx3-btn svg{ width:22px; height:11px; transition:transform .45s cubic-bezier(.2,.75,.18,1); }
.fx-news3 .fx3-btn:hover{ background:transparent; color:#8A3F22; }
.fx-news3 .fx3-btn:hover svg, .fx-news3 .fx3-btn:focus-visible svg{ transform:translateX(5px); }
.fx-news3 .fx3-btn:focus-visible{ outline:1px solid var(--accent-warm); outline-offset:4px; }
.fx-news3 .fx3-form.is-error{ border-bottom-color:#A33A2A; }
.fx-news3 .footer-news-note{ margin:14px 0 0 0; text-align:center; font-size:11.5px; color:var(--muted); }
.fx-news3 .footer-news-note.is-error{ color:#A33A2A; }
.fx-news3 .footer-news-done{ justify-content:center; margin:30px 0 0 0; font-size:15px; }
html.js-anim .fx-news3.reveal{ opacity:1; transform:none; }
html.js-anim .fx-news3.reveal .fx3-rule{ transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.18,1) .1s; }
html.js-anim .fx-news3.reveal > :not(.fx3-rule){ opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.75,.18,1); }
html.js-anim .fx-news3.reveal > .footer-news-h{ transition-delay:.25s; }
html.js-anim .fx-news3.reveal > .fx3-line{ transition-delay:.4s; }
html.js-anim .fx-news3.reveal > .fx3-form{ transition-delay:.6s; }
html.js-anim .fx-news3.reveal > .footer-news-note{ transition-delay:.75s; }
html.js-anim .fx-news3.reveal.is-visible .fx3-rule{ transform:scaleX(1); }
html.js-anim .fx-news3.reveal.is-visible > :not(.fx3-rule){ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.js-anim .fx-news3.reveal > *{ opacity:1 !important; transform:none !important; transition:none !important; } }
@media (max-width:860px){
  .fx3-line{ font-size:23px; }
  .fx-news3 .fx3-form{ margin-top:26px; }
  .fx-news3 .fx3-btn{ padding-left:14px; letter-spacing:.16em; }
}
/* word spans inherit their line's colour (the title's second line stays soft, the first stays white) */
.why-v2-title .wm, .why-v2-title .wi{ color:inherit; }

/* ===== 79th pass =====
   Client: "technical advisory — big gap on the left column bullet points,
   needs to be same spacing". The two-column tick lists were a row grid, so
   one long item on the right stretched its whole row and opened a gap on
   the left. They now flow as two independent columns with even spacing.
   Same treatment on the Ownership lists, which share the component. */
@media (min-width:481px){
  #page .service-list.adv-list{ display:block; column-count:2; column-gap:28px; }
  #page .service-list.adv-list .service-item{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 var(--li-gap,9px) 0; }
  #page .ov-one .service-list.ov-list, #page .ov-svc .service-list.ov-list{ --li-gap:12px; }
}
@media (min-width:481px) and (max-width:900px){
  #page .ov-one .service-list.ov-list, #page .ov-svc .service-list.ov-list{ column-count:1; }
}
/* the footer note is empty now ("Unsubscribe at any time" removed); it only shows for errors */
.fx-news3 .footer-news-note:empty{ display:none; }
/* season place line under the region name (Antigua & Barbuda, The Balearics) */
.sq-hero-place{ display:block; margin-top:14px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(11px,1.6cqi,13px); letter-spacing:.24em; text-transform:uppercase; color:rgba(250,247,240,.9); }
@media (max-width:900px){ .sq-hero-place{ margin-top:10px; font-size:11px; } }

/* 79th pass: condensed Ownership — options + selective note inside Stewardship */
#page .ov-intro.ov-intro-c{ padding:clamp(56px,5.4vw,80px) 0; }
.ow-opts{ margin-top:clamp(40px,4vw,60px); }
.ow-opts-head{ display:flex; align-items:baseline; gap:22px; flex-wrap:wrap; padding-top:clamp(30px,3vw,42px); border-top:1px solid rgba(38,36,31,.14); margin-bottom:clamp(22px,2.2vw,30px); }
.ow-opts-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(22px,2vw,28px); line-height:1.2; color:var(--charcoal); }
.ow-cards-c .ow-card{ padding:clamp(26px,2.6vw,36px) clamp(26px,2.8vw,40px) clamp(22px,2.2vw,28px); }
.ow-cards-c .ow-card-t{ font-size:clamp(24px,2vw,30px); }
.ow-cards-c .ow-pts{ margin:20px 0 20px 0; padding-top:20px; }
.ow-sel{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(32px,4vw,64px); row-gap:18px; align-items:center; margin-top:clamp(24px,2.4vw,32px); padding:clamp(22px,2.2vw,28px) 0 0 0; border-top:1px solid rgba(38,36,31,.14); }
.ow-sel-t{ margin:0; max-width:46em; font-size:15.5px; line-height:1.7; color:var(--muted); }
.ow-sel-t strong{ font-weight:600; color:var(--charcoal); }
.ow-sel-cta{ display:flex; align-items:center; gap:24px; }
.ow-sel-last{ margin:0; max-width:15em; font-size:14px; line-height:1.55; font-style:italic; color:var(--muted); text-align:right; }
@media (max-width:1100px){ .ow-sel{ grid-template-columns:minmax(0,1fr); } .ow-sel-last{ text-align:left; } }
@media (max-width:900px){
  #page .ov-intro.ov-intro-c{ padding:44px 0; }
  .ow-opts{ margin-top:32px; }
  .ow-opts-head{ padding-top:26px; gap:10px; }
  .ow-sel-cta{ flex-direction:column; align-items:flex-start; gap:14px; }
}
.ow-sel-last{ max-width:19em; }
/* 79th pass: 'This is not a typical charter boat.' leads the Solace Difference copy */
#philosophy .exp-philosophy-copy p:first-child{ color:var(--charcoal); font-size:1.06em; }

/* ===== 80th pass: Ownership options, clearer layout ===== */
#page .ow2{ padding:clamp(56px,5.4vw,84px) 0; }
.ow2-head{ text-align:center; margin:0 auto clamp(30px,3vw,44px) auto; max-width:40em; }
.ow2-h{ margin:14px 0 0 0; text-wrap:balance; }
.ow2-cards{ max-width:1040px; margin:0 auto; }
.ow2-card{ padding:clamp(28px,2.8vw,40px) clamp(26px,2.8vw,40px) clamp(22px,2.2vw,30px); }
.ow2-card .ow-card-t{ font-size:clamp(24px,2vw,30px); }
.ow2-sub{ margin:14px 0 0 0; font-size:15px; line-height:1.6; color:var(--muted); font-style:italic; }
.ow2-card .ow-pts{ margin:20px 0 0 0; padding-top:20px; }
.ow2-sel{ max-width:620px; margin:clamp(40px,4vw,56px) auto 0 auto; text-align:center; }
.ow2-sel-rule{ display:block; width:44px; height:1px; margin:0 auto 22px auto; background:var(--accent-warm); transform-origin:center; }
.ow2-sel-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(22px,1.9vw,27px); line-height:1.25; color:var(--charcoal); }
.ow2-sel-p{ margin:12px auto 0 auto; font-size:15.5px; line-height:1.7; color:var(--muted); text-wrap:pretty; }
.ow2-sel-last{ margin:16px 0 22px 0; font-size:15px; line-height:1.6; color:var(--charcoal); }
html.js-anim .ow2-sel.reveal .ow2-sel-rule{ transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.18,1) .15s; }
html.js-anim .ow2-sel.reveal.is-visible .ow2-sel-rule{ transform:scaleX(1); }
@media (max-width:900px){
  #page .ow2{ padding:44px 0; }
  .ow2-head{ text-align:left; margin-bottom:24px; }
  .ow2-sel{ text-align:left; margin-top:34px; }
  .ow2-sel-rule{ margin-left:0; }
}

/* ===== 81st pass: booked weeks, 48-hour hold, call booking ===== */
/* Sailing Dates rows */
button.sw3-date{ width:100%; background:none; border:0; margin:0; font:inherit; text-align:left; cursor:pointer; color:var(--charcoal); }
.sw3-avail{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:18px 0 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.sw3-avail-n{ font-weight:600; color:var(--accent-warm); letter-spacing:.02em; }
.sw3-avail-sep{ width:1px; height:12px; background:var(--rule); }
.sw3-avail + .sw3-list{ margin-top:16px; }
.sw3-booked{ grid-template-columns:minmax(0,1fr) auto auto !important; cursor:default; }
.sw3-booked .sw3-days{ color:#B3AB9E; text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:rgba(38,36,31,.35); }
.sw3-booked .sw3-month{ color:#B3AB9E; }
.sw3-booked::after{ display:none; }
.sw3-booked:hover .sw3-days{ transform:none; }
.sw3-tag{ align-self:center; padding:4px 10px; border:1px solid rgba(38,36,31,.18); border-radius:999px; font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#9A9284; white-space:nowrap; line-height:1.3; }
.is-held{ grid-template-columns:minmax(0,1fr) auto auto !important; }
.sw3-tag-held{ border-color:var(--accent-warm); color:var(--accent-warm); }

/* Hold panel */
html.hd-open{ overflow:hidden; }
.hd-overlay{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:24px; }
.hd-scrim{ position:absolute; inset:0; background:rgba(33,29,24,.55); opacity:0; transition:opacity .35s ease; }
.hd-panel{ position:relative; width:100%; max-width:600px; max-height:calc(100vh - 48px); overflow:auto; overscroll-behavior:contain; background:var(--ivory); padding:clamp(34px,4vw,48px) clamp(26px,4vw,52px) clamp(30px,3.4vw,42px); box-shadow:0 40px 90px -30px rgba(20,18,14,.55); opacity:0; transform:translateY(18px); transition:opacity .4s ease, transform .55s cubic-bezier(.2,.75,.18,1); outline:none; }
.hd-overlay.is-in .hd-scrim{ opacity:1; }
.hd-overlay.is-in .hd-panel{ opacity:1; transform:none; }
.hd-x{ position:absolute; top:14px; right:14px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:none; border:0; border-radius:50%; color:var(--charcoal); cursor:pointer; transition:background-color .25s ease; }
.hd-x:hover{ background:rgba(38,36,31,.06); }
.hd-x svg{ width:20px; height:20px; }
.hd-title{ margin:16px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(34px,3.6vw,46px); line-height:1.08; color:var(--charcoal); }
.hd-title .hd-days{ display:block; }
.hd-title .hd-my{ display:block; margin-top:6px; font-size:.5em; font-weight:300; letter-spacing:.01em; color:var(--muted); }
.hd-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:16px 0 0 0; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--charcoal); }
.hd-scarce{ letter-spacing:.06em; text-transform:none; font-size:13px; color:var(--accent-warm); }
.hd-intro{ margin:18px 0 0 0; padding-top:18px; border-top:1px solid var(--rule); font-size:15px; line-height:1.7; color:var(--muted); }
.hd-form{ margin-top:22px; }
.hd-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; margin-bottom:14px; }
.hd-field{ display:block; min-width:0; }
.hd-field > span{ display:block; margin-bottom:8px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hd-field input, .hd-field select{ width:100%; box-sizing:border-box; height:48px; border:1px solid var(--rule); background:#FFFDF8; padding:0 14px; font-family:'Montserrat',sans-serif; font-size:15px; color:var(--charcoal); border-radius:2px; transition:border-color .25s ease; }
.hd-field input:focus, .hd-field select:focus{ outline:none; border-color:var(--accent-warm); }
.hd-phone{ grid-template-columns:86px minmax(0,1fr); gap:8px; }
.hd-phone .ct-cc input{ padding-left:26px; }
.hd-phone .ct-plus{ left:12px; }
.hd-err{ margin:4px 0 0 0; font-size:13px; color:#A33A2A; }
.hd-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:20px; }
.hd-btn, .cp-confirm{ display:inline-flex; align-items:center; justify-content:center; padding:14px 34px; border:1px solid var(--accent-warm); border-radius:999px; background:var(--accent-warm); color:var(--ivory); font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; line-height:1.2; cursor:pointer; transition:background-color .3s ease, border-color .3s ease, opacity .3s ease; }
.hd-btn:hover, .cp-confirm:hover:not(:disabled){ background:#8A3F22; border-color:#8A3F22; }
.hd-btn:focus-visible, .cp-confirm:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:3px; }
.hd-ask{ font-size:13.5px; color:var(--charcoal); text-decoration:underline; text-decoration-color:rgba(38,36,31,.3); text-underline-offset:4px; }
.hd-ask:hover{ color:var(--accent-warm); text-decoration-color:var(--accent-warm); }
/* held */
.hd-done-stage{ text-align:left; }
.hd-seal{ display:block; width:52px; height:52px; color:var(--accent-warm); margin-bottom:18px; }
.hd-seal svg{ width:100%; height:100%; }
.hd-seal path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .7s cubic-bezier(.6,0,.3,1) .25s; }
.hd-done-stage.is-in .hd-seal path{ stroke-dashoffset:0; }
.hd-title-done{ font-size:clamp(30px,3.2vw,40px); }
.hd-held{ margin:14px 0 0 0; font-size:15.5px; line-height:1.7; color:var(--muted); }
.hd-held strong{ font-weight:600; color:var(--charcoal); }
.hd-call{ margin-top:26px; padding-top:24px; border-top:1px solid var(--rule); }
.hd-close-link{ margin-top:26px; padding:0; background:none; border:0; font:inherit; font-size:13.5px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.hd-close-link:hover{ color:var(--accent-warm); }
@media (prefers-reduced-motion:reduce){ .hd-panel, .hd-scrim{ transition:none; } .hd-seal path{ stroke-dashoffset:0; transition:none; } }
@media (max-width:640px){
  .hd-overlay{ align-items:flex-end; padding:0; }
  .hd-panel{ max-width:none; max-height:92vh; border-radius:16px 16px 0 0; padding:34px 22px 28px; transform:translateY(40px); }
  .hd-row{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .hd-title{ font-size:34px; }
}

/* Call picker */
.cp-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(21px,1.8vw,25px); line-height:1.25; color:var(--charcoal); }
.cp-intro{ margin:8px 0 0 0; font-size:14px; line-height:1.6; color:var(--muted); }
.cp-days{ display:flex; gap:8px; margin:18px 0 0 0; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.cp-days::-webkit-scrollbar{ display:none; }
.cp-day{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:62px; padding:10px 8px 9px; border:1px solid var(--rule); background:#FFFDF8; border-radius:2px; font:inherit; color:var(--charcoal); cursor:pointer; transition:border-color .25s ease, background-color .25s ease, color .25s ease; }
.cp-day:hover{ border-color:rgba(168,77,42,.5); }
.cp-day.is-on{ background:var(--charcoal); border-color:var(--charcoal); color:var(--ivory); }
.cp-dw{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
.cp-dn{ font-family:'Raleway',sans-serif; font-weight:300; font-size:22px; line-height:1.1; }
.cp-dm{ font-size:10.5px; letter-spacing:.06em; opacity:.75; }
.cp-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin:14px 0 0 0; }
.cp-slot{ padding:11px 8px; border:1px solid var(--rule); background:#FFFDF8; border-radius:999px; font:inherit; font-size:14px; color:var(--charcoal); cursor:pointer; transition:border-color .25s ease, background-color .25s ease, color .25s ease; }
.cp-slot small{ font-size:10px; color:var(--muted); }
.cp-slot:hover{ border-color:var(--accent-warm); color:var(--accent-warm); }
.cp-slot.is-on{ background:var(--accent-warm); border-color:var(--accent-warm); color:var(--ivory); }
.cp-slot.is-on small{ color:rgba(250,247,240,.8); }
.cp-confirm{ margin-top:18px; }
.cp-confirm:disabled{ opacity:.35; cursor:default; }
.cp-done{ display:flex; gap:14px; align-items:flex-start; margin-top:16px; }
.cp-done[hidden]{ display:none; }
.cp-tick{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--accent-warm); color:var(--ivory); display:inline-flex; align-items:center; justify-content:center; }
.cp-tick svg{ width:15px; height:15px; }
.cp-done-h{ margin:2px 0 0 0; font-size:16px; font-weight:600; color:var(--charcoal); }
.cp-done-b{ margin:6px 0 0 0; font-size:14.5px; line-height:1.6; color:var(--muted); }
.cp-change{ margin-top:8px; padding:0; background:none; border:0; font:inherit; font-size:13px; color:var(--accent-warm); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
/* in the enquiry thank-you */
.ct-call{ max-width:560px; margin:28px auto 0 auto; padding:26px 0 0 0; border-top:1px solid var(--rule); text-align:left; }
.cp-slots{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:420px; }
.ct-call{ text-align:center; }
.ct-call .cp-days{ justify-content:center; }
.ct-call .cp-slots{ margin-left:auto; margin-right:auto; }
.ct-call .cp-done{ justify-content:center; text-align:left; }
@media (max-width:640px){ .ct-call .cp-days{ justify-content:flex-start; } }
@media (max-width:640px){ .sw3-avail{ flex-direction:column; align-items:flex-start; gap:2px; } .sw3-avail-sep{ display:none; } }

/* ===== 82nd pass: "what happens next" tracker (enquiry thank-you + hold panel) ===== */
.nx{ list-style:none; margin:40px auto 0 auto; padding:0; max-width:560px; text-align:left; }
.nx-step{ position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:18px; padding-bottom:30px; }
.nx-step:last-child{ padding-bottom:0; }
.nx-step::before{ content:''; position:absolute; left:15.5px; top:38px; bottom:6px; width:1px; background:var(--rule); }
.nx-step:last-child::before{ display:none; }
.nx-step.is-done::before{ background:var(--accent-warm); opacity:.55; }
.nx-mark{ position:relative; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-sizing:border-box; border:1px solid var(--rule); background:var(--ivory); color:var(--ivory); }
.nx-mark svg{ width:15px; height:15px; opacity:0; }
.nx-step.is-done .nx-mark{ background:var(--accent-warm); border-color:var(--accent-warm); }
.nx-step.is-done .nx-mark svg{ opacity:1; }
.nx-step.is-now .nx-mark{ border:1.5px solid var(--accent-warm); }
.nx-step.is-now .nx-mark::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--accent-warm); }
.nx-step.is-now .nx-mark::before{ content:''; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--accent-warm); animation:nxPulse 2.4s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes nxPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.7); opacity:0; } }
.nx-step.is-up .nx-mark{ border-color:var(--accent-warm); }
.nx-body{ min-width:0; padding-top:4px; }
.nx-h{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:20px; line-height:1.3; color:var(--charcoal); }
.nx-step.is-next:not(.is-up) .nx-h{ color:#8A8274; }
.nx-tag{ padding:3px 9px; border:1px solid var(--rule); border-radius:999px; font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); line-height:1.4; }
.nx-step.is-done .nx-tag{ border-color:rgba(168,77,42,.35); color:var(--accent-warm); }
.nx-step.is-now .nx-tag{ background:var(--accent-warm); border-color:var(--accent-warm); color:var(--ivory); }
.nx-b{ margin:6px 0 0 0; font-size:15px; line-height:1.65; color:var(--muted); text-wrap:pretty; }
.nx-b strong{ font-weight:600; color:var(--charcoal); }
.nx-recap{ margin:12px 0 0 0; padding:0; display:grid; row-gap:6px; }
.nx-recap > div{ display:grid; grid-template-columns:118px minmax(0,1fr); column-gap:12px; align-items:baseline; }
.nx-recap dt{ font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#9A9284; }
.nx-recap dd{ margin:0; font-size:14px; color:var(--charcoal); overflow-wrap:anywhere; }
/* the current step reads as the one to act on */
.nx-step.is-now .nx-body{ margin-top:-8px; padding:14px 20px 20px 20px; background:#FFFDF8; border:1px solid var(--rule); box-shadow:0 18px 40px -30px rgba(38,36,31,.35); }
.nx .cp{ margin-top:4px; }
.nx .cp-intro{ margin-top:10px; font-size:13px; }
.nx .cp-days{ margin-top:12px; }
.nx .cp-done{ margin-top:12px; }
/* in the hold panel */
.hd-steps .nx{ margin-top:24px; max-width:none; }
@media (prefers-reduced-motion:reduce){ .nx-step.is-now .nx-mark::before{ animation:none; display:none; } }
@media (max-width:640px){
  .nx{ margin-top:30px; }
  .nx-step{ grid-template-columns:28px minmax(0,1fr); column-gap:14px; }
  .nx-mark{ width:28px; height:28px; }
  .nx-step::before{ left:13.5px; top:34px; }
  .nx-step.is-now .nx-body{ padding:12px 14px 16px 14px; }
  .nx-h{ font-size:18px; }
  .nx-recap > div{ grid-template-columns:96px minmax(0,1fr); }
}
.nx-step.is-done .cp-intro{ display:none; }
.nx .cp-tick, .nx .cp-done-h{ display:none; }
.nx .cp-done-b{ margin-top:0; }
.nx .cp-day{ min-width:56px; }
.nx .cp-days{ gap:6px; }

/* ===== 83rd pass: no lone last words =====
   Headings balance their lines; paragraphs avoid a one-word last line
   (supporting browsers). app.js also glues the last two words together. */
#app h1, #app h2, #app h3, #app h4, #app .ov-statement, #app .ov-line-in, #app .nx-h, #app .cp-h, #app blockquote{ text-wrap:balance; }
#app p, #app li, #app dd, #app figcaption{ text-wrap:pretty; }
/* small phones: long button labels (e.g. "Discuss Delivery & Repositioning") wrap inside the screen */
@media (max-width:420px){ #page .btn{ max-width:100%; white-space:normal; text-align:center; line-height:1.35; } }

/* ===== 83rd pass: Privacy and Terms pages ===== */
#page .lg-page{ padding:clamp(130px,12vw,170px) 0 clamp(70px,7vw,110px); }
.lg-head{ max-width:1100px; margin:0 auto; padding:0 64px; box-sizing:border-box; }
.lg-h1{ margin:16px 0 0 0; }
.lg-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:18px 0 0 0; font-size:12.5px; letter-spacing:.04em; color:var(--muted); }
.lg-draft{ padding:3px 10px; border:1px solid rgba(168,77,42,.35); border-radius:999px; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-warm); }
.lg-intro{ margin:26px 0 0 0; max-width:38em; }
.lg-grid{ max-width:1100px; margin:clamp(40px,4.4vw,64px) auto 0 auto; padding:clamp(34px,3.4vw,48px) 64px 0; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr); column-gap:clamp(40px,6vw,96px); border-top:1px solid var(--rule); }
.lg-index{ position:sticky; top:110px; align-self:start; }
.lg-index ol{ list-style:none; margin:0; padding:0; display:grid; row-gap:2px; counter-reset:lg; }
.lg-index li{ counter-increment:lg; }
.lg-index a{ display:grid; grid-template-columns:26px minmax(0,1fr); padding:7px 0; font-size:13.5px; line-height:1.45; color:var(--muted); transition:color .25s ease; }
.lg-index a::before{ content:counter(lg, decimal-leading-zero); font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--accent-warm); padding-top:2px; }
.lg-index a:hover{ color:var(--charcoal); }
.lg-sec{ scroll-margin-top:110px; padding-bottom:clamp(26px,2.6vw,36px); margin-bottom:clamp(26px,2.6vw,36px); border-bottom:1px solid var(--rule); }
.lg-h2{ margin:0 0 14px 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(22px,1.9vw,27px); line-height:1.25; color:var(--charcoal); }
.lg-sec p{ margin:0 0 12px 0; max-width:40em; font-size:15.5px; line-height:1.8; color:#55504A; }
.lg-sec p:last-child{ margin-bottom:0; }
.lg-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:8px; }
.lg-foot p{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:21px; color:var(--charcoal); }
.lg-other{ margin:34px 0 0 0; font-size:13px; letter-spacing:.06em; }
.lg-other a{ color:var(--muted); border-bottom:1px solid var(--rule); padding-bottom:3px; transition:color .25s ease, border-color .25s ease; }
.lg-other a:hover{ color:var(--accent-warm); border-color:var(--accent-warm); }
@media (max-width:900px){
  #page .lg-page{ padding:110px 0 64px; }
  .lg-head{ padding:0 22px; }
  .lg-grid{ grid-template-columns:minmax(0,1fr); padding:28px 22px 0; row-gap:28px; }
  .lg-index{ position:static; }
  .lg-index ol{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px; }
  .lg-index a{ padding:5px 0; font-size:13px; }
}
.footer-legal a{ cursor:pointer; }

/* ===== 85th pass: Advisory fee plates =====
   Colleague: Build Advisory's price "reads as if it was still under the
   $995". Each service's price now sits in its own plate, named for the
   service ("Build Advisory · Fee"), with a fine orange top edge that draws
   in, so it can't be read as belonging to the section above. */
#page .adv-svc .pp-buy{ position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:18px 28px; margin-top:24px; padding:20px 24px 20px 24px; border:1px solid rgba(38,36,31,.12); border-top-color:transparent; background:#F6F1E7; box-shadow:0 18px 36px -30px rgba(38,36,31,.35); }
#page .exp-type.sand.adv-svc .pp-buy{ background:var(--ivory); }
#page .adv-svc .pp-buy::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:var(--accent-warm); transform-origin:left center; }
.pp-fee{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.pp-label{ display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-warm); line-height:1.4; }
.pp-label .pp-label-dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.7; }
#page .adv-svc .pp-price{ margin:0 !important; }
#page .adv-svc .pp-price strong{ font-family:'Raleway',sans-serif; font-weight:300; font-size:24px; line-height:1.2; color:var(--charcoal); }
#page .adv-svc .pp-price span{ font-size:13px; line-height:1.55; color:var(--muted); }
#page .adv-svc .pp-price-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
#page .adv-svc .pp-buy .btn{ flex:0 0 auto; }
@media (max-width:640px){
  #page .adv-svc .pp-buy{ flex-wrap:wrap; padding:18px 18px 20px; }
  #page .adv-svc .pp-buy .btn{ width:100%; justify-content:center; }
}
.pp-label{ white-space:nowrap; }
#page .adv-svc .pp-buy{ flex-wrap:wrap; }
#page .adv-svc .pp-fee{ flex:1 1 250px; }
/* client comment: Pre-Purchase button on the right like the others, its label on two lines so it fits the panel */
@media (min-width:641px){
  #page #pre-purchase .pp-buy{ flex-wrap:nowrap; }
  #page #pre-purchase .pp-fee{ flex:1 1 auto; }
  #page #pre-purchase .pp-buy .btn{ flex:0 0 auto; max-width:200px; white-space:normal; text-wrap:balance; text-align:center; line-height:1.4; padding:12px 24px; }
}
/* client comments: every fee button sits on the right of its panel; a long label
   ("Start Your Purchase Journey", "Discuss Technical Advisory") breaks onto two
   lines instead of dropping below */
@media (min-width:641px){
  #page .adv-svc .pp-buy{ flex-wrap:nowrap; }
  #page .adv-svc .pp-fee{ flex:1 1 auto; }
  #page .adv-svc .pp-buy .btn{ flex:0 1 auto; max-width:240px; white-space:normal; text-wrap:balance; text-align:center; line-height:1.4; padding:12px 24px; }
  #page #pre-purchase .pp-buy .btn{ max-width:240px; }
}
@media (min-width:641px){
  #page .adv-svc .pp-fee{ flex:1 1 0%; min-width:auto; }
  #page .adv-svc .pp-buy .btn{ flex:0 1 auto; min-width:150px; }
}
@media (min-width:641px){ #page .adv-svc .pp-buy .btn, #page #pre-purchase .pp-buy .btn{ max-width:none; } }
@media (min-width:641px){ #page #pre-purchase .pp-buy .btn{ flex:0 1 auto; min-width:150px; } }
@media (min-width:641px){ #page .adv-svc .pp-buy .btn, #page #pre-purchase .pp-buy .btn{ max-width:250px; } }

/* ===== 86th pass: the Solace wordmark (inline SVG, see solaceLogo()) ===== */
:root{ --logo-ink:#0F1720; --logo-copper:#B86F4B; }
.slogo{ display:block; height:12px; width:auto; aspect-ratio:467.1 / 26.3; overflow:visible; }
.slogo-l{ fill:currentColor; transition:fill .3s ease; }
.slogo-o{ fill:var(--logo-copper); }
.nav-logo{ display:inline-flex; align-items:center; line-height:0; letter-spacing:0; font-size:0; padding:8px 0; }
.nav.is-scrolled .nav-logo, .nav.solid-from-start .nav-logo{ color:var(--logo-ink); }
.footer-logo{ line-height:0; letter-spacing:0; font-size:0; color:var(--logo-ink); }
.footer-logo .slogo{ height:13px; }
@media (max-width:900px){ .nav-logo .slogo{ height:10px; } }
@media (max-width:380px){ .nav-logo .slogo{ height:9px; } }

/* ===== 87th pass: name-first section headings =====
   Colleague: "it might make sense to have the main thing you're talking
   about be bigger text, rather than the subheading". On the Ownership and
   Advisory service sections the service name is now the heading, with its
   tagline under it in a softer, smaller line. A short orange rule above the
   name replaces the small orange eyebrow. */
.nh-name{ position:relative; margin:0; padding-top:24px; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(32px,3.1vw,46px); line-height:1.1; letter-spacing:-0.005em; color:var(--charcoal); }
.nh-name::before{ content:""; position:absolute; left:0; top:0; width:32px; height:1px; background:var(--accent-warm); transform-origin:left center; }
.nh-tag{ margin:12px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(19px,1.6vw,23px); line-height:1.35; color:#7A7266; text-wrap:balance; }
html.js-anim .reveal .nh-name::before, html.js-anim .reveal.nh-name::before{ transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.18,1) .2s; }
html.js-anim .reveal.is-visible .nh-name::before, html.js-anim .reveal.nh-name.is-visible::before{ transform:scaleX(1); }
/* Stewardship: its three-line promise becomes the tagline, still rising in line by line */
#page .ov-intro .nh-statement{ margin-top:14px; font-size:clamp(22px,1.9vw,27px); line-height:1.3; font-weight:300; }
#page .ov-intro .nh-statement .ov-soft{ color:#8A8274; }
/* Two ways to own: centred */
.ow2-head .nh-name::before{ left:50%; margin-left:-16px; transform-origin:center; }
.ow2-head .nh-tag{ margin-left:auto; margin-right:auto; }
/* Ownership service sections: the body follows the tagline */
.ov-one .nh-tag + .ov-p, .ov-journey-sec .nh-tag + .ov-p{ margin-top:22px; }
.ow-head .nh-tag{ max-width:18em; }
/* Advisory: the number sits above the name; the name takes the heading size */
#page .adv-svc .split-index.nh-num{ margin-bottom:14px; }
#page .adv-svc .split-text h3.nh-name{ font-size:clamp(30px,2.8vw,42px); margin:0; }
#page .adv-svc .split-text .nh-tag{ margin:10px 0 18px 0; font-size:clamp(18px,1.45vw,21px); }
#page .adv-svc .split-text .nh-name::before{ display:none; }
#page .adv-svc .split-text h3.nh-name{ padding-top:0; }
@media (max-width:900px){
  .nh-name{ font-size:32px; padding-top:20px; }
  .nh-tag{ font-size:19px; }
  .ow2-head .nh-name::before{ left:0; margin-left:0; }
  .ow2-head .nh-tag{ margin-left:0; }
  #page .adv-svc .split-text h3.nh-name{ font-size:30px; }
}
/* Advisory: the number gets the same short orange rule as the Ownership headings */
#page .adv-svc .split-index.nh-num{ gap:12px; color:var(--accent-warm); }
#page .adv-svc .split-index.nh-num::before{ color:var(--accent-warm); }
#page .adv-svc .split-index.nh-num::after{ content:""; display:block; width:32px; height:1px; background:var(--accent-warm); }

/* ===== 88th pass: Ownership, image-led (renderOwnershipPageV3) ===== */
.o3-ph-empty{ width:100%; height:100%; background:linear-gradient(135deg,#E7DFCF,#D9CEB9); }
/* Stewardship */
#page .o3-stew{ padding:clamp(64px,6.4vw,104px) 0; }
.o3-grid{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(56px,7vw,112px); align-items:center; }
.o3-collage{ position:relative; margin:0 0 44px 0; }
.o3-main{ position:relative; aspect-ratio:4 / 5; overflow:hidden; max-height:600px; }
.o3-main img, .o3-inset img, .o3-card-img img, .o3-std-img img, .o3-svc-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.o3-inset{ position:absolute; right:-44px; bottom:-44px; width:52%; aspect-ratio:4 / 3; overflow:hidden; outline:10px solid var(--ivory); box-shadow:0 30px 60px -30px rgba(20,18,14,.45); }
.o3-stew-text .ov-p{ font-size:15.5px; line-height:1.75; margin:0 0 14px 0; max-width:34em; }
.o3-statement{ margin:14px 0 26px 0 !important; font-size:clamp(22px,1.9vw,27px) !important; line-height:1.3 !important; font-weight:300 !important; }
html.js-anim .o3-collage.reveal .o3-main{ clip-path:inset(0 0 100% 0); transition:clip-path 1.5s cubic-bezier(.77,0,.18,1); }
html.js-anim .o3-collage.reveal.is-visible .o3-main{ clip-path:inset(0 0 0 0); }
html.js-anim .o3-collage.reveal .o3-inset{ opacity:0; transform:translateY(24px); transition:opacity 1s ease .7s, transform 1.3s cubic-bezier(.2,.75,.18,1) .7s; }
html.js-anim .o3-collage.reveal.is-visible .o3-inset{ opacity:1; transform:none; }
html.js-anim .o3-collage.reveal{ opacity:1; transform:none; }
/* Two ways to own */
#page .o3-ways{ padding:clamp(60px,5.8vw,92px) 0; }
.o3-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,34px); max-width:1100px; margin:0 auto; }
.o3-card{ background:var(--ivory); box-shadow:0 1px 0 rgba(38,36,31,.04), 0 30px 60px -40px rgba(38,36,31,.4); display:flex; flex-direction:column; }
.o3-card-img{ position:relative; aspect-ratio:16 / 9; overflow:hidden; }
.o3-card-img img{ transition:transform 1.4s cubic-bezier(.16,.8,.3,1); }
.o3-card:hover .o3-card-img img{ transform:scale(1.04); }
.o3-card-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,14,0) 45%, rgba(20,18,14,.62) 100%); }
.o3-card-cap{ position:absolute; left:clamp(22px,2.4vw,32px); bottom:clamp(18px,2vw,26px); display:flex; align-items:center; gap:14px; color:var(--ivory); }
.o3-card-cap .ow-ic{ color:var(--ivory); width:30px; height:30px; }
.o3-card-t{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(28px,2.4vw,36px); line-height:1; color:var(--ivory); }
.o3-card-body{ padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px) clamp(22px,2.4vw,30px); }
.o3-suits{ margin:0; font-size:15px; line-height:1.6; font-style:italic; color:var(--muted); }
.o3-card-body .ow-pts{ margin:16px 0 0 0; padding-top:16px; }
.o3-sel{ max-width:1100px; margin:clamp(30px,3vw,44px) auto 0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(32px,4vw,64px); row-gap:16px; align-items:center; padding-top:clamp(22px,2.2vw,30px); border-top:1px solid rgba(38,36,31,.14); }
.o3-sel-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.7vw,24px); line-height:1.3; color:var(--charcoal); }
.o3-sel-p{ margin:8px 0 0 0; max-width:42em; font-size:14.5px; line-height:1.7; color:var(--muted); }
.o3-sel-cta{ display:flex; align-items:center; gap:22px; }
.o3-sel-last{ margin:0; max-width:15em; font-size:14px; line-height:1.55; color:var(--charcoal); text-align:right; }
/* Why Solace works: tighter */
#page .o3-why{ padding:clamp(56px,5.4vw,84px) 0; }
#page .o3-why .ow-head{ margin-bottom:clamp(26px,2.6vw,38px); }
#page .o3-why .ow-cmp-a, #page .o3-why .ow-cmp-s, #page .o3-why .ow-cmp-l{ padding-top:18px; padding-bottom:18px; }
#page .o3-why .ow-cmp-hd > span{ padding-top:22px; padding-bottom:14px; }
#page .o3-why .ow-cmp-final .ow-cmp-l, #page .o3-why .ow-cmp-final .ow-cmp-a, #page .o3-why .ow-cmp-final .ow-cmp-s{ padding-bottom:24px; }
/* The Solace Standard: photo + commitments */
#page .o3-std{ padding:clamp(64px,6vw,96px) 0; }
.o3-std-grid{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(48px,6vw,96px); align-items:stretch; }
.o3-std-img{ position:relative; margin:0; min-height:520px; overflow:hidden; }
html.js-anim .o3-std-img.reveal{ opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 1.5s cubic-bezier(.77,0,.18,1); }
html.js-anim .o3-std-img.reveal.is-visible{ clip-path:inset(0 0 0 0); }
.o3-std-body{ display:flex; flex-direction:column; justify-content:center; }
.o3-std .ov-std-head{ margin-bottom:clamp(18px,2vw,28px); }
.o3-std-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(250,247,240,.14); }
.o3-std-row{ display:grid; grid-template-columns:44px minmax(0,1fr); align-items:baseline; padding:16px 0; border-bottom:1px solid rgba(250,247,240,.14); }
.o3-std-n{ font-family:'Raleway',sans-serif; font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--accent-warm-on-dark); }
.o3-std-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(19px,1.5vw,22px); line-height:1.3; color:var(--ivory); }
.o3-std-b{ margin:4px 0 0 0; font-size:14.5px; line-height:1.6; color:rgba(250,247,240,.68); }
/* Owner services showcase */
#page .o3-svc{ padding:clamp(64px,6vw,96px) 0; }
.o3-svc-grid{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(48px,6vw,96px); align-items:stretch; }
.o3-svc-media{ position:relative; min-height:560px; overflow:hidden; }
.o3-svc-shot{ position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity .9s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); }
.o3-svc-shot.is-on{ opacity:1; transform:none; }
.o3-tabs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-bottom:22px; }
.o3-tab{ position:relative; padding:0 0 10px 0; background:none; border:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(24px,2.1vw,31px); line-height:1.15; color:#B5AC9E; cursor:pointer; transition:color .35s ease; text-align:left; }
.o3-tab::after{ content:""; position:absolute; left:0; bottom:0; width:32px; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.2,.75,.18,1); }
.o3-tab.is-on{ color:var(--charcoal); }
.o3-tab.is-on::after{ transform:scaleX(1); }
.o3-tab:hover{ color:var(--charcoal); }
.o3-tab:focus-visible{ outline:1px solid var(--accent-warm); outline-offset:6px; }
.o3-tab-sep{ width:1px; height:26px; background:rgba(38,36,31,.18); }
.o3-panes{ display:grid; }
.o3-pane{ grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.75,.18,1), visibility 0s linear .45s; }
.o3-pane.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .6s ease .1s, transform .8s cubic-bezier(.2,.75,.18,1) .1s, visibility 0s; }
.o3-pane .nh-tag{ margin:0 0 14px 0; }
.o3-pane .ov-p{ font-size:15.5px; line-height:1.75; margin:0 0 10px 0; max-width:36em; }
.o3-pane .ov-label{ margin:18px 0 12px 0; }
#page .o3-list.service-list{ --li-gap:10px; margin:0; max-width:none; }
.o3-buy{ display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid rgba(38,36,31,.14); }
.o3-price{ margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); max-width:22em; }
/* relationship + questions: tighter */
#page .o3-rel{ padding:clamp(60px,5.6vw,88px) 0; }
/* photographic close */
.o3-close{ position:relative; min-height:clamp(420px,46vw,560px); display:grid; place-items:center; overflow:hidden; text-align:center; }
.o3-close .o3-close-img, .o3-close .o3-ph-empty{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html.js-anim .o3-close .o3-close-img{ transform:scale(1.08); transition:transform 3s cubic-bezier(.16,.8,.3,1); }
.o3-close:has(.o3-close-in.is-visible) .o3-close-img{ transform:none; }
.o3-close-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,14,.42), rgba(20,18,14,.62)); }
.o3-close-in{ position:relative; z-index:1; padding:80px 24px; max-width:640px; color:var(--ivory); }
.o3-close-rule{ display:block; width:44px; height:1px; margin:0 auto 26px auto; background:var(--accent-warm-on-dark); }
.o3-close-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(34px,3.6vw,52px); line-height:1.1; color:var(--ivory); }
.o3-close-b{ margin:18px auto 30px auto; max-width:30em; font-size:16px; line-height:1.7; color:rgba(250,247,240,.86); }
@media (max-width:1100px) and (min-width:901px){
  .o3-inset{ right:-24px; }
}
@media (max-width:900px){
  #page .o3-stew, #page .o3-ways, #page .o3-std, #page .o3-svc, #page .o3-why{ padding:48px 0; }
  .o3-grid, .o3-std-grid, .o3-svc-grid{ grid-template-columns:minmax(0,1fr); padding:0 22px; row-gap:32px; }
  .o3-collage{ margin:0 18px 30px 0; }
  .o3-main{ aspect-ratio:4 / 3; }
  .o3-inset{ right:-18px; bottom:-30px; width:46%; outline-width:6px; }
  .o3-cards{ grid-template-columns:minmax(0,1fr); }
  .o3-sel{ grid-template-columns:minmax(0,1fr); }
  .o3-sel-cta{ flex-direction:column; align-items:flex-start; gap:14px; }
  .o3-sel-last{ text-align:left; }
  .o3-std-img{ min-height:0; aspect-ratio:4 / 3; }
  .o3-svc-media{ min-height:0; aspect-ratio:4 / 3; }
  .o3-tab{ font-size:22px; }
  .o3-tab-sep{ height:20px; }
}
/* owner services switch: names on one line on desktop; a two-part switch on smaller screens */
.o3-tabs{ flex-wrap:nowrap; }
.o3-tab{ font-size:clamp(22px,1.75vw,26px); white-space:nowrap; }
@media (max-width:1180px){
  .o3-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-bottom:1px solid rgba(38,36,31,.16); margin-bottom:24px; }
  .o3-tab-sep{ display:none; }
  .o3-tab{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:14px 6px; white-space:normal; color:#9A9284; }
  .o3-tab::after{ left:0; right:0; width:auto; height:2px; bottom:-1px; }
}
.o3-card-img{ aspect-ratio:2 / 1; }
.o3-close{ min-height:clamp(400px,40vw,500px); }

/* ===== 89th pass: Ownership, shorter and quieter (renderOwnershipPageV4) ===== */
#page .o4-stew{ padding:clamp(56px,5.4vw,84px) 0; }
.o4-stew .o3-main{ max-height:520px; aspect-ratio:5 / 6; }
.o4-stew .o3-statement{ margin-bottom:22px !important; }
.o4-sel{ display:flex; align-items:center; gap:18px 26px; flex-wrap:wrap; margin-top:24px; padding-top:22px; border-top:1px solid rgba(38,36,31,.12); }
.o4-sel p{ margin:0; flex:1 1 220px; font-size:14.5px; line-height:1.65; color:var(--charcoal); }
/* ways */
#page .o4-ways{ padding:clamp(56px,5.2vw,80px) 0; }
.o4-ways .ow2-head{ margin-bottom:clamp(24px,2.4vw,34px); }
.o4-ways .o3-card-img{ aspect-ratio:16 / 7; }
.o4-ways .o3-card-body{ padding:18px clamp(22px,2.4vw,30px) 22px; }
.o4-ways .o3-card-body .ow-pts{ margin-top:14px; padding-top:14px; row-gap:9px; }
/* why */
#page .o4-why{ padding:clamp(56px,5.2vw,80px) 0; }
#page .o4-why .ow-head{ align-items:end; }
#page .o4-why .ow-cmp-a, #page .o4-why .ow-cmp-s, #page .o4-why .ow-cmp-l{ padding-top:14px; padding-bottom:14px; }
#page .o4-why .ow-cmp-final .ow-cmp-l, #page .o4-why .ow-cmp-final .ow-cmp-a, #page .o4-why .ow-cmp-final .ow-cmp-s{ padding-bottom:20px; }
#page .o4-why .ow-cmp-hd > span{ padding-top:20px; padding-bottom:12px; }
/* standard: title and line side by side */
#page .o4-std{ padding:clamp(56px,5.2vw,80px) 0; }
.o4-std .o3-std-img{ min-height:420px; }
.o4-std .ov-std-head{ margin-bottom:18px; }
.o4-std .o3-std-row{ padding:13px 0; }
.o4-std .o3-std-row > div{ display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); column-gap:20px; align-items:baseline; }
.o4-std .o3-std-h{ font-size:clamp(17px,1.3vw,19px); }
.o4-std .o3-std-b{ margin:0; font-size:14px; }
/* individual service bands */
#page .o4-svc{ padding:clamp(52px,5vw,76px) 0; }
.o4-svc-grid{ max-width:1240px; margin:0 auto; padding:0 64px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(48px,6vw,96px); align-items:stretch; }
.o4-svc.flip .o4-svc-img{ order:2; }
.o4-svc-img{ position:relative; margin:0; min-height:380px; overflow:hidden; }
.o4-svc-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s cubic-bezier(.16,.8,.3,1); }
.o4-svc-img:hover img{ transform:scale(1.03); }
html.js-anim .o4-svc-img.reveal{ opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 1.5s cubic-bezier(.77,0,.18,1); }
html.js-anim .o4-svc.flip .o4-svc-img.reveal{ clip-path:inset(0 0 0 100%); }
html.js-anim .o4-svc-img.reveal.is-visible, html.js-anim .o4-svc.flip .o4-svc-img.reveal.is-visible{ clip-path:inset(0 0 0 0); }
.o4-svc-text{ display:flex; flex-direction:column; justify-content:center; }
.o4-svc-text .ov-p{ margin:18px 0 0 0; font-size:15.5px; line-height:1.75; max-width:34em; }
.o4-label{ margin:20px 0 8px 0; font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-warm); }
.o4-inline{ margin:0; max-width:36em; font-size:15px; line-height:1.9; color:var(--charcoal); }
.o4-inline > span:not(.o4-dot){ white-space:nowrap; }
.o4-dot{ display:inline-block; width:4px; height:4px; margin:0 12px 2px; border-radius:50%; background:var(--accent-warm); opacity:.75; vertical-align:middle; }
.o4-buy{ display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid rgba(38,36,31,.14); }
.o4-price{ margin:0; font-size:14px; line-height:1.55; color:var(--muted); }
/* relationship, questions, close */
#page .o4-rel{ padding:clamp(56px,5.2vw,80px) 0; }
#page .o4-faq{ padding:clamp(48px,4.4vw,68px) 0; }
.o4-close{ min-height:clamp(360px,34vw,440px); }
.o4-close .o3-close-in{ padding:64px 24px; }
@media (max-width:900px){
  #page .o4-stew, #page .o4-ways, #page .o4-why, #page .o4-std, #page .o4-svc, #page .o4-rel{ padding:44px 0; }
  .o4-stew .o3-main{ aspect-ratio:4 / 3; max-height:none; }
  .o4-svc-grid{ grid-template-columns:minmax(0,1fr); padding:0 22px; row-gap:26px; }
  .o4-svc.flip .o4-svc-img{ order:0; }
  .o4-svc-img{ min-height:0; aspect-ratio:16 / 10; }
  .o4-std .o3-std-row > div{ display:block; }
  .o4-std .o3-std-b{ margin-top:4px; }
  .o4-std .o3-std-img{ min-height:0; aspect-ratio:16 / 10; }
  .o4-ways .o3-card-img{ aspect-ratio:16 / 9; }
  .o4-inline{ font-size:14.5px; line-height:1.85; }
  .o4-sel .btn{ width:100%; }
}
/* 89th pass, tighter: narrower photos beside wider text, so lines run on one line and sections stay short */
@media (min-width:901px){
  .o4-std .o3-std-grid, .o4-svc-grid{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); column-gap:clamp(44px,5vw,80px); }
  .o4-std .o3-std-row > div{ grid-template-columns:minmax(0,230px) minmax(0,1fr); }
  .o4-std .o3-std-img{ min-height:0; }
  .o4-svc-img{ min-height:340px; }
  .o4-buy{ flex-wrap:nowrap; }
  #page .o4-why .ow-cmp{ --lw:160px; }
}
@media (min-width:901px){ .o4-svc.flip .o4-svc-grid{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); } .o4-svc.flip .o4-svc-text{ order:1; } .o4-svc.flip .o4-svc-img{ order:2; } }
/* inline lists: every item carries its own small dot, so lines never start or end with a stray one */
.o4-inline{ display:flex; flex-wrap:wrap; gap:4px 24px; line-height:1.7; }
.o4-inline .o4-dot{ display:none; }
.o4-inline > span:not(.o4-dot){ position:relative; padding-left:14px; white-space:nowrap; }
.o4-inline > span:not(.o4-dot)::before{ content:""; position:absolute; left:0; top:.72em; width:4px; height:4px; border-radius:50%; background:var(--accent-warm); opacity:.8; }
@media (max-width:900px){ .o4-inline{ gap:2px 18px; } }

/* ===== 90th pass: Ownership as one consistent system (renderOwnershipPageV5) ===== */
/* client: "remove the orange line at the top of every section" (site-wide) */
.nh-name{ padding-top:0; }
.nh-name::before, .ow2-head .nh-name::before{ display:none !important; }
#page .adv-svc .split-index.nh-num::after{ display:none; }

:root{ --o5-pad:clamp(84px,8.4vw,128px); --o5-max:1180px; --o5-side:64px; }
.o5-sec{ padding:var(--o5-pad) 0; }
.o5-ivory{ background:var(--ivory); }
.o5-sand{ background:var(--sand); }
.o5-dark{ background:#22201C; color:var(--ivory); }
/* the split: same photo, same size, alternating sides */
.o5-split{ max-width:var(--o5-max); margin:0 auto; padding:0 var(--o5-side); box-sizing:border-box; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(64px,8vw,128px); align-items:center; }
.o5-sec.flip .o5-photo{ order:2; }
.o5-photo{ position:relative; margin:0; aspect-ratio:4 / 5; overflow:hidden; background:#E4DCCB; }
.o5-photo img, .o5-photo .o3-ph-empty, .o5-card-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.6s cubic-bezier(.16,.8,.3,1); }
.o5-photo:hover img, .o5-card:hover .o5-card-img img{ transform:scale(1.03); }
html.js-anim .o5-photo.reveal{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.6s cubic-bezier(.77,0,.18,1); }
html.js-anim .o5-photo.reveal.is-visible{ clip-path:inset(0 0 0 0); }
.o5-text{ max-width:520px; }
.o5-sec.flip .o5-text{ justify-self:end; }
/* one heading style for every section */
.o5-name{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(34px,3.2vw,48px); line-height:1.08; letter-spacing:-0.01em; color:var(--charcoal); text-wrap:balance; }
.o5-tag{ margin:14px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(19px,1.55vw,22px); line-height:1.4; color:#857C6F; }
.o5-statement{ margin:16px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(19px,1.55vw,22px); line-height:1.45; color:var(--charcoal); }
.o5-statement .ov-line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.o5-statement .ov-line-in{ display:block; }
.o5-statement .o5-soft{ color:#857C6F; }
.o5-p{ margin:28px 0 0 0; font-size:16px; line-height:1.85; color:#5E584F; text-wrap:pretty; }
.o5-label{ margin:26px 0 10px 0; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-warm); }
.o5-inline{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 26px; }
.o5-inline li{ position:relative; padding-left:14px; font-size:15px; line-height:1.7; color:var(--charcoal); white-space:nowrap; }
.o5-inline li::before{ content:""; position:absolute; left:0; top:.75em; width:4px; height:4px; border-radius:50%; background:var(--accent-warm); opacity:.8; }
/* one action row for every section */
.o5-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px 28px; margin-top:34px; padding-top:24px; border-top:1px solid rgba(38,36,31,.14); }
.o5-note{ margin:0; max-width:19em; font-size:14px; line-height:1.6; color:var(--muted); }
.o5-foot .btn{ flex:0 0 auto; }
/* dark: the Standard */
.o5-dark .o5-name{ color:var(--ivory); }
.o5-dark .o5-photo{ background:#2E2B26; }
.o5-std-title{ display:flex; align-items:center; gap:20px; }
.o5-std{ list-style:none; margin:30px 0 0 0; padding:0; border-top:1px solid rgba(250,247,240,.14); }
.o5-std li{ display:grid; grid-template-columns:42px minmax(0,1fr); align-items:baseline; padding:15px 0; border-bottom:1px solid rgba(250,247,240,.12); }
.o5-std-n{ font-size:11.5px; font-weight:500; letter-spacing:.12em; color:var(--accent-warm-on-dark); }
.o5-std h3{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:20px; line-height:1.3; color:var(--ivory); }
.o5-std p{ margin:4px 0 0 0; font-size:14.5px; line-height:1.6; color:rgba(250,247,240,.66); }
/* Two ways to own */
.o5-wide{ max-width:var(--o5-max); margin:0 auto; padding:0 var(--o5-side); box-sizing:border-box; }
.o5-head-c{ text-align:center; margin:0 auto clamp(48px,4.6vw,68px) auto; }
.o5-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3vw,44px); }
.o5-card{ background:var(--ivory); display:flex; flex-direction:column; }
.o5-card-img{ position:relative; aspect-ratio:3 / 2; overflow:hidden; }
.o5-card-body{ padding:clamp(30px,2.8vw,40px) clamp(28px,2.8vw,40px) clamp(32px,3vw,42px); }
.o5-card-t{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(28px,2.4vw,34px); line-height:1.1; color:var(--charcoal); }
.o5-card-s{ margin:10px 0 0 0; font-size:15px; line-height:1.6; color:var(--muted); }
.o5-ticks{ list-style:none; margin:22px 0 0 0; padding:20px 0 0 0; border-top:1px solid rgba(38,36,31,.1); display:grid; row-gap:11px; }
.o5-ticks li{ display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:12px; font-size:15px; line-height:1.55; color:var(--charcoal); }
/* Why Solace works: same rhythm, no rule */
#page .o5-why{ padding:var(--o5-pad) 0; }
#page .o5-why .ow-in{ max-width:var(--o5-max); }
#page .o5-why .ow-head{ margin-bottom:clamp(40px,4vw,56px); align-items:end; }
#page .o5-why .nh-name{ font-size:clamp(34px,3.2vw,48px); }
#page .o5-why .nh-tag{ margin-top:14px; color:#857C6F; }
#page .o5-why .ow-cmp{ --lw:170px; }
/* relationship, questions, close */
#page .o5-rel{ padding:var(--o5-pad) 0; }
#page .o5-rel .ov-grid{ max-width:var(--o5-max); }
.o5-quote{ margin-top:28px !important; padding-left:18px; border-left:1px solid var(--accent-warm); }
.o5-faq .ov-grid{ max-width:var(--o5-max); }
.o5-faq{ padding:clamp(72px,7vw,104px) 0; }
.o5-close{ min-height:clamp(440px,42vw,560px); }
.o5-close .o3-close-in{ padding:88px 24px; }
@media (max-width:1100px) and (min-width:901px){ :root{ --o5-side:48px; } .o5-split{ column-gap:56px; } }
@media (max-width:900px){
  :root{ --o5-pad:64px; --o5-side:22px; }
  .o5-split{ grid-template-columns:minmax(0,1fr); row-gap:36px; }
  .o5-sec.flip .o5-photo{ order:0; }
  .o5-photo{ aspect-ratio:4 / 3; }
  .o5-text{ max-width:none; }
  .o5-name{ font-size:34px; }
  .o5-cards{ grid-template-columns:minmax(0,1fr); }
  .o5-head-c{ text-align:left; margin-bottom:36px; }
  .o5-foot{ flex-direction:column; align-items:flex-start; }
  .o5-foot .btn{ width:100%; justify-content:center; }
  .o5-inline li{ font-size:14.5px; }
  .o5-std-title{ gap:14px; }
}
/* every photo the same size: the photo column keeps its width when it swaps sides */
:root{ --o5-pad:clamp(72px,6.8vw,100px); }
@media (min-width:901px){
  .o5-split{ grid-template-columns:minmax(0,9fr) minmax(0,13fr); }
  .o5-sec.flip .o5-split{ grid-template-columns:minmax(0,13fr) minmax(0,9fr); }
  .o5-sec.flip .o5-text{ order:1; justify-self:start; }
  .o5-sec.flip .o5-photo{ order:2; }
  .o5-text{ max-width:540px; }
}
.o5-card-img{ aspect-ratio:16 / 10; }
.o5-head-c{ margin-bottom:clamp(40px,4vw,56px); }
/* the Standard: five commitments across, centred title */
.o5-std-title-c{ justify-content:center; margin-bottom:clamp(44px,4.4vw,64px); }
.o5-stdx-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:clamp(24px,2.6vw,40px); }
.o5-stdx-list li{ padding-top:22px; border-top:1px solid rgba(250,247,240,.18); }
.o5-stdx-list h3{ margin:14px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(18px,1.45vw,21px); line-height:1.3; color:var(--ivory); text-wrap:balance; }
.o5-stdx-list p{ margin:10px 0 0 0; font-size:14px; line-height:1.65; color:rgba(250,247,240,.64); text-wrap:pretty; }
html.js-anim .o5-stdx-list li.reveal{ transform:translateY(16px); }
/* price lines */
.o5-price{ display:flex; flex-direction:column; gap:3px; }
.o5-price strong{ font-family:'Raleway',sans-serif; font-weight:300; font-size:21px; line-height:1.25; color:var(--charcoal); }
.o5-price span{ font-size:13px; color:var(--muted); }
@media (max-width:1100px){ .o5-stdx-list{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:32px; } }
@media (max-width:900px){
  .o5-std-title-c{ justify-content:flex-start; margin-bottom:28px; }
  .o5-stdx-list{ grid-template-columns:minmax(0,1fr); row-gap:0; }
  .o5-stdx-list li{ display:grid; grid-template-columns:36px minmax(0,1fr); padding:16px 0; }
  .o5-stdx-list li .o5-std-n{ grid-row:1 / span 2; padding-top:4px; }
  .o5-stdx-list h3{ margin:0; }
  .o5-stdx-list p{ margin-top:4px; }
}
.o5-price strong{ white-space:nowrap; }
@media (min-width:901px){
  .o5-foot .btn{ max-width:250px; white-space:normal; text-wrap:balance; text-align:center; line-height:1.4; padding:12px 26px; }
  #page .o5-why .ow-cmp{ --lw:200px; }
}
@media (max-width:900px){
  .o5-std-title-c{ justify-content:flex-start; gap:14px; }
  .o5-std-title-c .o5-name{ font-size:30px; white-space:nowrap; }
}
@media (max-width:380px){ .o5-std-title-c .o5-name{ font-size:27px; } }
/* client comment ("this is weirdly positioned"): in Why Solace works the
   lead line now sits under the heading and its tagline, like every other
   section, instead of floating on its own on the right */
#page .o5-why .ow-head{ display:block; }
#page .o5-why .ow-lead{ margin:22px 0 0 0; max-width:36em; font-size:16px; line-height:1.8; color:#5E584F; }

/* ===== 91st pass: Talk to Solace — When appears with Experience; phone picker ===== */
.ct-when{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .55s cubic-bezier(.2,.75,.18,1), opacity .4s ease; }
.ct-when.is-on{ grid-template-rows:1fr; opacity:1; }
.ct-when-in{ overflow:hidden; min-height:0; }
@media (prefers-reduced-motion:reduce){ .ct-when{ transition:none; } }

.pf{ position:relative; }
.pf-label{ display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.hd-field .pf-label{ font-size:11px; letter-spacing:.08em; margin-bottom:8px; }
.pf-row{ position:relative; display:flex; align-items:stretch; border:1px solid var(--rule); background:var(--offwhite, #FFFDF8); border-radius:2px; transition:border-color .25s ease, box-shadow .25s ease; }
.hd-field .pf-row{ background:#FFFDF8; }
.pf-row:focus-within, .pf.is-open .pf-row{ border-color:var(--accent-warm); }
.pf.is-error .pf-row{ border-color:#A33A2A; }
.pf-cc{ flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; padding:0 12px 0 14px; min-height:48px; background:none; border:0; border-right:1px solid var(--rule); font:inherit; font-size:15px; color:var(--charcoal); cursor:pointer; white-space:nowrap; }
.pf-cc:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:-2px; }
.pf-cc:not(.is-set) .pf-dial{ color:#958E80; font-size:14px; }
.pf-flag{ display:inline-flex; width:21px; height:14px; flex:0 0 auto; overflow:hidden; border-radius:2px; box-shadow:0 0 0 1px rgba(38,36,31,.12); }
.pf-flag img{ width:21px; height:14px; display:block; object-fit:cover; }
.pf-noflag{ display:block; width:21px; height:14px; background:repeating-linear-gradient(135deg,#E9E2D4 0 3px,#F3EEE4 3px 6px); }
.pf-chev{ width:11px; height:11px; color:var(--muted); transition:transform .25s ease; }
.pf.is-open .pf-chev{ transform:rotate(180deg); }
.pf-num{ flex:1 1 auto; min-width:0; border:0 !important; background:transparent !important; padding:0 40px 0 14px !important; height:48px; font-family:'Montserrat',sans-serif; font-size:15px; color:var(--charcoal); outline:none; border-radius:0; }
.pf-ok{ position:absolute; right:12px; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%; background:var(--accent-warm); color:var(--ivory); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.pf-ok svg{ width:12px; height:12px; }
.pf.is-valid .pf-ok{ opacity:1; transform:none; }
.pf-pop{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; background:#FFFDF8; border:1px solid rgba(38,36,31,.14); box-shadow:0 24px 50px -24px rgba(20,18,14,.4); padding:8px; min-width:280px; }
.pf-search{ width:100%; box-sizing:border-box; height:42px; padding:0 12px; border:1px solid var(--rule) !important; background:var(--ivory) !important; font:inherit; font-size:14.5px; color:var(--charcoal); border-radius:2px; outline:none; }
.pf-search:focus{ border-color:var(--accent-warm) !important; }
.pf-list{ list-style:none; margin:6px 0 0 0; padding:0; max-height:264px; overflow:auto; overscroll-behavior:contain; }
.pf-opt{ display:grid; grid-template-columns:21px minmax(0,1fr) auto; align-items:center; column-gap:12px; padding:9px 10px; font-size:14.5px; color:var(--charcoal); cursor:pointer; border-radius:2px; }
.pf-opt .pf-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-opt .pf-code{ font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pf-opt.is-active{ background:#F1EADD; }
.pf-opt.is-sel .pf-name{ font-weight:600; }
.pf-none{ padding:12px 10px; font-size:14px; color:var(--muted); }
.pf-err{ margin:8px 0 0 0; font-size:13px; line-height:1.5; color:#A33A2A; }
.hd-panel .pf-pop{ position:static; margin-top:6px; box-shadow:none; }
.ct-phone-field .pf{ max-width:440px; }
.pf-num:focus, .pf-num:focus-visible, .pf-search:focus-visible{ outline:none !important; box-shadow:none !important; }
.pf-row:focus-within{ box-shadow:0 0 0 1px var(--accent-warm); }
.pf.is-error .pf-row:focus-within{ box-shadow:0 0 0 1px #A33A2A; }
/* 92nd pass: morning / afternoon / evening */
.cp-part{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:2px; }
.cp-part .cp-part-l{ font-size:14.5px; }
.cp-part small{ font-size:11.5px; color:var(--muted); }
.cp-part.is-on small{ color:rgba(250,247,240,.82); }

/* ===== 93rd pass: home — the "What is Solace?" statement ===== */
.what-is-solace .wis-h{ max-width:17em; margin-left:auto; margin-right:auto; text-wrap:balance; }
.what-is-solace .wis-h .ws-accent{ color:var(--accent-warm); font-style:normal; font-weight:inherit; }

/* ===== 94th pass: home — statement-track labels breathe (no orphaned "it")
   Each row only uses every other column, so a label can safely spread a
   little past its own column; balanced wrapping keeps lines even. ===== */
@media (min-width: 861px){
  .stmt-track-item > .stmt-t{ display:block; width:190%; margin-left:-45%; text-wrap:balance; }
}
.stmt-track-item > .stmt-t{ text-wrap:balance; }
.what-is-solace .wis-h{ max-width:20em; }

/* ===== 95th pass: home — Why Solace, elevated =====
   Editorial header (statement left, punchline + link right) over a 3 x 2
   grid of the six reasons, all visible. Hairlines draw in left to right and
   each reason rises after its line, staggered. */
.section.why-solace.wy2{ padding-top:clamp(72px,8vw,120px); padding-bottom:clamp(72px,8vw,120px); }
.wy2-wrap{ max-width:1180px; margin:0 auto; }
.wy2-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(32px,6vw,96px); align-items:end; padding-bottom:clamp(40px,4.5vw,64px); }
.wy2-statement{ margin-top:22px; text-align:left; font-size:clamp(32px,3.5vw,50px); line-height:1.18; text-wrap:initial; }
.wy2-aside{ padding-bottom:8px; }
.wy2-intro{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,1.35vw,20px); line-height:1.55; color:var(--charcoal); margin:0 0 26px 0; max-width:24em; }
.wy2-aside .link-arrow{ border-bottom-color:var(--accent-warm); }
.wy2-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(28px,4vw,64px); row-gap:clamp(40px,4vw,60px); }
.wy2-item{ position:relative; padding-top:26px; }
.wy2-rule{ position:absolute; left:0; right:0; top:0; height:1px; background:rgba(38,36,31,0.22); transform-origin:left center; }
.wy2-rule::after{ content:''; position:absolute; left:0; top:-1px; width:28px; height:3px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.16,.8,.3,1); }
.wy2-num{ display:block; font-size:11px; font-weight:600; letter-spacing:0.22em; color:var(--accent-warm); margin-bottom:14px; font-variant-numeric:tabular-nums; }
.wy2-title{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(22px,1.9vw,27px); line-height:1.2; letter-spacing:-0.005em; color:var(--charcoal); margin:0 0 12px 0; transition:color .35s ease; }
.wy2-body{ font-size:15px; line-height:1.7; color:var(--muted); margin:0; max-width:30ch; }
.wy2-item:hover .wy2-rule::after{ transform:scaleX(1); }

html.js-anim .wy2-grid.reveal{ opacity:1; transform:none; }
html.js-anim .wy2-grid .wy2-rule{ transform:scaleX(0); transition:transform 1.1s cubic-bezier(.65,0,.25,1); transition-delay:calc(var(--i) * 110ms); }
html.js-anim .wy2-grid .wy2-num,
html.js-anim .wy2-grid .wy2-title,
html.js-anim .wy2-grid .wy2-body{ opacity:0; transform:translateY(12px); transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1); }
html.js-anim .wy2-grid .wy2-num{ transition-delay:calc(var(--i) * 110ms + 300ms); }
html.js-anim .wy2-grid .wy2-title{ transition-delay:calc(var(--i) * 110ms + 380ms); }
html.js-anim .wy2-grid .wy2-body{ transition-delay:calc(var(--i) * 110ms + 460ms); }
html.js-anim .wy2-grid.is-visible .wy2-rule{ transform:scaleX(1); }
html.js-anim .wy2-grid.is-visible .wy2-num,
html.js-anim .wy2-grid.is-visible .wy2-title,
html.js-anim .wy2-grid.is-visible .wy2-body{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js-anim .wy2-grid .wy2-rule{ transform:none; transition:none; }
  html.js-anim .wy2-grid .wy2-num, html.js-anim .wy2-grid .wy2-title, html.js-anim .wy2-grid .wy2-body{ opacity:1; transform:none; transition:none; }
}
@media (max-width: 1080px){
  .wy2-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px){
  .section.why-solace.wy2{ padding-top:56px; padding-bottom:64px; }
  .wy2-head{ grid-template-columns:1fr; gap:22px; padding-bottom:40px; }
  .wy2-statement{ font-size:clamp(28px,7.4vw,36px); }
  .wy2-grid{ grid-template-columns:1fr; row-gap:32px; }
  .wy2-item{ padding-top:22px; }
  .wy2-body{ max-width:none; }
}
@media (max-width: 860px){
  .wy2-statement{ font-size:clamp(24px,6.9vw,28px); }
}
.wy2-body{ max-width:34ch; }

/* ===== 96th pass: home — Performance, done differently: the text, elevated =====
   Track labels set in the display face (light, larger, softer ivory), each
   tick now lands on a small node on the course line; the supporting line is
   lighter and larger; a thin vertical rule leads into "Our clients come to us to". */
.perf-diff .statement > p{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,1.3vw,19px); line-height:1.6; letter-spacing:0.005em; color:rgba(250,247,240,0.72)!important; max-width:38em; margin-left:auto; margin-right:auto; }
.perf-diff .statement-list-lead{ margin-top:56px; }
.perf-diff .statement-list-lead::before{ content:''; display:block; width:1px; height:44px; margin:0 auto 24px auto; background:linear-gradient(to bottom, rgba(194,130,106,0), rgba(194,130,106,0.75)); }
.perf-diff .stmt-track-wrap{ margin-top:48px; }
.perf-diff .stmt-track-item{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(14.5px,1.12vw,16.5px); line-height:1.38; letter-spacing:0.01em; color:rgba(250,247,240,0.9); }
.perf-diff .stmt-track-top .stmt-track-item:not(.stmt-track-empty){ padding-bottom:22px; }
.perf-diff .stmt-track-bottom .stmt-track-item:not(.stmt-track-empty){ padding-top:22px; }
.perf-diff .stmt-track-top .stmt-track-item:not(.stmt-track-empty)::after,
.perf-diff .stmt-track-bottom .stmt-track-item:not(.stmt-track-empty)::before{ height:22px; }
.perf-diff .stmt-track-top .stmt-track-item:not(.stmt-track-empty)::before,
.perf-diff .stmt-track-bottom .stmt-track-item:not(.stmt-track-empty)::after{ content:''; position:absolute; left:50%; width:5px; height:5px; border-radius:50%; background:var(--accent-warm-on-dark); box-shadow:0 0 0 4px rgba(194,130,106,0.14); z-index:1; }
.perf-diff .stmt-track-top .stmt-track-item:not(.stmt-track-empty)::before{ bottom:0; transform:translate(-50%,50%); }
.perf-diff .stmt-track-bottom .stmt-track-item:not(.stmt-track-empty)::after{ top:0; transform:translate(-50%,-50%); }
@media (max-width: 860px){
  .perf-diff .stmt-track-top .stmt-track-item::before,
  .perf-diff .stmt-track-bottom .stmt-track-item::after{ display:none; }
  .perf-diff .stmt-track-item{ font-size:17px; padding:15px 0!important; }
  .perf-diff .statement-list-lead{ margin-top:44px; }
  .perf-diff .statement-list-lead::before{ height:34px; margin-bottom:20px; }
  .perf-diff .stmt-track-wrap{ margin-top:24px; }
}
.wy2-statement .ws-line{ text-wrap:wrap; }
.wy2-statement .wy2-end{ white-space:nowrap; }
@media (max-width: 860px){
  .wy2-statement{ font-size:clamp(28px,8.2vw,34px); line-height:1.16; }
  .wy2-statement .wy2-end{ display:block; }
  .wy2-statement .ws-line + .ws-line{ margin-top:6px; }
}

/* ===== 97th pass: home — Why Solace v3 (centred, reasons cycle) ===== */
.section.why-solace.wy3{ padding-top:clamp(80px,9vw,128px); padding-bottom:clamp(80px,9vw,128px); text-align:center; }
.wy3-wrap{ max-width:1080px; margin:0 auto; }
.wy3-statement{ margin:24px auto 0 auto; font-size:clamp(34px,4vw,56px); line-height:1.16; text-wrap:initial; }
.wy3-statement .ws-line{ text-wrap:wrap; }
.wy3-statement .wy2-end{ white-space:nowrap; }
.wy3-intro{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:var(--charcoal); max-width:30em; margin:28px auto 0 auto; }
.wy3-reasons{ margin:clamp(56px,6vw,84px) auto 0 auto; }
.wy3-tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:0 clamp(22px,3.4vw,52px); }
.wy3-tab{ position:relative; background:none; border:0; padding:6px 0 0 0; cursor:pointer; color:var(--muted); font:inherit; }
.wy3-tab-label{ display:block; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(16px,1.45vw,20px); letter-spacing:0.01em; transition:color .4s ease; padding-bottom:14px; }
.wy3-tab:hover .wy3-tab-label, .wy3-tab.is-active .wy3-tab-label{ color:var(--charcoal); }
.wy3-bar{ position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(38,36,31,0.16); overflow:hidden; }
.wy3-fill{ position:absolute; inset:0; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; }
.wy3-tab:focus-visible{ outline:none; }
.wy3-tab:focus-visible .wy3-tab-label{ color:var(--accent-warm); }
/* the timer: only the active tab animates; it runs while the row is in view and not hovered/focused */
.wy3-tab.is-active .wy3-fill{ animation:wy3-fill 5.2s linear forwards; animation-play-state:paused; }
.wy3-reasons.is-running .wy3-tab.is-active .wy3-fill{ animation-play-state:running; }
.wy3-reasons.is-running.is-paused .wy3-tab.is-active .wy3-fill{ animation-play-state:paused; }
.wy3-reasons.is-chosen .wy3-tab.is-active .wy3-fill{ animation:none; transform:scaleX(1); }
@keyframes wy3-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.wy3-stage{ margin-top:clamp(40px,4.4vw,60px); }
.wy3-count{ display:block; font-size:11px; font-weight:600; letter-spacing:0.24em; color:var(--accent-warm); font-variant-numeric:tabular-nums; }
.wy3-panels{ display:grid; margin-top:18px; }
.wy3-panel{ grid-area:1 / 1; margin:0 auto; max-width:26em; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(22px,2.3vw,32px); line-height:1.38; letter-spacing:-0.005em; color:var(--charcoal); opacity:0; transform:translateY(10px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); pointer-events:none; text-wrap:balance; }
.wy3-panel.is-active{ opacity:1; transform:none; pointer-events:auto; transition-delay:.12s; }
@media (prefers-reduced-motion: reduce){
  .wy3-tab.is-active .wy3-fill{ animation:none; transform:scaleX(1); }
  .wy3-panel{ transition:none; transform:none; }
}
@media (max-width: 860px){
  .section.why-solace.wy3{ padding-top:64px; padding-bottom:72px; }
  .wy3-statement{ font-size:clamp(28px,8.2vw,34px); }
  .wy3-statement .wy2-end{ display:block; }
  .wy3-statement .ws-line + .ws-line{ margin-top:6px; }
  .wy3-intro{ margin-top:22px; }
  .wy3-reasons{ margin-top:48px; }
  .wy3-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px; }
  .wy3-tab-label{ font-size:15.5px; padding-bottom:11px; }
  .wy3-stage{ margin-top:36px; }
  .wy3-panel{ font-size:clamp(20px,5.6vw,23px); max-width:none; }
}
@media (min-width: 861px){ .perf-diff .stmt-track-item > .stmt-t{ width:212%; margin-left:-56%; } }
/* 98th pass: while the visitor hovers the row, the hovered word's line is shown full (no timer) */
.wy3-reasons.is-paused .wy3-tab.is-active .wy3-fill{ animation:none; transform:scaleX(1); transition:transform .45s cubic-bezier(.16,.8,.3,1); }
.wy3-tab{ cursor:default; }
@media (hover: none){ .wy3-tab{ cursor:pointer; } }

/* ===== 99th pass: Experience — Discover / Perform / Play, editorial ===== */
.dx{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.2vw,44px); max-width:1040px; margin:clamp(48px,5vw,72px) auto 0 auto; }
html.js-anim .dx.reveal{ opacity:1; transform:none; }
.dx-item{ margin:0; }
.dx-frame{ position:relative; aspect-ratio:4 / 5; overflow:hidden; background:var(--sand); }
.dx-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.001); transition:transform 1.4s cubic-bezier(.16,.8,.3,1); }
.dx-item:hover .dx-img{ transform:scale(1.04); }
.dx-cap{ padding-top:20px; text-align:left; }
.dx-num{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.22em; color:var(--accent-warm); margin-right:12px; vertical-align:middle; }
.dx-title{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.7vw,24px); color:var(--charcoal); vertical-align:middle; }
.dx-body{ margin:10px 0 0 0; font-size:15px; line-height:1.65; color:var(--muted); max-width:30ch; }
html.js-anim .dx .dx-frame{ clip-path:inset(100% 0 0 0); transition:clip-path 1.2s cubic-bezier(.65,0,.25,1); transition-delay:calc(var(--i) * 140ms); }
html.js-anim .dx .dx-cap{ opacity:0; transform:translateY(10px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.8,.3,1); transition-delay:calc(var(--i) * 140ms + 500ms); }
html.js-anim .dx.is-visible .dx-frame{ clip-path:inset(0 0 0 0); }
html.js-anim .dx.is-visible .dx-cap{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js-anim .dx .dx-frame{ clip-path:none; transition:none; }
  html.js-anim .dx .dx-cap{ opacity:1; transform:none; transition:none; }
  .dx-img{ transition:none; }
}
@media (max-width: 860px){
  .dx{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; margin:40px -22px 0 -22px; padding:0 22px 6px 22px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .dx::-webkit-scrollbar{ display:none; }
  .dx-item{ flex:0 0 74vw; max-width:320px; scroll-snap-align:start; scroll-margin-left:22px; }
  .dx-cap{ padding-top:16px; }
  .dx-body{ font-size:14.5px; }
}

/* ===== 99th pass: Experience — Watersports ===== */
.section.wsx{ padding-top:clamp(72px,8vw,120px); padding-bottom:clamp(72px,8vw,120px); }
.wsx-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(40px,7vw,110px); align-items:center; max-width:1120px; margin:0 auto; }
.wsx-h{ margin:20px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(32px,3.6vw,50px); line-height:1.15; letter-spacing:-0.012em; color:var(--ivory); }
.wsx-body{ margin:24px 0 0 0; font-size:16px; line-height:1.75; color:rgba(250,247,240,0.72); max-width:34em; }
.wsx-list{ list-style:none; margin:34px 0 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:36px; max-width:30em; }
.wsx-list li{ position:relative; padding:14px 0 14px 22px; border-top:1px solid rgba(250,247,240,0.14); font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,1.4vw,20px); color:var(--ivory); }
.wsx-list li::before{ content:''; position:absolute; left:0; top:50%; width:5px; height:5px; border-radius:50%; background:var(--accent-warm-on-dark); transform:translateY(-50%); }
.wsx-list li:nth-last-child(-n+2){ border-bottom:1px solid rgba(250,247,240,0.14); }
.wsx-list li:last-child:nth-child(odd){ border-bottom:1px solid rgba(250,247,240,0.14); }
.wsx-note{ margin:22px 0 0 0; font-size:13px; letter-spacing:0.04em; color:rgba(250,247,240,0.6); }
.wsx-cta{ margin-top:30px; }
.wsx-media{ margin:0; position:relative; aspect-ratio:4 / 5; overflow:hidden; }
.wsx-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 2.2s cubic-bezier(.16,.8,.3,1); }
html.js-anim .wsx-media.reveal{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.3s cubic-bezier(.65,0,.25,1); }
html.js-anim .wsx-media.reveal.is-visible{ clip-path:inset(0 0 0 0); }
.wsx-media.is-visible img, html:not(.js-anim) .wsx-media img{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  html.js-anim .wsx-media.reveal{ clip-path:none; transition:none; }
  .wsx-media img{ transform:none; transition:none; }
}
@media (max-width: 860px){
  .section.wsx{ padding-top:56px; padding-bottom:64px; }
  .wsx-grid{ grid-template-columns:1fr; gap:36px; }
  .wsx-media{ order:-1; aspect-ratio:1 / 1; }
  .wsx-h{ font-size:clamp(28px,7.6vw,34px); }
  .wsx-list{ column-gap:20px; }
  .wsx-list li{ font-size:16.5px; padding-left:18px; }
}
/* 99th pass, refinements: frames a touch smaller; activities as one quiet line */
.dx{ max-width:960px; }
.wsx-list{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 0; max-width:none; margin-top:34px; padding:18px 0; border-top:1px solid rgba(250,247,240,0.16); border-bottom:1px solid rgba(250,247,240,0.16); }
.wsx-list li, .wsx-list li:nth-last-child(-n+2), .wsx-list li:last-child:nth-child(odd){ border:0; padding:0; }
.wsx-list li::before{ display:none; }
.wsx-list li + li::before{ display:inline-block; content:''; position:static; width:4px; height:4px; border-radius:50%; background:var(--accent-warm-on-dark); margin:0 clamp(14px,1.6vw,22px); vertical-align:middle; transform:none; }
@media (max-width: 860px){
  .wsx-list li{ font-size:16.5px; padding:0; }
  .wsx-list li + li::before{ margin:0 12px; }
}
@media (max-width: 1180px){
  .wsx-list{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:start; column-gap:clamp(22px,3vw,34px); row-gap:12px; }
  .wsx-list li + li::before{ display:none; }
  .wsx-list li{ position:relative; padding-left:14px; }
  .wsx-list li::before{ display:block; content:''; position:absolute; left:0; top:50%; width:4px; height:4px; border-radius:50%; background:var(--accent-warm-on-dark); transform:translateY(-50%); margin:0; }
}
@media (max-width: 400px){
  .wsx-list{ column-gap:18px; }
  .wsx-list li{ font-size:15.5px; }
}
@media (max-width: 1180px){
  section.wsx .wsx-list li, section.wsx .wsx-list li:nth-last-child(-n+2), section.wsx .wsx-list li:last-child:nth-child(odd){ position:relative; padding:0 0 0 14px; border:0; }
  section.wsx .wsx-list li::before, section.wsx .wsx-list li + li::before{ display:block; content:''; position:absolute; left:0; top:50%; width:4px; height:4px; margin:0; border-radius:50%; background:var(--accent-warm-on-dark); transform:translateY(-50%); }
}

/* ===== 100th pass: Experience — "Play" opens the watersports panel ===== */
.dx-frame-btn{ display:block; width:100%; padding:0; border:0; cursor:pointer; background:var(--sand); }
.dx-plus{ position:absolute; right:14px; bottom:14px; width:38px; height:38px; border-radius:50%; background:rgba(250,247,240,0.92); box-shadow:0 2px 14px rgba(0,0,0,0.12); transition:transform .45s cubic-bezier(.16,.8,.3,1), background .3s ease; }
.dx-plus::before, .dx-plus::after{ content:''; position:absolute; left:50%; top:50%; width:13px; height:1.5px; background:var(--charcoal); transform:translate(-50%,-50%); transition:transform .45s cubic-bezier(.16,.8,.3,1); }
.dx-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.dx-frame-btn:hover .dx-plus{ transform:scale(1.08); }
.dx-item.is-open .dx-plus{ transform:rotate(45deg); background:var(--accent-warm); }
.dx-item.is-open .dx-plus::before, .dx-item.is-open .dx-plus::after{ background:var(--ivory); }
.dx-frame-btn:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:3px; }
.dx-more{ margin-top:16px; background:none; border:0; border-bottom:1px solid var(--accent-warm); padding:0 0 5px 0; cursor:pointer; font-family:inherit; }
.dx-more svg{ transition:transform .4s cubic-bezier(.16,.8,.3,1); }
.dx-more-close{ display:none; }
.dx-item.is-open .dx-more-open{ display:none; }
.dx-item.is-open .dx-more-close{ display:inline; }
.dx-item.is-open .dx-more svg{ transform:rotate(90deg); }
.dx-item.is-open .dx-title{ color:var(--accent-warm); }

.dx-drawer{ max-width:960px; margin:0 auto; display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s cubic-bezier(.65,0,.25,1); }
.dx-drawer.is-open{ grid-template-rows:1fr; }
.dx-drawer-clip{ min-height:0; overflow:hidden; }
.dx-drawer-panel{ position:relative; margin-top:clamp(36px,4vw,52px); background:var(--navy); padding:clamp(40px,5vw,64px) clamp(28px,5vw,64px); opacity:0; transform:translateY(-12px); transition:opacity .6s ease, transform .8s cubic-bezier(.16,.8,.3,1); }
.dx-drawer.is-open .dx-drawer-panel{ opacity:1; transform:none; transition-delay:.15s; }
.dx-drawer .wsx-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,72px); }
.dx-drawer .wsx-h{ font-size:clamp(28px,3vw,42px); }
.dx-drawer .wsx-body{ font-size:15.5px; }
.dx-drawer .wsx-list{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:start; column-gap:clamp(22px,2.6vw,34px); row-gap:12px; }
.dx-drawer .wsx-list li, .dx-drawer .wsx-list li:nth-last-child(-n+2), .dx-drawer .wsx-list li:last-child:nth-child(odd){ position:relative; padding:0 0 0 14px; border:0; font-size:clamp(16px,1.3vw,18px); }
.dx-drawer .wsx-list li::before, .dx-drawer .wsx-list li + li::before{ display:block; content:''; position:absolute; left:0; top:50%; width:4px; height:4px; margin:0; border-radius:50%; background:var(--accent-warm-on-dark); transform:translateY(-50%); }
.dx-close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border:0; background:none; cursor:pointer; z-index:2; }
.dx-close span::before, .dx-close span::after{ content:''; position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:rgba(250,247,240,0.8); transform:translate(-50%,-50%) rotate(45deg); transition:background .3s ease; }
.dx-close span::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.dx-close:hover span::before, .dx-close:hover span::after{ background:var(--accent-warm-on-dark); }
@media (prefers-reduced-motion: reduce){
  .dx-drawer, .dx-drawer-panel{ transition:none; }
}
@media (max-width: 860px){
  .dx-drawer{ margin:0 -22px; }
  .dx-drawer-panel{ margin-top:28px; padding:56px 22px 44px 22px; }
  .dx-drawer .wsx-grid{ grid-template-columns:1fr; gap:28px; }
  .dx-drawer .wsx-media{ order:-1; aspect-ratio:4 / 3; }
  .dx-drawer .wsx-list{ column-gap:18px; }
  .dx-drawer .wsx-list li{ font-size:15.5px; }
  .dx-plus{ width:34px; height:34px; right:12px; bottom:12px; }
}
button.link-arrow.dx-more{ font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--charcoal); border-bottom-color:var(--accent-warm); }
.dx-item.is-open .dx-more svg{ transform:rotate(-90deg); }

/* ===== 101st pass: Watersports photo becomes a small gallery ===== */
.wsx-gal{ touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.wsx-gal .wsx-slide{ opacity:0; transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform 2.2s cubic-bezier(.16,.8,.3,1); -webkit-user-drag:none; pointer-events:none; }
.wsx-gal .wsx-slide.is-active{ opacity:1; }
.wsx-gal::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(to top, rgba(20,18,15,0.55), rgba(20,18,15,0)); pointer-events:none; z-index:1; }
.wsx-gal-ui{ position:absolute; left:18px; right:14px; bottom:14px; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.wsx-gal-count{ font-size:11px; font-weight:600; letter-spacing:0.22em; color:rgba(250,247,240,0.92); font-variant-numeric:tabular-nums; }
.wsx-gal-btns{ display:flex; gap:8px; }
.wsx-gal-btn{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(250,247,240,0.55); background:rgba(20,18,15,0.18); color:var(--ivory); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .3s ease, border-color .3s ease, transform .3s ease; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.wsx-gal-btn svg{ width:14px; height:14px; }
.wsx-gal-btn:hover{ background:var(--accent-warm); border-color:var(--accent-warm); }
.wsx-gal-btn:focus-visible{ outline:2px solid var(--accent-warm-on-dark); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .wsx-gal .wsx-slide{ transition:none; } }
@media (max-width: 860px){ .wsx-gal-btn{ width:36px; height:36px; } }

/* ===== 102nd pass: Discover / Perform / Play each open a panel ===== */
.dx-drawer .wsx-list{ grid-template-columns:repeat(var(--cols,3), max-content); }
.dx-drawer .wsx-list[style*="--cols:1"]{ grid-template-columns:1fr; row-gap:16px; }
.dx-drawer .wsx-list li.wsx-li-2{ display:flex; flex-direction:column; gap:3px; }
.dx-drawer .wsx-list li.wsx-li-2::before{ top:0.72em; }
.wsx-li-t{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,1.4vw,19px); color:var(--ivory); }
.wsx-li-m{ font-family:'Montserrat',sans-serif; font-size:12px; letter-spacing:0.08em; color:rgba(250,247,240,0.6); }
.wsx-body + .wsx-body{ margin-top:12px; }
.dx-pane[hidden]{ display:none; }
.dx-pane.is-in{ animation:dx-pane-in .7s cubic-bezier(.16,.8,.3,1) both; }
@keyframes dx-pane-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .dx-pane.is-in{ animation:none; } }
@media (max-width: 860px){
  .dx-drawer .wsx-list{ grid-template-columns:repeat(min(var(--cols,3), 3), max-content); }
  .dx-drawer .wsx-list[style*="--cols:2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .dx-drawer .wsx-list li, .dx-drawer .wsx-list li:nth-last-child(-n+2), .dx-drawer .wsx-list li:last-child:nth-child(odd){ font-size:15.5px; }
  .dx-drawer .wsx-list li.wsx-li-2 .wsx-li-t{ font-size:17px; }
}

/* ===== 103rd pass: Perform panel — list label + closing line ===== */
.wsx-list-label{ margin-top:32px; font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(250,247,240,0.5); }
.wsx-list.has-label{ margin-top:12px; }
.wsx-pull{ position:relative; margin:30px 0 0 0; padding-left:22px; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(19px,1.6vw,22px); line-height:1.45; color:var(--ivory); max-width:24em; }
.wsx-pull::before{ content:''; position:absolute; left:0; top:0.2em; bottom:0.2em; width:1px; background:var(--accent-warm-on-dark); }
.wsx-pull + .wsx-cta, .wsx-pull + .wsx-note{ margin-top:28px; }
@media (max-width: 860px){ .wsx-pull{ font-size:19px; } }

/* ===== 104th pass: Watersports — North collaboration line ===== */
.wsx-note + .wsx-partner{ margin-top:10px; }
.wsx-partner{ margin:22px 0 0 0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.wsx-partner-l{ font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(250,247,240,0.5); }
.wsx-partner-n{ font-family:'Raleway',sans-serif; font-weight:400; font-size:15px; letter-spacing:0.32em; text-transform:uppercase; color:var(--ivory); }
.wsx-partner + .wsx-cta{ margin-top:28px; }
a.wsx-partner-n{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .3s ease, color .3s ease; }
a.wsx-partner-n:hover, a.wsx-partner-n:focus-visible{ border-bottom-color:var(--accent-warm-on-dark); color:var(--ivory); outline:none; }
.wsx-ext{ width:10px; height:10px; opacity:0.6; transition:opacity .3s ease, transform .3s ease; }
a.wsx-partner-n:hover .wsx-ext{ opacity:1; transform:translate(1px,-1px); }

/* 105th pass (panel photos 15% smaller) removed at the client's request, 9 Oct: she meant the Destinations photos. */

/* ===== 106th pass: Destinations — two calm editorial chapters ===== */
.section.dst{ padding-top:clamp(72px,8vw,112px); padding-bottom:clamp(72px,8vw,112px); }
.dst .section-head{ margin-bottom:clamp(48px,6vw,80px); max-width:900px; }
.dst-ch{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(40px,6vw,96px); align-items:center; max-width:1160px; margin:0 auto; }
.dst-ch.dst-flip .dst-media{ order:2; }
.dst-media.wsx-media{ aspect-ratio:4 / 3; border-radius:0; }
.dst-copy{ max-width:520px; }
.dst-months{ margin:0; display:flex; align-items:center; gap:14px; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,1.4vw,20px); color:var(--accent-warm); }
.dst-idx{ font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.22em; color:var(--muted); padding-right:14px; border-right:1px solid rgba(38,36,31,0.2); line-height:1; }
.dst-name{ margin:16px 0 0 0; font-family:'Raleway',sans-serif; font-weight:200; font-size:clamp(40px,4.6vw,64px); line-height:1.02; letter-spacing:-0.015em; color:var(--charcoal); }
.dst-place{ margin:12px 0 0 0; font-size:11px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); }
.dst-text{ margin:26px 0 0 0; font-size:15.5px; line-height:1.8; color:var(--muted); }
.dst-facts{ margin:30px 0 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,auto)); justify-content:space-between; gap:18px 24px; padding:20px 0; border-top:1px solid rgba(38,36,31,0.14); border-bottom:1px solid rgba(38,36,31,0.14); }
.dst-facts dt{ font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.dst-facts dd{ margin:8px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(17px,1.35vw,19px); color:var(--charcoal); }
.dst-note{ display:block; margin-top:3px; font-family:'Montserrat',sans-serif; font-size:11px; color:var(--muted); }
.dst-ctas{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; }
.dst-ctas .sq-pill{ padding:13px 26px; font-size:11px; background:var(--accent-warm); border-color:var(--accent-warm); color:var(--ivory); }
.dst-ctas .sq-pill:hover{ background:#8A3F22; border-color:#8A3F22; }
.dst-ctas .sq-pill.sqp-pill-line{ background:transparent; border:1px solid rgba(168,77,42,0.55); color:var(--accent-warm); font-family:inherit; cursor:pointer; }
.dst-ctas .sq-pill.sqp-pill-line:hover{ background:rgba(168,77,42,0.07); border-color:var(--accent-warm); }

/* the passage between the two seasons */
.dst-pass{ max-width:720px; margin:clamp(64px,8vw,112px) auto; text-align:center; }
.dst-pass-label{ display:block; font-size:11px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent-warm); }
.dst-pass-route{ margin-top:18px; display:flex; align-items:center; gap:22px; }
.dst-pass-end{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(16px,1.4vw,19px); color:var(--charcoal); white-space:nowrap; }
.dst-pass-line{ position:relative; flex:1 1 auto; height:1px; background:rgba(38,36,31,0.16); }
.dst-pass-fill{ position:absolute; inset:0; background:var(--accent-warm); transform-origin:left center; transform:scaleX(1); }
.dst-pass-dot{ position:absolute; top:50%; left:100%; width:7px; height:7px; border-radius:50%; background:var(--accent-warm); box-shadow:0 0 0 5px rgba(168,77,42,0.14); transform:translate(-50%,-50%); }
html.js-anim .dst-pass .dst-pass-fill{ transform:scaleX(0); transition:transform 2.4s cubic-bezier(.65,0,.25,1) .3s; }
html.js-anim .dst-pass .dst-pass-dot{ left:0; transition:left 2.4s cubic-bezier(.65,0,.25,1) .3s; }
html.js-anim .dst-pass.is-visible .dst-pass-fill{ transform:scaleX(1); }
html.js-anim .dst-pass.is-visible .dst-pass-dot{ left:100%; }
@media (prefers-reduced-motion: reduce){
  html.js-anim .dst-pass .dst-pass-fill{ transform:none; transition:none; }
  html.js-anim .dst-pass .dst-pass-dot{ left:100%; transition:none; }
}

@media (max-width: 1080px){
  .dst-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; }
}
@media (max-width: 860px){
  .section.dst{ padding-top:56px; padding-bottom:56px; }
  .dst-ch{ grid-template-columns:1fr; gap:28px; }
  .dst-ch.dst-flip .dst-media{ order:0; }
  .dst-media.wsx-media{ margin:0 -22px; aspect-ratio:4 / 3; }
  .dst-name{ font-size:clamp(38px,11vw,46px); }
  .dst-text{ font-size:15px; }
  .dst-ctas .sq-pill{ flex:1 1 auto; padding:13px 18px; }
  .dst-pass{ margin:56px auto; }
  .dst-pass-route{ gap:14px; }
}
.dst-ctas{ gap:12px; }
.dst-ctas .sq-pill{ padding:13px 30px; }
button.link-arrow.dst-more{ display:inline-flex; margin-top:22px; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--charcoal); border-bottom:1px solid var(--accent-warm); }
@media (max-width: 860px){ .dst-ctas .sq-pill{ padding:13px 16px; } }

/* ===== 107th pass: Destinations — the previous spread, calmer, on one screen ===== */
.section.dsx{ padding:clamp(72px,8vw,112px) 0 clamp(72px,8vw,112px) 0; }
.dsx .section-head{ padding:0 64px; margin-bottom:clamp(40px,5vw,64px); max-width:1000px; }
.dsx-stage{ display:grid; grid-template-columns:minmax(0,43fr) minmax(0,57fr); min-height:clamp(600px,80vh,760px); }
.dsx-media{ position:relative; overflow:hidden; background:var(--sand); }
.dsx-hero{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1s cubic-bezier(.16,.8,.3,1); }
.dsx-hero.is-on{ opacity:1; }
.dsx-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform 6s ease-out; }
.dsx-hero.is-on img.is-active{ transform:scale(1); }
.dsx-shade{ position:absolute; left:0; right:0; top:0; height:42%; background:linear-gradient(to bottom, rgba(20,18,15,0.38), rgba(20,18,15,0)); pointer-events:none; z-index:1; }
.dsx-title{ position:absolute; left:clamp(28px,4.4vw,64px); top:clamp(28px,4vw,52px); right:24px; z-index:2; color:var(--ivory); pointer-events:none; }
.dsx-name{ display:block; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(44px,4.6vw,68px); line-height:1; letter-spacing:-0.01em; }
.dsx-place{ display:block; margin-top:14px; font-size:11px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; color:rgba(250,247,240,0.88); }
.dsx-hero .wsx-gal-ui{ left:clamp(28px,4.4vw,64px); right:clamp(20px,2.4vw,32px); bottom:clamp(20px,2.4vw,30px); }

.dsx-side{ padding:clamp(36px,4.4vw,64px) clamp(32px,5.6vw,96px) clamp(36px,4vw,56px) clamp(32px,5vw,80px); display:flex; flex-direction:column; justify-content:center; }
.dsx-route{ display:flex; align-items:center; gap:18px; max-width:560px; }
.dsx-tab{ background:none; border:0; padding:6px 0; cursor:pointer; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(16px,1.3vw,18px); color:var(--muted); transition:color .35s ease; white-space:nowrap; }
.dsx-tab:hover{ color:var(--charcoal); }
.dsx-tab.is-on{ color:var(--charcoal); }
.dsx-tab:focus-visible{ outline:2px solid var(--accent-warm); outline-offset:4px; }
.dsx-line{ position:relative; flex:1 1 auto; height:1px; background:rgba(38,36,31,0.18); }
.dsx-line-label{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); font-size:10px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; color:var(--accent-warm); white-space:nowrap; }
.dsx-dot{ position:absolute; top:50%; left:0; width:7px; height:7px; border-radius:50%; background:var(--accent-warm); box-shadow:0 0 0 5px rgba(168,77,42,0.14); transform:translate(-50%,-50%); transition:left 1.1s cubic-bezier(.65,0,.25,1); }
.dsx[data-active="1"] .dsx-dot{ left:100%; }

.dsx-blocks{ display:grid; margin-top:clamp(32px,3.6vw,48px); max-width:600px; }
.dsx-block{ grid-area:1 / 1; opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .8s cubic-bezier(.16,.8,.3,1); pointer-events:none; }
.dsx-block.is-on{ opacity:1; transform:none; pointer-events:auto; transition-delay:.18s; }
.dsx-months{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(24px,2.2vw,32px); line-height:1.15; color:var(--accent-warm); }
.dsx-text{ margin:20px 0 0 0; font-size:15.5px; line-height:1.8; color:var(--muted); }
.dsx-facts{ margin:28px 0 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:18px 0; border-top:1px solid rgba(38,36,31,0.14); border-bottom:1px solid rgba(38,36,31,0.14); }
.dsx-facts > div{ padding:0 16px; border-left:1px solid rgba(38,36,31,0.12); }
.dsx-facts > div:first-child{ padding-left:0; border-left:0; }
.dsx-facts dt{ font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.dsx-facts dd{ margin:8px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(16px,1.3vw,18px); color:var(--charcoal); }
.dsx-note{ display:block; margin-top:3px; font-family:'Montserrat',sans-serif; font-size:11px; color:var(--muted); }
.dsx-ctas{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 12px; }
.dsx-ctas .dsx-pill{ padding:13px 28px; font-size:11px; background:var(--accent-warm); border-color:var(--accent-warm); color:var(--ivory); }
.dsx-ctas .dsx-pill:hover{ background:#8A3F22; border-color:#8A3F22; }
.dsx-ctas .dsx-pill.dsx-pill-line{ background:transparent; border:1px solid rgba(168,77,42,0.55); color:var(--accent-warm); }
.dsx-ctas .dsx-pill.dsx-pill-line:hover{ background:rgba(168,77,42,0.07); border-color:var(--accent-warm); }
.dsx-ctas .dsx-more{ margin:0 0 0 14px; }
@media (prefers-reduced-motion: reduce){
  .dsx-hero, .dsx-hero img, .dsx-block, .dsx-dot{ transition:none; }
}
@media (max-width: 1180px){
  .dsx-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px; }
  .dsx-facts > div:nth-child(3){ padding-left:0; border-left:0; }
  .dsx-ctas .dsx-more{ margin:6px 0 0 0; flex-basis:100%; }
}
@media (max-width: 860px){
  .section.dsx{ padding:56px 0 56px 0; }
  .dsx .section-head{ padding:0 22px; }
  .dsx-stage{ grid-template-columns:1fr; min-height:0; }
  .dsx-media{ aspect-ratio:4 / 5; max-height:78vh; }
  .dsx-side{ padding:28px 22px 0 22px; }
  .dsx-route{ max-width:none; }
  .dsx-blocks{ margin-top:30px; }
  .dsx-text{ font-size:15px; }
  .dsx-ctas .dsx-pill{ flex:1 1 auto; padding:13px 16px; }
}
@media (max-width: 1180px){
  .dsx-ctas{ display:grid; grid-template-columns:auto auto; justify-content:start; }
  .dsx-ctas .dsx-more{ grid-column:1 / -1; justify-self:start; flex-basis:auto; margin:8px 0 0 0; }
}
@media (max-width: 860px){
  .dsx-ctas{ grid-template-columns:1fr 1fr; justify-content:stretch; }
  .dsx-route{ padding-top:14px; }
}

/* 108th pass (Destinations photos as a thumbnail row) removed at the client's request, 9 Oct. */

/* ===== 109th pass: an obvious way to reach Solace (footer + Contact page) ===== */
.fxc{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:24px 48px; align-items:end; padding:clamp(40px,4.4vw,60px) 0; border-bottom:1px solid var(--rule); }
.fxc .footer-news-h{ margin:0; }
.fxc-line{ margin:12px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.8vw,26px); line-height:1.3; color:var(--charcoal); }
.fxc-ways{ display:grid; grid-template-columns:repeat(3, minmax(0,auto)); justify-content:end; gap:20px clamp(32px,4vw,64px); }
.fxc-way{ display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--charcoal); }
.fxc-k{ font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.fxc-v{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(18px,1.55vw,22px); color:var(--charcoal); padding-bottom:6px; white-space:nowrap; }
.fxc-v::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent-warm); transform:scaleX(0.18); transform-origin:left center; transition:transform .5s cubic-bezier(.16,.8,.3,1); }
.fxc-way:hover .fxc-v::after, .fxc-way:focus-visible .fxc-v::after{ transform:scaleX(1); }
.fxc-way:focus-visible{ outline:none; }
.fxc-cta .fxc-v{ color:var(--accent-warm); }
.fxc-v svg{ width:22px; height:11px; transition:transform .4s cubic-bezier(.16,.8,.3,1); }
.fxc-cta:hover .fxc-v svg{ transform:translateX(4px); }
@media (max-width: 1100px){
  .fxc{ grid-template-columns:1fr; align-items:start; }
  .fxc-ways{ justify-content:start; }
}
@media (max-width: 700px){
  .fxc{ padding:40px 0 36px 0; gap:22px; }
  .fxc-ways{ grid-template-columns:1fr; gap:20px; }
  .fxc-v{ font-size:20px; }
}

.ct-direct{ margin:22px 0 0 0; font-size:15px; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 12px; }
.ct-direct a{ color:var(--charcoal); text-decoration:none; border-bottom:1px solid rgba(168,77,42,0.45); padding-bottom:2px; transition:border-color .3s ease, color .3s ease; }
.ct-direct a:hover{ color:var(--accent-warm); border-bottom-color:var(--accent-warm); }
.ct-direct-sep{ width:4px; height:4px; border-radius:50%; background:var(--accent-warm); opacity:.6; }

/* ===== 110th pass: footer contact — one slim, centred line ===== */
.fxc2{ max-width:1360px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 26px; padding:26px 0; border-bottom:1px solid var(--rule); }
.fxc2-k{ font-size:10.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-warm); }
.fxc2-ways{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 18px; }
.fxc2-a{ position:relative; display:inline-flex; align-items:center; gap:8px; font-family:'Raleway',sans-serif; font-weight:400; font-size:15px; letter-spacing:0.02em; color:var(--charcoal); text-decoration:none; padding:3px 0; }
.fxc2-a::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.16,.8,.3,1); }
.fxc2-a:hover::after, .fxc2-a:focus-visible::after{ transform:scaleX(1); }
.fxc2-a:focus-visible{ outline:none; }
.fxc2-cta{ color:var(--accent-warm); }
.fxc2-a svg{ width:18px; height:9px; transition:transform .4s cubic-bezier(.16,.8,.3,1); }
.fxc2-cta:hover svg{ transform:translateX(3px); }
.fxc2-dot{ width:3px; height:3px; border-radius:50%; background:var(--accent-warm); opacity:.55; }
@media (max-width: 700px){
  .fxc2{ flex-direction:column; gap:12px; padding:28px 0; }
  .fxc2-ways{ flex-direction:column; gap:8px; }
  .fxc2-dot{ display:none; }
  .fxc2-a{ font-size:15.5px; }
}

/* ===== 110th pass: one FAQ design on every page ===== */
.section.fq-sec{ padding:clamp(80px,8vw,112px) 64px; }
.fq-grid{ max-width:1052px; margin:0 auto; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:40px clamp(40px,6vw,96px); align-items:start; }
.fq-title{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(34px,3.2vw,46px); line-height:1.08; letter-spacing:-0.012em; color:var(--charcoal); }
.fq-sec .faq{ max-width:none; margin:0; border-top:1px solid var(--rule); }
.fq-sec .faq-item{ border-bottom:1px solid var(--rule); }
.fq-sec .faq-q{ padding:18px 0; font-family:'Raleway',sans-serif; font-weight:400; font-size:16px; line-height:1.4; color:var(--charcoal); }
.fq-sec .faq-q:hover{ color:var(--accent-warm); }
.fq-sec .faq-q svg{ width:13px; height:13px; color:var(--accent-warm); }
.fq-sec .faq-a p{ max-width:none; margin:0; padding:0 0 18px 0; font-size:15px; line-height:1.7; color:var(--muted); }
html.js-anim .fq-sec .reveal .faq-item{ opacity:0; transform:translateY(10px); transition:opacity .7s ease var(--si,0ms), transform .9s cubic-bezier(.2,.75,.18,1) var(--si,0ms); }
html.js-anim .fq-sec .reveal.is-visible .faq-item{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js-anim .fq-sec .reveal .faq-item{ opacity:1; transform:none; transition:none; } }
@media (max-width: 860px){
  .section.fq-sec{ padding:64px 22px; }
  .fq-grid{ grid-template-columns:1fr; gap:24px; }
  .fq-title{ font-size:clamp(30px,8vw,36px); }
  .fq-sec .faq-q{ font-size:15.5px; padding:16px 0; }
  .fq-sec .faq-a p{ font-size:14.5px; }
}
.fq-sec .faq-q svg{ width:14px; height:14px; }
.fq-sec .faq-q svg line{ stroke-width:1.9; }
.section.fq-ivory{ background:var(--ivory); }

/* comment (9 Oct): "why is this title so low? put it like it is for every title… too much gap on top" — Why Solace starts at the same 64px (48px on phones) as the other homepage sections */
.section.why-solace.wy3{ padding-top:64px; padding-bottom:clamp(72px,7vw,104px); }
@media (max-width: 860px){ .section.why-solace.wy3{ padding-top:48px; padding-bottom:64px; } }

/* ===== 112th pass: concise About page ===== */
.ab3-why .eyebrow{ margin-bottom:18px; }
.ab3-why .ab3-why-h{ margin-top:0; }
.ab3-why .ab-intro-sub + .ab-intro-sub{ margin-top:14px; }
.ab3-paths{ max-width:720px; margin:36px auto 0 auto; }
.ab3-paths .ab-path{ justify-content:center; gap:14px; }
#page .ab-intro-c.ab3-why{ padding:clamp(64px,6.4vw,96px) 0; }
@media (max-width: 860px){ #page .ab-intro-c.ab3-why{ padding:56px 0; } .ab3-paths{ margin-top:28px; } }
/* 113th pass: the founders' Instagram page */
.ab3-ig{ margin:26px 0 0 0; padding-top:20px; border-top:1px solid var(--rule); font-size:15px; line-height:1.7; color:var(--muted); }
.ab3-ig a{ display:inline-flex; align-items:center; gap:5px; color:var(--accent-warm); text-decoration:none; border-bottom:1px solid rgba(168,77,42,0.4); padding-bottom:1px; transition:border-color .3s ease; }
.ab3-ig a:hover, .ab3-ig a:focus-visible{ border-bottom-color:var(--accent-warm); outline:none; }
.ab3-ig svg{ width:10px; height:10px; transition:transform .3s ease; }
.ab3-ig a:hover svg{ transform:translate(1px,-1px); }
/* 114th pass: The Salty Cruisers as a proof point in the founders' story */
.ab3-ig2{ margin:30px 0 0 0; padding:26px 0 0 0; border-top:1px solid var(--rule); }
.ab3-ig2-k{ margin:0; font-size:10.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-warm); }
.ab3-ig2-s{ margin:14px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.7vw,24px); line-height:1.4; color:var(--charcoal); text-wrap:pretty; }
.ab3-ig2-h{ color:var(--accent-warm); white-space:nowrap; }
.ab3-ig2-b{ margin:12px 0 0 0; font-size:15px; line-height:1.75; color:var(--muted); }
.ab3-ig2-a{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--charcoal); text-decoration:none; border-bottom:1px solid var(--accent-warm); padding-bottom:5px; transition:gap .3s ease, opacity .3s ease; }
.ab3-ig2-a:hover{ gap:11px; }
.ab3-ig2-a svg{ width:10px; height:10px; color:var(--accent-warm); }
@media (max-width: 860px){ .ab3-ig2-s{ font-size:20px; } .ab3-ig2-b{ font-size:14.5px; } }
/* the handle is now the link (client: no "Follow on Instagram") */
a.ab3-ig2-h{ text-decoration:none; background-image:linear-gradient(var(--accent-warm),var(--accent-warm)); background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat; padding-bottom:2px; transition:background-size .4s ease, color .3s ease; }
a.ab3-ig2-h:hover, a.ab3-ig2-h:focus-visible{ background-size:100% 2px; outline:none; color:#8A3F22; }
/* client (9 Oct): "on top of WHY SOLACE in the about page, the gap is too big" — same 64px / 48px start as the other sections */
#page .ab-intro-c.ab3-why{ padding-top:64px; }
@media (max-width: 860px){ #page .ab-intro-c.ab3-why{ padding-top:44px; } }

/* ===== 115th pass: socials in the footer line ===== */
.fxc2-sep{ width:1px; height:16px; background:var(--rule); margin:0 6px; }
.fxc2-ext{ width:9px !important; height:9px !important; opacity:.55; transition:opacity .3s ease, transform .3s ease; }
.fxc2-soc:hover .fxc2-ext{ opacity:1; transform:translate(1px,-1px); }
@media (max-width: 700px){ .fxc2-sep{ width:28px; height:1px; margin:6px 0; } }

/* ===== 116th pass: footer redesign — one calm grid ===== */
.footer.fz{ padding:clamp(56px,5.6vw,80px) 64px 28px 64px; border-top:1px solid rgba(38,36,31,0.12); }
.fz-in{ max-width:1240px; margin:0 auto; }
.fz-top{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px clamp(48px,7vw,120px); align-items:start; }
.fz-logo{ line-height:0; color:var(--logo-ink); }
.fz-logo .slogo{ height:14px; }
.fz-news{ margin-top:clamp(36px,3.6vw,48px); max-width:420px; }
.fz-h{ margin:0; font-size:10.5px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-warm); }
.fz-news-line{ margin:14px 0 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(19px,1.55vw,22px); line-height:1.4; color:var(--charcoal); }
.fz-form{ display:flex; align-items:center; gap:16px; margin-top:22px; border-bottom:1px solid rgba(38,36,31,0.32); transition:border-color .3s ease; }
.fz-form:focus-within{ border-bottom-color:var(--accent-warm); }
.fz-form.is-error{ border-bottom-color:#A33A2A; }
.fz-form input{ flex:1 1 auto; min-width:0; border:0; background:transparent !important; padding:12px 0; font-family:'Raleway',sans-serif; font-size:15px; color:var(--charcoal); outline:none; box-shadow:none; }
.fz-form input::placeholder{ color:rgba(38,36,31,0.45); }
.fz-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; background:none; border:0; padding:12px 0; cursor:pointer; font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-warm); transition:gap .3s ease; }
.fz-btn:hover{ gap:14px; }
.fz-btn svg{ width:20px; height:10px; }
.fz-news .footer-news-note{ margin:10px 0 0 0; font-size:11.5px; color:var(--muted); min-height:0; }
.fz-news .footer-news-note:empty{ display:none; }
.fz-news .footer-news-done{ margin:22px 0 0 0; font-size:15px; }

.fz-cols{ display:grid; grid-template-columns:repeat(3, minmax(0, auto)); justify-content:space-between; gap:40px 48px; padding-top:4px; }
.fz-list{ list-style:none; margin:20px 0 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fz-a{ position:relative; display:inline-flex; align-items:center; gap:6px; font-family:'Raleway',sans-serif; font-weight:400; font-size:15px; line-height:1.4; color:var(--charcoal); text-decoration:none; padding-bottom:2px; white-space:nowrap; }
.fz-a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.16,.8,.3,1); }
.fz-a:hover::after, .fz-a:focus-visible::after{ transform:scaleX(1); }
.fz-a:focus-visible{ outline:none; }
.fz-ext{ width:9px; height:9px; opacity:.5; transition:opacity .3s ease, transform .3s ease; }
.fz-a:hover .fz-ext{ opacity:1; transform:translate(1px,-1px); }

.fz-bottom{ margin-top:clamp(48px,5vw,72px); padding-top:22px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px; }
.fz-copy{ margin:0; font-size:11.5px; letter-spacing:0.04em; color:var(--muted); }
.fz-legal{ display:flex; gap:24px; }
.fz-legal a{ font-size:11.5px; letter-spacing:0.04em; color:var(--muted); text-decoration:none; transition:color .3s ease; }
.fz-legal a:hover{ color:var(--charcoal); }

@media (max-width: 1100px){
  .fz-top{ grid-template-columns:1fr; }
  .fz-cols{ justify-content:start; gap:40px clamp(48px,8vw,96px); }
}
@media (max-width: 700px){
  .footer.fz{ padding:52px 22px 28px 22px; }
  .fz-logo .slogo{ height:12px; }
  .fz-news{ margin-top:32px; max-width:none; }
  .fz-top{ gap:44px; }
  .fz-cols{ grid-template-columns:1fr 1fr; gap:36px 24px; padding-top:36px; border-top:1px solid var(--rule); }
  .fz-cols .fz-col:nth-child(2){ grid-column:1 / -1; order:3; }
  .fz-a{ font-size:15.5px; }
  .fz-bottom{ margin-top:40px; }
}
.fz .fz-news.footer-news{ grid-area:auto; justify-self:start; width:100%; max-width:420px; }
@media (max-width: 700px){ .fz .fz-news.footer-news{ max-width:none; } }
/* client (9 Oct): a warmer, personal thank-you after subscribing */
.fz .footer-news-done{ align-items:flex-start; }
.fz .footer-news-done .footer-news-tick{ margin-top:1px; }
.footer-news-done-t{ display:block; line-height:1.55; }
.footer-news-done-t strong{ display:block; font-family:'Raleway',sans-serif; font-weight:400; font-size:19px; color:var(--charcoal); }
.footer-news-done-s{ display:block; margin-top:4px; font-size:14.5px; color:var(--muted); max-width:34em; }
#philosophy .exp-philosophy-copy p{ text-wrap:balance; }
/* client (9 Oct): the + on the three Experience cards in orange */
.dx-plus{ background:var(--accent-warm); box-shadow:0 4px 16px rgba(120,52,26,0.28); transition:transform .45s cubic-bezier(.16,.8,.3,1), background .3s ease; }
.dx-plus::before, .dx-plus::after{ background:var(--ivory); }
.dx-frame-btn:hover .dx-plus{ background:#8A3F22; }
.dx-item.is-open .dx-plus{ background:#8A3F22; }
/* 118th pass: the Solace Difference copy — a quiet lead line, then the detail */
#philosophy .exp-philosophy-copy p:first-child{ font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(20px,1.7vw,24px); line-height:1.4; color:var(--charcoal); margin-bottom:6px; }
#philosophy .exp-philosophy-copy p:last-child{ color:var(--charcoal); }
/* keep the three Destinations buttons on one line on laptops */
@media (max-width: 1400px) and (min-width: 901px){
  .sqp .sqp-ctas{ flex-wrap:nowrap; gap:10px; }
  .sqp .sqp-ctas .sq-pill{ padding:13px 22px; letter-spacing:0.08em; }
}
@media (max-width: 1100px) and (min-width: 901px){
  .sqp .sqp-ctas .sq-pill{ padding:12px 16px; font-size:10.5px; letter-spacing:0.06em; }
}

/* client (9 Oct): "Three dimensions. One Solace experience." — still there, but a whisper (no italics: the client asked for them to be removed in an earlier round) */
#philosophy .exp-closing-mark{ margin-top:clamp(40px,4vw,56px); gap:16px; }
#philosophy .exp-closing-line{ font-family:'Raleway',sans-serif; font-weight:300; font-style:normal; font-size:clamp(15px,1.15vw,17px); letter-spacing:0.02em; line-height:1.4; color:var(--muted); }
#philosophy .exp-closing-rule{ width:1px; height:14px; opacity:.6; }
@media (max-width: 860px){
  #philosophy .exp-closing-mark{ flex-direction:row; gap:12px; margin-top:32px; }
  #philosophy .exp-closing-line{ font-size:14.5px; }
  #philosophy .exp-closing-rule{ width:1px; height:12px; }
}
/* client (9 Oct): "Experience details" filled like Sailing dates and Plan your week */
.sqp-st .sqp-ctas .sq-pill.sqp-pill-line{ background:var(--accent-warm); border-color:var(--accent-warm); color:var(--ivory); }
.sqp-st .sqp-ctas .sq-pill.sqp-pill-line:hover{ background:#8A3F22; border-color:#8A3F22; color:var(--ivory); }
/* client (9 Oct): no sand gap under the black specs band of The Yacht — it now sits on the section's edge */
@media (min-width: 861px){ .section.yacht-section{ padding-bottom:0; } }
/* client (9 Oct): season tabs as a quiet 01 / 02 (Winter / Summer depends on the hemisphere) */
.sqp .sq-tab{ font-variant-numeric:tabular-nums; letter-spacing:0.18em; font-size:12px; }

/* comment (9 Oct): "when there's that line under the words, make it orange" — the menu's underline (current page, and on hover) in copper */
.nav-links a{ position:relative; }
.nav-links a.is-active{ border-bottom-color:var(--accent-warm) !important; }
.nav:not(.is-scrolled):not(.solid-from-start) .nav-links a.is-active{ border-bottom-color:var(--accent-warm-on-dark) !important; }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--accent-warm); transform:scaleX(0); transform-origin:left center; transition:transform .4s cubic-bezier(.16,.8,.3,1); }
.nav-links a:not(.is-active):hover::after{ transform:scaleX(1); }
.nav-links a:hover{ opacity:1; }
.nav:not(.is-scrolled):not(.solid-from-start) .nav-links a::after{ background:var(--accent-warm-on-dark); }
/* same request: every underlined text link in copper (was a dark teal on a few) */
.link-arrow:not(.on-dark), button.link-arrow:not(.on-dark){ border-bottom-color:var(--accent-warm); }

/* ===== 119th pass: Destinations, calmer (client, 9 Oct) =====
   1) one quiet link to the other season instead of two tabs
   2) the season name on the photo a little smaller
   3) two photos, editorial rather than a row of slides: different sizes,
      staggered, square corners, no drop shadows; the first laid over the
      edge of the large photo with a thin ivory mat like a print */
.sqp .sq-tab.is-on{ display:none; }
.sqp .sq-tab{ display:inline-flex; align-items:center; gap:10px; padding:4px 0 6px 0; font-family:'Raleway',sans-serif; font-size:14px; font-weight:400; letter-spacing:0.03em; color:var(--muted); transition:color .35s ease; }
.sqp .sq-tab:hover, .sqp .sq-tab:focus-visible{ color:var(--accent-warm); outline:none; }
.sqp .sq-tab::after{ background:var(--accent-warm); }
.sqp .sq-tab:hover::after, .sqp .sq-tab:focus-visible::after{ transform:scaleX(1); }
.sq-tab-ar{ display:inline-block; color:var(--accent-warm); transition:transform .4s cubic-bezier(.16,.8,.3,1); }
.sqp .sq-tab[data-go="1"]:hover .sq-tab-ar{ transform:translateX(4px); }
.sqp .sq-tab[data-go="0"]:hover .sq-tab-ar{ transform:translateX(-4px); }

.sqp .sq-hero-name{ font-size:clamp(30px,6.4cqi,52px); }
@media (min-width:901px){
  .sqp .sq-hero-name{ top:calc(34px + 0.293 * clamp(20px,1.9vw,28px) - 0.168 * clamp(30px,6.4cqi,52px)); }
}
@media (max-width:900px){ .sqp .sq-hero-name{ font-size:clamp(28px,8cqi,36px); } }

.sqp .sq-card[data-slot="card2"]{ display:none; }
.sqp .sq-cards{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); column-gap:5%; }
.sqp .sq-card{ border-radius:2px; box-shadow:none; }
.sqp .sq-card[data-slot="card0"]{ align-self:start; height:100%; box-shadow:0 0 0 7px var(--ivory); }
.sqp .sq-card[data-slot="card1"]{ align-self:end; height:76%; }
.sqp .sq-card .sq-card-tint{ background:rgba(20,18,15,0.03); }
@media (max-width:900px){
  .sqp .sq-cards{ column-gap:6%; }
  .sqp .sq-card[data-slot="card0"]{ box-shadow:none; }
  .sqp .sq-card{ border-radius:2px; }
}
/* About starts with Our story (no opening photo): clear the fixed menu */
#page .ab3-story.ab3-first{ padding-top:calc(68px + clamp(48px,5vw,72px)); }
@media (max-width: 860px){ #page .ab3-story.ab3-first{ padding-top:calc(60px + 36px); } }
/* Destinations photos: a little smaller, more air */
.sqp .sq-cards{ grid-template-columns:minmax(0,1.35fr) minmax(0,0.95fr); column-gap:6%; right:5% !important; }
/* client (9 Oct): the two Destinations photos the same size (different sizes felt odd) */
.sqp .sq-cards{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:3.2%; }
.sqp .sq-card[data-slot="card1"]{ align-self:start; height:100%; }
@media (max-width:900px){ .sqp .sq-cards{ column-gap:10px; } }
/* client (9 Oct): no ivory border on the photo that overlaps the large one */
.sqp .sq-card[data-slot="card0"]{ box-shadow:none; }
/* client (9 Oct): the first photo overlaps the large one a little less */
@media (min-width:901px){ .sqp .sq-cards{ left:35.5% !important; } }

/* ===== 120th pass (client, 9 Oct): every button rounded, like the O in Solace ===== */
.btn, a.btn, button.btn, .nav-cta, .xc-btn, .hd-btn, .sq-pill{ border-radius:999px !important; }
.cp-day, .cp-part, .cp-slot{ border-radius:999px; }
/* comment (9 Oct): Why Solace works — the line under the title and the intro each on one line (desktop) */
@media (min-width: 1000px){
  #why-charter .ow-head .nh-tag, #why-charter .ow-head .ow-lead{ max-width:none; }
  #why-charter .ow-head .nh-tag br{ display:none; }
}

/* comment (9 Oct): The Solace Standard — no long line above each item; a short line sits next to the number instead */
@media (min-width:901px){
  .o5-stdx-list li{ border-top:0; padding-top:0; }
  .o5-stdx-list .o5-std-n{ display:flex; align-items:center; gap:14px; }
  .o5-stdx-list .o5-std-n::after{ content:''; width:28px; height:1px; background:var(--accent-warm-on-dark); opacity:.7; transform-origin:left center; transition:transform .9s cubic-bezier(.16,.8,.3,1) calc(var(--rd,0ms) + 250ms); }
  html.js-anim .o5-stdx-list li.reveal .o5-std-n::after{ transform:scaleX(0); }
  html.js-anim .o5-stdx-list li.reveal.is-visible .o5-std-n::after{ transform:scaleX(1); }
}

/* comment (9 Oct): "What we believe" slightly smaller — narrower, smaller type and icons, tighter spacing */
.section.ab-believe{ padding:clamp(52px,5vw,72px) 0; }
.ab-believe .ov-std-in{ max-width:1080px; }
.ab-believe .ov-std-title{ font-size:clamp(28px,2.6vw,38px); }
.ab-believe-grid{ margin-top:clamp(24px,2.6vw,36px); column-gap:clamp(28px,3vw,48px); row-gap:clamp(24px,2.4vw,34px); }
.ab-belief{ padding-top:18px; }
.ab-belief-ic{ width:26px; height:26px; }
.ab-belief-h{ margin-top:12px; font-size:clamp(17px,1.35vw,19px); }
.ab-belief-b{ margin-top:6px; font-size:14px; line-height:1.6; }
@media (max-width:900px){ .ab-believe .ov-std-title{ font-size:28px; } .section.ab-believe{ padding:44px 0; } }

/* ===== 121st pass: one closing band on every page ===== */
.cta.cbx{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:clamp(440px,60vh,560px); padding:96px 64px; background:#1E1C19; text-align:center; }
.cbx-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 2.4s cubic-bezier(.16,.8,.3,1); }
.cbx.is-in .cbx-img, html:not(.js-anim) .cbx-img{ transform:scale(1); }
.cbx-veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,0.42) 0%, rgba(20,18,15,0.58) 100%), radial-gradient(ellipse at center, rgba(20,18,15,0.18) 0%, rgba(20,18,15,0) 70%); }
.cbx-in{ position:relative; z-index:1; max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.cbx-rule{ display:block; width:44px; height:1px; background:var(--accent-warm-on-dark); margin-bottom:28px; transform-origin:center; }
.cbx-h{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(32px,3.4vw,46px); line-height:1.18; letter-spacing:-0.008em; color:var(--ivory); text-wrap:balance; }
.cbx-h br{ display:none; }
.cbx-b{ margin:20px auto 0 auto; max-width:34em; font-size:16px; line-height:1.75; color:rgba(250,247,240,0.82); text-wrap:balance; }
.cbx-btn{ margin-top:34px; }
html.js-anim .cbx-in.reveal .cbx-rule{ transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.18,1) .2s; }
html.js-anim .cbx-in.reveal.is-visible .cbx-rule{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){ .cbx-img{ transform:none; transition:none; } html.js-anim .cbx-in.reveal .cbx-rule{ transform:none; transition:none; } }
@media (max-width: 860px){
  .cta.cbx{ min-height:400px; padding:72px 22px; }
  .cbx-h{ font-size:clamp(28px,7.6vw,34px); }
  .cbx-b{ font-size:15px; }
  .cbx-btn{ margin-top:28px; }
}
#finalCtaHeading.cbx-h{ font-size:clamp(32px,3.4vw,46px) !important; font-weight:300 !important; line-height:1.18 !important; max-width:none; }
@media (max-width: 860px){ #finalCtaHeading.cbx-h{ font-size:clamp(28px,7.6vw,34px) !important; } }
.cbx:has(.cbx-in.is-visible) .cbx-img{ transform:scale(1); }
/* client (9 Oct): no little line above the closing headings */
.cbx-rule{ display:none !important; }

/* comment (9 Oct): the focus frame around a field in copper (was teal), and the full frame visible on the dates field (its reveal container was clipping the sides) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline-color:var(--accent-warm); }
input:focus, textarea:focus, select:focus{ outline-color:var(--accent-warm); }
.ct-when-in{ padding:6px; margin:-6px; }
/* WhatsApp label beside the number */
.fz-wa{ flex-wrap:wrap; }
.fz-wa-l{ margin-left:10px; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-warm); }
.ct-wa-l{ font-size:12px; letter-spacing:0.08em; color:var(--accent-warm); }
/* client (9 Oct): write / message us — below the form, quiet */
.ct-direct2{ margin-top:48px; padding-top:28px; border-top:1px solid var(--rule); }
.ct-direct2-k{ margin:0; font-size:10.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent-warm); }
.ct-direct2-ways{ margin-top:14px; display:flex; flex-wrap:wrap; gap:12px 40px; }
@media (max-width:700px){ .ct-direct2{ margin-top:40px; } .ct-direct2-ways{ flex-direction:column; gap:12px; } }

/* ---- 122nd pass (10 Oct 2026): closing-band videos ---- */
.cbx-vid{ background:#1E1C19; }

/* ---- 123rd pass (10 Oct 2026): crew, guest reviews, Before you decide, Experience-led homepage ---- */
/* Your crew (Experience) */
.section.crew{ background:var(--ivory); padding:112px 64px 104px; }
.crew-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:72px; align-items:center; }
.crew-h{ margin:16px 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(30px,3vw,42px); line-height:1.15; letter-spacing:-0.008em; color:var(--charcoal); text-wrap:balance; }
.crew-lead{ margin:22px 0 0; font-size:17px; line-height:1.6; color:var(--charcoal); }
.crew-p{ margin:12px 0 0; font-size:15px; line-height:1.75; color:var(--muted); max-width:34em; }
.crew-stats{ display:flex; gap:44px; margin:34px 0 0; padding:0; }
.crew-stats div{ display:flex; flex-direction:column; gap:6px; }
.crew-stats dt{ font-family:'Raleway',sans-serif; font-weight:300; font-size:38px; line-height:1; color:var(--charcoal); }
.crew-stats dd{ margin:0; font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.crew-link{ margin-top:34px; align-self:flex-start; }
.crew-photos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.crew-ph{ margin:0; }
.crew-ph img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; }
.crew-ph:nth-child(2){ margin-top:48px; }
.crew-ph figcaption{ margin-top:12px; font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
@media (max-width: 860px){
  .section.crew{ padding:72px 22px; }
  .crew-grid{ grid-template-columns:1fr; gap:36px; }
  .crew-stats{ gap:28px; }
  .crew-stats dt{ font-size:32px; }
  .crew-ph:nth-child(2){ margin-top:28px; }
}

/* Guest reviews (Experience) — hidden until reviews exist */
.section.rv{ background:var(--sand); padding:112px 64px; }
.rv-head{ text-align:center; margin:0 auto 56px; }
.rv-h{ margin-top:16px; }
.rv-list{ max-width:1180px; margin:0 auto; display:grid; gap:28px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.rv-list.rv-n1{ grid-template-columns:minmax(0,720px); justify-content:center; }
.rv-list.rv-n2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:960px; }
.rv-item{ margin:0; background:var(--ivory); border-radius:14px; padding:36px 34px 30px; display:flex; flex-direction:column; justify-content:space-between; gap:26px; }
.rv-q{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:19px; line-height:1.55; color:var(--charcoal); }
.rv-q::before{ content:'“'; } .rv-q::after{ content:'”'; }
.rv-who{ display:flex; flex-direction:column; gap:4px; }
.rv-name{ font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--charcoal); }
.rv-detail{ font-size:13px; color:var(--muted); }
@media (max-width: 860px){
  .section.rv{ padding:72px 22px; }
  .rv-list, .rv-list.rv-n2{ grid-template-columns:1fr; }
  .rv-q{ font-size:17px; }
}

/* Before you decide (Advisory) */
.bdx{ display:grid; grid-template-columns:1fr 1fr; background:var(--sand); min-height:520px; }
.bdx-media{ position:relative; overflow:hidden; }
.bdx-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bdx-text{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:88px clamp(40px,6vw,96px); }
.bdx-h{ margin:16px 0 0; font-family:'Raleway',sans-serif; font-weight:300; font-size:clamp(28px,2.7vw,38px); line-height:1.18; color:var(--charcoal); text-wrap:balance; max-width:15em; }
.bdx-p{ margin:20px 0 0; font-size:15.5px; line-height:1.75; color:var(--muted); max-width:30em; }
.bdx-btn{ margin-top:32px; }
@media (max-width: 860px){
  .bdx{ grid-template-columns:1fr; min-height:0; }
  .bdx-media{ aspect-ratio:4/3; }
  .bdx-text{ padding:56px 22px 64px; }
}

/* Homepage: Experience leads the trio */
.worlds.worlds-lead{ grid-template-columns:1.55fr 1fr; grid-template-rows:repeat(2, minmax(330px, 1fr)); }
.worlds-lead .world{ min-height:0; border-right:none; }
.worlds-lead .world-lead{ grid-row:1 / span 2; min-height:700px; border-right:1px solid rgba(250,247,240,0.14); }
.worlds-lead .world:not(.world-lead):nth-child(2){ border-bottom:1px solid rgba(250,247,240,0.14); }
.worlds-lead .world-lead .world-content{ padding:40px 44px; }
.worlds-lead .world-lead .world-h{ font-size:clamp(26px,2.3vw,34px); line-height:1.2; -webkit-line-clamp:3; line-clamp:3; min-height:0; max-width:15em; margin-bottom:12px; }
.worlds-lead .world-lead .world-p{ font-size:14.5px; max-width:30em; -webkit-line-clamp:3; line-clamp:3; min-height:0; }
.world-facts{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 22px; font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(250,247,240,0.86); }
.worlds-lead .world-lead .world-scrim{ background:linear-gradient(0deg, rgba(21,42,54,0.86) 0%, rgba(21,42,54,0.55) 28%, rgba(21,42,54,0.08) 55%, rgba(21,42,54,0) 70%); }
@media (max-width: 860px){
  .worlds.worlds-lead{ grid-template-columns:1fr; grid-template-rows:none; }
  .worlds-lead .world-lead{ grid-row:auto; min-height:520px; border-right:none; }
  .worlds-lead .world{ min-height:380px; }
  .worlds-lead .world-lead .world-content{ padding:26px 22px; }
}

/* ---- 124th pass (10 Oct 2026): Experience page reordered (Difference ->
   Destinations & Sailing Dates -> The Yacht -> Your crew -> A Day Aboard ->
   FAQ). Backgrounds re-alternated so neighbours never share a colour:
   ivory | sand (Destinations + Sailing Dates, one block) | ivory (Yacht) |
   sand (crew) | ivory (Day) | sand (FAQ) | closing. ---- */
#destinations.sq, #destinations .sq-wrap{ background:var(--sand); }
#sailing-dates.sw3{ background:var(--sand); }
#yacht.yacht-section{ background:var(--ivory); }
#crew.section.crew{ background:var(--sand); }
#day-aboard{ background:var(--ivory); }
#day-aboard .dr-t-dot{ background:var(--ivory); }
#day-aboard .day-moment-time{ background:var(--ivory); }
/* reviews (hidden until supplied) sit between Day (ivory) and FAQ (sand) */
.section.rv{ background:var(--ivory); }
/* client comment (10 Oct): "align the picture please" — the two crew portraits sit level (the second was stepped 48px / 28px lower) */
.crew-ph:nth-child(2){ margin-top:0 !important; }

/* =====================================================================
   MOBILE PASS (10 Oct 2026). Phone-sized screens only (max-width 860px).
   Nothing in this block reaches the computer version: the two new
   elements are display:none by default and every other rule sits inside
   the media query.
   ===================================================================== */
.sqm, .dx-dots{ display:none; }
@media (max-width: 860px){

  /* 1. Destinations: simple stacked seasons instead of the pinned scroll */
  .sqp .sq-wrap{ display:none !important; }
  .sqm{ display:block; padding:0 0 12px; }
  .sqm-season{ margin:0; }
  .sqm-hero{ position:relative; margin:0; aspect-ratio:1 / 1; overflow:hidden; }
  .sqm-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .sqm-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,22,24,0.62) 0%, rgba(20,22,24,0.18) 38%, rgba(20,22,24,0) 60%); pointer-events:none; }
  .sqm-name{ position:absolute; z-index:1; left:22px; right:22px; bottom:22px; display:flex; flex-direction:column; gap:8px; }
  .sqm-region{ font-family:'Raleway',sans-serif; font-weight:300; font-size:32px; line-height:1.05; color:var(--ivory); }
  .sqm-place{ font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(250,247,240,0.92); }
  .sqm-body{ padding:26px 22px 4px; }
  .sqm-months{ margin:0; font-family:'Raleway',sans-serif; font-weight:400; font-size:19px; color:var(--accent-warm); }
  .sqm-copy{ margin:14px 0 0; font-size:15px; line-height:1.72; color:var(--muted); }
  .sqm-facts{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; margin:24px 0 0; padding:20px 0 0; border-top:1px solid rgba(38,36,31,0.12); }
  .sqm-facts div{ display:flex; flex-direction:column; gap:5px; }
  .sqm-facts dt{ font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
  .sqm-facts dd{ margin:0; font-family:'Raleway',sans-serif; font-size:17px; color:var(--charcoal); }
  .sqm-note{ display:block; margin-top:3px; font-family:'Montserrat',sans-serif; font-size:12px; color:var(--muted); }
  .sqm-photos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:24px 0 0; }
  .sqm-photos img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:12px; }
  .sqm-ctas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:24px 0 0; }
  .sqm-ctas .sq-pill{ display:flex; align-items:center; justify-content:center; min-height:46px; margin:0; text-align:center; white-space:normal; }
  .sqm-ctas .sqm-main{ grid-column:1 / -1; }
  .sqm-passage{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:40px 0 36px; }
  .sqm-line{ width:1px; height:28px; background:rgba(38,36,31,0.22); }
  .sqm-line:last-child{ display:none; }
  .sqm-pass-label{ font-size:11px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-warm); }

  /* 2. Floating "Talk to Solace": hidden until wanted (see wireSmartCta) */
  .sticky-mobile-cta.smc{ bottom:calc(16px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 160%); opacity:0; pointer-events:none; transition:transform .38s cubic-bezier(.16,.8,.3,1), opacity .25s ease; }
  .sticky-mobile-cta.smc.smc-on{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }

  /* 3. Opening photos: text always readable */
  .page-hero-scrim{ background:linear-gradient(180deg, rgba(21,32,40,0.38) 0%, rgba(21,32,40,0.06) 26%, rgba(21,32,40,0.22) 48%, rgba(18,24,28,0.84) 100%); }
  .page-hero-eyebrow{ color:#D9A48C !important; text-shadow:0 1px 10px rgba(0,0,0,0.35); }
  .page-hero h1, .page-hero-body{ text-shadow:0 1px 14px rgba(0,0,0,0.28); }
  .page-hero-body{ color:rgba(250,247,240,0.94); }

  /* 4. Nothing smaller than 11px */
  .world-facts, .fz-h, .crew-stats dd, .world-link, .fz-wa-l, .hero-scrolldown, .sq-row-note{ font-size:11px !important; }

  /* 5. Newsletter field: 16px so iPhones don't zoom in */
  #footerNewsEmail{ font-size:16px !important; }

  /* 6. Comfortable tap areas (visuals unchanged) */
  .link-arrow{ position:relative; }
  .link-arrow::after{ content:''; position:absolute; inset:-12px -6px; }
  .fz-a::before{ content:''; position:absolute; inset:-11px -6px; }
  .wy3-tab{ padding-top:12px; padding-bottom:6px; }
  .hero-scrolldown{ padding:14px 0; bottom:20px; }

  /* 8. Discover / Perform / Play: swipe dots */
  .dx-dots{ display:flex; justify-content:center; gap:8px; margin:18px 0 0; }
  .dx-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(38,36,31,0.22); transition:background .3s ease, transform .3s ease; }
  .dx-dots span.on{ background:var(--accent-warm); transform:scale(1.25); }
}
@media (max-width: 860px){
  /* 4 (cont.). Every small label to at least 11px on phones */
  .inc-group-h, .sw3-month, .sw3-tag, .adv-index-t, .ow-cmp-m, .o5-label, .ab-ph figcaption, .ab3-ig2-k, .ct-direct2-k,
  .ts-c-label, .pd-spec-label{ font-size:11px !important; }
  .pd-spec-label{ letter-spacing:0.06em !important; line-height:1.25; }
  .ts-dossier dt, .ts-overlay .ts-row dt, .ts-trail{ font-size:11px !important; }
  .pd-spec-label{ white-space:normal !important; }

  /* 7. Destinations a little shorter: wider photo, text opens on request */
  .sqm-hero{ aspect-ratio:4 / 3; }
  .sqm-copy.is-clamped{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; }
  .sqm-more{ display:inline-flex; align-items:center; min-height:40px; margin:2px 0 0; padding:0; background:none; border:0; font:inherit; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-warm); cursor:pointer; }
}
@media (max-width: 860px){
  .sqm-ctas .sq-pill{ font-size:11px; letter-spacing:0.08em; padding:0 12px; white-space:nowrap; }
}
.pd-more{ display:none; }
@media (max-width: 860px){
  /* 7 (cont.). Shorter pages on phones, same content */
  .pd-body:not(.is-open) p:nth-child(n+2){ display:none; }
  .pd-more{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin:4px auto 0; padding:0; background:none; border:0; font:inherit; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-warm); cursor:pointer; }
  .sw3-maps{ height:min(48vw, 210px) !important; }
  .section.crew{ padding:56px 22px; }
  #stewardship, #ownership-options, #why-charter, #solace-standard, #owner-support, #delivery-repositioning{ padding-top:56px !important; padding-bottom:56px !important; }
  .cta.cbx{ min-height:360px; padding:56px 22px; }
  .fq-sec{ padding-top:52px !important; padding-bottom:52px !important; }
}
@media (max-width: 860px){
  /* MOBILE PASS 2 — homepage: no empty gaps while scrolling */
  html.js-anim .reveal{ transition-duration:.55s !important; transition-delay:0s !important; }
  html.js-anim .reveal.reveal-d1, html.js-anim .reveal.reveal-d2, html.js-anim .reveal.reveal-d3{ transition-delay:.06s !important; }
  html.js-anim .stmt-track-item:not(.stmt-track-empty){ transition-delay:calc(var(--i, 0) * 50ms) !important; transition-duration:.45s !important; }

  /* consistent rhythm: same section spacing and heading scale */
  .section.what-is-solace, .section.why-solace.wy3, .section.perf-diff{ padding-top:56px !important; padding-bottom:56px !important; }
  .what-is-solace .wis-h, .perf-diff .display-2, .wy3-statement, .cbx-h{ font-size:28px !important; line-height:1.22 !important; }
  .cbx-h{ font-weight:300 !important; }
  .worlds-lead .world:not(.world-lead) .world-h{ font-size:21px; line-height:1.25; }
  .worlds-lead .world-lead .world-h{ font-size:25px; }
  .worlds-lead .world .world-content{ padding:24px 22px 26px; }
  .worlds-lead .world{ min-height:400px; }
  .worlds-lead .world-lead{ min-height:540px; }
}
@media (max-width: 860px){
  .worlds-lead .world .world-h{ -webkit-line-clamp:3; line-clamp:3; min-height:0; }
  .worlds-lead .world .world-p{ -webkit-line-clamp:3; line-clamp:3; min-height:0; }
}
@media (max-width: 860px){
  .page-hero-eyebrow{ text-shadow:none !important; }
}

/* =====================================================================
   MOBILE PASS 3 (10 Oct 2026, client's phone list). Phones only: every
   rule sits inside max-width:860px, and the new phone-only elements
   (.page-hero-body-m, .owm, .mfold-btn, .mdots, .sqm-gap) are hidden above it.
   ===================================================================== */
.page-hero .page-hero-body-m, .owm, .mfold-btn, .mdots{ display:none; }
@media (max-width: 860px){

  /* Home — "Performance, done differently" smaller */
  .section.perf-diff{ padding-top:48px !important; padding-bottom:44px !important; }
  .perf-diff .display-2{ font-size:24px !important; line-height:1.25 !important; }
  .perf-diff .statement > p{ font-size:15px; line-height:1.6; margin-top:14px; }
  .perf-diff .statement-list-lead{ margin-top:32px; }
  .perf-diff .statement-list-lead::before{ display:none; }
  .perf-diff .stmt-track-wrap{ margin-top:14px; }
  .perf-diff .stmt-track-item{ font-size:15px !important; padding:9px 0 !important; }

  /* Footer smaller */
  .footer.fz{ padding:40px 22px 24px 22px; }
  .fz-logo .slogo{ height:10px; }
  .fz-news{ margin-top:22px; }
  .fz-news-line{ margin-top:10px; font-size:16px; line-height:1.45; }
  .fz-form{ margin-top:12px; }
  .fz-form input, .fz-btn{ padding:10px 0; }
  .fz-top{ gap:26px; }
  .fz-cols{ grid-template-columns:minmax(0,1fr) auto; gap:22px 24px; padding-top:24px; }
  .fz-cols .fz-col:nth-child(1){ grid-column:1 / -1; order:1; }
  .fz-cols .fz-col:nth-child(2){ grid-column:auto; order:2; }
  .fz-cols .fz-col:nth-child(3){ order:3; }
  .fz-cols .fz-col:nth-child(1) .fz-list{ flex-direction:row; flex-wrap:wrap; gap:6px 20px; }
  .fz-list{ margin-top:12px; gap:8px; }
  .fz-a{ font-size:14.5px; }
  .fz-bottom{ margin-top:26px; padding-top:18px; }

  /* Menu: copper "Talk to Solace"; the logo stays readable while the menu is open */
  .full-nav-foot .btn-primary{ background:var(--accent-warm); border-color:var(--accent-warm); color:var(--ivory); }
  html.menu-open .nav{ background:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-bottom-color:transparent !important; }
  html.menu-open .nav::before, html.menu-open .nav::after{ opacity:0 !important; }
  html.menu-open .nav .nav-logo{ color:var(--logo-ink) !important; }
  html.menu-open .nav .nav-burger-btn span{ background:var(--charcoal) !important; }

  /* Experience — Destinations: the three buttons all solid copper; no "Transatlantic" divider */
  .sqm-ctas .sq-pill, .sqm-ctas .sq-pill.sqp-pill-line, .sqm-ctas .sq-pill.sqp-pill-solid{ background:var(--accent-warm) !important; border-color:var(--accent-warm) !important; color:var(--ivory) !important; }
  .sqm-gap{ height:44px; }
  /* the second "Experience details" button under Sailing dates goes */
  .sw2-more{ display:none !important; }

  /* Experience details: a calm sheet from the bottom, one column */
  .inc-overlay{ align-items:flex-end; padding:0; }
  .inc-sheet{ width:100% !important; max-height:88vh; padding:34px 24px calc(26px + env(safe-area-inset-bottom, 0px)) !important; border-radius:20px 20px 0 0; text-align:left; transform:translateY(100%); transition:transform .5s cubic-bezier(.2,.75,.2,1); }
  .inc-overlay.is-open .inc-sheet{ transform:none; }
  .inc-x{ top:14px; right:12px; }
  .inc-title{ font-size:26px; margin-top:8px; }
  .inc-groups{ grid-template-columns:minmax(0,1fr) !important; row-gap:0; margin-top:22px !important; padding-top:0 !important; }
  .inc-group{ display:grid; grid-template-columns:118px minmax(0,1fr); column-gap:16px; padding:16px 0 !important; text-align:left; border-left:0 !important; border-top:0 !important; }
  .inc-group + .inc-group{ border-top:1px solid var(--rule) !important; }
  .inc-group-h{ margin:3px 0 0 0 !important; line-height:1.4; letter-spacing:0.14em !important; }
  .inc-group ul{ gap:7px; }
  .inc-group li{ font-size:15.5px !important; line-height:1.4; white-space:normal !important; }
  .inc-sheet .inc-note{ margin-top:4px !important; padding-top:16px !important; font-size:13px; }

  /* The Yacht: the figures as a calm spec sheet */
  #page .yacht-section .pd-plate{ margin-top:26px; padding:0 22px; }
  #page .yacht-section .pd-plate .pd-specs{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); border-top:1px solid rgba(38,36,31,0.14); border-bottom:1px solid rgba(38,36,31,0.14); }
  #page .yacht-section .pd-plate .pd-spec{ grid-column:span 2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:18px 6px 17px !important; border-left:0 !important; }
  #page .yacht-section .pd-plate .pd-spec:nth-child(n+4){ grid-column:span 3; border-top:1px solid rgba(38,36,31,0.14); }
  #page .yacht-section .pd-plate .pd-spec:nth-child(2), #page .yacht-section .pd-plate .pd-spec:nth-child(3), #page .yacht-section .pd-plate .pd-spec:nth-child(5){ border-left:1px solid rgba(38,36,31,0.14) !important; }
  #page .yacht-section .pd-plate .pd-spec-value{ font-family:'Raleway',sans-serif; font-weight:300; font-size:27px; letter-spacing:0.01em; line-height:1; color:var(--charcoal); text-transform:none; }
  #page .yacht-section .pd-plate .pd-spec-unit{ font-size:13px; letter-spacing:0.02em; margin-left:3px; color:var(--muted); }
  #page .yacht-section .pd-plate .pd-spec-label{ font-size:11px !important; font-weight:600; letter-spacing:0.16em !important; line-height:1.3; color:var(--muted); text-align:center; }
  .yacht-section .pd-foot{ display:none; }

  /* Your crew: smaller */
  .section.crew{ padding:48px 22px !important; }
  .crew-grid{ gap:26px; }
  .crew-h{ font-size:24px; margin-top:12px; }
  .crew-lead{ margin-top:14px; font-size:15.5px; line-height:1.55; }
  .crew-p{ font-size:14px; line-height:1.65; }
  .crew-stats{ margin-top:20px; gap:28px; }
  .crew-stats dt{ font-size:26px; }
  .crew-link{ margin-top:22px; }
  .crew-photos{ gap:10px; }
  .crew-ph img{ aspect-ratio:1 / 1; border-radius:12px; }
  .crew-ph figcaption{ margin-top:8px; }

  /* Advisory: short opening line; services open on request */
  .page-hero .page-hero-body-m{ display:block; }
  .page-hero .page-hero-body-m ~ .page-hero-body:not(.page-hero-body-m), .page-hero .page-hero-body:has(+ .page-hero-body-m){ display:none; }
  #page .adv-svc .split-img{ aspect-ratio:16 / 10; }
  .mfold:not(.is-open){ display:none; }
  .mfold.is-open{ animation:mfoldIn .45s ease both; }
  .mfold-btn{ display:inline-flex; align-items:center; min-height:44px; margin:6px 0 4px; padding:0; background:none; border:0; font:inherit; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-warm); cursor:pointer; }
  #page .adv-svc .mfold > :first-child{ margin-top:4px; }
  #page .adv-svc .split-text:has(.mfold:not(.is-open)) > .reveal-d2 > p:first-child{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp:5; overflow:hidden; }
  .section.why-v2{ padding:48px 0 !important; }
  .why-v2-grid{ row-gap:26px !important; }
  .why-v2-title{ font-size:28px !important; margin-top:14px; }
  .why-v2-rule{ margin-top:22px; }
  .why-v2-lead{ margin-top:18px; font-size:15px; line-height:1.65; }
  .why-v2-item{ padding:18px 0 !important; }
  .why-v2-h{ font-size:19px; }
  .why-v2-b{ margin-top:6px; font-size:14.5px; line-height:1.6; }
  .bdx-media{ aspect-ratio:16 / 10; }
  .bdx-text{ padding:44px 22px 48px; }

  /* Ownership: two ways to own as a sideways swipe */
  .mswipe{ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; }
  .mswipe::-webkit-scrollbar{ display:none; }
  .mswipe > *{ scroll-snap-align:start; flex:0 0 auto; }
  .o5-cards.mswipe{ gap:14px; margin:0 -22px; padding:0 22px; scroll-padding:0 22px; }
  .o5-cards.mswipe > .o5-card{ width:84%; }
  .o5-cards.mswipe .o5-card-body{ padding:24px 22px 26px; }
  .o5-cards.mswipe .o5-card-t{ font-size:26px; }
  .o5-cards.mswipe .o5-card-s{ font-size:14.5px; }
  .o5-cards.mswipe .o5-ticks{ margin-top:16px; padding-top:16px; row-gap:9px; }
  .o5-cards.mswipe .o5-ticks li{ font-size:14.5px; line-height:1.5; }
  .o5-ways .o5-head-c{ margin-bottom:26px; }
  .mdots{ display:flex; justify-content:center; gap:8px; margin:18px 0 0; }
  .mdots span{ width:6px; height:6px; border-radius:50%; background:rgba(38,36,31,0.22); transition:background .3s ease, transform .3s ease; }
  .mdots span.on{ background:var(--accent-warm); transform:scale(1.25); }

  /* Why Solace works: two tabs instead of the long table */
  #page .ow-why .ow-cmp{ display:none !important; }
  .owm{ display:block; margin-top:26px; }
  .owm-tabs{ display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px; background:rgba(38,36,31,0.06); }
  .owm-tab{ min-height:42px; padding:0 10px; border:0; border-radius:999px; background:transparent; font:inherit; font-family:'Raleway',sans-serif; font-size:13.5px; font-weight:500; letter-spacing:0.01em; line-height:1.2; color:var(--muted); cursor:pointer; transition:background-color .3s ease, color .3s ease; }
  .owm-tab.is-on{ background:var(--accent-warm); color:var(--ivory); }
  .owm-rows{ list-style:none; margin:10px 0 0; padding:0; }
  .owm-row{ padding:18px 0; border-bottom:1px solid rgba(38,36,31,0.12); }
  .owm-row:last-child{ border-bottom:0; }
  .owm-l{ margin:0; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-warm); }
  .owm-tx{ display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:12px; margin:8px 0 0; font-size:15.5px; line-height:1.55; }
  .owm-a{ color:var(--muted); }
  .owm-s{ color:var(--charcoal); }
  .owm[data-side="s"] .owm-a, .owm[data-side="a"] .owm-s{ display:none; }
  .owm-row .owm-tx{ animation:mfoldIn .4s ease both; }
  .owm-dash{ display:block; width:10px; height:1px; margin-top:.8em; background:rgba(38,36,31,0.35); }
  .owm .ow-tick{ display:inline-flex; margin-top:.2em; }
  #page .o5-why .ow-head{ margin-bottom:0 !important; }

  /* Owner relationship: shorter — the seven stages swipe sideways */
  #page .o5-rel .ov-sticky > .o5-p{ display:none; }
  #page .o5-rel .ov-grid{ row-gap:26px !important; }
  .o5-rel .ov-journey-mobile.mswipe{ gap:12px; margin:0 -22px; padding:0 22px; scroll-padding:0 22px; }
  .o5-rel .ov-journey-mobile.mswipe::before{ display:none; }
  .o5-rel .ov-journey-mobile.mswipe > .ov-step{ width:74%; display:flex; flex-direction:column; gap:14px; padding:22px 20px 24px !important; background:var(--sand); border-radius:14px; box-sizing:border-box; }
  .o5-rel .ov-journey-mobile.mswipe .ov-step-n{ background:transparent; }
  .o5-rel .ov-journey-mobile.mswipe .ov-step-h{ margin:0; font-size:19px; }
  .o5-rel .ov-journey-mobile.mswipe .ov-step-b{ font-size:14.5px; line-height:1.6; }

  /* About: What we believe, two columns */
  .ab-believe-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; column-gap:18px !important; row-gap:22px !important; margin-top:22px !important; }
  .ab-belief{ padding-top:14px; }
  .ab-belief-ic{ width:22px; height:22px; }
  .ab-belief-h{ margin-top:10px; font-size:15.5px; line-height:1.3; }
  .ab-belief-b{ margin-top:5px; font-size:13px; line-height:1.55; }
}
@keyframes mfoldIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* =====================================================================
   MOBILE PASS 4 (10 Oct 2026, client: "think elevated, high end… go over
   the mobile version again"). Phones only (max-width:860px). One type
   scale, calmer alignment, fewer ornaments, a simpler footer and a
   rebuilt Technical side. New phone-only elements (.tsm-units) are hidden
   above 860px.
   ===================================================================== */
.tsm-units{ display:none; }
@media (max-width: 860px){

  /* ---------- 1. One type scale ---------- */
  /* section titles: one size, one weight */
  .what-is-solace .wis-h, .wy3-statement, #philosophy .display-2, #sqHeading, .fq-title, .nh-name, .o5-name,
  .why-v2-title, .bdx-h, .ab3-why-h, .ov-std-title, .cbx-h, .crew-h, .perf-diff .display-2, .ab-believe .ov-std-title{
    font-family:'Raleway',sans-serif !important; font-size:26px !important; font-weight:300 !important; line-height:1.22 !important; letter-spacing:-0.005em !important; }
  #page .o5-why .nh-name{ font-size:26px !important; }
  /* the line under a title */
  .nh-tag, .o5-tag{ font-size:16.5px !important; line-height:1.5 !important; margin-top:8px !important; }
  /* body copy */
  .ov-p, .o5-p, .crew-p, .bdx-p, .why-v2-lead, .ab-intro-sub, .ow-lead, .sqm-copy, .split-text p:not(.nh-tag):not(.pp-price):not([class*="label"]){ font-size:15px; line-height:1.7; }
  /* card titles */
  .o5-card-t, .dr-title{ font-size:24px !important; }
  .ab-lead{ font-size:19px !important; line-height:1.45 !important; }
  .eyebrow{ letter-spacing:0.22em; }

  /* ---------- 2. Calm alignment: long copy reads from the left ---------- */
  .what-is-solace .section-head, .what-is-solace .reveal-d1{ text-align:left !important; margin-left:0 !important; margin-right:0 !important; max-width:none !important; }
  .what-is-solace .wis-h{ margin-top:14px !important; }
  .what-is-solace .reveal-d1 p{ font-size:15.5px; line-height:1.72; margin-top:14px; }
  .what-is-solace .section-head{ margin-bottom:6px !important; }
  .ab3-why .ab-intro-in{ text-align:left !important; }
  .ab3-why .ab-intro-sub{ margin-left:0 !important; margin-right:0 !important; }
  .ab3-paths .ab-path{ justify-content:space-between !important; padding-left:0 !important; padding-right:0 !important; }
  #page > section.section:has(#contactForm) .section-head{ text-align:left; }
  #page > section.section:has(#contactForm){ padding-top:112px !important; }
  #page > section.section:has(#contactForm) .lede{ font-size:15.5px; line-height:1.7; }
  #destinations .section-head, #day-aboard .section-head, #destinations > .eyebrow{ text-align:left !important; }

  /* ---------- 3. Experience opening: two sizes only (client) ---------- */
  .exp-hero-follow{ padding:30px 22px 28px !important; }
  .exp-hero-follow-content{ text-align:left !important; max-width:none !important; margin:0 !important; padding:0 !important; }
  .exp-hero-follow-content p{ font-family:'Montserrat',sans-serif !important; font-size:16px !important; font-weight:400 !important; line-height:1.65 !important; color:var(--charcoal) !important; text-align:left !important; max-width:none !important; margin:0 !important; }
  #philosophy{ padding-top:52px !important; }
  #philosophy .section-head{ text-align:left !important; margin:0 !important; max-width:none !important; padding:0 !important; }
  #philosophy .display-2{ margin-top:14px !important; text-wrap:balance; }
  .exp-philosophy-copy{ text-align:left !important; max-width:none !important; margin:14px 0 0 !important; }
  .exp-philosophy-copy p{ font-family:'Montserrat',sans-serif !important; font-size:16px !important; font-weight:400 !important; line-height:1.65 !important; letter-spacing:0 !important; margin:0 0 12px !important; color:var(--muted) !important; }
  .exp-philosophy-copy p:first-child, .exp-philosophy-copy p:last-child{ color:var(--charcoal) !important; }
  #philosophy .exp-philosophy-copy p{ text-wrap:wrap !important; }
  .dx-num{ display:none !important; }
  .exp-closing-mark{ margin-top:26px !important; }
  .exp-closing-line{ font-size:14px !important; }

  /* ---------- 4. Fewer ornaments ---------- */
  .pd-rule, .exp-closing-rule, .why-v2-rule, .ov-draw, .pd-mini-rule{ display:none !important; }
  .exp-closing-mark{ gap:6px !important; }
  .nh-num, .split-index.nh-num{ display:none !important; }
  .adv-index-n{ display:none !important; }

  /* ---------- 5. Buttons never break onto two lines ---------- */
  .btn, a.btn, button.btn{ font-size:11.5px; letter-spacing:0.1em; white-space:nowrap; padding-left:24px; padding-right:24px; min-height:50px; }

  /* ---------- 6. Opening photos settle in slowly ---------- */
  html.js-anim .page-hero-img{ animation:mHeroSettle 2.8s cubic-bezier(.16,.8,.3,1) both; }
  .page-hero h1{ letter-spacing:-0.012em; line-height:1.08; }
  .page-hero-body{ font-size:15.5px !important; line-height:1.65 !important; }

  /* ---------- 7. Footer: simpler, smaller (client) ---------- */
  .footer.fz{ padding:44px 22px calc(26px + env(safe-area-inset-bottom, 0px)) !important; text-align:center; }
  .fz-top{ display:flex !important; flex-direction:column; align-items:stretch; gap:0 !important; }
  .fz-brand{ display:flex; flex-direction:column; align-items:center; }
  .fz-logo{ display:flex; justify-content:center; }
  .fz-logo .slogo{ height:11px !important; }
  .fz .fz-news.footer-news{ margin-top:30px !important; width:100%; max-width:none !important; text-align:left; }
  .fz-news .fz-h{ text-align:center; }
  .fz-news-line{ display:none !important; }
  .fz-form{ margin-top:12px !important; }
  .fz-cols{ display:flex !important; flex-direction:column; align-items:center; gap:14px !important; margin-top:30px; padding-top:28px !important; border-top:1px solid var(--rule) !important; }
  .fz-cols .fz-h{ display:none !important; }
  .fz-cols .fz-col{ width:100%; }
  .fz-list{ margin:0 !important; flex-direction:row !important; flex-wrap:wrap; justify-content:center; gap:8px 22px !important; }
  .fz-cols .fz-col:nth-child(1) .fz-a{ font-size:15px; }
  .fz-cols .fz-col:nth-child(2) .fz-list{ flex-direction:column !important; align-items:center; gap:6px !important; }
  .fz-cols .fz-a{ font-size:14px; color:var(--charcoal); }
  .fz-cols .fz-col:nth-child(2) .fz-a, .fz-cols .fz-col:nth-child(3) .fz-a{ color:var(--muted); }
  .fz-bottom{ margin-top:28px !important; padding-top:18px !important; justify-content:center !important; gap:6px 20px !important; }
  .fz-copy, .fz-legal a{ font-size:11.5px !important; }

  /* ---------- 8. Advisory: "Before you decide" apart from the questions (client) ---------- */
  .bdx{ background:var(--ivory) !important; }

  /* ---------- 9. The Technical side, rebuilt for phones (client) ---------- */
  #technicalSide .ts-doc.ts-v15{ padding:0 22px 44px !important; }
  #technicalSide .tsx-bar{ position:sticky; top:0; z-index:2; margin:0 -22px; padding:24px 64px 18px 22px !important; background:var(--ivory); border-bottom:1px solid var(--rule); gap:0 !important; }
  #technicalSide .tsx-eyebrow{ font-size:11px !important; letter-spacing:0.22em !important; }
  #technicalSide .tsx-title{ display:none; }
  #technicalSide .tsx-model{ margin-top:8px; font-size:24px !important; font-weight:300; letter-spacing:0.01em !important; text-transform:none !important; }
  #technicalSide .ts-x{ top:18px !important; right:12px !important; background:transparent !important; border-radius:0 !important; z-index:4; }
  #technicalSide .ts-x:focus-visible{ outline:none; }
  #technicalSide .ts-legend, #technicalSide .ts-art-profile .ts-callout, #technicalSide .ts-art-profile .ts-dim circle, #technicalSide .ts-art-profile .ts-dim polyline{ display:none !important; }
  #technicalSide .tsx-grid{ margin-top:24px !important; row-gap:24px !important; }
  .tsm-units{ display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px; background:rgba(38,36,31,0.06); }
  .tsm-u{ min-height:40px; border:0; border-radius:999px; background:transparent; font-family:'Raleway',sans-serif; font-size:13.5px; font-weight:500; color:var(--muted); cursor:pointer; transition:background-color .3s ease, color .3s ease; }
  .tsm-u.is-on{ background:var(--accent-warm); color:var(--ivory); }
  #technicalSide .tsx-specs{ display:block !important; padding:0 !important; margin-top:-8px; }
  #technicalSide .tsx-col{ display:block !important; }
  #technicalSide .tsx-group{ border-bottom:1px solid var(--rule); }
  #technicalSide .tsx-gtitle{ position:relative; margin:0 !important; padding:20px 30px 20px 0 !important; border:0 !important; font-size:12px !important; letter-spacing:0.18em !important; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  #technicalSide .tsx-gtitle::before, #technicalSide .tsx-gtitle::after{ content:''; position:absolute; right:2px; top:50%; width:13px; height:1px; background:var(--accent-warm); transition:transform .35s ease; }
  #technicalSide .tsx-gtitle::after{ transform:rotate(90deg); }
  #technicalSide .tsm-acc.is-open .tsx-gtitle::after{ transform:rotate(0deg); }
  #technicalSide .tsx-gnum{ font-size:11px !important; }
  #technicalSide .tsm-acc:not(.is-open) .tsx-tbl{ display:none !important; }
  #technicalSide .tsm-acc.is-open .tsx-tbl{ animation:mfoldIn .4s ease both; }
  #technicalSide .tsx-tbl{ grid-template-columns:minmax(0,1fr) auto !important; column-gap:0 !important; row-gap:0 !important; align-items:stretch !important; padding:0 0 16px; }
  #technicalSide .tsx-tbl dt, #technicalSide .tsx-tbl .m, #technicalSide .tsx-tbl .i{ display:flex; align-items:center; min-height:44px; padding:0; border-top:1px solid rgba(38,36,31,0.08); }
  #technicalSide .tsx-tbl .m, #technicalSide .tsx-tbl .i{ justify-content:flex-end; padding-left:16px; }
  #technicalSide .tsx-tbl dt{ font-size:11px !important; letter-spacing:0.12em !important; line-height:1.35; }
  #technicalSide .tsx-tbl .m, #technicalSide .tsx-tbl .i{ font-size:15px !important; font-weight:400 !important; color:var(--charcoal) !important; width:auto !important; text-align:right; }
  #technicalSide .tsx-tbl .i{ display:none !important; }
  #technicalSide .tsm-imp .tsx-tbl .i:not(:empty){ display:flex !important; }
  #technicalSide .tsm-imp .tsx-tbl .m:has(+ .i:not(:empty)){ display:none !important; }
  #technicalSide .tsx-tbl .n{ display:block !important; min-height:0 !important; margin-top:-8px !important; padding:0 0 12px !important; border-top:0 !important; font-size:12px !important; text-align:right; justify-content:flex-end; }
  #technicalSide .tsx-lower{ margin-top:6px !important; padding-top:0 !important; border-top:0 !important; row-gap:14px !important; }
  #technicalSide .ts-cap{ font-size:11px !important; letter-spacing:0.18em !important; }
  #technicalSide .ts-footnote{ font-size:12px !important; line-height:1.65 !important; }
}
@keyframes mHeroSettle{ from{ scale:1.07; } to{ scale:1; } }
@media (prefers-reduced-motion: reduce){ html.js-anim .page-hero-img{ animation:none !important; } }
@media (max-width: 860px){
  /* MOBILE PASS 4 (cont.) — the Standard reads as a quiet list, without numbers */
  .o5-stdx-list li .o5-std-n{ display:none !important; }
  .o5-stdx-list li{ grid-template-columns:minmax(0,1fr) !important; }
  .o5-stdx-list p{ margin-top:6px; }
}
@media (max-width: 389px){
  /* small phones: long button labels still fit on one line */
  .btn, a.btn, button.btn{ letter-spacing:0.06em; padding-left:16px; padding-right:16px; font-size:11px; }
}
@media (max-width: 860px){
  /* MOBILE PASS 4 (cont.) — calmer taps: no grey flash, a soft press on buttons */
  a, button, [role="button"], summary{ -webkit-tap-highlight-color:transparent; }
  .btn:active, .sq-pill:active, .owm-tab:active, .tsm-u:active{ transform:scale(.98); }
}

/* =====================================================================
   MOBILE PASS 5 (10 Oct 2026). Phones only. "With Solace, you can" as
   three swipe cards; closing bands always show their photo, so they no
   longer run into a dark section above.
   ===================================================================== */
.mcan, .cbx-still{ display:none; }
@media (max-width: 860px){
  /* With Solace, you can: three cards to swipe */
  .perf-diff .stmt-track-wrap{ display:none !important; }
  .mcan{ display:block; margin-top:18px; }
  .mcan-row.mswipe{ gap:12px; margin:0 -22px; padding:0 22px; scroll-padding:0 22px; align-items:stretch; }
  .mcan-card{ width:80%; box-sizing:border-box; display:flex; flex-direction:column; padding:26px 22px 22px; border-radius:16px; background:rgba(250,247,240,0.055); border:1px solid rgba(250,247,240,0.12); text-align:left; }
  .mcan-t{ margin:0; font-family:'Raleway',sans-serif; font-weight:300; font-size:24px; line-height:1.15; color:var(--ivory); }
  .mcan-list{ list-style:none; margin:16px 0 0; padding:0; flex:1 1 auto; }
  .mcan-list li{ padding:11px 0; border-top:1px solid rgba(250,247,240,0.1); font-family:'Raleway',sans-serif; font-weight:300; font-size:16px; line-height:1.35; color:rgba(250,247,240,0.88); }
  .mcan-link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:12px; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#D9A48C; }
  .mcan-link svg{ width:14px; height:14px; }
  .perf-diff .mdots span{ background:rgba(250,247,240,0.22); }
  .perf-diff .mdots span.on{ background:#D9A48C; }
  .perf-diff .statement-list-lead{ margin-top:30px !important; }

  /* closing bands: the still photo always shows; the clip fades in over it once playing */
  .cbx-still{ display:block; position:absolute; inset:0; overflow:hidden; }
  .cbx-still img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 2.4s cubic-bezier(.16,.8,.3,1); }
  .cbx:has(.cbx-in.is-visible) .cbx-still img, .cbx.is-in .cbx-still img{ transform:scale(1); }
  .cbx-vid{ background:transparent !important; opacity:0; transition:opacity 1.2s ease; }
  .cbx-vid.is-playing{ opacity:1; }
  .cbx-veil{ background:linear-gradient(180deg, rgba(20,18,15,0.26) 0%, rgba(20,18,15,0.5) 55%, rgba(20,18,15,0.62) 100%) !important; }
  .cbx-h, .cbx-b{ text-shadow:0 1px 18px rgba(0,0,0,0.3); }
}
@media (max-width: 860px){
  /* client (11 Oct): "on mobile the framing of the home screen photo is cut off (the yacht is very much on the left)":
     phones centre the frame on the yacht and lift it clear of the heading */
  .home-hero .page-hero-img{ object-position:31% 100% !important; height:116% !important; top:auto !important; bottom:0 !important; }
}
/* client (11 Oct): Barbuda was added then taken out again ("just put Antigua"), so the phone map box is back to its earlier size.
   Was: @media (max-width: 860px){ .sw3-maps{ height:min(78vw, 300px) !important; } } */

/* ============================================================
   GO-LIVE (14 Oct 2026): "didn't go through" line under a form's button,
   shown only if a message fails to send (all screen sizes; nothing changes
   while the forms work)
   ============================================================ */
.form-send-err{ margin:14px 0 0 0; max-width:520px; font-size:13px; line-height:1.6; color:#A33A2A; text-align:left; }
.form-send-err a, .hd-err a, .footer-news-note.is-error a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.hd-err a, .footer-news-note.is-error a{ white-space:nowrap; }
button[aria-busy="true"]{ cursor:progress; opacity:.7; }