/* ================================================================

   PHILLIPS MARINE GROUP
   Luxury Design System — Art Director Build

   Creative direction: Aman / Burgess / Rolls-Royce / Apple
   Typography: Cormorant Garamond + Inter
   Philosophy: Quiet luxury. Architectural restraint. Editorial
   presence. Every property is a considered decision.

   ================================================================ */


/* ================================================================
   §01  DESIGN TOKENS
   A precision-tuned palette for ultra-high-net-worth audiences.
   Nothing is arbitrary. Nothing is default.
   ================================================================ */

:root {

  /* ── Ink ─────────────────────────────────────────────────────
     Not cold silicon blacks — warm, organic, like aged carbon.  */
  --ink-950:  #07080a;
  --ink-900:  #0d0e10;
  --ink-850:  #131416;
  --ink-800:  #1a1b1e;
  --ink-700:  #262729;
  --ink-600:  #363739;
  --ink-500:  #505254;
  --ink-400:  #6b6d6f;
  --ink-300:  #939597;
  --ink-200:  #bcbebb;
  --ink-100:  #dddbd8;
  --ink-50:   #edeae6;
  --ink-20:   #f4f1ed;
  --ink-0:    #f9f6f1;

  /* ── Gold ────────────────────────────────────────────────────
     Antique champagne. Not yellow-gold — warm, oxidised metal. */
  --gold-950: #2e1f08;
  --gold-800: #5e4220;
  --gold-700: #7d5b2e;
  --gold-600: #9e7842;
  --gold-500: #c4a06a;   /* primary accent — used with restraint */
  --gold-400: #d4b484;
  --gold-300: #e2c9a2;
  --gold-200: #edd9be;
  --gold-100: #f5ecdb;

  /* ── Semantic ────────────────────────────────────────────────*/
  --c-canvas:         var(--ink-0);
  /* Aged paper — slightly darker and warmer than before.
     #eeebe4 read slightly clinical. #e8e4db has weight. */
  --c-canvas-cream:   #e8e4db;
  --c-canvas-dark:    var(--ink-850);
  --c-canvas-black:   var(--ink-900);
  --c-ink:            var(--ink-800);
  --c-ink-faint:      var(--ink-400);
  --c-ink-ghost:      var(--ink-300);
  --c-accent:         var(--gold-500);
  --c-accent-deep:    var(--gold-700);
  --c-accent-pale:    var(--gold-300);
  --c-rule:           rgba(0, 0, 0, 0.08);
  --c-rule-dark:      rgba(255, 255, 255, 0.068);
  --c-rule-cream:     rgba(0, 0, 0, 0.1);

  /* ── Typefaces ───────────────────────────────────────────────*/
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* ── Fluid Type Scale ────────────────────────────────────────
     Each step is calibrated for optical weight at its context. */
  --step--2:  clamp(8.5px,  0.72vw,  10px);
  --step--1:  clamp(10px,   0.88vw,  12px);
  --step-0:   clamp(13px,   1.02vw,  15px);
  --step-1:   clamp(15px,   1.2vw,   17px);
  --step-2:   clamp(18px,   1.8vw,   24px);
  --step-3:   clamp(24px,   2.8vw,   36px);
  --step-4:   clamp(32px,   4vw,     52px);
  --step-5:   clamp(44px,   5.5vw,   72px);
  --step-6:   clamp(58px,   7.5vw,   100px);
  --step-7:   clamp(72px,   9.5vw,   136px);
  --step-8:   clamp(88px,   11.5vw,  164px);

  /* ── Fluid Space Scale ───────────────────────────────────────*/
  --space-3xs:  clamp(4px,   0.4vw,   6px);
  --space-2xs:  clamp(8px,   0.7vw,   10px);
  --space-xs:   clamp(12px,  1vw,     16px);
  --space-s:    clamp(16px,  1.5vw,   22px);
  --space-m:    clamp(24px,  2.2vw,   32px);
  --space-l:    clamp(36px,  3.5vw,   52px);
  --space-xl:   clamp(52px,  5.5vw,   80px);
  --space-2xl:  clamp(72px,  8vw,     112px);
  --space-3xl:  clamp(96px,  11vw,    160px);
  --space-4xl:  clamp(120px, 14vw,    200px);

  /* Section vertical rhythm */
  --rhythm:    clamp(88px,  11.5vw,  180px);
  --rhythm-sm: clamp(56px,  7vw,     108px);

  /* ── Layout ──────────────────────────────────────────────────*/
  --max-w:    1440px;
  --gutter:   clamp(22px, 5vw, 84px);

  /* ── Motion ──────────────────────────────────────────────────
     These curves were tuned to feel "expensive."
     —  glide: primary luxury ease. Never use linear or ease.
     —  emerge: for elements appearing from off-screen.
     —  recede: for subtle, weighted departures.                 */
  --glide:   cubic-bezier(0.76, 0, 0.24, 1);
  --emerge:  cubic-bezier(0.19, 1, 0.22, 1);
  --recede:  cubic-bezier(0.55, 0, 0.45, 1);
  --soften:  cubic-bezier(0.65, 0, 0.35, 1);

  --t1: 0.18s;   /* instant feedback */
  --t2: 0.32s;   /* quick response   */
  --t3: 0.52s;   /* considered       */
  --t4: 0.78s;   /* weighted         */
  --t5: 1.05s;   /* cinematic        */
  --t6: 1.4s;    /* very slow        */

  /* ── Z-Index ─────────────────────────────────────────────────*/
  --z-bg:      -1;
  --z-base:     1;
  --z-above:    10;
  --z-nav:      1000;
  --z-drawer:   990;
  --z-cursor:   9990;
  --z-loader:   9999;

}


/* ================================================================
   §02  RESET
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* scrollbar-gutter keeps layout stable */
  scrollbar-gutter: stable;
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.82;
  color: var(--c-ink);
  background: var(--c-canvas);
  overflow-x: hidden;
  cursor: none;
  min-height: 100vh;
  /* Sub-pixel rendering — non-negotiable for luxury typography */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  /* Common and discretionary ligatures — Inter supports these at 300/400 */
  font-variant-ligatures: common-ligatures contextual;
}

/* Suppress default behaviour during load / menu states */
body.is-loading { overflow: hidden; }
body.menu-open  { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

/*
  <picture> is used purely as a format-negotiation wrapper around <img>
  (WebP source + JPG fallback). display: contents makes the picture box
  itself absent from layout, so absolute/object-fit/parent-sizing rules
  still apply to the <img> exactly as if there were no wrapper.
*/
picture { display: contents; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
input, button, textarea, select { font: inherit; }
button { background: none; border: none; cursor: none; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }


/* ================================================================
   §03  GLOBAL DETAILS
   Selection, scrollbar, focus — the quiet signatures of craft.
   ================================================================ */

/* Text selection — brand-aligned */
::selection        { background: var(--c-accent); color: var(--ink-950); }
::-moz-selection   { background: var(--c-accent); color: var(--ink-950); }

/* Thin gold scrollbar — webkit */
::-webkit-scrollbar         { width: 2px; }
::-webkit-scrollbar-track   { background: var(--ink-950); }
::-webkit-scrollbar-thumb   { background: var(--c-accent); }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent-deep); }

/* Skip navigation — visually hidden, revealed on keyboard focus.
   Positions above the viewport until tabbed to. */
.skip-nav {
  position: fixed;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 14px 28px;
  background: var(--c-accent);
  color: var(--ink-950);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-nav:focus {
  top: 0;
  outline: none;
}

/* Focus — never remove it, just make it elegant */
:focus                       { outline: none; }
:focus-visible               {
  outline: 1px solid var(--c-accent);
  outline-offset: 4px;
}

/* Buttons get a slightly more generous focus ring — their hit target
   is small and keyboard users need clear confirmation */
.btn:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: 6px;
}

/* Nav links — focus state matches hover opacity */
.nav__link:focus-visible {
  outline: 1px solid rgba(196, 160, 106, 0.44);
  outline-offset: 6px;
}

/* Smooth scroll — all browsers that support it */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* ================================================================
   §04  TYPOGRAPHY SYSTEM
   ================================================================ */

/* All heading elements inherit serif defaults */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  /* 1.04 — correct for display scale. Contextual overrides
     on h3/h4 open this to 1.2–1.28 where content-size reduces. */
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: inherit;
  /* Opentype features: kerning, common ligatures, contextual alternates */
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  /* Balance multi-line headings — modern browsers only */
  text-wrap: balance;
}

/*
  Small heading correction — at subheading scale (h3/h4),
  1.04 line-height is perceptibly cramped. These elements live
  in prose contexts where readers expect more vertical breathing.
*/
h3 { line-height: 1.22; letter-spacing: -0.010em; }
h4 { line-height: 1.28; letter-spacing: -0.006em; }

/* Body prose */
p {
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.84;
}

/*
  Eyebrow — the universal label component.
  Tracked caps. Gold. Restrained.
  Used at the top of every section to orient the reader.
*/
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 400;
  /* 0.30em — previously 0.34em. A small reduction makes the
     eyebrow feel more considered and less like a framework default.
     Still clearly a label. Just less emphatic about being one. */
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--space-m);
  font-feature-settings: 'tnum' 0;
}
/* On dark sections — slightly lighter, less golden-bright */
.eyebrow--light { color: var(--gold-400); letter-spacing: 0.28em; }
/* On cream sections — the accent-deep reads more settled */
.eyebrow--muted { color: var(--c-accent-deep); }
/* Alias — used in contact page section headers on light canvas */
.section-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin-bottom: var(--space-m);
}


/* ================================================================
   §05  LAYOUT PRIMITIVES
   ================================================================ */

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Vertical rhythm */
.section            { padding-block: var(--rhythm); }
.section--sm        { padding-block: var(--rhythm-sm); }
.section--tight     { padding-bottom: var(--rhythm-sm); }
.section--flush-b   { padding-bottom: 0; }

/* Surface variants */
.section--dark  { background: var(--c-canvas-dark); color: var(--ink-0); }
.section--black { background: var(--c-canvas-black); color: var(--ink-0); }
.section--cream { background: var(--c-canvas-cream); }


/* ================================================================
   §06  BUTTON SYSTEM
   Technique: sliding fill. A pseudo-element fills from left on
   hover, inverting the palette beneath it. Tactile. Handcrafted.
   The text color transition is delayed ~0.05s to switch after
   the fill has visually crossed mid-point.
   ================================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 18px 40px;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  cursor: none;
  /*
    Color transitions slightly after the fill crosses midpoint —
    the text inverts just as the fill arrives beneath it.
    0.12s delay is the perceptual crossover point.
    t4 (0.78s) — confident, not eager.
  */
  transition:
    color        var(--t4) var(--glide) 0.12s,
    border-color var(--t4) var(--glide);
}

/* The sliding fill layer */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t4) var(--glide);
}
.btn:hover::before { transform: scaleX(1); }

/* ─── Variants ─────────────────────────────────────────────── */

/* Ghost — white outline on dark/photo backgrounds */
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--ink-0);
}
.btn--ghost::before { background: var(--c-accent); }
.btn--ghost:hover   { color: var(--ink-950); border-color: var(--c-accent); }

/* Solid — gold fill, used on light backgrounds */
.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--ink-950);
}
.btn--primary::before { background: var(--c-accent-deep); }
.btn--primary:hover   { border-color: var(--c-accent-deep); }

/* Outline dark — on light/cream backgrounds */
.btn--outline {
  border-color: var(--ink-700);
  color: var(--ink-700);
}
.btn--outline::before { background: var(--ink-800); }
.btn--outline:hover   { color: var(--ink-0); border-color: var(--ink-800); }

/* Ghost light — on photographic dark sections */
.btn--light {
  border-color: rgba(255, 255, 255, 0.52);
  color: var(--ink-0);
}
.btn--light::before { background: var(--ink-0); }
.btn--light:hover   { color: var(--ink-950); border-color: var(--ink-0); }

/*
  Arrow — no box, just text with an animated horizontal rule.
  The rule extends right on hover. Feels like movement.
*/
.btn--arrow {
  border: none;
  padding-left: 0;
  color: var(--ink-0);
  gap: 20px;
  padding-right: 0;
  padding-block: 0;
  overflow: visible;
}
.btn--arrow::before { display: none; }
.btn--arrow::after {
  content: '';
  display: block;
  height: 1px;
  width: 32px;
  background: var(--c-accent);
  order: -1;
  flex-shrink: 0;
  transition: width var(--t3) var(--emerge);
}
.btn--arrow:hover       { color: var(--gold-300); }
.btn--arrow:hover::after { width: 52px; }


/* ================================================================
   §07  LINK STYLES
   ================================================================ */

/*
  Animated arrow link — used after body copy.
  Gap expands on hover, arrow nudges right.
*/
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-top: var(--space-l);
  cursor: none;
  transition: gap var(--t3) var(--glide), color var(--t1) ease;
}
.link-arrow::after {
  content: '→';
  font-size: 13px;
  transition: transform var(--t3) var(--glide);
}
.link-arrow:hover        { gap: 24px; color: var(--c-accent-deep); }
.link-arrow:hover::after { transform: translateX(5px); }

/*
  Underline sweep — for inline links.
  Line draws left→right on enter, right→left on leave.
*/
.link-sweep {
  position: relative;
  display: inline;
}
.link-sweep::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t3) var(--glide);
}
.link-sweep:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* ================================================================
   §08  PRELOADER
   ================================================================ */

#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--ink-950);
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  Very faint noise texture — gives the black depth.
  Luxury dark surfaces have texture; cheap ones are flat.
*/
#preloader::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.preloader__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.preloader__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 36px;
}

.preloader__letter {
  font-family: var(--serif);
  font-size: clamp(46px, 5.5vw, 70px);
  font-weight: 300;
  color: var(--ink-0);
  line-height: 1;
  /*
    0.10em — the gold separators between P · M · G create the
    primary spacing. A small amount of tracking on each letter
    prevents them from crowding the separators on either side.
  */
  letter-spacing: 0.10em;
  opacity: 0;
  transform: translateY(24px);
  font-feature-settings: 'kern' 1;
  font-variant-ligatures: none;
}

.preloader__sep {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--c-accent) 30%,
    var(--c-accent) 70%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleY(0);
}

.preloader__bar {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--c-accent) 40%,
    var(--c-accent) 60%,
    transparent 100%
  );
  margin: 0 auto 28px;
}

.preloader__wordmark {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--ink-300);
  opacity: 0;
  transform: translateY(8px);
}


/* ================================================================
   §09  CUSTOM CURSOR
   ================================================================ */

#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* GPU compositing — prevent jank */
  will-change: transform;
  backface-visibility: hidden;
}

#cursor-dot {
  width: 5px;
  height: 5px;
  background: var(--c-accent);
  /* Follows mouse instantly — no transition */
}

#cursor-ring {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(196, 160, 106, 0.48);
  transition:
    width        var(--t3) var(--glide),
    height       var(--t3) var(--glide),
    border-color var(--t3) ease,
    opacity      var(--t2) ease;
}

#cursor-ring.is-hovering {
  width: 52px;
  height: 52px;
  border-color: rgba(196, 160, 106, 0.78);
}

/* Remove on touch — never show cursor chrome on mobile */
@media (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none; }
  body { cursor: auto; }
  a, button { cursor: pointer; }
}


/* ================================================================
   §10  NAVIGATION
   The navbar is transparent over the hero image — showing
   the photograph at full saturation. On scroll it becomes a
   subtle frosted glass panel. The transition must be imperceptible.
   ================================================================ */

#navbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  padding-block: 30px;
  /* Transparent start — zero background, zero border */
  background: transparent;
  border-bottom: 1px solid transparent;
  /*
    t5 for background (1.05s) — the frosted glass arrives slowly,
    almost imperceptibly. The viewer feels settled, not startled.
    translate is for the hide-on-scroll-down behaviour.
  */
  transition:
    background      var(--t5) var(--glide),
    padding-block   var(--t4) var(--glide),
    border-color    var(--t5) ease,
    backdrop-filter var(--t4) ease,
    transform       var(--t4) var(--glide),
    opacity         var(--t4) ease;
}

/* Scrolled state — ultra-thin frosted panel.
   0.72 opacity keeps the photograph visible beneath —
   reinforcing that this is a photography-led brand.
   The blur is subtle — glass, not fog.              */
#navbar.is-scrolled {
  background: rgba(10, 11, 13, 0.72);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  /* More compression than before — 16px. Feels tighter, more deliberate. */
  padding-block: 16px;
  border-bottom-color: rgba(255, 255, 255, 0.030);
}

/* Direction-aware hide — appears when reader scrolls up.
   Hidden state: moves off the top of the viewport.
   Never hidden when at the top of the page (JS manages this). */
#navbar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.nav__container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

/* ─── Logo ───────────────────────────────────────────────────*/
.nav__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  /* Slow hover — luxury logos don't snap */
  transition: opacity var(--t3) ease;
}
.nav__logo:hover { opacity: 0.60; }

/*
  ─── PMG LOGO MARK ────────────────────────────────────────────────
  Current state: Cormorant Garamond text mark. Intentional temporary.

  SVG SWAP READINESS:
  When a custom SVG logo is ready, replace the <span class="nav__logo-mark">
  with an <img> or inline <svg> and remove this text rule. Target dimensions:
    Nav:        height 22px, width auto (aspect-ratio preserved)
    Preloader:  height clamp(52px, 6vw, 72px), width auto
    Footer:     height 16px, width auto
  All three reference the same SVG asset — just different sizes via CSS height.
  ────────────────────────────────────────────────────────────────── */
.nav__logo-mark {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--ink-0);
  /*
    0.13em — up from 0.07em. At display weight, tighter tracking feels
    corporate. More space between the three letters reads as considered.
    A monogram earns its space.
  */
  letter-spacing: 0.13em;
  line-height: 1;
  font-feature-settings: 'kern' 1;
  font-variant-ligatures: none; /* Prevent unintended ligatures in PMG */
}

.nav__logo-wordmark {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  padding-left: 16px; /* Up from 14px — more breathing room from the rule */
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  white-space: nowrap;
  line-height: 1;
}

/* ─── Desktop links ──────────────────────────────────────────*/
.nav__menu {
  display: flex;
  align-items: center;
  /* 44px — slightly more generous than 40px.
     At this type size and spacing, wider gaps read more luxurious. */
  gap: 44px;
}

.nav__link {
  position: relative;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  padding-bottom: 4px;
  /* Deliberate, weighted — not a quick snap */
  transition: color var(--t3) ease;
}

/*
  Underline that draws left→right on hover,
  retracts right→left on leave. Not right→left both ways.
  This directional nuance reads as intentional.
*/
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t3) var(--glide);
}
.nav__link:hover { color: var(--ink-0); }
.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ─── Right slot ─────────────────────────────────────────────*/
.nav__right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.nav__cta {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-950);
  background: var(--c-accent);
  padding: 11px 26px;
  white-space: nowrap;
  cursor: none;
  /* Slower — this is the most deliberate element in the nav */
  transition: background var(--t3) ease, color var(--t3) ease;
}
.nav__cta:hover { background: var(--c-accent-deep); }
/* Active state — on the contact page, the CTA points to the current page.
   Reduce pointer events and drop opacity slightly to signal 'you are here'. */
.nav__cta--active {
  pointer-events: none;
  opacity: 0.62;
}

/* ─── Hamburger ──────────────────────────────────────────────*/
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  cursor: none;
  padding: 8px;
  margin-right: -8px;
}

.nav__toggle-bar {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.82);
  transition:
    transform var(--t4) var(--glide),
    width     var(--t3) var(--glide),
    opacity   var(--t2) ease;
}
.nav__toggle-bar:nth-child(1) { width: 26px; }
.nav__toggle-bar:nth-child(2) { width: 18px; }  /* shorter — refined asymmetry */

/* Active — clean 45° X. Gap is 8px, bars meet at +/-4px. */
.nav__toggle.is-active .nav__toggle-bar:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
  width: 24px;
}
.nav__toggle.is-active .nav__toggle-bar:nth-child(2) {
  transform: translateY(-4.5px) rotate(-45deg);
  width: 24px;
}


/* ================================================================
   §11  MOBILE NAVIGATION DRAWER
   Slides in from right. Overlay dims the page behind it.
   Full typographic treatment inside.
   ================================================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}
.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  /* Slightly deeper — reinforces the panel's importance */
  background: rgba(7, 8, 10, 0.72);
  opacity: 0;
  transition: opacity var(--t5) var(--glide);
  cursor: none;
}
.mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }

.mobile-menu__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 88vw);
  /* Slightly deeper than the dark canvas — creates clear depth */
  background: var(--ink-900);
  border-left: 1px solid rgba(255, 255, 255, 0.052);
  display: flex;
  flex-direction: column;
  padding: 108px var(--space-2xl) max(var(--space-2xl), env(safe-area-inset-bottom, var(--space-2xl)));
  transform: translateX(100%);
  /* t6 — the panel should arrive like a curtain */
  transition: transform var(--t6) var(--glide);
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--ink-0);
  padding-block: 20px;
  border-bottom: 1px solid var(--c-rule-dark);
  cursor: none;
  /* Slower — more considered. t3 for color, t4 for the indent. */
  transition:
    color        var(--t3) var(--glide),
    padding-left var(--t4) var(--glide);
}
.mobile-menu__link:first-child { border-top: 1px solid var(--c-rule-dark); }
.mobile-menu__link:hover { color: var(--c-accent); padding-left: 12px; }

.mobile-menu__num {
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  color: var(--ink-400);
  flex-shrink: 0;
}

.mobile-menu__footer {
  padding-top: var(--space-xl);
  margin-top: auto;
  border-top: 1px solid var(--c-rule-dark);
}

.mobile-menu__location {
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 12px;
}

.mobile-menu__tel {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 300;
  letter-spacing: -0.006em;
  color: var(--ink-0);
  /* t3 — slower, more confident */
  transition: color var(--t3) ease;
}
.mobile-menu__tel:hover { color: var(--c-accent); }


/* ================================================================
   §12  HERO SECTION
   The most important 1400 pixels of this website.
   The image is the hero. Typography is the voice.
   The overlay is surgery — visible only in its effect.
   ================================================================ */

#hero {
  position: relative;
  width: 100%;
  /* 100svh = small viewport height — correct on mobile */
  height: 100svh;
  min-height: 640px;
  max-height: 1100px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* Hero casts a shadow on the section below — creates atmospheric
     depth as the introduction emerges from beneath it. */
  filter: drop-shadow(0 32px 64px rgba(7, 8, 10, 0.22));
}

/* ─── Media layer ────────────────────────────────────────────*/
.hero__media {
  position: absolute;
  /* Oversize to allow parallax without edge gaps */
  inset: -12%;
  top: -12%; left: -12%;
  width: 124%;
  height: 124%;
  z-index: 0;
  will-change: transform;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  /* No transition — moved by JS transform for parallax */
}

/*
  The overlay is five layered gradients — none visible in isolation.
  Together they simulate what a cinema lens and colour grade produce:
  1. Radial lens falloff — corners darken naturally, like f/2.8 aperture
  2. Horizontal left atmosphere — creates environmental depth
  3. Faint top vignette — pulls navbar into the image
  4. Stronger bottom rise — the cinematic lift, text lives here
  5. Subtle right-edge frame — bilateral visual containment

  Order matters: gradients stack bottom-to-top in CSS.
*/
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Radial lens falloff — photographic edge darkening.
       The most atmospheric layer. Simulates natural camera vignette.
       Transparent centre, dark at all four corners. */
    radial-gradient(ellipse 110% 90% at 50% 44%,
      transparent                36%,
      rgba(7, 8, 10, 0.12)       64%,
      rgba(7, 8, 10, 0.30)       100%
    ),
    /* Horizontal left depth — environmental, not decorative */
    linear-gradient(88deg,
      rgba(7, 8, 10, 0.26) 0%,
      rgba(7, 8, 10, 0.08) 40%,
      transparent           68%
    ),
    /* Top vignette — pulls the navbar into the photograph */
    linear-gradient(to bottom,
      rgba(7, 8, 10, 0.42) 0%,
      rgba(7, 8, 10, 0.14) 22%,
      transparent           44%
    ),
    /* Bottom rise — the cinematic lift. Text lives in this gradient.
       The extra stop at 76% prevents the hard mid-frame band. */
    linear-gradient(to top,
      rgba(7, 8, 10, 0.98) 0%,
      rgba(7, 8, 10, 0.88) 12%,
      rgba(7, 8, 10, 0.56) 28%,
      rgba(7, 8, 10, 0.24) 48%,
      rgba(7, 8, 10, 0.07) 68%,
      transparent           88%
    ),
    /* Right edge — bilateral framing, barely perceptible */
    linear-gradient(to left,
      rgba(7, 8, 10, 0.16) 0%,
      transparent           42%
    );
}

/* ─── Content ─────────────────────────────────────────────────*/
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Push up from bottom — more breathing room at larger viewports */
  padding-bottom: clamp(96px, 11.5vw, 176px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  /* 0.30em — tighter than section eyebrows. The hero label is
     cinematic, not administrative. Less tracking, more weight. */
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-accent);
  /* Tight to headline — eyebrow is a label, not a section intro */
  margin-bottom: clamp(14px, 1.6vw, 20px);
  /* Animated by JS */
  opacity: 0;
  transform: translateY(10px);
}

.hero__dot { color: rgba(255, 255, 255, 0.22); }

/*
  The display headline.
  Line height tighter than 1.0 — correct for this scale.
  Second line is italic and indented — creates cinematic
  tension between the two lines. This is art direction.
*/
.hero__headline {
  font-family: var(--serif);
  font-size: var(--step-8);
  font-weight: 300;
  line-height: 0.90;
  /* -0.028em — tighter than before. Magazine cover energy.
     At display scale (88–164px), this tracking reads as composed,
     not compressed. Below this, letterforms crowd. */
  letter-spacing: -0.028em;
  color: var(--ink-0);
  /* Deliberate pause before subtext — let the headline breathe */
  margin-bottom: clamp(36px, 4.5vw, 72px);
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* Each line wraps in overflow:hidden for the clip-up reveal */
.hero__line {
  display: block;
  overflow: hidden;
  /* Tiny extra space so descenders aren't clipped */
  padding-bottom: 0.06em;
}

/* Indented italic — the editorial offset */
.hero__line--offset {
  padding-left: clamp(48px, 7vw, 140px);
  font-style: italic;
  /* Fractionally receded — the second line whispers rather than shouts.
     The contrast between upright and italic carries the hierarchy,
     not the contrast in brightness. */
  color: rgba(255, 255, 255, 0.70);
}

.hero__subtext {
  font-family: var(--sans);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 300;
  letter-spacing: 0.07em;
  line-height: 1.82;
  color: rgba(255, 255, 255, 0.50);
  /* Constrain measure — prevents overly wide lines on large screens */
  max-width: 44ch;
  /* Generous pause before buttons — editorial cadence */
  margin-bottom: clamp(48px, 5.5vw, 80px);
  /* Animated by JS */
  opacity: 0;
  transform: translateY(10px);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 44px;
  /* Animated by JS */
  opacity: 0;
  transform: translateY(10px);
}

/* ─── Scroll indicator ────────────────────────────────────── */
.hero__scroll-indicator {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(36px, 5vw, 68px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
}

.hero__scroll-line {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--c-accent) 35%,
    var(--c-accent) 65%,
    transparent 100%
  );
  animation: scrollDrift 2.8s ease-in-out infinite;
}

@keyframes scrollDrift {
  0%   { opacity: 0.42; transform: scaleY(1)    translateY(0);   }
  50%  { opacity: 0.9;  transform: scaleY(1.08) translateY(0);   }
  100% { opacity: 0.42; transform: scaleY(1)    translateY(0);   }
}

.hero__scroll-label {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  writing-mode: vertical-rl;
}

/* ─── GPS coordinates ─────────────────────────────────────── */
.hero__coords {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(36px, 5vw, 68px);
  z-index: 2;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.22);
  opacity: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}


/* ================================================================
   §13  BRAND INTRODUCTION
   Asymmetric editorial layout: oversized number left,
   considered prose right. The number is structural — not
   decoration. It anchors the left column architecturally.
   ================================================================ */

#introduction {
  z-index: 1;
  position: relative;
}

/*
  Tonal shadow — softens the hard cut from the dark hero into
  the light introduction. The section begins with a subtle top
  shadow that dissipates over 96px, as if the introduction is
  emerging from under the weight of the hero above.

  Because `overflow` is not clipped here, the ::before element
  can start above the section's paint boundary using negative
  absolute positioning (within the document flow context).
*/
#introduction::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Taller shadow — 128px. The introduction section is larger than
     a navbar; it needs a more generous shadow to feel like it's
     genuinely emerging from beneath the hero's weight. */
  height: 128px;
  background: linear-gradient(
    to bottom,
    rgba(7, 8, 10, 0.12) 0%,
    rgba(7, 8, 10, 0.06) 38%,
    rgba(7, 8, 10, 0.02) 64%,
    transparent           100%
  );
  pointer-events: none;
  z-index: 2;
}

/*
  The label is a section opener — it deserves more space
  below than a mid-section eyebrow. The gap creates a deliberate
  pause before the headline arrives, giving the reader time to orient.
*/
.intro__label {
  margin-bottom: clamp(64px, 9vw, 136px);
}

/* Two-column asymmetric grid */
.intro__layout {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: clamp(52px, 9vw, 152px);
  align-items: start;
  margin-bottom: clamp(80px, 10vw, 160px);
}

/* ─── Left: the number ────────────────────────────────────── */
.intro__stat {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.intro__stat-num {
  font-family: var(--serif);
  /* Deliberately oversized — this is a structural element */
  font-size: clamp(92px, 12vw, 168px);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink-800);
  /* Lining numerals — oldstyle would be too casual here */
  font-feature-settings: 'lnum' 1, 'kern' 1;
  font-variant-numeric: lining-nums;
}

.intro__stat-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
  padding-left: 14px;
  /* The gold rule is the only accent in this column */
  border-left: 1px solid var(--c-accent);
}

.intro__stat-unit {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 400;
  color: var(--ink-800);
  line-height: 1.2;
}

.intro__stat-desc {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* ─── Right: the prose ────────────────────────────────────── */
.intro__headline {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 50px);
  font-weight: 400;
  /* Slightly more open — this is a subhead, not a display headline */
  line-height: 1.24;
  color: var(--ink-800);
  margin-bottom: var(--space-l);
  letter-spacing: -0.01em;
  /* Constrain measure so line breaks feel considered, not accidental */
  max-width: 28ch;
}

.intro__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.intro__body p {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.9;
  color: var(--c-ink-faint);
  /* 54ch — slightly tighter than 58ch. The shorter line creates more
     turns, which makes the prose feel more considered and less scrolled.
     Restrain measure — unconstrained prose on wide screens reads cheaply */
  max-width: 54ch;
}

/* ─── Full-width editorial image ──────────────────────────── */
.intro__image-wrapper {
  position: relative;
  overflow: hidden;
}
/* Faint vignette on image */
.intro__image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 70%,
    rgba(7, 8, 10, 0.08) 100%
  );
  pointer-events: none;
}

.intro__image {
  width: 100%;
  /* Taller framing on desktop without disturbing the mobile minimum. */
  height: clamp(320px, 52vw, 760px);
  object-fit: cover;
  /* Aggressive crop bias — anchors the visible window low in the
     source so the empty water above the vessel is largely cropped
     out and the yacht reads in the lower third of the frame. */
  object-position: center 72%;
  display: block;
  /* Editorial zoom — magnifies the source image by 35% so the vessel
     becomes the dominant subject within the frame, not a small object
     surrounded by water. transform-origin matches object-position so
     the zoom stays anchored on the yacht as it scales. */
  transform: scale(1.35);
  transform-origin: center 72%;
  transition: transform var(--t5) var(--emerge);
}

/* Belt-and-braces — when the wrapper is in --layered mode we make
   the rule a touch more specific so no future addition can quietly
   override the editorial crop. */
.intro__image-wrapper--layered .intro__image {
  transform: scale(1.35);
  transform-origin: center 72%;
  object-position: center 72%;
}

.intro__image-wrapper:hover .intro__image,
.intro__image-wrapper--layered:hover .intro__image {
  /* Hover compounds with the base zoom — subtle lift */
  transform: scale(1.40);
}

.intro__image-caption {
  position: absolute;
  bottom: var(--space-m);
  right: var(--space-m);
  z-index: 2;
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  /* Slightly less tracked — more editorial, less labelled */
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
  padding: 6px 12px;
  background: rgba(7, 8, 10, 0.20);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}


/* ================================================================
   §14  SERVICES SECTION
   The list is the architecture. Each row is a considered
   statement. The hover wash is subtle — barely perceptible —
   like a light changing in a room.
   ================================================================ */

#services {
  position: relative;
  overflow: hidden;
  /* Deeper overlap — the section emerges more authoritatively
     from beneath the introduction, like a door revealing a room. */
  margin-top: clamp(-72px, -8vw, -128px);
  padding-top: calc(var(--rhythm) + clamp(72px, 8vw, 128px));
  z-index: 2;
  /* Use the deepest black — ink-900 — not just canvas-dark.
     The services room should feel private and considered. */
  background: var(--c-canvas-black);
}

#services .container { position: relative; z-index: 1; }

.services__header {
  margin-bottom: clamp(52px, 6.5vw, 96px);
}

.services__headline {
  font-family: var(--serif);
  font-size: clamp(36px, 5.2vw, 80px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink-0);
  margin-top: 6px;
}
.services__headline em {
  font-style: italic;
  /* gold-300 is very light — on ink-900, gold-400 reads richer
     and more settled, less like a highlight, more like a material. */
  color: var(--gold-400);
}

/* ─── The list ─────────────────────────────────────────────── */
.services__list {
  display: flex;
  flex-direction: column;
}

.service-item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: clamp(24px, 4vw, 68px);
  align-items: center;
  padding-block: clamp(28px, 3.8vw, 50px);
  /* Softer dividers — rgba(255,255,255,0.050) vs. previous 0.068.
     In a very dark room, rules should barely register. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.050);
  isolation: isolate;
  cursor: none;
}
.service-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.050); }

/*
  The wash — a nearly invisible gradient that fills from left.
  On hover it becomes present. Like a light changing in a room.
  Very slow (t6 = 1.4s) — this is Aman hotel energy.
  The gradient is intentionally faint; it should be felt, not seen.
  Extended to 62% before fading — slightly wider tonal influence.
*/
.service-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(196, 160, 106, 0.072) 0%,
    rgba(196, 160, 106, 0.028) 62%,
    transparent                100%
  );
  opacity: 0;
  transition: opacity var(--t6) var(--glide);
}
.service-item:hover::before {
  opacity: 1;
}
.service-item:hover {
  border-bottom-color: rgba(196, 160, 106, 0.18);
}

/* Number */
.service-item__num {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.30em;
  color: var(--gold-500);
  opacity: 0.5;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 10px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Title */
.service-item__title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink-0);
  margin-bottom: 12px;
  letter-spacing: -0.014em;
  /* t3 — slower, more considered. Aman hotel energy, not startup */
  transition: color var(--t3) ease;
  font-feature-settings: 'kern' 1;
}
.service-item:hover .service-item__title { color: var(--gold-300); }

/* Description */
.service-item__desc {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 300;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.40);
  max-width: 52ch;
  transition: color var(--t3) ease;
}
.service-item:hover .service-item__desc {
  color: rgba(255, 255, 255, 0.58);
}

/* Arrow link box */
.service-item__link {
  flex-shrink: 0;
  align-self: center;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: none;
  transition:
    color        var(--t4) var(--glide),
    background   var(--t4) var(--glide),
    border-color var(--t4) var(--glide),
    transform    var(--t4) var(--glide);
}
.service-item:hover .service-item__link {
  color: var(--ink-950);
  background: var(--c-accent);
  border-color: var(--c-accent);
  /* 1.06 — not 1.08. Restrained. */
  transform: scale(1.06);
}


/* ================================================================
   §15  CHARTER EXPERIENCE
   A split: image on the left, considered content on the right.
   The image is a door — it hints at a world beyond.
   The content answers the question the image raises.
   ================================================================ */

/* The split layout */
.charter__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Trimmed from 90vh to a tighter editorial proportion — about 12%
     shorter, giving the typography panel and the image equal weight
     rather than letting the image dominate vertically. */
  min-height: clamp(620px, 78vh, 880px);
  align-items: stretch;
}

/* ─── Image panel ─────────────────────────────────────────── */
.charter__media {
  position: relative;
  overflow: hidden;
  /* Inset box-shadow — creates the impression of depth at the panel edge.
     Invisible against the photograph, felt at the light boundary. */
  box-shadow: inset -24px 0 48px rgba(7, 8, 10, 0.10);
}

.charter__image {
  /* Absolute fill with extra room for parallax */
  position: absolute;
  inset: -8%;
  top: -8%; left: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  object-position: center 42%;
  transition: transform var(--t5) var(--emerge);
}
.charter__media:hover .charter__image { transform: scale(1.04); }

/* ─── Content panel ───────────────────────────────────────── */
.charter__content {
  background: var(--c-canvas);
  padding-block: clamp(72px, 9vw, 136px);
  padding-inline: clamp(48px, 7.5vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.charter__headline {
  font-family: var(--serif);
  font-size: clamp(40px, 5.2vw, 80px);
  font-weight: 300;
  /* A touch more open than pure display — lives in prose context */
  line-height: 1.02;
  color: var(--ink-800);
  margin-block: 8px var(--space-m);
  letter-spacing: -0.014em;
}
.charter__headline em {
  font-style: italic;
  color: var(--c-accent);
}

.charter__body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.9;
  color: var(--c-ink-faint);
  max-width: 48ch;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.charter__features {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(44px, 5.5vw, 70px);
}

.charter__feature {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block: 20px;
  border-bottom: 1px solid var(--c-rule);
  cursor: none;
  transition:
    padding-left var(--t3) var(--glide),
    border-color var(--t2) ease;
}
.charter__feature:first-child { border-top: 1px solid var(--c-rule); }
.charter__feature:hover {
  /* 6px — more restrained than 8px. Barely felt, not seen. */
  padding-left: 6px;
  border-bottom-color: rgba(196, 160, 106, 0.22);
}

.charter__feature-title {
  font-family: var(--serif);
  font-size: clamp(15px, 1.4vw, 20px);
  /* 400 — consistent with pillar titles. Authority without effort. */
  font-weight: 400;
  color: var(--ink-700);
  line-height: 1.22;
  letter-spacing: -0.006em;
  transition: color var(--t3) ease;
}
.charter__feature:hover .charter__feature-title { color: var(--c-accent-deep); }

.charter__feature-desc {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.65;
  color: var(--c-ink-faint);
}


/* ================================================================
   §16  WHY PHILLIPS MARINE GROUP
   Stats + Pillars. The numbers carry authority.
   The pillars communicate values without overselling.
   ================================================================ */

.why__header {
  margin-bottom: clamp(60px, 8vw, 120px);
}

.why__headline {
  font-family: var(--serif);
  font-size: clamp(32px, 4.2vw, 66px);
  font-weight: 300;
  line-height: 1.06;
  color: var(--ink-800);
  margin-top: 6px;
  /* Slightly tighter — this headline sits on the aged cream.
     The tracking restraint gives it authority without loudness. */
  letter-spacing: -0.018em;
}
.why__headline em {
  font-style: italic;
  /* Use accent-deep on cream — the gold reads richer
     against warm paper than against white. */
  color: var(--c-accent-deep);
}

/* ─── Stats ───────────────────────────────────────────────── */
.why__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: clamp(64px, 8vw, 108px);
  /* Thin vertical rules — slightly softer against the darker cream */
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(25% - 1px),
    rgba(0, 0, 0, 0.08) calc(25% - 1px),
    rgba(0, 0, 0, 0.08) 25%
  );
}

.stat-block {
  padding-block: clamp(32px, 3.5vw, 52px);
  padding-inline: clamp(20px, 2.8vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background var(--t3) ease;
}
.stat-block:first-child { padding-left: 0; }
.stat-block:last-child  { padding-right: 0; }
.stat-block:hover       { background: rgba(196, 160, 106, 0.04); }

.stat-block__display {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.stat-block__num {
  font-family: var(--serif);
  font-size: clamp(56px, 7.2vw, 108px);
  font-weight: 300;
  line-height: 1;
  color: var(--ink-800);
  letter-spacing: -0.032em;
  font-feature-settings: 'lnum' 1, 'kern' 1;
  font-variant-numeric: lining-nums;
}

/*
  Word-based stat — for qualitative identity statements.
  Italic to signal non-numeric. Smaller scale than number stats.
  Used for "Atlantic", "Private", etc.
*/
.stat-block__num--word {
  font-size: clamp(22px, 2.8vw, 42px);
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.stat-block__suffix {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 300;
  line-height: 1;
  color: var(--c-accent);
}

.stat-block__label {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* ─── Separator ───────────────────────────────────────────── */
.why__rule {
  height: 1px;
  background: var(--c-rule-cream);
  margin-bottom: clamp(60px, 8vw, 108px);
}

/* ─── Pillars ─────────────────────────────────────────────── */
.why__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5.5vw, 88px);
}

.why__pillar-icon {
  /* Slightly muted on the warm cream — the accent shouldn't fight
     the background. On this surface, gold-700 feels more settled. */
  color: var(--gold-700);
  opacity: 0.82;
  margin-bottom: var(--space-m);
  transition:
    transform var(--t4) var(--glide),
    opacity   var(--t4) ease;
}
.why__pillar:hover .why__pillar-icon {
  transform: translateY(-3px);
  opacity: 1;
}

.why__pillar-title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 25px);
  /* 400 — refined. 500 reads as effort; 400 reads as authority */
  font-weight: 400;
  color: var(--ink-800);
  margin-bottom: 16px;
  line-height: 1.18;
  letter-spacing: -0.006em;
}

.why__pillar-desc {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: var(--c-ink-faint);
  max-width: 36ch;
}


/* ================================================================
   §17  EDITORIAL GALLERY
   Four cells. Asymmetric 2×2 grid — not a template.
   Images have different visual weights by design.
   The quote strip below is a full-width editorial pause.

   Grid anatomy:
   ┌───────────────────────────┬──────────────────┐  row 1 — 58vh
   │  Cell A                   │  Cell B           │
   │  aerial / dominant        │  hull detail      │
   ├───────────────────────────┼──────────────────┤  row 2 — 40vh
   │  Cell D                   │  Cell E           │
   │  crew service             │  marina walkway   │
   └───────────────────────────┴──────────────────┘
   Quote strip: full-width editorial text, below grid.
   ================================================================ */

#gallery {
  padding-bottom: 0;
  position: relative;
}

/*
  As the reader descends from the cream Why PMG section into the
  gallery's dark ink, this top overlay creates a soft atmospheric
  darkening — like approaching a private dock at dusk.
  The dark section feels earned rather than abrupt.
*/
#gallery::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    rgba(7, 8, 10, 0.06) 0%,
    transparent          100%
  );
  pointer-events: none;
  z-index: 2;
}

/*
  Gallery header — editorial strip above the grid.
  Eyebrow left, image count right. Like a magazine folio.
*/
.gallery__header {
  margin-bottom: var(--space-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--c-rule);
}

.gallery__header-count {
  font-family: var(--serif);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 300;
  letter-spacing: 0.28em;
  color: var(--c-ink-ghost);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/*
  Editorial triptych layout — two full-height flanking columns,
  centre column split into two stacked images.
  This creates strong vertical rhythm and editorial tension.

  Grid anatomy:
  ┌───────────────────────┬─────────────┬──────────────────────┐
  │  Cell A               │  Cell B     │  Cell E              │
  │  aerial — dominant    │  hull top   │  marina — portrait   │
  │  (full height)        ├─────────────┤  (full height)       │
  │                       │  Cell D     │                      │
  │                       │  crew btm   │                      │
  └───────────────────────┴─────────────┴──────────────────────┘
*/
.gallery__grid {
  display: grid;
  grid-template-columns: 47% 24% 29%;
  /* 48vh / 40vh — more pronounced asymmetry between rows.
     Equal rows feel like a CMS template. Unequal rows feel curated.
     The top row is dominant; the bottom is a counterpoint. */
  grid-template-rows: 48vh 40vh;
  /* 3px gap — the black lines between cells are structural, not decorative.
     At 3px they read as a grid without overwhelming the images. */
  gap: 3px;
  background: var(--ink-950);
}

.gallery__cell    { position: relative; overflow: hidden; }
.gallery__cell--a { grid-area: 1 / 1 / 3 / 2; }   /* left: full-height aerial */
.gallery__cell--b { grid-area: 1 / 2 / 2 / 3; }   /* centre-top: hull detail  */
.gallery__cell--d { grid-area: 2 / 2 / 3 / 3; }   /* centre-btm: crew service */
.gallery__cell--e { grid-area: 1 / 3 / 3 / 4; }   /* right: full-height marina */

/* Image wrappers — full cell height */
.gallery__img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Precise object-position per image subject */
.gallery__cell--a img { object-position: center 22%; }   /* aerial — dock geometry, show more structure */
.gallery__cell--b img { object-position: center 50%; }   /* hull — centred waterline, reflections */
.gallery__cell--d img { object-position: center 20%; }   /* crew — pull to upper body and faces */
.gallery__cell--e img { object-position: center 32%; }   /* marina — more palm canopy, less path */

.gallery__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slower — 1.2s. A yacht does not rush. */
  transition: transform 1.2s var(--emerge);
  /* will-change only applied on hover via JS — avoids stale GPU layers */
}

/* Restrained scale — 1.035. Less than 1.04. Barely perceptible. */
.gallery__cell:hover .gallery__img-wrap img { transform: scale(1.035); }

/*
  Cell vignette — atmospheric depth on all edges, heavier at base.
  The extra stop at 46% creates a more natural, atmospheric falloff.
*/
.gallery__cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Bottom lift — text legibility and depth */
    linear-gradient(
      to top,
      rgba(7, 8, 10, 0.52) 0%,
      rgba(7, 8, 10, 0.18) 28%,
      rgba(7, 8, 10, 0.04) 46%,
      transparent           64%
    ),
    /* Top vignette — frames the cell at rest */
    linear-gradient(
      to bottom,
      rgba(7, 8, 10, 0.18) 0%,
      transparent           28%
    );
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--t4) ease;
}
.gallery__cell:hover::after { opacity: 0.7; }

/* Caption — softly present at rest, crisp on hover */
.gallery__cap {
  position: absolute;
  bottom: 22px;
  left: 24px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  /* At rest: slightly less tracked — expansion on hover feels more earned */
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(249, 246, 241, 0.82);
  opacity: 0.40;
  transform: translateY(0);
  transition:
    opacity        var(--t3) ease,
    letter-spacing var(--t4) var(--glide);
  z-index: 2;
}
.gallery__cell:hover .gallery__cap {
  opacity: 1;
  letter-spacing: 0.46em;
}

/* ─── Quote strip — full-width editorial pause below grid ──── */
.gallery__quote-strip {
  background: var(--ink-950);
  padding: clamp(88px, 11vw, 160px) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Enormous ghost quotation mark — texture, not illustration.
   Slightly more present: 0.036 vs. 0.028 — still subliminal
   but now contributes real atmospheric depth in the background. */
.gallery__quote-strip::before {
  content: '\201C';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(200px, 26vw, 380px);
  font-style: italic;
  color: rgba(196, 160, 106, 0.036);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Thin gold rule above quote — editorial separator */
.gallery__quote-strip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: var(--c-accent);
  opacity: 0.5;
}

.gallery__quote-strip blockquote {
  position: relative;
  z-index: 1;
  /* 660px — more intimate. The quote should feel like a private
     confession, not a brand statement. Narrower measure does that. */
  max-width: 660px;
  margin: 0 auto;
}

.gallery__quote-strip blockquote p {
  font-family: var(--serif);
  font-size: clamp(22px, 3.2vw, 48px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.44;
  /* Fractionally off-white — pure #f9f6f1 against jet black reads slightly
     stark. This warmer ivory sits more naturally in the ink-950 room. */
  color: rgba(249, 246, 241, 0.92);
  margin-bottom: clamp(28px, 3vw, 44px);
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-wrap: balance;
  /* -0.012em — slightly tighter than before. At this italic scale,
     tighter tracking reads more editorial, less presentation-ready. */
  letter-spacing: -0.012em;
}

.gallery__quote-strip cite {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  /* 0.26em — less expansive than 0.32em.
     An attribution should whisper, not announce. */
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-style: normal;
  opacity: 0.82;
}

/* Em-dash rule before attribution — editorial convention */
.gallery__quote-strip cite::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold-500);
  opacity: 0.6;
  flex-shrink: 0;
}


/* ================================================================
   §18  CINEMATIC CTA SECTION
   Full-bleed photography. Deep diagonal gradient — strong left,
   dissolving right. The image is a reward for reaching the end.
   ================================================================ */

#cta {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/*
  CTA top-edge transition — softens the cut from the gallery's
  ink-950 quote strip into the CTA section. Without this,
  the join is a hard edge. With it, the CTA image seems to
  breathe its way into existence from the darkness above.
*/
#cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(7, 8, 10, 0.72) 0%,
    rgba(7, 8, 10, 0.28) 38%,
    rgba(7, 8, 10, 0.08) 68%,
    transparent           100%
  );
  z-index: 3;
  pointer-events: none;
}

.cta__media {
  position: absolute;
  /* Oversized for parallax room */
  inset: -10%;
  top: -10%; left: -10%;
  width: 120%;
  height: 120%;
  z-index: 0;
  will-change: transform;
}

.cta__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.cta__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Radial lens falloff — same technique as hero, for continuity */
    radial-gradient(ellipse 120% 100% at 30% 50%,
      transparent              44%,
      rgba(7, 8, 10, 0.10)     70%,
      rgba(7, 8, 10, 0.26)     100%
    ),
    /* Bottom lift — text legibility */
    linear-gradient(to top,
      rgba(7, 8, 10, 0.82) 0%,
      rgba(7, 8, 10, 0.40) 42%,
      rgba(7, 8, 10, 0.12) 68%,
      transparent           100%
    ),
    /* Left sweep — the content area lives in this gradient */
    linear-gradient(108deg,
      rgba(7, 8, 10, 0.96) 0%,
      rgba(7, 8, 10, 0.74) 26%,
      rgba(7, 8, 10, 0.38) 52%,
      rgba(7, 8, 10, 0.10) 76%,
      transparent           100%
    );
}

.cta__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(96px, 12.5vw, 192px);
  padding-inline: var(--gutter);
  max-width: var(--max-w);
  width: 100%;
  margin-inline: auto;
}

.cta__headline {
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 144px);
  font-weight: 300;
  /* 0.90 — this is a closing statement, not a dramatic open.
     Slightly less compressed than 0.92; each line breathes more. */
  line-height: 0.90;
  color: var(--ink-0);
  margin-block: 8px var(--space-l);
  /* Tighter tracking at this scale — pulls the display type together */
  letter-spacing: -0.022em;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
.cta__headline em {
  font-style: italic;
  color: var(--c-accent);
}

.cta__body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.88;
  color: rgba(255, 255, 255, 0.48);
  max-width: 42ch;
  margin-bottom: clamp(44px, 5.5vw, 70px);
}


/* ================================================================
   §19  FOOTER
   The closing statement. Respectful of the visitor's time.
   Every line is necessary. Nothing decorative.
   The ghost watermark is the one indulgence — barely present.
   ================================================================ */

#footer {
  background: var(--ink-950);
  padding-block: clamp(72px, 9vw, 132px) clamp(32px, 4vw, 52px);
  padding-inline: var(--gutter);
  position: relative;
  overflow: hidden;
}

/* Ghost monogram — texture, not illustration */
#footer::before {
  content: 'PMG';
  position: absolute;
  bottom: -60px;
  right: clamp(-20px, -1vw, 0px);
  font-family: var(--serif);
  font-size: clamp(140px, 18vw, 260px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.018);
  line-height: 1;
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
  font-feature-settings: 'kern' 1;
}

.footer__top {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(56px, 9vw, 148px);
  padding-bottom: clamp(52px, 6.5vw, 96px);
}

/* ─── Brand column ────────────────────────────────────────── */
.footer__brand {}

.footer__logo {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--step--2);
  /*
    400 weight — up from 300. In the footer context the wordmark sits
    against a very dark canvas at small size; regular weight holds the
    ink better than light at this scale without feeling heavy.
  */
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(249, 246, 241, 0.82);
  margin-bottom: 12px;
  position: relative;
  transition: color var(--t3) ease;
}
/* Underline sweep on footer logo hover */
.footer__logo::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t3) var(--glide);
}
.footer__logo:hover               { color: var(--c-accent); }
.footer__logo:hover::after        { transform: scaleX(1); transform-origin: left; }

.footer__tagline {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.08em;
  /* Quieter than nav — this is background information, not a claim */
  color: var(--ink-500);
  margin-top: 8px;
  line-height: 1.7;
}

/* ─── Navigation columns ──────────────────────────────────── */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4.5vw, 60px);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__col-label {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 400;
  /* 0.28em — less aggressive. Column labels are organisational,
     not navigational. Less tracking = less shouting. */
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* Muted gold — on ink-950, even gold-600 reads well.
     The accent here should be structural, not decorative. */
  color: var(--gold-600);
  margin-bottom: 10px;
}

.footer__col a,
.footer__col address {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.03em;
  /* Slightly more open — footer links have room to breathe */
  line-height: 1.64;
  color: var(--ink-500);
  transition: color var(--t3) ease;
}
.footer__col a:hover { color: var(--ink-200); }

/* ─── Divider ─────────────────────────────────────────────── */
.footer__divider {
  max-width: var(--max-w);
  margin-inline: auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.058);
  margin-bottom: clamp(24px, 3vw, 44px);
}

/* ─── Bottom bar ──────────────────────────────────────────── */
.footer__bottom {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.footer__copy {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.15);
}

.footer__legal {
  display: flex;
  gap: 28px;
}
.footer__legal a {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.15);
  transition: color var(--t2) ease;
}
.footer__legal a:hover { color: rgba(255, 255, 255, 0.5); }


/* ================================================================
   §20  SCROLL REVEAL
   Elements start invisible. JS adds .is-visible on viewport
   entry. Transition is defined on .is-visible so there is no
   flash of content before JS initialises.
   ================================================================ */

.reveal {
  opacity: 0;
  /* 18px — further reduced. At t5 duration the movement barely
     registers as movement. The element seems to arrive, not travel. */
  transform: translateY(18px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   var(--t4) var(--soften),
    transform var(--t5) var(--emerge);
}

/* Delayed reveals — stagger via HTML data-delay, applied via class */
.reveal--delay-1.is-visible { transition-delay: 0.12s; }
.reveal--delay-2.is-visible { transition-delay: 0.24s; }
.reveal--delay-3.is-visible { transition-delay: 0.36s; }


/* ================================================================
   §21  LARGE DESKTOP  (≥ 1600px)
   Fine-tuning at expansive widths.
   ================================================================ */

@media (min-width: 1600px) {
  .intro__layout { grid-template-columns: 1fr 2.6fr; }
  /* Gallery — taller rows at wide displays. 52/42 maintains the
     20% asymmetry established in the base grid (48/40). */
  .gallery__grid {
    grid-template-rows: 52vh 42vh;
  }
  .gallery__quote-strip { padding: clamp(100px, 11vw, 180px) var(--space-xl); }
}


/* ================================================================
   §22  TABLET  (≤ 1100px)
   ================================================================ */

@media (max-width: 1100px) {

  /* Navigation */
  .nav__menu   { display: none; }
  .nav__cta    { display: none; }
  .nav__toggle { display: flex; }

  /* Introduction — stack columns */
  .intro__layout { grid-template-columns: 1fr; gap: 52px; }
  .intro__stat   {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-l);
  }

  /* Charter — stack panels */
  .charter__layout { grid-template-columns: 1fr; }
  .charter__image  {
    /* Exit absolute positioning for stacked layout */
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(360px, 52vw, 520px);
    object-position: center 40%;   /* softer crop on portrait viewport */
    top: auto; left: auto;
  }

  /* Stats — 2 × 2 */
  .why__stats {
    grid-template-columns: 1fr 1fr;
    background-image: none;
  }
  .stat-block {
    border-bottom: 1px solid var(--c-rule-cream);
    padding-left: 0;
    padding-right: 0;
  }
  .stat-block:nth-last-child(-n+2) { border-bottom: none; }

  /* Pillars — 2 col */
  .why__pillars { grid-template-columns: 1fr 1fr; }

  /* Gallery — collapse to 2-column at tablet */
  .gallery__grid {
    grid-template-columns: 58% 42%;
    grid-template-rows: 50vh 38vh;
  }
  /* Revert to 2-row layout — A and B top row, D and E bottom */
  .gallery__cell--a { grid-area: 1 / 1 / 2 / 2; }
  .gallery__cell--b { grid-area: 1 / 2 / 2 / 3; }
  .gallery__cell--d { grid-area: 2 / 1 / 3 / 2; }
  .gallery__cell--e { grid-area: 2 / 2 / 3 / 3; }
  .gallery__header { margin-bottom: var(--space-m); }
  .gallery__quote-strip { padding: clamp(56px, 8vw, 96px) var(--gutter); }
  .gallery__quote-strip blockquote p { font-size: clamp(20px, 3.5vw, 36px); }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: 52px; }
}


/* ================================================================
   §23  MOBILE  (≤ 720px)
   ================================================================ */

@media (max-width: 720px) {

  :root {
    --rhythm:    clamp(64px, 14vw, 96px);
    --rhythm-sm: clamp(44px, 10vw, 72px);
  }

  /* Global mobile tracking refinements — wide tracking on small type feels airy, not refined */
  .eyebrow {
    letter-spacing: 0.26em;
    font-size: 9px;
  }

  /* Hero — prevent second line overflow on narrow viewports */
  .hero__headline {
    font-size: clamp(48px, 12.5vw, 88px);
    letter-spacing: -0.024em;  /* ease tracking slightly — smaller type, tighter feels heavy */
  }
  .hero__line--offset {
    padding-left: clamp(16px, 4.5vw, 48px);
  }
  .hero__subtext {
    font-size: clamp(11px, 2.8vw, 14px);
    color: rgba(255, 255, 255, 0.58);  /* brighter than desktop 0.50 — small screen legibility */
    max-width: min(320px, 90vw);
    line-height: 1.76;  /* more open on small screens */
  }
  .hero__eyebrow {
    font-size: 9px;  /* lock it — vw-based sizing too small at 375px */
    letter-spacing: 0.28em;
  }
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }
  /* Scroll indicator and coords — hide on mobile to reduce clutter */
  .hero__scroll-indicator,
  .hero__coords { display: none; }

  /* Nav — ensure logo wordmark doesn't crowd on small screens */
  .nav__logo-wordmark {
    display: none;
  }

  /* Mobile menu panel — atmospheric depth + tighter padding */
  .mobile-menu__panel {
    padding: 96px var(--space-xl) max(var(--space-xl), env(safe-area-inset-bottom, var(--space-xl)));
    width: min(380px, 88vw);
    /* Edge shadow — sense of floating over page */
    box-shadow:
      -1px 0 0 rgba(255, 255, 255, 0.034),
      inset -1px 0 56px rgba(7, 8, 10, 0.28);
  }

  /* Mobile nav links — slightly more generous tap targets */
  .mobile-menu__link {
    padding-block: clamp(14px, 3.5vw, 20px);
  }

  /* Services */
  .service-item {
    grid-template-columns: 40px 1fr;
    gap: var(--space-m);
  }
  .service-item__link { display: none; }

  /* Services — improve description legibility on mobile */
  .service-item__desc {
    font-size: clamp(12px, 3.2vw, 14px);  /* was 11.5px — too small at 375px */
    line-height: 1.66;
  }

  /* Services eyebrow — targeting .eyebrow.eyebrow--light within section */
  #services .eyebrow {
    letter-spacing: 0.24em;
  }

  /* Charter — editorial padding, stacked layout */
  .charter__content {
    padding-block: clamp(52px, 9vw, 80px);
    padding-inline: clamp(24px, 5.5vw, 52px);
  }
  /* Charter headline — slightly more open stacked */
  .charter__headline {
    font-size: clamp(28px, 7.5vw, 44px);
    line-height: 1.10;
  }
  /* Charter image position on stacked layout */
  .charter__image {
    object-position: center 38%;
  }

  /* Stats */
  .why__pillars { grid-template-columns: 1fr; }
  .stat-block   { padding-inline: 0; }

  /* Why PMG stats — ensure readable size */
  .stat-block__num {
    font-size: clamp(48px, 12vw, 80px);
  }

  /* Gallery — 2-column with cinematic vw proportions */
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 54vw 42vw;  /* was 50/38 — more presence, better image room */
    gap: 2px;  /* tighter seam on mobile */
  }
  .gallery__cell--a { grid-area: 1 / 1 / 2 / 2; }
  .gallery__cell--b { grid-area: 1 / 2 / 2 / 3; }
  .gallery__cell--d { grid-area: 2 / 1 / 3 / 2; }
  .gallery__cell--e { grid-area: 2 / 2 / 3 / 3; }

  /* Gallery header — hide count on small screens */
  .gallery__header-count { display: none; }

  /* Gallery caps — reduce tracking at small size */
  .gallery__cap {
    letter-spacing: 0.28em;
    font-size: 8px;
  }

  /* Quote strip: tighten padding on mobile, narrow the column */
  .gallery__quote-strip {
    padding: clamp(52px, 12vw, 88px) var(--space-m);
  }
  .gallery__quote-strip blockquote {
    max-width: 100%;  /* full width on mobile — no reason to constrain */
  }
  .gallery__quote-strip blockquote p {
    font-size: clamp(17px, 4.5vw, 26px);
    letter-spacing: -0.008em;
  }
  .gallery__quote-strip::before {
    font-size: 44vw;
    top: -24px;
  }

  /* CTA section — cinematic at mobile */
  .cta__headline {
    font-size: clamp(44px, 11vw, 80px);
    line-height: 0.92;  /* slightly looser stacked — avoids crushing */
    letter-spacing: -0.018em;
  }
  .cta__body {
    max-width: 100%;
    margin-top: var(--space-m);
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.68;
  }
  .cta__actions {
    gap: var(--space-s);
  }

  /* Footer — premium mobile pacing */
  .footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    padding-top: clamp(20px, 4.5vw, 32px);
  }
  /* Footer legal — reduce tracking at small size */
  .footer__legal {
    letter-spacing: 0.12em;
  }
}


/* ================================================================
   §24  SMALL MOBILE  (≤ 440px)
   ================================================================ */

@media (max-width: 440px) {
  .footer__nav { grid-template-columns: 1fr; }
  .why__stats  { grid-template-columns: 1fr; }
  .stat-block  {
    border-bottom: 1px solid var(--c-rule-cream);
    border-right: none;
    padding-inline: 0;
  }
  .stat-block:last-child { border-bottom: none; }

  /* Gallery — single column at very small screens */
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-template-rows: 64vw 48vw 48vw 56vw;
  }
  .gallery__cell--a { grid-area: 1 / 1 / 2 / 2; }  /* aerial first — dominant */
  .gallery__cell--e { grid-area: 2 / 1 / 3 / 2; }  /* marina second — landscape feel */
  .gallery__cell--d { grid-area: 3 / 1 / 4 / 2; }  /* crew third */
  .gallery__cell--b { grid-area: 4 / 1 / 5 / 2; }  /* hull last — detail close */

  /* Word stats — ensure readable at small scale */
  .stat-block__num--word {
    font-size: clamp(20px, 5.5vw, 30px);
  }
}


/* ================================================================
   §25  REDUCED MOTION
   Every animation becomes instantaneous.
   Transitions remain for functional state communication.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }

  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__image,
  .intro__image,
  .charter__image,
  .cta__image {
    will-change: auto;
    transition: none !important;
  }
}


/* ================================================================
   §26  PRINT
   ================================================================ */

@media print {
  #preloader,
  #cursor-dot,
  #cursor-ring,
  #navbar,
  .mobile-menu,
  .hero__scroll-indicator,
  .hero__coords { display: none !important; }

  body    { background: #fff; color: #111; cursor: auto; }
  #footer { background: #fff; color: #333; }
  #footer::before { display: none; }
}



/* ----------------------------------------------------------------
   SERVICES — Ghost background image
   ---------------------------------------------------------------- */
.services__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.services__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  /* Slightly more present — the services section should feel inhabited,
     not empty. At 0.068 the texture is subliminal, not decorative. */
  opacity: 0.068;
  filter: grayscale(100%) contrast(0.88) brightness(0.92);
  transform: scale(1.04);
  transition: none;
  will-change: auto;
}

/* ================================================================
   §27  ABOUT PAGE
   Quiet authority. Split layouts. Editorial operations grid.
   Dark: About Operations. Cream: Long-Term Relationships.
   Every section is a considered decision — not a template.
   ================================================================ */

/* ─── Nav active state — current page indication ──────────────── */
.nav__link--active {
  color: rgba(249, 246, 241, 0.92);
  opacity: 1;
}

/* ─── About Philosophy ─────────────────────────────────────────── */

/*
  The opening statement is centered on the page.
  The silence around it is the design. Large italic serif at a
  scale that commands attention without competing with the hero.
*/
.about-lede {
  margin-top: clamp(40px, 5.5vw, 72px);
  margin-bottom: clamp(52px, 7vw, 96px);
}

.about-lede__statement {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.50;
  color: var(--ink-800);
  letter-spacing: -0.008em;
  /* 74ch — intimate enough to read as a private admission,
     not so narrow it fragments the rhythm */
  max-width: 74ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

.about-philosophy__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  /* Slightly narrower than full container — prose needs constraint */
  max-width: 1060px;
  margin-inline: auto;
}

.about-philosophy__cols p {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.86;
  color: var(--c-ink-faint);
}


/* ─── About Founder ─────────────────────────────────────────────── */

/*
  Full-bleed edge-to-edge split. Image bleeds to the left viewport
  edge; content sits on the page canvas on the right. No margin,
  no gutter — the tension between image and text is the layout.
*/
#about-founder {
  padding-block: var(--rhythm);
}

.about-founder__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin-inline: auto;
  align-items: stretch;
}

.about-founder__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 54vw, 700px);
}

.about-founder__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(1.06);
  transition: transform var(--t6) var(--glide);
  will-change: auto;
}

.about-founder__media:hover .about-founder__image {
  transform: scale(1.03);
}

/* Subtle location attribution — bottom-left of the image */
.about-founder__media-cap {
  position: absolute;
  bottom: 24px;
  left: 28px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(249, 246, 241, 0.48);
  pointer-events: none;
}

.about-founder__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 7vw, 96px) clamp(40px, 5.5vw, 80px);
  background: var(--c-canvas);
}

.about-founder__headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin-block: var(--space-m) var(--space-l);
}

.about-founder__headline em {
  font-style: italic;
  /* Deep gold on light canvas — more reserved than the accent */
  color: var(--c-accent-deep);
}

.about-founder__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.about-founder__body p {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.86;
  color: var(--c-ink-faint);
  max-width: 52ch;
}

/* Bordered quote — accent rule on the left edge, personal copy */
.about-founder__quote {
  border-left: 1px solid var(--c-accent);
  padding-left: clamp(20px, 2.5vw, 32px);
}

.about-founder__quote p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.54;
  color: var(--ink-700);
  margin-bottom: 14px;
  text-wrap: balance;
}

.about-founder__quote cite {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.82;
  font-style: normal;
}


/* ─── About Operations ──────────────────────────────────────────── */

/*
  Dark canvas. Ghost shipyard image — occupies depth, not attention.
  Six editorial prose columns numbered 01–06 with top-rule
  separators. No icons, no cards, no borders — the constraint
  of pure type on dark ground is the luxury signal.
*/
#about-operations {
  position: relative;
  overflow: hidden;
}

/* Ghost image — almost invisible. Occupies depth, not attention */
.about-ops__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.about-ops__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* 0.05 — barely visible. Texture, not illustration */
  opacity: 0.050;
  filter: grayscale(100%) contrast(0.78) brightness(0.82);
}

.about-ops__header {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(52px, 7vw, 96px);
}

.about-ops__headline {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  margin-top: var(--space-m);
  text-wrap: balance;
}

.about-ops__headline em {
  font-style: italic;
  color: var(--c-accent);
}

/* Six-column editorial grid — like a rigorous magazine spread */
.about-ops__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4.5vw, 64px) clamp(36px, 5vw, 72px);
}

/* Top rule — the defining feature of the editorial column format */
.about-col {
  padding-top: clamp(24px, 2.5vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.088);
  transition: border-color var(--t3) ease;
}

.about-col:hover {
  border-top-color: rgba(196, 160, 106, 0.30);
}

/* Number — whispered authority. Not decorative, not primary */
.about-col__num {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.68;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.about-col__title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.006em;
  color: var(--ink-0);
  margin-bottom: clamp(12px, 1.4vw, 20px);
}

.about-col__body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.82;
  /* 0.44 — ghosted prose on dark. Reads as considered, not absent */
  color: rgba(255, 255, 255, 0.44);
}


/* ─── About Heritage ────────────────────────────────────────────── */

/*
  Reverse split — text left, photography right. Mirrors the Founder
  section structurally, which creates a gentle visual rhythm across
  the page. Different image direction = compositional contrast.
*/
#about-heritage {
  padding-block: var(--rhythm);
}

.about-heritage__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin-inline: auto;
  align-items: stretch;
}

.about-heritage__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 7vw, 96px) clamp(40px, 5.5vw, 80px);
  padding-left: var(--gutter);
  background: var(--c-canvas);
}

.about-heritage__headline {
  font-family: var(--serif);
  font-size: clamp(44px, 5.8vw, 84px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin-block: var(--space-m) var(--space-l);
}

.about-heritage__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.about-heritage__body p {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.86;
  color: var(--c-ink-faint);
  max-width: 52ch;
}

.about-heritage__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 54vw, 700px);
}

.about-heritage__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  transform: scale(1.06);
  transition: transform var(--t6) var(--glide);
  will-change: auto;
}

.about-heritage__media:hover .about-heritage__image {
  transform: scale(1.03);
}


/* ─── About Relationships ───────────────────────────────────────── */

/*
  Cream section. One carefully worded founder quote. Three
  spare facts. No superlatives — the numbers do the work.
  Stats are separated by hairline rules into a silent grid.
*/

/* Large centered quote — the page's emotional pivot */
.about-rel__quote {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(56px, 7.5vw, 96px);
}

.about-rel__quote blockquote p {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.52;
  letter-spacing: -0.010em;
  color: var(--ink-800);
  margin-bottom: clamp(20px, 2.2vw, 32px);
  text-wrap: balance;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

.about-rel__quote cite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  font-style: normal;
  opacity: 0.78;
}

.about-rel__quote cite::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--c-accent-deep);
  opacity: 0.6;
  flex-shrink: 0;
}

/* Hairline separator — editorial pause before the facts */
.about-rel__rule {
  height: 1px;
  background: var(--c-rule-cream);
  margin-bottom: clamp(56px, 7.5vw, 96px);
}

/* Stats grid — hairline rule gaps create implicit columns */
.about-rel__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 860px;
  margin-inline: auto;
  gap: 1px;
  background: var(--c-rule-cream);
}

.about-rel__stat {
  background: var(--c-canvas-cream);
  padding: clamp(32px, 4.5vw, 56px) clamp(24px, 3.5vw, 48px);
  text-align: center;
}

.about-rel__stat-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

.about-rel__stat-num {
  font-family: var(--serif);
  font-size: clamp(52px, 6.5vw, 92px);
  font-weight: 300;
  line-height: 1;
  color: var(--ink-900);
  letter-spacing: -0.024em;
}

/*
  "Referral" word stat — italic serif, smaller than the numerals.
  Sits at the same optical weight as the number stats without
  fighting for dominance.
*/
.about-rel__stat-num--word {
  font-size: clamp(26px, 3.2vw, 42px);
  letter-spacing: -0.014em;
  line-height: 1.12;
  align-self: center;
  font-style: italic;
}

/* "<25" — same numeric scale, symbol prefix doesn't need adjustment */
.about-rel__stat-num--small {
  font-size: clamp(40px, 5vw, 72px);
}

.about-rel__stat-suffix {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 300;
  line-height: 1;
  color: var(--c-accent);
}

.about-rel__stat-label {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  line-height: 1.64;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}


/* ─── About Page Responsive — Tablet (≤ 1100px) ─────────────────── */

@media (max-width: 1100px) {

  /* Founder — stack vertically on tablet */
  .about-founder__layout {
    grid-template-columns: 1fr;
  }
  .about-founder__media {
    min-height: clamp(360px, 52vw, 560px);
  }
  .about-founder__content {
    padding: clamp(44px, 6vw, 72px) var(--gutter);
  }
  .about-founder__body p { max-width: 64ch; }

  /* Operations — 2 columns on tablet */
  .about-ops__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 3.5vw, 48px) clamp(28px, 4vw, 56px);
  }

  /* Heritage — stack vertically, image above text */
  .about-heritage__layout {
    grid-template-columns: 1fr;
  }
  .about-heritage__media {
    min-height: clamp(360px, 52vw, 560px);
    order: -1;
  }
  .about-heritage__content {
    padding: clamp(44px, 6vw, 72px) var(--gutter);
  }
  .about-heritage__body p { max-width: 64ch; }

}


/* ─── About Page Responsive — Mobile (≤ 720px) ───────────────────── */

@media (max-width: 720px) {

  /* Philosophy — stack columns, left-align statement */
  .about-lede__statement {
    font-size: clamp(18px, 5.5vw, 28px);
    text-align: left;
    max-width: 100%;
  }
  .about-philosophy__cols {
    grid-template-columns: 1fr;
    gap: var(--space-m);
    max-width: 100%;
  }

  /* Founder */
  .about-founder__media { min-height: 68vw; }
  .about-founder__headline {
    font-size: clamp(28px, 7.5vw, 44px);
    line-height: 1.10;
  }
  .about-founder__body p { max-width: 100%; }

  /* Operations — single column */
  .about-ops__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .about-col {
    padding-top: clamp(20px, 4.5vw, 32px);
    padding-bottom: clamp(20px, 4.5vw, 32px);
  }
  .about-ops__headline {
    font-size: clamp(32px, 8.5vw, 52px);
  }

  /* Heritage */
  .about-heritage__media { min-height: 68vw; }
  .about-heritage__headline {
    font-size: clamp(32px, 8.5vw, 52px);
  }
  .about-heritage__body p { max-width: 100%; }

  /* Relationships — stack stats, left-align quote */
  .about-rel__quote {
    text-align: left;
    max-width: 100%;
  }
  .about-rel__quote blockquote p {
    font-size: clamp(17px, 4.8vw, 28px);
  }
  .about-rel__quote cite {
    justify-content: flex-start;
  }
  .about-rel__stats {
    grid-template-columns: 1fr;
    background: transparent;
    gap: 0;
    max-width: 100%;
    border-top: 1px solid var(--c-rule-cream);
  }
  .about-rel__stat {
    border-bottom: 1px solid var(--c-rule-cream);
    padding: clamp(24px, 5.5vw, 40px) 0;
    text-align: left;
  }
  .about-rel__stat-display {
    justify-content: flex-start;
  }

}


/* ================================================================
   §28  SERVICES PAGE
   Indexed list. Dark operational depth. Cream process steps.
   Two split sections — charter and crew. Editorial restraint
   throughout. No cards, no icons, no corporate grids.
   ================================================================ */

/* ─── Services list header ──────────────────────────────────────── */
.svcs-list__header {
  margin-bottom: clamp(52px, 7vw, 88px);
}

.svcs-list__headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 300;
  line-height: 1.10;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin-top: var(--space-m);
}

.svcs-list__headline em {
  font-style: italic;
  color: var(--c-accent-deep);
}


/* ─── Indexed service list ──────────────────────────────────────── */

/*
  Each row is a three-column grid:
  num | title + tag | body

  The top rule is the primary structural element — repeated
  seven times, it becomes the rhythm of the section.
  The last item closes with a bottom rule.
*/
.svc-list {
  display: flex;
  flex-direction: column;
}

.svc-item {
  display: grid;
  /* 56px: number. 1fr: title/tag. 1.8fr: body */
  grid-template-columns: 56px 1fr 1.8fr;
  gap: clamp(20px, 2.5vw, 40px);
  padding-block: clamp(28px, 3.5vw, 48px);
  border-top: 1px solid var(--c-rule);
  align-items: start;
  transition: border-color var(--t3) ease;
}

.svc-item:last-child {
  border-bottom: 1px solid var(--c-rule);
}

.svc-item:hover {
  border-top-color: rgba(196, 160, 106, 0.20);
}

.svc-item:last-child:hover {
  border-bottom-color: rgba(196, 160, 106, 0.20);
}

/* Number — present but not dominant */
.svc-item__num {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.62;
  padding-top: 4px; /* optical alignment with title */
  transition: opacity var(--t3) ease;
}

.svc-item:hover .svc-item__num {
  opacity: 1;
}

.svc-item__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: clamp(12px, 2vw, 32px);
}

.svc-item__title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 25px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.006em;
  color: var(--ink-900);
}

/* Subtle category tag — present, not prominent */
.svc-item__tag {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-ghost);
}

.svc-item__body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: var(--c-ink-faint);
}


/* ─── Operational depth section ─────────────────────────────────── */

/*
  Ghost background image — shipyard at nearly zero opacity.
  Same treatment as the About Operations section, but this
  is the services context. It says: we work in yards.
*/
#svcs-depth {
  position: relative;
  overflow: hidden;
}

.svcs-depth__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.svcs-depth__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.048;
  filter: grayscale(100%) contrast(0.76) brightness(0.84);
}

.svcs-depth__intro {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-bottom: clamp(56px, 7.5vw, 104px);
}

.svcs-depth__headline {
  font-family: var(--serif);
  font-size: clamp(40px, 5.5vw, 82px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  margin-top: var(--space-m);
  text-wrap: balance;
}

.svcs-depth__headline em {
  font-style: italic;
  color: var(--c-accent);
}

.svcs-depth__lede {
  font-family: var(--sans);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.76;
  /* Fractionally more present than body ghost text — this is
     a setting statement, not decorative prose */
  color: rgba(255, 255, 255, 0.58);
  max-width: 68ch;
  margin-top: var(--space-l);
}

/* Three editorial columns — same ruled format as About Operations */
.svcs-depth__cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 72px);
}

.svcs-depth__col {
  padding-top: clamp(24px, 2.5vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.088);
  transition: border-color var(--t3) ease;
}

.svcs-depth__col:hover {
  border-top-color: rgba(196, 160, 106, 0.28);
}

.svcs-depth__col-title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.006em;
  color: var(--ink-0);
  margin-bottom: clamp(14px, 1.5vw, 20px);
}

.svcs-depth__col-body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: rgba(255, 255, 255, 0.42);
}


/* ─── Management process section ────────────────────────────────── */

.svcs-process__headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 300;
  line-height: 1.10;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin-block: var(--space-m) clamp(52px, 7vw, 96px);
}

.svcs-process__headline em {
  font-style: italic;
  color: var(--c-accent-deep);
}

/* Four sequential steps — horizontal grid on desktop */
.svcs-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 60px);
}

.svcs-process__step {
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--c-rule-cream);
}

/* Step number — gold accent, whispering authority */
.svcs-process__step-num {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  opacity: 0.72;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

.svcs-process__step-title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.20;
  letter-spacing: -0.004em;
  color: var(--ink-800);
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

.svcs-process__step-body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.80;
  color: var(--c-ink-faint);
}


/* ─── Split sections — Charter & Crew ───────────────────────────── */

/*
  Shared split layout used by both the Charter and Crew sections.
  Charter: content-left / image-right (default)
  Crew: image-left / content-right (--reverse modifier)

  Mirrors the About page split pattern but with services-specific
  class names. Same proportions, same image treatment.
*/
#svcs-charter,
#svcs-crew {
  padding-block: var(--rhythm);
}

.svcs-split__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin-inline: auto;
  align-items: stretch;
}

/* Reverse layout — image first in DOM, appears on left */
.svcs-split__layout--reverse {
  /* No change needed — HTML order gives us image-left */
}

/* Content panel — left by default, right in --reverse */
.svcs-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 7vw, 96px) clamp(40px, 5.5vw, 80px);
  padding-left: var(--gutter);
  background: var(--c-canvas);
}

/* Right-side content panel (Crew section) */
.svcs-split__content--right {
  padding-left: clamp(40px, 5.5vw, 80px);
  padding-right: var(--gutter);
}

.svcs-split__headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1.10;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin-block: var(--space-m) var(--space-l);
}

.svcs-split__headline em {
  font-style: italic;
  color: var(--c-accent-deep);
}

.svcs-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.svcs-split__body p {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.86;
  color: var(--c-ink-faint);
  max-width: 54ch;
}

/* Image panel — overflow hidden for scale hover */
.svcs-split__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 52vw, 680px);
}

.svcs-split__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.06);
  transition: transform var(--t6) var(--glide);
  will-change: auto;
}

/* Detail shot — favour centre for the quad outboard */
.svcs-split__image--detail {
  object-position: center 50%;
}

.svcs-split__media:hover .svcs-split__image {
  transform: scale(1.03);
}


/* ─── Services Page Responsive — Tablet (≤ 1100px) ──────────────── */

@media (max-width: 1100px) {

  /* Service list — collapse to 2-column */
  .svc-item {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
  }
  .svc-item__num {
    grid-row: 1;
    grid-column: 1;
  }
  .svc-item__head {
    grid-row: 1;
    grid-column: 2;
    padding-right: 0;
  }
  .svc-item__body {
    grid-row: 2;
    grid-column: 2;
    margin-top: var(--space-s);
  }

  /* Depth cols — 2 column on tablet */
  .svcs-depth__cols {
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.5vw, 52px);
  }
  /* Third col spans both — gives it presence at tablet */
  .svcs-depth__col:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 640px;
  }

  /* Process steps — 2 × 2 on tablet */
  .svcs-process__steps {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 52px);
  }

  /* Charter split — stack */
  .svcs-split__layout {
    grid-template-columns: 1fr;
  }
  .svcs-split__media {
    min-height: clamp(360px, 52vw, 540px);
  }
  /* Reverse layout on tablet: image becomes first regardless */
  .svcs-split__layout--reverse .svcs-split__media {
    order: -1;
  }
  .svcs-split__content,
  .svcs-split__content--right {
    padding: clamp(44px, 6vw, 72px) var(--gutter);
  }
  .svcs-split__body p { max-width: 64ch; }

}


/* ─── Services Page Responsive — Mobile (≤ 720px) ───────────────── */

@media (max-width: 720px) {

  /* Service list — single column stack */
  .svc-item {
    grid-template-columns: 1fr;
    gap: var(--space-s);
    padding-block: clamp(24px, 5.5vw, 36px);
  }
  .svc-item__num,
  .svc-item__head,
  .svc-item__body {
    grid-row: auto;
    grid-column: 1;
  }
  .svc-item__body { margin-top: 0; }
  .svc-item__tag  { display: none; } /* Clean at small size */

  .svcs-list__headline {
    font-size: clamp(28px, 7.5vw, 44px);
  }

  /* Depth section */
  .svcs-depth__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .svcs-depth__col {
    padding-block: clamp(20px, 4.5vw, 32px);
  }
  .svcs-depth__col:nth-child(3) {
    grid-column: 1;
    max-width: 100%;
  }
  .svcs-depth__headline {
    font-size: clamp(30px, 8vw, 48px);
  }
  .svcs-depth__lede {
    font-size: var(--step-0);
    max-width: 100%;
  }

  /* Process steps — single column */
  .svcs-process__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .svcs-process__step {
    padding-block: clamp(20px, 4.5vw, 32px);
  }
  .svcs-process__headline {
    font-size: clamp(28px, 7.5vw, 44px);
  }

  /* Splits — stack */
  .svcs-split__media { min-height: 66vw; }
  .svcs-split__headline {
    font-size: clamp(28px, 7.5vw, 44px);
    line-height: 1.10;
  }
  .svcs-split__body p { max-width: 100%; }

}


/* ================================================================
   §29  CHARTER PAGE
   Destinations editorial list — the only new component.
   All other sections reuse About and Services classes:
   .about-lede / .about-philosophy__cols (philosophy)
   .svcs-split__layout (itineraries + crew splits)
   .svcs-depth__* (guest experience dark section)
   .svcs-process__* (inquiry process steps)
   ================================================================ */

/* ─── Charter experience section — structural override ──────────── */
/*
  #charter-experience uses the same visual treatment as #svcs-depth
  but needs its own ID rules for position/overflow.
  The component classes (.svcs-depth__*) handle all the visual styling.
*/
#charter-experience {
  position: relative;
  overflow: hidden;
}

/* Reflection detail shot — even more subdued than the shipyard.
   Water reflections at near-zero opacity read as pure surface texture. */
#charter-experience .svcs-depth__bg-img {
  object-position: center 60%;
  opacity: 0.042;
  filter: grayscale(100%) contrast(0.72) brightness(0.90);
}


/* ─── Charter split sections — structural ───────────────────────── */
#charter-itineraries,
#charter-crew {
  padding-block: var(--rhythm);
}


/* ─── Destinations — editorial list ─────────────────────────────── */

/*
  Route-guide format. Each destination is a two-column row:
  left: region label + name | right: prose description
  Separated by hairline rules. No images, no icons, no cards.
  The restraint is deliberate — this is a working route note,
  not a tourism feature.
*/
.charter-dest__header {
  margin-bottom: clamp(52px, 7vw, 88px);
}

.charter-dest__headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 300;
  line-height: 1.10;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin-top: var(--space-m);
  margin-bottom: var(--space-l);
}

.charter-dest__headline em {
  font-style: italic;
  color: var(--c-accent-deep);
}

/* Intro prose — sits between headline and the destination list */
.charter-dest__intro {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: var(--c-ink-faint);
  max-width: 62ch;
  margin-bottom: clamp(52px, 7vw, 88px);
}

.charter-dest__list {
  display: flex;
  flex-direction: column;
}

.charter-dest__item {
  display: grid;
  /* Name column fixed at 280px; description takes the rest */
  grid-template-columns: clamp(200px, 24%, 280px) 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(28px, 3.5vw, 48px);
  border-top: 1px solid var(--c-rule);
  align-items: baseline;
  transition: border-color var(--t3) ease;
}

.charter-dest__item:last-child {
  border-bottom: 1px solid var(--c-rule);
}

.charter-dest__item:hover {
  border-top-color: rgba(196, 160, 106, 0.18);
}

.charter-dest__item:last-child:hover {
  border-bottom-color: rgba(196, 160, 106, 0.18);
}

.charter-dest__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Geographic category — above the destination name */
.charter-dest__region {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.60;
}

.charter-dest__item:hover .charter-dest__region {
  opacity: 1;
}

.charter-dest__name {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 25px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.006em;
  color: var(--ink-900);
}

.charter-dest__body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: var(--c-ink-faint);
}


/* ─── Charter Page Responsive — Tablet (≤ 1100px) ───────────────── */

@media (max-width: 1100px) {

  /* Destinations — name column narrows */
  .charter-dest__item {
    grid-template-columns: clamp(160px, 22%, 220px) 1fr;
    gap: clamp(20px, 3vw, 40px);
  }

}


/* ─── Charter Page Responsive — Mobile (≤ 720px) ────────────────── */

@media (max-width: 720px) {

  /* Destinations — stack on mobile */
  .charter-dest__item {
    grid-template-columns: 1fr;
    gap: var(--space-s);
    padding-block: clamp(24px, 5.5vw, 36px);
  }

  .charter-dest__name {
    font-size: clamp(18px, 5vw, 24px);
  }

  .charter-dest__headline {
    font-size: clamp(28px, 7.5vw, 44px);
  }

}


/* ================================================================
   §30  FLEET PAGE
   Editorial vessel panels. Not cards. Not a grid. Each vessel
   gets a full split-layout spread with editorial photography,
   a large serif name, a restrained spec list, and a single CTA.
   The fourth vessel is purely typographic — no image, by design.
   ================================================================ */

/* ─── Fleet introduction ────────────────────────────────────────── */

#fleet-intro {
  padding-bottom: 0;
}

.fleet-intro__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(52px, 8vw, 140px);
  align-items: start;
}

.fleet-intro__headline {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--ink-900);
  margin-top: var(--space-m);
}

.fleet-intro__headline em {
  font-style: italic;
  color: var(--c-accent-deep);
}

.fleet-intro__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding-top: clamp(4px, 0.5vw, 12px); /* optical alignment with headline */
}

.fleet-intro__body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: var(--c-ink-faint);
  max-width: 56ch;
}


/* ─── Fleet vessels ─────────────────────────────────────────────── */

/*
  Each vessel is a full-width editorial spread with generous
  vertical breathing room. Not a card — a considered presentation.
  The separator between vessels is structural, not decorative.
*/
.fleet-vessel {
  padding-block: var(--rhythm);
}

/* Interior separator — thin gold rule between vessels */
.fleet-vessel__sep {
  height: 1px;
  background: var(--c-rule);
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The split grid — image takes 55% of width */
.fleet-vessel__layout {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin-inline: auto;
  align-items: stretch;
  min-height: clamp(560px, 64vw, 780px);
}

/* Reverse layout — content left, image right */
.fleet-vessel__layout--reverse {
  grid-template-columns: 1fr 55%;
}

/* Image panel */
.fleet-vessel__media {
  position: relative;
  overflow: hidden;
}

.fleet-vessel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.04);
  transition: transform var(--t6) var(--glide);
  will-change: auto;
}

/* Reflection image — favour the water level */
.fleet-vessel__image--reflection {
  object-position: center 55%;
}

.fleet-vessel__media:hover .fleet-vessel__image {
  transform: scale(1.01);
}

/* Subtle gradient overlay on image — doesn't fight the photograph */
.fleet-vessel__media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(7, 8, 10, 0.08) 0%,
      transparent 35%
    ),
    linear-gradient(to top,
      rgba(7, 8, 10, 0.24) 0%,
      transparent 28%
    );
  pointer-events: none;
}

/* Content panel */
.fleet-vessel__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 6vw, 88px) clamp(44px, 5.5vw, 80px);
  background: var(--c-canvas);
  padding-left: clamp(44px, 5.5vw, 80px);
}

/* Right-side content (reversed vessel) */
.fleet-vessel__content--right {
  padding-left: var(--gutter);
  padding-right: clamp(44px, 5.5vw, 80px);
}

.fleet-vessel__header {
  margin-bottom: var(--space-l);
}

/* Availability tag — sits above the vessel name */
.fleet-vessel__status {
  display: inline-block;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: clamp(14px, 1.5vw, 20px);
  border: 1px solid transparent;
}

.fleet-vessel__status--charter {
  color: var(--c-accent);
  border-color: rgba(196, 160, 106, 0.28);
  background: rgba(196, 160, 106, 0.06);
}

.fleet-vessel__status--management {
  color: var(--ink-400);
  border-color: rgba(99, 101, 103, 0.22);
  background: rgba(99, 101, 103, 0.04);
}

/* Vessel type — small sans above the name */
.fleet-vessel__type {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-ghost);
  margin-bottom: clamp(10px, 1vw, 16px);
}

/*
  The vessel name is the most important typographic element.
  It should feel like the name of a private collection —
  confident, unhurried, commanding.
*/
.fleet-vessel__name {
  font-family: var(--serif);
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.020em;
  color: var(--ink-950);
}

/* Spec list — minimal definition-style pairs */
.fleet-vessel__specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  /* Single gap — spec items are close together. Space creates
     the impression of a menu; proximity creates a specification. */
  gap: 0;
  margin-bottom: var(--space-l);
  border-top: 1px solid var(--c-rule);
}

.fleet-vessel__spec {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2vw, 24px);
  padding-block: clamp(10px, 1.2vw, 14px);
  border-bottom: 1px solid var(--c-rule);
}

.fleet-vessel__spec-label {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-ghost);
  /* Fixed width — aligns values in a quiet column */
  min-width: clamp(56px, 8%, 80px);
  flex-shrink: 0;
}

.fleet-vessel__spec-value {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 300;
  color: var(--c-ink);
}

/* Editorial vessel description — 1-2 paragraphs max */
.fleet-vessel__desc {
  margin-bottom: var(--space-l);
}

.fleet-vessel__desc p {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: var(--c-ink-faint);
  max-width: 52ch;
}


/* ─── Private vessel — fourth entry ─────────────────────────────── */

/*
  No image. No split. A single centered editorial statement.
  The discretion is the entire point. Dark canvas — the darkness
  signals this vessel lives at a different level of privacy.
*/
.fleet-vessel--private {
  background: var(--c-canvas-black);
  padding-block: var(--rhythm);
}

.fleet-vessel__private-inner {
  max-width: 720px;
}

.fleet-vessel__private-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: var(--space-l);
}

/* Vessel type text in private entry — light on dark */
.fleet-vessel--private .fleet-vessel__type {
  color: rgba(255, 255, 255, 0.30);
}

.fleet-vessel__private-heading {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  margin-bottom: var(--space-l);
}

.fleet-vessel__private-heading em {
  font-style: italic;
  color: var(--c-accent);
}

.fleet-vessel__private-body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: rgba(255, 255, 255, 0.44);
  max-width: 56ch;
  margin-bottom: var(--space-xl);
}

/* Outline button — dark-canvas context (private vessel section) */
.fleet-vessel__private .btn--outline {
  color: rgba(249, 246, 241, 0.82);
  border-color: rgba(255, 255, 255, 0.20);
}

.fleet-vessel__private .btn--outline::before {
  background: rgba(255, 255, 255, 0.08);
}

.fleet-vessel__private .btn--outline:hover {
  color: var(--ink-0);
  border-color: rgba(255, 255, 255, 0.34);
}


/* ─── Owner inquiry section ─────────────────────────────────────── */

.fleet-owner__layout {
  display: grid;
  grid-template-columns: 1fr 1px clamp(200px, 28%, 340px);
  gap: clamp(52px, 7vw, 108px);
  align-items: start;
}

.fleet-owner__headline {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  margin-block: var(--space-m) var(--space-l);
}

.fleet-owner__body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: var(--c-ink-faint);
  max-width: 52ch;
  margin-bottom: var(--space-l);
}

/* Vertical hairline rule between content and stats */
.fleet-owner__rule {
  width: 1px;
  background: var(--c-rule-cream);
  align-self: stretch;
}

.fleet-owner__stat-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding-top: 8px;
}

.fleet-owner__stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fleet-owner__stat-num {
  font-family: var(--serif);
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}

.fleet-owner__stat-label {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  line-height: 1.64;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}


/* ─── Fleet Page Responsive — Tablet (≤ 1100px) ─────────────────── */

@media (max-width: 1100px) {

  /* Introduction — stack */
  .fleet-intro__layout {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .fleet-intro__body { max-width: 64ch; }

  /* Vessel panels — stack vertically */
  .fleet-vessel__layout,
  .fleet-vessel__layout--reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .fleet-vessel__media {
    min-height: clamp(360px, 56vw, 560px);
  }
  /* Image always appears first on stack */
  .fleet-vessel__layout--reverse .fleet-vessel__media {
    order: -1;
  }
  .fleet-vessel__content,
  .fleet-vessel__content--right {
    padding: clamp(44px, 6vw, 72px) var(--gutter);
  }
  .fleet-vessel__desc p { max-width: 64ch; }

  /* Owner section — stack */
  .fleet-owner__layout {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .fleet-owner__rule { display: none; }
  .fleet-owner__stat-col {
    flex-direction: row;
    gap: clamp(40px, 8vw, 80px);
    padding-top: 0;
    border-top: 1px solid var(--c-rule-cream);
    padding-top: var(--space-l);
  }

}


/* ─── Fleet Page Responsive — Mobile (≤ 720px) ──────────────────── */

@media (max-width: 720px) {

  /* Introduction */
  .fleet-intro__headline {
    font-size: clamp(26px, 7vw, 40px);
  }

  /* Vessel media */
  .fleet-vessel__media { min-height: 68vw; }

  /* Vessel name — scale down */
  .fleet-vessel__name {
    font-size: clamp(34px, 9vw, 52px);
  }

  /* Private vessel heading */
  .fleet-vessel__private-heading {
    font-size: clamp(32px, 8.5vw, 52px);
  }
  .fleet-vessel__private-body { max-width: 100%; }

  /* Spec list — allow values to wrap */
  .fleet-vessel__spec {
    flex-wrap: wrap;
    gap: 4px;
  }
  .fleet-vessel__spec-label { min-width: 100%; }

  /* Owner stats — stack on small mobile */
  .fleet-owner__stat-col {
    flex-direction: column;
    gap: var(--space-m);
  }
  .fleet-owner__headline {
    font-size: clamp(22px, 6.5vw, 36px);
  }

}


/* ================================================================
   §31  CONTACT PAGE
   The entrance to a discreet private marine office.
   No generic contact language. No institutional forms.
   Architecture: private / quiet / confidential / personal.
   ================================================================ */


/* ─── Contact Hero ───────────────────────────────────────────────── */

/*
  Shorter than standard inner-page heroes — we move quickly
  toward the form. The image ghosted at low opacity: the page
  begins in a state of restraint before a word is spoken.
*/
#contact-hero {
  position: relative;
  min-height: clamp(520px, 68vh, 800px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-canvas-black);
}

.contact-hero__media {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  will-change: transform;
}

.contact-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Reflections image — level at the waterline */
  object-position: center 50%;
  /* Ghost — the visual language of discretion */
  opacity: 0.32;
  filter: grayscale(18%) brightness(0.78);
}

.contact-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Bottom lift — type legibility */
    linear-gradient(to top,
      rgba(7, 8, 10, 0.92) 0%,
      rgba(7, 8, 10, 0.52) 30%,
      rgba(7, 8, 10, 0.20) 60%,
      rgba(7, 8, 10, 0.06) 100%
    ),
    /* Top vignette — frames the cell */
    linear-gradient(to bottom,
      rgba(7, 8, 10, 0.24) 0%,
      transparent 32%
    );
  pointer-events: none;
}

.contact-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(72px, 9vw, 128px);
  padding-top: clamp(140px, 18vw, 220px);
}

.contact-hero__eyebrow {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.78;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.contact-hero__headline {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.022em;
  color: var(--ink-0);
  margin-bottom: clamp(24px, 3vw, 40px);
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-wrap: balance;
}

.contact-hero__headline em {
  font-style: italic;
  color: var(--c-accent);
}

.contact-hero__sub {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.76;
  color: rgba(255, 255, 255, 0.44);
  max-width: 48ch;
}


/* ─── Contact Philosophy — §02 ───────────────────────────────────── */
/*
  Reuses .about-lede / .about-lede__statement —
  the editorial centered italic prose style is consistent
  across About and Contact: both pages are about relationship.
*/


/* ─── Contact Form Split — §03 ──────────────────────────────────── */

/*
  Two-column editorial split.
  Left: context, headline, three short operational notes.
  Right: the form itself — lean, architectural, unhurried.
  The left column earns the right to ask for information.
*/
.contact-split__layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(52px, 8vw, 120px);
  align-items: start;
  max-width: var(--max-w);
  margin-inline: auto;
}

.contact-split__eyebrow {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.68;
  margin-bottom: clamp(18px, 2vw, 26px);
}

.contact-split__headline {
  font-family: var(--serif);
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin-bottom: clamp(40px, 5.5vw, 72px);
}

.contact-split__headline em {
  font-style: italic;
  color: var(--c-accent-deep);
}

/* Three quiet notes — operational facts, not reassurances */
.contact-split__notes {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-rule);
}

.contact-split__note {
  display: grid;
  grid-template-columns: clamp(100px, 22%, 140px) 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--c-rule);
  align-items: baseline;
}

.contact-split__note-label {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-ink-ghost);
}

.contact-split__note-body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.66;
  color: var(--c-ink-faint);
}


/* ─── Form ───────────────────────────────────────────────────────── */

/*
  Bottom-border-only fields — architectural. The field boundary
  is a single hairline; the surrounding canvas does the rest.
  Focus shifts the border from ink to gold — the one moment
  of warmth in an otherwise restrained interface.
*/
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-form__row {
  width: 100%;
}

.contact-form__field {
  position: relative;
  padding-block: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--c-rule);
  transition: border-color var(--t3) ease;
}

.contact-form__field:focus-within {
  border-bottom-color: var(--c-accent);
}

/* Floating label — sits above the input always; the field is always visible */
.contact-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-ghost);
  margin-bottom: 10px;
  transition: color var(--t3) ease;
}

.contact-form__field:focus-within .contact-form__label {
  color: var(--c-accent);
  opacity: 0.88;
}

.contact-form__optional {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--c-ink-ghost);
  opacity: 0.58;
  font-style: normal;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-800);
  padding: 0;
  resize: none;
  /* Prevent browser decoration */
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--ink-300);
  opacity: 1;
}

/* Select wrapper — relative position for custom arrow */
.contact-form__select-wrap {
  position: relative;
}

.contact-form__select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--ink-800);
  padding: 0;
  padding-right: 24px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__select:invalid,
.contact-form__select option[value=""] {
  color: var(--ink-300);
}

/* Custom arrow — replaces browser chrome */
.contact-form__select-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  pointer-events: none;
}

.contact-form__select-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--c-ink-ghost);
  transition: border-top-color var(--t3) ease;
}

.contact-form__field:focus-within .contact-form__select-arrow::before {
  border-top-color: var(--c-accent);
}

.contact-form__textarea {
  min-height: clamp(88px, 10vw, 120px);
  padding-top: 2px;
}

/* Footer: privacy note + submit button */
.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  padding-top: clamp(28px, 3.5vw, 44px);
  flex-wrap: wrap;
}

.contact-form__privacy {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  line-height: 1.68;
  color: var(--c-ink-ghost);
  max-width: 38ch;
}

/* Dark button — black on the light canvas submit action */
.btn--dark {
  background: var(--ink-900);
  color: var(--ink-0);
  border-color: var(--ink-900);
}

.btn--dark::before {
  background: var(--ink-700);
}

.btn--dark:hover {
  color: var(--ink-0);
  border-color: var(--ink-800);
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.contact-form__submit-arrow {
  font-size: 16px;
  transition: transform var(--t3) var(--glide);
}

.contact-form__submit:hover .contact-form__submit-arrow {
  transform: translateX(4px);
}

/* Success state — shown on submission */
.contact-form__success {
  display: none;
  padding: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 56px);
  text-align: center;
  border: 1px solid var(--c-rule);
}

.contact-form__success[aria-hidden="false"] {
  display: block;
}

.contact-form__success-mark {
  display: block;
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: var(--c-accent);
  margin-bottom: clamp(16px, 2vw, 24px);
  letter-spacing: 0.08em;
}

.contact-form__success-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.016em;
  color: var(--ink-900);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.contact-form__success-body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.80;
  color: var(--c-ink-faint);
  max-width: 44ch;
  margin-inline: auto;
}

/*
  Honeypot — visually & accessibly hidden, but still in the DOM
  for bots that auto-fill every input. Real users never see it;
  if it has a value on submit we drop the request.
*/
.contact-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  Submitting state — disables the button visually and provides
  feedback while the network request is in flight.
*/
.contact-form__submit.is-sending {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

/*
  Error state — mirrors the success block in structure but
  uses the same restrained palette. The retry button is a
  quiet underline link, not a competing CTA.
*/
.contact-form__error {
  display: none;
  padding: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 56px);
  text-align: center;
  border: 1px solid var(--c-rule);
}

.contact-form__error[aria-hidden="false"] {
  display: block;
}

.contact-form__error-mark {
  display: block;
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: var(--c-accent);
  margin-bottom: clamp(16px, 2vw, 24px);
  letter-spacing: 0.08em;
}

.contact-form__error-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.016em;
  color: var(--ink-900);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.contact-form__error-body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.80;
  color: var(--c-ink-faint);
  max-width: 44ch;
  margin: 0 auto clamp(24px, 3vw, 36px);
}

.contact-form__error-retry {
  appearance: none;
  background: none;
  border: none;
  padding: 0 0 2px;
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-accent);
  cursor: pointer;
  transition: color var(--t2) ease, border-color var(--t2) ease;
}

.contact-form__error-retry:hover {
  color: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
}

.contact-form__error-retry:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}


/* ─── Inquiry Process — §04 ──────────────────────────────────────── */

/*
  Cream canvas — a gentle pause after the form.
  Three steps that explain what happens after submission.
  No icons, no arrows. Just numbered editorial prose.
*/
.contact-process {
  background: var(--c-canvas-cream);
}

.contact-process__layout {
  display: grid;
  grid-template-columns: clamp(200px, 26%, 340px) 1fr;
  gap: clamp(52px, 8vw, 120px);
  max-width: var(--max-w);
  margin-inline: auto;
  align-items: start;
}

.contact-process__headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 300;
  line-height: 1.10;
  letter-spacing: -0.016em;
  color: var(--ink-900);
  margin-top: var(--space-m);
}

.contact-process__headline em {
  font-style: italic;
  color: var(--c-accent-deep);
}

.contact-process__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.contact-process__step {
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--c-rule-cream);
}

.contact-process__step-num {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  opacity: 0.72;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.contact-process__step-title {
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.006em;
  color: var(--ink-900);
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

.contact-process__step-body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.82;
  color: var(--c-ink-faint);
}


/* ─── South Florida Presence — §05 ──────────────────────────────── */

/*
  Dark canvas with ghost overhead aerial image.
  The ghost image establishes place without being a postcard.
  Two-column split: editorial body left, presence detail right.
*/
.contact-location {
  background: var(--c-canvas-black);
  position: relative;
  overflow: hidden;
}

.contact-location__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.contact-location__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.048;
  filter: grayscale(100%) contrast(0.76) brightness(0.84);
}

.contact-location__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr clamp(220px, 28%, 360px);
  gap: clamp(52px, 8vw, 120px);
  align-items: start;
}

.contact-location__eyebrow {
  color: var(--c-accent);
  opacity: 0.68;
}

.contact-location__headline {
  font-family: var(--serif);
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  margin-top: var(--space-m);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.contact-location__headline em {
  font-style: italic;
  color: var(--c-accent);
}

.contact-location__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.contact-location__body p {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.86;
  color: rgba(255, 255, 255, 0.44);
  max-width: 58ch;
}

/* Presence details — right column, stacked pairs */
.contact-location__detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: clamp(8px, 1vw, 20px);
  border-top: 1px solid var(--c-rule-dark);
}

.contact-location__presence {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--c-rule-dark);
}

.contact-location__presence-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.56;
}

.contact-location__presence-value {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.58);
}

/* Social links inside the location detail — inherit parent tone */
.contact-location__social-link {
  color: rgba(255, 255, 255, 0.58);
  transition: color var(--t3) ease;
}
.contact-location__social-link:hover {
  color: var(--c-accent);
}


/* ─── Communication Expectations — §06 ──────────────────────────── */

/*
  Light canvas. Three editorial columns with top-rule separators.
  Numbered 01–03. The format echoes About Operations — a quiet
  system that runs consistently across all dark editorial sections.
  But here on light canvas, a warmer, less severe version.
*/
.contact-expectations {
  background: var(--c-canvas);
}

.contact-expect__header {
  margin-bottom: clamp(56px, 7.5vw, 100px);
  max-width: var(--max-w);
  margin-inline: auto;
}

.contact-expect__headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 66px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin-top: var(--space-m);
}

.contact-expect__headline em {
  font-style: italic;
  color: var(--c-accent-deep);
}

.contact-expect__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 72px);
  max-width: var(--max-w);
  margin-inline: auto;
}

.contact-expect__col {
  padding-top: clamp(24px, 2.5vw, 36px);
  border-top: 1px solid var(--c-rule);
  transition: border-color var(--t3) ease;
}

.contact-expect__col:hover {
  border-top-color: rgba(196, 160, 106, 0.22);
}

.contact-expect__col-num {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.62;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.contact-expect__col-title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.006em;
  color: var(--ink-900);
  margin-bottom: clamp(12px, 1.4vw, 20px);
}

.contact-expect__col-body {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.84;
  color: var(--c-ink-faint);
}


/* ─── Closing Statement — §07 ────────────────────────────────────── */

/*
  Dark canvas. A single centered blockquote — no CTA, no headline.
  The thin gold rule above the quote anchors it on the page.
  The cite attribution grounds it in place.
*/
.contact-close {
  background: var(--ink-950);
}

.contact-close__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

/* Short gold hairline above the quote — not a divider, a breath */
.contact-close__rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--c-accent);
  opacity: 0.44;
  margin-inline: auto;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.contact-close__quote p {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.52;
  color: rgba(249, 246, 241, 0.80);
  letter-spacing: -0.008em;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  text-wrap: balance;
}

.contact-close__quote cite {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.72;
  font-style: normal;
}

.contact-close__quote cite::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--c-accent);
  opacity: 0.6;
  flex-shrink: 0;
}


/* Invalid field state — subtle red-shift on the border only */
.contact-form__field.is-invalid {
  border-bottom-color: rgba(180, 60, 60, 0.44);
}

.contact-form__field.is-invalid .contact-form__label {
  color: rgba(180, 60, 60, 0.68);
}


/* ─── Contact Page Responsive — Tablet (≤ 1100px) ───────────────── */

@media (max-width: 1100px) {

  /* Hero */
  .contact-hero__headline {
    font-size: clamp(44px, 9vw, 80px);
  }

  /* Form split — stack */
  .contact-split__layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .contact-split__headline {
    font-size: clamp(30px, 7vw, 52px);
  }

  /* Process — stack header above 3 cols */
  .contact-process__layout {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .contact-process__steps {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Location — stack */
  .contact-location__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .contact-location__body p { max-width: 100%; }
  .contact-location__detail {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--c-rule-dark);
  }
  .contact-location__presence {
    flex: 1 1 200px;
    border-bottom: none;
    border-right: 1px solid var(--c-rule-dark);
    padding-right: clamp(20px, 3vw, 40px);
  }
  .contact-location__presence:last-child {
    border-right: none;
  }

  /* Expectations — 2-col */
  .contact-expect__cols {
    grid-template-columns: 1fr 1fr;
  }
  .contact-expect__cols .contact-expect__col:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
  }

}


/* ─── Contact Page Responsive — Mobile (≤ 720px) ────────────────── */

@media (max-width: 720px) {

  /* Hero */
  #contact-hero {
    min-height: clamp(420px, 80vw, 620px);
  }
  .contact-hero__headline {
    font-size: clamp(40px, 12vw, 64px);
    line-height: 0.94;
  }

  /* Notes — single column */
  .contact-split__note {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Form footer — stack */
  .contact-form__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
  }
  .contact-form__privacy { max-width: 100%; }

  /* Process steps — single column */
  .contact-process__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-process__step {
    padding-block: clamp(20px, 5vw, 32px);
  }

  /* Location detail — stack */
  .contact-location__detail {
    flex-direction: column;
  }
  .contact-location__presence {
    flex: unset;
    border-right: none;
    border-bottom: 1px solid var(--c-rule-dark);
    padding-right: 0;
  }
  .contact-location__headline {
    font-size: clamp(30px, 8.5vw, 52px);
  }

  /* Expectations — single column */
  .contact-expect__cols {
    grid-template-columns: 1fr;
  }
  .contact-expect__cols .contact-expect__col:last-child {
    grid-column: auto;
    max-width: 100%;
  }
  .contact-expect__headline {
    font-size: clamp(28px, 8vw, 44px);
  }

  /*
    iOS auto-zoom prevention — browsers auto-zoom when an input
    has font-size < 16px. Force 16px on all form controls at mobile
    so the viewport never scales unexpectedly on field focus.
  */
  .contact-form__input,
  .contact-form__textarea,
  .contact-form__select {
    font-size: 16px;
  }

}


/* ================================================================
   §25  LEGAL PAGES  (Privacy Policy, Terms of Use)
   Scoped typography for long-form prose. Reuses the existing
   .contact-hero shell for the page header and the standard
   .section / .container rhythm for the body. Single column,
   constrained measure, no decorative elements.
   ================================================================ */

/*
  Legal page header — same dark canvas as the contact hero,
  but without an image. Text-only, restrained, properly tall
  enough to register but shorter than full inner-page heroes.
*/
#legal-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-canvas-black);
}
#legal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 100%,
      rgba(196, 160, 106, 0.06) 0%,
      transparent 55%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.02) 0%,
      transparent 40%);
  pointer-events: none;
}
#legal-hero .contact-hero__content {
  position: relative;
  z-index: 2;
}
#legal-hero .contact-hero__headline {
  font-size: clamp(48px, 6.5vw, 96px);
}

.legal-page {
  max-width: 720px;
  margin-inline: auto;
}
.legal-page__meta {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 48px;
}
.legal-page__intro {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.5;
  color: var(--c-ink);
  margin-bottom: 64px;
  letter-spacing: 0.01em;
}
.legal-page h2 {
  font-family: var(--serif);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-ink);
  margin-top: 72px;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}
.legal-page h2:first-of-type {
  margin-top: 0;
}
.legal-page h3 {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-top: 36px;
  margin-bottom: 12px;
}
.legal-page p {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-ink);
  margin-bottom: 18px;
}
.legal-page p:last-child {
  margin-bottom: 0;
}
.legal-page ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 24px;
}
.legal-page li {
  position: relative;
  padding-left: 22px;
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.75;
  color: var(--c-ink);
  margin-bottom: 8px;
}
.legal-page li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--c-accent);
}
.legal-page a {
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 1px;
  transition: color var(--t2) ease, border-color var(--t2) ease;
}
.legal-page a:hover {
  color: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
}
.legal-page__rule {
  width: 56px;
  height: 1px;
  background: var(--c-accent);
  opacity: 0.6;
  margin: 72px 0;
}
.legal-page__disclaimer {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 300;
  line-height: 1.7;
  color: var(--c-ink-faint);
  font-style: italic;
  padding: 24px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 64px;
}

@media (max-width: 640px) {
  .legal-page__intro {
    font-size: var(--step-1);
    margin-bottom: 48px;
  }
  .legal-page h2 {
    margin-top: 56px;
  }
  .legal-page__rule {
    margin: 56px 0;
  }
}


/* ================================================================
   §26  EDITORIAL ENHANCEMENTS  (homepage photography integration)
   Cinematic slideshow, layered intro, services bands, charter
   frames, why-pmg texture, gallery rebuild, CTA shimmer.
   Additive only — does not change the established design system.
   ================================================================ */


/* ─── Hero slideshow ─────────────────────────────────────────────
   Three slides crossfade across a 36s cycle (≈12s visible per slide,
   2s overlap). Subtle Ken Burns inward zoom on each img provides
   cinematic motion. The wrapping .hero__media still owns the
   parallax oversize box so slides match the existing crop. */

.hero__media--slideshow .hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroSlideFade 36s ease-in-out infinite;
  /* GPU hint — keep layers compositor-only */
  will-change: opacity;
}

.hero__media--slideshow .hero__slide--1 { animation-delay: 0s; }
.hero__media--slideshow .hero__slide--2 { animation-delay: 12s; }
.hero__media--slideshow .hero__slide--3 { animation-delay: 24s; }

.hero__media--slideshow .hero__slide .hero__image {
  /* Override .hero__image base — slides own positioning of their img */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  animation: heroKenBurns 36s ease-in-out infinite;
  will-change: transform;
}

.hero__media--slideshow .hero__slide--1 .hero__image { animation-delay: 0s; }
.hero__media--slideshow .hero__slide--2 .hero__image { animation-delay: 12s; }
.hero__media--slideshow .hero__slide--3 .hero__image { animation-delay: 24s; }

@keyframes heroSlideFade {
  0%, 100% { opacity: 0; }
  5.5%, 33.3% { opacity: 1; }
  38.8% { opacity: 0; }
}

@keyframes heroKenBurns {
  0%   { transform: scale(1.06); }
  38.8%{ transform: scale(1.00); }
  100% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media--slideshow .hero__slide { opacity: 0; animation: none; }
  .hero__media--slideshow .hero__slide--1 { opacity: 1; }
  .hero__media--slideshow .hero__slide .hero__image { animation: none; transform: none; }
}


/* ─── Intro layered composition ──────────────────────────────────
   Dominant aerial + a smaller offset frame that overlaps the
   bottom-right corner. Conveys "editorial spread" without
   adding a new section. Mobile: stacks back to a single image. */

.intro__image-wrapper--layered {
  position: relative;
}

.intro__image-secondary {
  position: absolute;
  right: -2%;
  bottom: -8%;
  width: clamp(180px, 28%, 360px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(7, 8, 10, 0.45),
              0 2px 8px rgba(7, 8, 10, 0.15);
  z-index: 2;
  /* Subtle hover lift on desktop only */
  transition: transform var(--t3) var(--emerge), box-shadow var(--t3) var(--emerge);
}

.intro__image-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The secondary frame gets its own gentle zoom on hover */
  transition: transform 1.2s var(--emerge);
}

.intro__image-wrapper--layered:hover .intro__image-secondary {
  transform: translateY(-4px);
}
.intro__image-wrapper--layered:hover .intro__image-secondary img {
  transform: scale(1.04);
}


/* ─── Services: cinematic horizontal bands ───────────────────────
   Slim image strips placed between service rows in the listing.
   ~clamp(120-180px) tall, full-bleed within the .services__list,
   with a near-black gradient overlay so they read as atmosphere,
   not as content rows. Subtle parallax driven by JS scrollTrigger. */

.services__band {
  position: relative;
  height: clamp(120px, 14vw, 200px);
  margin: clamp(28px, 4vw, 56px) 0;
  overflow: hidden;
  /* Hairline rules above and below to align with the editorial register */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.services__band-img {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  opacity: 0.72;
  filter: grayscale(8%) brightness(0.86);
  /* Slight default offset — JS adds parallax on top */
  will-change: transform;
}

.services__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(7, 8, 10, 0.55) 0%,
      rgba(7, 8, 10, 0.32) 50%,
      rgba(7, 8, 10, 0.55) 100%
    );
  pointer-events: none;
}


/* ─── Charter: supporting editorial frames ───────────────────────
   Two small captioned tiles beneath the charter features —
   one luxury interior, one adventure moment. They live inside
   .charter__content and stack on mobile. */

.charter__frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(32px, 4vw, 56px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.charter__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.charter__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--emerge);
}

.charter__frame:hover img { transform: scale(1.035); }

.charter__frame-cap {
  position: absolute;
  left: clamp(12px, 1.4vw, 18px);
  bottom: clamp(12px, 1.4vw, 18px);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}


/* ─── Why PMG: classic-wheel texture background ──────────────────
   A very low-opacity background layer behind #why-pmg.
   Reads as warmth and material, never competes with copy. */

#why-pmg { position: relative; isolation: isolate; }

.why__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.why__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.06;
  filter: grayscale(35%) contrast(1.05);
  mix-blend-mode: multiply;
}

.why__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(232, 228, 219, 0.55) 0%,
    rgba(232, 228, 219, 0.20) 50%,
    rgba(232, 228, 219, 0.65) 100%);
}


/* ─── Gallery rebuild: 7-cell editorial spread ───────────────────
   One dominant feature image + six supporting cells. Mixes
   aerial, detail, engineering, lifestyle, and interior. Uses a
   12-column grid with explicit row spans for editorial rhythm. */

.gallery__grid--editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(6px, 0.8vw, 12px);
  padding: 0 clamp(16px, 3vw, 56px);
}

.gallery__cell--feature { grid-column: span 12; aspect-ratio: 21 / 9; }
.gallery__cell--g1 { grid-column: span 7; aspect-ratio: 4 / 3; }
.gallery__cell--g2 { grid-column: span 5; aspect-ratio: 4 / 3; }
.gallery__cell--g3 { grid-column: span 4; aspect-ratio: 3 / 4; }
.gallery__cell--g4 { grid-column: span 4; aspect-ratio: 3 / 4; }
.gallery__cell--g5 { grid-column: span 4; aspect-ratio: 3 / 4; }
.gallery__cell--g6 { grid-column: span 12; aspect-ratio: 21 / 8; }

@media (max-width: 880px) {
  .gallery__grid--editorial {
    grid-template-columns: 1fr;
    gap: clamp(4px, 0.6vw, 8px);
    padding: 0 16px;
  }
  .gallery__grid--editorial > * { grid-column: span 1 !important; }
  .gallery__cell--feature,
  .gallery__cell--g6 { aspect-ratio: 16 / 10; }
  .gallery__cell--g1,
  .gallery__cell--g2,
  .gallery__cell--g3,
  .gallery__cell--g4,
  .gallery__cell--g5 { aspect-ratio: 4 / 3; }
}


/* ─── CTA: cinematic finale ──────────────────────────────────────
   Replaces the static CTA image with a slow inward zoom and a
   gentle horizontal shimmer at very low opacity — evocative of
   light moving across the water at golden hour. */

.cta__media--cinematic { overflow: hidden; }

.cta__media--cinematic .cta__image {
  animation: ctaSoftZoom 28s ease-in-out infinite alternate;
  will-change: transform;
}

.cta__media--cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 70%);
  background-size: 300% 100%;
  animation: ctaShimmer 14s linear infinite;
  mix-blend-mode: screen;
}

/* Stronger overlay to keep type legibility against the warmer image */
.cta__media--cinematic .cta__overlay {
  background:
    linear-gradient(to bottom,
      rgba(7, 8, 10, 0.30) 0%,
      rgba(7, 8, 10, 0.50) 50%,
      rgba(7, 8, 10, 0.82) 100%);
}

@keyframes ctaSoftZoom {
  from { transform: scale(1.00); }
  to   { transform: scale(1.06); }
}

@keyframes ctaShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cta__media--cinematic .cta__image,
  .cta__media--cinematic::after { animation: none; }
}


/* ─── §26 mobile sweep ───────────────────────────────────────────
   Component-specific overrides for narrow viewports. The layered
   intro composition collapses to a single image, charter frames
   stack, services bands shorten, the gallery feature crops less
   aggressively, and the CTA zoom slows. */

@media (max-width: 720px) {

  /* Intro: drop the floating frame on phones — it competes with
     the dominant aerial at narrow widths. Caption keeps its place. */
  .intro__image-secondary { display: none; }

  /* Charter: stack the supporting frames vertically */
  .charter__frames {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
    margin-bottom: 24px;
  }
  .charter__frame { aspect-ratio: 16 / 11; }

  /* Services bands: slimmer to keep the row rhythm tight */
  .services__band {
    height: clamp(96px, 22vw, 140px);
    margin: 18px 0;
  }

  /* Why PMG: lower opacity still, but a touch more saturation
     so the wheel detail reads at smaller sizes */
  .why__bg img { opacity: 0.08; }

  /* CTA: keep the zoom but soften further */
  .cta__media--cinematic .cta__image {
    animation-duration: 36s;
  }
}


/* ================================================================
   END
   Phillips Marine Group — Luxury Design System
   ================================================================ */