/* ==========================================================================
   NAUCRATES YACHTS — Design System
   Mediterranean minimalism. Guidance as the emotional core.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Color */
  --bone:#F6F2EA;
  --paper:#FBF9F4;
  --ink:#1C211E;
  --ink-soft:#4A4F49;
  --marine:#14313A;
  --marine-deep:#0C2026;
  --marine-mid:#1D4048;
  --stone:#DCD3BE;
  --stone-soft:#EAE3D2;
  --sea:#6F8E93;
  --harbour:#BD7442;
  --harbour-soft:#D9A876;
  --border:rgba(28,33,30,.14);
  --border-on-dark:rgba(246,242,234,.18);
  --on-marine:#F2ECDF;
  --on-marine-soft:#9FB4B8;

  /* Type */
  --font-display:'Frank Ruhl Libre', Georgia, serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing (spacious, per density dial) */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 32px;
  --space-lg: 56px;
  --space-xl: 88px;
  --space-2xl: 132px;
  --space-3xl: 180px;

  --container: 1360px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-sm: 220ms;
  --dur-md: 420ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

::selection{ background:var(--harbour); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--harbour);
  outline-offset:3px;
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--space-md);
}
@media (max-width:900px){
  .wrap{ padding:0 var(--space-sm); }
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--harbour);
  display:flex;
  align-items:center;
  gap:var(--space-xs);
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--harbour);
  display:inline-block;
}
.eyebrow--lined{ width:100%; }
.eyebrow--lined::after{
  content:'';
  flex:1; height:1px;
  background:var(--border);
  margin-left:var(--space-sm);
}
.dark .eyebrow--lined::after, .deep .eyebrow--lined::after{ background:var(--border-on-dark); }
.ref-tag{ color:var(--ink-soft); font-weight:400; }
.dark .ref-tag, .deep .ref-tag{ color:var(--on-marine-soft); }
p{ margin:0; }
.lede{
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:46ch;
}

/* Coordinate marginalia — signature device */
.bearing{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--harbour);
  text-transform:uppercase;
  white-space:nowrap;
}
.bearing--dark{ color:var(--harbour-soft); }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:16px 26px;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
  white-space:nowrap;
}
.btn::before, .btn::after{
  content:'';
  position:absolute; width:9px; height:9px;
  opacity:0;
  transition:opacity var(--dur-sm) var(--ease), width var(--dur-sm) var(--ease), height var(--dur-sm) var(--ease);
}
.btn::before{ top:-5px; left:-5px; border-top:1px solid var(--harbour); border-left:1px solid var(--harbour); }
.btn::after{ bottom:-5px; right:-5px; border-bottom:1px solid var(--harbour); border-right:1px solid var(--harbour); }
.btn:hover::before, .btn:hover::after{ opacity:1; width:12px; height:12px; }
.btn:hover{ background:var(--ink); color:var(--bone); }
.btn svg{ width:14px; height:14px; transition:transform var(--dur-sm) var(--ease); flex:none; }
.btn:hover svg{ transform:translateX(3px); }

.btn--solid{ background:var(--marine); border-color:var(--marine); color:var(--on-marine); }
.btn--solid:hover{ background:var(--ink); border-color:var(--ink); }

.btn--ghost-light{ border-color:var(--border-on-dark); color:var(--on-marine); }
.btn--ghost-light:hover{ background:var(--on-marine); color:var(--marine-deep); border-color:var(--on-marine); }

.btn--harbour{ border-color:var(--harbour); color:var(--harbour); }
.btn--harbour:hover{ background:var(--harbour); color:var(--paper); }
.btn--harbour::before, .btn--harbour::after{ border-color:var(--ink); }

.text-link{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:1px solid var(--harbour);
  padding-bottom:3px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  transition:opacity var(--dur-sm) var(--ease);
}
.text-link:hover{ opacity:.6; }

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:22px 0;
  transition:background var(--dur-md) var(--ease), padding var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .wrap{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-md);
}
.nav-col-left{ justify-self:end; }
.nav-col-right{ justify-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); }
.site-header.is-scrolled{
  background:rgba(246,242,234,.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-color:var(--border);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.site-header.is-dark-page{ }
.logo{
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:.02em;
  color:var(--on-marine);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  line-height:1.1;
  white-space:nowrap;
}
.site-header.is-scrolled .logo{ color:var(--ink); }
.logo small{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--harbour-soft);
  margin-top:3px;
}
.site-header.is-scrolled .logo small{ color:var(--harbour); }

.nav-links{ display:flex; gap:var(--space-md); list-style:none; margin:0; padding:0; white-space:nowrap; }
.nav-links a{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-marine-soft);
  padding:6px 0;
  position:relative;
  transition:color var(--dur-sm) var(--ease);
}
.site-header.is-scrolled .nav-links a{ color:var(--ink-soft); }
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--harbour);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-sm) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--on-marine); }
.site-header.is-scrolled .nav-links a:hover, .site-header.is-scrolled .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-utility{ display:flex; align-items:center; gap:var(--space-sm); }
.lang-switch{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--on-marine-soft);
  display:flex; gap:6px;
}
.site-header.is-scrolled .lang-switch{ color:var(--ink-soft); }
.lang-switch button{
  background:none; border:none; color:inherit; cursor:pointer; padding:2px 4px;
}
.lang-switch button[aria-current="true"]{ color:var(--harbour); }

.nav-toggle{
  display:flex;
  background:none; border:none; cursor:pointer;
  width:32px; height:22px; position:relative;
  margin-left:var(--space-xs);
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px;
  background:var(--on-marine);
  transition:transform var(--dur-sm) var(--ease), opacity var(--dur-sm) var(--ease), top var(--dur-sm) var(--ease);
}
.site-header.is-scrolled .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:2px; }
.nav-toggle span:nth-child(2){ top:11px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.is-open span:nth-child(1){ top:11px; transform:rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:11px; transform:rotate(-45deg); }

/* Mega menu */
.mega{
  position:fixed;
  top:0; left:0; right:0;
  background:var(--marine-deep);
  color:var(--on-marine);
  padding:150px 0 80px;
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  transition:transform var(--dur-md) var(--ease), opacity var(--dur-md) var(--ease), visibility 0s linear var(--dur-md);
  z-index:900;
}
.mega.is-open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  transition:transform var(--dur-md) var(--ease), opacity var(--dur-md) var(--ease), visibility 0s;
}
.mega .wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-2xl); align-items:start; }
.mega-list{ list-style:none; margin:0; padding:0; }
.mega-list li{ border-bottom:1px solid var(--border-on-dark); }
.mega-list a{
  display:flex; align-items:baseline; gap:var(--space-md);
  padding:20px 0;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--on-marine);
  transition:color var(--dur-sm) var(--ease), padding-left var(--dur-sm) var(--ease);
}
.mega-list a span{ font-family:var(--font-mono); font-size:12px; color:var(--harbour); letter-spacing:.1em; }
.mega-list a:hover{ color:var(--harbour-soft); padding-left:14px; }
.mega-note{ color:var(--on-marine-soft); max-width:38ch; font-size:15px; }
.mega-image{ width:100%; aspect-ratio:4/5; object-fit:cover; margin-top:var(--space-md); }
.mega-close{
  position:absolute; top:26px; right:var(--space-md);
  background:none; border:none; color:var(--on-marine); cursor:pointer;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  display:flex; align-items:center; gap:8px;
}

/* ---------- Sections / generic ---------- */
section{ position:relative; }
.section-pad{ padding:var(--space-2xl) 0; }
.dark{ background:var(--marine); color:var(--on-marine); }
.dark h1,.dark h2,.dark h3,.dark h4{ color:var(--on-marine); }
.dark .lede{ color:var(--on-marine-soft); }
.deep{ background:var(--marine-deep); color:var(--on-marine); }
.stone-bg{ background:var(--stone-soft); }
.paper-bg{ background:var(--paper); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xl); }
.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-md); }

hr.rule{ border:none; border-top:1px solid var(--border); margin:0; }
.dark hr.rule, .deep hr.rule{ border-top-color:var(--border-on-dark); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--on-marine);
  overflow:hidden;
  text-align:center;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  animation:hero-zoom 16s var(--ease) forwards;
}
@keyframes hero-zoom{ to{ transform:scale(1); } }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,32,38,.62) 0%, rgba(12,32,38,.12) 22%, rgba(12,32,38,.18) 40%, rgba(12,32,38,.8) 100%);
}
.hero-back{
  position:absolute; z-index:1; top:110px; left:var(--space-md);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-marine-soft);
  transition:color var(--dur-sm) var(--ease);
}
.hero-back:hover{ color:var(--on-marine); }
.hero-content{
  position:relative; z-index:1;
  width:100%; max-width:920px;
  margin:0 auto;
  padding:0 var(--space-md);
  display:flex; flex-direction:column; align-items:center;
}
.hero-content .eyebrow{ justify-content:center; color:var(--harbour-soft); margin-bottom:var(--space-md); opacity:0; animation:rise .8s var(--ease) .3s forwards; }
.hero-content .eyebrow::before{ background:var(--harbour-soft); }
.hero h1{
  font-size:clamp(2.8rem,7.4vw,6.6rem);
  color:var(--on-marine);
  max-width:17ch;
  font-weight:400;
  opacity:0; animation:rise .9s var(--ease) .45s forwards;
}
.hero-sub{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-lg);
  margin-top:var(--space-lg);
  opacity:0; animation:rise .9s var(--ease) .65s forwards;
}
.hero-sub .lede{ text-align:center; max-width:50ch; margin:0 auto; }
.hero-actions{ display:flex; gap:var(--space-sm); flex-wrap:wrap; justify-content:center; }

@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:80ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:160ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:240ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:320ms; }

/* ---------- Typographic moment (full statement) ---------- */
.statement{
  padding:var(--space-3xl) 0;
  text-align:center;
}
.statement h2{
  font-size:clamp(2.1rem,5.2vw,4.4rem);
  max-width:20ch;
  margin:0 auto;
  line-height:1.14;
}
.statement .bearing{ display:block; margin-bottom:var(--space-md); text-align:center; }

/* ---------- Brand intro ---------- */
.brand-intro{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--space-2xl); align-items:center; }
.brand-intro-figure{ position:relative; }
.brand-intro-figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.brand-intro-figure .bearing{ position:absolute; bottom:-18px; left:0; background:var(--bone); padding:6px 10px 0; }
.brand-intro h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); margin-bottom:var(--space-md); }
.brand-intro .lede{ max-width:56ch; margin-bottom:var(--space-md); }
.pilotfish-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.15rem;
  color:var(--marine);
  border-left:2px solid var(--harbour);
  padding-left:var(--space-md);
  margin:var(--space-md) 0;
  max-width:52ch;
}

/* ---------- Ownership journey ---------- */
.journey{ display:flex; flex-direction:column; }
.journey-row{
  display:grid;
  grid-template-columns:120px 1fr 1.4fr;
  gap:var(--space-lg);
  align-items:center;
  padding:var(--space-lg) 0;
  border-top:1px solid var(--border-on-dark);
}
.journey-row:last-child{ border-bottom:1px solid var(--border-on-dark); }
.journey-mark{ font-family:var(--font-mono); font-size:12px; color:var(--harbour-soft); letter-spacing:.1em; }
.journey-name{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.6rem); color:var(--on-marine); }
.journey-desc{ color:var(--on-marine-soft); max-width:48ch; }
.journey-row:hover{ background:rgba(246,242,234,.03); }

/* ---------- Yacht cards (discovery, not generic 3-col) ---------- */
.fleet-feature{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:var(--space-xl);
  align-items:stretch;
  margin-bottom:var(--space-xl);
}
.fleet-feature-media{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.fleet-feature-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.fleet-feature-media:hover img{ transform:scale(1.045); }
.fleet-feature-info{ display:flex; flex-direction:column; justify-content:center; }
.fleet-feature-info .eyebrow{ margin-bottom:var(--space-sm); }
.fleet-feature-info h3{ font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:var(--space-sm); }
.spec-row{ display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-lg); margin:var(--space-md) 0; }
.spec{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px; }
.spec b{ font-size:15px; color:var(--ink); font-weight:500; }
.price-tag{ font-family:var(--font-mono); font-size:14px; color:var(--marine); margin:var(--space-sm) 0 var(--space-md); }
.price-tag b{ font-size:22px; font-family:var(--font-display); font-weight:500; }

/* ---------- Spec plate / feature ledger (detail pages) ---------- */
.plate{
  position:relative;
  border:1px solid var(--border);
  background:var(--paper);
  padding:var(--space-lg);
}
.plate::before, .plate::after{
  content:'';
  position:absolute; width:16px; height:16px;
  border-color:var(--harbour);
}
.plate::before{ top:-1px; left:-1px; border-top:1px solid; border-left:1px solid; }
.plate::after{ bottom:-1px; right:-1px; border-bottom:1px solid; border-right:1px solid; }

.spec-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  margin:var(--space-md) 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.spec-strip__item{
  min-width:0;
  padding:var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-right:1px solid var(--border);
}
.spec-strip__item:last-child{ border-right:none; padding-right:0; }
.spec-strip__value{
  font-family:var(--font-display); font-size:1.3rem; font-weight:500;
  color:var(--ink); display:block; margin-bottom:4px; line-height:1.2;
  overflow-wrap:break-word;
}
@media (min-width:1200px){
  .spec-strip__value{ font-size:1.5rem; }
}
.spec-strip__label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.dark .spec-strip, .deep .spec-strip{ border-color:var(--border-on-dark); }
.dark .spec-strip__item, .deep .spec-strip__item{ border-color:var(--border-on-dark); }
.dark .spec-strip__value, .deep .spec-strip__value{ color:var(--on-marine); }
.dark .spec-strip__label, .deep .spec-strip__label{ color:var(--on-marine-soft); }

.feature-list{ list-style:none; margin:0; padding:0; }
.feature-list li{
  position:relative;
  padding:13px 0 13px 24px;
  border-bottom:1px solid var(--border);
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.4;
}
.feature-list li:first-child{ border-top:1px solid var(--border); }
.feature-list li::before{
  content:'';
  position:absolute; left:0; top:22px;
  width:12px; height:1px;
  background:var(--harbour);
}
.feature-list--excludes li::before{ background:var(--sea); }
.dark .feature-list li, .deep .feature-list li{ border-color:var(--border-on-dark); color:var(--on-marine-soft); }

.tag-plate{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid var(--border); padding:10px 14px; color:var(--ink-soft);
  transition:border-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.tag-plate:hover{ border-color:var(--harbour); color:var(--ink); }

.fleet-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-lg) var(--space-md);
}
.fleet-grid .fleet-card:nth-child(3n+2){ margin-top:var(--space-xl); }
.fleet-card{ display:block; }
.fleet-card-media{ aspect-ratio:5/4; overflow:hidden; margin-bottom:var(--space-sm); position:relative; }
.fleet-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.fleet-card:hover .fleet-card-media img{ transform:scale(1.06); }
.fleet-card-media .view-tag{
  position:absolute; bottom:12px; left:12px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--paper); color:var(--ink); padding:6px 10px;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.fleet-card:hover .view-tag{ opacity:1; transform:translateY(0); }
.fleet-card h4{ font-size:1.15rem; margin-bottom:6px; }
.fleet-card .spec-row{ margin:8px 0 6px; font-size:11px; gap:12px; }
.fleet-card .price-tag{ font-size:12px; margin:0; }
.fleet-card .price-tag b{ font-size:16px; }

.fleet-card--data{
  aspect-ratio:5/4;
  background:var(--marine);
  color:var(--on-marine);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--space-md);
  margin-bottom:var(--space-sm);
}
.fleet-card--data .eyebrow{ color:var(--harbour-soft); }
.fleet-card--data .eyebrow::before{ background:var(--harbour-soft); }
.fleet-card--data h4{ color:var(--on-marine); font-size:1.6rem; }

/* ---------- Filters ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:var(--space-md);
  padding:var(--space-md) 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  align-items:flex-end;
}
.filter-field{ display:flex; flex-direction:column; gap:8px; }
.filter-field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.filter-field select, .filter-field input{
  font-family:var(--font-body); font-size:14px;
  border:1px solid var(--border); background:var(--paper); color:var(--ink);
  padding:11px 14px; min-width:150px; border-radius:var(--radius);
}
.filter-field select:focus, .filter-field input:focus{ border-color:var(--harbour); }
.filter-reset{ margin-left:auto; align-self:center; }
.filter-count{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin:var(--space-md) 0; }

/* ---------- Menorca editorial ---------- */
.menorca-strip{ display:grid; grid-template-columns:1.3fr .7fr 1fr; gap:var(--space-sm); height:78vh; min-height:520px; }
.menorca-strip img{ width:100%; height:100%; object-fit:cover; }
.menorca-strip > div:nth-child(2){ align-self:end; height:70%; }

/* ---------- Why Naucrates pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); margin-top:var(--space-xl); }
.pillar-mark{ font-family:var(--font-mono); font-size:12px; color:var(--harbour); margin-bottom:var(--space-sm); }
.pillar h3{ font-size:clamp(1.7rem,2.6vw,2.3rem); margin-bottom:var(--space-sm); }
.pillar p{ color:var(--ink-soft); max-width:34ch; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--marine-deep); color:var(--on-marine); padding:var(--space-2xl) 0 var(--space-md); }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:var(--space-xl); padding-bottom:var(--space-xl); }
.footer-brand .logo{ margin-bottom:var(--space-sm); }
.footer-brand p{ color:var(--on-marine-soft); max-width:34ch; }
.footer-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--harbour-soft); margin-bottom:var(--space-sm); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:var(--on-marine-soft); font-size:14px; transition:color var(--dur-sm) var(--ease); }
.footer-col a:hover{ color:var(--on-marine); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-sm);
  padding-top:var(--space-md); border-top:1px solid var(--border-on-dark);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--on-marine-soft);
}
.footer-bottom-links{ display:flex; gap:var(--space-md); flex-wrap:wrap; }
.footer-bottom-links a:hover{ color:var(--on-marine); }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:800;
  background:var(--marine-deep);
  border-top:1px solid var(--border-on-dark);
  padding:12px var(--space-sm);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.mobile-cta .wrap{ display:flex; gap:10px; padding:0; }
.mobile-cta a{
  flex:1; text-align:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:14px; border:1px solid var(--border-on-dark); color:var(--on-marine);
}
.mobile-cta a.primary{ background:var(--harbour); border-color:var(--harbour); color:var(--paper); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.field label .req{ color:var(--harbour); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:15px;
  background:var(--paper); border:1px solid var(--border); color:var(--ink);
  padding:14px 16px; border-radius:var(--radius); width:100%;
}
.dark .field input, .dark .field select, .dark .field textarea{ background:rgba(246,242,234,.06); border-color:var(--border-on-dark); color:var(--on-marine); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--harbour); }
.field textarea{ min-height:120px; resize:vertical; }
.field-hint{ font-size:12px; color:var(--ink-soft); }
.dark .field-hint{ color:var(--on-marine-soft); }
.form-status{ margin-top:var(--space-md); font-family:var(--font-mono); font-size:13px; padding:14px 16px; border:1px solid var(--border); display:none; }
.form-status.is-visible{ display:block; }
.form-status.success{ border-color:#3f6b4f; color:#3f6b4f; }
.dark .form-status.success{ color:#9fcbaf; border-color:#9fcbaf; }

/* ---------- Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2xs); }
.gallery img{ width:100%; height:260px; object-fit:cover; cursor:pointer; transition:opacity var(--dur-sm) var(--ease); }
.gallery img:hover{ opacity:.85; }
.gallery a:first-child img{ height:100%; }
.gallery a:nth-child(1){ grid-column:1/3; grid-row:1/3; }
.gallery a:nth-child(1) img{ height:534px; }

.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(12,32,38,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity var(--dur-md) var(--ease), visibility 0s linear var(--dur-md);
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-md) var(--ease); }
.lightbox img{ max-width:90vw; max-height:85vh; object-fit:contain; }
.lightbox-close{ position:absolute; top:var(--space-md); right:var(--space-md); background:none; border:1px solid var(--border-on-dark); color:var(--on-marine); width:44px; height:44px; cursor:pointer; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid var(--border-on-dark); color:var(--on-marine); width:48px; height:48px; cursor:pointer; }
.lightbox-nav.prev{ left:var(--space-md); }
.lightbox-nav.next{ right:var(--space-md); }

/* ---------- Utility ---------- */
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xl); }
.center{ text-align:center; }
.small{ font-size:13px; }
.mt-lg{ margin-top:var(--space-lg); }
.mt-md{ margin-top:var(--space-md); }
.mb-lg{ margin-bottom:var(--space-lg); }
.mb-md{ margin-bottom:var(--space-md); }

.page-header{ padding:calc(var(--space-3xl) + 40px) 0 var(--space-xl); }
.page-header .eyebrow{ margin-bottom:var(--space-md); }
.page-header h1{ font-size:clamp(2.2rem,5vw,4rem); max-width:20ch; }

.split-media{ display:grid; grid-template-columns:1fr 1fr; }
.split-media img{ width:100%; height:100%; object-fit:cover; min-height:420px; }
.split-media .pad{ padding:var(--space-2xl); display:flex; flex-direction:column; justify-content:center; }

.related-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .grid-2, .cols-2, .brand-intro, .split-media{ grid-template-columns:1fr; }
  .fleet-feature{ grid-template-columns:1fr; }
  .fleet-grid{ grid-template-columns:repeat(2,1fr); }
  .fleet-grid .fleet-card:nth-child(3n+2){ margin-top:0; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .pillars{ grid-template-columns:1fr; gap:var(--space-lg); }
  .menorca-strip{ grid-template-columns:1fr 1fr; height:auto; }
  .menorca-strip > div:nth-child(3){ grid-column:1/3; height:50vh; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery a:nth-child(1){ grid-column:1/3; }
  .journey-row{ grid-template-columns:70px 1fr; }
  .journey-desc{ grid-column:1/3; max-width:none; }
}

@media (max-width:760px){
  :root{
    --space-2xl:80px;
    --space-3xl:100px;
  }
  .nav-links, .lang-switch, .nav-utility .btn{ display:none; }
  .nav-col-right{ justify-content:flex-end; }
  .mega .wrap{ grid-template-columns:1fr; }
  .mega{ padding:120px 0 60px; overflow-y:auto; }
  .mega-list a{ font-size:1.7rem; }
  .fleet-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:var(--space-lg); }
  .related-strip{ grid-template-columns:1fr; }
  .mobile-cta{ display:block; }
  body{ padding-bottom:70px; }
  .filters{ flex-direction:column; align-items:stretch; }
  .filter-field select, .filter-field input{ min-width:0; width:100%; }
  .filter-reset{ margin-left:0; }
  .split-media{ grid-template-columns:1fr; }
  .split-media .pad{ padding:var(--space-lg) var(--space-sm); }
  .hero h1{ max-width:100%; }
  .spec-strip{
    display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:row;
    border:none; gap:1px; background:var(--border);
  }
  .spec-strip__item{
    background:var(--bone);
    border-right:none;
    padding:var(--space-sm);
  }
  .dark .spec-strip, .deep .spec-strip{ background:var(--border-on-dark); }
  .dark .spec-strip__item, .deep .spec-strip__item{ background:var(--marine); }
  .plate{ padding:var(--space-md); }
}