/* ===========================================================
   Ionian Yacht Management — design system
   Direction: Apple restraint / Aston Martin dark precision / Ralph Lauren heritage warmth.
   Luxury comes from typography, photography, spacing and precision — not gold, shadows, or motion.
   =========================================================== */

/* Self-hosted fonts — same weights previously loaded from Google Fonts, now served from the
   same origin as the page. Eliminates an external DNS lookup + connection + redirect round trip
   that Google Fonts' hosted CSS otherwise requires, which matters most on mobile/cellular latency. */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/fraunces-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/fraunces-latin-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:500; font-display:swap;
  src:url('fonts/fraunces-latin-500-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
:root{
  --paper: #F7F5F0;
  --paper-dim: #EFEAE1;
  --hairline: rgba(20,32,43,0.13);
  --hairline-dark: rgba(255,255,255,0.14);
  --navy-deep: #0A1B26;
  --navy-mid: #13293B;
  --brass: #A9803F;
  --brass-text: #7A5A28;
  --brass-bright: #C6994F;
  --teal: #2E5C5E;
  --ink: #14202B;
  --ink-soft: #55636C;
  --white: #FBF9F3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important;}
}
h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; }
a{ color:inherit; text-decoration:none; }
img{max-width:100%; display:block;}
ul{ list-style:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
/* Skip-to-content link — invisible until a keyboard user tabs to it, so it never affects
   the visual design for mouse/touch visitors. Lets keyboard users bypass the repeated header nav. */
.skip-link{
  position:absolute; top:-100px; left:16px; z-index:1000;
  background:var(--ink); color:var(--white); padding:14px 22px;
  font-family:'Inter', sans-serif; font-size:0.9rem; font-weight:500;
  border-radius:2px; transition:top 0.2s ease;
}
.skip-link:focus{ top:16px; }
/* Dark-background contexts get the gold accent instead — ink would be nearly invisible on navy.
   Scoped to the actual dark sections rather than applied globally, so the light-section default
   (which is most of the page) keeps the higher-contrast dark outline. */
header :focus-visible, footer :focus-visible, .hero :focus-visible, .credentials :focus-visible,
.coverage :focus-visible, .contact :focus-visible, .final-cta :focus-visible, .page-header :focus-visible,
.wa-fab:focus-visible, .quote-fab:focus-visible{
  outline-color:var(--brass-bright);
}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,27,38,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--hairline-dark);
  transition:background 0.4s ease, box-shadow 0.4s ease;
}
header.scrolled{ background:rgba(10,27,38,0.97); box-shadow:0 4px 24px rgba(0,0,0,0.16); }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:80px; transition:height 0.4s cubic-bezier(0.22,1,0.36,1); }
header.scrolled nav.wrap{ height:66px; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--white); }
.brand-mark{ width:auto; height:32px; flex-shrink:0; object-fit:contain; }
.brand-name{ font-family:'Fraunces', serif; font-size:1.02rem; font-weight:600; letter-spacing:0.01em; white-space:nowrap; }
.brand-sub{ font-family:'IBM Plex Mono', monospace; font-size:0.58rem; letter-spacing:0.16em; color:#8FA3AC; text-transform:uppercase; display:block; margin-top:-1px; }
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{ color:#C7D3D9; font-size:0.86rem; font-weight:400; transition:color 0.2s; position:relative; padding:4px 0; }
.nav-links a:hover{ color:var(--white); }
.nav-links a[aria-current="page"]{ color:var(--white); }
.nav-links a[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--brass-bright); }
a.nav-cta{
  background:transparent; color:var(--white) !important; padding:11px 24px !important; border-radius:2px;
  font-weight:500; font-size:0.85rem !important; border:1px solid rgba(255,255,255,0.4);
  transition:border-color 0.2s, background 0.2s; display:inline-block;
}
a.nav-cta:hover{ border-color:var(--white); background:rgba(255,255,255,0.06); }
.burger{ display:none; background:none; border:none; color:var(--white); font-size:1.4rem; cursor:pointer; padding:10px 12px; margin:-10px -12px; }
#mnav{
  max-height:0; overflow:hidden; opacity:0; visibility:hidden;
  background:rgba(10,27,38,0.98); border-top:1px solid var(--hairline-dark);
  transition:max-height 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease, visibility 0s linear 0.45s, border-top-color 0.3s ease;
}
#mnav.open{
  max-height:520px; opacity:1; visibility:visible;
  transition:max-height 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease, visibility 0s linear 0s;
}
#mnav a{ display:block; padding:18px 32px; color:#C7D3D9; font-size:0.95rem; border-bottom:1px solid var(--hairline-dark); font-weight:400; }
#mnav a[aria-current="page"]{ color:var(--white); }
#mnav a{ opacity:0; transform:translateY(-10px); transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1); transition-delay:0s; }
#mnav.open a{ opacity:1; transform:translateY(0); }
#mnav.open a:nth-child(1){ transition-delay:0.08s; }
#mnav.open a:nth-child(2){ transition-delay:0.13s; }
#mnav.open a:nth-child(3){ transition-delay:0.18s; }
#mnav.open a:nth-child(4){ transition-delay:0.23s; }
#mnav.open a:nth-child(5){ transition-delay:0.28s; }

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-header{
  background:var(--navy-deep);
  color:var(--white); padding:180px 0 100px; position:relative; overflow:hidden;
}
.page-header .eyebrow{ color:#8FA3AC; }
.page-header h1{ font-size:clamp(2.1rem, 4vw, 3.2rem); max-width:16ch; font-weight:500; }
.page-header p{ margin-top:22px; color:#B7C6CC; max-width:56ch; font-size:1.05rem; font-weight:300; }
.page-header .depth-numbers{ display:none; }

/* ---------- BUTTONS ---------- */
.btn-primary{
  background:var(--ink); color:var(--white); padding:16px 32px; font-weight:500; font-size:0.92rem;
  border-radius:2px; position:relative; display:inline-flex; align-items:center; gap:10px;
  transition:background 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1); border:none; cursor:pointer; letter-spacing:0.01em;
}
.btn-primary:hover{ background:var(--navy-mid); transform:translateY(-2px); }
.hero .btn-primary{ background:var(--white); color:var(--navy-deep); }

/* Deliberately bolder than the rest of the site's restrained palette — a specific, requested
   exception to draw the eye to this one CTA, not a new site-wide accent color. */
.btn-maintenance{
  background:#E8AC1F; color:var(--ink); padding:16px 32px; font-weight:600; font-size:0.92rem;
  border-radius:2px; display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer;
  letter-spacing:0.01em; transition:background 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.btn-maintenance:hover{ background:#F5BC33; transform:translateY(-2px); }
.page-header .btn-primary{ background:var(--white); color:var(--navy-deep); }
.page-header .btn-primary:hover{ background:#EDE9E1; }
.hero .btn-primary:hover{ background:#EDE9E1; }
.ping{ display:none; }
.btn-ghost{ color:var(--white); font-size:0.9rem; font-weight:400; border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:3px; transition:border-color 0.2s; }
.btn-ghost:hover{ border-color:var(--white); }
.btn-ghost.on-light{ color:var(--ink); border-color:rgba(20,34,41,0.3); }
.btn-ghost.on-light:hover{ border-color:var(--ink); }

/* ---------- MARQUEE STRIP — removed (decorative motion, not needed) ---------- */
.strip{ display:none; }

/* ---------- SECTIONS COMMON ---------- */
section{ padding:130px 0; }
.section-head{ max-width:640px; margin-bottom:70px; }
.eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; font-weight:500; }
.section-head h2{ font-size:clamp(1.9rem, 3.2vw, 2.7rem); color:var(--ink); line-height:1.15; font-weight:500; }
.section-head p{ margin-top:20px; color:var(--ink-soft); font-size:1.05rem; max-width:56ch; font-weight:300; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- CREDENTIALS ---------- */
.credentials{ background:var(--navy-deep); padding:100px 0; }

/* ---------- SERVICE LOG ROWS ---------- */
.service-list{ border-top:1px solid var(--hairline); }
.service-row{
  display:grid; grid-template-columns:100px 1fr 1.3fr; gap:32px; padding:36px 0;
  border-bottom:1px solid var(--hairline); align-items:start;
}
.service-code{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--ink-soft); padding-top:6px; }
.service-name{ font-family:'Fraunces', serif; font-size:1.4rem; font-weight:500; color:var(--ink); }
.service-name small{ display:block; font-family:'Inter', sans-serif; font-weight:500; font-size:0.76rem; color:var(--teal); text-transform:uppercase; letter-spacing:0.08em; margin-top:6px; }
.service-desc{ color:var(--ink-soft); font-size:0.97rem; padding-top:4px; font-weight:300; }

/* ---------- SERVICE CATEGORY CARDS (home overview) — flat, no glass/shadow ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--hairline); }
.cat-card{
  padding:40px 36px 40px 0; border-bottom:1px solid var(--hairline); transition:padding-left 0.25s ease;
}
.cat-card:nth-child(3n+2){ padding-left:36px; border-left:1px solid var(--hairline); border-right:1px solid var(--hairline); }
.cat-card:nth-child(3n+3){ padding-left:36px; }
.cat-card:hover{ padding-left:8px; }
.cat-card .cat-icon{ display:none; }
.cat-card h3{ font-size:1.15rem; color:var(--ink); margin-bottom:12px; font-weight:500; }
.cat-card p{ color:var(--ink-soft); font-size:0.92rem; margin-bottom:18px; font-weight:300; }
.cat-card .cat-link{ font-family:'IBM Plex Mono', monospace; font-size:0.74rem; letter-spacing:0.06em; color:var(--ink); text-transform:uppercase; }
.cat-card .cat-link:hover{ color:var(--teal); }

/* ---------- ACCORDION (services page) — flat hairline rows ---------- */
.accordion{ border-top:1px solid var(--hairline); }
.acc-item{ border-bottom:1px solid var(--hairline); }
.acc-item summary{
  list-style:none; cursor:pointer; padding:30px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-head{ display:flex; align-items:baseline; gap:22px; }
.acc-code{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--ink-soft); flex-shrink:0; }
.acc-title{ font-family:'Fraunces', serif; font-size:1.3rem; color:var(--ink); font-weight:500; }
.acc-count{ font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color:var(--ink-soft); }
.acc-plus{ width:20px; height:20px; position:relative; flex-shrink:0; }
.acc-plus::before, .acc-plus::after{ content:''; position:absolute; background:var(--ink); transition:transform 0.25s; }
.acc-plus::before{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.acc-plus::after{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.acc-item[open] .acc-plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.acc-body{ padding:0 0 34px; display:grid; grid-template-columns:100px 1fr; gap:32px; }
.acc-body-list{ display:grid; gap:22px; }
.acc-svc{ display:grid; grid-template-columns:1fr; gap:4px; padding-bottom:18px; border-bottom:1px dashed var(--hairline); }
.acc-svc:last-child{ border-bottom:none; padding-bottom:0; }
.acc-svc h4{ font-family:'Inter', sans-serif; font-weight:600; font-size:1rem; color:var(--ink); }
.acc-svc p{ color:var(--ink-soft); font-size:0.92rem; font-weight:300; }

.acc-body-structured{ grid-template-columns:1fr; padding:0 0 38px; display:grid; gap:22px; max-width:760px; }
.acc-field-label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.acc-body-structured p{ color:var(--ink-soft); font-size:0.98rem; font-weight:300; }

/* ---------- COVERAGE ---------- */
.coverage{ background:var(--navy-deep); color:var(--white); }
.coverage .eyebrow{ color:#8FA3AC; }
.coverage .section-head h2{ color:var(--white); }
.coverage .section-head p{ color:#B7C6CC; }
/* Light variant — used where coverage would otherwise stack directly against another dark
   section (e.g. homepage, right after the dark credentials block) */
.coverage.on-light{ background:var(--paper); color:var(--ink); }
.coverage.on-light .eyebrow{ color:var(--teal); }
.coverage.on-light .section-head h2{ color:var(--ink); }
.coverage.on-light .section-head p{ color:var(--ink-soft); }
.coverage.on-light .port-list li{ border-bottom:1px solid var(--hairline); }
.coverage.on-light .port-list li .coord{ color:var(--ink-soft); }
.coverage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.port-list li{
  display:flex; justify-content:space-between; align-items:baseline; padding:20px 0;
  border-bottom:1px solid var(--hairline-dark); font-size:1rem; font-weight:300;
}
.port-list li .coord{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:#8FA3AC; }
.map-svg{ display:none; }

/* ---------- PROCESS ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; counter-reset:process-step; }
.process-card{ padding:32px 26px; border:1px solid var(--hairline); counter-increment:process-step; }
.process-card.process-card{ transition:transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.35s ease; }
.process-card:hover{ transform:translateY(-5px); border-color:var(--teal); }
.process-card::before{
  content:counter(process-step, decimal-leading-zero);
  display:block; font-family:'Fraunces', serif; font-size:1.7rem; font-weight:400; color:var(--ink-soft); margin-bottom:16px; line-height:1;
}
.process-card .mono{ font-size:0.7rem; color:var(--teal); display:block; margin-bottom:14px; letter-spacing:0.08em; text-transform:uppercase; }

/* ---------- "Which one applies to me" — scenario finder ---------- */
.scenario-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.scenario-card{ padding:34px 30px; border:1px solid var(--hairline); }
.scenario-card.scenario-card{ transition:transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.35s ease; }
.scenario-card:hover{ transform:translateY(-5px); border-color:var(--teal); }
.scenario-card .mono{ font-size:0.7rem; color:var(--teal); display:block; margin-bottom:16px; letter-spacing:0.08em; text-transform:uppercase; }
.scenario-card h3{ font-size:1.25rem; font-weight:500; color:var(--ink); margin-bottom:12px; }
.scenario-card p{ color:var(--ink-soft); font-size:0.94rem; font-weight:300; line-height:1.65; margin-bottom:22px; }
.scenario-tags{ display:flex; flex-wrap:wrap; gap:10px 16px; padding-top:20px; border-top:1px solid var(--hairline); }
.scenario-tags a{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--hairline); padding-bottom:2px; transition:color 0.2s, border-color 0.2s;
}
.scenario-tags a:hover{ color:var(--teal); border-color:var(--teal); }
@media (max-width:900px){ .scenario-grid{ grid-template-columns:1fr; } }
.process-card h3{ font-size:1.05rem; color:var(--ink); margin-bottom:10px; font-weight:500; }
.process-card p{ color:var(--ink-soft); font-size:0.9rem; font-weight:300; }

/* ---------- TEAM / VALUES (about) ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hairline); }
.value-card{ padding:38px 32px 38px 0; border-bottom:1px solid var(--hairline); }
.value-card:nth-child(3n+2){ padding-left:32px; border-left:1px solid var(--hairline); border-right:1px solid var(--hairline); }
.value-card:nth-child(3n+3){ padding-left:32px; }
.value-card h3{ font-size:1.05rem; color:var(--ink); margin-bottom:10px; font-weight:500; }
.value-card p{ color:var(--ink-soft); font-size:0.92rem; font-weight:300; }
.stat-row{ display:flex; gap:70px; flex-wrap:wrap; margin-top:56px; }
.stat .num{ font-family:'Fraunces', serif; font-size:2.4rem; color:var(--ink); font-weight:500; line-height:1; }
.stat .label{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; }

/* ---------- QUOTE / TESTIMONIALS ---------- */
.quote-section{ background:var(--paper-dim); }
.quote-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--hairline); }
.quote-card{ padding:40px 40px 40px 0; border-bottom:1px solid var(--hairline); }
.quote-card:nth-child(2n){ padding-left:40px; border-left:1px solid var(--hairline); }
.quote-card blockquote{ font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem; color:var(--ink); line-height:1.55; font-weight:400; }
.quote-attr{ margin-top:24px; font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--ink-soft); letter-spacing:0.03em; }
.quote-block{ max-width:780px; margin:0 auto; text-align:center; }
.quote-block blockquote{ font-family:'Fraunces', serif; font-style:italic; font-size:clamp(1.3rem, 2.4vw, 1.9rem); color:var(--ink); line-height:1.5; font-weight:400; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--hairline); }
.faq-item summary{ list-style:none; cursor:pointer; padding:28px 0; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{ font-family:'Inter',sans-serif; font-weight:500; font-size:1rem; color:var(--ink); }
.faq-item p{ padding-bottom:26px; color:var(--ink-soft); font-size:0.95rem; max-width:66ch; font-weight:300; }
.faq-plus{ width:18px; height:18px; position:relative; flex-shrink:0; }
.faq-plus::before, .faq-plus::after{ content:''; position:absolute; background:var(--ink); transition:transform 0.25s; }
.faq-plus::before{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.faq-plus::after{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.faq-item[open] .faq-plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }

/* ---------- CONTACT ---------- */
.contact{ background:var(--navy-deep); color:var(--white); position:relative; overflow:hidden; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact h1{ font-size:clamp(1.9rem, 3.2vw, 2.6rem); color:var(--white); max-width:14ch; font-weight:500; }
.contact p.lede{ margin-top:20px; color:#B7C6CC; max-width:44ch; font-weight:300; }
.contact-details{ margin-top:44px; display:flex; flex-direction:column; gap:14px; }
.contact-details a{ font-size:1rem; color:var(--white); border-bottom:1px solid rgba(255,255,255,0.25); padding-bottom:2px; display:inline-block; width:fit-content; }
.contact-list{ margin-top:40px; display:flex; flex-direction:column; gap:0; }
.contact-list li{ padding:16px 0; border-bottom:1px solid var(--hairline-dark); font-size:0.95rem; color:#B7C6CC; font-weight:300; }
.contact-list li strong{ color:#8FA3AC; display:block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; font-family:'IBM Plex Mono', monospace; margin-bottom:5px; font-weight:400; }
#quote-form{
  display:flex; flex-direction:column; gap:20px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14);
  padding:36px 34px; border-radius:2px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:#8FA3AC; margin-bottom:9px; }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.25); color:var(--white);
  padding:13px 2px; font-family:'Inter', sans-serif; font-size:0.95rem; border-radius:0;
}
.field input:focus, .field textarea:focus{ border-bottom-color:var(--white); outline:none; }
.field select option{ background:var(--navy-deep); color:var(--white); }
.field textarea{ resize:vertical; min-height:80px; }
.field input::placeholder, .field textarea::placeholder{ color:#5C6F78; }
.submit-btn{
  background:var(--white); color:var(--navy-deep); padding:16px 32px; font-weight:500; font-size:0.92rem;
  border:none; border-radius:2px; cursor:pointer; align-self:flex-start; margin-top:8px; transition:background 0.2s;
}
.submit-btn:hover{ background:#EDE9E1; }
.submit-btn:disabled{ opacity:0.6; cursor:not-allowed; }

/* ---------- CTA BAND ---------- */
.cta-band{ background:var(--paper-dim); color:var(--ink); padding:90px 0; }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--ink); max-width:22ch; font-weight:500; }
.cta-band .btn-primary{ background:var(--ink); color:var(--white); }
.cta-band .btn-primary:hover{ background:var(--navy-mid); }

footer{ background:var(--navy-deep); border-top:1px solid var(--hairline-dark); padding:70px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--hairline-dark); }
.footer-grid-5{ grid-template-columns:1.6fr 0.8fr 1fr 1.1fr 0.8fr; }
.newsletter-form{ display:flex; margin-top:22px; max-width:280px; border-bottom:1px solid rgba(255,255,255,0.3); }
.newsletter-form input{ flex:1; background:transparent; border:none; padding:11px 4px; color:var(--white); font-family:'Inter',sans-serif; font-size:0.85rem; min-width:0; }
.newsletter-form input::placeholder{ color:#7F97A2; }
.newsletter-form button{ background:transparent; color:var(--white); border:none; padding:12px 10px; font-weight:500; cursor:pointer; font-size:1rem; }
.newsletter-form button:hover{ color:var(--brass-bright); }

#back-to-top{
  position:fixed; right:26px; bottom:96px; z-index:150;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--hairline-dark); cursor:pointer;
  background:var(--navy-deep); color:var(--white); font-size:1rem;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s;
}
#back-to-top.visible{ opacity:1; pointer-events:auto; }
@media (max-width:900px){ #back-to-top{ bottom:150px; } }

#loading-screen{ display:none; }

@media (max-width:900px){
  .footer-grid-5{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid-5{ grid-template-columns:1fr; }
}
.footer-brand p{ color:#8FA3AC; font-size:0.88rem; margin-top:16px; max-width:32ch; font-weight:300; }
.footer-col h3{ font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:#8FA3AC; margin-bottom:18px; font-weight:500; }
.footer-col a{ display:block; color:#B7C6CC; font-size:0.9rem; margin-bottom:13px; font-weight:300; }
.footer-col a:hover{ color:var(--white); }
.footer-row{ display:flex; justify-content:space-between; align-items:center; color:#7F97A2; font-size:0.8rem; flex-wrap:wrap; gap:14px; padding-top:28px; }
.footer-row a{ color:#B7C6CC; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .coverage-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-grid > form{
    order:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.16);
    padding:28px 22px; border-radius:2px; margin-bottom:8px;
  }
  .contact-grid > div{ order:2; }
  .process-grid{ grid-template-columns:1fr 1fr; }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .value-grid{ grid-template-columns:1fr; }
  .quote-grid{ grid-template-columns:1fr; }
  .acc-body{ grid-template-columns:1fr; gap:10px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .field-row{ grid-template-columns:1fr; }
  .cat-card:nth-child(3n+2), .value-card:nth-child(3n+2){ border-left:none; border-right:none; padding-left:0; }
  .cat-card:nth-child(3n+3), .value-card:nth-child(3n+3){ padding-left:0; }
  .quote-card:nth-child(2n){ border-left:none; padding-left:0; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  section{ padding:70px 0; }
  .process-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .section-head h2{ font-size:1.55rem; max-width:88%; }
  .page-header h1{ max-width:88%; }
  .section-head p{ font-size:0.95rem; }
  .eyebrow{ font-size:0.7rem; }
  .stat .num{ font-size:1.8rem; }
  .service-row{ grid-template-columns:1fr; gap:8px; }
  .service-code{ padding-top:0; }
  .acc-body{ padding-bottom:26px; }
  .acc-title{ font-size:1.1rem; }
  .ledger-item h3, .value-card h3, .cat-card h3, .process-card h3, .quote-card blockquote{ font-size:1.02rem; }
  .ledger-num{ font-size:1.3rem; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:92vh;
  color:var(--white); display:flex; align-items:center; padding-top:76px; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; overflow:hidden;
  background:var(--navy-deep);
}
.hero-bg img, .hero-bg video{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 45%; }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,27,38,0.55) 0%, rgba(10,27,38,0.4) 45%, rgba(10,27,38,0.75) 100%);
}
.hero-grid{ position:relative; z-index:2; width:100%; padding-top:60px; padding-bottom:80px; }
.hero-grid > div{ max-width:620px; }
.hero-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:#B7C6CC; margin-bottom:26px; display:flex; align-items:center; gap:10px; font-weight:400; }
.hero-eyebrow::before{ content:''; width:24px; height:1px; background:#B7C6CC; }
.hero h1{ font-size:clamp(2.4rem, 4.6vw, 3.8rem); line-height:1.12; font-weight:500; max-width:13ch; letter-spacing:-0.01em; }
.hero h1 em{ font-style:italic; color:var(--brass-bright); font-weight:400; }
.hero-lede{ margin-top:28px; font-size:1.08rem; color:#D8DEE1; max-width:48ch; font-weight:300; line-height:1.6; }
.hero-actions{ margin-top:44px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }

/* Hero entrance — a quiet, cinematic sequence on page load, not scroll-triggered (already above the fold) */
@keyframes heroReveal{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
.hero-eyebrow{ animation:heroReveal 0.9s cubic-bezier(0.22,1,0.36,1) both; }
.hero h1{ animation:heroReveal 0.9s cubic-bezier(0.22,1,0.36,1) 0.12s both; }
.hero-sub{ animation:heroReveal 0.9s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.hero-lede{ animation:heroReveal 0.9s cubic-bezier(0.22,1,0.36,1) 0.42s both; }
.hero-actions{ animation:heroReveal 0.9s cubic-bezier(0.22,1,0.36,1) 0.56s both; }
.hero-badges{ display:none; }

.btn-pill{ border-radius:2px !important; }
.btn-outline-pill{
  display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,0.4);
  color:var(--white); padding:15px 28px; border-radius:2px; font-size:0.92rem; font-weight:400;
  transition:border-color 0.2s, background 0.2s;
}
.btn-outline-pill:hover{ border-color:var(--white); background:rgba(255,255,255,0.06); }

.page{ display:none; }
.page.active{ display:block; }

/* ---------- LEDGER LIST — flat hairline rows, no glass/shadow/radius ---------- */
.ledger{ border-top:1px solid var(--hairline); }
.ledger-item{
  display:grid; grid-template-columns:70px 1fr; gap:28px; align-items:start;
  padding:34px 0; border-bottom:1px solid var(--hairline);
  transition:padding-left 0.25s ease;
}
.ledger-item:hover{ padding-left:8px; }
.ledger-num{ font-family:'Fraunces', serif; font-size:1.6rem; font-weight:400; color:var(--ink-soft); line-height:1.3; }
.ledger-item h3{ font-size:1.15rem; color:var(--ink); margin-bottom:8px; font-weight:500; }
.ledger-item p{ color:var(--ink-soft); font-size:0.95rem; max-width:56ch; font-weight:300; }
.ledger-item a.cat-link{ display:inline-block; margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); }
.ledger-item a.cat-link:hover{ color:var(--teal); }

/* Services page ledger — reserves a small thumbnail column for future photography */
.ledger.svc-ledger .ledger-item{ grid-template-columns:70px 1fr 180px; }
.svc-group-break{ padding-top:20px; padding-bottom:26px; }
.svc-group-break-first{ padding-top:0; }
.svc-group-break .eyebrow{
  font-size:0.8rem; letter-spacing:0.2em; display:flex; align-items:center; gap:12px;
}
.svc-group-break .eyebrow::before{ content:''; width:28px; height:1px; background:var(--teal); flex-shrink:0; }
.svc-thumb{ aspect-ratio:4/3; width:180px; height:135px; overflow:hidden; }
.svc-thumb.photo-slot{ padding:10px; }
.svc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Photographed entries get a full-width banner treatment for visual rhythm, instead of a small side thumbnail */
/* Integrated side-photo — a contained photo sitting beside the text, at the same scale as
   the rest of the list, instead of a full-width banner dominating the row. */
.ledger-item.ledger-item-featured, .ledger.svc-ledger .ledger-item.ledger-item-featured{ display:grid; grid-template-columns:70px 1fr 260px; gap:28px; align-items:start; padding:34px 0; }
.ledger-item-featured > div:not(.item-banner){ min-width:0; }
.ledger-item-featured .item-banner{ width:260px; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--hairline); }
.ledger-item-featured .item-banner img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s ease; }
.ledger-item-featured:hover .item-banner img{ transform:scale(1.035); }
@media (max-width:900px){
  .ledger-item.ledger-item-featured, .ledger.svc-ledger .ledger-item.ledger-item-featured{ grid-template-columns:60px 1fr 190px; gap:20px; }
  .ledger-item-featured .item-banner{ width:190px; }
}
@media (max-width:700px){
  .ledger-item.ledger-item-featured, .ledger.svc-ledger .ledger-item.ledger-item-featured{ display:block; padding:24px 0; }
  .ledger-item-featured .item-banner{ width:100%; aspect-ratio:16/9; margin-top:18px; }
}
.svc-thumb svg{ width:28px; height:28px; opacity:0.5; }
@media (max-width:900px){
  .ledger.svc-ledger .ledger-item{ grid-template-columns:60px 1fr 130px; }
  .svc-thumb{ width:130px; height:98px; }
}
@media (max-width:700px){
  .ledger.svc-ledger .ledger-item{ grid-template-columns:44px 1fr; }
  .ledger.svc-ledger .svc-thumb{ display:none; }
}
.ledger.on-dark{ border-top-color:var(--hairline-dark); }
.ledger.on-dark .ledger-item{ border-bottom-color:var(--hairline-dark); }
.ledger.on-dark .ledger-num{ color:#8FA3AC; }
.ledger.on-dark .ledger-item h3{ color:var(--white); }
.ledger.on-dark .ledger-item p{ color:#B7C6CC; }
@media (max-width:560px){
  .ledger-item{ grid-template-columns:1fr; gap:6px; padding:24px 0; }
  .ledger-num{ font-size:1.1rem; }
}

/* ---------- SCROLL REVEAL — quiet, cinematic, never gimmicky ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }

.reveal-img{
  opacity:0; transform:scale(0.97);
  transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.reveal-img.in{ opacity:1; transform:scale(1); }

/* Mobile — simpler, smaller movement per the spec: fade + slight upward shift only, no large motion */
@media (max-width:560px){
  .reveal{ transform:translateY(14px); transition-duration:0.7s, 0.7s; }
  .reveal-img{ transform:scale(0.985); transition-duration:0.7s, 0.7s; }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-img{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- WHATSAPP FAB ---------- */
.wa-fab{
  position:fixed; bottom:26px; right:26px; z-index:200;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,0.4), 0 2px 6px rgba(10,27,38,0.15);
  transition:transform 0.2s, box-shadow 0.2s;
  animation:wa-breathe 3.2s ease-in-out infinite;
}
.wa-fab:hover{ transform:scale(1.07); box-shadow:0 8px 26px rgba(37,211,102,0.5), 0 3px 8px rgba(10,27,38,0.2); }
.wa-fab svg{ width:30px; height:30px; }
@keyframes wa-breathe{
  0%, 100% { box-shadow:0 6px 20px rgba(37,211,102,0.4), 0 2px 6px rgba(10,27,38,0.15); }
  50% { box-shadow:0 6px 24px rgba(37,211,102,0.65), 0 2px 6px rgba(10,27,38,0.15); }
}
@media (prefers-reduced-motion: reduce){ .wa-fab{ animation:none; } }
@media (max-width:560px){ .wa-fab{ bottom:18px; right:18px; width:54px; height:54px; } .wa-fab svg{ width:27px; height:27px; } }

/* ---------- STICKY QUOTE BAR (mobile only) ---------- */
.quote-fab{ display:none; }
@media (max-width:900px){
  .quote-fab{
    display:flex; align-items:center; justify-content:center; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:190;
    background:var(--brass); color:var(--navy-deep); text-decoration:none;
    padding:17px 20px; font-weight:600; font-size:0.92rem; border-top:1px solid rgba(10,27,38,0.15);
  }
  .quote-fab:active{ background:var(--brass-bright); }
  .wa-fab{ bottom:76px; }
  body{ padding-bottom:58px; }
}
@media (max-width:560px){ .quote-fab{ padding:15px 18px; font-size:0.88rem; } .wa-fab{ bottom:70px; right:16px; } }

/* ---------- TRUST ROW ---------- */
.trust-row{ display:flex; flex-wrap:wrap; gap:32px; padding-bottom:34px; margin-bottom:34px; border-bottom:1px solid var(--hairline-dark); }
.trust-item{ display:flex; align-items:center; gap:10px; color:#B7C6CC; font-size:0.84rem; font-weight:300; }
.trust-item svg{ display:none; }
.legal-ids{ color:#7F97A2; font-size:0.78rem; font-family:'IBM Plex Mono', monospace; }

/* ---------- PHOTO PLACEHOLDER ---------- */
.photo-slot{
  aspect-ratio:4/3; border:1px dashed var(--hairline); border-radius:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:transparent; color:var(--ink-soft); text-align:center; padding:20px;
}
.photo-slot svg{ width:30px; height:30px; opacity:0.4; }
.photo-slot span{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.04em; max-width:22ch; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.gallery-photo{ aspect-ratio:4/3; overflow:hidden; }
.gallery-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ---------- FOUNDER BIO ---------- */

/* ---------- HOMEPAGE STORY SECTIONS (index.html only) ---------- */
.hero-sub{ margin-top:22px; font-family:'Fraunces', serif; font-style:italic; font-size:1.15rem; color:var(--brass-bright); font-weight:400; max-width:34ch; text-shadow:0 2px 4px rgba(0,0,0,0.9), 0 4px 16px rgba(0,0,0,0.7); }

/* Mobile hero overrides — positioned after the base hero rules above so they actually
   win the cascade (equal specificity, later source wins; these were previously placed
   earlier in the file and were being silently overridden). */
@media (max-width:560px){
  .hero-grid{ padding-top:50px; padding-bottom:70px; }
  .hero h1{ font-size:1.9rem; line-height:1.2; max-width:none; }
  .hero-lede{ font-size:0.95rem; margin-top:18px; }
  .hero-eyebrow{ font-size:0.66rem; margin-bottom:14px; }
  .hero-sub{ font-size:1rem; margin-top:16px; }
  .hero-actions{ margin-top:26px; gap:12px; }
  .hero-actions .btn-primary, .hero-actions .btn-outline-pill{ font-size:0.88rem; padding:14px 26px; }
  .hero{ min-height:auto; padding-bottom:20px; }
}

/* Short viewports (older/smaller phones, e.g. iPhone SE) — hero content was tall enough
   that the fixed WhatsApp button and sticky bottom bar could overlap the hero paragraph
   at rest, with no scrolling needed. Tighten hero rhythm specifically here so nothing overlaps. */
@media (max-width:560px) and (max-height:620px){
  .hero-grid{ padding-top:30px; padding-bottom:50px; }
  .hero-eyebrow{ margin-bottom:10px; }
  .hero h1{ font-size:1.6rem; }
  .hero-sub{ margin-top:10px; font-size:0.92rem; }
  .hero-lede{ margin-top:12px; font-size:0.88rem; }
  .hero-actions{ margin-top:18px; }
}

.explore-link{ margin-top:18px; display:block; font-size:0.9rem; color:#D8DEE1; border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:2px; width:fit-content; transition:border-color 0.2s, color 0.2s; }
.explore-link:hover{ color:var(--white); border-color:var(--white); }

.story-photo{ aspect-ratio:16/9; overflow:hidden; margin-top:56px; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.section-tight{ padding:80px 0; }
.section-tight .section-head{ margin-bottom:0; }
.section-tight .section-head p{ font-size:1.15rem; color:var(--ink); font-weight:300; max-width:62ch; }

.contrast-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:60px; }
.contrast-col{ background:var(--navy-deep); }
.contrast-col.lifestyle{ background:var(--paper-dim); }
.contrast-photo{ aspect-ratio:5/4; overflow:hidden; }
.contrast-photo img, .contrast-photo video{ width:100%; height:100%; object-fit:cover; display:block; }
.contrast-body{ padding:34px 36px 40px; }
.contrast-label{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:12px; display:block; }
.contrast-col.lifestyle .contrast-label{ color:var(--teal); }
.contrast-col.technical .contrast-label{ color:#8FA3AC; }
.contrast-col.technical{ color:var(--white); }
.contrast-col h3{ font-size:1.3rem; font-weight:500; margin-bottom:10px; }
.contrast-col.lifestyle h3{ color:var(--ink); }
.contrast-col.technical h3{ color:var(--white); }
.contrast-col p{ font-size:0.96rem; font-weight:300; }
.contrast-col.lifestyle p{ color:var(--ink-soft); }
.contrast-col.technical p{ color:#B7C6CC; }
@media (max-width:900px){ .contrast-grid{ grid-template-columns:1fr; } }

.final-cta{ background:var(--navy-deep); color:var(--white); padding:150px 0; text-align:center; }
.final-cta h2{ font-size:clamp(2rem, 4vw, 3.2rem); color:var(--white); font-weight:500; max-width:16ch; margin:0 auto; line-height:1.2; }
.final-cta .hero-sub{ margin-left:auto; margin-right:auto; color:var(--brass-bright); }
.final-cta p.final-sub{ margin-top:24px; color:#B7C6CC; font-size:1.05rem; font-weight:300; max-width:44ch; margin-left:auto; margin-right:auto; }
.final-cta .btn-primary{ background:var(--white); color:var(--navy-deep); margin-top:44px; }
.final-cta .btn-primary:hover{ background:#EDE9E1; }
.final-cta.on-light{ background:var(--paper); }
.final-cta.on-light h2{ color:var(--ink); }
.final-cta.on-light p.final-sub{ color:var(--ink-soft); }
.final-cta.on-light .btn-primary{ background:var(--ink); color:var(--white); }
.final-cta.on-light .btn-primary:hover{ background:var(--navy-mid); }

/* ---------- SERVICES PAGE — WHAT/WHY/HOW facets (editorial, not cards) ---------- */
.svc-facet{ margin-top:12px; font-size:0.95rem; color:var(--ink-soft); font-weight:300; line-height:1.6; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.svc-facet-label{
  font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--navy-deep); color:var(--brass-bright); font-weight:500;
  padding:4px 9px; border-radius:2px; flex-shrink:0; line-height:1.4;
}
.ledger.on-dark .svc-facet{ color:#B7C6CC; }
.ledger.on-dark .svc-facet-label{ background:rgba(255,255,255,0.1); color:var(--brass-bright); }

.svc-featured{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:56px; }
.svc-featured-photo{ aspect-ratio:4/3; overflow:hidden; }
.svc-featured-photo img, .svc-featured-photo video{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-featured-body .svc-facet{ font-size:1.02rem; margin-top:16px; }
@media (max-width:900px){ .svc-featured{ grid-template-columns:1fr; gap:36px; } }

/* ---------- YACHT LISTING CARD (yacht-sales.html) — automotive/real-estate spec sheet ---------- */
.yacht-example-tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); border:1px dashed var(--hairline); padding:6px 12px; margin-bottom:32px;
}
.yacht-card{ margin-top:0; }
.yacht-card-photo{ aspect-ratio:16/9; overflow:hidden; }
.yacht-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.yacht-card-body{ padding-top:40px; }
.yacht-card-top{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:16px; margin-bottom:8px; }
.yacht-card-name{ font-family:'Fraunces', serif; font-size:1.9rem; font-weight:500; color:var(--ink); }
.yacht-card-price{ font-family:'Fraunces', serif; font-size:1.5rem; font-weight:500; color:var(--ink); white-space:nowrap; }
.yacht-card-tagline{ color:var(--ink-soft); font-size:1rem; font-weight:300; font-style:italic; font-family:'Fraunces', serif; }
.yacht-specs{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px 24px;
  margin-top:32px; padding-top:32px; padding-bottom:32px; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.yacht-spec-label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.yacht-spec-value{ font-family:'Fraunces', serif; font-size:1.05rem; color:var(--ink); font-weight:500; }
.yacht-card-desc{ margin-top:28px; color:var(--ink-soft); font-size:0.98rem; font-weight:300; max-width:70ch; line-height:1.7; }
.yacht-card-cta{ margin-top:32px; }
@media (max-width:900px){ .yacht-specs{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .yacht-card-top{ flex-direction:column; gap:4px; } }

/* ---------- SELL / REQUEST split ---------- */
.sell-request-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--hairline-dark); }
.sell-request-col{ padding:56px 48px; }
.sell-request-col:first-child{ border-right:1px solid var(--hairline-dark); }
.sell-request-col h3{ color:var(--white); font-size:1.4rem; font-weight:500; margin-bottom:16px; }
.sell-request-col p{ color:#B7C6CC; font-size:0.98rem; font-weight:300; margin-bottom:28px; max-width:44ch; }
@media (max-width:900px){
  .sell-request-grid{ grid-template-columns:1fr; }
  .sell-request-col:first-child{ border-right:none; border-bottom:1px solid var(--hairline-dark); }
}

@media (max-width:700px){
  .george-bio-block{ grid-template-columns:1fr !important; gap:20px !important; }
}

/* ---------- COOKIE CONSENT BANNER ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--navy-deep); border-top:1px solid var(--hairline-dark);
  padding:22px 24px; transform:translateY(100%); transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.cookie-banner.visible{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cookie-banner p{ color:#C7D3D9; font-size:0.9rem; font-weight:300; max-width:64ch; margin:0; }
.cookie-banner a{ color:var(--white); border-bottom:1px solid rgba(255,255,255,0.4); }
.cookie-banner-actions{ display:flex; gap:12px; flex-shrink:0; }
.cookie-banner-actions button{
  font-family:'Inter', sans-serif; font-size:0.86rem; font-weight:500; padding:11px 24px;
  border-radius:2px; cursor:pointer; transition:background 0.25s ease, border-color 0.25s ease;
}
#cookie-decline{ background:transparent; border:1px solid rgba(255,255,255,0.3); color:var(--white); }
#cookie-decline:hover{ border-color:var(--white); background:rgba(255,255,255,0.06); }
#cookie-accept{ background:var(--white); border:none; color:var(--navy-deep); }
#cookie-accept:hover{ background:#EDE9E1; }
@media (max-width:700px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; text-align:left; }
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions button{ flex:1; }
}
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition:none; }
}
/* While the cookie banner is open, it competes for the same screen space as the
   WhatsApp button and (on mobile) the sticky quote bar — hide them rather than
   let them silently overlap and become unclickable underneath the banner. */
body.cookie-banner-open .wa-fab,
body.cookie-banner-open .quote-fab{
  display:none;
}
/* Reserve space at the bottom of every page so the footer's last line is never
   permanently hidden behind the fixed cookie banner before it's dismissed. */
body{ padding-bottom:130px; }
@media (max-width:560px){
  body{ padding-bottom:220px; }
}

/* ---------- YACHT LISTING — detailed sections (engine, accommodation, hull, sale) ---------- */
.yacht-detail-groups{ margin-top:36px; padding-top:32px; border-top:1px solid var(--hairline); display:grid; grid-template-columns:1fr 1fr; gap:36px 48px; }
.yacht-detail-group h4{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal); font-weight:500; margin-bottom:14px;
}
.yacht-detail-group ul{ list-style:none; }
.yacht-detail-group li{
  color:var(--ink-soft); font-size:0.94rem; font-weight:300; line-height:1.6;
  padding:8px 0; border-bottom:1px solid var(--hairline);
}
.yacht-detail-group li:last-child{ border-bottom:none; }
@media (max-width:700px){
  .yacht-detail-groups{ grid-template-columns:1fr; gap:28px; }
}

/* ---------- YACHT LISTING — photo gallery (hero + thumbnail grid) ---------- */
.yacht-gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:6px;
}
.yacht-gallery-grid picture, .yacht-gallery-grid img{ display:block; width:100%; height:100%; }
.yacht-gallery-grid .thumb{ aspect-ratio:4/3; overflow:hidden; }
.yacht-gallery-grid .thumb img{ object-fit:cover; transition:transform 0.5s ease; }
.yacht-gallery-grid .thumb:hover img{ transform:scale(1.04); }
@media (max-width:700px){
  .yacht-gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}