/* ==========================================================================
   Yacht'UP — "BRIGHTWORK"
   The palette is lifted off the boats themselves: sailcloth and holystoned
   teak for the grounds, varnished mahogany for the ink, polished bronze for
   the one thing that catches the light, verdigris for aged fittings, and a
   cool stainless grey for the hardware. Airy, classic, and expensive-quiet.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Grounds: sailcloth, sun-bleached teak, weathered deck --------- */
  --paper:          #F5F1E8;   /* sailcloth / cotton canvas */
  --paper-raised:   #EBE3D4;   /* holystoned teak, bleached by a season */
  --paper-sunk:     #DED5C3;   /* weathered deck — image wells */

  /* --- Ink: varnished walnut, not black ----------------------------- */
  --ink:            #1E1913;
  --ink-inverse:    #F3EEE3;   /* bone / bleached canvas on dark */
  --muted:          #6A6156;   /* weathered teak grey — 5.3:1 on sailcloth, 4.6:1 on teak */
  --muted-inverse:  rgba(243, 238, 227, 0.74);   /* 0.64 dropped to 4.39:1 over the photo washes */
  --deep:           #241A14;   /* companionway — dark oiled mahogany */
  --deep-2:         #2E211A;   /* one plank lighter */

  /* --- Metals & fittings -------------------------------------------- */
  --bronze:         #7E5A1C;   /* polished bronze — 5.4:1 on sailcloth, 4.8:1 on teak */
  --bronze-lit:     #C9A157;   /* the glint — light on dark; 4.9:1 over the photo washes */
  --bronze-wash:    #F0E7D3;   /* lacquer bloom */
  --brass:          #B08B4F;   /* fittings — ticks, beacons, corner marks */
  --verdigris:      #38594F;   /* aged bronze / seawater patina */
  --verdigris-lit:  #8FB6A6;
  --steel:          #9AA3A6;   /* stainless — cool hairline glints only */
  --mahogany:       #6B3A28;   /* brightwork, used at low alpha */

  /* --- Rules: warm, never grey -------------------------------------- */
  --line:           rgba(30, 25, 19, 0.13);
  --line-strong:    rgba(30, 25, 19, 0.24);
  --line-brass:     rgba(126, 90, 28, 0.32);
  --line-inverse:   rgba(243, 238, 227, 0.17);

  /* the surface a component is currently sitting on — sections reset it,
     so leader dots and corner ticks can punch out of the right colour */
  --surface:        var(--paper);

  /* Bronze is the interactive accent throughout — verdigris is reserved for
     the drawn linework and the "all clear" states, so the two never compete. */
  --patina:         var(--bronze);
  --patina-light:   var(--bronze-lit);
  --patina-wash:    var(--bronze-wash);

  /* --- Type --------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step-xs:   0.75rem;
  --step-sm:   0.875rem;
  --step-base: 1.0625rem;
  --step-md:   1.1875rem;
  --step-lg:   1.5rem;
  --step-xl:   clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  --step-2xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --step-3xl:  clamp(2.5rem, 1.3rem + 5vw, 5.25rem);

  /* --- Space -------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container: 1280px;
  --measure:   62ch;
  --radius:    2px;

  --hairline:         1px solid var(--line);
  --hairline-inverse: 1px solid var(--line-inverse);

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  200ms;
  --dur-base:  460ms;
  --dur-slow:  900ms;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  -webkit-tap-highlight-color: transparent;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-base);
  font-weight: 350;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The cove stripe — the thin gilded line run along a hull just under the
   sheer. Three pixels of it is all a boat gets, and all this page gets. */
body::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    #74501A 0%, #C39A4E 18%, #EBD3A0 30%, #8A6320 46%,
    #DDBC7C 66%, #74501A 84%, #A17A2E 100%);
}

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

em {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--patina);
}
.on-dark em { color: var(--patina-light); }

::selection { background: var(--patina); color: var(--ink-inverse); }

:focus-visible {
  outline: 2px solid var(--patina);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible { outline-color: var(--patina-light); }

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px)  { .container { padding-inline: var(--space-12); } }
@media (min-width: 1200px) { .container { padding-inline: var(--space-16); } }

.section { padding-block: var(--space-32); }
.section--tight { padding-block: var(--space-20); }
@media (max-width: 767px) {
  .section { padding-block: var(--space-20); }
  .section--tight { padding-block: var(--space-16); }
}

/* Every band declares the surface it paints, so leader dots, corner ticks
   and seam rules can punch out of exactly the right colour. */
.section, .hero, .page-hero, .detail, .marques { --surface: var(--paper); }

.section--raised {
  --surface: var(--paper-raised);
  background: var(--paper-raised);
  position: relative;
}

/* Holystoned-teak grain: plank seams at deck spacing, almost subliminal.
   Two stops only — any more and it stops being a texture and starts
   being a pattern. */
.section--raised::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(107, 58, 40, 0.022) 0 1px,
    transparent 1px 128px
  );
}
.section--raised > * { position: relative; }

.section--ruled  { border-top: var(--hairline); }

.section--deep {
  --surface: var(--deep);
  background: var(--deep);
  color: var(--ink-inverse);
  position: relative;
}

/* Deck seam — the caulked line between two teak planks: one dark, one light.
   Used wherever a band meets a band. */
.seam {
  height: 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid rgba(255, 253, 246, 0.75);
  margin: 0;
}
.on-dark .seam,
.section--deep .seam {
  border-top-color: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(243, 238, 227, 0.12);
}

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-6);
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-6);
  font-size: var(--step-sm);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Editorial furniture — eyebrow, titles, ledes, links
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-6);
}
.on-dark .eyebrow { color: var(--muted-inverse); }

.eyebrow__num {
  font-variant-numeric: tabular-nums;
  color: var(--patina);
}
.on-dark .eyebrow__num { color: var(--patina-light); }

/* A hairline that trails off after the eyebrow text */
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-brass), transparent);
  max-width: 92px;
}
.on-dark .eyebrow::after { background: var(--line-inverse); }
.eyebrow--plain::after { content: none; }

/* the brass tick — signature micro-mark */
.tick {
  display: inline-block;
  width: 6px; height: 6px;
  flex-shrink: 0;
  background: var(--brass);
  transform: rotate(45deg);
}

.section-head { max-width: 720px; margin-bottom: var(--space-16); }
.section-head--wide { max-width: 900px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after { content: none; }

.section-title {
  font-size: var(--step-2xl);
  max-width: 20ch;
}
.section-head--center .section-title { margin-inline: auto; }

.lede {
  margin-top: var(--space-6);
  font-size: var(--step-md);
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  max-width: 54ch;
}
.on-dark .lede { color: var(--muted-inverse); }
.section-head--center .lede { margin-inline: auto; }

.prose p + p { margin-top: var(--space-5); }
.prose p { max-width: var(--measure); }
.prose strong { font-weight: 600; }

/* Text link with a rule that draws itself */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tlink svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease); }
.tlink:hover { color: var(--patina); border-color: var(--patina); }
.tlink:hover svg { transform: translateX(4px); }
.on-dark .tlink { color: var(--ink-inverse); border-color: var(--line-inverse); }
.on-dark .tlink:hover { color: var(--patina-light); border-color: var(--patina-light); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--step-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 246, 226, 0.13);
}
.btn--primary:hover { background: var(--patina); border-color: var(--patina); color: var(--ink-inverse); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.on-dark .btn--primary { background: var(--ink-inverse); color: var(--deep); border-color: var(--ink-inverse); }
.on-dark .btn--primary:hover { background: var(--patina-light); border-color: var(--patina-light); color: var(--deep); }
.on-dark .btn--ghost { color: var(--ink-inverse); border-color: var(--line-inverse); }
.on-dark .btn--ghost:hover { background: rgba(242, 239, 232, 0.1); border-color: var(--ink-inverse); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.btn-row--center { justify-content: center; }

/* ==========================================================================
   Image plates — quiet frames, gently unified tone
   ========================================================================== */

/* Photographs are mounted, not dropped in: a hairline mount, a warm varnish
   grade, and four bronze corner ticks like an instrument bezel. */
.mount {
  position: relative;
  padding: 10px;
}
.mount::before,
.mount::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  border: 0 solid var(--brass);
}
.mount::before {
  top: 0; left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}
.mount::after {
  bottom: 0; right: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.plate {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-sunk);
}
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(30, 25, 19, 0.16);
  pointer-events: none;
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the client's photography spans a decade and several cameras — a light
     varnish grade (warm, desaturated, a touch of teak) pulls it into one book */
  filter: saturate(0.62) contrast(1.05) brightness(1.03) sepia(0.16);
  transition: transform 1.2s var(--ease), filter var(--dur-base) var(--ease);
}
.figure:hover .plate img { filter: saturate(0.78) contrast(1.05) brightness(1.03) sepia(0.1); }

.plate--wide    { aspect-ratio: 3 / 2; }
.plate--cinema  { aspect-ratio: 16 / 9; }
/* the supplied sea photograph is the site's one moment of colour — it gets a
   lighter hand than the workshop archive, which needs the varnish to cohere */
.plate--vivid img { filter: saturate(0.86) contrast(1.02) brightness(1.01) sepia(0.05); }
.figure:hover .plate--vivid img { filter: saturate(0.97) contrast(1.02) brightness(1.01) sepia(0.02); }
.plate--square  { aspect-ratio: 1; }
.plate--portrait{ aspect-ratio: 4 / 5; }

.figure { margin: 0; }
/* the client's bench photography is 200px square at source — never blow it up */
.figure--small { max-width: 220px; }
.figure--small .figure__caption { font-size: 0.6875rem; }
.figure__caption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.on-dark .figure__caption { color: var(--muted-inverse); }
.figure__caption::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--brass);
  flex-shrink: 0;
}

/* ==========================================================================
   Background artwork
   Two kinds. Drawn: naval-architecture line work — a hull profile with the
   propulsion train installed, and a body plan — held far enough back that
   they read as watermark rather than illustration. Photographic: the client's
   own workshop, washed almost to nothing behind the dark bands so those
   bands feel like a place rather than a colour.
   ========================================================================== */

.bg { position: relative; overflow: hidden; }
.bg > * { position: relative; z-index: 1; }

.bg__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* the hull, sitting on the bottom edge of its band as if afloat in it */
.bg__art--hull {
  background-image: url('../img/hull-drivetrain.svg');
  background-position: center bottom 40px;
  background-size: 1520px auto;
  opacity: 0.13;
}
@media (max-width: 899px) {
  .bg__art--hull { background-size: 1100px auto; background-position: 62% bottom; opacity: 0.13; }
}

/* the body plan, tucked into a corner the way it sits on a real drawing sheet */
.bg__art--body {
  background-image: url('../img/body-plan.svg');
  background-position: right -70px top 8%;
  background-size: auto 78%;
  opacity: 0.13;
}
@media (max-width: 899px) {
  .bg__art--body { background-position: right -120px top 4%; background-size: auto 46%; opacity: 0.10; }
}

/* A photograph, washed back until it is atmosphere rather than content.
   NB: this carries a real <img> rather than a background-image fed by a
   custom property — url() inside a custom property resolves against the
   stylesheet, not the document, which silently 404s every path. */
.bg__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.40) sepia(0.52) contrast(1.02) brightness(1.2);
  opacity: 0.12;
}
/* keep the text edge crisp: fade the wash away from the middle of the band */
.bg__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 88% at 50% 52%,
              rgba(36, 26, 20, 0) 0%, rgba(36, 26, 20, 0.75) 100%),
              linear-gradient(180deg, rgba(36, 26, 20, 0.6) 0%,
              rgba(36, 26, 20, 0) 22%, rgba(36, 26, 20, 0) 78%,
              rgba(36, 26, 20, 0.6) 100%);
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="1"] { transition-delay: 90ms; }
[data-reveal="2"] { transition-delay: 180ms; }
[data-reveal="3"] { transition-delay: 270ms; }
[data-reveal="4"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 232, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--line-brass); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-5);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-4); }

.brand__mark { width: 30px; height: 30px; flex-shrink: 0; }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.brand__name .ap { color: var(--patina); }
.brand__sub {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: none; }
@media (min-width: 980px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-10);
  }
  .nav a {
    position: relative;
    font-size: var(--step-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-block: var(--space-2);
  }
  .nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--patina);
    transition: right var(--dur-base) var(--ease);
  }
  .nav a:hover::after,
  .nav a:focus-visible::after { right: 0; }
  .nav a[aria-current="page"] { color: var(--patina); }
  .nav a[aria-current="page"]::after { right: 0; background: var(--line-strong); }
}

.header__actions { display: flex; align-items: center; gap: var(--space-6); }

.header__phone { display: none; }
@media (min-width: 1200px) {
  .header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step-xs);
    letter-spacing: 0.04em;
    color: var(--muted);
    transition: color var(--dur-fast) var(--ease);
  }
  .header__phone:hover { color: var(--patina); }
  .header__phone svg { width: 14px; height: 14px; }
}

.header__cta { display: none; }
@media (min-width: 980px) { .header__cta { display: inline-flex; } }

.nav-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: calc(var(--space-3) * -1);
}
@media (min-width: 980px) { .nav-toggle { display: none; } }
.nav-toggle span {
  position: absolute;
  left: 12px;
  width: 20px; height: 1px;
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle span:nth-child(1) { transform: translateY(-4px); }
.nav-toggle span:nth-child(2) { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

/* --- Mobile drawer --- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: calc(var(--space-24) + var(--space-4)) var(--space-6) var(--space-10);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; }
@media (min-width: 980px) { .drawer { display: none; } }

.drawer a.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--hairline);
  font-family: var(--font-display);
  font-size: var(--step-xl);
  font-weight: 400;
}
.drawer__link .n {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.drawer__link[aria-current="page"] { color: var(--patina); }

.drawer__foot {
  margin-top: auto;
  padding-top: var(--space-10);
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.05em;
  color: var(--muted);
}
.drawer__foot a { color: var(--ink); }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   Hero — type-led, on paper, with drivetrain linework
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-24);
  padding-bottom: var(--space-16);
}

/* --- The sea behind the hero -------------------------------------------
   The hero is the one dark band above the fold. Rather than restyle every
   element by hand, the band simply redefines the palette tokens it sits on,
   and every component inside it inverts on its own. */
.hero.on-dark {
  --ink:          var(--ink-inverse);
  --muted:        var(--muted-inverse);
  --line:         var(--line-inverse);
  --line-strong:  rgba(243, 238, 227, 0.34);
  --line-brass:   rgba(201, 161, 87, 0.44);
  --patina:       var(--bronze-lit);
  --surface:      transparent;
  color: var(--ink-inverse);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  /* graded off the cold navy toward the site's petrol-and-brass world */
  filter: saturate(0.62) contrast(1.06) brightness(0.78) sepia(0.14) hue-rotate(-6deg);
}

/* Two scrims: one across, weighting the copy side, one down, seating the
   band into the page. Warm, so the water reads petrol rather than blue. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(22, 26, 26, 0.90) 0%,
      rgba(22, 26, 26, 0.80) 38%,
      rgba(22, 26, 26, 0.55) 66%,
      rgba(22, 26, 26, 0.46) 100%),
    linear-gradient(180deg,
      rgba(28, 22, 18, 0.55) 0%,
      rgba(28, 22, 18, 0.18) 26%,
      rgba(28, 22, 18, 0.30) 72%,
      rgba(28, 22, 18, 0.72) 100%);
}
@media (max-width: 767px) { .hero { padding-top: var(--space-16); } }

.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.beacon {
  position: relative;
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}
.beacon::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  opacity: 0;
  animation: beacon 3s var(--ease) infinite;
}
@keyframes beacon {
  0%   { opacity: 0.6; transform: scale(0.5); }
  75%  { opacity: 0;   transform: scale(1.9); }
  100% { opacity: 0;   transform: scale(1.9); }
}

.hero__title {
  margin-top: var(--space-8);
  font-size: var(--step-3xl);
  line-height: 1.06;
  letter-spacing: -0.028em;
  max-width: 15ch;
}

.hero__lede {
  margin-top: var(--space-8);
  font-size: var(--step-md);
  font-weight: 300;
  line-height: 1.68;
  color: var(--muted);
  max-width: 50ch;
}

.hero__actions { margin-top: var(--space-10); }

/* the spec ledger sitting on the hero's baseline */
.ledger {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-24);
  border-top: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 253, 246, 0.85);
}
@media (min-width: 900px) { .ledger { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .ledger { margin-top: var(--space-16); } }

.ledger__cell {
  padding: var(--space-6) var(--space-6) var(--space-8) 0;
  border-bottom: var(--hairline);
}
@media (min-width: 900px) {
  .ledger__cell { border-bottom: 0; }
  .ledger__cell + .ledger__cell { border-left: 1px solid var(--line-brass); padding-left: var(--space-6); }
}
.ledger__k {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ledger__v {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ledger__v .u {
  font-family: var(--font-body);
  font-size: var(--step-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-left: 4px;
}

/* --- The engine: a marine V12 rendered live, sitting in the vee of the hero.
   It clears to the paper colour, so it reads as an object photographed on the
   page rather than a window cut into it. Only mounted at 900px and up; below
   that the line drawing does the job on a fraction of the battery. --------- */
.hero__engine {
  position: absolute;
  top: calc(1% + 2cm);       /* dropped 2cm at the client's request */
  left: 58%;                 /* anchored to a column, never overlapping the copy */
  right: 0;                  /* no bleed: the readout must not clip off-screen */
  max-width: 880px;
  height: min(600px, 84%);
  z-index: 1;
  pointer-events: none;
  display: none;
  flex-direction: column;
}
@media (min-width: 900px) { .hero__engine { display: flex; } }

.hero__engine canvas {
  flex: 1 1 auto;
  min-height: 0;
  /* nudged 1cm to port, without moving the readout off the page margin */
  margin-left: -1cm;
  margin-right: 1cm;
}

/* The instrument readout: engine particulars on the left, a live rev counter
   on the right. Same mono/leader language as the spec sheets elsewhere. */
.engine-hud {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  /* bring the readout back in line with the page's content edge */
  padding-right: max(3rem, calc((100vw - 1280px) / 2 + 4rem));
  border-top: 1px solid var(--line-brass);
}
.engine-hud__name {
  font-family: var(--font-display);
  font-size: var(--step-lg);
  line-height: 1;
  letter-spacing: 0.01em;
}
.engine-hud__spec {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 36ch;
}
.engine-hud__hint { display: none; }
@media (pointer: fine) {
  .engine-hud__hint {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--patina);   /* a token, so it flips with the band it sits on */
  }
}

.engine-hud__gauge { flex: 0 0 auto; text-align: right; }
.engine-hud__rpm {
  font-family: var(--font-display);
  font-size: var(--step-xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.engine-hud__rpm em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 7px;
}
.engine-hud__bar {
  position: relative;
  width: 170px;
  height: 2px;
  margin: var(--space-4) 0 0 auto;
  background: var(--line-strong);
}
.engine-hud__bar i {
  position: absolute;
  inset: -1px auto -1px 0;
  width: 0;
  background: var(--brass);
}
.engine-hud__mode {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The hero copy is held inside its own column so the headline can never run
   across the engine — bronze italic over a dark engine block measured 1.9:1. */
@media (min-width: 900px) {
  .hero__eyebrow,
  .hero__lede,
  .hero__actions { max-width: 52%; }
  .hero__title   { max-width: min(15ch, 52%); }
}

.hero__engine canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  cursor: grab;
  /* let a vertical swipe scroll the page; only a horizontal drag orbits */
  touch-action: pan-y;
}
.hero__engine canvas:active { cursor: grabbing; }

/* once the engine is running, retire the drawing it replaced */
.has-engine .blueprint { display: none; }

/* On the dark hero the fallback drawing has to invert too, or the phones and
   the no-WebGL browsers get an empty band. */
.hero.on-dark .bp-line  { stroke: var(--verdigris-lit); opacity: 0.42; }
.hero.on-dark .bp-hair  { stroke: rgba(243, 238, 227, 0.42); }
.hero.on-dark .bp-brass { stroke: var(--bronze-lit); }
.hero.on-dark .bp-fill  { fill: rgba(243, 238, 227, 0.05); }

/* --- Blueprint linework: a coaxial drivetrain, drawn in patina hairlines - */
.blueprint {
  position: absolute;
  top: 4%;
  right: -22%;
  width: min(920px, 100%);
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
}
@media (min-width: 900px)  { .blueprint { right: -12%; top: 0; width: 720px; opacity: 0.85; } }
@media (min-width: 1280px) { .blueprint { right: -4%; width: 800px; } }
@media (max-width: 899px)  { .blueprint { opacity: 0.16; top: 46%; right: -46%; width: 540px; } }

.blueprint svg { width: 100%; height: auto; }
.bp-line   { fill: none; stroke: var(--verdigris); stroke-width: 0.75; opacity: 0.42; }
.bp-hair   { fill: none; stroke: var(--steel); stroke-width: 0.55; opacity: 0.75; }
.bp-brass  { fill: none; stroke: var(--bronze); stroke-width: 1; opacity: 0.85; }
.bp-fill   { fill: var(--mahogany); opacity: 0.045; }
.bp-spin   { transform-origin: 300px 300px; animation: bp-spin 120s linear infinite; }
.bp-spin--rev { animation-direction: reverse; animation-duration: 180s; }
@keyframes bp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bp-spin { animation: none; } }

/* ==========================================================================
   Marque strip — the manufacturers, set as a quiet line of type
   ========================================================================== */

.marques {
  padding-block: var(--space-10);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 253, 246, 0.8),
              inset 0 -1px 0 rgba(255, 253, 246, 0.8);
}
.marques__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-6) var(--space-10);
}
.marques__label {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.marques__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-6) var(--space-10);
}
.marques__list li {
  font-family: var(--font-display);
  font-size: var(--step-md);
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.marques__list li:hover { opacity: 1; color: var(--patina); }

/* ==========================================================================
   Split — the editorial two-column
   ========================================================================== */

.split {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-24);
    align-items: center;
  }
  .split--copy-wide { grid-template-columns: 1.15fr 1fr; }
  .split--media-wide { grid-template-columns: 1fr 1.15fr; }
  .split--flip .split__media { order: -1; }
}

.split__body .lede { max-width: 48ch; }
.split__media { position: relative; }

/* ==========================================================================
   Ledger table — hairline key/value rows (the "spec plate", quieted down)
   ========================================================================== */

/* A yacht's particulars sheet: label left, figure right, leader dots between.
   The dots are one absolutely-positioned rule; the label and value punch out
   of --surface so the line appears to run underneath them. */
.spec {
  border-top: 1px solid var(--line-strong);
}
.spec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  border-bottom: 1px solid var(--line-brass);
}
.on-dark .spec__head { color: var(--bronze-lit); }

.spec__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--hairline);
}
.spec__row::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 1.85em;
  border-top: 1px dotted var(--line-brass);
}
.spec__k,
.spec__v { position: relative; background: var(--surface); }

.spec__k {
  font-size: var(--step-sm);
  color: var(--muted);
  letter-spacing: 0.01em;
  padding-right: var(--space-3);
}
.spec__v {
  font-family: var(--font-mono);
  font-size: var(--step-sm);
  text-align: right;
  color: var(--ink);
  padding-left: var(--space-3);
}
.on-dark .spec { border-top-color: var(--line-inverse); }
.on-dark .spec__head,
.on-dark .spec__row { border-bottom-color: var(--line-inverse); }
.on-dark .spec__k { color: var(--muted-inverse); }
.on-dark .spec__v { color: var(--ink-inverse); }

/* ==========================================================================
   Service index — numbered hairline rows that open on hover
   ========================================================================== */

.index-list { border-top: 1px solid var(--line-strong); }
.on-dark .index-list { border-top-color: var(--line-inverse); }

.index-row { position: relative; border-bottom: var(--hairline); }
.index-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--bronze);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-base) var(--ease);
}
.index-row:hover::before { transform: scaleY(1); }
.on-dark .index-row::before { background: var(--bronze-lit); }
.on-dark .index-row { border-bottom-color: var(--line-inverse); }

.index-row__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding-block: var(--space-8);
  transition: background var(--dur-base) var(--ease), padding-inline var(--dur-base) var(--ease);
}
.index-row__num,
.index-row__title,
.index-row__desc { min-width: 0; }
@media (min-width: 900px) {
  .index-row__link {
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.05fr) 40px;
    gap: var(--space-8);
    align-items: center;
    padding-block: var(--space-10);
  }
  .index-row__link:hover { background: rgba(138, 99, 32, 0.05); padding-inline: var(--space-6); }
  .on-dark .index-row__link:hover { background: rgba(242, 239, 232, 0.045); }
}

.index-row__num {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  color: var(--muted);
  padding-top: 6px;
}
.on-dark .index-row__num { color: var(--muted-inverse); }

.index-row__title {
  font-family: var(--font-display);
  font-size: var(--step-xl);
  font-weight: 400;
  line-height: 1.15;
  transition: color var(--dur-fast) var(--ease);
}
.index-row__link:hover .index-row__title { color: var(--patina); }
.on-dark .index-row__link:hover .index-row__title { color: var(--patina-light); }

.index-row__desc {
  font-size: var(--step-sm);
  font-weight: 300;
  color: var(--muted);
  max-width: 46ch;
  margin-top: var(--space-3);
}
@media (min-width: 900px) { .index-row__desc { margin-top: 0; } }
.on-dark .index-row__desc { color: var(--muted-inverse); }

.index-row__arrow {
  display: none;
  width: 20px; height: 20px;
  color: var(--muted);
  transition: transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}
@media (min-width: 900px) { .index-row__arrow { display: block; } }
.index-row__link:hover .index-row__arrow { transform: translateX(5px); color: var(--patina); }
.on-dark .index-row__link:hover .index-row__arrow { color: var(--patina-light); }

/* ==========================================================================
   Cards — bordered only where it earns its keep
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.note {
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-strong);
}
.on-dark .note { border-top-color: var(--line-inverse); }

.note__num {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  color: var(--patina);
}
.on-dark .note__num { color: var(--patina-light); }

.note__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-lg);
  font-weight: 400;
}
.note__body {
  margin-top: var(--space-3);
  font-size: var(--step-sm);
  font-weight: 300;
  color: var(--muted);
}
.note__body--lead { margin-top: 0; font-size: var(--step-base); max-width: 58ch; }
.on-dark .note__body { color: var(--muted-inverse); }

.note__list {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.note__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--step-sm);
  font-weight: 300;
  color: var(--muted);
}
.note__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  background: var(--brass);
  transform: rotate(45deg);
}
.on-dark .note__list li { color: var(--muted-inverse); }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats {
  display: grid;
  gap: var(--space-10);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-10);
}
@media (min-width: 620px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-12); } }
.on-dark .stats { border-top-color: var(--line-inverse); }

.stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat__n .u { font-size: 0.5em; color: var(--patina); margin-left: 2px; }
.on-dark .stat__n .u { color: var(--patina-light); }
.stat__n::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin-top: var(--space-5);
  background: var(--brass);
}
.stat__l {
  margin-top: var(--space-4);
  font-size: var(--step-sm);
  font-weight: 300;
  color: var(--muted);
  max-width: 26ch;
}
.on-dark .stat__l { color: var(--muted-inverse); }

/* ==========================================================================
   Process — a ruled timeline
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step { padding-top: var(--space-6); border-top: 1px solid var(--line-strong); position: relative; }
.on-dark .step { border-top-color: var(--line-inverse); }
.step::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 28px; height: 2px;
  background: var(--brass);
}
.step__n {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-dark .step__n { color: var(--muted-inverse); }
.step__t {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-lg);
  font-weight: 400;
}
.step__b {
  margin-top: var(--space-3);
  font-size: var(--step-sm);
  font-weight: 300;
  color: var(--muted);
}
.on-dark .step__b { color: var(--muted-inverse); }

/* ==========================================================================
   Pull quote
   ========================================================================== */

.pull {
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: var(--step-2xl);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.pull--center { max-width: 22ch; margin-inline: auto; text-align: center; }
.pull__attr {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-dark .pull__attr { color: var(--muted-inverse); }

/* ==========================================================================
   Detail strip — the small square work photos, shown at native size
   ========================================================================== */

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (min-width: 760px) { .strip { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } }
.strip__item { max-width: 220px; }
.strip__cap {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.on-dark .strip__cap { color: var(--muted-inverse); }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */

.page-hero {
  --surface: var(--paper);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: inset 0 -2px 0 rgba(255, 253, 246, 0.8);
}
@media (max-width: 767px) { .page-hero { padding-block: var(--space-16); } }

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-10);
}
.crumbs a:hover { color: var(--patina); }
.crumbs .sep { opacity: 0.5; }
.crumbs [aria-current] { color: var(--ink); }

.page-hero__title {
  font-size: var(--step-3xl);
  line-height: 1.06;
  letter-spacing: -0.028em;
  max-width: 16ch;
}
.page-hero__lede {
  margin-top: var(--space-8);
  font-size: var(--step-md);
  font-weight: 300;
  color: var(--muted);
  max-width: 56ch;
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--hairline);
}
.jump a {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease);
}
.jump a:hover { color: var(--patina); }

/* ==========================================================================
   Service detail blocks
   ========================================================================== */

.detail { padding-block: var(--space-24); border-bottom: var(--hairline); }
@media (max-width: 767px) { .detail { padding-block: var(--space-16); } }
.detail:last-of-type { border-bottom: 0; }

.detail__title { font-size: var(--step-2xl); max-width: 18ch; }

/* ==========================================================================
   Brand cards
   ========================================================================== */

.brand-card {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 800px) { .brand-card { grid-template-columns: 250px 1fr; gap: var(--space-12); } }

.brand-card__word {
  font-family: var(--font-display);
  font-size: var(--step-xl);
  line-height: 1;
  letter-spacing: 0.01em;
}
.brand-card__status {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--patina);
}
.brand-card__status--muted { color: var(--muted); }

.minor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line-strong);
  border-left: var(--hairline);
}
@media (min-width: 700px)  { .minor-grid--wide { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .minor-grid--wide { grid-template-columns: repeat(4, 1fr); } }

/* on the narrowest phones "Driveline · Gearboxes" can't share a row */
@media (max-width: 479px) { .minor-grid { grid-template-columns: 1fr; } }

.minor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  min-height: 112px;
  padding: var(--space-6);
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}
.minor__n {
  font-family: var(--font-display);
  font-size: var(--step-md);
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.minor__m {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: var(--space-16);
}
@media (min-width: 980px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-24); align-items: start; }
}

.contact-lines { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.contact-line {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-5);
  border-bottom: var(--hairline);
}
@media (max-width: 520px) { .contact-line { grid-template-columns: 1fr; gap: var(--space-1); } }
.contact-line dt {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-line dd { margin: 0; font-size: var(--step-sm); }
.contact-line dd a { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.contact-line dd a:hover { color: var(--patina); border-color: var(--patina); }

.form { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

.field { display: grid; gap: var(--space-2); }
.field > label {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .req { color: var(--patina); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) 0;
  font-size: var(--step-base);
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676D71' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 18px;
  padding-right: var(--space-8);
  cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--patina); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--patina); outline-offset: 4px; }

.field .err {
  font-size: var(--step-xs);
  color: #9A3B2E;
  display: none;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #9A3B2E; }
.field.is-invalid .err { display: block; }

.form__note {
  font-size: var(--step-xs);
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.6;
}

.form__done {
  display: none;
  padding: var(--space-8);
  background: #E7EDE7;
  border-left: 2px solid var(--verdigris);
}
.form__done.is-shown { display: block; }
.form__done h3 { font-size: var(--step-lg); }
.form__done p { margin-top: var(--space-3); font-size: var(--step-sm); color: var(--muted); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta {
  --surface: var(--deep);
  background: var(--deep);
  color: var(--ink-inverse);
  padding-block: var(--space-32);
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) { .cta { padding-block: var(--space-20); } }

.cta__inner { position: relative; z-index: 1; text-align: center; }
.cta__title {
  font-size: var(--step-2xl);
  max-width: 20ch;
  margin-inline: auto;
}
.cta__lede {
  margin: var(--space-6) auto 0;
  font-size: var(--step-md);
  font-weight: 300;
  color: var(--muted-inverse);
  max-width: 52ch;
}
.cta__rule {
  width: 40px; height: 1px;
  background: var(--brass);
  margin: 0 auto var(--space-8);
}

/* paper variant — used where the page already ends on a dark section */
.cta--paper { --surface: var(--paper-raised); background: var(--paper-raised); color: var(--ink); }
.cta--paper .cta__lede { color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  --surface: var(--deep);
  background: var(--deep);
  color: var(--ink-inverse);
  padding-top: var(--space-20);
  padding-bottom: var(--space-10);
  border-top: 1px solid rgba(242, 239, 232, 0.1);
}

.footer__top {
  display: grid;
  gap: var(--space-12);
  padding-bottom: var(--space-16);
}
@media (min-width: 760px)  { .footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--space-16); } }

.footer .brand__name { color: var(--ink-inverse); }
.footer .brand__name .ap { color: var(--bronze-lit); }
.footer .brand__sub { color: var(--muted-inverse); }

.footer__blurb {
  margin-top: var(--space-6);
  font-size: var(--step-sm);
  font-weight: 300;
  color: var(--muted-inverse);
  max-width: 38ch;
}

.footer h2 {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-lit);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(195, 154, 78, 0.24);
}

.footer__list { display: grid; gap: var(--space-3); }
.footer__list a {
  font-size: var(--step-sm);
  font-weight: 300;
  color: rgba(242, 239, 232, 0.86);
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover { color: var(--patina-light); }

.footer__contact { display: grid; gap: var(--space-4); }
.footer__contact div {
  display: flex;
  gap: var(--space-3);
  font-size: var(--step-sm);
  font-weight: 300;
  color: rgba(242, 239, 232, 0.86);
  line-height: 1.6;
}
.footer__contact svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 5px; color: var(--patina-light); }
.footer__contact a:hover { color: var(--patina-light); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(242, 239, 232, 0.1);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.05em;
  color: var(--muted-inverse);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer__bottom a:hover { color: var(--patina-light); }
.footer__credit a { color: rgba(242, 239, 232, 0.86); border-bottom: 1px solid rgba(242, 239, 232, 0.28); }
.footer__credit a:hover { color: var(--patina-light); border-color: var(--patina-light); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.mt-0  { margin-top: 0; }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.center { text-align: center; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }