/* HeySea motion layer v26 — approved picks 2026-09-28 (Motion Lab), image/awards reveal revised same day. Loaded after each page's own CSS. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1)}

/* Section reveals: Proposed */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .stagger>.reveal{transition-delay:calc(var(--i,0) * 50ms)}

/* Image reveal style: Visible and settling (2026-09-28, replaces the bottom-up wipe that read as slow loading).
   The photo is never cropped; it fades quickly and breathes from 4% larger into place. The script starts it just
   before the frame scrolls in and only once the photo is ready, so an empty frame is never shown. */
.img-reveal{overflow:hidden}
.irw{display:block}
.js .img-reveal>img{opacity:0;transform:scale(1.04);transition:opacity 450ms var(--ease-out),transform 900ms var(--ease-out)}
.js .img-reveal.in>img{opacity:1;transform:none}

/* Awards: the row lands as one composed moment; soft fade, no slide, short cascade */
.js .awards.reveal{opacity:1;transform:none}
.js .awards.reveal>img{opacity:0;transition:opacity 600ms var(--ease-out)}
.js .awards.reveal.in>img{opacity:.85}
.js .awards.reveal>img:nth-child(2){transition-delay:50ms}
.js .awards.reveal>img:nth-child(3){transition-delay:100ms}
.js .awards.reveal>img:nth-child(4){transition-delay:150ms}
.js .awards.reveal>img:nth-child(5){transition-delay:200ms}
.js .awards.reveal>img:nth-child(6){transition-delay:250ms}

/* Homepage opening: Editorial rise (first visit per session) */
.intro .hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.intro .hl>span{display:inline-block}
.hs-opening nav,.hs-opening .hero-slider .slide{opacity:0}
.hs-intro-wait .intro .label,.hs-intro-wait .intro .hl>span,.hs-intro-wait .intro .body,.hs-intro-wait .intro .gs-foot{opacity:0}

/* Gallery carousel: Glide */
.gallery .rail.glide{overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
.gallery .rail.glide:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.gtrack{display:flex;gap:var(--gap,16px);width:100%;transition:transform 650ms var(--ease-in-out)}
.gtrack.drag{transition:none}
.gtrack img{-webkit-user-drag:none;user-select:none}

/* Lightbox: Proposed (scrim split out so the photo can travel independently) */
.lb{background:transparent;opacity:1;visibility:hidden;transition:visibility 0s linear 230ms}
.lb.open{visibility:visible;transition:visibility 0s}
.lb::before{content:'';position:absolute;inset:0;background:rgba(20,18,16,.94);opacity:0;transition:opacity 200ms ease}
.lb.open::before{opacity:1;transition-duration:260ms}
.lb figure{position:relative}
.lb img{touch-action:pan-y;user-select:none;-webkit-user-drag:none}
.lb button{transition:border-color 160ms ease,scale 140ms var(--ease-out)}
.lb button:active{scale:.95}

/* Models menu: Proposed */
nav .menu{display:flex;opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:20px 0;transition:opacity 120ms var(--ease-out),transform 120ms var(--ease-out),visibility 0s linear 120ms}
nav li.has-menu.open .menu,html:not(.js) nav li.has-menu:hover .menu{opacity:1;visibility:visible;transform:none;transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s}

/* Hover and press: Proposed */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color 160ms ease,border-color 160ms ease,transform 140ms var(--ease-out)}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--accent);clip-path:inset(0 100% 0 0);transition:clip-path 180ms var(--ease-out);pointer-events:none}
.btn.solid::before{display:none}
.btn:active{transform:scale(.97)}
.fleet .draw img{transition:transform 220ms var(--ease-out)}
.fleet .tile{transition:scale 140ms var(--ease-out)}
.fleet .tile:active{scale:.98}
.cookie button{transition:scale 140ms var(--ease-out)}
.cookie button:active{scale:.97}
.cc .close{transition:scale 140ms var(--ease-out)}
.cc .close:active{scale:.92}
@media (hover:hover) and (pointer:fine){
  .btn:not(.solid):hover{background:transparent;color:#fff;border-color:var(--accent)}
  .btn:hover::before{clip-path:inset(0 0 0 0);transition-duration:280ms}
  .link:hover::after{transform:scaleX(1);animation:hs-redraw 460ms var(--ease-in-out)}
  .fleet .tile:hover .draw img{transform:translateX(4px)}
}
@keyframes hs-redraw{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}55%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* Contact card and cookie banner: Proposed */
.cc-scrim{transition:opacity 180ms ease}
.cc-scrim.open{transition-duration:240ms}
.cc{opacity:0;transform:translateY(10px) scale(.98);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.cc-scrim.open .cc{opacity:1;transform:none;transition:opacity 300ms var(--ease-drawer),transform 300ms var(--ease-drawer)}
.js .cookie:not(.ck-live){visibility:hidden}

/* Reduced motion: keep fades that aid comprehension, drop movement */
@media (prefers-reduced-motion:reduce){
  .js .reveal{transform:none;transition:opacity 200ms ease}
  .js .img-reveal>img{transform:none;transition:opacity 200ms ease}
  .js .awards.reveal>img{transition:opacity 200ms ease!important;transition-delay:0ms!important}
  .gtrack{transition:none}
  nav .menu{transform:none}
  .cc{transform:none!important}
  .cc-scrim,.cc{transition:opacity 150ms ease!important}
  .link:hover::after{animation:none}
  .fleet .tile:hover .draw img{transform:none}
}


/* ---------- Launch review fixes (2026-09-28) ---------- */
/* A1: real checkbox stays focusable; the drawn square shows focus */
.checkbox-label{position:relative}
.checkbox-label input[type=checkbox]{display:block;position:absolute;left:0;top:.125rem;width:1.125rem;height:1.125rem;margin:0;opacity:0;cursor:pointer}
.checkbox-label input[type=checkbox]:focus-visible+.checkbox-custom{outline:1px solid var(--accent);outline-offset:3px}
/* A2: labels read aloud, not shown */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* A4: footer titles and bottom row pass 4.5:1 on the footer color */
.f-title{opacity:.72;line-height:1.5}
.f-bottom>span{opacity:.72}
/* A7: skip link, visible only on keyboard focus */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;font-family:var(--serif);font-style:italic;font-size:16px;transition:top 160ms var(--ease-out)}
.skip:focus{top:16px}
main:focus{outline:none}
/* A10: footer phone and email at least 24px tall */
.f-contact a{display:inline-block;padding:3px 0}
.f-top .f-contact{margin-top:-4px}
/* S5: Design hero heading holds all three lines */
.d-hero .copy h1.dh1{font-size:inherit;letter-spacing:normal;margin-top:22px;display:flex;flex-direction:column;align-items:center}
.d-hero .copy .dh1 .ciro{font-family:var(--serif);font-size:clamp(56px,7vw,104px);letter-spacing:.06em;line-height:1.05}
.d-hero .copy .dh1 .ed,.d-hero .copy .dh1 .sub{line-height:1.4}
/* C1: texting consent reads as secondary to the main consent */
.checkbox-label.sms-consent{font-size:.75rem;opacity:.95}
/* contrast leftovers */
.form-label .opt{opacity:1}
.prevnext .label{color:#fdf8f5;opacity:1}

/* A8: gallery controls are buttons; look identical to the old links */
button.arrow{padding:0;font:inherit;cursor:pointer;background:transparent}
button.link{background:none;border:0;padding:0 0 4px;color:inherit;cursor:pointer;font-weight:inherit;line-height:inherit;letter-spacing:inherit;text-align:left}

/* C6: pricing and renderings note */
.price-note{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.5;color:var(--muted);margin-top:8px}
.price-note.list{text-align:center;max-width:640px;margin:48px auto 0;padding:0 var(--gutter,24px)}

/* former series names (SEO/AEO) */
.series-note{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);margin:12px 0 0}

/* keep drifting background marks inside their sections (no sideways page scroll) */
.intro,.split,.m-hero,.quote,section:has(>[data-wm]){overflow-x:clip}


/* ---------- Image drift (user pick 2026-09-28: stronger, like Zeelander) ----------
   Photos stay fully visible; the script moves them inside their frames as the page scrolls. */
.js [data-drift]{overflow:hidden;position:relative}
.js [data-drift]>:first-child{transform:scale(1.24);transform-origin:50% 50%;will-change:transform}
.js [data-drift="0.4"]>:first-child{transform:scale(1.096)}

/* ---------- Palette carousel (homepage "Built around you") ---------- */
.pc-stack{position:absolute;inset:0}
/* the photo and the palette names fit on one desktop screen together */
.fullwidth .pc-frame{height:clamp(320px,min(42vw,calc(100vh - 300px)),640px);height:clamp(320px,min(42vw,calc(100svh - 300px)),640px)}
.pc-stack figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1100ms cubic-bezier(.45,.05,.25,1)}
.pc-stack figure.on{opacity:1}
.pc-stack img{width:100%;height:100%;object-fit:cover;display:block}
.pc-names{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.pc-names button{font:inherit;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:20px 24px 22px;cursor:pointer;color:var(--muted);position:relative;transition:color 160ms ease}
.pc-names button+button{border-left:1px solid var(--line)}
.pc-n{display:block;font-family:var(--serif);font-size:24px;letter-spacing:.14em;text-transform:uppercase;color:inherit;line-height:1.2}
.pc-sw{display:flex;gap:5px;margin-top:12px}
.pc-sw i{width:14px;height:14px;border:1px solid rgba(45,33,31,.12)}
.pc-d{display:block;font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.6;margin-top:12px;max-width:38ch}
.pc-names button[aria-pressed="true"]{color:var(--ink)}
.pc-line{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.pc-names button[aria-pressed="true"] .pc-line{transform:scaleX(1);transition:transform 420ms var(--ease-out)}
.pc-names button.timing .pc-line{transform:scaleX(0);animation:hs-pc-tick 7000ms linear forwards}
.pc.paused .pc-names button.timing .pc-line{animation-play-state:paused}
@keyframes hs-pc-tick{to{transform:scaleX(1)}}
.pc-names button:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pc-names button:not([aria-pressed="true"]):hover{color:var(--ink)}}

@media (prefers-reduced-motion:reduce){
  .js [data-drift]>:first-child{transform:none!important}
  .pc-stack figure{transition-duration:200ms}
  .pc-names button.timing .pc-line{animation:none;transform:scaleX(1)}
}


/* ---------- Mobile header (<=900px), Zeelander-style: centred logo, menu icon on the right ---------- */
.m-toggle,.m-menu{display:none}
@media (max-width:900px){
  nav{height:72px;grid-template-columns:1fr auto 1fr;grid-template-areas:none;row-gap:0;padding:0 var(--gutter)}
  nav ul.left,nav ul.right{display:none!important}
  nav .logo{grid-area:auto;grid-column:2;justify-self:center}
  nav .logo img{height:34px}
  .m-toggle{grid-column:3;justify-self:end;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .m-toggle:focus-visible,.m-menu a:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
  .m-bars{position:relative;width:22px;height:13px;display:block}
  .m-bars i{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform 220ms var(--ease-out),top 220ms var(--ease-out),opacity 160ms ease}
  .m-bars i:nth-child(1){top:0}.m-bars i:nth-child(2){top:6px}.m-bars i:nth-child(3){top:12px}
  .m-toggle[aria-expanded="true"] .m-bars i:nth-child(1){top:6px;transform:rotate(45deg)}
  .m-toggle[aria-expanded="true"] .m-bars i:nth-child(2){opacity:0}
  .m-toggle[aria-expanded="true"] .m-bars i:nth-child(3){top:6px;transform:rotate(-45deg)}
  .m-menu{display:flex;align-items:center;justify-content:center;position:fixed;left:0;right:0;bottom:0;top:var(--nav-h,72px);z-index:19;background:var(--bg) url(heysea-mark.svg) 70% 58%/150% auto no-repeat;padding:24px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity 240ms var(--ease-out),visibility 0s linear 240ms}
  .m-menu::before{content:'';position:absolute;inset:0;background:var(--bg);opacity:.94;pointer-events:none}
  .m-menu.open{visibility:visible;opacity:1;transition:opacity 260ms var(--ease-out),visibility 0s}
  .m-list{position:relative;list-style:none;margin:0;padding:0;text-align:center}
  .m-list li{opacity:0;transform:translateY(8px);transition:opacity 260ms var(--ease-out),transform 360ms var(--ease-out)}
  .m-menu.open .m-list li{opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0) * 40ms)}
  .m-list a{display:block;padding:14px 0;min-height:44px;font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.25;color:var(--ink)}
  .m-list a[aria-current="page"]{color:var(--accent)}
  html.m-open{overflow:hidden}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .m-menu,.m-menu.open{transition:opacity 150ms ease,visibility 0s linear 150ms}
  .m-menu.open{transition:opacity 150ms ease,visibility 0s}
  .m-list li,.m-menu.open .m-list li{opacity:1;transform:none;transition:none}
  .m-bars i{transition:none}
}

/* ---------- Mobile pass (2026-09-28, user-approved list) ---------- */
/* touch: no double-tap zoom delay; overlays don't scroll the page behind; cookie banner clears the iPhone home bar */
a,button,label,input,select,textarea{touch-action:manipulation}
.cc-scrim,.lb{overscroll-behavior:contain}
html:has(.cc-scrim.open),html:has(.lb.open){overflow:hidden}
.cookie{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
/* Engineering grid: two columns until there is room for four */
@media (min-width:641px) and (max-width:1100px){
  .eng-grid{grid-template-columns:1fr 1fr}
  .eng-grid .cell:nth-child(3)::before{display:none}
}
/* model stats: three across on tablets and phones */
@media (max-width:1023px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,40px)}
  .stat .n{white-space:nowrap}
}
@media (max-width:767px){
  /* text first, then the photo, in side-by-side sections (Zeelander's mobile order, user 2026-09-28) */
  .split{grid-template-columns:minmax(0,1fr)}
  .split>.irw,.split>.img,.split>figure,.split>.ph{order:2}
  .split .text{max-width:none}
  .row .rowlink,.row.rev .rowlink,.row .rowimg,.row.rev .rowimg,.row .ph,.row.rev .ph{order:-1}
  /* model page: taller hero crop, compact stats */
  .hero-img .hero-photo{aspect-ratio:4/3}
  .stat .n{font-size:clamp(24px,7vw,34px)}
  .stat .n small{font-size:.42em;margin-left:2px}
  .stat .ico{width:34px;height:25px;margin-bottom:8px}
  /* model list rows: each spec value on one line */
  .row .spec{padding:0 clamp(10px,3.5vw,20px)}
  .row .spec .n{white-space:nowrap;font-size:clamp(24px,6.6vw,30px)}
  /* About / Engineering openers: readable text over the photo */
  .about-hero .scrim{background:linear-gradient(180deg,rgba(20,18,16,.5) 0%,rgba(20,18,16,.38) 45%,rgba(20,18,16,.7) 100%)}
  .about-hero .label{color:#fdf8f5;text-shadow:0 1px 12px rgba(0,0,0,.45)}
  .about-hero h1,.about-hero .body{text-shadow:0 1px 16px rgba(0,0,0,.3)}
  /* About timeline: wider cards */
  .tl-track .ms{width:78vw;padding-right:28px}
  /* minimum text sizes */
  .label,.f-title,.form-label,.ral,.row .spec .label,.row .foot,.stat .metric,.f-bottom>span,.f-legal a{font-size:12px}
  .price-note{font-size:13px}
  .hull .ral{font-size:12px}
  .stat .n small{font-size:max(12px,.42em)}
  .about-hero{flex-wrap:wrap}
  .about-hero:not(:has(.scrim))::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,18,16,.5) 0%,rgba(20,18,16,.22) 50%,rgba(20,18,16,.4) 100%)}
  .about-hero .inner{width:100%;box-sizing:border-box}
}
/* touch targets at least 44px tall */
@media (max-width:900px){
  footer li a,.f-contact a{display:inline-block;padding:11px 0}
  .f-legal a{display:inline-block;padding:14px 4px}
  .series>a.label{display:inline-block;padding:12px 0}
  label.model-check{min-height:44px;display:flex;align-items:center}
  label.checkbox-label{min-height:44px}
  .arrows .arrow,.tl-arrows .arrow,.prevnext .cell>a.arrow{width:44px;height:44px}
}


/* ---------- Zeelander-style phone layout (2026-09-28) ---------- */
@media (max-width:767px){
  :root{--gutter:clamp(24px,10vw,44px)}
  /* hero: tall portrait photo, inset from the edges */
  .hero-slider{padding:0}
  .hero-slider .slides{aspect-ratio:auto;height:calc(100vh - 72px);height:calc(100svh - 72px)} /* fills the screen under the header (user) */
  /* paired photos stack, full column width, caption beneath */
  .double{grid-template-columns:minmax(0,1fr);gap:56px}
  .double figure:nth-child(2){margin-top:0}
  .double figure:nth-child(2) figcaption{text-align:left}
  .double .dbl-img.tall{aspect-ratio:305/440}
  .double figcaption{margin-top:14px}
  /* wide photos run edge to edge */
  .fullwidth{padding-left:0;padding-right:0}
  /* model list: a vertical stack of sketch, name, price and arrow */
  .fleet .railwrap{margin:0}
  .fleet .rail{display:block;overflow:visible;padding:0}
  .fleet .tile{display:block;padding:36px 0 40px;position:relative}
  .fleet .tile::after{content:'';position:absolute;left:25%;right:25%;bottom:0;height:1px;background:var(--line)} /* divider at half width, centred (user) */
  .fleet .tile+.tile::before{display:none}
  .fleet .series{margin-top:48px}
  /* footer: one centred column, Zeelander order */
  .f-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
  .f-top,.f-mid{display:contents}
  .f-top .f-logo{order:1;margin-bottom:34px}
  .f-top .f-contact{order:2;align-items:center;text-align:center;margin-bottom:40px}
  .f-mid>div:nth-child(1){display:none} /* Info column hidden on phones (user); those pages are in the menu */
  .f-mid>div:nth-child(2){order:4;margin-bottom:40px}
  .f-follow{order:5;margin-bottom:44px}
  .f-social{justify-content:center}
  .f-news{order:6;width:100%;max-width:340px;margin-bottom:40px}
  .f-news-copy,.f-news-form{max-width:none;margin-left:auto;margin-right:auto}
  .f-bottom{order:7;width:100%;border-top:1px solid var(--line)}
  .f-mid ul{padding:0}
  .f-title{margin-bottom:.6rem}
}


/* ---------- Phones: selective full bleed (user-approved 2026-09-28) ----------
   Edge to edge: model heroes, model galleries, photos in side-by-side sections (the galley photo already bleeds).
   Homepage portrait hero also edge to edge (user, v281). Kept inset: the "Attention to every detail" pair, drawings, sketches, logos, awards, CIRO panel. */
@media (max-width:767px){
  .hero-img .hero-photo{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}
  .gallery .rail{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}
  .gallery .gslide figcaption{padding:0 var(--gutter)}
  .split>.irw[data-drift]{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}
}


/* ---------- Phones: awards as a compact three-across credentials grid (user-approved 2026-09-28) ---------- */
@media (max-width:767px){
  .turn .awards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px;max-width:340px;margin-left:auto;margin-right:auto;margin-top:44px}
}


/* ---------- Phones: model pages open on the name, no sketch above it (user 2026-09-28) ---------- */
@media (max-width:767px){
  section.title .sil-wrap,section.title .rule,.row .text .draw,.row .text .rule{display:none} /* listing rows too (user) */
  .stat .ico{display:block;margin:0 auto 8px} /* icons centred over LOA / Beam / Draft */
  /* opening images fill the screen under the header, like the homepage (user) */
  .about-hero,.d-hero{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px)}
}

/* ---------- Deck plans open in the lightbox (2026-09-28) ---------- */
.drawings figure.plan img{cursor:zoom-in}
.lb.plans img{touch-action:pan-x pan-y pinch-zoom;background:#fdf8f5}

/* ---------- Homepage gallery (2026-09-29): every gallery photo in the large frame, "View gallery" below ---------- */
.gs .gs-stack{position:absolute;inset:0}
.gs-stack figure{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;transition:opacity 1100ms cubic-bezier(.45,.05,.25,1)}
.gs-stack figure.on{opacity:1;pointer-events:auto;cursor:zoom-in}
.gs-stack img{width:100%;height:100%;object-fit:cover;display:block}
.gs{touch-action:pan-y}
.gs-arrow{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:rgba(253,248,245,.86);color:var(--ink);cursor:pointer;transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.gs-arrow.prev{left:16px}.gs-arrow.next{right:16px}
.gs-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}
.gs-arrow:active{transform:scale(.97)}
.gs-arrow:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.gs-arrow:hover{background:#fdf8f5}}
.gs-foot{text-align:center;padding:36px var(--gutter) 0}
.gs-view{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 44px;border:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.05em;color:var(--ink);transition:background-color 200ms,border-color 200ms,color 200ms,transform 160ms var(--ease-out)}
.gs-view:active{transform:scale(.97)}
.gs-view:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.gs-view:hover{background:var(--accent);border-color:var(--accent);color:#fff}}
@media (prefers-reduced-motion:reduce){.gs-stack figure{transition-duration:200ms}}
@media (max-width:767px){.gs-arrow.prev{left:10px}.gs-arrow.next{right:10px}.gs-foot{padding-top:28px}}

/* ---------- 2026-09-29 (user) ---------- */
.stat .ico{display:block;margin-left:auto;margin-right:auto} /* icons centred over LOA / Beam / Draft at every width (inline SVG ignored auto margins on desktop) */
.from b{font-weight:600} /* prices in bold (Cormorant italic 600 loaded) */
/* no rule above LOA / Beam / Draft; icons sit closer to their labels, labels stay put (user 2026-09-29) */
.stat{border-top:0}
.stat .label{top:-44px}
.stat .ico{margin-bottom:6px}
@media (max-width:767px){.stat .label{top:-48px}.stat .ico{margin-bottom:4px}}

/* footer address under phone and email (user 2026-09-29) */
.f-addr{font-style:normal;margin-top:6px}
.f-contact .f-addr a{display:inline-block;padding:0;font-family:var(--sans);font-size:.8125rem;font-weight:300;letter-spacing:.05em;line-height:1.7;opacity:.7}
@media (hover:hover) and (pointer:fine){.f-contact .f-addr a:hover{opacity:1;color:var(--accent)}}
@media (max-width:767px){.f-addr{margin-top:2px}.f-contact .f-addr a{padding:6px 0}}
.cc .f-addr{margin:0;text-align:center} /* contact card: address centred like the phone and email above it */

/* ---------- Phone menu: Models opens its sub-links in place (user 2026-10-04) ---------- */
.m-parent{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:14px 0;background:none;border:0;cursor:pointer;font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.25;color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.m-parent.is-current{color:var(--accent)}
.m-parent:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.m-caret{width:14px;height:14px;stroke-width:1.3;transition:transform 240ms var(--ease-out)}
.m-parent[aria-expanded="true"] .m-caret{transform:rotate(180deg)}
.m-sublist{list-style:none;margin:-4px 0 8px;padding:0}
.m-list .m-sublist li{opacity:1;transform:none;animation:mSubIn 260ms var(--ease-out) both;animation-delay:calc(var(--k,0) * 45ms)}
.m-list .m-sublist a{font-size:21px;padding:9px 0;min-height:44px;color:var(--muted)}
.m-list .m-sublist a[aria-current="page"]{color:var(--accent)}
@keyframes mSubIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.m-list .m-sublist li{animation:none}.m-caret{transition:none}}

/* ---------- Forms -> CRM states (2026-10-05) ---------- */
.hs-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form-status{grid-column:1/-1;margin:14px 0 0;min-height:0;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5;text-align:center;color:var(--muted)}
.form-status:empty{display:none}
.form-status.is-error{color:#9b3b2e}
.form-thanks{max-width:520px;margin:56px auto 0;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.5;text-align:center;color:var(--ink);outline:none;animation:formThanks 420ms var(--ease-out) both}
.cc .form-thanks{margin-top:8px}
.form-thanks.is-small{margin:0;max-width:320px;font-size:16px;text-align:left;opacity:.85}
.form-preview{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.btn[disabled]{opacity:.6;cursor:progress}
@keyframes formThanks{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.form-thanks{animation:none}}
@media (max-width:640px){.form-thanks.is-small{text-align:center;margin:0 auto}}
form[hidden]{display:none!important} /* the site sets form{display:grid}, which would otherwise override [hidden] */
/* image protection: no dragging, no long-press save on phones (deterrent only) */
img,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* phones: keep the header pinned while scrolling (user). overflow-x:hidden on html+body made body the
   scroll box and broke position:sticky; clip still stops sideways scroll without creating a scroll box */
@media (max-width:900px){:root,:root body{overflow-x:clip}}