@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-400i.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(assets/fonts/geist-100-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(assets/fonts/geist-100-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(assets/fonts/geist-100-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================ tokens ==== */
:root {
  --sc-canvas: #EEF3F4;  --sc-surface: #FFFFFF;
  --sc-ink: #0F1E2B;     --sc-ink-soft: #4A6070;
  --sc-accent: #36A8AB;  --sc-accent-ink: #0F1E2B;
  --sc-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;  /* display carries the voice: one serif, one weight, italic for emphasis */
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 205 45% 12%;
  --bar: 3.5rem;
}
html { background: var(--sc-canvas); }
.sc-grain { opacity: .035; mix-blend-mode: multiply; }
/* The engine oversizes the grain layer by 50 percent on every side; Chrome logs that first layout as a
   full-viewport shift (score 1.0) on mobile and Lighthouse counts it. A viewport-sized layer does not. */
.sc-grain::before { inset: 0; }
.sc-display, .word, .label__title, .card h3, .boat__name, .close__lede { font-family: var(--sc-font-display); font-weight: 400; }
.word { font-size: clamp(2.6rem, 1.7rem + 3.2vw, 4.8rem); line-height: .98; letter-spacing: -.015em; margin: 0; text-wrap: balance; color: var(--sc-ink); }
/* a quiet tracked label above every section heading: a numeral and a short accent rule */
.kicker { display: flex; align-items: center; gap: .75rem; margin: 0 0 var(--sc-3); font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.kicker::before { content: ""; width: 2rem; height: 1px; background: var(--sc-accent); }
[data-sc-progress] { height: 3px; }

/* ============================================================== chrome === */
.bar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar); z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-5); padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 84%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sc-hairline);
}
.bar__brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--sc-ink); }
.mark { width: 2.1rem; height: 2.1rem; color: var(--sc-ink); flex: none; }
.bar__name { font-family: var(--sc-font-text); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.bar__name em { font-style: normal; font-weight: 500; color: var(--sc-ink-soft); }
.bar__index { display: flex; gap: .35rem; margin-inline: auto; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem .35rem .55rem;
  border-radius: var(--sc-r-pill); font-size: var(--sc-t-sm); text-decoration: none; color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong); background: transparent;
  transition: transform 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.chip i { width: .75rem; height: .75rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); flex: none; }
.chip:hover { transform: scale(1.04); }
.chip.is-on { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.bar__tel { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: .04em; color: var(--sc-ink); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar__tel:hover { text-decoration: underline; text-underline-offset: .22em; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; height: 2.6rem; padding-inline: 1.2rem;
  border-radius: var(--sc-r-pill); background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  box-shadow: var(--sc-e1), var(--sc-edge);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.cta:hover { transform: translateY(-1px); box-shadow: var(--sc-e2), var(--sc-edge); }
.cta:active { transform: translateY(1px) scale(.98); }
.cta--big { height: 3.2rem; padding-inline: 1.6rem; font-size: var(--sc-t-lg); }

/* Reserve the pinned acts' scroll room before the engine runs (it sets span x 100vh at mount), so the
   first paint and the mounted layout agree and nothing below the hero shifts. */
#one { height: 300vh; }
#one > .drop { height: 100vh; height: 100svh; }  /* the stage height before the engine sets it, so the centred hero box does not jump at mount */
#boats { height: 400vh; }
#quote { height: 130vh; }

/* ============================================================= the drop == */
.drop { display: grid; place-items: center; background: #cdd8dc; --fw: min(calc(100svh * 1.0949), calc(100vw - 19rem)); }  /* the engine makes the stage sticky and clips it; do not override position or overflow here */
/* Desktops: frame 015 cropped to the Sea Ray and its lift (2330 x 2128; the neighbours' boat names are outside the crop,
   Massimo 2026-09-06 "crop tighter"), contained by the stage height and anchored right, so the copy holds an ink panel on
   the left (the phone treatment: ink band, white serif). The frame's left edge feathers into the panel over the
   neighbour's dark cover. --fw is the frame width; the label is sized from the same value. */
.drop__box--phone, .drop__backdrop, .drop__scrim--phone { display: none; }
.drop__box--wide { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #0B1620; }
.drop__frame {
  position: absolute; inset: 0; perspective: 1400px; overflow: hidden;
  transform: scale(var(--push, 1)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: --tx 120ms, --ty 120ms; will-change: transform;
}
.drop__frame--wide {
  inset: auto; right: 0; top: 50%; width: var(--fw); aspect-ratio: 2330 / 2128;
  transform: translateY(-50%) scale(var(--push, 1)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
}
.drop__frame--wide::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(to right, #0B1620 0%, rgb(11 22 32 / .55) 3%, rgb(11 22 32 / 0) 8%); }
.drop__base { position: absolute; inset: 0; width: 100%; height: 100%; }
.drop__piece, .drop__shadow { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
.drop__skin { position: absolute; inset: 0; }
.drop__skin img { position: absolute; inset: 0; width: 100%; height: 100%; }
.drop__shadow { filter: blur(10px); }
.drop__shadow-i { position: absolute; inset: 0; background: rgb(8 20 30 / .7); }
.drop__label { position: absolute; z-index: 5; left: var(--sc-gutter); bottom: var(--sc-7); width: calc(100vw - var(--fw) - 2 * var(--sc-gutter)); max-width: 34rem; min-width: 15rem; display: flex; flex-direction: column; gap: var(--sc-4); color: var(--sc-canvas); }
.label__title { font-size: clamp(2.4rem, 1.2rem + 2.6vw, 4.4rem); line-height: .98; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.label__title em { font-style: italic; }
.label__spec { margin: 0; font-size: var(--sc-t-base); line-height: 1.4; letter-spacing: var(--sc-track-snug); color: #C6D2D8; max-width: 34ch; text-wrap: pretty; }
/* the per-piece annotation: one fixed-height line, so the headline and the button never move */
.label__live { margin: 0; height: 1.6em; line-height: 1.6em; font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label__live.is-fresh { animation: isk-fresh 220ms var(--sc-ease-out); }
@keyframes isk-fresh { from { opacity: .2; } to { opacity: 1; } }
.label__act { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; margin-top: var(--sc-2); }
.label__note { margin: 0; max-width: 26ch; color: #C6D2D8; font-size: var(--sc-t-xs); line-height: 1.45; text-wrap: pretty; }

/* ============================================================= the work == */
.act-work { padding-block: var(--sc-7) var(--sc-9); }
.work__head { display: grid; gap: var(--sc-4); margin-bottom: var(--sc-7); }
.stack { max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter) 8vh; display: flex; flex-direction: column; gap: 12vh; }
.card {
  position: sticky; top: calc(var(--bar) + 1.25rem); height: min(62vh, 40rem);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--sc-surface); border-radius: var(--sc-r-lg);
  overflow: hidden; box-shadow: var(--sc-e3), var(--sc-edge);
}
.stack .card:nth-child(2) { top: calc(var(--bar) + 1.25rem + 12px); }
.stack .card:nth-child(3) { top: calc(var(--bar) + 1.25rem + 24px); }
.stack .card:nth-child(4) { top: calc(var(--bar) + 1.25rem + 36px); }
.stack .card:nth-child(5) { top: calc(var(--bar) + 1.25rem + 48px); }
.card img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.card__copy { display: flex; align-items: baseline; gap: var(--sc-6); padding: var(--sc-5) var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.card h3 { font-size: var(--sc-t-xl); line-height: 1.05; letter-spacing: -.01em; margin: 0; flex: none; min-width: 11rem; }
.card p { margin: 0; color: var(--sc-ink-soft); max-width: 48ch; text-wrap: pretty; }
.card--inset { grid-template-rows: minmax(0, 1fr) auto; padding-top: var(--sc-6); }
.card--inset img { width: calc(100% - 2 * var(--sc-6)); margin-inline: auto; border-radius: var(--sc-r-md); }
.card--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.card--split .card__copy { flex-direction: column; justify-content: center; border-top: 0; border-left: 1px solid var(--sc-hairline); gap: var(--sc-3); }
.card--drawing img { object-fit: contain; background: var(--sc-ink); padding: var(--sc-5); }

/* ============================================================ the boats == */
.rail { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); height: 100svh; padding: var(--bar) var(--sc-gutter) 0; }
.rail__lead { flex: none; width: min(30rem, 62vw); display: grid; gap: var(--sc-4); }
.boat { flex: none; width: clamp(18rem, 54vw, 60rem); --wipe: 0; --tip: 0; --arrive: 1; opacity: var(--arrive); transform: rotate(calc(var(--tip) * 1deg)); transform-origin: 50% 100%; }
.boat[data-boat="wellcraft"], .boat[data-boat="yamaha"], .boat[data-boat="nautic"], .boat[data-boat="polar"] { width: clamp(15rem, 30vw, 32rem); }
.boat__pic { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e2); background: #dfe6e8; }
.boat[data-boat="wellcraft"] .boat__pic { aspect-ratio: 3 / 4; }
.boat[data-boat="yamaha"] .boat__pic, .boat[data-boat="nautic"] .boat__pic { aspect-ratio: 5 / 6; }
.boat[data-boat="polar"] .boat__pic { aspect-ratio: 1 / 1; }
.boat__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* before-to-after wipe: a clipped wrapper slides in while its image slides the other way, so the after photo
   stays put and only the reveal edge moves (transforms only, works in Safari, which does not re-read a
   custom property inside a mask gradient). A hairline edge follows it so the seam reads as a reveal. */
.boat__after-wrap { position: absolute; inset: 0; overflow: hidden; transform: translate3d(calc((var(--wipe) - 1) * 100%), 0, 0); will-change: transform; }
.boat__after-wrap .boat__after { position: absolute; inset: 0; transform: translate3d(calc((1 - var(--wipe)) * 100%), 0, 0); will-change: transform; }
.boat__edge { position: absolute; top: 0; bottom: 0; left: calc(var(--wipe) * 100%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .18); opacity: calc(var(--wipe) * (1 - var(--wipe)) * 4); pointer-events: none; }
/* desktops (set by isk.js): the reveal is a feathered inline mask on the after image; no slide, no hairline */
.boat.is-feather .boat__after-wrap, .boat.is-feather .boat__after-wrap .boat__after { transform: none; will-change: auto; }
.boat.is-feather .boat__edge { display: none; }
.boat__label { margin: var(--sc-4) 0 0; display: grid; gap: .3rem; max-width: 56ch; text-wrap: pretty; }
.boat__name { font-size: var(--sc-t-xl); line-height: 1.05; letter-spacing: -.01em; color: var(--sc-ink); }
.boat__label span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
/* desktops: the closing note sits beside the last card, so the card comes to rest left of centre and wipes like the
   others with its before photo fully in view first (under it, the card rested at 0.72 vw and wiped while entering) */
.rail__last { flex: none; display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-right: var(--sc-gutter); }
.rail__last .boat { flex: none; width: clamp(15rem, 30vw, 32rem); }
.rail__note { flex: none; width: min(26rem, 34vw); min-width: 0; }
.rail__note .sc-lede { font-size: var(--sc-t-base); }

/* ========================================================== the material == */
.material { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sc-8); align-items: center; padding-block: var(--sc-8) var(--sc-7); }
.material__pic { margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e2); will-change: clip-path; }
/* the iris is page-local (isk.js): it opens while the photo travels through the middle of the screen. Closed until the script runs, motion on only. */
@media (prefers-reduced-motion: no-preference) { .material__pic { clip-path: circle(0% at 50% 50%); } }
.material__pic img { width: 100%; height: auto; }
.material__copy { display: grid; gap: var(--sc-5); }
.layers { margin: 0; padding: var(--sc-4) var(--sc-4) var(--sc-3); background: var(--sc-surface); border-radius: var(--sc-r-md); box-shadow: var(--sc-e1), var(--sc-edge); color: var(--sc-ink); }
.layers svg { display: block; width: 100%; height: auto; overflow: visible; }
.layers text { font-family: var(--sc-font-text); font-size: 15px; font-weight: 500; fill: var(--sc-ink); }
.layers .layers__cap { fill: var(--sc-ink-soft); font-weight: 400; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.facts li { position: relative; padding-left: 1.1rem; color: var(--sc-ink); text-wrap: pretty; }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sc-accent); }
/* the SeaDek options: a strip of the 32 colours that names itself under the pointer, then four short rows */
.options { display: grid; gap: var(--sc-6); padding-bottom: var(--sc-8); }
.options__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap; }
.options__title { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); line-height: 1.05; letter-spacing: -.01em; margin: 0; color: var(--sc-ink); }
.options__live { margin: 0; height: 1.6em; line-height: 1.6em; font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: .75rem; justify-items: start; }
.swatches li { position: relative; width: 100%; max-width: 3.1rem; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(15 30 43 / .14), var(--sc-e1); transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); cursor: default; }
.swatches li::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(135deg, rgb(255 255 255 / .11) 0 1px, transparent 1px 3px); }  /* the brushed grain */
.swatches li:hover, .swatches li.is-on { transform: scale(1.16); box-shadow: inset 0 0 0 1px rgb(15 30 43 / .2), var(--sc-e2); z-index: 1; }
.swatches li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-7); margin: 0; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.spec div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sc-4); align-items: baseline; }
.spec dt { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.spec dd { margin: 0; color: var(--sc-ink); text-wrap: pretty; }

/* ============================================================== the close == */
.close { display: grid; grid-template-rows: 1fr auto; padding-top: var(--bar); }
.close__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sc-8); align-items: center; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.close__copy { display: grid; gap: var(--sc-4); }
.close__lede { margin: 0; font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.22; letter-spacing: -.005em; max-width: 24ch; text-wrap: pretty; color: var(--sc-ink); }
.close__turn { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.45; max-width: 36ch; text-wrap: pretty; }
.close__call { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.45; }
.close__call a, .foot a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
/* the form sits on the canvas: tracked labels, hairline fields, one accent button. No card. */
.qform { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-6) var(--sc-6); padding: var(--sc-5) 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.qform label { display: grid; gap: .55rem; font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); min-width: 0; }
.qform input { width: 100%; min-width: 0; height: 2.6rem; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); border-radius: 0; padding: 0; background: transparent; color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-lg); letter-spacing: 0; text-transform: none; transition: border-color 140ms var(--sc-ease-out); }
.qform input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 55%, transparent); }
.qform input:focus-visible { outline: 0; border-bottom: 2px solid var(--sc-accent); }
.qform .cta { margin-top: var(--sc-2); }
.qform__wide { grid-column: 1 / -1; }
.qform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.qform .cta { grid-column: 1 / -1; justify-self: start; }
.qform__status { grid-column: 1 / -1; margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot { display: flex; align-items: center; gap: var(--sc-4); padding: var(--sc-5) var(--sc-gutter) calc(var(--sc-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: .04em; }
.foot p { margin: 0; }
.mark--foot { width: 3rem; height: 3rem; }

/* ================================================================ phone === */
.phonebar { display: none; }
.index { border: 0; border-radius: var(--sc-r-lg); padding: var(--sc-6); background: var(--sc-surface); color: var(--sc-ink); width: min(92vw, 24rem); box-shadow: var(--sc-e3); }
.index[open] { display: grid; gap: .6rem; }
.index::backdrop { background: rgb(15 30 43 / .5); }
.index form { justify-self: end; }
.index__close { border: 0; background: transparent; color: var(--sc-ink-soft); cursor: pointer; padding: .25rem .5rem; }
.index .chip { justify-content: flex-start; }
.index .label__kicker { margin: 0; font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
@media (max-width: 1439px) { .bar__tel { display: none; } }  /* five chips, the number and the button need 1440 to sit on one line */
@media (max-width: 1300px) {
  .bar__index, .bar__tel, .cta--bar { display: none; }
  .phonebar { display: flex; position: fixed; inset: auto 0 0 0; z-index: var(--sc-z-chrome); height: calc(3.25rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--sc-ink); transition: transform 260ms var(--sc-ease-out); }
  body.is-quote .phonebar { transform: translateY(110%); }
  .phonebar__btn { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--sc-canvas); text-decoration: none; border: 0; background: transparent; font-weight: 600; font-size: var(--sc-t-base); }
  .phonebar__btn--cta { background: var(--sc-accent); color: var(--sc-accent-ink); }
  .foot { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) {
  .drop__box--wide { display: none; }
  .drop__backdrop { display: block; position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(26px) saturate(1.05) brightness(.9); pointer-events: none; }
  .drop__scrim--phone { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(to bottom, rgb(15 30 43 / .82) 0%, rgb(15 30 43 / .66) 20%, rgb(15 30 43 / .3) 31%, transparent 42%); }
  /* the box is the whole stage; the frame is anchored above the phone bar and starts zoomed 1.7x on the cockpit
     (transform-origin at the transom, so the platform never leaves the screen), pulling back to the whole boat
     before the platform pieces land. --zoom comes from isk.js. */
  .drop__box--phone { display: block; position: absolute; inset: 0; z-index: 3; overflow: hidden; background: transparent; }
  .drop__frame--phone { inset: auto; left: 0; right: 0; bottom: calc(3.25rem + env(safe-area-inset-bottom) + var(--sc-3)); margin-inline: auto; width: 100vw; aspect-ratio: 1814 / 2268; background: #cdd8dc; box-shadow: 0 0 0 1px rgb(15 30 43 / .12); transform-origin: 50% 78%; transform: scale(calc(var(--push, 1) * var(--zoom, 1))) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); }
  .drop__label { top: calc(var(--bar) + var(--sc-3)); bottom: auto; left: var(--sc-4); right: var(--sc-4); width: auto; max-width: none; min-width: 0; gap: var(--sc-2); color: var(--sc-canvas); }
  .label__title { font-size: var(--sc-t-2xl); }
  .label__spec { font-size: var(--sc-t-sm); max-width: 34ch; color: #C6D2D8; }
  .label__act { display: none; }
  .card { height: min(64vh, 34rem); }
  .card__copy { flex-direction: column; gap: var(--sc-2); padding: var(--sc-4) var(--sc-5); }
  .card h3 { min-width: 0; }
  .card--split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .card--split .card__copy { border-left: 0; border-top: 1px solid var(--sc-hairline); }
  .rail__lead { width: 78vw; }
  .boat { width: 86vw; }
  .boat[data-boat="wellcraft"], .boat[data-boat="yamaha"], .boat[data-boat="nautic"] { width: 70vw; }
  .rail__last { display: grid; gap: var(--sc-5); align-content: center; width: 70vw; box-sizing: content-box; }
  .rail__last .boat { width: 100%; }
  .rail__note { width: 100%; }
  .material { grid-template-columns: 1fr; gap: var(--sc-6); }
  .options { gap: var(--sc-5); padding-bottom: var(--sc-8); }
  .options__head { flex-direction: column; align-items: flex-start; gap: var(--sc-2); }
  .swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; }
  .swatches li { max-width: none; }
  .spec { grid-template-columns: 1fr; }
  .spec div { grid-template-columns: 5.5rem minmax(0, 1fr); }
  #quote > .close { height: auto; min-height: 100svh; overflow: visible; }
  .close__inner { grid-template-columns: 1fr; gap: var(--sc-4); align-content: start; padding-top: var(--sc-4); padding-bottom: var(--sc-4); }
  .close__copy { gap: var(--sc-3); }
  .close .word { font-size: var(--sc-t-2xl); }
  .close__lede { font-size: var(--sc-t-lg); }
  .close__turn { font-size: var(--sc-t-sm); }
  .qform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-4) var(--sc-4); padding: var(--sc-4) 0 0; }
  .qform input { height: 2.6rem; }
  .qform .cta { height: 2.8rem; }
  .foot { padding: var(--sc-3) var(--sc-gutter) calc(3.75rem + env(safe-area-inset-bottom)); }
  .mark--foot { width: 2.2rem; height: 2.2rem; }
}
@media (max-width: 860px) and (max-height: 720px) {
  /* short phones: a smaller photo and no spec line keep the label off the boat */
  .drop__frame--phone { width: min(100vw, calc(54svh * 0.8)); }
  .label__spec { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .drop__piece { opacity: 1 !important; transform: none !important; }
  .drop__shadow { display: none; }
  .drop__frame { transform: none !important; }
  .drop__frame--wide { transform: translateY(-50%) !important; }
  .boat__after-wrap, .boat__after-wrap .boat__after { transform: none !important; }
  .boat__edge { display: none; }
  .boat { opacity: 1 !important; transform: none !important; }
  .label__live { animation: none !important; }
}