/* ============================================================
   Salty Karts · salty-karts.com
   Coastal fade system. Cream canvas, navy + seafoam + sand.
   Type: Walbaum (display) · Neue Frutiger (text) · Goodwater (accent)
   ============================================================ */

@font-face{font-family:'Walbaum';src:url('fonts/walbaum-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Neue Frutiger';src:url('fonts/neue-frutiger-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Goodwater';src:url('fonts/goodwater-400.woff2') format('woff2');font-weight:400;font-display:swap;}

:root{
  --cream:#FAF6EF; --cream0:rgba(250,246,239,0);
  --ink:#22334A; --ink-soft:#51617A;
  --navy:#16335F; --deep:#0E2445;
  --foam:#7FA99E; --foam-lt:#C9DCD5; --teal:#4F8A7E;
  --sand:#CCC0A8; --sand-lt:#F0E9DA;
  --white:#FFFFFF;
  --disp:'Walbaum', Georgia, 'Times New Roman', serif;
  --text:'Neue Frutiger', 'Segoe UI', sans-serif;
  --script:'Goodwater', cursive;
  --gap:clamp(84px,11vw,164px);
  --shell:1180px;

  /* smootherstep fade ladders (recipe: fade-effect.md, keep the curve) */
  --mag-h-left:linear-gradient(to right,
    rgba(250,246,239,1) 0%,
    rgba(250,246,239,.99) 2%,
    rgba(250,246,239,.96) 4%,
    rgba(250,246,239,.92) 6%,
    rgba(250,246,239,.885) 8%,
    rgba(250,246,239,.87) 10%,
    rgba(250,246,239,.865) 20%,
    rgba(250,246,239,.86) 34%,
    rgba(250,246,239,.86) 46%,
    rgba(250,246,239,0.851) 48.2%,
    rgba(250,246,239,0.808) 50.4%,
    rgba(250,246,239,0.722) 52.6%,
    rgba(250,246,239,0.585) 54.8%,
    rgba(250,246,239,0.43) 57.0%,
    rgba(250,246,239,0.275) 59.2%,
    rgba(250,246,239,0.138) 61.4%,
    rgba(250,246,239,0.052) 63.6%,
    rgba(250,246,239,0.009) 65.8%,
    rgba(250,246,239,0.0) 68.0%,
    rgba(250,246,239,0) 76%,
    rgba(250,246,239,0.01) 78.4%,
    rgba(250,246,239,0.06) 80.8%,
    rgba(250,246,239,0.16) 83.2%,
    rgba(250,246,239,0.32) 85.6%,
    rgba(250,246,239,0.5) 88.0%,
    rgba(250,246,239,0.68) 90.4%,
    rgba(250,246,239,0.84) 92.8%,
    rgba(250,246,239,0.94) 95.2%,
    rgba(250,246,239,0.99) 97.6%,
    rgba(250,246,239,1) 100.0%);
  --mag-h-right:linear-gradient(to left,
    rgba(250,246,239,1) 0%,
    rgba(250,246,239,.99) 2%,
    rgba(250,246,239,.96) 4%,
    rgba(250,246,239,.92) 6%,
    rgba(250,246,239,.885) 8%,
    rgba(250,246,239,.87) 10%,
    rgba(250,246,239,.865) 20%,
    rgba(250,246,239,.86) 34%,
    rgba(250,246,239,.86) 46%,
    rgba(250,246,239,0.851) 48.2%,
    rgba(250,246,239,0.808) 50.4%,
    rgba(250,246,239,0.722) 52.6%,
    rgba(250,246,239,0.585) 54.8%,
    rgba(250,246,239,0.43) 57.0%,
    rgba(250,246,239,0.275) 59.2%,
    rgba(250,246,239,0.138) 61.4%,
    rgba(250,246,239,0.052) 63.6%,
    rgba(250,246,239,0.009) 65.8%,
    rgba(250,246,239,0.0) 68.0%,
    rgba(250,246,239,0) 76%,
    rgba(250,246,239,0.01) 78.4%,
    rgba(250,246,239,0.06) 80.8%,
    rgba(250,246,239,0.16) 83.2%,
    rgba(250,246,239,0.32) 85.6%,
    rgba(250,246,239,0.5) 88.0%,
    rgba(250,246,239,0.68) 90.4%,
    rgba(250,246,239,0.84) 92.8%,
    rgba(250,246,239,0.94) 95.2%,
    rgba(250,246,239,0.99) 97.6%,
    rgba(250,246,239,1) 100.0%);
  --mag-soft:linear-gradient(to bottom,
    rgba(250,246,239,1) 0%, rgba(250,246,239,.99) 3.4%, rgba(250,246,239,.94) 6.8%,
    rgba(250,246,239,.84) 10.2%, rgba(250,246,239,.68) 13.6%, rgba(250,246,239,.5) 17%,
    rgba(250,246,239,.32) 20.4%, rgba(250,246,239,.16) 23.8%, rgba(250,246,239,.06) 27.2%,
    rgba(250,246,239,.01) 30.6%, rgba(250,246,239,0) 34%, rgba(250,246,239,0) 66%,
    rgba(250,246,239,.01) 69.4%, rgba(250,246,239,.06) 72.8%, rgba(250,246,239,.16) 76.2%,
    rgba(250,246,239,.32) 79.6%, rgba(250,246,239,.5) 83%, rgba(250,246,239,.68) 86.4%,
    rgba(250,246,239,.84) 89.8%, rgba(250,246,239,.94) 93.2%, rgba(250,246,239,.99) 96.6%,
    rgba(250,246,239,1) 100%);
  /* hero bottom ramp: veil confined to the lower third, smootherstep both ends */
  --hero-ramp:linear-gradient(to bottom,
    rgba(250,246,239,0) 0%, rgba(250,246,239,0) 64%,
    rgba(250,246,239,.01) 67.6%, rgba(250,246,239,.06) 71.2%,
    rgba(250,246,239,.16) 74.8%, rgba(250,246,239,.32) 78.4%,
    rgba(250,246,239,.5) 82%, rgba(250,246,239,.68) 85.6%,
    rgba(250,246,239,.84) 89.2%, rgba(250,246,239,.94) 92.8%,
    rgba(250,246,239,.99) 96.4%, rgba(250,246,239,1) 100%);
  /* hero: retain the golden waterfront while concentrating contrast behind the copy */
  --hero-grade:contrast(1.07) saturate(1.06) brightness(1.035);
  --hero-scrim:linear-gradient(112deg,
    rgba(14,36,69,.05) 0%, rgba(14,36,69,.08) 34%, rgba(14,36,69,.16) 51%,
    rgba(14,36,69,.34) 65%, rgba(14,36,69,.52) 80%, rgba(14,36,69,.64) 100%);
  --hero-side:linear-gradient(to top,
    rgba(14,36,69,.2) 0%, rgba(14,36,69,.12) 24%, rgba(14,36,69,.045) 48%,
    rgba(14,36,69,0) 72%);
  /* section join: cream overlay, smootherstep 1→0 down the top of Keys in hand */
  --join-top:linear-gradient(to bottom,
    rgba(250,246,239,1) 0%,
    rgba(250,246,239,.99) 10%,
    rgba(250,246,239,.94) 20%,
    rgba(250,246,239,.84) 30%,
    rgba(250,246,239,.68) 40%,
    rgba(250,246,239,.5) 50%,
    rgba(250,246,239,.32) 60%,
    rgba(250,246,239,.16) 70%,
    rgba(250,246,239,.06) 80%,
    rgba(250,246,239,.01) 90%,
    rgba(250,246,239,0) 100%);
  /* short finishing veil: lets raised artwork and shadows dissolve before a section edge */
  /* The join into the island section. Cream overlay per
     reference/fade-effect.md: exact rgba(250,246,239,0) at the clear end,
     quintic smootherstep, and a zone wide enough to ease out instead of
     completing in 50px. Three wide ellipse crests ride on top so the cream
     rises higher in some places than others: the iso-alpha contours undulate
     and the seam stops reading as a ruled line. Alphas composite as
     1-(1-a)(1-b), and the linear layer still reaches 1 at the section edge,
     so the boundary itself stays sealed. */
  --join-bottom-edge:
    radial-gradient(ellipse 38% 150% at 13% 104%,
      rgba(250,246,239,0.6) 0%,
      rgba(250,246,239,0.594) 7%,
      rgba(250,246,239,0.564) 14%,
      rgba(250,246,239,0.504) 21%,
      rgba(250,246,239,0.408) 28%,
      rgba(250,246,239,0.3) 35%,
      rgba(250,246,239,0.192) 42%,
      rgba(250,246,239,0.096) 49%,
      rgba(250,246,239,0.036) 56%,
      rgba(250,246,239,0.006) 63%,
      rgba(250,246,239,0) 70%),
    radial-gradient(ellipse 46% 122% at 47% 104%,
      rgba(250,246,239,0.44) 0%,
      rgba(250,246,239,0.436) 6.6%,
      rgba(250,246,239,0.414) 13.2%,
      rgba(250,246,239,0.37) 19.8%,
      rgba(250,246,239,0.299) 26.4%,
      rgba(250,246,239,0.22) 33%,
      rgba(250,246,239,0.141) 39.6%,
      rgba(250,246,239,0.07) 46.2%,
      rgba(250,246,239,0.026) 52.8%,
      rgba(250,246,239,0.004) 59.4%,
      rgba(250,246,239,0) 66%),
    radial-gradient(ellipse 34% 165% at 83% 104%,
      rgba(250,246,239,0.56) 0%,
      rgba(250,246,239,0.554) 7.2%,
      rgba(250,246,239,0.526) 14.4%,
      rgba(250,246,239,0.47) 21.6%,
      rgba(250,246,239,0.381) 28.8%,
      rgba(250,246,239,0.28) 36%,
      rgba(250,246,239,0.179) 43.2%,
      rgba(250,246,239,0.09) 50.4%,
      rgba(250,246,239,0.034) 57.6%,
      rgba(250,246,239,0.006) 64.8%,
      rgba(250,246,239,0) 72%),
    linear-gradient(to bottom,
      rgba(250,246,239,0) 0%,
      rgba(250,246,239,0) 26%,
      rgba(250,246,239,0.01) 33.4%,
      rgba(250,246,239,0.06) 40.8%,
      rgba(250,246,239,0.16) 48.2%,
      rgba(250,246,239,0.32) 55.6%,
      rgba(250,246,239,0.5) 63%,
      rgba(250,246,239,0.68) 70.4%,
      rgba(250,246,239,0.84) 77.8%,
      rgba(250,246,239,0.94) 85.2%,
      rgba(250,246,239,0.99) 92.6%,
      rgba(250,246,239,1) 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--text);font-size:17px;line-height:1.65;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:var(--teal);text-decoration:none;}
p a{text-decoration:underline;text-underline-offset:3px;}
::selection{background:var(--foam);color:var(--deep);}

/* styled scrollbars, page and internal */
*{scrollbar-width:thin;scrollbar-color:var(--navy) var(--sand-lt);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--sand-lt);}
::-webkit-scrollbar-thumb{background:var(--navy);border-radius:8px;border:2px solid var(--sand-lt);}
::-webkit-scrollbar-thumb:hover{background:var(--deep);}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.shell{max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,4vw,44px);}

h1,h2,h3{font-family:var(--disp);font-weight:400;color:var(--navy);line-height:1.04;}
h2{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.012em;}
h3{font-size:clamp(21px,2.2vw,27px);letter-spacing:-.005em;}
.script{font-family:var(--script);text-transform:none;letter-spacing:0;color:var(--teal);line-height:.9;}
.kicker{font-family:var(--text);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;}
.leadp{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:56ch;}

/* ---- the one pill family ---- */
.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--text);font-weight:600;font-size:15px;letter-spacing:.03em;padding:14px 30px;border-radius:999px;border:1.5px solid var(--navy);cursor:pointer;transition:all .22s ease;white-space:nowrap;}
.pill--solid{background:var(--navy);color:var(--cream);}
.pill--solid:hover{background:var(--deep);border-color:var(--deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,36,69,.22);}
.pill--ghost{background:transparent;color:var(--navy);}
.pill--ghost:hover{background:var(--navy);color:var(--cream);transform:translateY(-2px);}
.pill--light{background:var(--cream);color:var(--navy);border-color:var(--cream);}
.pill--light:hover{background:var(--white);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25);}

/* ============================================================ HEADER */
.hd{position:absolute;top:0;left:0;right:0;z-index:40;}
.hd__in{max-width:var(--shell);margin:0 auto;padding:24px clamp(20px,4vw,44px);display:flex;align-items:center;justify-content:space-between;}
.hd__logo{display:block;line-height:0;}
.hd__logo img{width:112px;height:auto;filter:drop-shadow(0 4px 14px rgba(14,36,69,.25));transition:transform .25s ease;}
.hd__logo:hover img{transform:scale(1.04);}
.hd__right{display:flex;align-items:center;gap:14px;}
.hd__menu{display:inline-flex;align-items:center;gap:8px;font-family:var(--text);font-weight:600;font-size:14px;letter-spacing:.03em;padding:11px 21px;border-radius:999px;cursor:pointer;transition:all .22s ease;}
.hd__menu svg{width:16px;height:16px;}
.no-hero .hd{background:var(--cream);border-bottom:1px solid rgba(34,51,74,.08);}
.has-hero .hd__logo img{width:104px;filter:drop-shadow(0 6px 18px rgba(8,16,28,.35));}
.has-hero .hd__menu{background:rgba(250,246,239,.9);border:1.5px solid transparent;color:var(--navy);backdrop-filter:blur(6px);}
.no-hero .hd__menu{background:transparent;border:1.5px solid var(--navy);color:var(--navy);}
.hd__menu:hover{background:var(--navy);color:var(--cream);border-color:var(--navy);}

/* ---- full-screen overlay menu ---- */
.menu{position:fixed;inset:0;z-index:90;background:linear-gradient(160deg,var(--deep) 0%,var(--navy) 78%,#1d4370 100%);color:var(--cream);overflow-y:auto;opacity:0;transition:opacity .3s ease;}
.menu.is-open{opacity:1;}
.menu__in{min-height:100%;display:flex;flex-direction:column;max-width:820px;margin:0 auto;padding:26px clamp(22px,5vw,48px) 48px;}
.menu__top{display:flex;align-items:center;justify-content:space-between;}
.menu__logo{width:72px;height:auto;}
.menu__close{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(250,246,239,.4);background:transparent;color:var(--cream);cursor:pointer;display:grid;place-items:center;transition:all .2s ease;}
.menu__close svg{width:20px;height:20px;}
.menu__close:hover{background:var(--cream);color:var(--navy);}
.menu__nav{display:flex;flex-direction:column;margin:auto 0;padding:40px 0;}
.menu__nav a{font-family:var(--disp);font-size:clamp(28px,4.8vh,42px);letter-spacing:-.005em;color:var(--cream);padding:.35em 0;border-bottom:1px solid rgba(250,246,239,.12);display:flex;align-items:baseline;transition:color .18s ease,padding-left .18s ease;}
.menu__nav a:hover{color:var(--foam);padding-left:14px;}
.menu__nav a[aria-current="page"]{color:var(--foam);}
.menu__foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;}
.menu__foot p{font-size:15px;color:rgba(250,246,239,.75);}
.menu__foot a{color:var(--cream);}
body.menu-locked{overflow:hidden;}

/* ============================================================ HERO
   Drive-board treatment: cart left, copy on the right, navy fade under type. */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#1a140e;}
@supports (min-height:100svh){.hero{min-height:100svh;}}
.hero__bg{position:absolute;inset:0;z-index:0;display:block;background-image:url('img/hero-resort-1920.webp?v=44');background-size:cover;background-position:12% 48%;background-color:#1a140e;background-repeat:no-repeat;
  filter:contrast(1.06) saturate(1.18) brightness(1.14);}
.hero__scrim{position:absolute;inset:0 0 auto 0;height:140px;z-index:1;background:linear-gradient(to bottom,
  rgba(14,36,69,.2) 0%, rgba(14,36,69,.06) 52%, rgba(14,36,69,0) 100%);}
/* Navy lives as a plateau under the type column (right ~40%), then dissolves
   before the cart. The old ramp had already thinned to ~.2 by the headline's
   left edge, so "Golf Cart" sat on the seat. */
.hero__veil{position:absolute;inset:0;z-index:1;background:
    linear-gradient(to left,
      rgba(14,36,69,.82) 0%,
      rgba(14,36,69,.76) 10%,
      rgba(14,36,69,.70) 18%,
      rgba(14,36,69,.64) 26%,
      rgba(14,36,69,.58) 34%,
      rgba(14,36,69,.48) 42%,
      rgba(14,36,69,.32) 52%,
      rgba(14,36,69,.16) 62%,
      rgba(14,36,69,.06) 72%,
      rgba(14,36,69,0) 84%),
    linear-gradient(to top,
      rgba(14,36,69,.42) 0%,
      rgba(14,36,69,.18) 16%,
      rgba(14,36,69,0) 38%),
    radial-gradient(ellipse 70% 65% at 20% 40%,
      rgba(255,176,96,.14) 0%,
      rgba(255,176,96,0) 55%);}
.hero__in{position:relative;z-index:2;width:100%;min-height:inherit;max-width:var(--shell);margin:0 auto;padding:clamp(118px,14vh,148px) clamp(20px,4vw,44px) clamp(56px,7vh,88px) clamp(20px,4vw,44px);display:flex;justify-content:flex-end;align-items:center;}
.hero__copy{width:min(100%,460px);color:var(--cream);}
.hero__kicker{display:flex;flex-wrap:nowrap;align-items:center;gap:16px;color:#F3E6C8;margin-bottom:22px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-shadow:0 1px 12px rgba(0,0,0,.55);white-space:nowrap;}
.hero__kicker::after{content:"";width:76px;height:1px;background:#bd9652;flex:none;}
.hero h1{max-width:none;font-size:clamp(52px,5.4vw,78px);line-height:.96;letter-spacing:-.03em;color:#F7F1E6;text-wrap:balance;text-shadow:0 2px 28px rgba(0,0,0,.4);font-feature-settings:"kern" 1,"liga" 1;}
.hero h1 span{display:block;}
.hero__lead{margin:26px 0 36px;font-size:clamp(16.5px,1.25vw,19px);line-height:1.55;color:rgba(250,246,239,.94);max-width:36ch;text-shadow:0 1px 16px rgba(0,0,0,.28);}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero__ctas .pill--light{padding:15px 34px;font-weight:600;letter-spacing:.02em;box-shadow:0 10px 28px rgba(8,16,28,.28);}
.hero__ctas .pill--champagne{padding:14px 28px;border-width:1.5px;color:rgba(250,246,239,.96);border-color:rgba(250,246,239,.78);background:transparent;font-weight:600;backdrop-filter:none;-webkit-backdrop-filter:none;}
.pill--champagne{background:transparent;color:var(--cream);border-color:rgba(216,196,154,.9);}
.pill--champagne:hover{background:rgba(250,246,239,.14);border-color:var(--cream);color:var(--cream);transform:translateY(-2px);}
.hero__ctas .pill--champagne:hover{background:rgba(250,246,239,.12);border-color:var(--cream);}
.hero__stats{list-style:none;display:grid;grid-template-columns:auto auto auto;justify-content:start;align-items:start;gap:0;width:max-content;max-width:100%;margin-top:44px;margin-left:0;padding:0;border-top:0;}
.hero__stat{position:relative;min-width:0;padding:0 42px;}
.hero__stat:first-child{padding-left:0;}
.hero__stat:last-child{padding-right:0;}
.hero__stat:not(:last-child)::after{content:"";position:absolute;right:0;top:6px;width:1px;height:46px;background:rgba(250,246,239,.32);}
.hero__stat b,.hero__stat:first-child b,.hero__stat:nth-child(3) b{display:block;height:auto;font-family:var(--disp);font-weight:400;font-size:clamp(34px,3.1vw,46px);line-height:.92;color:#F7F1E6;}
.hero__stat span{display:block;margin-top:8px;font-size:10px;font-weight:600;line-height:1.4;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;color:#bd9652;text-shadow:none;}
.has-hero .hd__menu{background:transparent;border:1.5px solid rgba(250,246,239,.82);color:rgba(250,246,239,.96);backdrop-filter:none;padding:11px 22px;}
.has-hero .hd__menu:hover{background:var(--cream);color:var(--navy);border-color:var(--cream);}
.has-hero .hd__book{padding:12px 24px;font-size:14px;font-weight:600;background:var(--cream);color:var(--navy);border:1.5px solid var(--cream);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 22px rgba(8,16,28,.18);}
.has-hero .hd__book:hover{background:var(--white);color:var(--navy);border-color:var(--white);transform:translateY(-1px);}
/* ── header buttons on the interior pages: the same layout as the home and Rates
   headers, Menu a 48px navy pill and Book Now a 48px pill beside it. Scoped so the two
   art heroes keep their own sheets' rules (hero-art.css, fleet-hero.css). On the cream
   header bar (.no-hero) a cream Book Now would vanish, so there the same pill is
   outlined in navy and fills on hover. display is left alone so the <=640 hide of
   .hd__book still applies, as it does on the home page. ── */
.no-hero .hd__menu,.no-hero .hd__book,
.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__menu,
.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__book{
  align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  min-height:48px;height:48px;padding:12px 24px;border-radius:999px;border:0;
  font-family:var(--text);font-size:14px;font-weight:600;letter-spacing:.01em;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:transform .2s cubic-bezier(.32,.72,.3,1),background .2s ease,color .2s ease,border-color .2s ease;}
.no-hero .hd__menu svg,.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__menu svg{width:16px;height:16px;flex:0 0 auto;}
.no-hero .hd__book svg,.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__book svg{width:16px;height:16px;flex:0 0 auto;
  transition:transform .2s cubic-bezier(.32,.72,.3,1);}
.no-hero .hd__menu,.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__menu{background:#16335F;color:#FDFBF7;}
.no-hero .hd__menu:hover,.no-hero .hd__menu:focus-visible,
.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__menu:hover,
.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__menu:focus-visible{background:#1B3C6E;color:#FDFBF7;border-color:transparent;transform:none;}
.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__book{background:#FDFAF4;color:var(--navy);}
.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__book:hover{background:#fff;color:var(--navy);transform:none;box-shadow:none;}
.no-hero .hd__book{background:transparent;border:1.5px solid var(--navy);color:var(--navy);padding:10.5px 22.5px;}
.no-hero .hd__book:hover{background:var(--navy);color:var(--cream);border-color:var(--navy);transform:none;box-shadow:none;}
.no-hero .hd__book:hover svg,.has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__book:hover svg{transform:translateX(2px);}
@media (max-width:900px){
  .no-hero .hd__menu,.no-hero .hd__book,
  .has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__menu,
  .has-hero:not(.has-hero--art):not(.has-fleet-art) .hd__book{padding:11px 21px;height:auto;}
  .no-hero .hd__book{padding:9.5px 19.5px;}
}
@media (max-width:1100px){
  .hero__copy{width:min(100%,420px);}
  .hero h1{font-size:clamp(46px,5.8vw,68px);}
}
@media (max-width:860px){
  .hero__in{justify-content:flex-end;align-items:flex-end;padding:108px 28px 40px;}
  .hero__copy{width:min(100%,400px);}
  .hero__bg{background-position:18% 42%;}
  .hero__kicker{font-size:10.5px;letter-spacing:.12em;white-space:normal;}
  .hero__kicker::after{display:none;}
  .hero__stats{margin-left:0;width:100%;grid-template-columns:1fr auto 1.15fr;}
  .hero__stat{padding-inline:18px;}
}
@media (max-width:720px){
  .hd__in{padding:20px;}
  .hd__logo img{width:96px;}
  .hero__in{justify-content:flex-start;align-items:flex-end;padding:104px 20px 32px;}
  .hero__copy{width:100%;}
  .hero__bg{background-position:20% 40%;}
  .hero__veil{background:
    linear-gradient(to top,
      rgba(14,36,69,.78) 0%,
      rgba(14,36,69,.58) 28%,
      rgba(14,36,69,.28) 55%,
      rgba(14,36,69,.08) 78%,
      rgba(14,36,69,0) 100%),
    linear-gradient(to right,
      rgba(14,36,69,.16) 0%,
      rgba(14,36,69,.06) 40%,
      rgba(14,36,69,0) 70%);}
  .hero h1{font-size:clamp(44px,12.4vw,58px);line-height:.96;}
  .hero__kicker{margin-bottom:14px;font-size:10.5px;letter-spacing:.12em;gap:10px;white-space:normal;}
  .hero__kicker::after{display:none;}
  .hero__lead{margin:16px 0 22px;max-width:38ch;line-height:1.48;}
  .hero__stats{margin-top:26px;margin-left:0;width:100%;grid-template-columns:1fr auto 1.15fr;}
  .hero__stat{padding-inline:18px;}
  .hero__stat b,.hero__stat:first-child b,.hero__stat:nth-child(3) b{font-size:clamp(30px,8.4vw,36px);}
  .hero__stat span{font-size:9px;letter-spacing:.1em;white-space:normal;}
}

/* ============================================================ SECTIONS */
.sec{padding-top:var(--gap);}
.sec:last-of-type{padding-bottom:var(--gap);}

/* handover: the key handover in a hand-cut organic frame. The shape is a
   closed form built from three low polar harmonics, so it reads as drawn
   rather than as a CSS radius. Champagne is the hero's own accent; the wash
   is coastal environment, never a painting of this section's own photograph. */
.handover{position:relative;overflow:hidden;padding:var(--gap) 0 0;}
.handover__defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}

.handover__wash{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-47%);
  aspect-ratio:1500/620;z-index:0;pointer-events:none;
  background:url('img/art/wash-coast.webp') 34% center / cover no-repeat;
  opacity:.11;filter:saturate(.45);
}
/* The wash image stops dead at ~96% of its own box, which read as a hard line
   between this section and the one below. Cream overlay, never a mask; the
   transparent stop is rgba(250,246,239,0), never the `transparent` keyword;
   quintic smootherstep so the ramp is slow at BOTH ends. Sibling of the wash,
   not a child, so its saturate() filter cannot tint the veil. */
.handover__washveil{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-47%);
  aspect-ratio:1500/620;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 1.9%, rgba(250,246,239,0.94) 3.8%, rgba(250,246,239,0.84) 5.7%, rgba(250,246,239,0.68) 7.6%, rgba(250,246,239,0.5) 9.5%, rgba(250,246,239,0.32) 11.4%, rgba(250,246,239,0.16) 13.3%, rgba(250,246,239,0.06) 15.2%, rgba(250,246,239,0.01) 17.1%, rgba(250,246,239,0) 19.0%, rgba(250,246,239,0) 19%, rgba(250,246,239,0) 59%, rgba(250,246,239,0) 59.0%, rgba(250,246,239,0.01) 63.1%, rgba(250,246,239,0.06) 67.2%, rgba(250,246,239,0.16) 71.3%, rgba(250,246,239,0.32) 75.4%, rgba(250,246,239,0.5) 79.5%, rgba(250,246,239,0.68) 83.6%, rgba(250,246,239,0.84) 87.7%, rgba(250,246,239,0.94) 91.8%, rgba(250,246,239,0.99) 95.9%, rgba(250,246,239,1) 100.0%);
}

.handover__in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(8px,1.2vw,20px);align-items:center;
}

.handover__art{position:relative;z-index:2;margin-left:calc(-1 * clamp(4px,6vw,108px));container-type:inline-size;}
.handover__art img{
  width:107%;max-width:none;height:auto;display:block;pointer-events:none;
  filter:saturate(1.16) contrast(1.07) brightness(1.03);
}
/* The rate seal. Ground, rim order and type hierarchy are taken from the site's
   own seal artwork (assets/img/rate-seal.webp, sampled: ground #264E4B, rim gold
   near #DDBC6E) so the two read as one family. Three things were wrong before:
   the ground was a three stop sage that put white text at 2.46:1, four rings of
   four different colors and widths fought at the rim, and the small caps asked
   for weight 600 when only 400 of Neue Frutiger is loaded, so 9px type rendered
   as smeared synthetic bold. White on #264E4B measures 9.27:1. */
.handover__badge{
  position:absolute;z-index:3;left:8.05%;bottom:1.05%;
  width:max(152px,25.6%);aspect-ratio:1;
  /* The badge is its own container. Its type used to be sized in cqi against the
     photo column, so at 390 the column drew an 87px badge and the model line
     landed at 4.55px. Sized against the badge instead, every element keeps the
     same proportion of the disc at every width, and the 148px floor keeps the
     smallest one legible. */
  container-type:inline-size;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0;overflow:hidden;border:2.5px solid var(--cream);border-radius:50%;
  background:
    radial-gradient(circle at 34% 20%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 58%),
    #264E4B;
  color:#fff;text-align:center;
  box-shadow:0 0 0 1px rgba(38,78,75,.22),0 14px 26px -14px rgba(14,36,69,.5);
}
/* The seal's own rim order, outside in: dashes, then a solid hairline. The insets
   are percentages, not pixels: at 6px and 11px the two rings ate a quarter of the
   87px badge the 390 layout draws, and the lockup crossed both of them. */
.handover__badge::before{
  content:"";position:absolute;inset:3.5%;border:1px dashed rgba(225,211,159,.5);
  border-radius:50%;pointer-events:none;
}
.handover__badge::after{
  content:"";position:absolute;inset:6.4%;border:1px solid rgba(225,211,159,.8);
  border-radius:50%;pointer-events:none;
}
.handover__badge-content{
  position:absolute;z-index:1;left:50%;top:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:auto;max-width:74%;margin:0;transform:translate(-50%,-50%);text-align:center;
}
.handover__badge-palm{flex:none;width:13.57cqi;height:auto;aspect-ratio:1;margin:0 auto 4.14cqi;display:block;}
/* Optical spacing, measured off the render rather than the box model: the palm
   artwork leaves 4.4px empty at the bottom of its own box and the display
   numeral sits ~5.5px low in its line box, so the box gaps read even while the
   ink showed a 15.9px hole under the palm against 4.5px below the numeral. The
   negative top margin takes that dead space out, the wider day margin gives the
   unit line back the room it lost. */
.handover__badge strong{display:block;font-family:var(--disp);font-size:23.61cqi;margin-top:-5.5cqi;font-weight:400;line-height:.9;letter-spacing:.005em;color:#fff;}
.handover__badge-day{display:block;margin-top:6.2cqi;font-family:var(--text);font-size:6.03cqi;font-weight:400;line-height:1;letter-spacing:.24em;text-indent:.24em;color:#fff;}
.handover__badge-rule{display:block;width:42%;height:1px;margin:4.72cqi 0 4.14cqi;background:rgba(225,211,159,.72);}
.handover__badge small{display:block;font-family:var(--text);font-size:5.20cqi;font-weight:400;line-height:1;letter-spacing:.12em;text-indent:.12em;color:#E1D39F;white-space:nowrap;}


/* Selection anchoring: Chromium resolves a drag's start point to the nearest text
   inside the block box under it. The photo column's only text is the rate badge,
   and it precedes the headline in the DOM, so a drag begun in the gutter or over
   the photograph anchored on the badge and swept "$100 A DAY CLUB CAR TEMPO" into
   the selection. Two parts to the fix, both here:
   1. z-index, because the photo is width:107% and its box overhangs the first
      ~17px of every line of copy, so drags near the text hit the image not the words.
   2. the copy's box reaches left across the gutter and most of the photograph, so
      those points resolve to the words. It stops ~150px clear of the badge, which
      stays selectable. Padding matches the negative margin, so nothing moves. */
.handover__copy{position:relative;z-index:3;}
@media (min-width:861px){
  .handover__copy{margin-left:calc(-1 * clamp(40px,22vw,330px));padding-left:clamp(40px,22vw,330px);}
}
.handover__copy h2{font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;margin:0;}
.handover__copy .script{display:block;width:max-content;max-width:100%;font-size:1.08em;line-height:.86;margin:.12em 0 0;transform:translateY(.04em);position:relative;}
.handover__copy .script:after{
  content:"";position:absolute;left:5%;right:10%;bottom:-.08em;height:2px;
  background:#bd9652;border-radius:50%;transform:rotate(-4deg);
}
.handover__copy > p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.68;color:var(--ink-soft);max-width:40ch;margin:clamp(29px,2.6vw,36px) 0 0;}
.handover__copy p+p{margin-top:8px;}

/* micro fact rail, after Belle Pointe's pg-prop: a mark, a name, a line of
   substance. Sentence case in the display face rather than tracked caps, so it
   reads editorial and does not spend the page's eyebrow budget. */
.handover__facts{
  list-style:none;margin:clamp(24px,2.8vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;max-width:min(100%,590px);background:none;border:0;box-shadow:none;
}
/* Raised surface ported from .kdrive__steps li, which is what reads as 3D there:
   a vertical gradient down the face, an inset light edge at the top against an
   inset gold edge at the bottom, and two shadows rather than one, a tight contact
   shadow plus a soft lift. The flat fill and single blur here read as a plate. */
.handover__facts li{
  min-width:0;min-height:132px;padding:12px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:
    linear-gradient(180deg, rgba(255,252,247,.97) 0%, rgba(250,246,239,.9) 100%);
  border:1px solid rgba(181,137,74,.5);border-radius:15px;
  box-shadow:
    inset 0 1px 0 rgba(255,252,247,.9),
    inset 0 -1px 0 rgba(181,137,74,.14),
    0 1px 2px rgba(40,53,67,.07),
    0 12px 24px -10px rgba(40,53,67,.22);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.handover__facts svg{width:34px;height:34px;color:var(--teal);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto;}
.handover__fact-rule{display:block;width:70%;height:1px;margin:8px 0;background:rgba(181,137,74,.7);}
.handover__facts b{display:block;font-family:var(--disp);font-weight:400;font-size:15px;line-height:1.15;color:var(--navy);}
.handover__facts small{display:block;margin-top:3px;font-family:var(--text);font-size:12.5px;line-height:1.2;color:var(--ink-soft);}

/* the rate joins the type system instead of sitting on the picture as a sticker */
.handover__foot{
  margin-top:clamp(22px,2.6vw,30px);padding-top:0;
  border-top:0;max-width:min(100%,590px);
  display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);flex-wrap:wrap;
}
.handover__foot .pill svg{transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.handover__foot .pill--solid{border-color:rgba(181,137,74,.78);}
.handover__foot .pill--solid:hover{border-color:#b58a4a;}
.handover__foot .pill:hover svg{transform:translateX(3px);}

@media (max-width:860px){
  .handover{padding-top:var(--gap);padding-bottom:0;}
  .bay{padding-bottom:0;}
  .handover__in{grid-template-columns:minmax(0,1fr);gap:clamp(38px,6vw,54px);}
  .handover__art{max-width:680px;margin-left:0;}
  .handover__art img{width:100%;}
  .handover__badge{left:7.3%;bottom:1.0%;width:max(152px,24.8%);}
  .handover__wash{transform:translateY(-44%);background-position:46% center;opacity:.1;}
  .handover__washveil{transform:translateY(-44%);
    background:linear-gradient(to bottom, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 1.4%, rgba(250,246,239,0.94) 2.8%, rgba(250,246,239,0.84) 4.2%, rgba(250,246,239,0.68) 5.6%, rgba(250,246,239,0.5) 7.0%, rgba(250,246,239,0.32) 8.4%, rgba(250,246,239,0.16) 9.8%, rgba(250,246,239,0.06) 11.2%, rgba(250,246,239,0.01) 12.6%, rgba(250,246,239,0) 14.0%, rgba(250,246,239,0) 14%, rgba(250,246,239,0) 46%, rgba(250,246,239,0) 46.0%, rgba(250,246,239,0.01) 51.4%, rgba(250,246,239,0.06) 56.8%, rgba(250,246,239,0.16) 62.2%, rgba(250,246,239,0.32) 67.6%, rgba(250,246,239,0.5) 73.0%, rgba(250,246,239,0.68) 78.4%, rgba(250,246,239,0.84) 83.8%, rgba(250,246,239,0.94) 89.2%, rgba(250,246,239,0.99) 94.6%, rgba(250,246,239,1) 100.0%);}
}
@media (max-width:520px){
  .handover__art{max-width:none;}
  .handover__copy h2{font-size:clamp(36px,10vw,48px);}
  .handover__facts{grid-template-columns:1fr;gap:10px;padding:0;}
  .handover__facts li{min-height:82px;padding:10px 18px;display:grid;grid-template-columns:48px 1px 1fr;grid-template-rows:auto auto;column-gap:13px;text-align:left;}
  .handover__facts svg{grid-row:1/3;width:34px;margin:0;justify-self:center;}
  .handover__fact-rule{grid-row:1/3;width:1px;height:48px;margin:0;background:rgba(181,137,74,.56);}
  .handover__facts b{align-self:end;font-size:16px;}
  .handover__facts small{align-self:start;font-size:13px;}
  .handover__foot{gap:18px;}
}

/* wave art divider (generated from the logo wave) */
.waveline{margin:clamp(40px,6vw,80px) auto 0;display:flex;justify-content:center;}
.waveline img{width:min(320px,50vw);opacity:.85;}

/* fleet: staggered, dominant third card */
.fleet__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px;margin-bottom:clamp(30px,4vw,54px);}
.fleet__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,30px);}
.fcard{position:relative;border-radius:18px;overflow:hidden;background:var(--white);box-shadow:0 14px 40px rgba(34,51,74,.10);transition:transform .28s ease,box-shadow .28s ease;display:flex;flex-direction:column;}
.fcard:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(34,51,74,.16);}
.fcard--a{grid-column:1/span 5;margin-top:clamp(24px,4vw,64px);}
.fcard--b{grid-column:6/span 4;}
.fcard--c{grid-column:10/span 3;margin-top:clamp(48px,7vw,110px);}
.fcard__img{aspect-ratio:4/3;overflow:hidden;}
.fcard--a .fcard__img{aspect-ratio:16/10;}
.fcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.fcard:hover .fcard__img img{transform:scale(1.05);}
.fcard__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1;}
.fcard__body h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.fcard__nm{white-space:nowrap;}
.fcard__rate{font-family:var(--disp);color:var(--teal);font-size:22px;letter-spacing:.02em;white-space:nowrap;}
.fcard__meta{font-size:14.5px;color:var(--ink-soft);}
.fcard__link{margin-top:auto;padding-top:10px;font-weight:600;font-size:15px;color:var(--navy);display:inline-flex;align-items:center;gap:8px;}
.fcard__link svg{width:16px;height:16px;transition:transform .2s ease;}
.fcard:hover .fcard__link svg{transform:translateX(4px);}
.fleet__cta{margin-top:clamp(30px,4vw,50px);display:flex;gap:14px;flex-wrap:wrap;}

/* steps: elevated light band + cards (no dark wash) */
.steps{
  position:relative;
  margin-top:var(--gap);
  background:linear-gradient(180deg, var(--cream) 0%, var(--sand-lt) 45%, var(--cream) 100%);
  color:var(--ink);
  overflow:hidden;
}
.steps__wm{
  position:absolute;
  right:-8%;
  top:-20%;
  width:58%;
  opacity:.06;
  pointer-events:none;
  filter:none;
}
.steps__in{position:relative;z-index:1;padding:clamp(56px,7.5vw,100px) 0;}
.steps h2{color:var(--navy);text-align:center;max-width:22ch;margin:0 auto;}
.steps h2 .script{color:var(--teal);}
.steps__grid{
  margin-top:clamp(34px,5vw,56px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
}
.step{
  position:relative;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(22,51,95,.10);
  border-radius:22px;
  padding:28px 24px 30px;
  box-shadow:0 16px 40px rgba(14,36,69,.07), 0 1px 0 rgba(255,255,255,.85) inset;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.step:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(14,36,69,.11), 0 1px 0 rgba(255,255,255,.9) inset;
}
.step__n{
  font-family:var(--disp);
  font-size:clamp(42px,5vw,58px);
  line-height:1;
  color:rgba(79,138,126,.18);
  position:absolute;
  top:12px;
  right:16px;
  letter-spacing:.04em;
  -webkit-text-stroke:0;
  pointer-events:none;
}
.step h3{
  color:var(--navy);
  position:relative;
  padding-top:0;
  margin:0 0 12px;
  font-size:clamp(18px,1.8vw,22px);
  max-width:14ch;
}
.step p{
  margin-top:0;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.55;
  max-width:34ch;
}
/* connector accent under title on desktop */
.step h3::after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin-top:12px;
  background:var(--teal);
  border-radius:2px;
  opacity:.75;
}

/* mag: fade feature band (recipe verbatim) */
.mag{position:relative;min-height:clamp(480px,46vw,600px);display:flex;align-items:center;overflow:hidden;margin-top:var(--gap);}
.mag__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-color:#E7E0D2;}
.mag__veil{position:absolute;inset:0;z-index:1;}
.mag:not(.mag--flip) .mag__veil{background:var(--mag-h-left),var(--mag-soft);}
.mag--flip .mag__veil{background:var(--mag-h-right),var(--mag-soft);}
.mag .shell,.closing .shell{width:100%;}
.mag__body{position:relative;z-index:2;width:54%;max-width:640px;}
.mag--flip .mag__body{margin-left:auto;}
.mag__body h2{margin-bottom:16px;white-space:nowrap;}
.mag__body .pill{margin-top:22px;}
.mag__note{margin-top:14px;font-size:14.5px;color:var(--ink-soft);}

/* distance rail, after Belle Pointe's 'minutes away' row and this site's own
   hero stat pattern: a display value, its unit, the place under it. */
.mag__body p{max-width:46ch;}
.mag__rail{
  list-style:none;margin:clamp(24px,2.8vw,34px) 0 0;padding:clamp(20px,2.2vw,26px) 0 0;
  border-top:1px solid rgba(216,196,154,.9);
  display:grid;grid-template-columns:repeat(3,minmax(0,auto));
  justify-content:start;gap:clamp(22px,3.4vw,52px);max-width:min(100%,520px);
}
.mag__rail li{position:relative;min-width:0;}
.mag__rail li+li::before{
  content:"";position:absolute;left:calc(-1 * clamp(11px,1.7vw,26px));top:2px;
  width:1px;height:38px;background:rgba(22,51,95,.24);
}
/* the one worded value steps back so the numerals lead */
.mag__rail li:first-child b{font-size:clamp(23px,2.2vw,31px);}
.mag__rail b{
  display:flex;align-items:flex-end;gap:5px;height:clamp(30px,2.9vw,40px);
  font-family:var(--disp);font-weight:400;font-size:clamp(28px,2.7vw,38px);
  line-height:.92;color:var(--navy);letter-spacing:.01em;white-space:nowrap;
}
.mag__rail i{
  font-family:var(--text);font-style:normal;font-size:12.5px;font-weight:600;
  color:var(--ink-soft);letter-spacing:.04em;transform:translateY(-.28em);
}
.mag__rail span{
  display:block;margin-top:9px;font-family:var(--text);font-size:13.5px;
  line-height:1.35;color:var(--ink-soft);white-space:nowrap;
}
.mag__body .pill{margin-top:clamp(24px,2.8vw,34px);}
@media (max-width:820px){
  .mag__rail{gap:clamp(16px,3.4vw,28px);}
  .mag__rail li+li::before{left:calc(-1 * clamp(8px,1.7vw,14px));height:34px;}
  .mag__rail span{font-size:12.5px;}
}
@media (max-width:520px){
  .mag__rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:none;}
  .mag__rail li+li::before{left:-5px;height:30px;}
  .mag__rail b{font-size:clamp(24px,7vw,30px);height:auto;}
  .mag__rail span{white-space:normal;font-size:12px;}
}

/* distance chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid rgba(34,51,74,.12);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;color:var(--navy);box-shadow:0 4px 14px rgba(34,51,74,.06);}
.chip svg{width:15px;height:15px;color:var(--teal);}
.chip small{font-weight:400;color:var(--ink-soft);}

/* rates beat: sand band + open table (no white card) */
.rateband{margin-top:var(--gap);background:linear-gradient(to bottom,var(--cream),var(--sand-lt) 18%,var(--sand-lt) 82%,var(--cream));}
.rateband__in{padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center;}
.ratetable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  border-radius:18px;
  overflow:hidden;
  box-shadow:none;
  border:1px solid rgba(22,51,95,.14);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.ratetable th,.ratetable td{
  padding:18px 22px;
  text-align:left;
  font-size:16px;
  background:transparent;
}
.ratetable thead th{
  background:var(--navy);
  color:var(--cream);
  font-family:var(--text);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:0;
}
.ratetable thead th:first-child{border-radius:17px 0 0 0;}
.ratetable thead th:last-child{border-radius:0 17px 0 0;text-align:right;}
.ratetable tbody tr{
  transition:background .18s ease;
}
.ratetable tbody tr:nth-child(odd){
  background:rgba(255,255,255,.18);
}
.ratetable tbody tr:nth-child(even){
  background:rgba(22,51,95,.035);
}
.ratetable tbody tr:hover{
  background:rgba(79,138,126,.12);
}
.ratetable tbody tr+tr th,
.ratetable tbody tr+tr td{
  border-top:1px solid rgba(22,51,95,.08);
}
.ratetable td strong{
  font-family:var(--disp);
  font-size:22px;
  color:var(--teal);
  letter-spacing:.02em;
  font-weight:400;
}
.ratetable tbody th{
  font-weight:600;
  color:var(--navy);
  letter-spacing:.01em;
}
.ratetable tbody td:last-child,
.ratetable thead th:last-child{
  text-align:right;
}
.ratetable tbody td:not(:first-child){
  font-variant-numeric:tabular-nums;
}
.ratetable tbody tr:last-child th{border-radius:0 0 0 17px;}
.ratetable tbody tr:last-child td:last-child{border-radius:0 0 17px 0;}
.rateband__copy .pill{margin-top:24px;}
.rateband__fine{margin-top:16px;font-size:14px;color:var(--ink-soft);}

/* closing CTA: fade, copy on calm side */
.closing{position:relative;min-height:clamp(500px,48vw,640px);display:flex;align-items:center;overflow:hidden;margin-top:var(--gap);}
.closing__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#E7E0D2;}
.closing__veil{position:absolute;inset:0;background:var(--mag-h-left),var(--mag-soft);}
.closing__body{position:relative;z-index:2;width:54%;max-width:640px;}
/* The supplied photograph is the comp's own right-hand image: it already carries
   a cream dissolve down its left edge and is composed to sit flush right. Two
   things had to change for it to read. The stock --mag-h-left ladder is opaque at
   BOTH ends, so it washed out the right side of the photo; this one goes opaque
   left, holds a .86 ghost plateau under the copy, descends to a clear crest, then
   rises BACK to opaque by 88% of the band, which is exactly where the photo's box
   stops on the page gutter. That is the point: the photo's right edge was a 141
   level hard cut, and the island band never shows one because its photo overshoots
   its container and the veil, not a crop, ends the picture. Same idea here. And the
   vertical ladder is --mag-soft itself, the same 34% symmetric ramps the island
   band uses. Quintic smootherstep per
   fade-effect.md; the clear stop is rgba(250,246,239,0), never `transparent`.
   Scoped to a modifier because .closing is shared with island-guide. */
/* The CTA lives in a rounded rectangle rather than a full bleed band. The panel
   is inset on the same geometry the island card already uses, carries the raised
   card surface the rest of the page's panels share, and clips the photograph to
   its own radius. Because the panel now provides the page margin, .closing__bg
   goes back to filling it: inset:0 on an absolutely positioned child resolves
   against the padding box, so the photo stops inside the border rather than
   painting over it. */
.closing--seat{
  width:calc(100% - clamp(40px,8vw,88px));
  max-width:1320px;
  margin:var(--gap) auto 0;
  border-radius:clamp(18px,2vw,28px);
  border:1px solid rgba(181,137,74,.5);
  /* Flat cream, not a card gradient: the photograph's dissolve is baked to
     exactly #FAF6EF, so any lighter panel surface would print its faded edge as
     a rectangle. Depth comes from the rule and the drop shadow instead, and the
     inset highlights are omitted because a positioned child paints over them,
     which would break the line where the photo starts. */
  background:var(--cream);
  box-shadow:
    0 1px 2px rgba(40,53,67,.07),
    0 22px 44px -18px rgba(40,53,67,.22);
}
/* The photograph stops on the page gutter instead of bleeding to the viewport
   edge, so it lines up with every other section's content edge. The gutter is
   expressed off the element's OWN width, not 100vw: vw includes the scrollbar and
   would sit ~15px wide of where .shell puts everything else. */
.closing--seat .closing__bg{
  background-color:transparent;
  /* No CSS filter. contrast(.88) caps a filtered span's output at 241.9, below the
     245 cream, so a filtered edge can never reach the canvas and always prints a
     step. The luminance pivot from fade-effect.md is baked into the asset instead,
     together with smootherstep dissolves on all four sides: 34% left, 24% right,
     22% top and bottom, corners multiplying so they get the softest fade of all.
     Every edge column of the file is now exactly rgba(250,246,239). */
}
.closing--seat .closing__veil{
  background:
    linear-gradient(to right,
      rgba(250,246,239,1.0) 0.0%, rgba(250,246,239,0.999) 1.4%, rgba(250,246,239,0.992) 2.8%, rgba(250,246,239,0.978) 4.2%, rgba(250,246,239,0.955) 5.6%, rgba(250,246,239,0.93) 7.0%, rgba(250,246,239,0.905) 8.4%, rgba(250,246,239,0.882) 9.8%, rgba(250,246,239,0.868) 11.2%, rgba(250,246,239,0.861) 12.6%, rgba(250,246,239,0.86) 14.0%,
      rgba(250,246,239,.84) 30%,
      rgba(250,246,239,0.84) 30.0%, rgba(250,246,239,0.832) 32.4%, rgba(250,246,239,0.79) 34.8%, rgba(250,246,239,0.706) 37.2%, rgba(250,246,239,0.571) 39.6%, rgba(250,246,239,0.42) 42.0%, rgba(250,246,239,0.269) 44.4%, rgba(250,246,239,0.134) 46.8%, rgba(250,246,239,0.05) 49.2%, rgba(250,246,239,0.008) 51.6%, rgba(250,246,239,0.0) 54.0%,
      rgba(250,246,239,0) 100%);
}

.closing__body h2{font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;white-space:normal;}
.closing__body h2 > span{display:block;}
.closing__body h2 .script{
  display:inline-block;width:auto;margin:0 0 0 .08em;vertical-align:baseline;
  font-family:var(--script);font-size:1.02em;font-weight:400;line-height:.86;
  letter-spacing:0;text-transform:none;color:var(--teal);position:relative;
}
.closing__body h2 .script:after{
  content:"";position:absolute;left:6%;right:8%;width:auto;bottom:-.06em;height:2px;
  background:#bd9652;border-radius:50%;transform:rotate(-6deg);
}
.closing__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}

/* ============================================================ INTERIOR PAGES */
.phero{position:relative;padding:clamp(150px,20vw,220px) 0 0;}
.phero--photo{min-height:clamp(420px,52vh,560px);display:flex;align-items:flex-end;padding:0;overflow:hidden;}
.phero--photo .phero__bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;background-color:#E7E0D2;}
/* photo hero: no cream fade at the foot. The photo runs to a hard edge and the copy sits
   on the same navy scrim the Rates hero uses, in white, so it stays legible without a veil. */
.phero--photo .phero__veil{position:absolute;inset:auto 0 0 0;height:78%;pointer-events:none;
  background:linear-gradient(to top,
    rgba(14,36,69,0.72) 0%,
    rgba(14,36,69,0.72) 1%,
    rgba(14,36,69,0.719) 6%,
    rgba(14,36,69,0.697) 16%,
    rgba(14,36,69,0.583) 32%,
    rgba(14,36,69,0.36) 50%,
    rgba(14,36,69,0.137) 68%,
    rgba(14,36,69,0.023) 84%,
    rgba(14,36,69,0.001) 94%,
    rgba(14,36,69,0) 99%,
    rgba(14,36,69,0) 100%);}
.phero--photo h1{color:#fff;
  text-shadow:0 0 2px rgba(9,20,38,.5),0 2px 8px rgba(9,20,38,.58),0 3px 34px rgba(9,20,38,.66);}
.phero--photo h1 .script{color:var(--foam-lt);}
.phero--photo .phero__lead{color:#fff;
  text-shadow:0 0 1px rgba(9,20,38,.42),0 1px 4px rgba(9,20,38,.5),0 2px 20px rgba(9,20,38,.62);}
.phero--photo .phero__body{padding-bottom:clamp(28px,4vh,44px);}
.phero--photo .phero__scrim{position:absolute;inset:0 0 auto 0;height:170px;background:linear-gradient(to bottom,rgba(14,36,69,.36),rgba(14,36,69,0));}
.phero__body{position:relative;z-index:2;width:100%;padding-bottom:clamp(8px,2vh,20px);}
.phero h1{font-size:clamp(40px,5.6vw,74px);letter-spacing:-.015em;}
.phero h1 .script{font-size:1.12em;margin-left:.22em;}
.phero__lead{margin-top:16px;font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:58ch;}

/* prose blocks (terms, privacy, rules) */
.prose{max-width:760px;}
.prose h2{font-size:clamp(24px,2.6vw,34px);margin:clamp(40px,5vw,60px) 0 14px;}
.prose h3{margin:28px 0 10px;}
.prose p+p{margin-top:12px;}
.prose ul{margin:12px 0 12px 22px;}
.prose li+li{margin-top:8px;}

/* faq accordion */
.faq{max-width:820px;}
.faq details{background:var(--white);border-radius:14px;box-shadow:0 8px 26px rgba(34,51,74,.08);margin-top:14px;overflow:hidden;}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;font-weight:600;font-size:17px;color:var(--navy);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--disp);font-size:26px;color:var(--teal);transition:transform .25s ease;line-height:1;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details>p{padding:0 26px 22px;color:var(--ink-soft);}

/* generic two-column feature (photo + copy, alternating) */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;margin-top:var(--gap);}
.duo--flip .duo__media{order:2;}
.duo__media{border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(34,51,74,.14);}
.duo__media img{width:100%;height:100%;object-fit:cover;display:block;}
/* Photo column taller than adjacent copy (office / pickup duo) */
.duo--tall-media{align-items:center;}
.duo--tall-media .duo__media{
  align-self:center;
  aspect-ratio:4/5;
  min-height:clamp(26rem, 58vh, 36rem);
  height:auto;
}
.duo--tall-media .duo__media img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center 42%;
}
@media (max-width:820px){
  .duo--tall-media .duo__media{
    min-height:0;
    aspect-ratio:5/4;
  }
}

.duo__copy h2{margin-bottom:16px;}
.duo__copy p+p{margin-top:12px;}
.duo__copy .pill{margin-top:24px;}

/* info cards row (rules, contact) */
.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(30px,4vw,50px);}
.icard{background:var(--white);border-radius:16px;padding:26px 26px 28px;box-shadow:0 10px 30px rgba(34,51,74,.08);}
.icard h3{color:var(--navy);margin-bottom:10px;}
.icard p{font-size:15.5px;color:var(--ink-soft);}
.icard ul{margin:8px 0 0 18px;font-size:15.5px;color:var(--ink-soft);}
.icard li+li{margin-top:6px;}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);margin-top:clamp(36px,5vw,64px);align-items:start;}
.contact__card{background:var(--white);border-radius:18px;padding:clamp(26px,3vw,40px);box-shadow:0 16px 44px rgba(34,51,74,.10);}
.contact__card h3{margin-bottom:14px;}
.contact__card p+p{margin-top:12px;}
.contact__card a{font-weight:600;}
.cmap{border-radius:18px;overflow:hidden;box-shadow:0 16px 44px rgba(34,51,74,.12);}
.cmap iframe{display:block;width:100%;height:420px;border:0;}

/* ============================================================ FOOTER */
.ft{margin-top:var(--gap);background:linear-gradient(165deg,var(--deep) 0%,var(--navy) 85%);color:var(--cream);}
.ft__in{max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,4vw,44px);}
.ft__main .ft__in{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,2fr);gap:clamp(36px,5vw,80px);}
.ft__brand img{width:120px;height:auto;}
.ft__brand p{margin:18px 0 22px;font-size:15.5px;color:rgba(250,246,239,.82);max-width:30ch;}
.ft__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);}
.ft__col h3{color:var(--foam);font-size:15px;letter-spacing:.14em;margin-bottom:14px;}
.ft__col a{display:block;color:rgba(250,246,239,.85);font-size:15.5px;padding:5px 0;transition:color .18s ease,padding-left .18s ease;}
.ft__col a:hover{color:var(--foam);padding-left:6px;}
.ft__col p{font-size:15px;color:rgba(250,246,239,.8);}
.ft__col p+p{margin-top:12px;}
.ft__col p a{display:inline;padding:0;color:var(--cream);}
.ft__partners{background:var(--cream);}
.ft__triad{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-top:26px;padding-bottom:26px;}
.ft__pwr{display:inline-flex;align-items:center;gap:14px;color:var(--ink-soft);font-size:14px;font-weight:600;}
.ft__pwr img{height:44px;width:auto;}
.ft__accept{justify-self:end;display:inline-flex;align-items:center;gap:14px;color:var(--ink-soft);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.ft__accept img{height:28px;width:auto;}
.ft__legal{background:var(--deep);}
.ft__legal .ft__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:18px;padding-bottom:18px;}
.ft__legal p{font-size:13.5px;color:rgba(250,246,239,.62);}
.ft__legal a{color:rgba(250,246,239,.78);display:inline-block;padding:6px 3px;}
.ft__col p a{display:inline-block;padding:4px 0;}
.ft__legal a:hover{color:var(--foam);}

/* ============================================================ FOOTER (watercolor, from footer-comp) */
.fcomp{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--cream);
  display:flex;flex-direction:column;
  margin-top:var(--gap);
  padding:clamp(56px,8vw,96px) 0 100px;
  min-height:808px;
}
.fcomp__scene,
.fcomp__veil{position:absolute;pointer-events:none;}
.fcomp__scene{z-index:0;inset:0;}
.fcomp__scene img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;
}
.fcomp__veil{
  z-index:1;inset:0;
  background:linear-gradient(to bottom,
    rgba(250,246,239,1) 0%,
    rgba(250,246,239,.99) 4%,
    rgba(250,246,239,.94) 8%,
    rgba(250,246,239,.84) 12%,
    rgba(250,246,239,.68) 16%,
    rgba(250,246,239,.5) 20%,
    rgba(250,246,239,.32) 24%,
    rgba(250,246,239,.16) 28%,
    rgba(250,246,239,.06) 32%,
    rgba(250,246,239,.01) 36%,
    rgba(250,246,239,0) 40%,
    rgba(250,246,239,0) 100%);
}
.fcomp__in{
  position:relative;z-index:2;
  flex:1;width:100%;max-width:1300px;margin:0 auto;
  padding:0 clamp(24px,5vw,56px);
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:0;
}
.fcomp__mast{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:26px;align-items:center;
  margin-bottom:28px;
}
.fcomp__logo{width:88px;height:auto;display:block;}
.fcomp__vrule{width:1px;align-self:stretch;background:rgba(181,137,74,.55);min-height:56px;}
.fcomp__blurb p{
  margin:0;max-width:42ch;
}
.fcomp__blurb>p:not(.fcomp__tag){
  font:400 16px/1.6 var(--text);color:var(--ink-soft);
}
@media(max-width:1150px){
  .fcomp__blurb>p:not(.fcomp__tag){font-size:15px;}
}
.fcomp__blurb .fcomp__tag{
  margin:6px 0 0;
  font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);
}
.fcomp__ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;}
.fcomp__ctas .pill{font-size:14px;padding:12px 24px;}
.fcomp .pill--solid{border-color:rgba(181,137,74,.78);}
.fcomp .pill svg{transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.fcomp .pill--solid:hover svg{transform:translateX(3px);}
.fcomp__div{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  margin:0 0 44px;
}
.fcomp__div span{display:block;height:1px;background:rgba(181,137,74,.55);}
.fcomp__shell{display:block;width:26px;height:23px;}
.fcomp__cols{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(36px,4.2vw,64px);align-items:start;
}
.fcomp__cols h3{
  margin:0 0 18px;font-family:var(--text);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.fcomp__cols h3:after{
  content:"";display:block;width:36px;height:1.5px;margin-top:8px;background:#bd9652;
}
.fcomp__links a{
  display:block;color:var(--navy);font-size:15.5px;line-height:1.45;padding:10px 0;text-decoration:none;
  transition:color .18s ease,padding-left .18s ease;
}
.fcomp__links a:hover{color:var(--teal);padding-left:6px;}
.fcomp__row{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;
  margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--navy);
}
.fcomp__row svg{margin-top:2px;}
.fcomp__row a{color:var(--navy);text-decoration:none;}
.fcomp__row a:hover{color:var(--teal);}
.fcomp__row--cart{grid-template-columns:34px minmax(0,1fr);align-items:center;margin-top:14px;}
.fcomp__row--cart svg{width:34px;height:26px;}
.fcomp__end{
  position:relative;isolation:isolate;
  margin-top:52px;
}
.fcomp__end:before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-28%;right:-28%;top:-56%;bottom:-12%;
  background:radial-gradient(ellipse 70% 58% at 50% 42%,
    rgba(250,246,239,.88) 0%,
    rgba(250,246,239,.82) 16%,
    rgba(250,246,239,.68) 32%,
    rgba(250,246,239,.48) 48%,
    rgba(250,246,239,.26) 62%,
    rgba(250,246,239,.1) 76%,
    rgba(250,246,239,.03) 88%,
    rgba(250,246,239,0) 100%);
}
.fcomp__end > *{position:relative;z-index:1;}
.fcomp__lockup{
  display:flex;align-items:center;gap:18px;
  margin:0 0 26px;
}
.fcomp__lockup:before,
.fcomp__lockup:after{content:"";flex:1;height:1px;background:rgba(181,137,74,.5);}
.fcomp__lockup span{
  font-family:var(--script);font-size:clamp(18px,1.7vw,24px);line-height:.9;
  color:#bd9652;white-space:nowrap;
}
.fcomp__base{
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"pwr accept" "copy legal";
  column-gap:16px;row-gap:8px;align-items:center;padding:0;
}
.fcomp__pwr,
.fcomp__accept{display:contents;}
.fcomp__pwr a{
  grid-area:pwr;justify-self:start;
  display:inline-flex;align-items:center;gap:12px;
  color:var(--ink-soft);font-size:13.5px;font-weight:600;text-decoration:none;
}
.fcomp__pwr img{height:40px;width:auto;}
.fcomp__pwr p{
  grid-area:copy;justify-self:start;margin:0;
  font-size:13px;color:var(--ink-soft);
}
.fcomp__accept p{margin:0;font-size:13px;color:var(--ink-soft);}
.fcomp__accept p:first-child{
  grid-area:accept;justify-self:end;
  display:inline-flex;align-items:center;justify-content:flex-end;gap:12px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  padding-left:16px;border-left:1px solid rgba(181,137,74,.45);
}
.fcomp__accept p:last-child{grid-area:legal;justify-self:end;}
.fcomp__accept img{height:26px;width:auto;}
.fcomp__accept a{color:var(--navy);text-decoration:none;}
.fcomp__accept a:hover{color:var(--teal);}
@media (max-width:820px){
  .fcomp__veil{
    background:linear-gradient(to bottom,
      rgba(250,246,239,1) 0%,
      rgba(250,246,239,.99) 2.4%,
      rgba(250,246,239,.94) 4.8%,
      rgba(250,246,239,.84) 7.2%,
      rgba(250,246,239,.68) 9.6%,
      rgba(250,246,239,.5) 12%,
      rgba(250,246,239,.32) 14.4%,
      rgba(250,246,239,.16) 16.8%,
      rgba(250,246,239,.06) 19.2%,
      rgba(250,246,239,.01) 21.6%,
      rgba(250,246,239,0) 24%,
      rgba(250,246,239,0) 100%);
  }
}
@media (max-width:1080px){
  .fcomp__mast{grid-template-columns:auto minmax(0,1fr);gap:14px 18px;}
  .fcomp__vrule{display:none;}
  .fcomp__ctas{grid-column:1 / -1;justify-content:flex-start;}
  .fcomp__cols{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .fcomp__mast{grid-template-columns:1fr;}
  .fcomp__cols{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .fcomp__lockup span{white-space:normal;text-align:center;}
  .fcomp__base{
    grid-template-columns:1fr;
    grid-template-areas:"pwr" "copy" "accept" "legal";
    justify-items:center;text-align:center;
  }
  .fcomp__pwr a,
  .fcomp__pwr p,
  .fcomp__accept p:first-child,
  .fcomp__accept p:last-child{justify-self:center;}
  .fcomp__accept p:first-child{border-left:0;padding-left:0;justify-content:center;}
  .fcomp__in{padding:0 20px;}
}

/* ============================================================ REVEALS */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
/* sideways reveals only where the shell margin can absorb the offset */
@media (min-width:1021px){
  .rv--l{transform:translateX(-34px);}
  .rv--r{transform:translateX(34px);}
}
.rv.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

/* ============================================================ RESPONSIVE */
@media (max-width:1020px){
  .fcard--a{grid-column:1/span 6;margin-top:0;}
  .fcard--b{grid-column:7/span 6;}
  .fcard--c{grid-column:4/span 6;margin-top:0;}
}
@media (max-width:820px){
  .handover__in,.rateband__in,.contact,.duo{grid-template-columns:minmax(0,1fr);}
  .ratetable th,.ratetable td{padding:13px 13px;font-size:14.5px;}
  .ratetable td strong{font-size:17px;}
  .duo--flip .duo__media{order:0;}
  .steps__grid{grid-template-columns:1fr;gap:34px;}
  .mag,.closing{min-height:0;display:block;}
  .mag__bg,.closing__bg{position:relative;height:52vw;min-height:300px;display:block;}
  .mag__veil,.closing__veil{background:linear-gradient(to bottom,rgba(250,246,239,.25),rgba(250,246,239,.55) 55%,rgba(250,246,239,.9)) !important;}
  .mag__body,.closing__body{width:auto;max-width:none;margin-top:-40px;position:relative;}
  .ft__main .ft__in{grid-template-columns:1fr;}
  .ft__cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ft__triad{grid-template-columns:1fr;justify-items:center;gap:18px;}
  .ft__accept{justify-self:center;}
}
@media (max-width:640px){
  .fcard--a,.fcard--b,.fcard--c{grid-column:1/span 12;}
  .hero h1 .script{margin-left:2px;}
  .closing__body h2{white-space:normal;}
  .mag__body h2{white-space:normal;}
  .closing__body .script{display:inline-block;margin-top:0;margin-left:.08em;}

  .hd__book{display:none;}
  .ft__cols{grid-template-columns:1fr;}
  .cmap iframe{height:320px;}
}
@media (max-width:600px){
  .closing__body h2{font-size:clamp(24px,6.6vw,39px);}
}

/* ---- interior additions ---- */
.speclist{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin-top:18px;font-size:15.5px;}
.speclist dt{font-weight:600;color:var(--navy);}
.speclist dd{color:var(--ink-soft);}
.duo__rates{margin-top:18px;display:flex;gap:26px;flex-wrap:wrap;}
.duo__rates span{font-family:var(--disp);font-size:26px;color:var(--teal);letter-spacing:.02em;}
.duo__rates small{display:block;font-family:var(--text);font-size:13.5px;letter-spacing:.02em;color:var(--ink-soft);margin-top:4px;}
.pagein{padding-top:clamp(44px,6vw,80px);}
.notecard{background:var(--sand-lt);border-radius:16px;padding:24px 28px;margin-top:26px;font-size:15.5px;color:var(--ink-soft);}
.notecard strong{color:var(--navy);}

/* ---- book page: boxless editorial wizard ---- */
.bookpage__wrap{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(230px,.75fr);gap:clamp(30px,4.5vw,72px);align-items:start;}
.bookpage__side{border-left:1px solid rgba(34,51,74,.12);padding-left:clamp(20px,2.5vw,40px);display:grid;gap:clamp(18px,2.5vw,30px);}
.bookpage__side .icard{background:none;box-shadow:none;border-radius:0;padding:0;}
.bookpage__side .icard h3{font-size:15px;letter-spacing:.12em;color:var(--teal);margin-bottom:8px;}
.bookpage .shell{max-width:1280px;}
.bookpage .gcr{background:none;box-shadow:none;border:0;border-radius:0;padding:0;max-width:none;margin:0;}
.bookpage .gcr__step{border-bottom:0;}
.bookpage .gcr__step.is-active{border-bottom:0;}
.bookpage .gcr__title{font-family:var(--disp);font-size:clamp(28px,2.8vw,40px);letter-spacing:-.01em;color:var(--navy);}
.bookpage .gcr__intro{color:var(--ink-soft);margin-top:6px;max-width:52ch;}

/* progress: numbered dots joined by a line */
.bookpage .gcr__steps{display:flex;margin:26px 0 30px;padding:0;list-style:none;max-width:700px;}
.bookpage .gcr__step{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:13.5px;font-weight:600;color:#9AA5B5;position:relative;}
.bookpage .gcr__step-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid #C9CFDA;background:var(--cream);font-size:13.5px;position:relative;z-index:1;transition:all .25s ease;}
.bookpage .gcr__step::before{content:'';position:absolute;top:15px;left:34px;right:8px;height:1.5px;background:#DCD5C7;}
.bookpage .gcr__step:last-child::before{display:none;}
.bookpage .gcr__step.is-active{color:var(--navy);}
.bookpage .gcr__step.is-active .gcr__step-n{border-color:var(--navy);background:var(--navy);color:var(--cream);}
.bookpage .gcr__step.is-done{color:var(--teal);}
.bookpage .gcr__step.is-done .gcr__step-n{border-color:var(--teal);background:var(--teal);color:#fff;}
.bookpage .gcr__step.is-done::before{background:var(--teal);}

/* fields */
.bookpage .gcr-field span{font-weight:600;font-size:14.5px;color:var(--navy);text-transform:none;letter-spacing:0;display:block;margin-bottom:6px;}
.bookpage .gcr-field input,.bookpage .gcr-field textarea{border:1.5px solid #D8D2C6;border-radius:12px;padding:13px 15px;font:16px/1.4 var(--text);color:var(--ink);background:var(--white);width:100%;box-sizing:border-box;transition:border-color .18s ease,box-shadow .18s ease;}
.bookpage .gcr-field input:focus,.bookpage .gcr-field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,138,126,.14);}
.bookpage .gcr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.bookpage .gcr-grid--3{grid-template-columns:1.2fr 1fr .8fr;}
.bookpage .gcr-mode{background:var(--sand-lt);}
.bookpage .gcr-mode__btn.is-on{background:var(--navy);color:var(--cream);}

/* cart choice: photo rows */
.bookpage .gcr-types{border:0;padding:0;margin:20px 0 0;}
.bookpage .gcr-types legend{font-weight:600;font-size:14.5px;color:var(--navy);margin-bottom:10px;}
.bookpage .gcr-type{display:flex;align-items:center;gap:16px;border:1.5px solid #DED8CC;border-radius:16px;padding:10px 18px 10px 10px;margin-top:10px;cursor:pointer;background:var(--white);transition:all .2s ease;}
.bookpage .gcr-type:hover{border-color:var(--foam);transform:translateY(-1px);box-shadow:0 8px 22px rgba(34,51,74,.08);}
.bookpage .gcr-type.is-on{border-color:var(--navy);box-shadow:0 10px 26px rgba(22,51,95,.12);}
.bookpage .gcr-type input{position:absolute;opacity:0;pointer-events:none;}
.bookpage .gcr-type__pic{flex:0 0 92px;height:64px;border-radius:10px;overflow:hidden;background:var(--sand-lt);}
.bookpage .gcr-type__pic img{width:100%;height:100%;object-fit:cover;object-position:center 62%;}
.bookpage .gcr-type__txt{display:flex;flex-direction:column;gap:2px;}
.bookpage .gcr-type__name{font-weight:600;color:var(--navy);font-size:16.5px;}
.bookpage .gcr-type__meta{color:var(--ink-soft);font-size:14px;}
.bookpage .gcr-type__rate{margin-left:auto;font-family:var(--disp);color:var(--teal);font-size:19px;letter-spacing:.02em;white-space:nowrap;}

/* receipt lines: quote + payment summary */
.bookpage .gcr-quote{margin-top:22px;border:1.5px solid rgba(34,51,74,.16);border-radius:14px;padding:20px 26px;background:none;}
.bookpage .gcr-quote__row{display:flex;justify-content:space-between;padding:5px 0;font-size:15.5px;color:var(--ink);}
.bookpage .gcr-quote__row strong{font-family:var(--disp);font-size:20px;color:var(--teal);letter-spacing:.02em;}
.bookpage .gcr-quote__row--muted,.bookpage .gcr-quote__avail{color:var(--ink-soft);font-size:14px;}
.bookpage .gcr-quote__no{color:#A33B2E;font-weight:600;}
.bookpage .gcr-receipt{border:1.5px solid rgba(34,51,74,.16);border-radius:14px;padding:20px 26px 16px;margin-bottom:22px;}
.bookpage .gcr-receipt__row{display:flex;justify-content:space-between;padding:5px 0;font-size:15.5px;color:var(--ink-soft);}
.bookpage .gcr-receipt__row span:last-child{color:var(--ink);}
.bookpage .gcr-receipt__row--total{border-top:1.5px solid rgba(34,51,74,.14);margin-top:8px;padding-top:12px;font-weight:600;color:var(--navy);}
.bookpage .gcr-receipt__row--total span:last-child{font-family:var(--disp);font-size:24px;color:var(--teal);letter-spacing:.02em;}
.bookpage .gcr-summary{background:var(--sand-lt);border-radius:14px;padding:18px 22px;margin-bottom:18px;position:relative;color:var(--ink);}
.bookpage .gcr-summary__amt{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-family:var(--disp);font-size:26px;color:var(--teal);letter-spacing:.02em;}


/* optional tag + inline validation */
.bookpage .gcr-opt{font-style:normal;font-weight:600;font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);background:var(--sand-lt);padding:2px 9px;border-radius:999px;margin-left:7px;display:inline-block;vertical-align:2px;}
.bookpage .gcr-field.is-invalid input{border-color:#C25B4C;box-shadow:0 0 0 3px rgba(194,91,76,.13);}
.bookpage .gcr-field__err{display:block;font-style:normal;font-size:13px;font-weight:600;color:#A33B2E;margin-top:6px;}

/* card brands */
.bookpage .gcr-brands{display:flex;gap:8px;margin:4px 0 14px;}
.bookpage .gcr-brand{width:48px;height:30px;opacity:.5;transition:all .25s ease;filter:saturate(.6);}
.bookpage .gcr-brand svg{width:100%;height:100%;display:block;}
.bookpage .gcr-brand.is-on{opacity:1;filter:none;transform:translateY(-2px);}
.bookpage .gcr-brand.is-dim{opacity:.22;}
.bookpage .gcr-field__wrap{position:relative;display:block;}
.bookpage .gcr-field__brand{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:44px;height:27px;pointer-events:none;}
.bookpage .gcr-field__brand svg{width:100%;height:100%;display:block;}
.bookpage .gcr-field--card input{padding-right:66px;}

/* buttons, errors, confirmation */
.bookpage .gcr-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--text);font-weight:600;font-size:15px;letter-spacing:.03em;padding:15px 34px;border-radius:999px;border:1.5px solid var(--navy);background:var(--navy);color:var(--cream);cursor:pointer;transition:all .22s ease;}
.bookpage .gcr-btn:hover{background:var(--deep);border-color:var(--deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,36,69,.2);}
.bookpage .gcr-btn[disabled]{opacity:.55;cursor:wait;transform:none;box-shadow:none;}
.bookpage .gcr-btn--ghost{background:transparent;color:var(--navy);}
.bookpage .gcr-btn--ghost:hover{background:var(--navy);color:var(--cream);}
.bookpage .gcr-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;}
.bookpage .gcr__err{background:#FBEEEC;color:#A33B2E;border-radius:12px;padding:12px 18px;margin:14px 0 0;font-weight:600;}
.bookpage .gcr__panel > .gcr__err + .gcr-actions{margin-top:14px;}
.bookpage .gcr-pay__secure{font-size:13.5px;color:var(--ink-soft);margin-top:12px;}
.bookpage .gcr-done{text-align:center;padding:16px 0;}
.bookpage .gcr-done__tick{width:64px;height:64px;margin:0 auto 14px;display:grid;place-items:center;background:var(--teal);color:#fff;border-radius:50%;font-size:30px;}
.bookpage .gcr-done__h{font-family:var(--disp);font-size:clamp(26px,3vw,36px);letter-spacing:-.01em;color:var(--navy);}
.bookpage .gcr-done__ref{color:var(--ink-soft);margin-top:6px;}
.bookpage .gcr-done__list{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;max-width:380px;margin:18px auto 0;text-align:left;}
.bookpage .gcr-done__list dt{font-weight:600;color:var(--navy);}
.bookpage .gcr-done__list dd{color:var(--ink-soft);}
.bookpage .gcr-done__note{margin-top:16px;color:var(--ink-soft);}

@media (max-width:900px){
  .bookpage__wrap{grid-template-columns:minmax(0,1fr);}
  .bookpage__side{border-left:0;padding-left:0;border-top:1px solid rgba(34,51,74,.12);padding-top:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
  .bookpage .gcr__step{font-size:0;}
  .bookpage .gcr__step .gcr__step-n{font-size:13.5px;}
}
@media (max-width:640px){
  .bookpage .gcr-grid,.bookpage .gcr-grid--3{grid-template-columns:minmax(0,1fr);}
  .bookpage .gcr-type__pic{flex-basis:72px;height:54px;}
}

/* ---- cart 360 spin viewer ---- */
.spin{background:var(--white);border-radius:22px;box-shadow:0 24px 60px rgba(34,51,74,.13);padding:clamp(18px,3vw,40px);}
.spin__stage{position:relative;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;border-radius:14px;background:radial-gradient(ellipse 75% 60% at 50% 46%,#FFFFFF 0%,#F4F1EA 68%,#EDE8DD 100%);overflow:hidden;outline:none;}
.spin__stage:focus-visible{box-shadow:0 0 0 3px var(--foam);}
.spin.is-grabbing .spin__stage{cursor:grabbing;}
.spin__img{width:100%;height:auto;display:block;position:relative;z-index:1;pointer-events:none;}
.spin__shadow{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:56%;height:26px;background:radial-gradient(ellipse at center,rgba(34,51,74,.22),rgba(34,51,74,0) 70%);z-index:0;}
.spin__bar{display:flex;align-items:center;gap:14px;margin-top:16px;}
.spin__play{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--navy);background:var(--navy);color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:all .2s ease;}
.spin__play svg{width:16px;height:16px;}
.spin__play:hover{background:var(--deep);transform:translateY(-1px);}
.spin__hint{font-size:14.5px;color:var(--ink-soft);}
.spin__load{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;background:rgba(22,51,95,.88);color:var(--cream);font-size:13.5px;font-weight:600;letter-spacing:.02em;padding:8px 18px;border-radius:999px;white-space:nowrap;}

/* ---- boxless 360 viewer + the Bay (home Tempo section) ----
   The cart is the focal point: the stage crops to a 1200/1080 window so cover
   trims the dead width and the silhouette fills ~77% of the frame. Grounded by
   a contact shadow at the tyre line over a faint sand oval. No reflection. */
/* Watercolour palm fronds leaning in from the top right. */
.bay{position:relative;padding-bottom:0;}
/* Frond overlay on the cart side. Same artwork as Keys in hand, mirrored so the
   stems run off the right edge and the fronds sweep inward. .bay__in is given a
   stacking position so the copy and the cart stay above it, since an absolutely
   positioned span otherwise paints over static in-flow content. */
.bay__palm{
  position:absolute;z-index:0;left:auto;right:0;top:0;bottom:0;pointer-events:none;
  width:clamp(160px,20vw,330px);opacity:.2;transform:scaleX(-1);
}
.bay__palm img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:left top;
}
.bay__in{position:relative;z-index:1;}

.intro + .bay,.handover + .bay{padding-top:var(--gap);}

/* The badge's drop shadow reaches about 13px below its box, but .handover ends on
   exactly the photograph's bottom edge and the section is overflow:hidden, so the
   shadow was being sliced off in a straight line. 16px of bottom padding clears
   it, and the rule below takes the same 16px back off the next section's top pad
   so the gap between the two is unchanged. */
.handover{padding-bottom:16px;}
.handover + .bay{padding-top:calc(var(--gap) - 16px);}
/* Copy and cart read far apart because the perceived gap is three things, not one:
   ~21px of unused width in the copy column, the grid gap, and ~72px of transparent
   frame baked into the cart photograph either side of the vehicle. Nothing here is
   a margin. The gap is the dedicated control for the space between the columns, and
   the copy column is taken down to just wider than its longest line, which hands the
   difference to the cart. Verified 861 to 1440: no line wraps differently. */
.bay__in{display:grid;grid-template-columns:minmax(0,.70fr) minmax(0,1.30fr);gap:clamp(8px,0.9vw,14px);align-items:center;}
.bay__copy{--bay-copy-measure:31ch;}
.bay__copy h2{
  display:block;max-width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;margin:0;
}
.bay__copy h2 .script{display:block;width:max-content;font-size:1.08em;line-height:.86;margin:.12em 0 0;transform:translateY(.04em);position:relative;}
.bay__copy h2 .script:after{
  content:"";position:absolute;left:5%;right:10%;bottom:-.08em;height:2px;
  background:#bd9652;border-radius:50%;transform:rotate(-4deg);
}
.bay__copy p{font-size:clamp(15.5px,1.25vw,17px);line-height:1.7;color:var(--ink-soft);max-width:31ch;margin:30px 0 0;}
.bay__copy>p:first-of-type{width:min(100%,var(--bay-copy-measure));max-width:none;}
/* The rate is a struck-seal card: a gold medallion straddles the top edge,
   the price keeps the site's teal, and the small type sits on #457A6F so
   10.5-14.5px clears 4.5:1 on the near-white card. */
.bay__card{
  position:relative;display:block;width:min(100%,var(--bay-copy-measure));text-align:center;
  font-size:clamp(15.5px,1.25vw,17px);
  margin:clamp(44px,4.6vw,54px) 0 0;padding:38px 16px 18px;
  border:1px solid rgba(181,137,74,.5);border-radius:18px;
  /* same raised surface as .kdrive__steps li and the handover facts: a gradient
     down the face, an inset light edge over an inset gold edge, and a tight
     contact shadow under the soft lift. */
  background:
    linear-gradient(180deg, rgba(255,252,247,.97) 0%, rgba(250,246,239,.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,252,247,.9),
    inset 0 -1px 0 rgba(181,137,74,.14),
    0 1px 2px rgba(40,53,67,.07),
    0 12px 24px -10px rgba(40,53,67,.22);
}
/* Drawn the way the compass on the handover art is: engraved gold on paper,
   inside two fine hairline rings. No struck-metal gradient. */
.bay__medal{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:48px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  /* domed the way .kdrive__steps span is: an off centre radial highlight, an
     inset catch light at the top and an inset gold shade at the bottom, so the
     medal reads as a struck disc rather than a flat circle. */
  background:
    radial-gradient(circle at 32% 26%,
      rgba(255,252,247,1) 0%, rgba(250,246,239,.96) 58%, rgba(236,222,198,.92) 100%);
  box-shadow:
    0 0 0 4px var(--cream),
    0 2px 3px rgba(40,53,67,.12),
    0 8px 16px -11px rgba(104,80,42,.4),
    inset 0 0 0 1px rgba(138,107,51,.5),
    inset 0 1.5px 1px rgba(255,252,247,.85),
    inset 0 -2px 3px rgba(181,137,74,.2);
}
.bay__medal::before{
  content:"";position:absolute;inset:4px;border-radius:50%;
  border:1px solid rgba(176,138,74,.3);
}
.bay__medal svg{position:relative;width:54%;height:54%;transform:translateY(3%);}
.bay__label{
  display:block;font-family:var(--text);font-size:10px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#457A6F;
}
.bay__copy .bay__rate{
  display:flex;align-items:baseline;justify-content:center;gap:7px;
  margin:8px 0 0;max-width:none;
  font-family:var(--disp);font-size:clamp(32px,3.4vw,40px);color:var(--teal);
  line-height:1;letter-spacing:.015em;
}
.bay__copy .bay__rate i{
  font-family:var(--text);font-style:normal;font-size:13px;font-weight:600;
  color:#457A6F;letter-spacing:.01em;
}
.bay__note{
  display:block;margin-top:11px;font-family:var(--text);font-size:12px;
  color:var(--navy);letter-spacing:.01em;
}
.bay__copy .bay__more{
  margin-top:clamp(22px,2.4vw,30px);max-width:none;
  display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap;
}
.bay__more-a{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--navy);padding:5px 0;text-underline-offset:5px;}
.bay__more-a svg{flex:none;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.bay__more-a:hover svg{transform:translateX(3px);}
.bay__more-b{font-size:14px;font-weight:500;color:var(--ink-soft);padding:5px 0;text-decoration:none;}
.bay__more-b:hover{color:var(--navy);text-decoration:underline;}

.bay__rig{position:relative;padding-bottom:2%;}
.bay .spino{display:block;position:relative;z-index:2;max-width:none;margin:0;}
.bay .spino__stage{width:100%;aspect-ratio:1200/1080;border-radius:0;}
.bay .spino__img{width:100%;height:100%;object-fit:cover;object-position:center center;}
/* the cart's optical centre sits at 46.9% of the rig width from the top */
.bay .spino__arrow{
  position:absolute;top:0;margin-top:46.9%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-width:1px;
  background:rgba(250,246,239,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.bay .spino__arrow svg{width:17px;height:17px;}
.bay .spino__arrow:hover{background:var(--navy);color:var(--cream);border-color:var(--navy);transform:translateY(-50%) scale(1.05);}
.bay .spino__arrow--l{left:3%;}
.bay .spino__arrow--r{right:3%;}
.bay .spino__hint{
  position:relative;z-index:5;margin-top:5.2%;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:13.5px;font-weight:400;letter-spacing:normal;
  color:var(--ink-soft);line-height:1.65;
}
.bay .spino__hint::before,
.bay .spino__hint::after{
  content:"";flex:none;width:34px;height:1px;
  background:linear-gradient(to right,rgba(181,137,74,0),rgba(181,137,74,.58));
}
.bay .spino__hint::after{
  background:linear-gradient(to left,rgba(181,137,74,0),rgba(181,137,74,.58));
}

/* faint sand oval so the cart is presented rather than floating */
.bay__pool{
  position:absolute;left:-2%;right:-2%;top:0;margin-top:17%;aspect-ratio:1/.58;
  z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(240,233,218,.9) 0%, rgba(240,233,218,.62) 40%,
    rgba(240,233,218,.26) 62%, rgba(240,233,218,0) 78%);
}
/* reflection, re-seated for the 1200/1080 stage: the tyre line is at 87.6% of
   the stage, i.e. 78.8% of the rig width, the same line the contact shadow sits
   on. translateY runs first in the scaled space, so it must follow scaleY. */
.bay__mirror{
  position:absolute;left:0;top:0;margin-top:78.8%;width:100%;aspect-ratio:1200/1080;
  z-index:0;transform:scaleY(-.34) translateY(-100%);transform-origin:center top;
  pointer-events:none;overflow:hidden;
}
.bay__mirror img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center center;opacity:.34;will-change:transform,opacity;
}
.bay__mirror img:first-child{position:relative;}
.bay__mirror img.bay__mirror-img--blend{opacity:0;}
.bay__mirrorveil{
  position:absolute;inset:0;
  /* the element is flipped, so element-top paints at the visual BOTTOM: the
     ramp runs 50% -> 98%, leaving the reflection clear at the tyre line and
     fully veiled well above the caption */
  background:linear-gradient(to bottom,
    rgba(250,246,239,1) 0%,     rgba(250,246,239,1) 50%,     rgba(250,246,239,.991) 54.8%,
    rgba(250,246,239,.942) 59.6%, rgba(250,246,239,.837) 64.4%, rgba(250,246,239,.683) 69.2%,
    rgba(250,246,239,.5) 74%,     rgba(250,246,239,.317) 78.8%, rgba(250,246,239,.163) 83.6%,
    rgba(250,246,239,.058) 88.4%, rgba(250,246,239,.009) 93.2%, rgba(250,246,239,0) 98%);
}
/* contact shadow on the tyre line: 87.6% of the 1200/1080 stage */
.bay__floor{
  position:absolute;left:15%;right:15%;top:0;margin-top:78.8%;
  height:clamp(18px,2.4vw,32px);transform:translateY(-52%);z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(34,51,74,.30) 0%, rgba(34,51,74,.17) 30%, rgba(34,51,74,.06) 52%,
    rgba(34,51,74,.015) 68%, rgba(34,51,74,0) 80%);
}
@media (max-width:900px){
  .bay__palm{width:min(34vw,210px);}
  .bay__in{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,28px);}
  .bay__copy{--bay-copy-measure:380px;}
  .bay__rig{max-width:560px;margin-inline:auto;}
  .bay .spino__arrow--l{left:1%;}
  .bay .spino__arrow--r{right:1%;}
}
@media (max-width:640px){
  .bay .spino__arrow{width:42px;height:42px;}
  .bay__floor{left:11%;right:11%;}
}
@media (max-width:520px){
  .bay__copy h2{font-size:clamp(36px,10vw,48px);}
  .bay__copy p{margin-top:26px;}
  .bay__card{width:min(100%,var(--bay-copy-measure));max-width:none;padding:36px 14px 16px;}
}
.spino{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(4px,2vw,20px);max-width:900px;margin:0 auto;}
.spino__stage{position:relative;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;outline:none;border-radius:12px;overflow:hidden;}
.spino__stage:focus-visible{box-shadow:0 0 0 3px var(--foam);}
.spino.is-grabbing .spino__stage{cursor:grabbing;}
.spino__img{width:100%;height:auto;display:block;position:relative;z-index:1;pointer-events:none;}
.spino__img--blend{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:2;opacity:0;will-change:transform,opacity;}
.spino__shadow{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);width:52%;height:24px;background:radial-gradient(ellipse at center,rgba(34,51,74,.20),rgba(34,51,74,0) 70%);z-index:0;}
.spino__arrow{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--navy);background:transparent;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:all .2s ease;}
.spino__arrow svg{width:19px;height:19px;}
.spino__arrow:hover{background:var(--navy);color:var(--cream);transform:translateY(-1px);}
.spino__hint{grid-column:1/-1;text-align:center;font-size:13.5px;color:var(--ink-soft);margin-top:2px;}
@media (max-width:640px){
  .spino{gap:6px;}
  .spino__arrow{width:42px;height:42px;}
}

/* ---- fee breakdown, secure bar, processing overlay ---- */
.bookpage .gcr-quote__row--fee,.bookpage .gcr-receipt__row--fee{flex-wrap:wrap;position:relative;}
.gcr-feebtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;}
.gcr-feebtn svg{width:15px;height:15px;color:var(--teal);}
.gcr-feebtn:hover{color:var(--teal);}
.gcr-feepop{flex-basis:100%;display:block;background:var(--sand-lt);border-radius:10px;padding:10px 14px;margin-top:8px;}
.gcr-feepop[hidden]{display:none;}
.gcr-feepop__row{display:flex;justify-content:space-between;padding:3px 0;font-size:14px;color:var(--ink);}
.gcr-feepop__row--note{color:var(--ink-soft);font-size:13px;justify-content:flex-start;}
.gcr-securebar{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;background:#F2F5F1;border:1px solid rgba(79,138,126,.25);border-radius:12px;}
.gcr-securebar__lock{width:20px;height:20px;color:var(--teal);flex:0 0 auto;}
.gcr-securebar__txt{font-size:13.5px;color:var(--ink-soft);line-height:1.35;}
.gcr-securebar__txt strong{display:block;color:var(--navy);font-size:14px;}
.gcr-securebar__cards{margin-left:auto;display:flex;gap:6px;}
.gcr-securebar__card{width:38px;height:24px;opacity:.85;}
.gcr-securebar__card svg{width:100%;height:100%;display:block;}
.gcr-paywait{position:fixed;inset:0;z-index:200;background:rgba(14,36,69,.82);backdrop-filter:blur(4px);display:grid;place-items:center;animation:gcrFade .25s ease;}
@keyframes gcrFade{from{opacity:0}to{opacity:1}}
.gcr-paywait__card{position:relative;background:var(--cream);border-radius:22px;padding:44px 48px 36px;max-width:400px;width:calc(100vw - 40px);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.gcr-paywait__ring{display:block;width:74px;height:74px;margin:0 auto 6px;border-radius:50%;border:4px solid var(--sand-lt);border-top-color:var(--teal);animation:gcrSpin 1s linear infinite;}
@keyframes gcrSpin{to{transform:rotate(360deg)}}
.gcr-paywait__cart{position:absolute;top:60px;left:50%;width:54px;height:auto;transform:translateX(-50%);animation:gcrBob 1.6s ease-in-out infinite;}
@keyframes gcrBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.gcr-paywait__card h3{font-family:var(--disp);font-size:24px;letter-spacing:0;color:var(--navy);margin-top:18px;}
.gcr-paywait__card p{color:var(--ink-soft);font-size:15px;margin-top:8px;}
.gcr-paywait__warn{font-weight:600;color:#A33B2E !important;}

/* ---- rental documents on the payment step ---- */
.gcr-docs{margin-top:18px;border-top:1px solid rgba(34,51,74,.12);padding-top:16px;}
.gcr-docack{display:flex;align-items:flex-start;gap:11px;margin-bottom:10px;cursor:pointer;font-size:15px;color:var(--ink);}
.gcr-docack input{width:19px;height:19px;margin-top:2px;accent-color:var(--teal);cursor:pointer;flex:0 0 auto;}
.gcr-docack a{font-weight:600;}
.gcr-doclinks{font-size:14px;color:var(--ink-soft);margin-top:6px;}
.gcr-doclinks a{font-weight:600;}
.gcr-docmodal{position:fixed;inset:0;z-index:210;background:rgba(14,36,69,.72);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;animation:gcrFade .22s ease;}
.gcr-docmodal__card{background:var(--cream);border-radius:18px;max-width:760px;width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.gcr-docmodal__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;border-bottom:1px solid rgba(34,51,74,.12);}
.gcr-docmodal__head h3{font-family:var(--disp);font-size:22px;letter-spacing:0;color:var(--navy);}
.gcr-docmodal__x{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--navy);background:transparent;color:var(--navy);font-size:22px;line-height:1;cursor:pointer;transition:all .2s ease;}
.gcr-docmodal__x:hover{background:var(--navy);color:var(--cream);}
.gcr-docmodal__body{padding:22px 26px;overflow-y:auto;font-size:15.5px;line-height:1.65;color:var(--ink);}
.gcr-docmodal__body h1,.gcr-docmodal__body h2{font-family:var(--disp);color:var(--navy);letter-spacing:0;font-size:1.35em;margin:18px 0 8px;}
.gcr-docmodal__body p{margin:8px 0;}
.gcr-docmodal__body ul,.gcr-docmodal__body ol{margin:8px 0 8px 22px;}
.gcr-docmodal__body img{max-width:100%;border-radius:10px;}
.bookpage .gcr-payerr{background:#FBEEEC;border:1px solid rgba(163,59,46,.28);color:#A33B2E;border-radius:12px;padding:11px 16px;margin-top:14px;font-weight:600;font-size:14.5px;line-height:1.45;}

/* ---- returning guest prompt + booking history on confirmation ---- */
.gcr-acct{position:fixed;inset:0;z-index:220;background:rgba(14,36,69,.72);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;animation:gcrFade .22s ease;}
.gcr-acct__card{background:var(--cream);border-radius:20px;max-width:480px;width:100%;padding:clamp(26px,4vw,38px);box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:left;}
.gcr-acct__title{font-family:var(--disp);font-size:28px;letter-spacing:0;color:var(--navy);margin-bottom:10px;}
.gcr-acct__text{font-size:15.5px;color:var(--ink-soft);line-height:1.6;}
.gcr-acct__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
/* Modal is on document.body (outside .bookpage), so bookpage button colors never applied —
   plugin .gcr-btn uses white text + --gcr-accent which is undefined here → invisible text. */
.gcr-acct .gcr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--text);font-weight:600;font-size:15px;letter-spacing:.03em;
  padding:14px 26px;border-radius:999px;cursor:pointer;transition:all .22s ease;
  border:1.5px solid var(--navy);background:var(--navy);color:var(--cream);
  appearance:none;-webkit-appearance:none;text-decoration:none;
}
.gcr-acct .gcr-btn:hover{background:var(--deep);border-color:var(--deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,36,69,.2);color:var(--cream);}
.gcr-acct .gcr-btn[disabled]{opacity:.55;cursor:wait;transform:none;box-shadow:none;}
.gcr-acct .gcr-btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy);}
.gcr-acct .gcr-btn--ghost:hover{background:var(--navy);color:var(--cream);}
.gcr-acct a.gcr-btn{color:var(--cream);}

.gcr-acct__small{margin-top:14px;font-size:13.5px;color:var(--ink-soft);}
.gcr-acct__small a{font-weight:600;}
.gcr-acct__note{margin-top:14px;background:#F2F5F1;border:1px solid rgba(79,138,126,.25);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ink);}
.bookpage .gcr-done__acct{margin-top:26px;padding-top:22px;border-top:1px solid rgba(34,51,74,.12);text-align:center;}
.bookpage .gcr-done__acct-title{font-weight:700;color:var(--navy);font-size:16px;}
.bookpage .gcr-done__acct-text{color:var(--ink-soft);font-size:14.5px;margin-top:4px;}
.bookpage .gcr-done__acct-actions{display:flex;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap;}

/* ============================================================
   HOMEPAGE · KEYS IN HAND JOURNEY
   Three connected destination cards on the coastal paper field.
   ============================================================ */
.steps--journey{
  position:relative;
  min-height:clamp(680px,40vw,720px);
  margin-top:0;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse 42% 54% at 48% 42%,rgba(255,253,247,.98),rgba(255,249,238,0) 74%),
    linear-gradient(112deg,#f3e5d3 0%,#faefdf 33%,#fff8ec 61%,#f5e5cf 100%);
  color:var(--ink);
}
.steps--journey .steps__veil{
  position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none;
  height:clamp(220px,22vw,300px);
  background:var(--join-top);
}
.steps--journey .steps__veil--foot{
  top:auto;bottom:0;z-index:6;
  height:clamp(180px,18vw,260px);
  background:var(--join-bottom-edge);
}
.steps--journey .steps__canvas{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.steps--journey .steps__canvas:before{
  content:"";position:absolute;inset:2% 17% 7% 14%;
  background:rgba(255,249,238,.6);border-radius:44% 56% 40% 60%/55% 42% 58% 45%;
  filter:blur(30px);transform:rotate(-3deg);
}
.steps--journey .steps__water{
  position:absolute;z-index:0;right:-3%;bottom:-22%;width:min(64vw,1120px);aspect-ratio:1672/941;
  background:url('img/art/keys-watercolor-tide-v1.webp') right bottom/contain no-repeat;
  opacity:.26;filter:saturate(.76) contrast(.94);mix-blend-mode:multiply;
}
.steps--journey .steps__watercolor-corner{
  position:absolute;z-index:1;top:-7%;right:-3%;width:min(43vw,760px);aspect-ratio:3/2;
  background:url('img/art/keys-watercolor-corner-v1.webp') top right/contain no-repeat;
  opacity:.3;filter:saturate(.82) contrast(.94);mix-blend-mode:multiply;
}
.steps--journey .steps__contours{position:absolute;z-index:1;stroke:#bf9354;stroke-width:1.05;opacity:.14;}
.steps--journey .steps__contours--low{width:33%;height:auto;left:-5%;bottom:-5%;transform:rotate(-9deg);}
.steps--journey .steps__journey{
  position:relative;z-index:2;width:100%;max-width:1660px;min-height:inherit;
  margin:0 auto;padding:clamp(34px,2.5vw,50px) clamp(28px,4vw,76px) 54px;
}
.steps--journey .steps__heading{text-align:center;position:relative;z-index:5;}
.steps--journey .steps__palmmark{
  display:block;width:132px;height:34px;margin:0 auto 18px;
  stroke:#bd9652;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;
}
.steps--journey h2{
  max-width:none;margin:0;color:var(--navy);text-align:center;
  font-size:clamp(32px,4.2vw,54px);line-height:.93;letter-spacing:-.025em;
}
.steps--journey h2 .script{
  display:inline-block;margin-left:.12em;color:var(--teal);font-size:1em;
  transform:translateY(.08em) rotate(-1deg);position:relative;
}
.steps--journey h2 .script:after{
  content:"";position:absolute;left:5%;right:10%;bottom:-.08em;height:2px;
  background:#bd9652;border-radius:50%;transform:rotate(-4deg);
}
.steps--journey .steps__route{
  position:relative;z-index:2;height:520px;max-width:1260px;margin:16px auto 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,370px));
  justify-content:center;align-items:end;gap:clamp(30px,2.5vw,44px);
}
.steps--journey .step{
  position:relative;z-index:2;width:100%;height:500px;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;overflow:visible;text-align:center;
  transition:transform .34s cubic-bezier(.2,.72,.25,1),z-index 0s .34s;
  transform:none;
}
.steps--journey .step--two{height:500px;z-index:3;}
.steps--journey .step__shape{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 3px 5px rgba(92,64,32,.07)) drop-shadow(0 18px 28px rgba(76,52,28,.14)) drop-shadow(0 42px 50px rgba(76,52,28,.08));
  transition:filter .34s cubic-bezier(.2,.72,.25,1);
}
.steps--journey .step__shape-outer{
  fill:#fffdf8;fill:url(#step-paper);stroke:rgba(73,75,72,.14);stroke-width:1.25;
  filter:url(#step-grain);
}
.steps--journey .step__shape-inner{
  fill:none;stroke:rgba(181,137,74,.28);stroke-width:.85;
  vector-effect:non-scaling-stroke;
  transition:stroke .3s ease;
}
.steps--journey .step__content{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;
  padding:50px clamp(32px,2vw,40px) 20px;
}
.steps--journey .step--two .step__content{padding:50px clamp(32px,2vw,40px) 20px;}
.steps--journey .step__n{
  position:relative;inset:auto;display:grid;place-items:center;width:52px;height:52px;
  padding:0 0 3px 1px;border:1px solid rgba(181,137,74,.4);border-radius:50%;
  background:linear-gradient(180deg,#fffefb 0%,#f3ead6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 2px rgba(120,84,40,.08),0 1px 2px rgba(76,52,28,.08);
  font-family:var(--disp);font-size:40px;font-weight:400;line-height:1;color:#bd9652;
  letter-spacing:0;text-align:center;-webkit-text-stroke:0;pointer-events:none;
}
.steps--journey .step__n:after{display:none;}
.steps--journey .step__divider{
  width:138px;height:20px;margin:14px auto 6px;stroke:#c19b59;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.steps--journey .step h3{
  max-width:15ch;margin:0;padding:0;color:var(--navy);font-family:var(--disp);font-weight:400;
  font-size:clamp(24px,1.55vw,30px);line-height:1.13;letter-spacing:-.01em;text-wrap:balance;
}
.steps--journey .step h3:after{display:none;}
.steps--journey .step__rule{display:block;width:30px;height:1.5px;margin:14px auto 13px;background:var(--teal);opacity:.8;}
.steps--journey .step p{
  max-width:32ch;margin:0;color:#47515a;font-size:clamp(14px,.82vw,15.5px);line-height:1.62;
  letter-spacing:.004em;text-wrap:pretty;
}
.steps--journey .step--two p{max-width:34ch;}
.steps--journey .step--one:after,.steps--journey .step--three:after{
  display:none;
}
.steps--journey .step__art{
  display:block;flex:none;margin:auto auto 6px;overflow:visible;
}
.steps--journey .step__art-wash{fill:rgba(104,158,149,.12);stroke:none;}
.steps--journey .step__art-soft{stroke:rgba(79,143,136,.22);stroke-width:.8;}
.steps--journey .step__art-gold{stroke:rgba(181,137,74,.72);stroke-width:.95;}
.steps--journey .step__art-fill{fill:rgba(218,231,225,.34);stroke:currentColor;}
.steps--journey .step__art-seal,.steps--journey .step__art-wheel{fill:#fffdf8;stroke:currentColor;}
.steps--journey .step__art--calendar{width:170px;height:128px;}
.steps--journey .step--one .step__art,.steps--journey .step--three .step__art{margin-bottom:20px;}
.steps--journey .step__art--resort{width:286px;height:148px;margin-bottom:0;}
.steps--journey .step__art--ride{width:292px;height:141px;margin-bottom:14px;}

@media(hover:hover) and (pointer:fine){
  .steps--journey .step:hover{
    z-index:6;transform:translateY(-8px);
    transition:transform .34s cubic-bezier(.2,.72,.25,1),z-index 0s;
  }
  .steps--journey .step:hover .step__shape{
    filter:drop-shadow(0 8px 10px rgba(92,64,32,.08)) drop-shadow(0 28px 40px rgba(76,52,28,.18)) drop-shadow(0 50px 60px rgba(76,52,28,.1));
  }
  .steps--journey .step:hover .step__shape-inner{stroke:rgba(181,137,74,.55);}
}

@media(max-width:1180px) and (min-width:861px){
  .steps--journey{min-height:680px;}
  .steps--journey .steps__journey{padding-inline:24px;}
  .steps--journey .steps__route{height:470px;grid-template-columns:repeat(3,minmax(0,300px));gap:22px;margin-top:12px;}
  .steps--journey .step,.steps--journey .step--two{height:450px;}
  .steps--journey .step__content,.steps--journey .step--two .step__content{padding:44px 24px 18px;}
  .steps--journey .step p{font-size:13.2px;line-height:1.58;}
  .steps--journey .step__art--resort,.steps--journey .step__art--ride{width:250px;}
}

@media(max-width:860px){
  .steps--journey{min-height:0;padding-bottom:0;background:linear-gradient(150deg,#f4e7d5,#fff8ec 52%,#f4e2ca);}
  .steps--journey .steps__journey{min-height:0;padding:calc(var(--gap) - clamp(0px,2.8vw,40px)) 20px 74px;}
  .steps--journey .steps__palmmark{width:110px;margin-bottom:14px;}
  .steps--journey h2{line-height:.98;}
  .steps--journey h2 .script{display:inline-block;width:auto;margin-left:.12em;}
  .steps--journey .steps__route{height:auto;margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:42px;}
  .steps--journey .step,.steps--journey .step--two{width:min(100%,390px);height:520px;flex:none;}
  .steps--journey .step,.steps--journey .step:hover{transform:none;}
  .steps--journey .step__content,.steps--journey .step--two .step__content{padding:42px 34px 22px;}
  .steps--journey .step__n{font-size:58px;}
  .steps--journey .step h3{font-size:28px;}
  .steps--journey .step p{font-size:15px;}
  .steps--journey .step__art--calendar{width:172px;height:110px;}
  .steps--journey .step__art--resort,.steps--journey .step__art--ride{width:min(100%,315px);}
  .steps--journey .steps__water{width:138%;height:auto;right:-48%;bottom:-2%;opacity:.16;}
  .steps--journey .steps__watercolor-corner{top:-1%;right:-48%;width:135%;opacity:.18;}
  .steps--journey .steps__contours--low{width:80%;left:-30%;}
}

@media(max-width:420px){
  .steps--journey .steps__journey{padding-inline:12px;}
  .steps--journey .step,.steps--journey .step--two{width:100%;height:520px;}
  .steps--journey .step__content,.steps--journey .step--two .step__content{padding-inline:27px;}
  .steps--journey .step p{font-size:14px;line-height:1.46;}
}

/* Editorial journey v2 — open-number cadence inspired by the restraint of
   Belle Pointe's access section, interpreted in Salty Karts' coastal system. */
.steps--journey{
  min-height:0;
  background:
    radial-gradient(ellipse 54% 68% at 50% 48%,rgba(255,253,248,.96),rgba(255,250,241,0) 74%),
    linear-gradient(116deg,#f4e7d6 0%,#fbf1e3 38%,#fff9ee 65%,#f3e3ce 100%);
}
.steps--journey .steps__veil{height:clamp(150px,16vw,220px);}
.steps--journey .steps__veil--foot{z-index:1;height:clamp(170px,17.5vw,250px);}
.steps--journey .steps__canvas:before{inset:7% 12% 8%;filter:blur(46px);opacity:.8;}
.steps--journey .steps__water{right:-8%;bottom:-27%;width:min(58vw,940px);opacity:.15;}
.steps--journey .steps__watercolor-corner{top:-10%;right:-7%;width:min(34vw,560px);opacity:.16;}
.steps--journey .steps__contours--low{width:27%;left:-7%;bottom:-8%;opacity:.1;}
.steps--journey .steps__journey{
  max-width:1320px;min-height:0;
  padding:calc(var(--gap) - clamp(0px,2.8vw,40px)) clamp(28px,4vw,58px) clamp(88px,8vw,116px);
}
.steps--journey .steps__heading{max-width:760px;margin:0 auto;}
.steps--journey .steps__palmmark{width:112px;height:28px;margin-bottom:15px;opacity:.82;}
.steps--journey h2{font-size:clamp(48px,5.2vw,74px);line-height:.96;letter-spacing:-.03em;}
.steps--journey .steps__lead{
  max-width:50ch;margin:18px auto 0;color:#58616a;
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.62;text-align:center;text-wrap:balance;
}
.steps--journey .steps__route{
  --stepn:clamp(58px,5.2vw,76px);
  height:auto;max-width:1110px;margin:clamp(48px,5vw,70px) auto 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
  gap:0;
}
/* Connector rail across the three numerals. It sits on the numerals' optical
   centre (.548em of the numeral size) and the gradient carries a clear window
   around each column centre (16.667 / 50 / 83.333%), so the line stops short of
   every digit instead of crossing it. No knockout plate needed behind the type. */
.steps--journey .steps__route:before{
  content:"";position:absolute;z-index:0;left:0;right:0;
  top:calc(var(--stepn) * .548);height:1px;
  background:linear-gradient(to right,
    rgba(181,137,74,0) 0%,
    rgba(181,137,74,.38) 4%,
    rgba(181,137,74,.38) 7.67%,
    rgba(181,137,74,0) 9.67%,
    rgba(181,137,74,0) 23.67%,
    rgba(181,137,74,.38) 25.67%,
    rgba(181,137,74,.38) 41%,
    rgba(181,137,74,0) 43%,
    rgba(181,137,74,0) 57%,
    rgba(181,137,74,.38) 59%,
    rgba(181,137,74,.38) 74.33%,
    rgba(181,137,74,0) 76.33%,
    rgba(181,137,74,0) 90.33%,
    rgba(181,137,74,.38) 92.33%,
    rgba(181,137,74,.38) 96%,
    rgba(181,137,74,0) 100%);
}
.steps--journey .step__shape,.steps--journey .step__divider,
.steps--journey .step__rule{display:none;}
.steps--journey .step,.steps--journey .step--two{
  position:relative;z-index:2;width:100%;height:auto;padding:0 clamp(24px,3vw,48px);
  border:0;background:none;box-shadow:none;text-align:center;overflow:visible;transform:none;
}
.steps--journey .step:not(:last-of-type):after{
  content:"";display:block;position:absolute;top:102px;right:0;width:1px;height:214px;
  background:linear-gradient(to bottom,rgba(181,137,74,0),rgba(181,137,74,.24) 22%,rgba(181,137,74,.24) 76%,rgba(181,137,74,0));
}
.steps--journey .step__content,.steps--journey .step--two .step__content{
  position:relative;z-index:2;height:auto;display:flex;flex-direction:column;align-items:center;padding:0;
}
.steps--journey .step__n{
  position:relative;display:block;width:auto;height:auto;padding:0 0 3px;
  border:0;background:none;box-shadow:none;
  font-family:var(--disp);font-size:var(--stepn);font-weight:400;line-height:.82;
  letter-spacing:-.045em;color:var(--teal);text-align:center;
}
.steps--journey .step h3{
  max-width:16ch;min-height:2.3em;margin:34px 0 0;color:var(--navy);
  font-size:clamp(25px,2vw,31px);line-height:1.08;letter-spacing:-.015em;
}
.steps--journey .step p{
  max-width:31ch;min-height:8.1em;margin:15px 0 0;color:#4c5862;
  font-size:clamp(14px,1vw,15.5px);line-height:1.62;letter-spacing:.002em;
}
.steps--journey .step--two p{max-width:34ch;}
.steps--journey .step__art{
  display:block;flex:none;margin:28px auto 0;opacity:1;
  overflow:visible;filter:none;transition:transform .35s ease;
}
.steps--journey .step__art--calendar{width:164px;height:128px;}
.steps--journey .step--one .step__art,.steps--journey .step--three .step__art{margin-bottom:0;}
.steps--journey .step__art--resort{width:258px;height:136px;margin-bottom:0;}
.steps--journey .step__art--ride{width:272px;height:134px;margin-bottom:0;}
@media(hover:hover) and (pointer:fine){
  .steps--journey .step:hover{z-index:2;transform:none;}
  .steps--journey .step:hover .step__n{color:#b48645;}
  .steps--journey .step:hover .step__art{transform:translateY(-4px);opacity:1;}
}

@media(max-width:860px){
  .steps--journey{background:linear-gradient(150deg,#f4e7d5,#fff8ec 52%,#f4e2ca);}
  .steps--journey .steps__journey{padding:calc(var(--gap) - clamp(0px,2.8vw,40px)) 20px 86px;}
  .steps--journey .steps__palmmark{width:104px;margin-bottom:14px;}
  .steps--journey h2{line-height:.98;}
  .steps--journey .steps__lead{max-width:38ch;margin-top:15px;font-size:15px;}
  .steps--journey .steps__route{
    width:min(100%,520px);margin-top:50px;display:flex;flex-direction:column;align-items:stretch;gap:54px;
  }
  .steps--journey .step,.steps--journey .step--two{
    width:100%;height:auto;padding:0 4px 0 88px;text-align:left;
  }
  .steps--journey .steps__route:before{display:none;}
  .steps--journey .step:not(:last-of-type):after{
    left:29px;right:auto;top:58px;bottom:-40px;width:1px;height:auto;
    background:linear-gradient(to bottom,rgba(181,137,74,0),rgba(181,137,74,.32) 11%,rgba(181,137,74,.32) 89%,rgba(181,137,74,0));
  }
  .steps--journey .step__content,.steps--journey .step--two .step__content{align-items:flex-start;padding:0;}
  .steps--journey .step__n{
    position:absolute;left:-88px;top:0;width:59px;padding:0 5px 3px;
    background:none;box-shadow:none;
    font-size:49px;line-height:.9;text-align:center;
  }
  .steps--journey .step h3{min-height:0;margin:0;font-size:28px;text-align:left;}
  .steps--journey .step p,.steps--journey .step--two p{min-height:0;max-width:36ch;margin-top:12px;font-size:14.5px;line-height:1.58;text-align:left;}
  .steps--journey .step__art{margin:22px 0 0;}
  .steps--journey .step__art--calendar{width:150px;height:116px;}
  .steps--journey .step__art--resort{width:min(100%,240px);height:auto;}
  .steps--journey .step__art--ride{width:min(100%,252px);height:auto;}
  .steps--journey .steps__water{right:-46%;bottom:-4%;width:135%;opacity:.1;}
  .steps--journey .steps__watercolor-corner{right:-52%;top:-1%;width:132%;opacity:.1;}
}
@media (max-width:520px){
  .steps--journey h2{font-size:clamp(44px,13vw,58px);}
}

@media(max-width:420px){
  .steps--journey .steps__journey{padding-inline:18px;}
  .steps--journey .step,.steps--journey .step--two{padding-left:76px;}
  .steps--journey .step__n{width:54px;font-size:45px;}
  .steps--journey .step__n{left:-77px;}
  .steps--journey .step:not(:last-of-type):after{left:25.5px;}
  .steps--journey .step p{font-size:14px;line-height:1.55;}
}

/* ============================================================ ISLAND SHOWCASE
   Compact, editable version of the approved coastal editorial concept. */
.island-showcase{position:relative;width:calc(100% - clamp(40px,8vw,88px));max-width:1320px;min-height:clamp(610px,48vw,720px);margin:var(--gap) auto 0;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--cream);}
.island-showcase__media{position:absolute;inset:0;z-index:0;pointer-events:none;}
.island-showcase__topo{position:absolute;z-index:1;left:-35px;bottom:-70px;width:230px;height:230px;opacity:.11;pointer-events:none;}
/* The photo is 2352px wide: the right 680px are a generated extension so the
   fade has scene to work through instead of running out. Keeps the reference's
   horizontal -10% overshoot, but sits flush vertically, because cover is
   height-driven here and a vertical overshoot would zoom the crop back in and
   hide the extension. Anchored left so the original framing holds. */
.island-showcase__bg{position:absolute;z-index:0;left:-10%;top:0;width:120%;height:100%;max-width:none;object-fit:cover;object-position:left center;filter:brightness(1.02) contrast(1.05) saturate(1.06);}
/* Sand Piper v8 fade engine, the client-approved reference implementation
   (reference/fade-effect.md "The production CSS"), with only the cream token
   swapped to this site's #FAF6EF. Cream overlay, never a mask. The photo is
   inset -10% so its own edges sit outside the fade zone, it carries the
   luminance pivot brightness(1.01) contrast(.88) saturate(.9), and this veil is
   its SIBLING, never nested inside the filtered element. Horizontal anatomy:
   edge approach 0-10% -> ghost plateau .84 to 40% -> descent 40-62% -> crest
   62-68% -> rise 68-100%. Vertical: symmetric 34% ramps. Stacked on one
   element so the alphas composite as 1-(1-aH)(1-aV) and the corners get the
   softest fade of all. */
.island-showcase__veil{
  position:absolute;z-index:1;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(250,246,239,1) 0%, rgba(250,246,239,.99) 2%, rgba(250,246,239,.96) 4%,
      rgba(250,246,239,.92) 6%, rgba(250,246,239,.88) 8%, rgba(250,246,239,.855) 10%,
      rgba(250,246,239,.845) 20%, rgba(250,246,239,.84) 32%, rgba(250,246,239,.84) 40%,
      rgba(250,246,239,.833) 42%, rgba(250,246,239,.79) 44.5%, rgba(250,246,239,.71) 46.5%,
      rgba(250,246,239,.57) 49%, rgba(250,246,239,.42) 51%, rgba(250,246,239,.27) 53%,
      rgba(250,246,239,.13) 55.5%, rgba(250,246,239,.05) 57.5%, rgba(250,246,239,.01) 60%,
      rgba(250,246,239,0) 62%, rgba(250,246,239,0) 68%,
      rgba(250,246,239,.01) 71%, rgba(250,246,239,.06) 74.5%, rgba(250,246,239,.16) 77.5%,
      rgba(250,246,239,.32) 81%, rgba(250,246,239,.5) 84%, rgba(250,246,239,.68) 87%,
      rgba(250,246,239,.84) 90.5%, rgba(250,246,239,.94) 93.5%, rgba(250,246,239,.99) 97%,
      rgba(250,246,239,1) 100%),
    linear-gradient(to bottom,
      rgba(250,246,239,1) 0%, rgba(250,246,239,.99) 3.4%, rgba(250,246,239,.94) 6.8%,
      rgba(250,246,239,.84) 10.2%, rgba(250,246,239,.68) 13.6%, rgba(250,246,239,.5) 17%,
      rgba(250,246,239,.32) 20.4%, rgba(250,246,239,.16) 23.8%, rgba(250,246,239,.06) 27.2%,
      rgba(250,246,239,.01) 30.6%, rgba(250,246,239,0) 34%, rgba(250,246,239,0) 66%,
      rgba(250,246,239,.01) 69.4%, rgba(250,246,239,.06) 72.8%, rgba(250,246,239,.16) 76.2%,
      rgba(250,246,239,.32) 79.6%, rgba(250,246,239,.5) 83%, rgba(250,246,239,.68) 86.4%,
      rgba(250,246,239,.84) 89.8%, rgba(250,246,239,.94) 93.2%, rgba(250,246,239,.99) 96.6%,
      rgba(250,246,239,1) 100%);
}
.island-showcase__shell{position:relative;z-index:3;width:100%;max-width:var(--shell);margin:0 auto;padding:clamp(42px,4vw,62px) clamp(20px,4vw,44px);}
.island-showcase__body{width:min(52%,600px);}
.island-showcase h2{font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;margin:0;color:var(--navy);}
.island-showcase h2>span{display:block;white-space:nowrap;}
.island-showcase h2 .script{display:inline-block;position:relative;width:auto;max-width:none;font-size:1.08em;line-height:.86;margin-left:.36em;transform:translateY(.04em);color:var(--teal);}
.island-showcase h2 .script:after{content:"";position:absolute;left:5%;right:10%;bottom:-.08em;height:2px;background:#bd9652;border-radius:50%;transform:rotate(-4deg);}
.island-showcase__body>p{max-width:44ch;margin-top:clamp(26px,2.4vw,32px);font-size:16.5px;line-height:1.52;color:var(--navy);}
.island-showcase__cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:21px;}
/* Same raised surface as .kdrive__steps li, the handover facts and the rate card:
   a gradient down the face, an inset light edge over an inset gold edge, and a
   tight contact shadow under the soft lift. The backdrop blur stays, since the
   third card sits over the photograph's faded edge. */
.island-showcase__cards li{
  min-width:0;min-height:132px;padding:12px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:
    linear-gradient(180deg, rgba(255,252,247,.97) 0%, rgba(250,246,239,.9) 100%);
  border:1px solid rgba(181,137,74,.5);border-radius:15px;
  box-shadow:
    inset 0 1px 0 rgba(255,252,247,.9),
    inset 0 -1px 0 rgba(181,137,74,.14),
    0 1px 2px rgba(40,53,67,.07),
    0 12px 24px -10px rgba(40,53,67,.22);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.island-showcase__cards svg{width:34px;height:34px;color:var(--teal);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.island-showcase__card-rule{display:block;width:70%;height:1px;margin:8px 0;background:rgba(181,137,74,.7);}
.island-showcase__cards b{font-size:15px;line-height:1.15;color:var(--navy);}
.island-showcase__cards small{margin-top:3px;font-size:12.5px;line-height:1.2;color:var(--ink-soft);white-space:nowrap;}
.island-showcase__cta{margin-top:21px;border-color:rgba(181,137,74,.78);}
.island-showcase__cta svg{transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.island-showcase__cta:hover{border-color:#b58a4a;}
.island-showcase__cta:hover svg{transform:translateX(3px);}
.island-showcase__cta.rv.is-in:hover{transform:translateY(-2px);}
@media(max-width:1050px){
  .island-showcase__shell{padding-inline:clamp(28px,4vw,48px);}
  .island-showcase__body{width:min(55%,560px);}
  .island-showcase__cards{gap:10px;}
}
@media(max-width:900px){
  .island-showcase{min-height:0;margin-top:var(--gap);padding-top:240px;display:block;}
  .island-showcase__bg{left:0;top:0;width:100%;height:320px;object-position:24% center;}
  /* Stacked strip: all four edges sit on page cream, so all four are sealed.
     Side zones narrowed to 16% per fade-effect.md's small-screen rule (percent
     zones do not scale down); the bottom ramp runs long, 46->100%, so the photo
     dissolves into the copy below instead of stopping at a line. */
  .island-showcase__veil{
    height:325px;
    background:
      linear-gradient(to right,
      rgba(250,246,239,1) 0%,
      rgba(250,246,239,0.99) 1.8%,
      rgba(250,246,239,0.94) 3.6%,
      rgba(250,246,239,0.84) 5.4%,
      rgba(250,246,239,0.68) 7.2%,
      rgba(250,246,239,0.5) 9%,
      rgba(250,246,239,0.32) 10.8%,
      rgba(250,246,239,0.16) 12.6%,
      rgba(250,246,239,0.06) 14.4%,
      rgba(250,246,239,0.01) 16.2%,
      rgba(250,246,239,0) 18%,
      rgba(250,246,239,0) 82%,
      rgba(250,246,239,0.01) 83.8%,
      rgba(250,246,239,0.06) 85.6%,
      rgba(250,246,239,0.16) 87.4%,
      rgba(250,246,239,0.32) 89.2%,
      rgba(250,246,239,0.5) 91%,
      rgba(250,246,239,0.68) 92.8%,
      rgba(250,246,239,0.84) 94.6%,
      rgba(250,246,239,0.94) 96.4%,
      rgba(250,246,239,0.99) 98.2%,
      rgba(250,246,239,1) 100%),
      linear-gradient(to bottom,
      rgba(250,246,239,1) 0%,
      rgba(250,246,239,0.99) 2.2%,
      rgba(250,246,239,0.94) 4.4%,
      rgba(250,246,239,0.84) 6.6%,
      rgba(250,246,239,0.68) 8.8%,
      rgba(250,246,239,0.5) 11%,
      rgba(250,246,239,0.32) 13.2%,
      rgba(250,246,239,0.16) 15.4%,
      rgba(250,246,239,0.06) 17.6%,
      rgba(250,246,239,0.01) 19.8%,
      rgba(250,246,239,0) 22%,
      rgba(250,246,239,0) 44%,
      rgba(250,246,239,0.01) 49.6%,
      rgba(250,246,239,0.06) 55.2%,
      rgba(250,246,239,0.16) 60.8%,
      rgba(250,246,239,0.32) 66.4%,
      rgba(250,246,239,0.5) 72%,
      rgba(250,246,239,0.68) 77.6%,
      rgba(250,246,239,0.84) 83.2%,
      rgba(250,246,239,0.94) 88.8%,
      rgba(250,246,239,0.99) 94.4%,
      rgba(250,246,239,1) 100%);
  }
  .island-showcase__shell{padding:24px clamp(24px,6vw,48px) 58px;}
  .island-showcase__body{width:100%;max-width:700px;margin:0 auto;}
  .island-showcase h2{text-align:center;}
  .island-showcase__body>p{margin-inline:auto;text-align:center;}
  .island-showcase__cards{margin-top:20px;}
  .island-showcase__cta{margin-inline:auto;}
}
@media(max-width:620px){
  .island-showcase{padding-top:210px;}
  .island-showcase__bg{height:270px;object-position:23% center;}
  .island-showcase__veil{height:275px;}
  .island-showcase__shell{padding:20px 20px 48px;}
  .island-showcase h2{font-size:clamp(36px,10vw,48px);}
  .island-showcase__body>p{font-size:15px;line-height:1.5;}
  .island-showcase__cards{grid-template-columns:1fr;gap:10px;margin-top:18px;}
  .island-showcase__cards li{min-height:82px;padding:10px 18px;display:grid;grid-template-columns:48px 1px 1fr;grid-template-rows:auto auto;column-gap:13px;text-align:left;}
  .island-showcase__cards svg{grid-row:1/3;width:34px;justify-self:center;}
  .island-showcase__card-rule{grid-row:1/3;width:1px;height:48px;margin:0;background:rgba(181,137,74,.56);}
  .island-showcase__cards b{align-self:end;font-size:16px;}
  .island-showcase__cards small{align-self:start;font-size:13px;}
  .island-showcase__cta{margin-top:18px;}
}

/* ============================================================
   Salty Karts · "Based at the west end's favorite resort"
   Concept 04, Two Windows, promoted to a real section.

   Two photographs at deliberately unequal size, the smaller laid
   over the larger, with the resort's site count carried as a
   ghost numeral behind the copy instead of another badge.

   Hairlines use rgba(181,137,74,…), the gold already shipped in
   .handover__fact-rule and the journey rail, so this band reads
   as part of the same page rather than a new accent.
   Fade ladder is quintic smootherstep per fade-effect.md:
   an overlay, never a mask, clearing to rgba(250,246,239,0).

   ============================================================ */

.sec.twowin{
  --tw-gold:rgba(181,137,74,.46);
  --tw-gold-soft:rgba(181,137,74,.32);
  position:relative;overflow:hidden;
  padding-bottom:clamp(18px,2.2vw,34px);
}

/* environment art, not a reprint of this section's own photograph */
.twowin__wash{
  position:absolute;z-index:0;left:0;right:0;top:50%;transform:translateY(-50%);
  aspect-ratio:1920/1072;pointer-events:none;
  background:url('img/art/wash-horizon.webp') 50% 62%/cover no-repeat;
  opacity:.1;filter:saturate(.4);
}
/* sibling of the wash, never a child, so saturate() cannot tint the veil */
.twowin__washveil{
  position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-50%);
  aspect-ratio:1920/1072;pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,246,239,1) 0%,rgba(250,246,239,0.99) 2%,rgba(250,246,239,0.94) 4%,rgba(250,246,239,0.84) 6%,rgba(250,246,239,0.68) 8%,rgba(250,246,239,0.5) 10%,rgba(250,246,239,0.32) 12%,rgba(250,246,239,0.16) 14%,rgba(250,246,239,0.06) 16%,rgba(250,246,239,0.01) 18%,rgba(250,246,239,0) 20%,rgba(250,246,239,0) 60%,rgba(250,246,239,0.01) 64%,rgba(250,246,239,0.06) 68%,rgba(250,246,239,0.16) 72%,rgba(250,246,239,0.32) 76%,rgba(250,246,239,0.5) 80%,rgba(250,246,239,0.68) 84%,rgba(250,246,239,0.84) 88%,rgba(250,246,239,0.94) 92%,rgba(250,246,239,0.99) 96%,rgba(250,246,239,1) 100%);
}

.twowin__in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,4.6vw,78px);align-items:center;
}

/* ── the two windows ────────────────────────────────────── */
.twowin__art{
  position:relative;
  padding:0 0 clamp(44px,4.8vw,72px) clamp(28px,3.8vw,62px);
  margin-left:calc(-1 * clamp(0px,3.2vw,56px));
}
.twowin__big{
  position:relative;z-index:1;margin:0;overflow:hidden;border-radius:18px;
  box-shadow:0 28px 54px -22px rgba(14,36,69,.36);
}
.twowin__big img{
  display:block;width:100%;height:auto;aspect-ratio:5/4;
  object-fit:cover;object-position:56% 44%;
}
/* deliberately unequal: a square snapshot, squared corners and a paper
   border against the big plate's soft radius, so they read as two objects */
.twowin__small{
  position:absolute;z-index:2;left:0;bottom:0;margin:0;
  width:clamp(148px,17vw,226px);padding:8px;
  background:#fffdf8;border-radius:4px;transform:rotate(-2.6deg);
  box-shadow:0 20px 36px -16px rgba(14,36,69,.46);
}
.twowin__small img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;object-position:44% 58%;border-radius:2px;
}

/* ── the copy ───────────────────────────────────────────── */
.twowin__copy{position:relative;}
.twowin__ghost{
  position:absolute;z-index:0;left:-.055em;top:-.23em;
  font-family:var(--disp);font-size:clamp(148px,19vw,268px);line-height:.74;
  letter-spacing:-.045em;color:rgba(22,51,95,.062);
  pointer-events:none;user-select:none;
}
.twowin__copy h2,.twowin__copy>p,.twowin__facts,.twowin__cta{position:relative;z-index:1;}
.sec.twowin .twowin__copy h2{
  margin:0;max-width:15ch;
  font-size:clamp(37px,4.1vw,55px);line-height:.99;letter-spacing:-.024em;
}
.twowin__copy>p{
  max-width:42ch;margin:clamp(22px,2.4vw,30px) 0 0;
  font-size:clamp(15.5px,1.2vw,16.5px);line-height:1.68;color:var(--ink-soft);
}

.twowin__facts{list-style:none;margin:clamp(26px,2.9vw,34px) 0 0;padding:0;}
.twowin__facts li{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;align-items:start;
  padding:clamp(15px,1.7vw,19px) 0;border-top:1px solid var(--tw-gold);
}
.twowin__facts li:last-child{border-bottom:1px solid var(--tw-gold);}
.twowin__facts svg{width:30px;height:30px;color:var(--teal);}
.twowin__facts b{display:block;font-family:var(--disp);font-weight:400;font-size:17px;line-height:1.15;color:var(--navy);}
.twowin__facts small{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--ink-soft);}

.twowin__cta{margin-top:clamp(26px,2.9vw,34px);border-color:rgba(181,137,74,.78);}
.twowin__cta:hover{border-color:#b58a4a;}
.twowin__cta svg{transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.twowin__cta:hover svg{transform:translateX(3px);}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .twowin__in{gap:clamp(26px,3.4vw,48px);}
  .twowin__ghost{font-size:clamp(140px,21vw,220px);}
}
@media (max-width:900px){
  .twowin__in{grid-template-columns:minmax(0,1fr);gap:clamp(36px,5.4vw,52px);}
  .twowin__art{order:-1;max-width:560px;margin-left:0;}
  /* stacked, the numeral has no left margin to sit in, so hang it off the right */
  .twowin__ghost{left:auto;right:0;font-size:clamp(140px,22vw,210px);top:-.28em;}
  .twowin__copy>p{max-width:58ch;}
  /* percent zones do not scale down; the veil needs its own short-screen ramp */
  .twowin__washveil{background:linear-gradient(to bottom,rgba(250,246,239,1) 0%,rgba(250,246,239,0.99) 1.3%,rgba(250,246,239,0.94) 2.6%,rgba(250,246,239,0.84) 3.9%,rgba(250,246,239,0.68) 5.2%,rgba(250,246,239,0.5) 6.5%,rgba(250,246,239,0.32) 7.8%,rgba(250,246,239,0.16) 9.1%,rgba(250,246,239,0.06) 10.4%,rgba(250,246,239,0.01) 11.7%,rgba(250,246,239,0) 13%,rgba(250,246,239,0) 74%,rgba(250,246,239,0.01) 76.6%,rgba(250,246,239,0.06) 79.2%,rgba(250,246,239,0.16) 81.8%,rgba(250,246,239,0.32) 84.4%,rgba(250,246,239,0.5) 87%,rgba(250,246,239,0.68) 89.6%,rgba(250,246,239,0.84) 92.2%,rgba(250,246,239,0.94) 94.8%,rgba(250,246,239,0.99) 97.4%,rgba(250,246,239,1) 100%);}
}
@media (max-width:620px){
  .sec.twowin .twowin__copy h2{font-size:clamp(33px,8.8vw,44px);max-width:20ch;}
  .twowin__art{padding-bottom:clamp(38px,9vw,54px);padding-left:clamp(22px,7vw,44px);}
  .twowin__small{width:clamp(124px,29vw,166px);}
  .twowin__ghost{left:auto;right:0;font-size:clamp(120px,30vw,170px);top:-.24em;}
  .twowin__facts li{grid-template-columns:28px minmax(0,1fr);gap:13px;}
  .twowin__facts svg{width:26px;height:26px;}
  .twowin__cta{width:100%;justify-content:center;}
}

/* ============================================================
   Based at the west end's favorite resort. Promoted from
   resort-drive-preview; every selector is .rdp scoped. urls are
   relative because site.css resolves them from /assets/.
   ============================================================ */
/* Based at the west end's favorite resort, from the Drive mockup.
   Cream fades use rgba(250,246,239,*), never the transparent keyword. */

.rdp{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--cream);
  padding:var(--gap) 0 0;
}
.rdp__wash{
  position:absolute;z-index:0;left:-8%;top:8%;width:42%;height:84%;
  background:url('img/art/wash-coast.webp') 20% 40%/cover no-repeat;
  opacity:.16;filter:saturate(.5);pointer-events:none;
}
.rdp__washveil{
  position:absolute;z-index:1;inset:0;pointer-events:none;
  background:var(--mag-soft);
}
/* Cream overlay at the section foot, fade-effect.md: sibling of the
   filtered wash, rgba(250,246,239,*) never the transparent keyword.
   Sits under .rdp__in so type and the arch stay sharp; the undulating
   --join-bottom-edge stops the wash/topo clip from reading as a ruled line. */
.rdp::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:clamp(140px,16vw,220px);pointer-events:none;
  background:var(--join-bottom-edge);
}
/* Same curve over the arch bloom and drop-shadow, which live inside
   .rdp__in above this ::after. Caption stays z-index 3 so the lettering
   is not veiled. */
.rdp__joinveil{
  position:absolute;z-index:2;left:-48%;right:-48%;bottom:0;
  height:clamp(120px,13vw,180px);pointer-events:none;
  background:var(--join-bottom-edge);
}
.rdp__topo{
  position:absolute;z-index:0;right:-8%;bottom:-12%;width:min(48vw,620px);aspect-ratio:1160/720;
  background:url('img/art/topo.svg') center/contain no-repeat;
  opacity:.2;pointer-events:none;
}
.rdp__topo--tl{right:auto;bottom:auto;left:-8%;top:-12%;}

/* The card carries this section, so it takes more of the row and the gutters
   tighten: 395x592 to 477x715. 1.32 is the ceiling worth paying for. The rail is
   untouched at this ratio, and the only cost is one extra line in the first
   paragraph; at 1.35 the second paragraph wraps as well.

   The copy column then takes .95fr so "West End" holds one line at the original
   62px headline; the leftover comes out of the rail, not the card, so the card stays
   at 477. Every fact title keeps its line count down to the 1080 breakpoint. */
.rdp__in{
  position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(240px,1.365fr) minmax(0,.755fr);
  gap:clamp(18px,2vw,26px);align-items:center;
}

.rdp__kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font-family:var(--text);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#bd9652;
}
.rdp__kicker span{white-space:nowrap;}
.rdp__kicker i{flex:none;display:block;width:42px;height:1px;background:#bd9652;opacity:.75;}
.rdp__kicker--r{margin-bottom:20px;}

/* Measured on the rendered ink, not the boxes: the two faces sit very differently
   in their line boxes. "West End" baselines at 62px and "Favorite" put its
   ascenders at 66, a 4px gap, and the script's swash overhangs the h2 box by 12px
   so the first paragraph cleared it by only 6px. Padding rather than a bottom
   margin, because the margin would collapse with the paragraph's own. */
.rdp__copy h2{
  margin:0;padding-bottom:20px;
  font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;color:var(--navy);
}
.rdp__copy h2 .script{
  display:block;width:max-content;max-width:100%;margin:.19em 0 0;
  font-size:1.02em;line-height:.86;position:relative;
}
.rdp__copy h2 .script:after{
  content:"";position:absolute;left:6%;right:8%;bottom:-.06em;height:2px;
  background:#bd9652;border-radius:50%;transform:rotate(-6deg);
}
.rdp__copy > p{
  max-width:38ch;margin:18px 0 0;
  font-size:clamp(15px,1.12vw,16.5px);line-height:1.66;color:var(--ink-soft);
}
/* The CTA carries the section's muted gold: #A98D4F, the same ink as the stamp on
   the card and the lettering below it. Opaque rather than a translucent gold,
   because the pill's navy fill paints under the border and would show through. */
.rdp__copy .pill{
  margin-top:clamp(22px,2.4vw,30px);
  border-color:#A98D4F;
}
.rdp__copy .pill:hover{border-color:#C0A263;}

.rdp__stage{position:relative;padding:18px 8px 28px;}
.rdp__bloom{
  position:absolute;z-index:0;left:-18%;bottom:-8%;width:70%;height:54%;
  background:url('img/art/keys-watercolor-corner-v1.webp') left bottom/contain no-repeat;
  opacity:.34;filter:saturate(.7);pointer-events:none;
}
/* The artwork ships as a finished card: the arch, the cream frame, the watercolour
   bloom and the Jamaica Beach seal are painted into the file, so the CSS that used
   to build those is no longer applied and its elements are gone from the markup.
   drop-shadow rather than box-shadow, so the shadow follows the arch's alpha
   instead of tracing a rectangle around it. */
.rdp__arch{
  position:relative;z-index:1;margin:0;padding:0;
  background:none;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 24px 32px rgba(14,36,69,.24));
}
.rdp__arch img{
  display:block;width:100%;height:auto;border-radius:0;
}

/* The seal that used to be baked into resort-arch-card-v2.webp, rebuilt as markup
   and laid back over its own footprint. Every value is measured off the bitmap:
   disc centre (809.5, 338) of 1024x1536, radius 146, fill #FEFAF2, ink #AC864F,
   ring at 90% of the disc, arcs at r 66.3 and 74.0 spanning 140.8 and 146 degrees,
   dots at r 72.6, palm 33.9% x 36.0% traced from the bitmap contour. The overlay
   is 1.5% oversized so the disc's antialiased rim is covered, and it carries no
   shadow of its own: the card's original shadow falls outside the disc and still
   shows, so nothing doubles. The bitmap is v3, in which the printed ring, arcs,
   dots and palm have been flooded with the disc's own #FEFAF2 (0 gold pixels
   remain inside it), so every drawn element here is markup and nothing is a
   picture of itself. Verified against the original at 100.9% of its gold ink,
   with the text, palm and ring bands each within 2%. */
.rdp__stamp{
  position:absolute;z-index:2;left:64.581%;top:12.357%;width:28.943%;aspect-ratio:1;
  pointer-events:none;
}
.rdp__stamp-svg{display:block;width:100%;height:100%;}
.rdp__stamp-t{
  font-family:var(--disp);font-weight:400;font-size:12.7px;letter-spacing:0;
}
.rdp__seal{
  position:absolute;z-index:3;right:-4%;top:4%;width:clamp(92px,10vw,124px);
  filter:drop-shadow(0 10px 16px rgba(14,36,69,.16));
}
.rdp__seal svg{display:block;width:100%;height:auto;}
/* Hand lettered artwork in place of the set caption. It already carries about
   7.6deg of upward tilt in the file, so the old rotate(-8deg) is gone rather than
   doubled. The alt keeps the words for anyone who cannot see the image. */
.rdp__caption{
  position:absolute;z-index:3;right:2%;bottom:2%;margin:0;
  width:clamp(118px,13.4vw,176px);line-height:0;
}
/* The lettering overlaps the photograph's pavement, where it measured 2.07:1
   against the backdrop with every stroke under 3:1. A cream fog sits behind it:
   quintic smootherstep per fade-effect.md, cream is rgba(250,246,239,*) and the
   clear stop is rgba(250,246,239,0), never the transparent keyword. It reaches
   well past the artwork so the falloff never shows an edge. */
.rdp__caption::before{
  content:"";position:absolute;z-index:-1;inset:-34% -18%;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(250,246,239,0.96) 0%,rgba(250,246,239,0.959) 3.4%,rgba(250,246,239,0.956) 6.8%,rgba(250,246,239,0.95) 10.2%,rgba(250,246,239,0.941) 13.6%,rgba(250,246,239,0.93) 17%,rgba(250,246,239,0.919) 20.4%,rgba(250,246,239,0.91) 23.8%,rgba(250,246,239,0.904) 27.2%,rgba(250,246,239,0.901) 30.6%,rgba(250,246,239,0.9) 34%,rgba(250,246,239,0.891) 40.6%,rgba(250,246,239,0.846) 47.2%,rgba(250,246,239,0.756) 53.8%,rgba(250,246,239,0.612) 60.4%,rgba(250,246,239,0.45) 67%,rgba(250,246,239,0.288) 73.6%,rgba(250,246,239,0.144) 80.2%,rgba(250,246,239,0.054) 86.8%,rgba(250,246,239,0.009) 93.4%,rgba(250,246,239,0) 100%);
}
.rdp__caption img{display:block;position:relative;width:100%;height:auto;}

.rdp__rail{position:relative;padding-top:6px;}
/* A muted gold hairline divides each fact from the next: #bd9652 at 32%, the same
   gold as the kicker but held back so it reads as structure, not as another accent.
   Spacing matches the copy column's rhythm rather than the card's height: that
   column runs 25.8px between paragraphs and 32px under the heading, measured ink
   to ink, opened a step past it: 16px either side of each rule gives 38.2px, against the
   copy's 25.8px paragraph gap and 32px heading gap. */
.rdp__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.rdp__facts li + li{margin-top:16px;padding-top:16px;border-top:1px solid rgba(189,150,82,.32);}
.rdp__facts li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;}
/* The one numeric mark in the rail. Two things were wrong: it was a 60px cream
   disc ringed in gold while its three siblings are 52px mint discs, so it read as
   a different species; and its "SITES" label was being set by .rdp__facts small,
   which has the same specificity and comes later in this file, so it rendered at
   14.5px grey rather than 8.5px gold and ran nearly the full width of the disc.
   The word is gone rather than resized, because the title beside it already reads
   "181 sites" and a screen reader was announcing the number twice. Numeral colour
   is the icon teal deepened so it clears 4.5:1 as text rather than as a glyph;
   it measures 7.76:1 on the disc's near-white ground. */
.rdp__n{
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(189,150,82,.5);background:rgba(255,252,247,.8);
  font-family:var(--disp);font-weight:400;font-size:23px;line-height:1;
  letter-spacing:-.012em;color:#26594D;
  /* the line box centres, the ink does not: Walbaum's digits measured 3.25px
     below the disc centre, so 6.5px of bottom padding lifts them onto it */
  padding-bottom:6.5px;
}
/* a step under the 52px numeral mark, so the one that carries a figure reads as
   the lead item. Centred in the 52px track rather than left aligned, so all four
   discs share a vertical axis despite the size difference. */
.rdp__facts i{
  /* 46px outer with a 1.5px off white rim, a clear step under the 52px numeral
     mark. #FCF9F3 sits between
     pure white and the cream canvas: it separates the disc from the mint at
     1.12:1 while barely lifting off the canvas at 1.03:1, which is what makes it
     read as a soft halo rather than a drawn ring. Deliberately not on .rdp__n,
     which keeps its gold ring. */
  width:46px;height:46px;justify-self:center;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid #FCF9F3;
  background:#DCF1EA;color:#418676;
  box-shadow:
    0 1px 1px rgba(255,252,247,.6),
    0 3px 6px rgba(40,53,67,.11);
}
.rdp__facts i svg{width:20px;height:20px;}
.rdp__facts b{display:block;font-family:var(--disp);font-weight:400;font-size:21px;line-height:1.15;color:var(--navy);}
.rdp__facts small{display:block;margin-top:3px;font-size:14.5px;line-height:1.4;color:var(--ink-soft);}
.rdp__place{
  margin:26px 0 0;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#bd9652;
}
.rdp__aside{
  margin:18px 0 0;font-family:var(--text);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#bd9652;line-height:1.45;text-align:right;
}

/* matched to .bay__copy h2 at the same 520 step, so the two headlines compute
   to the same size at every width */
@media (max-width:520px){
  .rdp__copy h2{font-size:clamp(36px,10vw,48px);}
}

@media (max-width:1080px){
  .rdp__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;}
  .rdp__joinveil{display:none;}
  .rdp__rail{grid-column:1/-1;}
  .rdp__facts{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
  .rdp__facts li + li{margin-top:0;padding-top:0;border-top:0;}
  .rdp__facts li:nth-child(n+3){margin-top:16px;padding-top:16px;border-top:1px solid rgba(189,150,82,.32);}
  .rdp__aside{text-align:left;}
}
@media (max-width:720px){
  .rdp__in{grid-template-columns:minmax(0,1fr);gap:28px;}
  .rdp__stage{order:-1;max-width:420px;margin:0 auto;width:100%;}
  .rdp__facts{grid-template-columns:minmax(0,1fr);}
  .rdp__facts li + li{margin-top:16px;padding-top:16px;border-top:1px solid rgba(189,150,82,.32);}
  .rdp__kicker span{white-space:normal;}
  .rdp__topo{display:none;}
  .rdp__seal{right:2%;top:2%;width:86px;}
  .rdp__caption{right:8%;bottom:6%;}
  .rdp::after{height:clamp(90px,22vw,140px);}
  .rdp__joinveil{height:clamp(80px,20vw,120px);left:-18%;right:-18%;}
}

/* ── 2026-09-20 · menu overlay fixes ──
   .menu__foot a{color:var(--cream)} outranked .pill--light and printed cream type on the
   cream pill, so the Book Now in the menu was unreadable. The pill keeps navy type and
   gains the same arrow every other Book Now carries. The nav links also ran at the body
   line-height, which pushed the pill and phone below the fold on a 900px window. */
.menu__foot .pill,.menu__foot .pill:hover{color:var(--navy);}
.menu__foot .pill svg{width:15px;height:8px;flex:0 0 auto;transition:transform .2s ease;}
.menu__foot .pill:hover svg{transform:translateX(2px);}
.menu__nav a{line-height:1.15;padding:.3em 0;}
.menu__foot{padding-top:6px;}

/* ── 2026-09-20 · footer rental-hours column ──
   The cart row used a 34px icon column beside the 22px discs of every other row, so its
   copy started 12px further right than "Daily 8:00 AM - 6:00 PM" above it. The cart is now
   the same 22px teal disc and the rows share one grid, one gap and one top alignment. On
   phones the two-column footer squeezed the address and hours into ~160px; those two
   columns now take the full width and keep their lines whole. */
.fcomp__row--cart{grid-template-columns:22px minmax(0,1fr);align-items:start;margin-top:0;}
.fcomp__row--cart svg{width:22px;height:22px;margin-top:2px;}
.fcomp__hours .fcomp__row span{display:block;}
@media (max-width:560px){
  .fcomp__touch,.fcomp__hours{grid-column:1/-1;}
  .fcomp__hours .fcomp__row:not(.fcomp__row--cart) span{white-space:nowrap;}
}