/* ============================================================
   FORZA MARE — prototype stylesheet
   Palette drawn from Hull No.1: Moonglow Silver, Stone Grey,
   teak with grey caulking, carbon fibre.
   Display: Marcellus · Body: Jost
   ============================================================ */

:root{
  --carbon:      #14181C;
  --carbon-2:    #1E252B;
  --harbour:     #1D3945;   /* dusk water */
  --harbour-2:   #16303A;
  --moonglow:    #E7EAE8;   /* light silver band */
  --foam:        #F7F8F6;   /* page ground */
  --teak:        #A87848;
  --teak-deep:   #7E5730;
  --ink:         #171C21;
  --ink-soft:    #4C575E;
  --ink-faint:   #7C868C;
  --line:        rgba(23,28,33,.14);
  --line-light:  rgba(247,248,246,.22);
  --max:         1180px;
  --pad:         clamp(20px, 5vw, 56px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--foam);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }

h1,h2,h3,.display{
  font-family:'Marcellus', Georgia, serif;
  font-weight:400;
  line-height:1.12;
  letter-spacing:.01em;
}

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:'Jost',sans-serif;
  font-size:11px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--teak);
  display:block; margin-bottom:18px;
}
.on-dark .eyebrow{ color:#C99A67; }

/* ---------- navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .35s ease, box-shadow .35s ease;
}
.nav-inner{
  max-width:var(--max); margin:0 auto;
  padding:22px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  font-family:'Marcellus',serif;
  font-size:20px; letter-spacing:.34em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
}
.brand small{
  display:block; font-family:'Jost',sans-serif; font-size:9px;
  letter-spacing:.42em; color:rgba(255,255,255,.55); margin-top:2px;
}
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{
  font-size:12px; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav-links a:hover, .nav-links a.active{ color:#fff; border-bottom-color:var(--teak); }
.nav-links a.nav-cta{
  border:1px solid rgba(255,255,255,.5); padding:9px 20px;
}
.nav-links a.nav-cta:hover{ border-color:var(--teak); background:rgba(168,120,72,.15); }

.nav.solid{ background:rgba(20,24,28,.92); backdrop-filter:blur(8px); box-shadow:0 1px 0 rgba(255,255,255,.06); }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; }
.nav-toggle span{ display:block; width:24px; height:1.5px; background:#fff; margin:6px 0; transition:transform .3s, opacity .3s; }

@media (max-width:820px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0; background:var(--carbon);
    flex-direction:column; justify-content:center; gap:30px;
    transform:translateY(-100%); transition:transform .4s ease;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-toggle{ position:relative; z-index:60; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:92vh;
  display:flex; align-items:flex-end;
  color:#fff; overflow:hidden;
}
.hero.short{ min-height:62vh; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-content{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin:0 auto;
  padding:140px var(--pad) clamp(72px, 12vh, 140px);
}
.hero h1{
  font-size:clamp(38px, 6vw, 74px);
  max-width:14ch;
  text-shadow:0 2px 30px rgba(10,16,20,.35);
}
.hero .eyebrow{ text-shadow:0 1px 14px rgba(10,16,20,.65); }
.hero .lede{
  margin-top:22px; max-width:52ch;
  font-size:clamp(15px, 1.6vw, 18px); font-weight:300;
  color:rgba(255,255,255,.88);
}
.hero-ctas{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Jost',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  padding:15px 34px;
  border:1px solid var(--teak);
  transition:background .25s, color .25s, border-color .25s;
}
.btn-solid{ background:var(--teak); color:#fff; }
.btn-solid:hover{ background:var(--teak-deep); border-color:var(--teak-deep); }
.btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-ghost.dark{ color:var(--ink); border-color:var(--ink-soft); }
.btn-ghost.dark:hover{ border-color:var(--ink); background:rgba(23,28,33,.05); }

/* ---------- media placeholders (swap for licensed Focus imagery) ---------- */
.ph{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, #3E5866 0%, #2A4350 34%, #1D3945 62%, #142A33 100%);
}
.ph::before{ /* horizon glow */
  content:""; position:absolute; left:0; right:0; top:38%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(214,196,168,.55), transparent);
}
.ph::after{ /* water sheen */
  content:""; position:absolute; inset:38% 0 0 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(230,214,188,.12), transparent 55%);
}
.ph.light{
  background:linear-gradient(180deg,#D9DFDE 0%,#C4CDCB 40%,#9FB0B0 62%,#7E9498 100%);
}
.ph.light::before{ background:linear-gradient(90deg, transparent, rgba(126,87,48,.4), transparent); }
.ph .hull{
  position:absolute; left:50%; top:44%;
  transform:translate(-50%,-50%);
  width:min(68%, 520px); opacity:.5; z-index:1;
  color:#E8E2D6;
}
.ph.light .hull{ color:#33454C; opacity:.4; }
.ph .shot{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-size:10px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
  background:rgba(16,24,28,.55);
  border:1px solid rgba(255,255,255,.25);
  padding:7px 12px; backdrop-filter:blur(3px);
}
.ph.light .shot{ color:#fff; }
.hero .ph{ position:absolute; inset:0; }
.shot.tr{ left:auto; bottom:auto; right:18px; top:88px; }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(105deg, rgba(12,18,22,.5) 0%, rgba(12,18,22,.12) 46%, rgba(12,18,22,0) 72%),
    linear-gradient(180deg, rgba(14,20,24,.35) 0%, rgba(14,20,24,.05) 40%, rgba(12,18,22,.78) 100%);
}

.ph img.real{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph:has(img.real)::before, .ph:has(img.real)::after{ display:none; }
.ph:has(img.real) .hull{ display:none; }

/* ---------- builders plate (signature element) ---------- */
.plate-band{ position:relative; z-index:3; margin-top:-64px; padding-bottom:8px; }
.plate{
  background:linear-gradient(160deg, #F2F3F1 0%, #E2E6E4 45%, #EDEFEC 100%);
  border:1px solid #9AA3A3;
  box-shadow:0 18px 50px rgba(15,22,26,.28), inset 0 0 0 1px rgba(255,255,255,.7);
  position:relative;
  padding:30px clamp(22px, 4vw, 54px) 26px;
}
.plate::before{
  content:""; position:absolute; inset:7px;
  border:1px solid rgba(23,28,33,.28);
  pointer-events:none;
}
.plate .screw{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #FDFDFC, #B8BFBE 55%, #79837F);
  box-shadow:inset 0 0 0 1px rgba(20,26,30,.35);
}
.plate .screw.tl{ top:10px; left:10px; } .plate .screw.tr{ top:10px; right:10px; }
.plate .screw.bl{ bottom:10px; left:10px; } .plate .screw.br{ bottom:10px; right:10px; }
.plate-title{
  text-align:center;
  font-family:'Marcellus',serif; font-size:13px;
  letter-spacing:.42em; text-transform:uppercase; color:var(--ink);
  margin-bottom:20px;
}
.plate-title span{ color:var(--teak-deep); }
.plate-grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  border-top:1px solid rgba(23,28,33,.25);
}
.plate-cell{
  padding:16px 8px 4px; text-align:center;
  border-right:1px solid rgba(23,28,33,.18);
}
.plate-cell:last-child{ border-right:0; }
.plate-cell b{
  display:block; font-family:'Marcellus',serif; font-weight:400;
  font-size:clamp(17px, 1.9vw, 23px); letter-spacing:.04em; color:var(--ink);
}
.plate-cell span{
  display:block; margin-top:4px;
  font-size:9.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width:860px){
  .plate-grid{ grid-template-columns:repeat(3,1fr); }
  .plate-cell:nth-child(3){ border-right:0; }
  .plate-cell:nth-child(n+4){ border-top:1px solid rgba(23,28,33,.18); }
}
@media (max-width:480px){
  .plate-grid{ grid-template-columns:repeat(2,1fr); }
  .plate-cell{ border-right:1px solid rgba(23,28,33,.18) !important; border-top:0 !important; }
  .plate-cell:nth-child(even){ border-right:0 !important; }
  .plate-cell:nth-child(n+3){ border-top:1px solid rgba(23,28,33,.18) !important; }
}

/* ---------- sections ---------- */
.section{ padding:clamp(72px, 11vw, 128px) 0; }
.section.tight{ padding:clamp(56px, 8vw, 88px) 0; }
.band-moon{ background:var(--moonglow); }
.band-dark{ background:linear-gradient(180deg, var(--harbour) 0%, var(--harbour-2) 100%); color:#EDF1F0; }
.band-carbon{ background:var(--carbon); color:#EDF1F0; }
.on-dark p{ color:rgba(237,241,240,.82); }

.section h2{
  font-size:clamp(28px, 3.6vw, 44px);
  max-width:22ch;
  margin-bottom:22px;
}
.section .intro{ max-width:62ch; font-size:17px; color:var(--ink-soft); }
.on-dark .intro{ color:rgba(237,241,240,.82); }

.center{ text-align:center; }
.center h2, .center .intro{ margin-left:auto; margin-right:auto; }

/* triad statement */
.triad{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top:54px;
}
.triad > div{ padding:34px 30px; border-right:1px solid var(--line); }
.triad > div:last-child{ border-right:0; }
.triad h3{ font-size:24px; margin-bottom:10px; }
.triad p{ font-size:15px; color:var(--ink-soft); }
@media (max-width:820px){
  .triad{ grid-template-columns:1fr; }
  .triad > div{ border-right:0; border-bottom:1px solid var(--line); }
  .triad > div:last-child{ border-bottom:0; }
}

/* alternating feature rows */
.feature{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(30px, 5vw, 72px); align-items:center;
  padding:clamp(44px, 6vw, 72px) 0;
  border-top:1px solid var(--line);
}
.feature:first-of-type{ border-top:0; }
.feature.flip .feature-media{ order:2; }
.feature .ph{ aspect-ratio:4/3; }
.feature h3{ font-size:clamp(22px, 2.6vw, 30px); margin-bottom:14px; }
.feature p{ color:var(--ink-soft); max-width:46ch; }
.feature .spec-note{
  margin-top:18px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teak-deep); font-weight:500;
}
@media (max-width:820px){
  .feature{ grid-template-columns:1fr; }
  .feature.flip .feature-media{ order:0; }
}

/* gallery */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:48px;
}
.gallery .ph{ aspect-ratio:4/3; }
.gallery .ph.wide{ grid-column:span 2; aspect-ratio:auto; }
@media (max-width:820px){
  .gallery{ grid-template-columns:1fr; }
  .gallery .ph.wide{ grid-column:span 1; aspect-ratio:4/3; }
}

/* hairline definition list (specs) */
.spec-table{ margin-top:40px; border-top:1px solid var(--line); }
.spec-row{
  display:grid; grid-template-columns:minmax(180px,.9fr) 1.6fr;
  gap:24px; padding:16px 4px;
  border-bottom:1px solid var(--line);
}
.spec-row dt{
  font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint); padding-top:4px;
}
.spec-row dd{ font-size:16.5px; }
.footnote{
  margin-top:22px; font-size:13px; color:var(--ink-faint); max-width:70ch;
}

/* technical data */
.tech-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,5vw,72px); align-items:start; margin-top:8px;
}
@media (max-width:900px){ .tech-grid{ grid-template-columns:1fr; } }
.tech-grid .spec-table{ margin-top:32px; }
.layouts{ margin-top:32px; }
.layouts img{ width:100%; max-width:520px; margin:0 auto; }
.layouts figcaption{
  margin-top:18px; text-align:center;
  font-size:10.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}
.engines{ margin-top:56px; max-width:760px; }

/* options / inclusions */
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); margin-top:44px; }
@media (max-width:820px){ .cols-2{ grid-template-columns:1fr; } }
.opt-group h4{
  font-family:'Jost',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--teak-deep);
  padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.opt-group{ margin-bottom:40px; }
.opt-group li{
  padding:11px 4px; border-bottom:1px solid var(--line);
  font-size:15.5px; display:flex; justify-content:space-between; gap:16px; align-items:baseline;
}
.chip{
  flex:none;
  font-size:9.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--teak-deep); border:1px solid rgba(126,87,48,.5);
  padding:3px 9px; white-space:nowrap;
}

/* concierge pillars */
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-light); border:1px solid var(--line-light);
  margin-top:52px;
}
.pillars > div{ background:rgba(255,255,255,.035); padding:36px 30px; }
.pillars h3{ font-size:21px; margin-bottom:12px; }
.pillars p{ font-size:15px; }
.pillars .num{
  font-family:'Marcellus',serif; font-size:14px; letter-spacing:.3em;
  color:#C99A67; display:block; margin-bottom:16px;
}
@media (max-width:900px){ .pillars{ grid-template-columns:1fr; } }

/* timeline (real sequence — numbering carries meaning) */
.timeline{ margin-top:52px; border-left:1px solid var(--line); }
.timeline li{ position:relative; padding:0 0 38px 38px; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:-5px; top:8px;
  width:9px; height:9px; border-radius:50%;
  background:var(--foam); border:1.5px solid var(--teak);
}
.timeline .t-label{
  font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--teak-deep);
}
.timeline h3{ font-size:21px; margin:6px 0 8px; }
.timeline p{ color:var(--ink-soft); max-width:60ch; }

/* CTA band */
.cta-band{ text-align:center; }
.cta-band h2{ margin-left:auto; margin-right:auto; }
.cta-band .btn{ margin-top:34px; }

/* contact */
.contact-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,88px);
  align-items:start; margin-top:12px;
}
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-line{ padding:16px 0; border-bottom:1px solid var(--line); }
.contact-line span{
  display:block; font-size:11px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px;
}
.contact-line a{ font-size:17px; border-bottom:1px solid transparent; }
.contact-line a:hover{ border-bottom-color:var(--teak); }

form label{
  display:block; font-size:11px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint); margin:26px 0 8px;
}
form input[type=text], form input[type=email], form input[type=tel], form select, form textarea{
  width:100%; background:transparent;
  border:0; border-bottom:1px solid var(--ink-soft);
  font-family:'Jost',sans-serif; font-size:17px; font-weight:300; color:var(--ink);
  padding:8px 2px 10px; border-radius:0;
}
form input:focus, form select:focus, form textarea:focus{
  outline:none; border-bottom-color:var(--teak);
}
form .btn{ margin-top:36px; cursor:pointer; }
.form-note{ margin-top:18px; font-size:13px; color:var(--ink-faint); }

/* footer */
footer{ background:var(--carbon); color:rgba(237,241,240,.75); }
.footer-inner{
  max-width:var(--max); margin:0 auto; padding:64px var(--pad) 40px;
}
.footer-top{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{ font-family:'Marcellus',serif; font-size:19px; letter-spacing:.34em; text-transform:uppercase; color:#fff; }
.footer-brand small{ display:block; font-family:'Jost',sans-serif; font-size:9px; letter-spacing:.42em; color:rgba(255,255,255,.5); margin-top:3px; }
.footer-links{ display:flex; gap:30px; flex-wrap:wrap; align-items:center; }
.footer-links a{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.footer-links a:hover{ color:#fff; }
.footer-legal{ padding-top:28px; font-size:12.5px; line-height:1.8; color:rgba(237,241,240,.55); max-width:88ch; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

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