/* ==========================================================================
   DUO MARINE - main stylesheet
   Loaded from <head> in index.html. Everything the page needs to look right
   lives here. main.js only switches state classes and attributes
   (.is-open, .is-active, .is-current, [data-lead], [data-lb], [hidden]).

   Contents
   1.  Tokens
   2.  Fonts
   3.  Base
   4.  Keyframes
   5.  Patterns   (reveal, wrap, eyebrow, label, copy, tag, buttons, icons)
   6.  Page shell, header, menu (narrow layout is a media query)
   7.  Hero
   8.  Vessels    (tabs, model panels, specs, accordions, gallery)
   9.  Other models
   10. Care
   11. FAQ
   12. Contact / wave divider
   13. Team + footer
   14. Enquiry page (#leadpage)
   15. Lightbox
   16. Boot screen
   17. Reduced motion
   ========================================================================== */


/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand colours (RGB triplets so we can write rgb(var(--x-rgb) / .4)) */
  --navy-rgb: 7 27 43;
  --cream-rgb: 253 249 245;
  --orange-rgb: 244 127 75;
  --sage-rgb: 143 181 181;

  --navy: #071B2B;
  --cream: #FDF9F5;
  --orange: #F47F4B;
  --sage: #8FB5B5;
  --teal: #7FB7BC;
  --grey: #8F9399;
  --ink: #3d4b57;
  --cream-hover: #F6EEE6;

  /* Hairlines on light backgrounds */
  --line: rgb(var(--navy-rgb) / .10);
  --rule: rgb(var(--navy-rgb) / .14);

  /* Type */
  --font-display: Barlow, sans-serif;
  --font-body: 'Funnel Sans', sans-serif;
  --font-icon: 'Material Symbols Outlined';

  /* Layout + motion */
  --gutter: clamp(20px, 3.2vw, 52px);
  --wrap: 1520px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Header nav type is shared by the links and the Enquire button */
  --nav-type: 400 clamp(9px, 1.5vw, 11px)/1 var(--font-display);
  --nav-tracking: clamp(.08em, 0.4vw, .2em);

  /* Logo mark, used as a CSS mask (colour comes from the element's background) */
  --logo-mark: url("assets/logo-wave-icon.svg");
}


/* 2. Fonts ----------------------------------------------------------------- */
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/fonts/Barlow-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('assets/fonts/FunnelSans-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }


/* 3. Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--navy); }
body { margin: 0; background: var(--navy); -webkit-font-smoothing: antialiased; }

/* The page's own foam ground only arrives once boot completes, so the
   wrapper can't flash white/foam between markup streaming and mount. */
body[data-booted] { background: var(--cream); }
body:not([data-booted]) .page { background: var(--navy) !important; }

/* :where() keeps these at zero specificity, so any component class
   (.btn-primary, .nav__link ...) can set its own colour and win. */
:where(a) { color: var(--navy); text-decoration: none; }
:where(a:hover) { color: var(--orange); }

/* Overlays ship hidden and are opened by a body attribute, never by a
   template hole, so a streaming render can't flash them on screen. */
body[data-lb] #lightbox { display: flex !important; animation: fade .3s ease both; }
body[data-lead] #leadpage { display: block !important; animation: fade .35s ease both; }
body[data-lead] { overflow: hidden; }

/* Gallery: the first six photos show, the rest only open in the lightbox */
[data-shot]:nth-child(n+7) { display: none !important; }
[data-shot] { aspect-ratio: 1 / 1 !important; grid-column: auto !important; }


/* 4. Keyframes ------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes riseSm { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipe { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes drift { from { opacity: 0; transform: translateY(40px) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes parallax { from { transform: translateY(-26%); } to { transform: translateY(26%); } }
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes waveDriftBack { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes heroPar { from { transform: translateY(0); } to { transform: translateY(14%); } }
@keyframes heroIn { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes heroWord { from { opacity: 0; transform: translateY(0.9em); } to { opacity: 1; transform: none; } }
@keyframes panelInA { from { opacity: 0; transform: translateY(30px) scale(.992); } 45% { opacity: .55; } to { opacity: 1; transform: none; } }
@keyframes panelInB { from { opacity: 0; transform: translateY(30px) scale(.992); } 45% { opacity: .55; } to { opacity: 1; transform: none; } }
@keyframes glideX { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes slotWave { 0%, 100% { opacity: .22; transform: translateY(1px); } 50% { opacity: .42; transform: translateY(-1px); } }
@keyframes slotSweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes bootMark { from { opacity: 0; transform: translate3d(0,14px,0) scale(.965); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes bootMarkOut { to { opacity: 0; transform: translate3d(0,-14px,0) scale(1.035); } }
@keyframes bootCrest { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes bootOut { to { opacity: 0; transform: translate3d(0,-3%,0); visibility: hidden; } }


/* 5. Patterns -------------------------------------------------------------- */

/* Scroll reveal: fades up as the element enters the viewport.
   Tune it per element with the --reveal-* variables or a modifier. */
.reveal {
  --reveal-name: rise;
  --reveal-dur: 1.1s;
  --reveal-delay: 0s;
  --reveal-from: 0%;
  --reveal-to: 44%;
  animation: var(--reveal-name) var(--reveal-dur) var(--ease) var(--reveal-delay) both;
  animation-timeline: view();
  animation-range: entry var(--reveal-from) entry var(--reveal-to);
}
.reveal--sm    { --reveal-name: riseSm; --reveal-to: 38%; }
.reveal--soft  { --reveal-dur: 1s; --reveal-from: 2%; --reveal-to: 50%; }
.reveal--slow  { --reveal-dur: 1.2s; --reveal-to: 48%; }
.reveal--late  { --reveal-from: 2%; --reveal-to: 55%; }
.reveal--glide { --reveal-name: glideX; --reveal-dur: 1.3s; --reveal-from: 2%; --reveal-to: 55%; }
.reveal--care  { --reveal-dur: .9s; --reveal-from: 4%; --reveal-to: 50%; }
.reveal--delay { --reveal-delay: .1s; }
.reveal--d1    { --reveal-delay: .08s; }
.reveal--d2    { --reveal-delay: .16s; }

.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap--col { display: flex; flex-direction: column; gap: 0; }
.is-hidden { display: none; }
[hidden] { display: none !important; }
.clip { display: block; overflow: hidden; }
.collapse { min-height: 0; overflow: hidden; }
.accent { color: var(--sage); }
.req { color: var(--orange); }

/* Small uppercase labels */
.label {
  font: 400 10px/1 var(--font-display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}
.kicker {
  font: 500 10px/1 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase; color: var(--grey);
}
.kicker--cream { color: rgb(var(--cream-rgb) / .6); }

.eyebrow {
  font: 600 11px/1 var(--font-display);
  letter-spacing: .28em; text-transform: uppercase; color: var(--grey);
}
.eyebrow--medium { font-weight: 500; }
.eyebrow--mb18 { margin-bottom: 18px; }
.eyebrow--mb20 { margin-bottom: 20px; }

.section-label {
  font: 400 11px/1 var(--font-display);
  letter-spacing: .28em; text-transform: uppercase; color: var(--grey);
  padding-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.section-label--row { display: flex; align-items: baseline; gap: 14px; }
.section-label__count { letter-spacing: .18em; opacity: .65; }

/* Section headings */
.h2 {
  --h2-size: clamp(32px, 4.4vw, 64px);
  --h2-lh: 1;
  margin: 0;
  font: 300 var(--h2-size)/var(--h2-lh) var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--navy);
}
.h2--xl { --h2-size: clamp(44px, 10vw, 82px); --h2-lh: .98; }

/* Body copy */
.copy {
  margin: 0;
  font: 300 16px/1.7 var(--font-body);
  color: var(--ink); text-wrap: pretty;
}

/* Outlined pill used for "includes" tags */
.tag {
  display: inline-flex; align-items: center; padding: 9px 15px;
  border: 1px solid rgb(var(--navy-rgb) / .18); border-radius: 999px;
  font: 400 10px/1 var(--font-display);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px; padding: 19px 32px;
  border-radius: 999px; background: var(--navy); color: var(--cream);
  font: 600 14px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .35s ease;
}
.btn-primary:hover { background: var(--orange); }

.btn-light {
  display: inline-flex; align-items: center; gap: 14px; padding: 19px 32px;
  border-radius: 999px; background: var(--cream); color: var(--navy);
  font: 600 14px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .35s ease, color .35s ease;
}
.btn-light:hover { background: var(--orange); color: var(--cream); }

.link-ext {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 10px/1 var(--font-display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
  transition: color .3s ease;
}
.link-ext:hover { color: var(--orange); }
.link-ext__arrow { font-size: 12px; letter-spacing: 0; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* Icons drawn from SVG files: the shape is the mask, colour is currentColor */
.social-icon {
  display: block; flex: 0 0 auto; width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
          mask: var(--icon) center/contain no-repeat;
}
.social-icon--instagram { --icon: url("assets/icon-instagram.svg"); }
.social-icon--facebook  { --icon: url("assets/icon-facebook.svg"); }

/* Material Symbols glyphs */
.icon {
  font-family: var(--font-icon); font-size: 34px; line-height: 1; font-weight: 200;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
  letter-spacing: normal; font-feature-settings: 'liga'; white-space: nowrap;
  color: var(--orange);
}

/* Row of label + value pinned between two hairlines */
.meta-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.meta-row--card { margin-top: auto; padding-top: 16px; }
.meta-value { font: 300 18px/1 var(--font-display); color: var(--navy); white-space: nowrap; }

/* Form fields (enquiry page) */
.field { display: flex; flex-direction: column; gap: 10px; }
.field__error { font: 300 14px/1.4 var(--font-body); color: var(--orange); }
.field__optional { color: rgb(var(--cream-rgb) / .38); }
.field__control {
  width: 100%; padding: 14px 0; background: transparent; border: 0;
  border-bottom: 1px solid rgb(var(--cream-rgb) / .28); border-radius: 0; outline: none;
  color: var(--cream);
}
.field__control:focus { border-bottom-color: var(--orange); }
.field__control--input { min-height: 52px; font: 300 18px/1.3 var(--font-body); }
.field__control--area  { font: 300 18px/1.5 var(--font-body); resize: vertical; }


/* 6. Page shell, header, menu --------------------------------------------- */
.page {
  background: var(--cream); color: var(--navy);
  font-family: var(--font-body); overflow-x: hidden;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }

.nav {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  min-width: 0; gap: clamp(8px, 2.4vw, 38px);
  font: var(--nav-type); letter-spacing: var(--nav-tracking); text-transform: uppercase;
}
.nav__link { color: var(--navy); transition: color .3s ease; }
.nav__link:hover { color: var(--orange); }

.header-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
  padding: clamp(9px, 1.4vw, 11px) clamp(12px, 2.4vw, 20px);
  border: 1px solid var(--navy); border-radius: 999px;
  font: var(--nav-type); letter-spacing: var(--nav-tracking); text-transform: uppercase;
  color: var(--navy);
  transition: background .35s ease, color .35s ease;
}
.header-cta:hover { background: var(--orange); border-color: var(--orange); color: var(--cream); }

.menu__link {
  display: block; padding: 18px 0; border-bottom: 1px solid var(--line);
  font: 400 13px/1 var(--font-display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.menu__link:hover { color: var(--orange); }
.menu__cta {
  display: block; margin-top: 20px; padding: 16px 0; text-align: center;
  border-radius: 999px; background: var(--navy); color: var(--cream);
  font: 400 12px/1 var(--font-display);
  letter-spacing: .2em; text-transform: uppercase;
}
.menu__cta:hover { background: var(--orange); }

/* Header bar. Wide layout by default; the narrow layout (burger menu) kicks in
   below 900px, see the media query at the end of this section. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2vw, 24px); padding: 0 clamp(16px, 3.2vw, 52px);
  height: clamp(56px, 8vw, 72px);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background: rgb(var(--cream-rgb) / .86);
  border-bottom: 1px solid rgb(var(--navy-rgb) / .09);
}
.site-header__lockup { display: block; height: clamp(20px, 4.6vw, 30px); width: auto; }
.site-header__wordmark { display: none; height: 11px; width: auto; }
.site-header__nav {
  display: flex; align-items: center; min-width: 0;
  margin-left: auto; margin-right: clamp(4px, 1vw, 14px);
}
.site-header__cta { display: flex; align-items: center; flex: 0 0 auto; }
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; order: 3;
  margin-left: auto; margin-right: -8px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--navy);
}
.burger__icon {
  display: block; width: 30px; height: auto;
  transition: transform .45s var(--ease), opacity .3s ease;
}
.menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  padding: 0 20px; background: rgb(var(--cream-rgb) / .98);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 0; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-height .5s var(--ease), opacity .35s ease, padding .4s ease;
}
.site-header.is-open .burger__icon { transform: rotate(180deg); opacity: .55; }
.site-header.is-open .menu {
  padding: 10px 20px 26px; border-bottom: 1px solid var(--line);
  max-height: 70vh; opacity: 1; pointer-events: auto;
}
@media (max-width: 899px) {
  .site-header__nav, .site-header__cta { display: none; }
  .site-header__lockup { display: none; }
  .site-header__wordmark { display: block; }
  .burger { display: inline-flex; }
  .menu { display: block; }
}


/* 7. Hero ------------------------------------------------------------------ */
.hero {
  position: relative; height: 100svh; min-height: 100svh; width: 100%;
  overflow: hidden; background: var(--navy);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__parallax {
  position: absolute; left: 0; right: 0; top: -14%; height: 128%;
  animation: heroPar 1s linear both;
  animation-timeline: scroll(root); animation-range: 0 110vh;
}
.hero__reveal {
  position: absolute; inset: 0; background: var(--navy);
  animation: heroIn 2.2s cubic-bezier(.16, .84, .24, 1) both;
}
.hero__picture { display: block; width: 100%; height: 100%; position: relative; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block;
}
@media (max-width: 899px) { .hero__img { object-position: center center; } }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgb(var(--navy-rgb) / .46) 0%, rgb(var(--navy-rgb) / .12) 26%,
    rgb(var(--navy-rgb) / .52) 55%, rgb(var(--navy-rgb) / .82) 78%,
    rgb(var(--navy-rgb) / .94) 100%);
}
.hero__content {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: clamp(40px, 6vw, 84px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 40px; pointer-events: none;
}
.hero__copy { max-width: 920px; }
.hero__clip { overflow: hidden; margin-bottom: 22px; }
.hero__title {
  margin: 0; font: 300 clamp(46px, 11.5vw, 116px)/.95 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--cream);
}
.hero__word { display: block; animation: heroWord 1.15s var(--ease) .45s both; }
.hero__word--2 { animation-delay: .6s; }
.hero__word--3 { animation-delay: .75s; color: var(--sage); }
.hero__aside { max-width: 340px; animation: fade 1.4s ease 1.1s both; pointer-events: auto; }
.hero__link {
  display: inline-flex; align-items: center; gap: 14px;
  font: 400 11px/1 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase; color: var(--cream);
  padding-bottom: 8px; border-bottom: 1px solid rgb(var(--cream-rgb) / .4);
}
.hero__link:hover { color: var(--orange); }


/* 8. Vessels --------------------------------------------------------------- */
.vessels {
  padding: clamp(72px, 9vw, 140px) var(--gutter) clamp(60px, 7vw, 110px);
  background: var(--cream);
}
.vessels__head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  padding-bottom: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--rule);
}
.vessels__sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px;
  font: 500 11px/1.4 var(--font-display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.vessels__logo { height: 27px; width: auto; display: block; }

/* Model switcher. Active state is the .is-active class set by main.js. */
.tabs {
  display: flex; flex-wrap: nowrap; gap: 4px; padding: 5px; max-width: 100%;
  border: 1px solid var(--rule); border-radius: 999px;
}
.tab {
  padding: clamp(13px, 2vw, 18px) clamp(12px, 3.2vw, 38px); flex: 0 1 auto;
  border-radius: 999px; border: 0; cursor: pointer;
  font: 400 clamp(11px, 1.15vw, 16px)/1 var(--font-display);
  letter-spacing: clamp(.08em, .9vw, .16em); text-transform: uppercase; white-space: nowrap;
  transition: background .4s var(--ease), color .4s ease;
  background: transparent; color: var(--grey);
}
.tab.is-active { background: var(--navy); color: var(--cream); }
.tab:hover { color: var(--orange) !important; }
.tab--teal:hover { color: var(--teal) !important; }

/* Model panels: only the active one shows. main.js alternates .panel--a/.panel--b
   on each switch so the entrance animation replays. */
.panel { display: none; }
.panel.is-active { display: block; animation: panelInB 1.6s cubic-bezier(.22, .62, .24, 1) both; }
.panel.is-active.panel--a { animation-name: panelInA; }

/* One model panel */
.model__stack { display: flex; flex-direction: column; gap: 36px; }
.model__hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(20px, 2.5vw, 40px) 0 0;
}
.model__title-wrap { display: flex; flex-direction: column; gap: 5px; }
.model__name {
  margin: 0; font: 300 48px/.9 var(--font-display);
  letter-spacing: .01em; text-transform: uppercase;
}
.model__name--teal { color: var(--teal); }
.model__name--orange { color: var(--orange); }
.model__tagline {
  font: 300 clamp(17px, 1.5vw, 22px)/1.4 var(--font-body);
  color: var(--grey); margin-bottom: 18px;
}
.model__intro { margin-bottom: 28px; max-width: 520px; }
.model__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; margin: 0 0 8px;
}
.model__text { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.model__figure {
  display: flex; flex-direction: column; align-items: stretch; gap: clamp(6px, 1vw, 14px);
}
.model__img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 40px 60px rgb(var(--navy-rgb) / .14));
}
.model__engine {
  width: clamp(80px, 11%, 140px); height: auto; display: block; align-self: flex-end;
  margin-top: clamp(-10px, -1vw, -4px);
  filter: drop-shadow(0 18px 26px rgb(var(--navy-rgb) / .16));
}
.model__body {
  display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px);
  padding: clamp(28px, 3vw, 48px) 0 0;
}
.model__split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 3vw, 56px); align-items: end;
}

.badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  margin-bottom: 18px; padding: 8px 14px 8px 12px;
  border: 1px solid rgb(var(--orange-rgb) / .55); border-radius: 999px;
  font: 500 10px/1 var(--font-display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* Spec grid */
.specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  border-left: 1px solid var(--line);
}
.spec {
  padding: 26px 24px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.spec__label { margin-bottom: 12px; }
.spec__value { font: 300 26px/1 var(--font-display); color: var(--navy); }

/* Accordions (spec sheet + FAQ share the button) */
.acc { border-top: 1px solid var(--rule); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 24px); padding: clamp(22px, 2.6vw, 28px) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 400 clamp(15px, 1.5vw, 20px)/1.3 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.acc__btn--faq {
  padding: clamp(20px, 2.4vw, 26px) 0;
  font: 300 clamp(17px, 1.6vw, 22px)/1.4 var(--font-body);
  letter-spacing: normal; text-transform: none;
}
.acc__btn:hover { color: var(--orange); }
.acc__head { display: flex; align-items: baseline; gap: clamp(12px, 1.4vw, 22px); }
.acc__num { font: 400 11px/1 var(--font-display); letter-spacing: .18em; color: var(--grey); }
.acc-list {
  margin: 0; padding: 0 0 32px 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px 40px; font: 300 15px/1.6 var(--font-body); color: var(--ink);
}
.acc-list__item { padding-left: 18px; border-left: 1px solid rgb(var(--sage-rgb) / .6); }

/* Open/close is a grid-rows transition; main.js toggles .is-open on .acc */
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.acc-icon {
  display: block; flex: 0 0 auto; font: 300 26px/1 var(--font-display); color: currentColor;
  transition: transform .45s var(--ease), color .3s ease;
}
.acc.is-open .acc-body { grid-template-rows: 1fr; }
.acc.is-open .acc-icon { color: var(--orange); transform: rotate(45deg); }

/* Photo gallery */
.shot-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(5px, .7vw, 12px); padding-top: clamp(18px, 2vw, 26px);
}
@media (max-width: 1099px) { .shot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 659px)  { .shot-grid { grid-template-columns: repeat(2, 1fr); } }
.shot {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: rgb(var(--navy-rgb) / .04); cursor: pointer;
}
.shot-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center; display: block;
  opacity: 0; transition: opacity .55s ease;
}
.shot-img[data-ready] { opacity: 1; z-index: 1; }
.shot-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--navy);
  opacity: 0; transition: opacity .4s ease;
}
[data-shot]:hover .shot-veil { opacity: .45; }
.shot-skin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgb(var(--navy-rgb) / .045); overflow: hidden; transition: opacity .4s ease;
}
[data-shot] .shot-img[data-ready] ~ .shot-skin, .shot-skin[data-done] { opacity: 0; }
.shot-skin::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(var(--cream-rgb) / .65) 50%, transparent 80%);
  transform: translateX(-100%); animation: slotSweep 1.9s ease-in-out infinite;
}
.shot-mark {
  display: block; width: min(46%, 88px); aspect-ratio: 279 / 105;
  background: var(--navy); opacity: .26;
  -webkit-mask: var(--logo-mark) center/contain no-repeat;
          mask: var(--logo-mark) center/contain no-repeat;
  animation: slotWave 2.1s ease-in-out infinite;
}


/* 9. Other models ---------------------------------------------------------- */
.range__title {
  margin: 0; font: 300 48px/.95 var(--font-display);
  letter-spacing: .01em; text-transform: uppercase; color: var(--orange);
}
.range__text { max-width: 560px; }
.models-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.model-card {
  display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.4vw, 34px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--cream); transition: background .35s ease;
}
.model-card:hover { background: var(--cream-hover); }
.model-card__head { display: flex; flex-direction: column; gap: 8px; }
.model-card__name {
  font: 300 clamp(28px, 2.6vw, 38px)/1 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--orange);
}
.model-card__lede { font-size: 15px; line-height: 1.6; }
.model-card__cta {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 22px;
}


/* 10. Care ----------------------------------------------------------------- */
.care { padding: clamp(72px, 9vw, 140px) var(--gutter); background: var(--cream); }
.care__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(30px, 4vw, 80px); align-items: end;
  padding-bottom: clamp(38px, 4vw, 60px); border-bottom: 1px solid var(--rule);
}
.care__lede { font-size: 17px; }
.care__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, 30%)), 1fr));
  column-gap: clamp(28px, 4vw, 72px); row-gap: 0;
}
.care-card {
  padding: clamp(34px, 4vw, 54px) 0; border-bottom: 1px solid rgb(var(--navy-rgb) / .12);
}
.care-card__icon { margin-bottom: 22px; height: 36px; display: flex; align-items: flex-end; }
.care-card__title {
  margin: 0 0 16px; font: 400 clamp(18px, 1.7vw, 24px)/1.25 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.care-card__text { font-size: 15px; }


/* 11. FAQ ------------------------------------------------------------------ */
.faq { padding: clamp(72px, 9vw, 130px) var(--gutter); background: var(--cream); }
.faq__title { margin-bottom: clamp(34px, 4vw, 60px); }
.acc--last { border-bottom: 1px solid var(--rule); }
.faq__answer { padding: 0 0 30px; max-width: 760px; line-height: 1.75; }


/* 12. Contact + wave divider ---------------------------------------------- */
.contact {
  position: relative; overflow: hidden; background: var(--navy); color: var(--cream);
  padding: 196px var(--gutter) 129px;
}
.wave {
  position: absolute; top: -1px; left: 0; width: 100%;
  height: clamp(64px, 7.2vw, 132px); overflow: hidden; pointer-events: none; z-index: 2;
}
/* The image is two container-widths wide; sliding it by half loops seamlessly. */
.wave__img {
  position: absolute; top: 0; left: 0; width: 200%; height: 100%;
  will-change: transform; backface-visibility: hidden;
  animation: waveDrift 11s linear infinite;
}
.contact__eyebrow { color: #FEF9F5; margin-bottom: clamp(15px, 2vw, 26px); }
.contact__title {
  margin: 0; max-width: 1100px; font: 200 80px/.95 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--cream);
}
.contact__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 26px;
  margin-top: clamp(21px, 2.5vw, 36px);
}


/* 13. Team + footer -------------------------------------------------------- */
.team { padding: 0 var(--gutter) clamp(72px, 9vw, 130px); background: var(--cream); }
.team__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(32px, 5vw, 72px); padding-top: clamp(48px, 6vw, 90px);
  border-top: 1px solid var(--rule);
}
.team__intro { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.team__text { max-width: 460px; }
.team__people { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); }
.team__person { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.team__photo { width: clamp(100px, 10vw, 150px); height: auto; display: block; }

.footer {
  background: var(--navy); color: var(--cream);
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(36px, 4vw, 52px);
}
.footer__top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.footer__logo { height: 44px; width: auto; display: block; }
.footer__cols {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 72px);
  font: 300 14px/1.7 var(--font-body); color: rgb(var(--cream-rgb) / .6);
}
.footer__col { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.footer__col--social { gap: 6px; }
.footer__heading {
  font: 400 10px/1 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--cream-rgb) / .4); margin-bottom: 12px;
}
.footer__link { color: rgb(var(--cream-rgb) / .75); }
.footer__link:hover { color: var(--orange); }
.footer__social {
  display: inline-flex; align-items: center; gap: 10px; color: rgb(var(--cream-rgb) / .75);
}
.footer__social:hover { color: var(--orange); }
.footer__legal {
  margin-top: 28px; font: 400 10px/1.6 var(--font-display);
  letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .34);
}


/* 14. Enquiry page (#leadpage) -------------------------------------------- */
.lead {
  position: fixed; inset: 0; z-index: 450; display: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--navy); color: var(--cream);
}
#leadpage input::placeholder, #leadpage textarea::placeholder { color: rgb(var(--cream-rgb) / .38); }
#leadpage select option { color: var(--navy); }
.lead__scroller {
  min-height: 100%; display: flex; justify-content: center;
  padding: clamp(36px, 6vw, 80px) clamp(20px, 5vw, 48px);
}
.lead__inner {
  width: 100%; max-width: 560px; display: flex; flex-direction: column;
  gap: clamp(32px, 5vw, 48px);
}
.lead__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lead__brand { display: block; }
.lead__logo { height: clamp(28px, 4vw, 36px); width: auto; display: block; }
.lead__back {
  font: 500 10px/1 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .7);
}
.lead__back:hover { color: var(--orange); }
.lead__intro { display: flex; flex-direction: column; gap: 14px; animation: rise .8s var(--ease) both; }
.lead__title {
  margin: 0; font: 300 clamp(40px, 9vw, 64px)/.95 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--cream);
}
.lead__sub { line-height: 1.65; color: rgb(var(--cream-rgb) / .72); }
.lead__form {
  display: flex; flex-direction: column; gap: 22px;
  animation: rise .8s var(--ease) .08s both;
}
.lead__group { display: flex; flex-direction: column; gap: 14px; }
.lead__hint { letter-spacing: .12em; color: rgb(var(--cream-rgb) / .45); }
.lead__error { margin: 0; font: 300 14px/1.55 var(--font-body); color: var(--orange); }
.lead__error-link { color: var(--orange); border-bottom: 1px solid rgb(var(--orange-rgb) / .5); }
.lead__submit {
  margin-top: 8px; min-height: 58px; height: 58px; padding: 0 40px;
  border: 0; border-radius: 999px; background: var(--cream); color: var(--navy);
  font: 600 15px/1 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
  transition: background .35s ease, color .35s ease, opacity .3s ease;
}
.lead__submit:hover { background: var(--orange); color: var(--cream); }
.lead__link { color: rgb(var(--cream-rgb) / .7); }
.lead__link:hover { color: var(--orange); }

.lead__done {
  display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 5vw, 40px) 0;
  border-top: 1px solid rgb(var(--cream-rgb) / .18); border-bottom: 1px solid rgb(var(--cream-rgb) / .18);
  animation: rise .7s var(--ease) both;
}
.lead__done-icon {
  font-family: var(--font-icon); font-size: 40px; line-height: 1; font-weight: 200;
  color: var(--orange);
}
.lead__done-title {
  margin: 0; font: 300 clamp(30px, 6vw, 42px)/1 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--cream);
}
.lead__done-text { margin: 0; font: 300 16px/1.65 var(--font-body); color: rgb(var(--cream-rgb) / .72); }
.lead__done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.lead__done-btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 18px 34px;
  border-radius: 999px; background: var(--cream); color: var(--navy);
  font: 500 11px/1 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase;
  transition: background .35s ease, color .35s ease;
}
.lead__done-btn:hover { background: var(--orange); color: var(--cream); }
.lead__again {
  padding: 8px 0; border: 0; background: none; color: rgb(var(--cream-rgb) / .7);
  font: 500 10px/1 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
  border-bottom: 1px solid rgb(var(--cream-rgb) / .3);
}
.lead__again:hover { color: var(--orange); }
.lead__footer {
  margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font: 300 13px/1.5 var(--font-body); color: rgb(var(--cream-rgb) / .5);
}
/* Interest chips: pressed state is aria-pressed, toggled by main.js */
.chip {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: 400 14px/1 var(--font-body);
  border: 1px solid rgb(var(--cream-rgb) / .28); background: transparent; color: var(--cream);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.chip[aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: var(--navy); }
.chip:hover { border-color: var(--orange) !important; }


/* 15. Lightbox ------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 400; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 26px); padding: clamp(14px, 3vw, 44px);
  background: rgb(var(--navy-rgb) / .94); backdrop-filter: blur(10px);
}
.lightbox__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgb(var(--cream-rgb) / .28); border-radius: 999px;
  background: transparent; color: var(--cream); cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.lightbox__btn:hover { background: var(--orange); border-color: var(--orange); }
.lightbox__close {
  top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px);
  width: 46px; height: 46px; font: 300 24px/1 var(--font-display);
}
.lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: clamp(42px, 4vw, 54px); height: clamp(42px, 4vw, 54px);
  font: 300 26px/1 var(--font-display); padding-bottom: 4px;
}
.lightbox__nav--prev { left: clamp(8px, 2.5vw, 34px); }
.lightbox__nav--next { right: clamp(8px, 2.5vw, 34px); }
.lightbox__stage {
  display: flex; align-items: center; justify-content: center;
  max-width: min(1600px, 94vw); flex: 0 1 auto; min-height: 0;
}
.lightbox__img {
  max-width: 100%; max-height: min(76vh, 1100px); width: auto; height: auto;
  display: block; object-fit: contain; box-shadow: 0 40px 90px rgb(0 0 0 / .45);
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.lightbox__thumbs {
  display: flex; align-items: center; gap: clamp(6px, 1vw, 12px); flex-wrap: wrap;
  justify-content: center; max-width: min(1180px, 92vw);
}
.lightbox__thumb {
  width: clamp(46px, 5.4vw, 74px); aspect-ratio: 1 / 1; object-fit: cover; display: block;
  cursor: pointer; opacity: .45;
  outline: 1px solid rgb(var(--cream-rgb) / .22); outline-offset: -1px;
  transition: opacity .3s ease, outline-color .3s ease;
}
.lightbox__thumb.is-current { opacity: 1; outline: 2px solid var(--orange); }
.lightbox__count {
  font: 400 11px/1 var(--font-display);
  letter-spacing: .22em; color: rgb(var(--cream-rgb) / .6);
}


/* 16. Boot screen ---------------------------------------------------------- */
/* Covers the page while fonts and the hero image settle, then lifts away.
   Painted from CSS so it is up on the very first frame. While booting, every
   entrance animation on the page is frozen at frame 0 so nothing is caught
   mid-load behind it. */
body[data-booting] .page * { animation-play-state: paused !important; }
body[data-booting] .page .shot-img { transition: none !important; }

#welcome {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  background: var(--navy); overflow: hidden;
}
/* Slow crest of light travelling across the fill, echoing the wave mark. */
#welcome::before {
  content: ""; position: absolute; inset: -20%; will-change: opacity;
  background: radial-gradient(58% 40% at 50% 50%, rgb(var(--sage-rgb) / .20), transparent 70%);
  animation: bootCrest 3.6s ease-in-out infinite;
}
#welcome > i {
  display: block; width: min(38vw, 260px); min-width: 132px; aspect-ratio: 279 / 105;
  background: var(--cream); will-change: transform, opacity; backface-visibility: hidden;
  animation: bootMark .78s cubic-bezier(.16, .84, .24, 1) .12s both;
  -webkit-mask: var(--logo-mark) center/contain no-repeat;
          mask: var(--logo-mark) center/contain no-repeat;
}
#welcome[data-done] { animation: bootOut .58s cubic-bezier(.6, 0, .22, 1) both; }
#welcome[data-done] > i { animation: bootMarkOut .32s cubic-bezier(.5, 0, .8, .15) both; }
#welcome[data-done]::before { animation: none; opacity: 0; transition: opacity .4s ease; }


/* 17. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .shot-mark, .shot-skin::after { animation: none; }
  .shot-skin::after { opacity: 0; }
  #welcome > i, #welcome, #welcome[data-done], #welcome[data-done] > i,
  #welcome::before { animation-duration: .01s; animation-iteration-count: 1; }
}