/* TLM Marine — shared styles
   ==========================================
   Used by every page. Cached after first visit.
   Tokens at top, components below.
*/

:root{
  --ink:#0d254b;
  --ink-2:#0a1c3a;
  --ink-3:#061328;
  --cream:#f5f0e6;
  --cream-2:#ece4d2;
  --bronze:#a07f4f;
  --bronze-2:#c9a76d;
  --line-light:rgba(245,240,230,0.14);
  --line-dark:rgba(13,37,75,0.12);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ============ UTILITY BAR ============ */
.utility{background:transparent;color:rgba(245,240,230,.85);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:9px 0;border-bottom:1px solid transparent;position:relative;z-index:101;transition:background .4s ease,border-color .4s ease}
body.scrolled .utility{background:var(--ink-3);border-bottom-color:var(--line-light)}
.utility-inner{max-width:1480px;margin:0 auto;padding:0 48px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.utility-left{display:flex;align-items:center;gap:24px}
.utility-left span::before{content:"·";margin-right:24px;opacity:.5}
.utility-left span:first-child::before{display:none}
.lang-switch{display:flex;gap:0;align-items:center}
/* Default text shadow keeps the buttons readable even on the rare case the
   utility bar shows over a light background (e.g. while video is loading). */
.lang-switch button{color:rgba(245,240,230,.7);padding:4px 10px;font-size:11px;letter-spacing:1.5px;font-weight:400;transition:color .25s;font-family:var(--sans);border-left:1px solid rgba(245,240,230,.28);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.lang-switch button:first-child{border-left:none}
.lang-switch button:hover,.lang-switch button.active{color:var(--bronze-2)}
/* When the page has scrolled (or has no hero), utility bar is dark — drop the
   shadow and lower the contrast since we're back on a dark surface. */
body.scrolled .lang-switch button{text-shadow:none;color:rgba(245,240,230,.55);border-left-color:rgba(245,240,230,.18)}
body.scrolled .lang-switch button:hover,body.scrolled .lang-switch button.active{color:var(--bronze-2)}

/* ============ NAVIGATION ============ */
.nav{position:sticky;top:0;z-index:100;background:transparent;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);border-bottom:1px solid transparent;transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease,padding .3s ease}
.nav.scrolled{background:rgba(245,240,230,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line-dark)}
.nav-inner{max-width:1480px;margin:0 auto;padding:24px 48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:48px;transition:padding .3s ease}
.nav.scrolled .nav-inner{padding:16px 48px}
/* Left group of nav-links — pushed to the far left edge (mirrors the right group at the far right) */
.nav-left{justify-self:start}
.nav-left,.nav-right .nav-links{display:flex;gap:40px;list-style:none;font-size:14px;letter-spacing:2px;text-transform:uppercase;font-weight:500}
.logo{font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:6px;color:var(--cream);justify-self:center;display:flex;align-items:center;gap:10px;transition:color .3s ease;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.nav.scrolled .logo{color:var(--ink);text-shadow:none}
.logo img{height:clamp(56px,4.2vw,68px);width:auto;display:block;transition:filter .3s ease,opacity .3s ease,height .3s ease}
.nav.scrolled .logo img{height:clamp(48px,3.6vw,58px)}
.nav:not(.scrolled) .logo img{filter:brightness(0) invert(1)}
.logo .dot{color:var(--bronze-2);margin:0 4px;transition:color .3s ease}
.nav.scrolled .logo .dot{color:var(--bronze)}
.nav-links{display:flex;gap:40px;list-style:none;font-size:14px;letter-spacing:2px;text-transform:uppercase;font-weight:500}
.nav-links a{padding:8px 0;position:relative;color:var(--cream);transition:color .3s ease;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.nav.scrolled .nav-links a{color:var(--ink);text-shadow:none}
.nav-links a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--bronze-2);transition:width .3s,background-color .3s}
.nav.scrolled .nav-links a::after{background:var(--bronze)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-right{display:flex;justify-content:flex-end;align-items:center;gap:20px}
.nav-cta{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;padding:14px 26px;border:1px solid var(--cream);color:var(--cream);transition:all .3s;font-weight:500;background:transparent;backdrop-filter:blur(4px)}
.nav.scrolled .nav-cta{border-color:var(--ink);color:var(--ink);backdrop-filter:none}
.nav-cta:hover{background:var(--cream);color:var(--ink)}
.nav.scrolled .nav-cta:hover{background:var(--ink);color:var(--cream)}

/* ============ HAMBURGER + MOBILE MENU ============ */
/* Hidden on desktop — only the three-column nav-links layout shows.
   Below 1024px, .nav-left and .nav-right are hidden, hamburger appears,
   logo moves to the left edge, and tapping hamburger reveals a
   full-screen dark overlay with all nav, language switcher, and contact. */
.hamburger{display:none;width:44px;height:44px;position:relative;justify-self:end;background:transparent;z-index:201;align-items:center;justify-content:center}
.hamburger span{display:block;position:absolute;left:10px;width:24px;height:1px;background:var(--cream);transition:transform .3s ease,opacity .2s ease,top .3s ease,background-color .3s ease}
.hamburger span:nth-child(1){top:15px}
.hamburger span:nth-child(2){top:22px}
.hamburger span:nth-child(3){top:29px}
.nav.scrolled .hamburger span{background:var(--ink)}
.hamburger[aria-expanded="true"] span{background:var(--cream)}
.hamburger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:200;background:var(--ink-3);display:flex;flex-direction:column;padding:108px 32px 40px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s ease,visibility .35s,transform .35s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.mobile-menu::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(180deg,rgba(13,37,75,.45) 0%,transparent 100%);pointer-events:none}
/* Close button — explicit × in top-right of the overlay.
   The hamburger button itself sits inside .nav (z-index 100) and the
   overlay covers it, so we need an in-overlay control to close. */
.mobile-menu-close{position:absolute;top:28px;right:24px;width:44px;height:44px;background:transparent;color:var(--cream);font-size:32px;line-height:1;font-weight:300;cursor:pointer;z-index:1;transition:color .25s ease,transform .3s ease;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.mobile-menu-close:hover{color:var(--bronze-2);transform:rotate(90deg)}
.mobile-nav-links{list-style:none;display:flex;flex-direction:column;gap:4px;margin-bottom:48px}
.mobile-nav-links a{display:block;font-family:var(--serif);font-size:clamp(34px,7.5vw,52px);font-weight:300;color:var(--cream);padding:10px 0;letter-spacing:-.5px;line-height:1.1;position:relative;transition:color .25s ease,padding-left .25s ease}
.mobile-nav-links a:hover,.mobile-nav-links a.active{color:var(--bronze-2)}
.mobile-nav-links a.active::before{content:"";position:absolute;left:-26px;top:50%;width:18px;height:1px;background:var(--bronze-2)}
.mobile-cta{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;padding:18px 36px;border:1px solid var(--cream);color:var(--cream);font-weight:500;margin-bottom:56px;transition:background .25s,color .25s}
.mobile-cta:hover{background:var(--cream);color:var(--ink-3)}
.mobile-menu-meta{margin-top:auto;padding-top:36px;border-top:1px solid var(--line-light);display:flex;flex-direction:column;gap:28px}
.mobile-lang{display:flex;gap:0;align-items:center}
.mobile-lang button{color:rgba(245,240,230,.55);padding:6px 14px;font-size:12px;letter-spacing:1.5px;font-weight:400;transition:color .25s;font-family:var(--sans);border-left:1px solid rgba(245,240,230,.18);background:transparent;cursor:pointer}
.mobile-lang button:first-child{border-left:none;padding-left:0}
.mobile-lang button:hover,.mobile-lang button.active{color:var(--bronze-2)}
.mobile-contact{font-size:13px;color:rgba(245,240,230,.65);line-height:1.85}
.mobile-contact a{display:block;color:var(--cream);font-family:var(--serif);font-size:19px;font-weight:300;letter-spacing:0;margin-bottom:4px;transition:color .25s}
.mobile-contact a:hover{color:var(--bronze-2)}
.mobile-contact .addr{margin-top:14px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;opacity:.7}

/* Mobile menu visible only when the layout collapses */
@media (max-width:1024px){
  .hamburger{display:flex}
  .nav-left,.nav-right{display:none}
  /* padding-top accounts for safe-area-inset (notch / Dynamic Island) PLUS
     extra space so logo/hamburger sit clearly below the lang switcher. */
  .nav-inner{grid-template-columns:1fr auto;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 48px) 20px 14px}
  .nav.scrolled .nav-inner{padding:calc(env(safe-area-inset-top,0px) + 22px) 20px 12px}
  .logo{justify-self:start;max-width:60vw}
  /* SVG logo file already contains tagline — cap height tight so it
     doesn't visually compete with the hero eyebrow or hamburger */
  .logo img{height:42px;max-width:100%;object-fit:contain;object-position:left center}
  .nav.scrolled .logo img{height:36px}
}
@media (max-width:480px){
  .logo img{height:36px}
  .nav.scrolled .logo img{height:32px}
}

/* ============ HERO ============ */
/* Hero extends up under both utility bar (~36px) and nav (~116px with the bigger logo) so video reaches the very top.
   Height is increased by the same amount so the bottom edge (where content sits) doesn't shift. */
.hero{position:relative;height:calc(100vh + 36px);min-height:716px;overflow:hidden;color:var(--cream);margin-top:-152px}
/* Inner-page hero — larger than before, with strong presence even on shorter viewports */
.hero.small{height:calc(82vh + 36px);min-height:660px;margin-top:-152px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0d254b;transform:scale(1.05);transition:transform 8s ease-out;z-index:0}
.hero.loaded .hero-bg{transform:scale(1)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,37,75,.35) 0%,rgba(13,37,75,.25) 40%,rgba(13,37,75,.75) 100%);z-index:1}
/* Hero <video> — clean native element, HLS streamed by hls.js or Safari */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-color:#0d254b;z-index:0;pointer-events:none}
.hero-poster{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0d254b;z-index:0;display:none}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,37,75,.35) 0%,rgba(13,37,75,.25) 40%,rgba(13,37,75,.75) 100%);z-index:1;pointer-events:none}
.hero-content{z-index:2}
/* Poster is shown ONLY when there's no video (data-saver mode, HLS error,
   or initial paint before the stream attaches). Default state: video plays,
   poster hidden. The .no-video class on <body> (set by JS) reverses this. */
body.no-video .hero-video{display:none}
body.no-video .hero-poster{display:block}

/* Mobile: take the utility bar OUT of flow entirely so the hero starts
   at the absolute top of the page. Utility is absolutely positioned over
   the hero, fully transparent, with lang switcher floating on the video.
   Body stays cream (default) — hero margin is large enough to cover any
   gap, and sections below need cream bg as default text color is ink. */
@media (max-width:1024px){
  .utility{position:absolute;top:0;left:0;right:0;background:transparent !important;border-bottom:none !important;z-index:101}
  body.scrolled .utility{background:transparent !important}
  /* Hero pulled up to cover the nav (padding-top safe-area + 48 + logo 42
     + pad-bottom 14 = up to ~154px on iPhone notch). -160px is the buffer. */
  .hero{height:calc(100dvh + 160px);min-height:640px;margin-top:-160px;padding-top:160px}
  .hero.small{height:calc(80dvh + 160px);min-height:560px;margin-top:-160px;padding-top:160px}
  .hero-content{padding-top:0 !important}
  /* Scrolled nav — when nav becomes cream, force the SVG logo to dark
     (otherwise the original SVG's light/teal colors are unreadable on cream) */
  .nav.scrolled .logo img{filter:brightness(0)}
}
@media (max-width:760px){
  /* Push utility bar's lang switch down a touch so it sits clear of the
     iOS Dynamic Island / status bar safe-area on iPhone 14+ */
  .utility{padding-top:max(9px,env(safe-area-inset-top,9px))}
}

/* ============ SPLASH / INTRO LOADER ============ */
/* Full viewport opaque cover. Uses 100dvh so iOS Safari (which shrinks
   the viewport when URL bar is visible) doesn't leave a gap exposing
   the page content underneath. Z-index high enough to sit above
   utility bar (101), nav (100), and mobile-menu (200). */
.splash{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100dvh;z-index:99999;background-color:#061328;background:var(--ink-3);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .8s ease-out,visibility .8s}
.splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.splash-content{position:relative;z-index:2;text-align:center;color:var(--cream)}
.splash-logo{font-family:var(--serif);font-size:clamp(36px,5vw,64px);font-weight:300;letter-spacing:12px;line-height:1;animation:splashFade 2.6s ease-out forwards}
.splash-logo .dot{color:var(--bronze-2);margin:0 6px;display:inline-block;animation:splashDot 2.6s ease-out forwards}
.splash-tagline{font-size:11px;letter-spacing:6px;text-transform:uppercase;color:var(--bronze-2);margin-top:24px;opacity:0;animation:splashTag 2.6s ease-out .4s forwards}
.splash-progress{width:120px;height:1px;background:rgba(245,240,230,.18);margin:48px auto 0;position:relative;overflow:hidden}
.splash-progress::after{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:var(--bronze-2);animation:splashProgress 2.4s linear infinite}
@keyframes splashFade{0%{opacity:0;transform:translateY(20px) scale(.96);letter-spacing:6px}60%{letter-spacing:12px}100%{opacity:1;transform:translateY(0) scale(1);letter-spacing:12px}}
@keyframes splashDot{0%{opacity:0;color:transparent}40%{color:transparent}60%{color:var(--bronze-2);opacity:1}100%{color:var(--bronze-2);opacity:1}}
@keyframes splashTag{0%{opacity:0;transform:translateY(10px)}100%{opacity:.9;transform:translateY(0)}}
@keyframes splashProgress{0%{left:-30%}100%{left:130%}}
.no-scroll{overflow:hidden}
.hero-content{position:relative;z-index:2;height:100%;max-width:1480px;margin:0 auto;padding:0 48px 120px;display:flex;flex-direction:column;justify-content:flex-end}
.hero.small .hero-content{padding-bottom:80px}
.hero-eyebrow{font-size:11px;letter-spacing:5px;text-transform:uppercase;opacity:.9;margin-bottom:28px;font-weight:500;display:flex;align-items:center;gap:16px}
.hero-eyebrow::before{content:"";width:48px;height:1px;background:var(--bronze-2)}
.hero h1{font-family:var(--serif);font-size:clamp(52px,8vw,128px);font-weight:300;line-height:.98;letter-spacing:-1.5px;max-width:1100px;margin-bottom:40px}
.hero.small h1{font-size:clamp(40px,6vw,88px);margin-bottom:24px}
.hero h1 em{font-style:italic;color:var(--bronze-2);font-weight:300}
.hero-sub{font-size:18px;font-weight:300;line-height:1.6;max-width:540px;opacity:.92;margin-bottom:52px}
.hero.small .hero-sub{margin-bottom:0}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap}

.btn-primary{background:var(--cream);color:var(--ink);padding:20px 40px;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:600;transition:all .3s;border:1px solid var(--cream);display:inline-block;cursor:pointer}
.btn-primary:hover{background:var(--bronze-2);border-color:var(--bronze-2);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--cream);padding:20px 40px;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:500;transition:all .3s;border:1px solid rgba(245,240,230,.4);display:inline-block}
.btn-ghost:hover{border-color:var(--cream);background:rgba(245,240,230,.08)}
.btn-dark{background:var(--ink);color:var(--cream);border:1px solid var(--ink);padding:20px 40px;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:600;transition:all .3s;display:inline-block}
.btn-dark:hover{background:var(--ink-2)}

.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:3;font-size:10px;letter-spacing:3px;text-transform:uppercase;opacity:.7;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-scroll-line{width:1px;height:40px;background:var(--bronze-2);animation:scrollLine 2s infinite}
@keyframes scrollLine{0%,100%{opacity:.3;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ============ SECTION ============ */
section{padding:140px 0;position:relative}
section.compact{padding:96px 0}
.container{max-width:1480px;margin:0 auto;padding:0 48px}
.container.narrow{max-width:980px}
.section-head{margin-bottom:88px;max-width:820px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .eyebrow::before{display:none}
.section-head.center .lede{margin-left:auto;margin-right:auto}
.eyebrow{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--bronze);font-weight:500;margin-bottom:24px;display:flex;align-items:center;gap:16px}
.eyebrow::before{content:"";width:48px;height:1px;background:var(--bronze)}
h2{font-family:var(--serif);font-size:clamp(40px,5vw,80px);font-weight:300;line-height:1.05;letter-spacing:-1px;margin-bottom:28px}
h2 em{font-style:italic;color:var(--bronze);font-weight:300}
h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,42px);line-height:1.15;margin-bottom:16px}
.lede{font-size:19px;font-weight:300;line-height:1.7;color:#3a4762;max-width:720px}
.dark{background:var(--ink);color:var(--cream)}
.dark h2,.dark h3,.dark h4{color:var(--cream)}
.dark .lede{color:rgba(245,240,230,.72)}
.dark .eyebrow{color:var(--bronze-2)}
.dark .eyebrow::before{background:var(--bronze-2)}

/* ============ TWO-COL ============ */
.two-col{display:grid;grid-template-columns:1.05fr 1fr;gap:120px;align-items:center}
.two-col.reverse > div:first-child{order:2}
.two-col .img-col{aspect-ratio:4/5;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#1a3050}
.two-col .text-col h2{margin-bottom:36px}
.two-col .text-col p{margin-bottom:24px;font-size:17px;color:#3a4762;line-height:1.75}
.dark .two-col .text-col p{color:rgba(245,240,230,.8)}
.signature{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--ink);margin-top:48px;padding-top:40px;border-top:1px solid var(--line-dark)}
.dark .signature{color:var(--cream);border-color:var(--line-light)}
.signature small{display:block;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--bronze);margin-top:14px;font-weight:500}

/* ============ FLEET / MODEL ROWS ============ */
.fleet{background:var(--ink);color:var(--cream)}
.fleet h2{color:var(--cream)}
.fleet .lede{color:rgba(245,240,230,.72)}
/* padding-top/bottom only — keeps horizontal padding inherited from .container */
.fleet-intro{padding-top:140px;padding-bottom:120px;border-bottom:1px solid var(--line-light)}

a.model-row,.model-row{display:grid !important;grid-template-columns:1fr 1fr;align-items:stretch;min-height:80vh;border-bottom:1px solid var(--line-light);color:inherit;text-decoration:none}
.model-row:nth-child(even) .model-visual{order:2}
.model-row:nth-child(even) .model-info{order:1;padding-left:48px;padding-right:96px}
.model-visual{min-height:80vh;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#1a3050;position:relative}
.model-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,rgba(13,37,75,.25) 100%)}
.model-info{padding:80px 96px 80px 48px}
.model-cat{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--bronze-2);font-weight:500;margin-bottom:24px}
.model-info h3{font-family:var(--serif);font-size:clamp(40px,4.5vw,68px);font-weight:300;line-height:1;letter-spacing:-1px;margin-bottom:24px;color:var(--cream)}
.model-tag{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--bronze-2);margin-bottom:32px}
.model-desc{font-size:16px;line-height:1.75;color:rgba(245,240,230,.78);margin-bottom:40px;max-width:520px}
.model-specs{display:flex;gap:48px;padding:32px 0;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);margin-bottom:40px;max-width:520px;flex-wrap:wrap}
.model-spec-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(245,240,230,.55);margin-bottom:8px}
.model-spec-val{font-family:var(--serif);font-size:28px;font-weight:300;color:var(--cream)}
.model-ctas{display:flex;gap:16px;flex-wrap:wrap}
.model-link{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--bronze-2);font-weight:600;padding:16px 28px;border:1px solid var(--bronze);transition:all .3s;cursor:pointer;display:inline-block}
.model-link:hover{background:var(--bronze);color:var(--ink)}
.model-link.outline{border-color:var(--line-light);color:rgba(245,240,230,.7)}
.model-link.outline:hover{border-color:var(--cream);color:var(--cream);background:transparent}

/* ============ YACHT DETAIL PAGE ============ */
.spec-table{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);margin:64px 0}
.spec-cell{padding:40px 24px;border-right:1px solid var(--line-dark);text-align:center}
.spec-cell:last-child{border-right:none}
.spec-cell .label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#6b7689;font-weight:500;margin-bottom:14px}
.spec-cell .val{font-family:var(--serif);font-size:40px;font-weight:300;color:var(--ink);line-height:.9;letter-spacing:-1px}
.spec-cell .val .unit{font-size:18px;color:var(--bronze);margin-left:4px}

.features-list{list-style:none;margin:48px 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 56px}
.features-list li{padding-left:32px;position:relative;font-size:15px;color:#3a4762;line-height:1.65}
.features-list li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:1px;background:var(--bronze)}
.dark .features-list li{color:rgba(245,240,230,.85)}
.dark .features-list li::before{background:var(--bronze-2)}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.gallery-item{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#2a3850}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);margin-bottom:120px}
.stat{padding:60px 32px;text-align:center;border-right:1px solid var(--line-dark)}
.stat:last-child{border-right:none}
.stat-num{font-family:var(--serif);font-size:84px;font-weight:300;line-height:.9;color:var(--ink);margin-bottom:20px;letter-spacing:-2px}
.stat-num span{color:var(--bronze);font-style:italic;font-size:.7em}
.stat-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#6b7689;font-weight:500}

/* ============ VALUES ============ */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.value{padding:0}
.value-num{font-family:var(--serif);font-size:24px;color:var(--bronze);font-style:italic;margin-bottom:24px;letter-spacing:1px}
.value h4{font-family:var(--serif);font-size:32px;font-weight:400;margin-bottom:18px;color:var(--ink);line-height:1.2}
.value p{color:#3a4762;font-size:16px;line-height:1.7}

/* ============ FULL-BLEED IMAGE SECTION ============ */
.bleed{position:relative;color:var(--cream);min-height:90vh;display:flex;align-items:center;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--ink)}
.bleed.left::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,37,75,.92) 0%,rgba(13,37,75,.55) 50%,rgba(13,37,75,.3) 100%)}
.bleed.right::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,19,40,.5) 0%,rgba(6,19,40,.2) 50%,rgba(6,19,40,.8) 100%)}
.bleed .container{position:relative;z-index:1}
.bleed.right .container{display:flex;justify-content:flex-end}
.bleed-content{max-width:680px}
.bleed.right .bleed-content{max-width:580px}
.bleed h2{color:var(--cream);margin-bottom:32px}
.bleed .eyebrow{color:var(--bronze-2)}
.bleed .eyebrow::before{background:var(--bronze-2)}
.bleed p{font-size:18px;line-height:1.75;margin-bottom:24px;color:rgba(245,240,230,.88)}

.points-grid{list-style:none;margin:48px 0;display:grid;grid-template-columns:1fr 1fr;gap:20px 40px}
.points-grid li{padding-left:24px;position:relative;font-size:14px;color:rgba(245,240,230,.85);line-height:1.5}
.points-grid li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:1px;background:var(--bronze-2)}

.itinerary{list-style:none;margin:36px 0 48px;border-top:1px solid rgba(245,240,230,.2)}
.itinerary li{padding:18px 0;border-bottom:1px solid rgba(245,240,230,.12);display:flex;gap:24px;align-items:baseline}
.itinerary li span:first-child{font-family:var(--serif);font-style:italic;color:var(--bronze-2);font-size:14px;min-width:60px;letter-spacing:1px}
.itinerary li span:last-child{font-size:15px;color:rgba(245,240,230,.88)}

/* ============ SERVICES ============ */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 80px;margin-top:80px}
.service{border-top:1px solid var(--ink);padding-top:40px}
.service-num{font-family:var(--serif);font-size:14px;color:var(--bronze);letter-spacing:3px;margin-bottom:18px;font-style:italic}
.service h4{font-family:var(--serif);font-size:34px;font-weight:400;margin-bottom:18px;line-height:1.15}
.service p{color:#3a4762;font-size:16px;line-height:1.7}

/* ============ TESTIMONIAL ============ */
.testimonial{background:var(--ink);color:var(--cream);padding:180px 0;text-align:center;position:relative;overflow:hidden}
.testimonial::before{content:"\201C";position:absolute;top:80px;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:240px;color:var(--bronze);opacity:.15;line-height:1}
.testimonial blockquote{font-family:var(--serif);font-size:clamp(32px,3.4vw,52px);font-weight:300;line-height:1.3;max-width:1100px;margin:0 auto 48px;font-style:italic;position:relative;z-index:1}
.testimonial-author{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--bronze-2);font-weight:500}
.testimonial-author small{display:block;color:rgba(245,240,230,.55);margin-top:8px;letter-spacing:2px}

/* ============ JOURNAL ============ */
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:80px}
.journal-card{cursor:pointer;transition:transform .4s}
.journal-card:hover{transform:translateY(-6px)}
.journal-img{aspect-ratio:3/2;background-size:cover;background-position:center;margin-bottom:28px;background-color:#d4ccb8}
.journal-meta{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--bronze);margin-bottom:14px;font-weight:500}
.journal-card h4{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.25;color:var(--ink);max-width:380px}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:96px;align-items:start}
.contact-left h2{margin-bottom:36px}
.contact-info{margin-top:56px;padding-top:56px;border-top:1px solid var(--line-dark)}
.contact-row{margin-bottom:32px}
.contact-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--bronze);margin-bottom:8px;font-weight:500}
.contact-value{font-size:17px;color:var(--ink);line-height:1.6}
.contact-value a:hover{color:var(--bronze)}
.channels{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.channels a{padding:14px 24px;border:1px solid var(--ink);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;transition:all .25s}
.channels a:hover{background:var(--ink);color:var(--cream)}

.form{background:var(--ink);padding:56px 48px;color:var(--cream);border:1px solid var(--ink)}
.form h3{font-family:var(--serif);font-size:30px;font-weight:400;margin-bottom:10px;color:var(--cream)}
.form-sub{font-size:13px;color:rgba(245,240,230,.65);margin-bottom:40px;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form input,.form select,.form textarea{width:100%;padding:14px 0;background:transparent;border:none;border-bottom:1px solid rgba(245,240,230,.25);color:var(--cream);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .25s}
.form input::placeholder,.form textarea::placeholder{color:rgba(245,240,230,.5)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--bronze-2)}

/* Field-level error states */
.form input.is-invalid,.form select.is-invalid,.form textarea.is-invalid{border-bottom-color:#ff8a7a;background:rgba(255,138,122,.06)}
.form .checkbox.is-invalid input[type=checkbox]{outline:1px solid #ff8a7a;outline-offset:3px}
.field-error{display:none;margin-top:6px;font-size:12px;color:#ff8a7a;line-height:1.4;letter-spacing:.2px;font-weight:400}
.field-error.show{display:block}
.field-error-block{margin-top:-20px;margin-bottom:16px}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9a76d' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center}
.form select option{background:var(--ink);color:var(--cream)}
.form-field{margin-bottom:20px}
.checkbox{display:flex;align-items:flex-start;gap:14px;margin:32px 0;font-size:12px;color:rgba(245,240,230,.7);line-height:1.6}
.checkbox input{width:auto;margin-top:3px;accent-color:var(--bronze)}
.checkbox a{color:var(--bronze-2);text-decoration:underline}
.form .btn-primary{width:100%;margin-top:8px}

/* ============ CTA BLOCK ============ */
.cta-block{background:var(--ink-2);color:var(--cream);padding:120px 0;text-align:center}
.cta-block h2{color:var(--cream);max-width:880px;margin:0 auto 32px}
.cta-block p{color:rgba(245,240,230,.78);font-size:18px;max-width:580px;margin:0 auto 48px;line-height:1.7}
.cta-block .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============ FOOTER ============ */
footer{background:var(--ink-3);color:rgba(245,240,230,.7);padding:96px 0 36px}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:64px;padding-bottom:64px;border-bottom:1px solid var(--line-light)}
.footer-brand .logo{color:var(--cream);font-size:32px}
.footer-brand p{margin-top:24px;font-size:14px;line-height:1.7;max-width:380px;color:rgba(245,240,230,.65)}
.footer-col h5{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cream);margin-bottom:24px;font-weight:600}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:14px;font-size:14px}
.footer-col a{transition:color .25s}
.footer-col a:hover{color:var(--bronze-2)}
.footer-bottom{padding-top:36px;display:flex;justify-content:space-between;align-items:center;font-size:12px;flex-wrap:wrap;gap:16px;color:rgba(245,240,230,.55)}
.footer-legal a{margin-left:28px;opacity:.85;transition:opacity .2s}
.footer-legal a:hover{opacity:1;color:var(--bronze-2)}
.social{display:flex;gap:14px;margin-top:28px}
.social a{width:40px;height:40px;border:1px solid var(--line-light);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .25s;font-size:11px;letter-spacing:1px;font-weight:500}
.social a:hover{border-color:var(--bronze);color:var(--bronze-2)}

/* ============ 404 ============ */
.error-page{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px;background:var(--cream-2)}
.error-page .container{max-width:600px}
.error-page h1{font-family:var(--serif);font-size:clamp(72px,12vw,160px);font-weight:300;line-height:.9;letter-spacing:-3px;color:var(--ink);margin-bottom:24px}
.error-page h2{font-family:var(--serif);font-size:32px;margin-bottom:20px}
.error-page p{font-size:17px;color:#3a4762;margin-bottom:40px}

/* ============ LEGAL PAGES ============ */
.legal{padding-top:80px;padding-bottom:120px;background:var(--cream)}
.legal .container{max-width:780px}
.legal h1{font-family:var(--serif);font-size:48px;font-weight:300;line-height:1.1;margin-bottom:16px;color:var(--ink)}
.legal .updated{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--bronze);margin-bottom:48px}
.legal h2{font-family:var(--serif);font-size:28px;font-weight:400;margin:48px 0 16px;color:var(--ink)}
.legal h3{font-family:var(--serif);font-size:22px;font-weight:400;margin:32px 0 12px;color:var(--ink)}
.legal p{font-size:16px;color:#3a4762;margin-bottom:18px;line-height:1.75}
.legal ul,.legal ol{margin:18px 0 18px 24px;color:#3a4762;font-size:16px;line-height:1.75}
.legal li{margin-bottom:8px}

/* ============ COOKIE CONSENT BANNER + MODAL ============ */
/* Slide-up dark navy banner at bottom; Customize opens fullscreen modal
   with granular toggles (Necessary / Analytics / Marketing). Choice stored
   in localStorage with version tag — see cookie-consent.js for behaviour. */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9000;background:var(--ink-3);color:var(--cream);border-top:1px solid var(--bronze);transform:translateY(110%);transition:transform .55s cubic-bezier(.16,1,.3,1);visibility:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
.cookie-banner.show{transform:translateY(0);visibility:visible}
.cookie-banner-inner{max-width:1480px;margin:0 auto;padding:28px 48px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.cookie-text h3{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--cream);margin-bottom:8px;letter-spacing:.5px}
.cookie-text p{font-size:13px;line-height:1.6;color:rgba(245,240,230,.78);max-width:780px;margin:0}
.cookie-text a{color:var(--bronze-2);text-decoration:underline;text-underline-offset:3px}
.cookie-text a:hover{color:var(--cream)}
.cookie-actions{display:flex;gap:12px;flex-shrink:0}
.cookie-actions button{font-family:var(--sans);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;padding:14px 22px;cursor:pointer;transition:all .25s;border:1px solid;white-space:nowrap}
.cookie-customize{background:transparent;border-color:rgba(245,240,230,.3);color:rgba(245,240,230,.75)}
.cookie-customize:hover{border-color:var(--cream);color:var(--cream)}
.cookie-reject{background:transparent;border-color:rgba(245,240,230,.3);color:rgba(245,240,230,.75)}
.cookie-reject:hover{border-color:var(--cream);color:var(--cream)}
.cookie-accept{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.cookie-accept:hover{background:var(--bronze-2);border-color:var(--bronze-2);color:var(--ink-3)}

/* Customize modal */
.cookie-modal{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.cookie-modal.show{opacity:1;visibility:visible}
.cookie-modal-overlay{position:absolute;inset:0;background:rgba(6,19,40,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}
.cookie-modal-content{position:relative;background:var(--cream);color:var(--ink);max-width:580px;width:100%;max-height:90vh;overflow-y:auto;padding:48px;border:1px solid var(--bronze)}
.cookie-modal-close{position:absolute;top:18px;right:22px;background:transparent;color:var(--ink);font-size:28px;line-height:1;font-weight:300;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:color .25s,transform .3s}
.cookie-modal-close:hover{color:var(--bronze);transform:rotate(90deg)}
.cookie-modal h2{font-family:var(--serif);font-size:32px;font-weight:300;margin-bottom:8px;letter-spacing:-.5px;color:var(--ink)}
.cookie-modal-intro{font-size:14px;color:#3a4762;line-height:1.7;margin-bottom:28px}

.cookie-category{padding:20px 0;border-top:1px solid var(--line-dark)}
.cookie-category:last-of-type{border-bottom:1px solid var(--line-dark);margin-bottom:32px}
.cookie-cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:16px}
.cookie-cat-header h3{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ink);margin:0;letter-spacing:0}
.cookie-category p{font-size:13px;line-height:1.55;color:#5d6a82;margin:0}

/* Toggle switch */
.cookie-toggle.locked{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--bronze);font-weight:600;padding:5px 11px;border:1px solid var(--bronze);background:transparent}
.cookie-toggle{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.cookie-toggle input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.cookie-toggle-slider{display:block;width:44px;height:22px;background:#cdc8bd;border-radius:11px;position:relative;cursor:pointer;transition:background .25s}
.cookie-toggle-slider::before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:var(--cream);border-radius:50%;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.cookie-toggle input:checked + .cookie-toggle-slider{background:var(--bronze)}
.cookie-toggle input:checked + .cookie-toggle-slider::before{transform:translateX(22px)}

.cookie-modal-actions{display:flex;justify-content:flex-end;gap:12px}
.cookie-modal-actions button{background:var(--ink);color:var(--cream);border:1px solid var(--ink);padding:16px 32px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;cursor:pointer;transition:all .25s}
.cookie-modal-actions button:hover{background:var(--bronze);border-color:var(--bronze)}

/* Footer "Manage cookies" link */
.cookie-manage-link{font-size:12px;color:rgba(245,240,230,.55);background:transparent;border:none;cursor:pointer;letter-spacing:1px;font-family:var(--sans);padding:0;text-decoration:underline;text-underline-offset:3px;margin-left:28px;opacity:.85;transition:opacity .2s,color .2s}
.cookie-manage-link:hover{opacity:1;color:var(--bronze-2)}

@media (max-width:760px){
  .cookie-banner-inner{grid-template-columns:1fr;gap:18px;padding:24px 20px}
  .cookie-actions{flex-wrap:wrap;gap:8px}
  .cookie-actions button{flex:1;min-width:0;padding:13px 14px;font-size:10px;letter-spacing:2px}
  .cookie-text h3{font-size:18px}
  .cookie-text p{font-size:12px}
  .cookie-modal{padding:0}
  .cookie-modal-content{padding:28px 22px;max-height:100vh;max-height:100dvh;height:100dvh;width:100%;max-width:none;border:none}
  .cookie-modal h2{font-size:24px}
  .cookie-modal-actions{justify-content:stretch}
  .cookie-modal-actions button{width:100%}
  .cookie-manage-link{margin-left:0;margin-top:12px;display:inline-block}
}

/* ============ RESPONSIVE ============ */

/* Laptop screens (typical MacBook displays: 13" ~1440x900, 14"/16" ~1512x982).
   Triggered when viewport is narrow OR short — scales hero so content fits on screen without scroll. */
/* Laptop-only adjustments: viewport 1025-1440px wide or short.
   Explicitly EXCLUDES mobile (≤1024px) so mobile nav padding from the
   earlier @media (max-width:1024px) block isn't overridden. */
@media (min-width:1025px) and (max-width:1440px), (max-height:820px) and (min-width:1025px){
  /* Hero typography scaled down for shorter viewports */
  .hero h1{font-size:clamp(44px,5.6vw,84px);line-height:1;margin-bottom:28px}
  .hero-sub{font-size:16px;margin-bottom:36px;max-width:500px}
  .hero-eyebrow{margin-bottom:20px}
  .hero-content{padding:0 40px 72px}
  .hero{min-height:640px}
  /* Inner-page hero (.small) is generous on laptops: tall enough that the
     eyebrow never crowds the nav, with the headline centred lower in the frame. */
  .hero.small{min-height:620px;height:calc(82vh + 36px)}
  .hero.small .hero-content{padding-bottom:120px}
  .hero.small h1{font-size:clamp(44px,5.6vw,84px);margin-bottom:22px}
  .hero.small .hero-eyebrow{margin-bottom:24px}

  /* Section headings — slightly smaller */
  h2{font-size:clamp(36px,4.4vw,64px);margin-bottom:24px}
  .lede{font-size:17px}

  /* Nav: more compact paddings and slightly smaller logo */
  .nav-inner{padding:18px 40px}
  .nav.scrolled .nav-inner{padding:14px 40px}
  .logo img{height:clamp(46px,3.4vw,56px)}
  .nav.scrolled .logo img{height:clamp(40px,3vw,48px)}
  .nav-links a,.nav-cta{font-size:13px}

  /* Container side padding */
  .container{padding:0 40px}

  /* Sections — slightly less vertical air */
  section{padding:120px 0}
  section.compact{padding:80px 0}
}

@media (max-width:1100px){
  .two-col,.contact-grid{grid-template-columns:1fr;gap:64px}
  .two-col.reverse > div:first-child{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line-dark)}
  .values,.services-grid{grid-template-columns:1fr;gap:40px}
  .journal-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:48px}
  .model-row,.model-row:nth-child(even){grid-template-columns:1fr}
  .model-row:nth-child(even) .model-visual{order:0}
  .model-row:nth-child(even) .model-info{padding:64px 48px}
  .model-info{padding:64px 48px}
  .model-visual{min-height:60vh}
  .points-grid,.features-list{grid-template-columns:1fr}
  .spec-table{grid-template-columns:repeat(2,1fr)}
  .spec-cell:nth-child(2){border-right:none}
  .spec-cell:nth-child(1),.spec-cell:nth-child(2){border-bottom:1px solid var(--line-dark)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .utility-left{display:none}
  .utility-inner{padding-left:20px;padding-right:20px}
  .container{padding-left:20px;padding-right:20px}
  section{padding:80px 0}

  /* Hero typography — significantly compressed for narrow viewports */
  .hero-content{padding:0 20px 56px;justify-content:flex-end}
  .hero-eyebrow{font-size:10px;letter-spacing:3px;margin-bottom:18px;gap:12px}
  .hero-eyebrow::before{width:28px}
  .hero h1{font-size:clamp(34px,9vw,52px);line-height:1;letter-spacing:-1px;margin-bottom:24px}
  .hero.small h1{font-size:clamp(32px,8vw,48px);margin-bottom:16px}
  .hero-sub{font-size:14px;line-height:1.5;margin-bottom:28px;max-width:100%}
  .hero-ctas{flex-direction:column;gap:10px;align-items:stretch}
  .hero-ctas .btn-primary,.hero-ctas .btn-ghost,.hero-ctas .btn-dark{padding:16px 28px;font-size:11px;text-align:center;width:100%}
  .hero-scroll{display:none}

  /* Section headings + lede */
  h2{font-size:clamp(30px,7vw,44px);margin-bottom:18px;letter-spacing:-.5px}
  h3{font-size:clamp(24px,5vw,32px)}
  .lede{font-size:16px}
  .section-head{margin-bottom:48px}

  .journal-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .form{padding:40px 24px}
  .form-row{grid-template-columns:1fr}
  .stat-num{font-size:60px}
  .gallery-grid{grid-template-columns:1fr}
  .spec-table{grid-template-columns:1fr}
  .spec-cell{border-right:none!important;border-bottom:1px solid var(--line-dark);padding:24px 16px}
  .spec-cell:last-child{border-bottom:none}
  .spec-cell .val{font-size:32px}

  /* Homepage models — tighter rows on mobile */
  .model-row,a.model-row,.model-row:nth-child(even){grid-template-columns:1fr !important;min-height:auto !important}
  .model-row:nth-child(even) .model-visual{order:0}
  .model-visual{min-height:46vh}
  .model-info,.model-row:nth-child(even) .model-info{padding:48px 20px !important}
  .model-info h3{font-size:clamp(34px,9vw,52px);line-height:1;margin-bottom:18px}
  .model-cat{font-size:10px;letter-spacing:3px;margin-bottom:18px}
  .model-tag{font-size:18px;margin-bottom:24px}
  .model-desc{font-size:15px;margin-bottom:28px;max-width:100%}
  .model-specs{gap:28px;padding:24px 0;margin-bottom:28px;max-width:100%}
  .model-spec-val{font-size:22px}
  .model-spec-label{font-size:9px;letter-spacing:1.5px;margin-bottom:4px}
  .model-ctas{flex-direction:column;gap:10px;align-items:stretch}
  .model-link{padding:14px 22px;font-size:11px;text-align:center}

  /* Fleet intro lede — keep horizontal padding inherited from .container */
  .fleet-intro{padding-top:80px;padding-bottom:64px}

  /* CTA block */
  .cta-block{padding:80px 20px}
  .cta-block .btns{flex-direction:column;gap:12px;align-items:stretch}
  .cta-block .btns a{width:100%;text-align:center}

  /* Stats */
  .stats{grid-template-columns:1fr 1fr;margin-bottom:64px}
  .stat{padding:36px 16px}
  .stat:nth-child(odd){border-right:1px solid var(--line-dark)}
  .stat:nth-child(2n){border-right:none}
  .stat-num{font-size:48px}

  /* Two-col layouts (about, monachus, etc.) */
  .two-col{gap:48px}
  .two-col .img-col{aspect-ratio:4/3}

  /* Footer logo + sections compact */
  .footer-brand .logo{font-size:22px;letter-spacing:4px}
  footer{padding:64px 0 32px}
  .footer-grid{padding-bottom:48px;gap:32px}
}