/* Luxe Yacht Care · home.css (v1, council 2026-10-01). Loaded on the home page only, after site.css.
   Everything is scoped to body.home2 so the other pages keep their look until this one is approved.
   The About section (#meet) is never targeted here: it renders exactly as before.
   Palette "Deep Water": stone #EFEDEC ground, gelcoat #F8F7F5 surfaces, ink #111 type,
   deep navy #08102B behind film and photos, chart navy #000E47 for the map, one accent: seafoam #BFDDD5.
   Type: Boska Medium for headlines (set in site.css for every page), Switzer for prices and text. */

.home2{
  --display:var(--font);
  --deep:#08102B; --deeper:#050A1E; --sea:#BFDDD5; --sea-ink:#2C665F; --gel:#F8F7F5;
  --panel:#F8F7F5; --accent:var(--sea-ink);
}
/* Dark scopes: wherever film or a photograph sits behind the type */
.home2 .site-header,.home2 .menu,.home2 .hero,.home2 .proof,.home2 .arrive,.home2 .phone,.home2 .routes,.home2 .start,.home2 .site-footer{
  --ink:#050A1E; --ground:#08102B; --panel:#0F1A3D; --line:rgba(255,255,255,.12);
  --text:#F5F4F1; --body:#C7CCDA; --muted:#949CB3; --accent:#BFDDD5; --bone:#F5F4F1;
  --ghost:rgba(255,255,255,.34); --ghost-hover:rgba(255,255,255,.07); --btn-hover:#fff; --hair:rgba(255,255,255,.3);
  color:var(--body);
}

/* Headlines. :where() keeps this weaker than any class rule, so the About name is untouched. */
:where(.home2) h1,:where(.home2) h2{line-height:1}
:where(.home2) h2{font-size:clamp(36px,5.8vw,70px);margin-bottom:20px}
.home2 .price,.home2 .hero-price strong{font-family:var(--display);font-weight:600;letter-spacing:-.04em}
.home2 .form-step legend,.home2 .form-done h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em}

/* Header + menu */
.home2 .site-header{background:linear-gradient(180deg,rgba(5,10,30,.66),rgba(5,10,30,.12))}
.home2 .site-header.solid{background:rgba(8,16,43,.92)}
.menu-open .home2 .site-header,.home2 .menu{background:#08102B}
.home2 .menu-links a[aria-current="page"]{color:var(--sea)}
.home2 .header-cta{padding:14px 16px;border:1px solid rgba(255,255,255,.45);border-radius:var(--r)}
@media (min-width:760px){
  .home2 .header-cta{padding:14px 26px;background:#F5F4F1;border-color:#F5F4F1;color:#08102B}
  .home2 .header-cta:hover{background:#fff;border-color:#fff}
}
@media (min-width:1200px){.home2 .nav-menu{background:rgba(8,16,43,.97)}}

/* Hero: film behind the type. The still first frame is the largest paint; the film fades in once it plays. */
.home2 .hero{background:var(--deep)}
.hero2 .hero-bg picture{position:absolute;inset:0}
.hero2 .hero-bg img,.hero2 .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 22%}
.hero-film{opacity:0;transition:opacity 900ms var(--ease)}
.hero-film.on{opacity:1}
.hero2 .hero-bg::after{background:linear-gradient(180deg,rgba(8,16,43,.55) 0%,rgba(8,16,43,.12) 24%,rgba(8,16,43,.7) 50%,rgba(8,16,43,.95) 74%,#08102B 100%)}
.hero2 h1{font-size:clamp(44px,12.4vw,60px);line-height:.95;letter-spacing:-.045em;font-weight:600;max-width:10ch;margin-bottom:22px}
.hero-em{display:block;color:var(--sea)}
.hero2 .lede{color:rgba(245,244,241,.92);max-width:30ch;margin-bottom:26px}
@media (min-width:760px){
  .hero2 h1{font-size:clamp(60px,7vw,104px);max-width:13ch;margin-bottom:28px}
}
@media (min-width:960px){
  .hero2 .hero-bg img,.hero2 .hero-film{object-position:50% 50%}
  .hero2 .hero-bg::after{background:linear-gradient(90deg,rgba(8,16,43,.94) 0%,rgba(8,16,43,.82) 32%,rgba(8,16,43,.34) 60%,rgba(8,16,43,.08) 84%),linear-gradient(180deg,rgba(8,16,43,.5) 0%,rgba(8,16,43,0) 26%)}
  .hero2{--hero-fade:220px}
  .hero2 .hero-copy{padding-bottom:72px}
  .hero2 .lede{max-width:40ch;margin-bottom:32px}
}

/* Three facts under the hero */
.facts{padding:4px 0 44px}
.facts ul{list-style:none;margin-block:0;padding-block:0;display:grid}
.facts li{display:grid;gap:3px;padding:18px 0;border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts b{font:600 19px/1.2 var(--display);letter-spacing:-.025em;color:var(--text)}
.facts span{font-size:15px;line-height:1.45;color:var(--muted)}
@media (min-width:760px){
  .facts{padding:8px 0 72px}
  .facts ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts li,.facts li:last-child{border:0;border-left:1px solid var(--line);padding:4px 0 4px 28px}
  .facts li:first-child{border-left:0;padding-left:0}
  .facts b{font-size:22px}
}

/* One visit. Phones: each step is a full panel and the next slides up over it (position:sticky, no script).
   Desktop: one frame, four photos side by side; --w (0 to 1, set from the scroll position) opens each one. */
.visit2{padding:28px 0 0}
.visit2-head h2{max-width:11ch;margin-bottom:26px}
.visit2-tabs{display:none}
.vp{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));min-height:520px;overflow:hidden;isolation:isolate;background:#08102B;color:#F5F4F1;box-shadow:0 -28px 56px -28px rgba(5,10,30,.6)}
.vp-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.vp-media picture,.vp-media img{display:block;width:100%;height:100%;object-fit:cover}
.vp-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,43,.06) 30%,rgba(8,16,43,.5) 58%,rgba(8,16,43,.94) 100%)}
.vp-tab{display:none}
.vp-copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) calc(92px + env(safe-area-inset-bottom))}
.vp-kicker{font:500 11.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#BFDDD5;margin:0 0 14px}
.vp h3{font:500 clamp(34px,9.8vw,46px)/1 var(--serif);letter-spacing:-.012em;color:#fff;margin:0 0 12px;max-width:11ch}
.vp-text{font-size:17px;line-height:1.5;color:rgba(245,244,241,.9);max-width:34ch;margin:0 0 24px}
.vp-bar{display:flex;gap:6px}
.vp-bar i{flex:1;height:2px;background:rgba(255,255,255,.26)}
.vp-bar i.on{background:#BFDDD5}
@media (min-width:960px){
  .visit2{padding:24px 0 104px}
  .visit2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:26px}
  .visit2-head h2{margin:0;max-width:none;font-size:clamp(36px,3.9vw,56px)}
  .visit2-tabs{display:flex;gap:30px;list-style:none;margin:0;padding:0 0 6px}
  .visit2-tabs button{appearance:none;background:none;border:0;border-bottom:1px solid rgba(17,17,17,calc(var(--w,0)));padding:8px 0;cursor:pointer;font:500 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--text);opacity:calc(.38 + .62*var(--w,1))}
  .vp-row{display:flex;gap:10px;height:min(66vh,640px);padding-inline:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
  .vp{position:relative;top:auto;height:auto;min-height:0;min-width:0;flex:calc(1 + 3.2*var(--w,1)) 1 0px;box-shadow:none;background:#DCD9D6}
  .vp-media img{filter:saturate(calc(.45 + .55*var(--w,1))) brightness(calc(.8 + .2*var(--w,1)))}
  .vp-media::after{background:linear-gradient(180deg,rgba(8,16,43,0) 38%,rgba(8,16,43,.55) 70%,rgba(8,16,43,.9) 100%)}
  .vp-copy{right:0;padding:0 28px 28px;opacity:clamp(0,calc((var(--w,1) - .55)*2.6),1)}
  .vp h3{font-size:clamp(28px,2.7vw,42px);max-width:12ch;margin-bottom:10px}
  .vp-text{font-size:16.5px;max-width:32ch;margin:0}
  .vp-bar{display:none}
  .vp-tab{display:block;position:absolute;left:18px;bottom:22px;margin:0;font:500 11.5px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:clamp(0,calc(1 - var(--w,1)*2.6),1);pointer-events:none}
  /* Scroll-tied mode (script adds .vscrub when motion is allowed): the frame pins and the scroll opens each photo */
  .vscrub .visit2{height:calc(100svh - var(--header-h) + 160vh);padding:0}
  .vscrub .visit2-pin{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));display:flex;flex-direction:column;padding:clamp(18px,3.4vh,40px) 0 clamp(22px,4vh,44px)}
  .vscrub .vp-row{flex:1;min-height:0;height:auto;position:relative}
  .vscrub .vp{--w:0;cursor:pointer;position:absolute;top:0;bottom:0;left:0;flex:none;width:var(--vw,25%);transform:translate3d(var(--x,0px),0,0)}
  .vscrub .vp:first-child{--w:1}
  .vscrub .visit2-tabs button{--w:0}
  .vscrub .visit2-tabs li:first-child button{--w:1}
  .vscrub .vp-copy{right:auto;width:min(460px,38vw);padding:0 34px 34px}
  .vscrub .vp-text{font-size:17px}
}

/* Proof: the text he sends, between two close-ups of the finish */
.proof{background:#08102B;padding:84px 0 92px;overflow:hidden;overflow:clip}
.proof-grid{display:grid;gap:40px}
.proof h2{max-width:11ch}
.proof-copy p{max-width:34ch;font-size:17.5px;line-height:1.55}
.proof-media{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.proof-media .phone{grid-column:1 / -1;justify-self:center;order:-1;margin-bottom:14px}
.proof-clip{margin:0;aspect-ratio:4/5;overflow:hidden;background:#0F1A3D}
.proof-clip video{width:100%;height:100%;object-fit:cover}
.home2 .phone{background:#040817;border-color:rgba(255,255,255,.16)}
.home2 .bubble{background:#18244B}
@media (min-width:960px){
  .proof{padding:128px 0 136px}
  .proof{padding:128px 0 112px}
  .proof-grid{gap:64px}
  .proof h2{max-width:14ch}
  .proof-copy p{font-size:19px}
  .proof-media{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,290px) repeat(2,minmax(0,1fr));gap:20px;align-items:center}
  .proof-media .phone{grid-column:auto;order:0;margin:0;width:100%}
  .proof-helm{transform:translate3d(0,44px,0)}
  .proof-gelcoat{transform:translate3d(0,-30px,0)}
  .proof-hull{transform:translate3d(0,30px,0)}
  .proof-platform{transform:translate3d(0,-44px,0)}
  /* The ending, same navy band: the line on the left, two films on the right */
  .arrive{background:#08102B;padding:0 0 144px}
  .arrive-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:center}
  .arrive-copy h2{max-width:9ch;font-size:clamp(40px,4.6vw,68px)}
  .arrive-copy p{max-width:26ch;font-size:19px;line-height:1.5}
  .arrive-films{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:end}
  .arrive-aboard{transform:translate3d(0,40px,0)}
}
@media (prefers-reduced-motion:no-preference) and (min-width:960px){
  @supports (animation-timeline:view()){
    .proof-helm{animation:drift-up linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .proof-platform{animation:drift-down linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes drift-up{from{transform:translate3d(0,96px,0)}to{transform:translate3d(0,-8px,0)}}
@keyframes drift-down{from{transform:translate3d(0,-96px,0)}to{transform:translate3d(0,8px,0)}}

/* The ending films: a walk down the finished boat (4:5) and stepping aboard (9:16) */
.arrive{background:#08102B}
.arrive-film{margin:0;overflow:hidden;background:#0F1A3D}
.arrive-film video{display:block;width:100%;height:100%;object-fit:cover}
.arrive-walk{aspect-ratio:4/5}

/* Plans: same prices. Gelcoat cards, seafoam tag, a line of its own for the biggest boats. */
.home2 .card{background:#F8F7F5;border-color:rgba(17,17,17,.1)}
.home2 .card-pop{background:#fff;border-color:#111}
.home2 .pill{background:#BFDDD5;color:#0B1A18}
.home2 .card-offer{color:#2C665F}
.bigboat{margin-top:14px;display:grid;gap:20px;padding:26px 20px;background:#08102B;color:#C7CCDA}
.bigboat h3{font:500 clamp(28px,3.2vw,40px)/1 var(--serif);letter-spacing:-.012em;color:#F5F4F1;margin:0 0 8px}
.bigboat p{margin:0;max-width:44ch}
.bigboat .btn{background:#F5F4F1;border-color:#F5F4F1;color:#08102B}
@media (hover:hover){.bigboat .btn:hover{background:#fff;border-color:#fff}}
@media (min-width:760px){.bigboat{grid-template-columns:1fr auto;align-items:center;gap:40px;padding:36px 36px}.bigboat .btn{min-width:200px}}
/* Protected: the price gets room above its button */
.home2 .protected-copy .price{font-size:clamp(40px,4vw,50px);line-height:1;margin:10px 0 18px}
@media (min-width:760px){
  .home2 .protected-copy{align-items:center;gap:0 56px}
  .home2 .protected-copy .price{grid-row:1;align-self:end;margin:0 0 20px}
  .home2 .protected-copy .btn{grid-row:2;align-self:start;min-width:230px}
}
/* Desktop hover: the card you are on lifts off the page, its border darkens and its button fills in.
   (The selectors are this specific so they beat the scroll-reveal rule that resets transform.) */
@media (hover:hover) and (min-width:760px){
  .home2 .cards .card,.home2 .plans .protected,.home2 .plans .bigboat{transition:opacity 380ms var(--ease),transform 380ms var(--ease),box-shadow 380ms var(--ease),border-color 300ms var(--ease),background-color 300ms var(--ease)}
  .home2 .cards .card:hover{transform:translate3d(0,-12px,0) scale(1.015);background:#fff;border-color:#111;box-shadow:0 34px 60px -30px rgba(8,16,43,.45),0 10px 22px -14px rgba(8,16,43,.2);z-index:1}
  .home2 .cards .card:hover .btn-ghost{background:#141515;border-color:#141515;color:#F5F4F1}
  .home2 .cards .card-pop:hover{box-shadow:0 38px 64px -30px rgba(8,16,43,.55),0 10px 22px -14px rgba(8,16,43,.25)}
  .home2 .plans .protected:hover{transform:translate3d(0,-6px,0);border-color:rgba(44,102,95,.75);box-shadow:0 30px 54px -32px rgba(8,16,43,.4)}
  .home2 .plans .bigboat:hover{transform:translate3d(0,-6px,0);box-shadow:0 30px 54px -30px rgba(8,16,43,.6)}
}
.home2 .plans-foot a{color:var(--text);text-underline-offset:3px}

/* Map: the route in seafoam */
.home2 .rmap-route path{stroke:#DDF1EB;filter:drop-shadow(0 0 6px rgba(191,221,213,.7))}
.home2 .rmap-route .rmap-wake{stroke:rgba(191,221,213,.26);filter:none}
.home2 .pin a:hover .pin-label,.home2 .pin a:focus-visible .pin-label{background:#BFDDD5;border-color:#BFDDD5;color:#08102B}

/* Where it lives: the dock photo and four lines */
.where{padding:88px 0}
.where-grid{display:grid;gap:32px}
.where-photo{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--media)}
.where-photo picture,.where-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.where-copy > p{max-width:40ch;font-size:17px}
.where-list{list-style:none;margin:24px 0 0;padding:0}
.where-list li{display:grid;gap:4px;padding:18px 0;border-top:1px solid var(--line)}
.where-list li:last-child{border-bottom:1px solid var(--line)}
.where-list b{font:600 19px/1.25 var(--display);letter-spacing:-.025em;color:var(--text)}
.where-list span{font-size:15.5px;line-height:1.5;color:var(--body)}
@media (min-width:960px){
  .where{padding:120px 0}
  .where-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:88px;align-items:center}
  .where-photo{aspect-ratio:4/5;max-height:80vh}
  .where-list li{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:24px;align-items:baseline}
}

/* Questions: headline left, four answers right */
@media (min-width:960px){
  .home2 .faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:88px;align-items:start;padding-top:120px;padding-bottom:120px}
  .home2 .faq h2{position:sticky;top:calc(var(--header-h) + 40px);margin:0}
  .home2 .faq-list{margin-top:0}
}

/* Closing band (v35): the T-top photo toned to dusk, the copy on the left, the price form as a glass card on the right */
.home2 .start{position:relative;isolation:isolate;overflow:hidden;background:#050A1E;border-top:0}
.start-bg{display:block;position:absolute;inset:0;z-index:-1}
.start-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.start-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,30,.9) 0%,rgba(5,10,30,.74) 42%,rgba(5,10,30,.9) 100%)}
.home2 .start .eyebrow{color:#fff}
.home2 .start .eyebrow::after{background:var(--sea);opacity:.6}
.home2 .start h2{max-width:none;margin:0 0 22px;font-size:clamp(36px,10.4vw,46px);line-height:1;letter-spacing:-.012em;color:#fff;text-wrap:balance}
.home2 .start h2 em{display:block;color:var(--sea)}
.home2 .start-copy > p:not(.eyebrow){max-width:34ch;font-size:17.5px;color:#DDE0E9}
.home2 .start-copy > .start-contact{font-size:19px;color:#fff}
.home2 .start-contact a{color:var(--sea);text-decoration:none;border-bottom:1px solid var(--sea);padding-bottom:1px;letter-spacing:.02em}
.home2 .start-contact br{display:none}
.home2 .start-contact span{display:block;margin-top:20px;font:500 11.5px/1.4 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#A3ABC0}

.home2 .lead-form{padding:26px 20px 10px;border:1px solid rgba(255,255,255,.17);border-radius:var(--rad);background:rgba(8,15,40,.64);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 34px 70px -28px rgba(1,3,14,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.home2 .form-progress{display:flex;align-items:center;gap:18px;margin-bottom:24px;font:500 11.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#C7CCDA}
.home2 .form-progress i{position:relative;flex:1 1 auto;height:1px;background:rgba(255,255,255,.17)}
.home2 .form-progress i::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--sea);transform-origin:0 50%;transform:scaleX(calc(var(--step,1) / var(--steps,6)));transition:transform 380ms var(--ease)}
.home2 .form-step legend{margin-bottom:20px;font-size:clamp(23px,6.4vw,28px);line-height:1.15;color:#fff}
.home2 .taps{gap:10px}
.home2 .taps button{display:flex;align-items:center;gap:10px;min-height:60px;padding:12px 16px 12px 18px;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.02);color:#F5F4F1;font-weight:500}
.home2 .taps button::after{content:"";flex:none;width:15px;height:15px;margin-left:auto;background:currentColor;opacity:.85;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--t) var(--ease)}
.home2 .taps button em{flex:none;margin-left:0;color:var(--sea)}
.home2 .tap-price{float:none;flex:1 0 auto;margin-left:0;text-align:right;color:#fff}
.home2 .taps button:has(.tap-price){white-space:nowrap}
.home2 .taps button:has(.tap-price)::after{margin-left:0}
.home2 .taps button[aria-pressed="true"]{background:rgba(191,221,213,.14);border-color:var(--sea);color:#fff}
.home2 .taps button[aria-pressed="true"] em{color:var(--sea)}
.home2 .taps button[aria-pressed="true"] .tap-price{color:#fff}
@media (hover:hover){
  .home2 .taps button:hover{border-color:rgba(255,255,255,.72);background:rgba(191,221,213,.08)}
  .home2 .taps button:hover::after{transform:translateX(3px)}
}
.home2 .field label{color:#C7CCDA}
.home2 .field input,.home2 .field select{background-color:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2);color:#fff}
.home2 .field input::placeholder{color:#8891AA}
.home2 .field input:focus,.home2 .field select:focus{border-color:var(--sea)}
.home2 .field input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 60px #0F1A3D inset;caret-color:#fff}
.home2 .field select option{background:#0F1A3D;color:#F5F4F1}
.home2 .field.invalid input{border-color:#FF9C8A}
.home2 .form-status.err{color:#FFB3A4}
.home2 .form-summary{background:rgba(191,221,213,.08);border-color:rgba(191,221,213,.32);color:#fff}
.home2 .lead-form .btn{background:var(--sea);border-color:var(--sea);color:#08102B}
@media (hover:hover){.home2 .lead-form .btn:hover{background:#D6ECE6;border-color:#D6ECE6}}
.home2 .form-back{color:#C7CCDA}
.home2 .consent{color:#A3ABC0}
@media (prefers-reduced-transparency:reduce){.home2 .lead-form{background:#0B1433;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (min-width:960px){
  .start-bg img{object-position:50% 100%}
  .start-bg::after{background:linear-gradient(90deg,rgba(5,10,30,.97) 0%,rgba(5,10,30,.92) 22%,rgba(5,10,30,.7) 38%,rgba(5,10,30,.22) 58%,rgba(5,10,30,.06) 82%,rgba(5,10,30,.14) 100%),linear-gradient(180deg,rgba(5,10,30,.3) 0%,rgba(5,10,30,0) 26%,rgba(5,10,30,0) 66%,rgba(5,10,30,.5) 100%)}
  .home2 .start{padding:128px 0 136px}
  .home2 .start-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(40px,5vw,88px);align-items:center}
  .home2 .start h2{font-size:clamp(46px,min(6.1vw,11svh),108px);margin-bottom:clamp(14px,3svh,30px)}
  .home2 .start .eyebrow{margin-bottom:clamp(12px,2.6svh,28px)}
  .home2 .start h2 span{display:block}
  .home2 .start-copy > p:not(.eyebrow){font-size:clamp(16.5px,2.2svh,19px);line-height:1.55}
  .home2 .start-copy > .start-contact{margin-top:clamp(14px,2.6svh,26px);font-size:clamp(17px,2.3svh,20px)}
  .home2 .lead-form{padding:clamp(26px,4.6svh,46px) clamp(26px,2.8vw,40px) clamp(10px,1.6svh,16px)}
  .home2 .form-step legend{font-size:clamp(24px,min(2.2vw,3.9svh),33px);margin-bottom:clamp(16px,2.8svh,26px)}
  .home2 .taps{gap:13px}
  .home2 .taps button{min-height:clamp(52px,7.4svh,68px);padding-left:24px;font-size:clamp(15.5px,2svh,18px)}
}

/* Footer */
.home2 .site-footer{background:#050A1E;border-top-color:rgba(255,255,255,.1)}
.home2 .credit img{filter:none}

/* ================= Image system (all widths) =================
   Two ratios for photographs and films: portrait 4:5 and landscape 3:2. Sharp corners, like the About portrait.
   Every picture gets a 1px inner edge at low opacity so it separates from its ground instead of bleeding into it. */
.home2{--img-edge:rgba(255,255,255,.16);--img-edge-light:rgba(17,17,17,.12)}
.home2 .proof-clip,.home2 .arrive-film,.home2 .where-photo,.home2 .protected-media{position:relative}
.home2 .proof-clip::after,.home2 .arrive-film::after,.home2 .where-photo::after,.home2 .protected-media::after{content:"";position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 1px var(--img-edge);pointer-events:none}
.home2 .where-photo::after,.home2 .protected-media::after{box-shadow:inset 0 0 0 1px var(--img-edge-light)}
.home2 .vp-media::after{box-shadow:inset 0 0 0 1px var(--img-edge)}
.home2 .rmap::after{box-shadow:inset 0 0 0 1px var(--img-edge)}
.home2 .bubble-photos img{outline:1px solid var(--img-edge);outline-offset:-1px}
.arrive-aboard{aspect-ratio:4/5}

/* Press (all widths): a 2px lift and a little more shadow, 150ms. The shadow is its own layer so only opacity animates. */
.home2 .btn{position:relative;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),transform 150ms var(--ease)}
.home2 .btn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 12px 20px -10px rgba(5,10,30,.6);opacity:0;transition:opacity 150ms var(--ease);pointer-events:none}
.home2 .btn:active{transform:translate3d(0,-2px,0)}
.home2 .btn:active::after{opacity:1}

/* Hero film: the same slow scale as the photo, tied to the scroll where the browser supports it (the script covers the rest) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hero2 .hero-film{animation:hero-scale linear both;animation-timeline:scroll(root);animation-range:0 100svh}
  }
}

/* ================= Phones (polish pass, 2026-10-02) =================
   One story on navy (hero, promises, the visit, the text he sends, what you come back to, the map), then a light half
   (prices, where the boat lives, About, questions), then the navy close. Hard edges between grounds, no gradients.
   One spacing scale, six type sizes, one horizontal margin for every inset picture. Everything here is an override
   added after the desktop rules, so desktop is untouched. Hero, promises and plans: under 760px. The rest: under 960px. */
.story-thread{display:none}
.pill-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-dock{display:contents}
.sizes-label{display:none}
.sizes i,.stickybar i{font-style:normal}
.bar-text{display:none}

@media (max-width:959px){
  .home2{
    --gutter:clamp(24px,5vw,72px);                     /* the one horizontal margin */
    --sp-el:12px; --sp-group:32px; --sp-sec:64px; --sp-shift:88px;   /* element, group, section, change of ground */
    --t-display:clamp(38px,10.6vw,44px); --t-headline:clamp(30px,8.2vw,34px); --t-subhead:21px; --t-body:16.5px; --t-small:14px; --t-label:11.5px;
    --lab:500 var(--t-label)/1 var(--font);
    --measure:28ch;                                    /* ch is the width of a 0: 28 of them hold about 38 letters */
  }
  html{scroll-padding-top:60px}                        /* the condensed header is 60px tall */
  .home2 .about{--gutter:clamp(18px,5vw,72px)}          /* About keeps its own measure: untouched */

  /* Type: six sizes. Display (hero), headline, subhead, body, small, label. */
  :where(.home2) h2{font-size:var(--t-headline);line-height:1.03;margin-bottom:var(--sp-el)}
  :where(.home2 :is(.facts,.story,.routes,.plans,.where,.faq,.start)) :is(p,li){font-size:var(--t-body);line-height:1.5;text-wrap:pretty}
  .home2 :is(.proof-copy,.arrive-copy,.routes-copy,.where-copy,.start-copy) > p,.home2 .faq details p{font-size:var(--t-body);line-height:1.5}
  .home2 :is(.proof-copy,.arrive-copy,.routes-copy,.where-copy,.start-copy) > p{max-width:var(--measure);margin:0 0 var(--sp-el)}
  .home2 :is(.proof-copy,.routes-copy) > :last-child{margin-bottom:0}   /* the grid gap is the group gap */

  /* Header: smaller mark, wider margins; past the hero it condenses with a blurred ground and a hairline.
     The bar's ground is its own layer, so the condense is a transform, not a height change. */
  .home2 .site-header{background:none;border-bottom:0!important;-webkit-backdrop-filter:none;backdrop-filter:none;gap:var(--sp-el)}
  .home2 .site-header.solid{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .home2 .site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,10,30,.62),rgba(5,10,30,0)) no-repeat;border-bottom:1px solid transparent;transform-origin:50% 0;transition:transform 300ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease)}
  .home2 .site-header.solid::before{background:rgba(8,16,43,.92);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-bottom-color:rgba(255,255,255,.14);transform:scaleY(.8334)}
  .home2 .site-header > *{transition:transform 300ms var(--ease)}
  .home2 .site-header.solid > *{transform:translate3d(0,-6px,0)}
  .home2 .site-header.solid{pointer-events:none}
  .home2 .site-header.solid > *,.home2 .site-header.solid::before{pointer-events:auto}
  .menu-open .home2 .site-header{pointer-events:auto}
  .menu-open .home2 .site-header::before{background:#08102B;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu-open .home2 .site-header > *{transform:none}
  .home2 .brand img{width:96px}
  .home2 .header-cta{display:inline-flex;align-items:center;height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.42);border-radius:var(--r)}
  .home2 .menu-btn{width:44px;height:44px;margin:0;border:1px solid rgba(255,255,255,.42);border-radius:var(--r)}
  .home2 .menu-btn i{width:18px;height:1.5px}
  .menu-open .home2 .menu-btn i:nth-child(2){transform:translateY(7.5px) rotate(45deg)}
  .menu-open .home2 .menu-btn i:nth-child(4){transform:translateY(-7.5px) rotate(-45deg)}
  .home2 .menu-links a{font-size:var(--t-headline)}
  .home2 .menu-foot p a{font-size:var(--t-subhead)}
  .home2 .menu-foot p span{font-size:var(--t-small)}

  /* The story: navy ground. The rail lives in the left margin so pictures and text keep the one margin. */
  .story{position:relative;background:#08102B;color:#C7CCDA}
  .story h2{color:#F5F4F1}
  .story-thread{display:block;position:absolute;z-index:0;left:calc(var(--gutter) / 2);top:var(--thread-top,0px);height:var(--thread-h,0px);width:1px;background:rgba(191,221,213,.22);pointer-events:none}
  .story-thread i{position:absolute;inset:0;background:#BFDDD5;box-shadow:0 0 8px rgba(191,221,213,.5);transform-origin:50% 0}
  .js .story-thread i{transform:scaleY(var(--t,0))}

  /* One visit: four photographs, one ratio (4:5), one margin. Equal moments, so the markers sit at equal steps. */
  .visit2{padding:var(--sp-sec) 0}
  .visit2-head h2{max-width:11ch;margin-bottom:var(--sp-group)}
  .vp-row{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,1fr) auto;row-gap:var(--sp-group);padding-inline:var(--gutter)}   /* the first three steps share a height so the markers are evenly spaced; the last ends where its text ends */
  .vp{position:static;display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible;isolation:auto;background:none;color:#C7CCDA;box-shadow:none;max-width:520px;margin:0}
  .vp-tab{display:block;order:0;position:relative;margin:0 0 var(--sp-el);font:var(--lab);letter-spacing:.2em;text-transform:uppercase;color:#7F88A3;transition:color 400ms var(--ease)}
  .vp-tab::before{content:"";position:absolute;left:calc(var(--gutter) / -2 - 3px);top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#08102B;box-shadow:0 0 0 1px rgba(191,221,213,.45);transition:background-color 400ms var(--ease),box-shadow 400ms var(--ease)}
  .vp.is-on .vp-tab{color:#BFDDD5}
  .vp.is-on .vp-tab::before{background:#BFDDD5;box-shadow:0 0 0 1px #BFDDD5,0 0 0 6px rgba(191,221,213,.14)}
  .vp-media{order:1;position:relative;inset:auto;z-index:1;aspect-ratio:4/5;background:#0F1A3D}
  .vp-media::after{display:block;z-index:1;background:none}
  .vp-copy{order:2;position:static;padding:var(--sp-el) 0 0}
  .vp-kicker{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vp h3{color:#F5F4F1;font-size:var(--t-subhead);line-height:1.2;max-width:none;margin:0 0 var(--sp-el)}
  .vp-text{color:#C7CCDA;font-size:var(--t-body);line-height:1.5;max-width:var(--measure);margin:0}
  .vp-bar{display:none}

  /* Proof: the text he sends, then a two-column grid of the finish with one anchor across both columns */
  .proof{padding:var(--sp-sec) 0;background:none}
  .proof-grid{gap:var(--sp-group)}
  .proof h2{max-width:11ch}
  .proof-copy p{color:#C7CCDA}
  .proof-media{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-el);align-items:start;max-width:520px}
  .home2 .proof-media .phone{grid-column:1 / -1;order:-1;justify-self:stretch;width:auto;max-width:none;margin:0 0 calc(var(--sp-group) - var(--sp-el));padding:0;background:none;border:0;border-radius:0}
  .home2 .proof .phone-from{text-align:left;margin:0 0 var(--sp-el);font:var(--lab);letter-spacing:.2em;text-transform:uppercase;color:#BFDDD5}
  .home2 .proof .phone-time{text-align:left;margin:0 0 var(--sp-el);font:var(--lab);letter-spacing:.2em;color:#7F88A3}
  .home2 .proof .bubble{max-width:86%;margin:0 0 var(--sp-el);padding:11px 15px;border-radius:18px;font-size:var(--t-body);line-height:1.35;box-shadow:0 14px 24px -16px rgba(0,0,0,.8)}
  .home2 .proof .bubble:last-child{margin-bottom:0}
  .home2 .proof .bubble-photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:86%;margin:0 0 var(--sp-el);border-radius:0;overflow:visible}
  .home2 .proof .bubble-photos img{border-radius:10px}
  .proof-hull{grid-column:1 / -1;order:1}
  .proof-gelcoat{order:2;margin-top:0}
  .proof-helm{order:3}
  .proof-platform{display:none}

  /* The ending: the line, the walk down the finished boat, then stepping aboard as a full-width break before the map */
  .arrive{padding:var(--sp-sec) 0 0}
  .arrive-copy h2{max-width:10ch}
  .arrive-copy p{color:#C7CCDA}
  .arrive-walk{max-width:520px;margin-top:var(--sp-group)}
  .arrive-aboard{position:relative;z-index:1;width:100vw;margin:var(--sp-sec) 0 0 calc(var(--gutter) * -1)}

  /* Map: unchanged, on its own navy. Pins do not navigate away on phones. */
  .home2 .routes{padding:var(--sp-shift) 0}
  .home2 .routes-grid{gap:var(--sp-group)}
  .home2 .rmap-pins a{pointer-events:none}
  .home2 .pin-label{font-size:var(--t-label)}

  /* Where it lives: the dock photo at the portrait ratio */
  .where{padding:var(--sp-sec) 0}
  .where-grid{gap:var(--sp-group)}
  .where-photo{aspect-ratio:4/5;max-width:520px;overflow:hidden;overflow:clip}
  .where-list{margin-top:var(--sp-group)}
  .where-list li{gap:4px;padding:var(--sp-el) 0}
  .where-list b{font-size:var(--t-subhead);font-weight:560}
  .where-list span{font-size:var(--t-body);max-width:var(--measure)}

  /* Questions */
  .home2 .faq{padding-top:var(--sp-sec);padding-bottom:var(--sp-sec)}
  .home2 .faq-list{margin-top:var(--sp-group)}
  .home2 .faq summary{padding:24px 44px 24px 0;font-size:var(--t-subhead);line-height:1.25;text-wrap:balance}
  .home2 .faq details p{padding:0 0 24px;max-width:var(--measure)}

  /* Closing band: the form comes straight after the headline, so See my price lands on the first question */
  .home2 .start{padding:var(--sp-shift) 0}
  .home2 .start-grid{gap:0}
  .home2 .start-copy{display:contents}
  .home2 .start-copy > .eyebrow{order:1;margin:0 0 20px;max-width:none;font:var(--lab);letter-spacing:.4em;white-space:nowrap}
  .home2 .start-copy > h2{order:2;margin-bottom:var(--sp-group)}
  .home2 .lead-form{order:3}
  .home2 .start-copy > p:not(.eyebrow):not(.start-contact){order:4;margin:var(--sp-group) 0 var(--sp-el)}
  .home2 .start-copy > .start-contact{order:5;margin:0}
  .home2 .consent,.home2 .field label,.home2 .form-back{font-size:var(--t-small)}
  .home2 .taps button,.home2 .field input,.home2 .field select,.home2 .form-summary,.home2 .form-status{font-size:var(--t-body)}
  .home2 .taps button em{font-size:12.5px}
  .home2 .taps button:has(.tap-price){gap:8px}
  .home2 .taps button:has(.tap-price)::after{display:none}
  .home2 .form-done h3{font-size:var(--t-subhead)}
  .home2 .field{margin-bottom:var(--sp-el)}
  .home2 .consent{margin-top:var(--sp-el)}
  .home2 .taps button{transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease),color var(--t) var(--ease),transform 150ms var(--ease)}
  .home2 .taps button:active{transform:translate3d(0,-2px,0)}

  /* Footer: room for the bottom bar, links at headline size, towns in an even grid */
  .home2 .site-footer{padding:var(--sp-sec) 0 calc(var(--sp-sec) + 64px + env(safe-area-inset-bottom))}
  .home2 .footer-grid{gap:var(--sp-group)}
  .home2 .footer-links a{font-size:var(--t-headline);line-height:1.22}
  .home2 .footer-meta,.home2 .legal{font-size:var(--t-small)}
  .home2 .footer-meta .social{margin:0 0 var(--sp-group)}
  .home2 .footer-meta .social a{font-size:var(--t-body)}
  .home2 .contact-block{gap:var(--sp-group) 24px;margin-bottom:var(--sp-group)}
  .home2 .footer-towns{margin-top:var(--sp-group);padding-top:var(--sp-group);gap:var(--sp-el)}
  .home2 .footer-towns p{font:var(--lab);letter-spacing:.2em}
  .home2 .footer-towns nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-el) 24px}
  .home2 .footer-towns a{font-size:var(--t-small)}
  .home2 .footer-towns a,.home2 .credit{padding-block:11px;margin-block:-11px}   /* bigger tap areas, same layout */
  .home2 .legal{margin-bottom:0}
  .home2 .credit{margin-top:var(--sp-el)}

  /* Bottom bar: hidden on load, fades and slides up after the hero, hides at the form.
     Translucent blurred navy, hairline on top, a price that does not compete with headlines. */
  .home2 .stickybar{
    --ink:#050A1E; --text:#F5F4F1; --bone:#F5F4F1; --ghost:rgba(255,255,255,.36); --ghost-hover:rgba(255,255,255,.07); --btn-hover:#fff;
    gap:8px;height:auto;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(8,16,43,.94);border-top:1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
    opacity:0;transform:translate3d(0,110%,0);transition:transform 320ms var(--ease),opacity 320ms var(--ease),visibility 320ms}
  .home2 .stickybar.show{opacity:1;transform:none}
  .home2 .stickybar p{display:block;flex:1;min-width:0;font-size:var(--t-small);line-height:1.15;color:#949CB3;white-space:nowrap}
  .home2 .stickybar strong{display:block;margin-top:4px;font:600 var(--t-body)/1 var(--display);letter-spacing:-.02em;color:#F5F4F1}
  .home2 .stickybar .btn{flex:none;min-height:44px;padding:0 13px;font-size:11px;letter-spacing:.1em}
  .home2 .bar-text{display:inline-flex}
  .band-quote .home2 .stickybar i{display:none}
}

@media (max-width:759px){
  /* Hero: a scrim that runs from clear at the top to about 70% navy from the headline down, so the type sits on
     even darkness and not on the hull's reflection. The photo ends in a hard edge. */
  .home2 .hero2{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);overflow:visible;z-index:1;--hero-fade:0px}
  .home2 .hero2::after{display:none}
  .hero2 .hero-bg{overflow:hidden;overflow:clip}
  .hero2 .hero-bg::after{background:linear-gradient(180deg,rgba(8,16,43,0) 0,rgba(8,16,43,0) calc(100% - 640px),rgba(8,16,43,.7) calc(100% - 440px),rgba(8,16,43,.74) 100%);box-shadow:inset 0 -1px 0 var(--img-edge)}
  .hero2 .hero-copy{padding-top:calc(var(--header-h) + 150px);padding-bottom:var(--sp-group)}
  .hero2 h1{font-size:var(--t-display);font-weight:560;line-height:.92;letter-spacing:-.045em;max-width:none;margin-bottom:var(--sp-el)}
  .hero2 h1 .h1-a{display:block}
  .hero2 .lede{font-size:var(--t-body);line-height:1.4;max-width:30ch;margin-bottom:var(--sp-group)}
  .lede-more{display:none}
  .hero-dock{
    --ink:#E6E3E1; --ground:#EFEDEC; --panel:#F8F7F5; --line:rgba(17,17,17,.12);
    --text:#111111; --body:#34312F; --muted:#686461; --accent:#2C665F; --bone:#141515;
    --ghost:rgba(17,17,17,.3); --ghost-hover:rgba(17,17,17,.05); --btn-hover:#000; --hair:rgba(17,17,17,.3);
    display:block;position:relative;z-index:2;margin:0;padding:22px 20px 20px;background:#F8F7F5;color:var(--body);
    border:1px solid rgba(17,17,17,.12);box-shadow:0 22px 44px -26px rgba(5,10,30,.6)}
  /* selector on the left, a hairline, the price on the right */
  .hero-dock .hero-price{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0;max-width:none;margin:0 0 20px;padding:0 0 20px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--muted)}
  .hero-dock .hero-price > *{padding:0;border:0;line-height:1.2}
  .hero-dock .pill-size{grid-column:1;grid-row:1 / span 2;align-self:stretch;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding-right:18px;border-right:1px solid var(--line)}
  .hero-dock .pill-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;font:var(--lab);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .hero-dock .pill-size select{font:500 var(--t-body)/1.2 var(--font);color:var(--text);border-bottom:1px solid rgba(17,17,17,.35);padding:17px 22px 7px 0;margin-top:-15px}
  .hero-dock .hero-price strong{grid-column:2;grid-row:1;justify-self:end;padding-left:18px;font-size:var(--t-headline);line-height:1;color:var(--text)}
  .hero-dock .hero-price strong small{font-size:var(--t-small);color:var(--muted)}
  .hero-dock .hero-price > span:last-child{grid-column:2;grid-row:2;justify-self:end;max-width:none;padding:6px 0 0 18px;font-size:var(--t-small);white-space:nowrap}
  .hero-dock .hero-actions{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--sp-el);align-items:stretch}
  .hero-dock .btn-lg{height:52px;min-height:52px;padding:0 10px}
  @media (max-height:600px){.hero2 .hero-copy{padding-top:calc(var(--header-h) + 40px)}.hero2 .lede{display:none}}
  .home2 .header-sentinel{top:calc(100vh - 360px);top:calc(100svh - 360px)}

  /* Three promises open the story: a quiet list on navy */
  .home2 .facts{background:#08102B;padding:var(--sp-sec) 0}
  .home2 .facts li,.home2 .facts li:last-child{border:0;border-top:1px solid rgba(255,255,255,.12);padding:var(--sp-el) 0;gap:4px}
  .home2 .facts li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
  .home2 .facts b{font:560 var(--t-subhead)/1.2 var(--display);letter-spacing:-.02em;color:#F5F4F1}
  .home2 .facts span{font-size:var(--t-small);line-height:1.45;color:#949CB3}

  /* Plans: every length in one row (44px+ targets), then three equal rows. The popular row has a border and a lift. */
  .home2 .plans{padding:var(--sp-shift) 0}
  .home2 .plans h2{margin-bottom:var(--sp-group)}
  .home2 .sizes-label{display:block;margin:0 0 var(--sp-el);font-size:var(--t-small);color:var(--muted)}
  .home2 .sizes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow:visible;margin:0 0 var(--sp-group);padding:0}
  .home2 .sizes span{display:grid;place-items:center;min-height:46px;padding:0 2px;font-size:var(--t-small)}
  .home2 .sizes i{display:none}
  .home2 .cards-3{grid-template-columns:minmax(0,1fr);grid-template-areas:"bw" "wk" "mo";grid-auto-rows:1fr;gap:var(--sp-el)}
  .home2 .cards .card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "meta btn";align-items:center;align-content:center;gap:8px 14px;padding:18px 16px}
  .home2 .cards .card-pop{grid-template-areas:"name price" "meta btn" "offer offer";border-color:#111;box-shadow:0 20px 34px -22px rgba(8,16,43,.45)}
  .home2 .cards .pill{position:absolute;top:0;right:0;margin:0;padding:6px 6px 6px 9px;font:var(--lab);letter-spacing:.2em}
  .home2 .cards .card-pop{padding-top:34px}
  .home2 .cards .card h3{grid-area:name;margin:0;font:560 var(--t-subhead)/1.1 var(--display);letter-spacing:-.02em;text-transform:none;color:var(--text)}
  .home2 .cards .price{grid-area:price;justify-self:end;margin:0;font-size:var(--t-headline);line-height:1}
  .home2 .cards .price small{font-size:var(--t-small)}
  .home2 .cards .card-meta{grid-area:meta;margin:0;font-size:var(--t-small);font-weight:400;line-height:1.35;color:var(--muted)}
  .home2 .cards .card .btn{grid-area:btn;justify-self:end;margin:0;min-height:44px;min-width:104px;padding:0 16px}
  .home2 .cards .card-offer{grid-area:offer;margin:0;text-align:left;font-size:var(--t-small)}
  .home2 .cards .card-list{display:none}
  .home2 .cards .card:active{transform:translate3d(0,-2px,0);transition:transform 150ms var(--ease)}
  .home2 .cards .card::after{content:"";position:absolute;inset:-1px;box-shadow:0 16px 26px -16px rgba(8,16,43,.5);opacity:0;transition:opacity 150ms var(--ease);pointer-events:none}
  .home2 .cards .card:active::after{opacity:1}
  .home2 .protected{margin-top:var(--sp-el)}
  .home2 .protected-media{aspect-ratio:3/2}
  .home2 .protected-copy{display:grid;grid-template-columns:minmax(0,1fr);padding:20px 16px}
  .home2 .protected-copy p:not(.price){max-width:var(--measure)}
  .home2 .protected-copy .btn{justify-self:end;min-height:44px;min-width:104px;padding:0 16px;margin:0}
  .home2 .protected-copy h3{font-size:var(--t-subhead);font-weight:560;line-height:1.2;margin:0 0 var(--sp-el)}
  .home2 .bigboat h3{font-size:var(--t-subhead);line-height:1.2;margin:0 0 var(--sp-el)}
  .home2 .protected-copy p:not(.price){font-size:var(--t-body);margin:0 0 var(--sp-el)}
  .home2 .protected-copy .price{justify-self:end;font-size:var(--t-headline);line-height:1;margin:0 0 var(--sp-el)}
  .home2 .protected-copy .price small{font-size:var(--t-small)}
  .home2 .bigboat{margin-top:var(--sp-el);gap:var(--sp-el);padding:20px 16px}
  .home2 .bigboat p{font-size:var(--t-body);max-width:var(--measure)}
  .home2 .bigboat .btn{min-height:44px}
  .home2 .plans-foot{margin-top:var(--sp-group)}
  .home2 .plans-foot p{font-size:var(--t-small);margin:0 0 var(--sp-el);max-width:var(--measure)}
  .home2 .plans-foot p:last-child{margin-bottom:0}
}
@media (max-width:359px){
  .home2 .taps button:has(.tap-price) em{display:none}
  .home2 .sizes span{font-size:var(--t-label)}
  .home2 .cards .card .btn{min-width:88px}
  .home2 .stickybar i{display:none}
  .home2 .stickybar .btn{padding:0 10px}
}
/* sticky bar: the ", bi-weekly" note ran into the "Text us" button on 360-389px phones; the ellipsis is a backstop */
@media (max-width:389px){
  .home2 .stickybar i{display:none}
  .home2 .stickybar p{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:319px){
  .home2 .bar-text{display:none}
}
/* Small tablets (600 to 959px): the full-width break uses the landscape ratio so it does not fill two screens */
@media (min-width:600px) and (max-width:959px){
  .arrive-aboard{aspect-ratio:3/2}
  .home2 .footer-towns nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:760px) and (max-width:959px){
  .home2 .hero2{--hero-fade:0px}
  .home2 .hero2::after{display:none}
  .hero2 .hero-copy{padding-bottom:var(--sp-sec)}
  .hero2 h1{font-size:var(--t-display)}
  .hero2 .lede{font-size:var(--t-body)}
  .home2 .hero-price{font-size:var(--t-small)}
  .home2 .hero-price strong{font-size:var(--t-headline)}
  .home2 .hero-price strong small{font-size:var(--t-small)}
  .home2 .pill-size select{font-size:var(--t-body)}
  .home2 .facts{background:#08102B;padding:var(--sp-sec) 0}
  .home2 .facts li{border-left-color:rgba(255,255,255,.12)}
  .home2 .facts b{font-size:var(--t-subhead);color:#F5F4F1}
  .home2 .facts span{font-size:var(--t-small);color:#949CB3}
  .home2 .plans{padding:var(--sp-shift) 0}
  .home2 .plans h2,.home2 .sizes{margin-bottom:var(--sp-group)}
  .home2 .cards{gap:var(--sp-el)}
  .home2 .cards .card h3{font:560 var(--t-subhead)/1.1 var(--display);letter-spacing:-.02em;text-transform:none;color:var(--text);margin-bottom:var(--sp-el)}
  .home2 .cards .price,.home2 .protected-copy .price{font-size:var(--t-headline)}
  .home2 .price small{font-size:var(--t-small)}
  .home2 .cards .card-meta{font-size:var(--t-small)}
  .home2 .cards .card-list li{font-size:var(--t-body)}
  .home2 .cards .pill{font:var(--lab);letter-spacing:.2em}
  .home2 .protected,.home2 .bigboat{margin-top:var(--sp-el)}
  .home2 .protected-copy h3{font-size:var(--t-subhead);font-weight:560;line-height:1.2;margin:0 0 var(--sp-el)}
  .home2 .bigboat h3{font-size:var(--t-subhead);line-height:1.2;margin:0 0 var(--sp-el)}
  .home2 .protected-copy p:not(.price){font-size:var(--t-body)}
  .home2 .plans-foot{margin-top:var(--sp-group)}
  .home2 .plans-foot p{font-size:var(--t-small);margin:0 0 var(--sp-el)}
}
/* Count-up holder: the real number holds the space, the counting number is drawn over it from a fixed left edge */
.cu{display:inline-block;position:relative;color:transparent}
.cu::after{content:attr(data-n);position:absolute;left:0;top:0;color:var(--text);white-space:nowrap}
/* Parallax (script sets --py): pictures move a little slower than the page inside a clipped frame, so no gaps show */
.js .plx{transform:translate3d(0,var(--py,0px),0) scale(1.14);will-change:transform}
@media (prefers-reduced-motion:reduce){.js .plx{transform:none}}


/* ================= Hero "The Luxe Reveal" (concept 01, 2026-10-03) =================
   The mark centered over the hardtop photo: place label, logo, YACHT CARE, a hairline above and below.
   Desktop: the mark, one line of three words, a scroll cue. Phones: the same mark, then a serif headline,
   one line, one pill and the starting price. Self-contained (.rv): none of the old .hero2 rules apply. */
.home2 .rv{display:block;min-height:100vh;min-height:100svh;background:#050A1E;text-align:center;--hero-fade:0px}
.home2 .rv::after{display:none}
.rv-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.rv-bg picture{position:absolute;inset:0}
.rv-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 26%;animation:rv-zoom 8s cubic-bezier(.22,.61,.36,1) both}
.rv-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 72% 62% at 50% 46%,rgba(5,10,30,.3) 0%,rgba(5,10,30,.5) 58%,rgba(5,10,30,.8) 100%),
  linear-gradient(180deg,rgba(5,10,30,.72) 0%,rgba(5,10,30,0) 24%,rgba(5,10,30,0) 66%,#050A1E 100%)}
.rv-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:calc(var(--header-h) + 20px) var(--gutter) 96px}
.rv-line{display:block;flex:none;width:1px;height:clamp(28px,5.4svh,60px);background:rgba(255,255,255,.36);transform-origin:50% 0;animation:rv-draw 380ms var(--ease) 120ms both}
.rv-line-b{animation-delay:220ms}
.home2 .rv .rv-lockup{display:flex;flex-direction:column;align-items:center;max-width:none;margin:clamp(16px,2.8svh,30px) 0;font:inherit;letter-spacing:0;line-height:1;animation:rv-up 380ms var(--ease) 320ms both}
.rv-place{font:500 11.5px/1 var(--font);letter-spacing:.4em;margin-right:-.4em;text-transform:uppercase;color:var(--sea)}
.rv-logo{display:block;width:min(60vw,260px);height:auto;margin:clamp(16px,2.8svh,30px) 0 clamp(12px,2svh,22px)}
.rv-yc{font:500 12px/1 var(--font);letter-spacing:.62em;margin-right:-.62em;text-transform:uppercase;color:#fff}
/* The two doors under the mark (2026-10-06, second version): one framed pair on glass, split by a hairline. Each half carries its
   number in mint, its word in the serif, and an arrow that says where it leads: down this page for Wash, across for Detailing. */
.rv-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:348px;margin:clamp(18px,3svh,30px) auto 0;animation:rv-up 380ms var(--ease) 460ms both}
/* each is its own button: mint, so it stands out from the navy photograph, with a faint light along its top edge and a soft shadow
   under it; the word sits in the exact middle and the arrow keeps to the right-hand edge */
.rv-side{position:relative;display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 34px;border-radius:var(--r);background:linear-gradient(180deg,#CDE6DF 0,#BFDDD5 52%,#B4D5CC 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 34px -18px rgba(0,0,0,.85);color:#08102B;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:filter var(--t) var(--ease),transform 150ms var(--ease)}
.rv-side-word{font:500 24px/1 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.rv-side svg{position:absolute;right:13px;top:50%;width:15px;height:15px;margin-top:-7.5px;color:rgba(8,16,43,.72);transition:transform var(--t) var(--ease),color var(--t) var(--ease)}
.rv-side:active{transform:translateY(1px);filter:brightness(1.06)}
.rv-side:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover){
  .rv-side:hover{filter:brightness(1.07)}
  .rv-side:hover svg{color:#08102B}
  .rv-side:first-child:hover svg{transform:translateY(3px)}
  .rv-side:last-child:hover svg{transform:translateX(3px)}
}
@media (max-width:359px){.rv-side{padding:0 12px}.rv-side-word{font-size:22px}.rv-side svg{display:none}}   /* the narrowest phones: the word alone */
@media (min-width:760px){
  .rv-sides{gap:16px;max-width:520px;margin-top:clamp(20px,3.2svh,34px)}
  .rv-side{min-height:72px;padding:0 52px}
  .rv-side-word{font-size:31px}
  .rv-side svg{right:22px;width:19px;height:19px;margin-top:-9.5px}
}
@media (prefers-reduced-motion:reduce){.rv-sides{animation:none}.rv-side svg{transition:none}}
.rv-tags{display:none;font:500 12px/1 var(--font);letter-spacing:.36em;margin:clamp(20px,3.4svh,36px) -.36em 0 0;text-transform:uppercase;color:rgba(245,244,241,.88);animation:rv-up 380ms var(--ease) 560ms both}
.rv-tags i{font-style:normal;color:var(--sea);margin:0 .55em}
.rv-head{font:500 clamp(36px,11vw,50px)/.98 var(--serif);letter-spacing:-.005em;text-transform:uppercase;color:#fff;margin:0 0 14px;text-wrap:balance}
.rv-head em{font-style:normal;color:var(--sea)}
.rv-sub{font:400 16px/1.4 var(--font);color:rgba(245,244,241,.92);margin:0 0 clamp(18px,3svh,26px)}
.rv-cta{display:flex;align-items:center;justify-content:center;gap:18px}
.rv-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px;border-radius:999px;background:var(--sea);color:#06112A;font:600 12px/1 var(--font);letter-spacing:.17em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color var(--t) var(--ease),transform var(--t) var(--ease)}
.rv-btn svg{width:17px;height:17px;flex:none;transition:transform var(--t) var(--ease)}
.rv-btn:active{transform:translateY(1px)}
@media (hover:hover){.rv-btn:hover{background:#D6ECE6}.rv-btn:hover svg{transform:translateX(3px)}}
.rv-from{margin:0;text-align:left;color:rgba(245,244,241,.74)}
.rv-from span{display:block;font:500 10px/1 var(--font);letter-spacing:.26em;text-transform:uppercase}
.rv-from b{display:block;margin-top:7px;font:600 19px/1 var(--font);letter-spacing:.01em;color:#fff;white-space:nowrap}
.rv-from small{font:500 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,244,241,.8)}
/* Scroll cue: the word over a hairline that runs to the bottom edge, with a soft light sliding down it */
.rv-scroll{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column-reverse;align-items:center;gap:12px;margin:0 auto;width:max-content;min-width:44px;text-decoration:none;color:rgba(245,244,241,.7);font:500 9.5px/1 var(--font);letter-spacing:.36em;text-transform:uppercase;animation:rv-fade 380ms var(--ease) 760ms both}
.rv-scroll span{margin-right:-.36em}
.rv-scroll i{position:relative;display:block;width:1px;height:44px;overflow:hidden;background:rgba(255,255,255,.24)}
.rv-scroll i::after{content:"";position:absolute;left:0;top:0;width:1px;height:45%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95));animation:rv-drip 2.8s cubic-bezier(.45,0,.2,1) 1.4s infinite}
@media (max-height:700px) and (max-width:759px){.rv-line{height:20px}.rv-logo{width:min(48vw,200px)}.rv-head{font-size:clamp(32px,9.6vw,40px)}.rv-in{padding-bottom:84px}}
@media (min-width:760px){
  .rv-bg img{object-position:50% 40%}
  /* The desktop photo is a bright daylight shot: a deeper navy wash keeps the white logo and lines clear of the hardtop */
  .rv-bg::after{background:
    radial-gradient(ellipse 72% 62% at 50% 46%,rgba(7,14,40,.5) 0%,rgba(6,12,36,.62) 58%,rgba(5,10,30,.84) 100%),
    linear-gradient(180deg,rgba(5,10,30,.72) 0%,rgba(5,10,30,0) 24%,rgba(5,10,30,0) 66%,#050A1E 100%)}
  .rv-in{padding-bottom:120px}
  .rv-line{height:clamp(44px,7.4svh,84px)}
  .rv-place{font-size:12.5px}
  .rv-logo{width:min(50vw,720px);margin:clamp(22px,3.6svh,40px) 0 clamp(18px,2.8svh,30px)}
  .rv-yc{font-size:clamp(14px,1.45vw,21px);letter-spacing:.7em;margin-right:-.7em}
  .rv-tags{display:block;font-size:clamp(11px,.95vw,13.5px)}
  .rv-scroll{font-size:10px}
  .rv-scroll i{height:56px}
}
@keyframes rv-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes rv-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rv-up{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes rv-drip{0%{transform:translate3d(0,-100%,0)}70%,100%{transform:translate3d(0,225%,0)}}
@keyframes rv-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.55}}


/* ================= Service complete + After your visit (concept, 2026-10-03) =================
   Top: a label between two mint hairlines, then one row of equal tiles: clip, clip, the text thread, clip, clip.
   Bottom: the dusk marina, scrimmed, behind the closing line in the serif. Self-contained (.sc, .av, .thread);
   the old .proof / .arrive rules are no longer used by the home page. */
.sc{background:#08102B;color:#C7CCDA;padding:64px 0 56px;overflow:hidden;overflow:clip}
.home2 .sc-label{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 30px;max-width:none;font:500 11.5px/1 var(--font);letter-spacing:.4em;text-transform:uppercase;color:#C9D6DE}
.sc-label span{margin-right:-.4em;white-space:nowrap}
.sc-label i{display:block;flex:none;width:clamp(28px,7vw,56px);height:1px;background:rgba(191,221,213,.6);transition:transform 380ms var(--ease) 120ms}
.sc-label i:first-child{transform-origin:100% 50%}
.sc-label i:last-child{transform-origin:0 50%}
.js .sc-label.reveal:not(.in) i{transform:scaleX(0)}
.sc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sc-item{margin:0;min-width:0;border-radius:var(--rad)}
.sc-clip{position:relative;overflow:hidden;background:#0F1A3D;aspect-ratio:1/1.08}
.sc-clip::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
.sc-clip video{display:block;width:100%;height:100%;object-fit:cover}
.sc-hull{grid-column:1 / -1;order:1;aspect-ratio:3/2}
.thread{grid-column:1 / -1;order:2}
.sc-gelcoat{order:3}
.sc-outboards{order:4}
.sc-platform{display:none}
.js .sc-row .reveal:nth-child(2){transition-delay:60ms}
.js .sc-row .reveal:nth-child(3){transition-delay:120ms}
.js .sc-row .reveal:nth-child(4){transition-delay:180ms}
.js .sc-row .reveal:nth-child(5){transition-delay:240ms}
/* The thread: a quiet dark card, a hairline of mint, bubbles with a tail */
.thread{display:flex;flex-direction:column;justify-content:center;padding:24px 18px 26px;border-radius:var(--rad);background:linear-gradient(180deg,rgba(13,22,52,.92),rgba(6,11,30,.92));border:1px solid rgba(191,221,213,.3);box-shadow:0 30px 60px -34px rgba(0,0,0,.9),0 0 0 6px rgba(191,221,213,.03)}
.thread-from{margin:0 0 12px;text-align:center;font:500 13.5px/1.2 var(--font);color:#EEF1F6}
.thread-time{margin:0 0 18px;text-align:center;font:500 9.5px/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:#8E9AB8}
.thread-bubble{width:fit-content;max-width:86%;margin:0 0 10px;padding:11px 15px;border-radius:17px 17px 17px 5px;background:#25345F;color:#F5F4F1;font:400 15.5px/1.3 var(--font);box-shadow:0 12px 22px -14px rgba(0,0,0,.85)}
.thread-bubble:last-child{margin-bottom:0}
.thread-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
.thread-photos img{display:block;width:100%;aspect-ratio:1/.92;object-fit:cover;border-radius:var(--r);outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}

.av{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:#08102B;color:#C7CCDA;text-align:center}
.av-bg{position:absolute;inset:0;z-index:-1}
.av-bg picture,.av-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 60%}
.av-bg picture{top:3px;height:calc(100% - 3px)}   /* keeps the photo off the seam with the navy block above */
.av-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08102B 0%,rgba(8,16,43,.86) 18%,rgba(6,12,34,.7) 52%,rgba(5,10,30,.7) 78%,rgba(5,10,30,.9) 100%)}
.av-in{display:flex;flex-direction:column;align-items:center;padding-top:44px;padding-bottom:64px}
.home2 .av .sc-label{margin-bottom:20px}
.home2 .av-head{max-width:none;margin:0 0 20px;font:500 clamp(46px,13.4vw,60px)/1 var(--serif);letter-spacing:-.012em;color:#fff;text-wrap:balance}
.av-head em{font-style:normal;color:var(--sea)}
.av-sub{max-width:34ch;margin:0 0 30px;font:400 16px/1.45 var(--font);color:rgba(245,244,241,.9)}
.av-scroll{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:rgba(245,244,241,.82);font:500 9.5px/1 var(--font);letter-spacing:.36em;text-transform:uppercase}
.av-scroll b{display:block;width:1px;height:36px;margin-bottom:12px;background:rgba(255,255,255,.4)}
.av-scroll i{display:grid;place-items:center;width:34px;height:34px;margin-bottom:10px;border:1px solid rgba(255,255,255,.6);border-radius:50%;color:#fff;animation:rv-pulse 2.6s ease-in-out infinite}
.av-scroll svg{width:14px;height:14px}
.av-scroll span{margin-right:-.36em}
@media (min-width:760px){
  .sc{padding:112px 0 84px}
  .home2 .sc-label{margin-bottom:44px}
  .sc-label i{width:56px}
  .sc-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.62fr) minmax(0,1fr) minmax(0,1fr);gap:16px;height:clamp(280px,24vw,350px)}
  .sc-item,.sc-hull,.thread{grid-column:auto;order:0}
  .sc-clip,.sc-hull{aspect-ratio:auto;height:100%}
  .sc-platform{display:block}
  .thread{padding:22px 20px}
  .thread-bubble{font-size:15px}
  .av-bg picture,.av-bg img{object-position:50% 62%}
  .av-bg::after{background:linear-gradient(180deg,#08102B 0%,rgba(8,16,43,.84) 16%,rgba(6,12,34,.5) 50%,rgba(5,10,30,.42) 76%,rgba(5,10,30,.78) 100%)}
  .av-in{padding-top:40px;padding-bottom:clamp(180px,22vw,330px)}
  .home2 .av .sc-label{margin-bottom:30px}
  .home2 .av-head{font-size:clamp(60px,6.6vw,100px);margin-bottom:24px}
  .av-sub{font-size:19px;max-width:none;margin-bottom:38px}
  .av-scroll b{height:44px}
  .av-scroll i{width:38px;height:38px}
}

/* Desktop: Service complete + After your visit share ONE screen (the mock's composition).
   Everything is sized off the screen height, so the label, the row, the headline and the scroll cue are all in view together. */
@media (min-width:960px){
  .fin{display:flex;flex-direction:column;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));background:#08102B}
  .fin .sc{flex:none;padding:clamp(34px,6svh,72px) 0 clamp(24px,4.4svh,52px)}
  .home2 .fin .sc .sc-label{margin-bottom:clamp(18px,3.3svh,40px)}
  .fin .sc-row{height:clamp(180px,29svh,350px)}
  .fin .thread{padding:12px 18px}
  .fin .thread-from{margin-bottom:8px;font-size:13px}
  .fin .thread-time{margin-bottom:clamp(8px,1.5svh,16px)}
  .fin .thread-bubble{padding:9px 13px;font-size:14px;margin-bottom:8px}
  .fin .thread-photos{margin-bottom:8px}
  .fin .thread-photos img{aspect-ratio:auto;height:clamp(40px,7.6svh,84px)}
  .fin .av{flex:1 1 auto;display:flex;flex-direction:column}
  .fin .av-in{flex:1 1 auto;padding-top:clamp(14px,2.6svh,34px);padding-bottom:clamp(18px,3svh,40px)}
  .home2 .fin .av .sc-label{margin-bottom:clamp(12px,2.6svh,28px)}
  .home2 .fin .av-head{font-size:clamp(48px,min(6.6vw,10.4svh),104px);margin-bottom:clamp(14px,3svh,30px)}
  .fin .av-sub{font-size:clamp(16px,2.1svh,19px);margin-bottom:clamp(12px,2.6svh,34px)}
  .fin .av-scroll b{height:clamp(22px,4.2svh,46px);margin-bottom:10px}
}
/* Short laptop screens: a tighter thread card so the row still fits */
@media (min-width:960px) and (max-height:780px){
  .fin .thread{padding:10px 16px}
  .fin .thread-from{margin-bottom:6px;font-size:12.5px}
  .fin .thread-time{margin-bottom:6px}
  .fin .thread-bubble{padding:7px 12px;font-size:13.5px;margin-bottom:6px}
  .fin .thread-photos{margin-bottom:6px}
}


/* ================= One screen per section (desktop pass, 2026-10-03) =================
   From 960px wide, every section of the home page is one screen under the header: never taller at normal desktop
   heights, and never shorter (so a strip of the next section does not show). --room is the height under the header. */
@media (min-width:960px){
  .home2{--room:calc(100vh - var(--header-h))}
  @supports (height:100svh){.home2{--room:calc(100svh - var(--header-h))}}

  /* Hero: on short laptop screens the mark is capped by the screen height so the whole lockup stays in view */
  .rv-logo{width:min(50vw,720px,80svh)}
  .rv-in{padding-bottom:clamp(84px,13svh,120px)}

  /* Map: the picture is exactly one screen tall; its width follows from its own proportions, so the pins stay on their towns */
  .home2 .routes{min-height:var(--room);display:flex;align-items:center}
  .home2 .routes .routes-grid{width:100%;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .home2 .routes .rmap{width:auto;height:min(var(--room),calc(58vw * 1050 / 941));aspect-ratio:941/1050;justify-self:end}
  .home2 .routes-copy{padding:0}

  /* Plans: heading, sizes, three cards, then Protected and 39 ft+ side by side, then the two lines */
  .home2 #plans{min-height:var(--room);display:flex;align-items:center;padding:clamp(24px,4.2svh,72px) 0}
  .home2 #plans > .wrap{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);column-gap:14px}
  .home2 #plans > .wrap > *{grid-column:1 / -1}
  .home2 #plans h2{font-size:clamp(34px,6.4svh,64px);margin-bottom:clamp(10px,1.7svh,20px)}
  .home2 #plans .sizes-label{margin:0}
  .home2 #plans .sizes{margin-bottom:clamp(10px,1.7svh,22px);padding-bottom:4px}
  .home2 #plans .card{padding:clamp(18px,2.6svh,34px) 24px clamp(16px,2.2svh,28px)}
  .home2 #plans .card .price{font-size:clamp(36px,5.6svh,58px);margin-bottom:6px}
  .home2 #plans .card-meta{margin-bottom:clamp(8px,1.3svh,16px)}
  .home2 #plans .card-list{margin-bottom:clamp(10px,1.8svh,22px)}
  .home2 #plans .card-list li{padding:clamp(4px,.7svh,9px) 0;font-size:14.5px}
  .home2 #plans .card .btn{min-height:clamp(42px,5.4svh,52px)}
  .home2 #plans .card-offer{margin-top:8px}
  .home2 #plans > .wrap > .protected{grid-column:1;margin-top:14px;grid-template-columns:clamp(96px,8.4vw,150px) minmax(0,1fr)}
  .home2 #plans > .wrap > .bigboat{grid-column:2;margin-top:14px;padding:clamp(16px,2.4svh,28px) 26px;gap:16px 24px;align-content:center}
  .home2 #plans .protected-copy{padding:clamp(12px,1.9svh,26px) 22px;gap:0 20px;align-items:center}
  .home2 #plans .protected-copy h3{font-size:clamp(16px,1.3vw,20px);line-height:1.2;margin-bottom:6px}
  .home2 #plans .protected-copy p:not(.price){font-size:14px;line-height:1.4;margin:0}
  .home2 #plans .protected-copy .price{font-size:clamp(32px,4.4svh,44px);margin:0 0 10px}
  .home2 #plans .protected-copy .btn{min-width:150px;min-height:44px;padding:0 14px}
  .home2 #plans .bigboat h3{font-size:clamp(24px,2.2vw,32px);margin-bottom:6px}
  .home2 #plans .bigboat p{font-size:14.5px;line-height:1.45}
  .home2 #plans .bigboat .btn{min-width:150px;min-height:46px}
  .home2 #plans .plans-foot{margin-top:clamp(10px,1.7svh,24px)}
  .home2 #plans .plans-foot p{margin-bottom:4px}

  /* Wherever your boat lives */
  .home2 .where{min-height:var(--room);display:flex;align-items:center;padding:clamp(20px,5svh,96px) 0}
  .home2 .where > .wrap{width:100%;align-items:center}
  .home2 .where-photo{max-height:calc(var(--room) - 2 * clamp(20px,5svh,96px))}

  /* About: same design, sized to the screen */
  .home2 .about{min-height:var(--room);display:flex;align-items:center}
  .home2 .about .about-inner{width:100%;padding-top:clamp(24px,4.4svh,72px);padding-bottom:clamp(24px,4.4svh,72px)}
  .home2 .about .about-photo{max-height:calc(var(--room) - 2 * clamp(24px,4.4svh,72px) - 2px)}

  /* Questions and the closing form: centered in one screen */
  .home2 .faq{min-height:var(--room);align-content:center;padding-top:clamp(32px,6svh,120px);padding-bottom:clamp(32px,6svh,120px)}
  .home2 .start{min-height:var(--room);display:flex;align-items:center;padding:clamp(28px,5svh,128px) 0}
  .home2 .start > .wrap{width:100%}
}
/* Short desktop screens: the plan cards drop their three-line lists, and the smallest laptops drop the secondary lines,
   so the whole price section is still one screen. About tightens its gaps the same way. */
@media (min-width:960px) and (max-height:800px){
  .home2 #plans .card-list{display:none}
  .home2 #plans .card-meta{margin-bottom:14px}
  .home2 .about .about-eyebrow{margin-bottom:12px}
  .home2 .about .about-name{--ns:min(10.4vw,142px,19svh)}
  .home2 .about .about-marks{margin:16px 0 18px}
  .home2 .about .social{margin-top:14px}
}
@media (min-width:960px) and (max-height:700px){
  .home2 #plans > .wrap > .protected{grid-template-columns:minmax(0,1fr)}
  .home2 #plans .protected-media,.home2 #plans .protected-copy p:not(.price),.home2 #plans .bigboat p{display:none}
  .home2 #plans .plans-foot p + p{display:none}
  .home2 .where{padding:12px 0}
  .home2 .where-photo{max-height:calc(var(--room) - 24px)}
  .home2 .about .about-inner{padding-top:16px;padding-bottom:16px}
  .home2 .about .about-photo{max-height:calc(var(--room) - 34px)}
  .home2 .about .about-marks{margin:10px 0 12px}
}


/* ================= Your day, every time: the plate (2026-10-03) =================
   .rp-stage clips; .rp-plate has the plate's exact proportions, so the pills (percentages of the plate) always sit
   on the dots. Desktop: the plate is as tall as the section and anchored right; anything wider than the plate is
   navy, and the plate's left edge fades into it. Phones: the map half of the plate above the copy. */
.rp{position:relative;isolation:isolate;background:#07162C;color:#C7CCDA;overflow:hidden;overflow:clip}
.rp-stage{position:relative;overflow:hidden;aspect-ratio:1003/941;background:#07162C}
.rp-plate{position:absolute;top:0;right:0;height:100%;aspect-ratio:1672/941}
.rp-plate picture,.rp-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp-plate::before{content:"";position:absolute;inset:0 auto 0 0;width:16%;z-index:1;background:linear-gradient(90deg,#07162C 0%,rgba(7,22,44,0) 100%);pointer-events:none}
.rp-pins{list-style:none;margin:0;padding:0}
.rp-pin{position:absolute;left:var(--x);top:var(--y);z-index:2}
.js .rp-pin.reveal{transform:none;transition:opacity 380ms var(--ease);transition-delay:calc(var(--i) * 60ms)}
.rp-pin a{position:absolute;top:0;display:flex;align-items:center;text-decoration:none;transform:translate(-100%,-50%);padding-right:0}
.rp-r a{left:0;flex-direction:row-reverse;transform:translate(0,-50%)}
.rp-l a{left:0}
.rp-pill{display:block;white-space:nowrap;padding:4px 8px;border-radius:var(--r);background:rgba(5,11,26,.86);border:1px solid rgba(255,255,255,.62);color:#fff;font:500 10.5px/1.15 var(--font);letter-spacing:.01em;box-shadow:0 0 16px rgba(120,255,214,.16),0 6px 14px -8px rgba(0,0,0,.8);transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.rp-wire{position:relative;display:block;flex:none;width:clamp(10px,2.4vw,34px);height:1px;background:rgba(255,255,255,.8)}
.rp-wire::before{content:"";position:absolute;left:-2px;top:-1.5px;width:4px;height:4px;border-radius:50%;background:#fff}
.rp-r .rp-wire::before{left:auto;right:-2px}
.rp-dot{display:block;flex:none;width:18px;height:18px;margin:0 -9px 0 0;border-radius:50%;box-shadow:0 0 0 0 rgba(170,255,226,0);transition:box-shadow var(--t) var(--ease)}
.rp-r .rp-dot{margin:0 0 0 -9px}
.rp-pin a:hover .rp-pill,.rp-pin a:focus-visible .rp-pill{background:var(--sea);border-color:var(--sea);color:#06112A}
.rp-pin a:hover .rp-dot,.rp-pin a:focus-visible .rp-dot{box-shadow:0 0 0 5px rgba(170,255,226,.3)}
.rp-pin a::after{content:"";position:absolute;inset:-9px -6px}
.rp-copy{position:relative;z-index:3;padding-top:40px;padding-bottom:64px}
.rp-label{display:flex;align-items:center;gap:18px;margin:0 0 20px;font:500 11.5px/1 var(--font);letter-spacing:.4em;text-transform:uppercase;color:var(--sea)}
.rp-label i{display:block;flex:none;width:56px;height:1px;background:rgba(191,221,213,.6);transform-origin:0 50%;transition:transform 380ms var(--ease) 120ms}
.js .rp-label.reveal:not(.in) i{transform:scaleX(0)}
.home2 .rp-head{max-width:none;margin:0 0 20px;font:500 clamp(52px,15vw,68px)/.98 var(--serif);letter-spacing:-.012em;color:#fff}
.rp-head em{display:block;font-style:normal;color:var(--sea)}
.rp-sub{max-width:34ch;margin:0 0 26px;font:400 16.5px/1.5 var(--font);color:rgba(240,243,248,.92)}
.rp-more{margin:0}
.rp-link{display:inline-flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.7);text-decoration:none;color:#fff;font:500 12px/1 var(--font);letter-spacing:.34em;text-transform:uppercase;transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.rp-link svg{width:18px;height:18px;flex:none;transition:transform var(--t) var(--ease)}
@media (hover:hover){.rp-link:hover{color:var(--sea);border-color:var(--sea)}.rp-link:hover svg{transform:translateX(4px)}}
.js .rp-copy .reveal:nth-child(2){transition-delay:60ms}
.js .rp-copy .reveal:nth-child(3){transition-delay:120ms}
.js .rp-copy .reveal:nth-child(4){transition-delay:180ms}
@media (min-width:760px){
  .rp-pill{padding:6px 11px;font-size:12px}
}
/* The side-by-side plate needs a landscape window: in tall ones (a desktop browser snapped to half the screen, a 13" iPad in
   portrait) the copy column shrank to a word per line and the pills sat on the headline, so those keep the stacked layout. */
@media (min-width:960px) and (min-aspect-ratio:5/4){
  .rp{min-height:var(--room);display:flex;align-items:center}
  .rp-stage{position:absolute;inset:0;aspect-ratio:auto}
  /* --pw is the plate's width; the pills reach to about 47% of it, so the copy column ends before that */
  .rp{--pw:calc(var(--room) * 1672 / 941);--rp-left:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));--rp-col:calc(100vw - var(--pw) * .53 - var(--rp-left) - 24px)}
  .rp-copy{width:calc(var(--rp-left) + var(--rp-col));max-width:none;margin:0;padding:0 0 clamp(40px,11svh,150px) var(--rp-left)}
  .rp-copy > *{max-width:var(--rp-col)}
  .rp-label{margin-bottom:clamp(12px,2.6svh,28px)}
  .home2 .rp-head{font-size:clamp(40px,min(7.4vw,14.2svh,calc(var(--rp-col) / 4.5)),132px);line-height:.95;margin-bottom:clamp(14px,3svh,30px)}
  .rp-sub{font-size:clamp(16px,min(1.32vw,2.5svh),22px);line-height:1.45;max-width:min(27em,var(--rp-col));margin-bottom:clamp(18px,4.2svh,46px)}
  .rp-link{font-size:clamp(11.5px,.84vw,14px)}
  .rp-pill{padding:clamp(5px,.85svh,8px) clamp(9px,1.3svh,14px);font-size:clamp(11px,1.52svh,14px)}
  .rp-wire{width:clamp(14px,3.6svh,38px)}
  /* the copy block spans the section and sits above the plate: let clicks through to the town pills, keep its own link */
  .rp-copy{pointer-events:none}
  .rp-copy a{pointer-events:auto}
}

/* ============ Seam (v39): the marina and the map meet in one navy ============
   The bottom of the marina eases down into #08102B and the top of the map eases up out of the same #08102B,
   so the two pictures come out of one band of navy instead of meeting at a line. Eased stops, so no visible step.
   Both layers sit over the pictures and under the words, the pills and the scroll cue.
   The map side stops at 15% so the Hudson dot keeps its full glow. */
.av::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(8,16,43,0) 0%,rgba(8,16,43,.013) 7.1%,rgba(8,16,43,.049) 13.6%,rgba(8,16,43,.104) 19.8%,rgba(8,16,43,.175) 25.5%,rgba(8,16,43,.259) 31.1%,rgba(8,16,43,.352) 36.3%,rgba(8,16,43,.45) 41.4%,rgba(8,16,43,.55) 46.6%,rgba(8,16,43,.648) 51.7%,rgba(8,16,43,.741) 56.9%,rgba(8,16,43,.825) 62.5%,rgba(8,16,43,.896) 68.2%,rgba(8,16,43,.951) 74.4%,rgba(8,16,43,.987) 80.9%,#08102B 88%,#08102B 100%)}
.rp-stage::before{content:"";position:absolute;left:0;right:0;top:0;height:15%;z-index:1;pointer-events:none;background:linear-gradient(180deg,#08102B 0%,#08102B 12%,rgba(8,16,43,.987) 19.1%,rgba(8,16,43,.951) 25.6%,rgba(8,16,43,.896) 31.8%,rgba(8,16,43,.825) 37.5%,rgba(8,16,43,.741) 43.1%,rgba(8,16,43,.648) 48.3%,rgba(8,16,43,.55) 53.4%,rgba(8,16,43,.45) 58.6%,rgba(8,16,43,.352) 63.7%,rgba(8,16,43,.259) 68.9%,rgba(8,16,43,.175) 74.5%,rgba(8,16,43,.104) 80.2%,rgba(8,16,43,.049) 86.4%,rgba(8,16,43,.013) 92.9%,rgba(8,16,43,0) 100%)}

/* ============ QA pass (v41) ============
   Photo edges: the closing band eases into the footer navy, and on phones the map eases into its own navy before the copy.
   Tap areas: grown to 44px without moving anything. */
.home2 .start-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,10,30,0) 0%,rgba(5,10,30,.013) 7.1%,rgba(5,10,30,.049) 13.6%,rgba(5,10,30,.104) 19.8%,rgba(5,10,30,.175) 25.5%,rgba(5,10,30,.259) 31.1%,rgba(5,10,30,.352) 36.3%,rgba(5,10,30,.45) 41.4%,rgba(5,10,30,.55) 46.6%,rgba(5,10,30,.648) 51.7%,rgba(5,10,30,.741) 56.9%,rgba(5,10,30,.825) 62.5%,rgba(5,10,30,.896) 68.2%,rgba(5,10,30,.951) 74.4%,rgba(5,10,30,.987) 80.9%,#050A1E 88%,#050A1E 100%)}
.av-scroll span{margin-right:-.36em}
@media (min-width:760px){.av-scroll{font-size:10px}}
@media (max-width:959px){
  .rp-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,22,44,0) 0%,rgba(7,22,44,.013) 8.1%,rgba(7,22,44,.049) 15.5%,rgba(7,22,44,.104) 22.5%,rgba(7,22,44,.175) 29%,rgba(7,22,44,.259) 35.3%,rgba(7,22,44,.352) 41.2%,rgba(7,22,44,.45) 47.1%,rgba(7,22,44,.55) 52.9%,rgba(7,22,44,.648) 58.8%,rgba(7,22,44,.741) 64.7%,rgba(7,22,44,.825) 71%,rgba(7,22,44,.896) 77.5%,rgba(7,22,44,.951) 84.5%,rgba(7,22,44,.987) 91.9%,#07162C 100%)}
  /* Tap strips sized to the room each pill has, so no pill's strip lies over its neighbour */
  .rp-pin a::after{inset:-4px -6px}
  .rp-pin:nth-child(1) a::after{inset:-11px -6px -4px}
  .rp-pin:nth-child(5) a::after{inset:-4px -6px 0}
  .rp-pin:nth-child(6) a::after{inset:0 -6px -2px}
  .rp-pin:nth-child(7) a::after{inset:-2px -6px -11px}
  .rp-pin:nth-child(n+8) a::after{inset:-11px -6px}
  .rp-link{position:relative}
  .rp-link::after{content:"";position:absolute;inset:-8px 0 -5px}
  .home2 .start-contact a{position:relative}
  .home2 .start-contact a::after{content:"";position:absolute;inset:-10px 0}
  .home2 .footer-links a{padding-block:3px}
}

/* ============ Cleanup round (v45) ============
   Hero: the mark alone. The corner logo stays hidden until the page scrolls past the hero, so the mark is not shown twice.
   Phones: the promise and the one action sit in their own block under the hero. */
.js .home2 .site-header .brand{transition:opacity var(--t) var(--ease),visibility 0s}
.js .home2 .site-header:not(.solid) .brand{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t) var(--ease),visibility 0s var(--t)}
.rvn{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:86vh;min-height:86svh;padding:0 0 40px;background:#08102B;text-align:center}
.rvn > .wrap{width:100%}
.rvn-bg{position:absolute;inset:0;z-index:-1}
.rvn-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.rvn-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050A1E 0%,rgba(5,10,30,.42) 16%,rgba(6,12,34,.3) 40%,rgba(7,14,40,.72) 62%,rgba(8,16,43,.94) 82%,#08102B 100%)}
.rvn .rv-head{margin-bottom:16px}
.rvn .rv-sub{margin-bottom:26px}
@media (min-width:760px){.rvn{display:none}}
/* The marina block has no scroll cue now: its three lines sit in the middle of the picture */
@media (min-width:960px){.fin .av-in{justify-content:center;padding-bottom:clamp(40px,9svh,110px)}}

/* ============ Map to plans (v47) ============
   The dark map used to end in a hard line against the light plans section. Now the bottom of the map eases into navy,
   and a short band eases that navy into the stone. On desktop the page settles on the map section when you stop
   near it (scroll snap, proximity), so a strip of the light section never sits at the bottom of the frame by accident. */
.rp-out{height:clamp(64px,11svh,140px);background:linear-gradient(180deg,rgb(7,22,44) 0%,rgba(7,22,44,.987) 8.1%,rgba(7,22,44,.951) 15.5%,rgba(7,22,44,.896) 22.5%,rgba(7,22,44,.825) 29%,rgba(7,22,44,.741) 35.3%,rgba(7,22,44,.648) 41.2%,rgba(7,22,44,.55) 47.1%,rgba(7,22,44,.45) 52.9%,rgba(7,22,44,.352) 58.8%,rgba(7,22,44,.259) 64.7%,rgba(7,22,44,.175) 71%,rgba(7,22,44,.104) 77.5%,rgba(7,22,44,.049) 84.5%,rgba(7,22,44,.013) 91.9%,rgba(7,22,44,0) 100%)}
@media (min-width:960px){
  .rp-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,16,43,0) 0%,rgba(8,16,43,.013) 8.1%,rgba(8,16,43,.049) 15.5%,rgba(8,16,43,.104) 22.5%,rgba(8,16,43,.175) 29%,rgba(8,16,43,.259) 35.3%,rgba(8,16,43,.352) 41.2%,rgba(8,16,43,.45) 47.1%,rgba(8,16,43,.55) 52.9%,rgba(8,16,43,.648) 58.8%,rgba(8,16,43,.741) 64.7%,rgba(8,16,43,.825) 71%,rgba(8,16,43,.896) 77.5%,rgba(8,16,43,.951) 84.5%,rgba(8,16,43,.987) 91.9%,rgb(8,16,43) 100%)}
  .rp-out{background:linear-gradient(180deg,rgb(8,16,43) 0%,rgba(8,16,43,.987) 8.1%,rgba(8,16,43,.951) 15.5%,rgba(8,16,43,.896) 22.5%,rgba(8,16,43,.825) 29%,rgba(8,16,43,.741) 35.3%,rgba(8,16,43,.648) 41.2%,rgba(8,16,43,.55) 47.1%,rgba(8,16,43,.45) 52.9%,rgba(8,16,43,.352) 58.8%,rgba(8,16,43,.259) 64.7%,rgba(8,16,43,.175) 71%,rgba(8,16,43,.104) 77.5%,rgba(8,16,43,.049) 84.5%,rgba(8,16,43,.013) 91.9%,rgba(8,16,43,0) 100%)}
}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  html:has(.home2){scroll-snap-type:y proximity}
  .rp{scroll-snap-align:start;scroll-snap-stop:normal}
}

/* ============ About, quieter (v48) ============
   Jayden asked for a smaller photo and a smaller section. Same design and lettering, scaled down:
   the portrait is a small 4:5 picture instead of half the screen, and the band is as tall as its words. */
.home2 .about .about-inner{gap:22px;padding-top:56px;padding-bottom:60px}
.home2 .about .about-photo{width:132px;aspect-ratio:4/5}
.home2 .about .about-name{font-size:clamp(60px,17.5vw,82px)}
.home2 .about .about-marks{margin:22px 0 26px}
@media (min-width:960px){
  .home2 .about{min-height:0;display:block}
  .home2 .about .about-inner{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,96px);align-items:center;padding-top:clamp(16px,calc(11svh - 50px),80px);padding-bottom:clamp(16px,calc(11svh - 50px),80px)}
  .home2 .about .about-photo{width:clamp(200px,19vw,280px);aspect-ratio:4/5;max-height:none;justify-self:end}
  .home2 .about .about-name{--ns:min(9.3vw,112px,17svh);font-size:var(--ns)}
  .home2 .about .about-split{font-size:10px;letter-spacing:.16em}   /* shorter, so the role line still starts at the J */
}


/* ============ The visit, as a deck (v55) ============
   Four clean photographs (no tint, nothing printed on them). One corner: each card takes --rad (14px), the same as the film tiles
   and the message card below, and its photograph runs flush to the card's edges, so it is exactly as wide as those tiles.
   Desktop: four staggered frames on one screen, as before. Phones: each step is one card (its number and a progress
   line, the photograph, title, line) and the cards stack as you scroll down: position:sticky under the header, each 6px lower than the
   last, so a new card slides up over the one before and the earlier ones stay as thin edges behind it.
   Native vertical scrolling only: nothing swipes sideways and nothing takes over the scroll. */
.vf{padding:64px 0}
.vf-head h2{margin:0 0 28px}
.vf-row{list-style:none;margin-block:0;padding-block:0}
.vf-item{min-width:0}
.vf-step{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:500 11.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase}
.vf-step b{font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.vf-step em{display:none}
.vf-step i{flex:1 1 auto;height:1px;background:currentColor;opacity:.22}
.vf-photo{position:relative;isolation:isolate;margin:0 0 18px;overflow:hidden;aspect-ratio:4/5;border-radius:var(--rad,14px);background:#DAD7D3}
.vf-photo picture,.vf-photo img{display:block;width:100%;height:100%}
.vf-photo img{object-fit:cover;transition:transform 900ms var(--ease),filter var(--t) var(--ease)}
.vf-item h3{margin:0 0 8px;font:500 26px/1.08 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.home2 .vf .vf-line{margin:0;font-size:15.5px;line-height:1.5;text-wrap:pretty}

@media (max-width:959px){
  .story-thread{display:none!important}          /* the cards carry their own count, so there is no line to draw down the page */
  .vf{
    --vf-top:var(--header-h);                     /* where the first card parks: 12px under the condensed (60px) header */
    --vf-step:6px;                                /* how much of each earlier card stays in view */
    --vf-vh:100vh;
    --vf-room:calc(var(--vf-vh) - var(--vf-top) - 3 * var(--vf-step) - 65px - 12px);   /* the tallest card that still clears the price bar (65px) by 12px when it is the fourth on the pile */
    --vf-loose:clamp(0px,calc((430px - var(--vf-room)) * 999),4000px);   /* 0 on a phone held upright. On a very short screen (a phone on its side) it lets the cards go: a plain list, full pictures, no stacking */
    padding:var(--sp-sec) 0 0}
  @supports (height:100svh){.vf{--vf-vh:100svh}}   /* the small viewport: card size does not change when the browser's own bars slide away */
  .vf-head h2{max-width:11ch;margin-bottom:var(--sp-group)}
  .vf-item{--i:0;position:-webkit-sticky;position:sticky;top:calc(var(--vf-top) + var(--i) * var(--vf-step) - var(--vf-loose));
    display:flex;flex-direction:column;max-width:420px;max-height:calc(var(--vf-room) + var(--vf-loose));margin-inline:auto;padding:0;overflow:hidden;border-radius:var(--rad,14px);
    background:#0F1A3D;
    transform-origin:50% 0;scale:calc(1 - var(--vf-d,0) * .02)}   /* --vf-d: how many cards lie over this one (set by the script); each eases it back 2% */
  .vf-item:nth-child(2){--i:1}
  .vf-item:nth-child(3){--i:2}
  .vf-item:nth-child(4){--i:3}
  .vf-item::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(191,221,213,.26);pointer-events:none}   /* one hairline ring, drawn over the photograph */
  .vf-item + .vf-item{margin-top:16px;box-shadow:0 -10px 22px -16px rgba(1,4,14,.6)}   /* the leading edge throws a soft shadow on the card it covers */
  .js .vf-item.reveal{opacity:1;transform:none;transition:none}   /* a card arrives by being scrolled into place; it never fades in over the one beneath */
  .vf-photo{flex:0 1 auto;width:100%;min-height:0;margin:0;border-radius:0;background:#0A1330}   /* 4:5 where the screen allows; on a shorter screen only the picture gives way */
  .vf-photo picture{position:absolute;inset:0}   /* the picture fills the frame whatever height the frame ends up */
  .vf-item:nth-child(1) .vf-photo img{object-position:50% 62%}   /* where each picture holds when a shorter screen trims it */
  .vf-item:nth-child(2) .vf-photo img{object-position:50% 46%}
  .vf-item:nth-child(3) .vf-photo img{object-position:50% 36%}
  .vf-item:nth-child(4) .vf-photo img{object-position:50% 58%}
  .vf-item h3{flex:none;margin:18px 18px 0;font-size:clamp(20px,7.2vw,26px);line-height:28px;color:#fff}
  .home2 .vf .vf-line{flex:none;min-height:4.5em;margin:8px 18px 18px;font-size:clamp(14px,4.4vw,15.5px);line-height:1.5;text-wrap:balance;color:#C7CCDA}   /* room for three lines on every card, so the four are the same height; balanced, so no line ends on one stray word */
  .vf-step{flex:none;gap:10px;margin:15px 18px 13px;color:var(--sea)}   /* the head of the card: 01 / 04, the progress line, the step */
  .vf-step em{display:block;margin-left:-4px;font-style:normal;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#8790AB}
  .vf-step i{order:1;position:relative;background:rgba(255,255,255,.16);opacity:1}
  .vf-step i::after{content:"";position:absolute;left:0;top:-.5px;height:2px;width:calc((var(--i) + 1) * 25%);background:var(--sea)}   /* the line fills a quarter with each step */
  .vf-step span{order:2;margin-right:-.2em;color:#C7CCDA}   /* -.2em: the tracking after the last letter, so the word ends on the margin */
}
@media (min-width:960px){
  .home2 .vf{min-height:var(--room);display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,4.6svh,72px) 0}
  .vf-head h2{font-size:clamp(34px,min(4.6vw,7.6svh),66px);margin-bottom:clamp(18px,4.4svh,48px)}
  .vf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.2vw,32px);align-items:start}
  .vf-item:nth-child(even){margin-top:clamp(14px,5.4svh,56px)}       /* the stagger: every second frame hangs lower */
  .vf-step{color:var(--sea-ink)}
  .vf-step span{color:#34312F}
  .vf-photo{margin-bottom:clamp(12px,2svh,20px);max-height:clamp(170px,calc(var(--room) - 336px),460px);width:100%}
  .vf-item h3{font-size:clamp(21px,min(1.9vw,3.2svh),28px);color:#111}
  .home2 .vf .vf-line{font-size:clamp(14.5px,1.9svh,15.5px);color:#4A4643}
}
@media (hover:hover) and (min-width:960px){
  .vf-item:hover .vf-photo img{transform:scale(1.035)}
  .vf-row:has(.vf-item:hover) .vf-item:not(:hover) .vf-photo img{filter:saturate(.55) brightness(.97)}
}
.home2 .cards .pill{border-radius:0 0 0 var(--r)}   /* the tab in the plan card corner follows the corner system */


/* ============ Wash and wax band (v53): one rounded navy card between the plans and where the boat lives ============ */
.wwb{padding:0 0 var(--sp-sec,56px)}
.wwb-card{display:grid;gap:18px;padding:26px 22px;border-radius:var(--rad);background:#08102B;color:#C7CCDA}
.wwb-tag{margin:0 0 12px;font:500 11.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--sea)}
.home2 .wwb-card h2{margin:0 0 8px;font-size:clamp(30px,8.4vw,40px);line-height:1;color:#fff}
.wwb-copy p:last-child{margin:0;font-size:16px;line-height:1.45;color:#C7CCDA}
.wwb-price{display:flex;align-items:baseline;gap:8px;margin:0;color:#C7CCDA}
.wwb-price b{font:600 34px/1 var(--font);letter-spacing:-.035em;color:#fff}
.wwb-price span{font-size:15px}
.wwb-card .btn{background:#F5F4F1;border-color:#F5F4F1;color:#08102B;justify-self:start}
@media (hover:hover){.wwb-card .btn:hover{background:#fff;border-color:#fff}}
@media (min-width:760px){
  .wwb-card{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(24px,3.6svh,36px) clamp(28px,3vw,44px)}
  .home2 .wwb-card h2{font-size:clamp(30px,3.2vw,42px)}
  .wwb-price b{font-size:clamp(34px,3.4vw,44px)}
}
@media (min-width:960px){.wwb{padding:0 0 clamp(20px,4svh,48px)}}
@media (min-width:960px) and (max-height:750px){.home2 .taps[data-field="plan"]{gap:8px}}   /* six plan options still fit one short screen */

/* ============ Review fixes (v56): small-phone and edge cases confirmed by the 2026-10-05 review ============ */
@media (max-width:399px){.home2 .taps[data-field="kept"]{grid-template-columns:1fr}}   /* "Where is it kept?" in one column, so the form never grows wider than the screen */
@media (max-width:389px){
  .home2 .stickybar i{display:none}                       /* the bottom bar's size text no longer runs into "Text us" */
  .rp-pill{padding:2px 7px;font-size:10px}                /* map pills: Palm Harbor and Dunedin no longer overlap, Tampa stays on screen */
}
@media (max-width:359px){.rvn .rv-cta{flex-wrap:wrap}}

/* ============ Accessibility fixes (v57): confirmed by the 2026-10-05 review ============ */
/* Keyboard focus ring: mint on the navy sections that sit outside the dark colour scope */
.home2 :is(.rp,.rvn,.vf,.sc,.av,.bigboat,.wwb-card,.stickybar) :focus-visible{outline-color:#BFDDD5}
/* "Tampa Bay" over the daylight photo: a slightly deeper centre on tablets and short laptops, where the label sat on light patches */
@media (min-width:760px) and (max-width:1100px),(min-width:760px) and (max-height:700px){
  .rv-bg::after{background:
    radial-gradient(ellipse 72% 62% at 50% 46%,rgba(7,14,40,.62) 0%,rgba(6,12,36,.62) 58%,rgba(5,10,30,.84) 100%),
    linear-gradient(180deg,rgba(5,10,30,.72) 0%,rgba(5,10,30,0) 24%,rgba(5,10,30,0) 66%,#050A1E 100%)}
}
/* hero button row: "From $125 / mo" goes under the button below 340px (side by side it is about 315px wide and ran past the margins).
   At the end of the file on purpose: the base .rv-cta/.rv-from rules come later than the other small-screen blocks. */
@media (max-width:339px){.rv-cta{flex-direction:column;gap:14px}.rv-from{text-align:center}}