@charset "UTF-8";
/* ==========================================================================
   YACHTWEBSITE — "ATELIER"
   Luxury layer v1.0 · loaded after style.css, owns the redesigned home page.
   Register: midnight hull, warm ivory, one champagne-brass accent.
   Restraint, hairlines, generous air, a single metal. No photography.
   --------------------------------------------------------------------------
   01 Tokens      02 Base        03 Header      04 Hero
   05 Anatomy (scroll story)     06 Fleet       07 Editorial
   08 Figures     09 Enquiry     10 Footer      11 Responsive / a11y
   ========================================================================== */

/* 01 · TOKENS ============================================================= */
:root {
  --lx-void:     #05080D;
  --lx-abyss:    #080D14;
  --lx-hull:     #0D151F;
  --lx-raise:    #121C28;
  --lx-ivory:    #F3F0E8;
  --lx-pearl:    #FFFDF8;
  --lx-mist:     #9FAEBD;
  --lx-slate:    #7C8B9E;   /* 5.6:1 on the abyss ground — these carry 10px labels */
  --lx-brass:    #C9A227;
  --lx-brass-lt: #E8CE7A;
  --lx-brass-dk: #B08C1E;   /* 6.2:1 — carries the small fleet numerals */
  --lx-teal:     #1E7F86;
  --lx-foam:     #7FC9C4;

  /* the page was one navy and one metal — too few notes to hold nine sections.
     These are the rest of the chart: shoal water, open sea, sand, and rust. */
  --lx-shoal:    #2FA8A0;   /* turquoise over sand                     */
  --lx-lagoon:   #13656E;   /* mid water                               */
  --lx-depth:    #0A3A4A;   /* the deep, for grounds                   */
  --lx-sand:     #E8DFCB;   /* chart paper                             */
  --lx-sand-2:   #F5EFE2;   /* lifted chart paper                      */
  --lx-clay:     #B4553A;   /* antifoul red — signal, on paper grounds */
  --lx-clay-lt:  #CF6E52;   /* 5.6:1 — the same red, for dark grounds  */
  --lx-rope:     #C79A5B;   /* manila                                  */

  /* ink for the light grounds */
  --lx-ink-d:    #0B2230;
  --lx-ink-d2:   #3C5464;

  --lx-hair:     rgba(243,240,232,.13);
  --lx-hair-2:   rgba(243,240,232,.07);
  --lx-glow:     rgba(201,162,39,.30);

  --lx-stage:    clamp(5rem, 3rem + 8vw, 11rem);
  --lx-rail:     var(--gutter);   /* the base system already sets the rail */
  --lx-max:      var(--maxw);

  --lx-e:        cubic-bezier(.16, 1, .3, 1);
  --lx-e-soft:   cubic-bezier(.4, 0, .2, 1);
}

/* 02 · BASE =============================================================== */
body.atelier {
  background: var(--lx-void);
  color: var(--lx-mist);
  font-family: var(--f-body);
  letter-spacing: -.005em;
}
.atelier ::selection { background: var(--lx-brass); color: var(--lx-void); }

/* style.css paints b/strong hull-navy for the light theme — on this ground that
   is all but invisible, so let them take their parent's colour instead. */
.atelier b, .atelier strong { color: inherit; }

.atelier h1, .atelier h2, .atelier h3, .atelier h4 {
  color: var(--lx-ivory);
  font-weight: 300;
}
.atelier h1 { letter-spacing: -.042em; line-height: .94; }
.atelier h2 { letter-spacing: -.034em; line-height: 1.02; }

/* identical to .shell on the inner pages, so the column does not jump width
   when you move between the home page and the rest of the site */
.lx-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.lx-narrow { width: 100%; max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }

.lx-eyebrow {
  font-family: var(--f-mono);
  font-size: clamp(.625rem, .59rem + .16vw, .72rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--lx-brass);
  display: flex; align-items: center; gap: .9em;
}
.lx-eyebrow::before {
  content: ""; width: clamp(1.4rem, 3vw, 3.2rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--lx-brass));
  flex: none;
}

.lx-lede {
  font-size: clamp(1.02rem, .95rem + .45vw, 1.32rem);
  line-height: 1.68; color: var(--lx-mist); max-width: 62ch;
}
.lx-section { padding-block: var(--lx-stage); position: relative; }

/* ---- section grounds: the page alternates instead of running one navy ---- */
.lx-ground--deep  { background: linear-gradient(170deg, var(--lx-abyss), var(--lx-depth) 130%); }
.lx-ground--lagoon{ background: linear-gradient(200deg, #0A1822 0%, var(--lx-lagoon) 190%); }

/* chart-paper sections — the contrast that gives the dark ones their weight */
.lx-ground--paper {
  background: linear-gradient(175deg, var(--lx-sand-2), var(--lx-sand));
  color: var(--lx-ink-d2);
}
.lx-ground--paper h2, .lx-ground--paper h3, .lx-ground--paper h4 { color: var(--lx-ink-d); }
.lx-ground--paper .lx-lede { color: #2E4655; }
.lx-ground--paper .lx-eyebrow { color: #8A5A22; }
.lx-ground--paper .lx-eyebrow::before { background: linear-gradient(90deg, transparent, #8A5A22); }
.lx-ground--paper .lx-list { border-top-color: rgba(11,34,48,.16); }
.lx-ground--paper .lx-list > li { border-bottom-color: rgba(11,34,48,.16); }
.lx-ground--paper .lx-list > li:hover { border-bottom-color: rgba(180,85,58,.55); }
.lx-ground--paper .lx-list b { color: #A0522D; }
.lx-ground--paper .lx-list > li:hover b { color: var(--lx-clay); }
.lx-ground--paper .lx-list p { color: #3C5464; }
.lx-ground--paper .lx-link { color: #8A5A22; border-bottom-color: rgba(138,90,34,.35); }
.lx-ground--paper .lx-link:hover { color: var(--lx-clay); border-color: var(--lx-clay); }
.lx-ground--paper ::selection { background: var(--lx-clay); color: var(--lx-sand-2); }
.lx-rule { height: 1px; background: var(--lx-hair-2); border: 0; }

/* Fine metal link */
.lx-link {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lx-brass);
  padding-bottom: .35em; border-bottom: 1px solid rgba(201,162,39,.32);
  transition: color .4s var(--lx-e), border-color .4s var(--lx-e), gap .4s var(--lx-e);
}
.lx-link:hover { color: var(--lx-brass-lt); border-color: var(--lx-brass-lt); gap: 1em; }
.lx-link svg { width: .9em; height: .9em; }

/* Reveal primitive */
.js .lx-rise { opacity: 0; transform: translateY(26px); }
.lx-rise.is-in {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--lx-e) var(--d, 0ms), transform 1.1s var(--lx-e) var(--d, 0ms);
}

/* 03 · HEADER ============================================================= */
.lx-head {
  position: fixed; inset: 0 0 auto; z-index: 90; padding-block: 0;
  transition: background .5s var(--lx-e), backdrop-filter .5s var(--lx-e),
              border-color .5s var(--lx-e), padding .5s var(--lx-e);
  border-bottom: 1px solid transparent;
}
.lx-head.is-stuck {
  background: rgba(5,8,13,.82); backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--lx-hair-2);
}
.lx-head__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
/* the home page now carries the same mark as every inner page */
.atelier .brand { display: inline-flex; align-items: center; gap: .75rem; }
.atelier .brand__mark { width: 2.2rem; height: 2.2rem; flex: none; }
.atelier .brand__type { display: grid; gap: .18rem; }
.lx-foot .brand { margin-bottom: 1.2rem; }
.lx-nav { display: flex; align-items: center; gap: clamp(1.2rem, .6rem + 1.6vw, 2.6rem); }
.lx-nav a {
  font-size: .82rem; letter-spacing: .06em; color: var(--lx-mist);
  position: relative; padding-block: .3rem;
  transition: color .35s var(--lx-e);
}
.lx-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--lx-brass); transition: right .45s var(--lx-e);
}
.lx-nav a:hover { color: var(--lx-ivory); }
.lx-nav a:hover::after { right: 0; }

/* 04 · HERO =============================================================== */
.lx-hero {
  position: relative; height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: clamp(6rem, 4.2rem + 7vw, 9rem);
}

/* sky: a dusk horizon rather than a flat panel */
.lx-hero__sky { position: absolute; inset: 0; z-index: -3; }
.lx-hero__sky::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(130% 70% at 50% 72%, rgba(47,168,160,.26) 0%, transparent 58%),
    radial-gradient(90% 46% at 78% 66%, rgba(201,162,39,.16) 0%, transparent 62%),
    linear-gradient(178deg, #060B12 0%, #0A1622 44%, #0D2836 70%, #071A26 100%);
}
.lx-hero__sky::after {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background-image:
    linear-gradient(to right, var(--lx-hair-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lx-hair-2) 1px, transparent 1px);
  background-size: clamp(50px, 6vw, 96px) clamp(50px, 6vw, 96px);
  mask-image: radial-gradient(circle at 50% 46%, #000 12%, transparent 76%);
}

/* the vessel carries the hero — she is the largest thing on the screen */
.lx-hero__plate {
  position: relative; z-index: 0; min-height: 0;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: clamp(.5rem, .2rem + 1.4vw, 1.6rem);
}
/* overflow stays visible so the sea, drawn past the viewBox, reaches both edges */
.lx-vessel { width: 100%; height: 100%; display: block; overflow: visible; }

.lx-vessel .h-line  { fill: none; stroke: var(--lx-ivory); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lx-vessel .h-fine  { fill: none; stroke: var(--lx-ivory); stroke-width: .85; opacity: .4; vector-effect: non-scaling-stroke; }
.lx-vessel .h-brass { fill: none; stroke: var(--lx-brass); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lx-vessel .h-glass { fill: rgba(127,201,196,.15); stroke: rgba(243,240,232,.32); stroke-width: .7; vector-effect: non-scaling-stroke; }
.lx-vessel .h-body  { /* fill set as an attribute in the markup: url(#id) in CSS resolves against this file */ }
.lx-vessel .h-water { stroke: var(--lx-shoal); stroke-width: 1.1; opacity: .55; vector-effect: non-scaling-stroke; }
/* the reflection is styled separately so the draw-on pass never touches it */
.lx-vessel .r-line  { fill: none; stroke: var(--lx-ivory); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lx-vessel .r-fine  { fill: none; stroke: var(--lx-ivory); stroke-width: .85; opacity: .4; vector-effect: non-scaling-stroke; }
.lx-vessel .r-brass { fill: none; stroke: var(--lx-brass); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lx-vessel .r-glass { fill: rgba(127,201,196,.12); stroke: none; }
.lx-refl { opacity: .62; }

/* drawn on at load, the way the old sheet did it */
.js .lx-vessel .h-line, .js .lx-vessel .h-fine, .js .lx-vessel .h-brass {
  stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400);
}
.js .lx-hero.is-drawn .lx-vessel .h-line,
.js .lx-hero.is-drawn .lx-vessel .h-fine,
.js .lx-hero.is-drawn .lx-vessel .h-brass {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.9s var(--lx-e) var(--d, 0ms);
}
.js .lx-vessel .h-glass, .js .lx-refl { opacity: 0; }
.js .lx-hero.is-drawn .lx-vessel .h-glass { opacity: 1; transition: opacity 1.1s var(--lx-e) 1.5s; }
.js .lx-hero.is-drawn .lx-refl            { opacity: .62; transition: opacity 1.4s var(--lx-e) 1.9s; }

.lx-hero__in { position: relative; z-index: 2; display: grid; gap: clamp(1.2rem,.6rem + 1.6vw,2.2rem); }
.lx-hero h1 { font-size: clamp(2.1rem, .9rem + 4.6vw, 5.1rem); max-width: 16ch; }
.lx-hero h1 em { font-style: italic; color: var(--lx-brass-lt); padding-right: .06em; }
.lx-hero .lx-lede { max-width: 44ch; font-size: clamp(.95rem,.9rem + .3vw,1.1rem); }

/* the title block — the plate language, carried into the hero */
.lx-hero__block {
  position: relative; z-index: 2; align-self: end;
  border-top: 1px solid var(--lx-hair);
  backdrop-filter: blur(3px);
  padding-block: clamp(.9rem, .6rem + 1vw, 1.5rem);
}
.lx-hero__block dl { display: flex; flex-wrap: wrap; gap: .3rem clamp(1.4rem,.6rem + 3vw,4rem); align-items: baseline; }
.lx-hero__block div { display: grid; gap: .25rem; }
.lx-hero__block dt {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--lx-slate);
}
.lx-hero__block dd { font-family: var(--f-mono); font-size: .8rem; color: var(--lx-ivory); letter-spacing: .04em; }
.lx-hero__block .cue { margin-left: auto; }

.lx-scroll-cue {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--lx-slate);
  display: inline-flex; align-items: center; gap: .7rem;
}
.lx-scroll-cue i { width: 1px; height: 2.2rem; background: var(--lx-hair); position: relative; overflow: hidden; }
.lx-scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--lx-brass);
  animation: lx-cue 2.6s var(--lx-e-soft) infinite;
}
@keyframes lx-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

@media (max-width: 719px) {
  .lx-hero__block dl > div:nth-child(n+3):not(.cue) { display: none; }

}

/* 05 · ANATOMY — the scroll story ========================================= */
.anatomy { position: relative; background: var(--lx-abyss); }
.anatomy::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(100% 56% at 50% 40%, rgba(30,127,134,.13), transparent 70%);
  pointer-events: none;
}
/* the tall track the stage is pinned inside — one viewport per step */
.anatomy__track { position: relative; }
.anatomy__stage {
  position: sticky; top: 0; height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head" "plate" "rail";
  gap: clamp(.8rem, .4rem + 1.2vw, 1.8rem);
  padding-block: clamp(4.4rem, 3rem + 5vw, 6.5rem) clamp(1.6rem, 1rem + 2vw, 3rem);
  overflow: hidden;
}
.anatomy__head  { grid-area: head; }
.anatomy__plate { grid-area: plate; }
.anatomy__cards { grid-area: cards; }
.anatomy__rail  { grid-area: rail; }

.anatomy__head { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; }
.anatomy__count {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .24em; color: var(--lx-slate);
}
.anatomy__count b { color: var(--lx-brass); font-weight: 500; }

/* ---- the vessel plate ---- */
.anatomy__plate {
  position: relative; display: grid; place-items: center; min-height: 0;
}
/* The camera is the viewBox, lerped in JS — the drawing can never spill out
   of its grid cell, and each part lands dead centre instead of approximately. */
.vessel { width: 100%; height: 100%; max-height: 100%; overflow: hidden; }
/* ink */
.vessel .v-line   { fill: none; stroke: var(--lx-ivory); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vessel .v-fine   { fill: none; stroke: var(--lx-ivory); stroke-width: .8; opacity: .42; vector-effect: non-scaling-stroke; }
.vessel .v-brass  { fill: none; stroke: var(--lx-brass); stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.vessel .v-glass  { fill: rgba(127,201,196,.13); stroke: rgba(243,240,232,.34); stroke-width: .7; vector-effect: non-scaling-stroke; }
.vessel .v-body   { fill: rgba(18,28,40,.72); }
.vessel .v-deck   { fill: rgba(13,21,31,.80); }
.vessel .v-water  { fill: none; stroke: var(--lx-teal); stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; }
.vessel .v-tx {
  font-family: var(--f-mono); font-size: 15px; letter-spacing: .14em;
  fill: var(--lx-mist); opacity: .72;
}
.vessel .v-tx--k { fill: var(--lx-brass); opacity: .9; }
.vessel .v-dim   { opacity: 0; transition: opacity .9s var(--lx-e) .3s; }
.anatomy.is-drawn .vessel .v-dim { opacity: 1; }
.anatomy.is-zoomed .vessel .v-dim { opacity: 0; transition-delay: 0s; }

/* draw-on: JS sets --len then animates --off */
.vessel .v-draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--off, 0);
}
/* fills wash in only after the outline is laid down */
.vessel .v-wash { opacity: 0; transition: opacity 1.1s var(--lx-e) .25s; }
.anatomy.is-drawn .vessel .v-wash { opacity: 1; }

/* ---- hotspots ---- */
.v-spot { opacity: 0; transition: opacity .55s var(--lx-e); pointer-events: none; }
.v-spot.is-on { opacity: 1; }
.v-spot .v-ring {
  fill: none; stroke: var(--lx-brass); stroke-width: 1.2; vector-effect: non-scaling-stroke;
}
.v-spot.is-on .v-ring { animation: v-pulse 2.8s var(--lx-e-soft) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes v-pulse { 0% { opacity: .95; } 50% { opacity: .35; } 100% { opacity: .95; } }
.v-spot .v-dot  { fill: var(--lx-brass); }
.v-spot .v-lead { stroke: var(--lx-brass); stroke-width: 1; opacity: .7; vector-effect: non-scaling-stroke; }
.v-spot .v-dimline {
  fill: var(--lx-brass); stroke: var(--lx-brass); stroke-width: 1;
  opacity: .85; vector-effect: non-scaling-stroke;
}

/* ---- caption ---- */
.anatomy__cards { position: relative; }
.js .anatomy__cards { display: grid; }
html:not(.js) .anatomy__card { position: static; margin-bottom: 2rem; }
html:not(.js) .anatomy__stage { position: static; height: auto; }
html:not(.js) .v-draw { stroke-dashoffset: 0 !important; }
.anatomy__card {
  max-width: 46ch;
  transition: opacity .6s var(--lx-e), transform .6s var(--lx-e);
  pointer-events: none;
}
.js .anatomy__card { grid-area: 1 / 1; transform: translateY(20px); }
.js .anatomy__card { opacity: 0; }
.anatomy__card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.anatomy__card .n {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .26em;
  color: var(--lx-brass); display: block; margin-bottom: .9rem;
}
.anatomy__card h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem); margin-bottom: .7rem; letter-spacing: -.03em;
}
.anatomy__card p { font-size: clamp(.92rem, .88rem + .22vw, 1.05rem); line-height: 1.66; }
.anatomy__card dl {
  display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: .9rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em;
}
.anatomy__card dt { color: var(--lx-slate); text-transform: uppercase; letter-spacing: .18em; font-size: .64rem; }
.anatomy__card dd { color: var(--lx-ivory); }
.anatomy__card div { display: grid; gap: .2rem; }

/* ---- progress rail ---- */
.anatomy__rail { display: flex; gap: .5rem; align-items: center; margin-top: clamp(.8rem, .5rem + 1vw, 1.6rem); }
.anatomy__rail li { flex: 1; height: 2px; background: var(--lx-hair); position: relative; overflow: hidden; }
.anatomy__rail li::after {
  content: ""; position: absolute; inset: 0; background: var(--lx-brass);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform .25s linear;
}

/* 06 · FLEET ============================================================== */
.lx-fleet { display: grid; gap: 1px; overflow: clip; background: var(--lx-hair-2); border-block: 1px solid var(--lx-hair-2); }
.lx-fleet__item {
  background: var(--lx-void); padding: clamp(1.6rem, 1rem + 2.2vw, 3rem);
  display: grid; gap: 1.1rem; align-content: start;
  position: relative; transition: background .6s var(--lx-e);
}
.lx-fleet__item:hover { background: var(--lx-hull); }
.lx-fleet__item img { width: 100%; height: auto; opacity: .84; transition: opacity .6s var(--lx-e), transform .9s var(--lx-e); }
.lx-fleet__item:hover img { opacity: 1; transform: translateX(6px); }
.lx-fleet__item h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); }
.lx-fleet__item p { font-size: .9rem; line-height: 1.6; }
.lx-fleet__no {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .24em; color: var(--lx-brass-dk);
}

/* 07 · EDITORIAL ========================================================== */
.lx-split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: start; }
.lx-split--sticky > div:first-child { position: sticky; top: clamp(6rem, 5rem + 3vw, 8rem); }

.lx-list { display: grid; gap: 0; border-top: 1px solid var(--lx-hair-2); }
.lx-list > li {
  display: grid; gap: .5rem 1.6rem; padding-block: clamp(1.3rem, 1rem + 1.2vw, 2.1rem);
  border-bottom: 1px solid var(--lx-hair-2);
  grid-template-columns: 2.75rem 1fr;
}
/* fixed numeral column so every heading starts on the same vertical */
.lx-list b {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .2em;
  color: var(--lx-brass); font-weight: 500; padding-top: .45em;
}
.lx-list h4 { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); margin-bottom: .35rem; }
.lx-list p { font-size: .94rem; line-height: 1.65; }

/* 08 · FIGURES ============================================================ */
.lx-figs { display: grid; gap: 1px; background: var(--lx-hair-2); }
.lx-figs > div { background: var(--lx-abyss); padding: clamp(1.5rem, 1rem + 2vw, 2.8rem); }
.lx-figs .v {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
  color: var(--lx-ivory); line-height: 1; letter-spacing: -.04em;
  display: flex; align-items: baseline; gap: .1em;
}
.lx-figs .v small { font-size: .38em; color: var(--lx-brass); letter-spacing: 0; }
.lx-figs .k {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--lx-slate); margin-top: .9rem;
}

/* 09 · ENQUIRY ============================================================ */
.lx-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(5rem, 3.5rem + 7vw, 9rem);
  background: var(--lx-abyss);
}
.lx-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 120% at 50% 108%, rgba(201,162,39,.16), transparent 66%);
}
.lx-cta h2 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4.4rem); max-width: 18ch; margin-inline: auto; }

/* 10 · FOOTER ============================================================= */
.lx-foot { background: var(--lx-void); border-top: 1px solid var(--lx-hair-2); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; }
.lx-foot__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
.lx-foot h5 {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--lx-slate); margin-bottom: 1.1rem; font-weight: 500;
}
.lx-foot li + li { margin-top: .55rem; }
.lx-foot a { font-size: .88rem; color: var(--lx-mist); transition: color .35s var(--lx-e); }
.lx-foot a:hover { color: var(--lx-brass-lt); }
.lx-foot__base {
  margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid var(--lx-hair-2);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .76rem; color: var(--lx-slate);
}

/* 11 · RESPONSIVE / A11Y ================================================== */
@media (min-width: 720px) {
  .lx-fleet { grid-template-columns: repeat(2, 1fr); }
  .lx-figs  { grid-template-columns: repeat(2, 1fr); }
  .lx-foot__grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (min-width: 1040px) {
  .lx-fleet { grid-template-columns: repeat(5, 1fr); }
  .lx-figs  { grid-template-columns: repeat(4, 1fr); }
  .lx-split { grid-template-columns: 1fr 1.15fr; }
  .anatomy__stage {
    grid-template-columns: minmax(19rem, 30%) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "head  head"
      "cards plate"
      "rail  rail";
    column-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    align-items: center;
  }
  .anatomy__cards { min-height: 0; align-self: center; }
  /* cap the plate so the crop stays a wide band — a tall cell forces a tall
     crop, which drops the vessel into a sea of empty sheet */
  .anatomy__plate { max-height: min(60vh, 540px); align-self: center; }
}
/* below the lg breakpoint the caption sits under the drawing, so the plate
   gives up height rather than the type shrinking */
@media (max-width: 1039px) {
  .anatomy__stage {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head" "plate" "cards" "rail";
    row-gap: clamp(.6rem, .3rem + 1vw, 1.2rem);
  }
  .anatomy__plate { min-height: 0; }
  .anatomy__card p { font-size: .88rem; line-height: 1.55; }
}

.lx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lx-brass); color: var(--lx-void);
  padding: .8rem 1.4rem; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .14em;
}
.lx-skip:focus { left: var(--lx-rail); top: 1rem; }
.atelier :focus-visible { outline: 2px solid var(--lx-brass); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lx-rise { opacity: 1; transform: none; }
  .vessel { transition: none; transform: none; }
  .vessel .v-draw { stroke-dashoffset: 0 !important; }
  .vessel .v-wash { opacity: 1; }
  .lx-scroll-cue i::after { animation: none; }
  .v-spot.is-on .v-ring { animation: none; }
  /* the pin is the effect — release it and let every card simply stack */
  .anatomy__stage { position: static; height: auto; }
  .anatomy__card { position: static; opacity: 1; transform: none; margin-bottom: 2.5rem; }
  .anatomy__cards { min-height: 0; }
}

/* 12 · MOTION SYSTEM — applies to every section, not only the story ======== */

/* page progress — one hairline of brass */
.lx-prog {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 100;
  background: var(--lx-brass); transform: scaleX(var(--p, 0)); transform-origin: left;
  will-change: transform;
}

/* headings rise out from behind a clip — the editorial reveal */
.lx-mask { display: block; overflow: hidden; }
.js .lx-mask > span { transform: translateY(106%); }
.lx-mask > span { display: block; }
.is-in > .lx-mask > span,
.lx-mask.is-in > span {
  transform: none;
  transition: transform 1.15s var(--lx-e) var(--d, 0ms);
}

/* hairlines draw themselves in */
.js .lx-draw-rule { transform: scaleX(0); }
.lx-draw-rule {
  transform-origin: left;
  transition: transform 1.2s var(--lx-e) var(--d, 0ms);
}
.is-in .lx-draw-rule, .lx-draw-rule.is-in { transform: scaleX(1); }

/* scroll-linked drift — JS writes --y */
[data-drift] { transform: translate3d(0, var(--y, 0px), 0); will-change: transform; }

/* fleet: the drawing lifts and the column warms as it enters */

.lx-fleet__item { transition: background .6s var(--lx-e); }
.lx-fleet__item::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--lx-brass); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--lx-e);
}
.lx-fleet__item:hover::after { transform: scaleX(1); }

/* editorial rows enter one after another and warm on hover */
.js .lx-list > li { opacity: 0; transform: translateY(20px); }
.lx-list > li.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--lx-e) var(--d, 0ms), transform .9s var(--lx-e) var(--d, 0ms);
}
.lx-list > li { transition: border-color .5s var(--lx-e); }
.lx-list > li:hover { border-bottom-color: rgba(201,162,39,.4); }
.lx-list b { transition: color .5s var(--lx-e), transform .6s var(--lx-e); display: inline-block; }
.lx-list > li:hover b { color: var(--lx-brass-lt); transform: translateY(-2px); }

/* figures: a rule draws under each as it counts */
.lx-figs > div { position: relative; }
.lx-figs > div::after {
  content: ""; position: absolute; left: clamp(1.5rem,1rem + 2vw,2.8rem);
  right: clamp(1.5rem,1rem + 2vw,2.8rem); bottom: clamp(1.2rem,1rem + 1vw,2rem);
  height: 1px; background: var(--lx-brass); opacity: .5;
  transform-origin: left;
  transition: transform 1.4s var(--lx-e) var(--d, 0ms);
}
.js .lx-figs > div::after { transform: scaleX(0); }
.lx-figs > div.is-in::after { transform: scaleX(1); }

/* the closing horizon breathes */
.lx-cta::after {
  content: ""; position: absolute; left: 50%; bottom: -34%; z-index: -1;
  width: min(120vw, 1500px); aspect-ratio: 2 / 1; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30,127,134,.22), transparent 72%);
  animation: lx-breathe 13s var(--lx-e-soft) infinite;
}
@keyframes lx-breathe {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-mask > span, .lx-fleet__item, .lx-list > li { transform: none !important; opacity: 1 !important; }
  .lx-draw-rule, .lx-figs > div::after { transform: scaleX(1) !important; }
  [data-drift] { transform: none !important; }
  .lx-cta::after { animation: none; }
  .lx-prog { display: none; }
}

/* 13 · MOBILE NAVIGATION ================================================== */
.lx-burger {
  display: none; position: relative; z-index: 2;
  width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
}
.lx-burger i {
  display: block; width: 22px; height: 1px; background: var(--lx-ivory);
  transition: transform .45s var(--lx-e), opacity .25s var(--lx-e);
}
.lx-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.lx-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.lx-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

.lx-sheet {
  position: fixed; inset: 0; z-index: 95;
  background: var(--lx-abyss);
  display: grid; align-content: center; gap: .25rem;
  padding: 6rem var(--lx-rail) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--lx-e);
  visibility: hidden;
}
.lx-sheet.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.lx-sheet::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 70% 10%, rgba(30,127,134,.18), transparent 65%);
  pointer-events: none;
}
.lx-sheet a {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2rem, 1.2rem + 4.4vw, 3.2rem);
  color: var(--lx-ivory); letter-spacing: -.03em; line-height: 1.5;
  border-bottom: 1px solid var(--lx-hair-2); padding-block: .45rem;
  opacity: 0; transform: translateY(18px);
  display: flex; align-items: baseline; gap: 1rem;
}
.lx-sheet.is-open a {
  opacity: 1; transform: none;
  transition: opacity .6s var(--lx-e) var(--d, 0ms), transform .6s var(--lx-e) var(--d, 0ms);
}
.lx-sheet a span {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .24em;
  color: var(--lx-brass); flex: none;
}
html:not(.js) .lx-sheet { display: none; }
body.is-locked { overflow: hidden; }

@media (max-width: 899px) {
  .lx-nav { display: none; }
  .lx-burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-sheet { transition: none; }
  .lx-sheet a { opacity: 1; transform: none; }
}

/* 14 · CHART DETAIL — the ornament the page was missing ==================== */

/* depth contours: the soft concentric lines of a sea chart */
.lx-contours { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lx-contours svg { position: absolute; width: 140%; height: auto; opacity: .5; }
.lx-contours path { fill: none; stroke: var(--lx-shoal); stroke-width: 1; opacity: .16; }
.lx-ground--paper .lx-contours path { stroke: #2E6E78; opacity: .22; }
.lx-section > .lx-wrap, .lx-section > .lx-narrow { position: relative; z-index: 1; }

/* a sounding grid — chart paper ticks */
.lx-ticks {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(47,168,160,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47,168,160,.09) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.lx-ground--paper .lx-ticks {
  background-image:
    linear-gradient(to right, rgba(11,34,48,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,34,48,.07) 1px, transparent 1px);
}

/* fleet cards carry real specification rows now, not just a paragraph */
.lx-spec {
  display: grid; gap: .35rem; margin-top: .2rem;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em;
}
.lx-spec div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .38rem; border-top: 1px solid var(--lx-hair-2);
}
.lx-spec dt { color: var(--lx-slate); text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; }
.lx-spec dd { color: var(--lx-foam); }

/* the fleet column warms with its own hue on hover */
.lx-fleet__item { --tint: var(--lx-shoal); }
.lx-fleet__item:nth-child(2) { --tint: var(--lx-foam); }
.lx-fleet__item:nth-child(3) { --tint: var(--lx-brass); }
.lx-fleet__item:nth-child(4) { --tint: var(--lx-shoal); }
.lx-fleet__item:nth-child(5) { --tint: var(--lx-rope); }
.lx-fleet__item::after { background: var(--tint); }
.lx-fleet__item:hover h3 { color: var(--tint); transition: color .5s var(--lx-e); }
.lx-fleet__no { color: var(--tint); opacity: .85; }

/* figures pick up the sea range instead of all reading brass */
.lx-figs > div:nth-child(1) .v small { color: var(--lx-shoal); }
.lx-figs > div:nth-child(2) .v small { color: var(--lx-foam); }
.lx-figs > div:nth-child(3) .v small { color: var(--lx-rope); }
.lx-figs > div:nth-child(4) .v small { color: var(--lx-clay-lt); }
.lx-figs > div:nth-child(1)::after { background: var(--lx-shoal); }
.lx-figs > div:nth-child(2)::after { background: var(--lx-foam); }
.lx-figs > div:nth-child(3)::after { background: var(--lx-rope); }
.lx-figs > div:nth-child(4)::after { background: var(--lx-clay-lt); }

/* a pull quote to break the columns of body copy */
.lx-quote {
  margin: clamp(2rem,1rem + 3vw,3.5rem) 0 0;
  padding-left: clamp(1rem,.6rem + 1.6vw,2rem);
  border-left: 2px solid var(--lx-shoal);
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.15rem,1rem + .9vw,1.7rem); line-height: 1.42;
  color: var(--lx-ivory); letter-spacing: -.02em;
}
.lx-ground--paper .lx-quote { color: var(--lx-ink-d); border-left-color: var(--lx-clay); }
.lx-quote cite {
  display: block; margin-top: .9rem; font-family: var(--f-mono);
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--lx-slate); font-style: normal;
}
.lx-ground--paper .lx-quote cite { color: #6B7F8C; }

/* ==========================================================================
   15 · INNER PAGES
   The 45 legacy pages keep their markup; this re-voices their components in
   the atelier register so the whole site reads as one design.
   ========================================================================== */

/* Re-voice the base design system's own tokens once, so every legacy component
   — including ones not individually restyled below — inherits the new palette. */
.atelier {
  --c-canvas:    var(--lx-void);
  --c-canvas-2:  var(--lx-hull);
  --c-surface:   var(--lx-hull);
  --c-mist:      var(--lx-hair);
  --c-shallow:   var(--lx-lagoon);
  --c-foam:      var(--lx-foam);
  --c-turquoise: var(--lx-shoal);
  --c-azure:     var(--lx-brass);
  --c-azure-lt:  var(--lx-brass-lt);
  --c-deep:      var(--lx-depth);
  --c-ink:       var(--lx-ivory);
  --c-ink-soft:  var(--lx-mist);
  --c-muted:     var(--lx-slate);
  --c-gold:      var(--lx-brass);
  --c-coral:     var(--lx-clay-lt);
  --c-teal-ink:  var(--lx-foam);
  --c-coral-ink: var(--lx-clay-lt);
  --c-gold-ink:  var(--lx-brass);
  --c-line:      var(--lx-hair);
  --c-line-soft: var(--lx-hair-2);
  --c-shadow:    rgba(0,0,0,.5);
}
/* chart-paper sections invert back to dark ink on light ground */
.atelier .section--white, .atelier .section--alt {
  --c-ink:      var(--lx-ink-d);
  --c-ink-soft: var(--lx-ink-d2);
  --c-muted:    #6B7F8C;
  --c-azure:    #8A5A22;
  --c-azure-lt: var(--lx-clay);
  --c-teal-ink: #2E6E78;
  --c-gold-ink: #8A5A22;
  --c-line:     rgba(11,34,48,.18);
  --c-line-soft:rgba(11,34,48,.10);
}

/* ---- header ---- */
.atelier .header {
  position: fixed; inset: 0 0 auto; z-index: 90; background: transparent;
  border-bottom: 1px solid transparent; box-shadow: none;
  transition: background .5s var(--lx-e), border-color .5s var(--lx-e), backdrop-filter .5s var(--lx-e);
}
.atelier .header.is-stuck, .atelier .header.is-scrolled {
  background: rgba(5,8,13,.84); backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--lx-hair-2);
}
/* one rhythm, applied to the inner bar in both shells, so the header is the
   same height on every page and cannot jump as you navigate */
.atelier .header__bar, .lx-head__in {
  padding-block: clamp(.85rem, .65rem + .7vw, 1.3rem);
  min-height: 0; height: auto;
}
.atelier .header__bar > *, .lx-head__in > * { min-height: 2.9rem; display: flex; align-items: center; }
.atelier .header__bar, .lx-head__in { align-items: center; }
.atelier .header__cta { display: flex; align-items: center; gap: var(--s-4); }
.atelier .btn--sm { padding: .72rem 1.15rem; line-height: 1; }
.atelier .brand__name { color: var(--lx-ivory); font-family: var(--f-mono); font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; }
.atelier .brand__name b { color: var(--lx-ivory); font-weight: 500; }
.atelier .brand__tag { color: var(--lx-slate); font-family: var(--f-mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; }
.atelier .brand__mark path[fill="#0A6FAC"] { fill: var(--lx-brass); }
.atelier .brand__mark path[fill="#12B5AC"] { fill: var(--lx-shoal); }
.atelier .brand__mark path[stroke="#04263C"] { stroke: var(--lx-ivory); }
.atelier .brand__mark path[stroke="#0A6FAC"] { stroke: var(--lx-shoal); }

.atelier .nav__link { color: var(--lx-mist); font-size: .82rem; letter-spacing: .05em; transition: color .35s var(--lx-e); }
.atelier .nav__link:hover, .atelier .nav__link[aria-current="page"] { color: var(--lx-ivory); }
.atelier .nav__caret { border-top-color: currentColor; opacity: .6; }
.atelier .nav__panel {
  background: rgba(9,15,23,.96); backdrop-filter: blur(18px);
  border: 1px solid var(--lx-hair-2); border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.atelier .nav__panel a { color: var(--lx-mist); font-size: .84rem; transition: color .3s var(--lx-e), background .3s var(--lx-e); }
.atelier .nav__panel a:hover { color: var(--lx-ivory); background: rgba(243,240,232,.05); }
.atelier .nav__panel a i { color: var(--lx-brass); font-style: normal; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; }
.atelier .header__cta {
  color: var(--lx-void); background: var(--lx-brass); border: 0; border-radius: 4px;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .7rem 1.2rem; transition: background .35s var(--lx-e);
}
.atelier .header__cta:hover { background: var(--lx-brass-lt); }

/* ---- page hero ---- */
.atelier .phero {
  position: relative; background: linear-gradient(172deg, var(--lx-abyss), var(--lx-depth) 150%);
  padding-block: clamp(8rem,6rem + 8vw, 12rem) clamp(3rem,2rem + 3vw,5rem);
  border-bottom: 1px solid var(--lx-hair-2); overflow: hidden;
}
.atelier .phero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, var(--lx-hair-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lx-hair-2) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 60% 40%, #000 8%, transparent 72%);
}
.atelier .phero > .shell { position: relative; z-index: 1; }
.atelier .phero h1 { color: var(--lx-ivory); font-weight: 300; letter-spacing: -.035em; }
.atelier .crumbs { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lx-slate); margin-bottom: clamp(1.4rem,1rem + 1.4vw,2.4rem); }
.atelier .crumbs a { color: var(--lx-brass); }
.atelier .crumbs span { color: var(--lx-slate); }
.atelier .eyebrow { color: var(--lx-brass); font-family: var(--f-mono); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; }
.atelier .lede, .atelier .prose__lead { color: var(--lx-mist); }
.atelier .phero__spec { border-top: 1px solid var(--lx-hair-2); color: var(--lx-mist); }
.atelier .phero__spec b, .atelier .phero__spec strong { color: var(--lx-ivory); }
.atelier .phero__spec dt { color: var(--lx-slate); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; }
.atelier .phero__spec dd { color: var(--lx-ivory); font-family: var(--f-mono); font-size: .8rem; }

/* ---- body sections ---- */
.atelier .section { background: transparent; }
.atelier .section--white, .atelier .section--alt {
  background: linear-gradient(175deg, var(--lx-sand-2), var(--lx-sand));
  color: var(--lx-ink-d2);
}
.atelier .section--white h2, .atelier .section--white h3, .atelier .section--white h4,
.atelier .section--alt h2, .atelier .section--alt h3, .atelier .section--alt h4 { color: var(--lx-ink-d); }
.atelier .section--white .eyebrow, .atelier .section--alt .eyebrow { color: #8A5A22; }
.atelier .section--white .card, .atelier .section--alt .card { background: rgba(255,255,255,.55); border-color: rgba(11,34,48,.14); }
.atelier .section--white .card p, .atelier .section--alt .card p { color: #3C5464; }
/* the blanket `.atelier p` rule outranks inherited colour, so the paper
   sections have to restate their body and accent inks explicitly */
.atelier .section--white p,  .atelier .section--white li,
.atelier .section--white dd, .atelier .section--white td,
.atelier .section--alt p,    .atelier .section--alt li,
.atelier .section--alt dd,   .atelier .section--alt td { color: var(--lx-ink-d2); }
.atelier .section--white .numeral, .atelier .section--alt .numeral,
.atelier .section--white .eyebrow, .atelier .section--alt .eyebrow,
.atelier .section--white [class*="__idx"], .atelier .section--alt [class*="__idx"] { color: #8A5A22; }
.atelier .section--white h1, .atelier .section--white h5, .atelier .section--white h6,
.atelier .section--alt h1,   .atelier .section--alt h5,   .atelier .section--alt h6 { color: var(--lx-ink-d); }
.atelier .section--white strong, .atelier .section--white b,
.atelier .section--alt strong,   .atelier .section--alt b { color: var(--lx-ink-d); }
.atelier .section--ink { background: linear-gradient(200deg, #0A1822, var(--lx-lagoon) 190%); }

.atelier h2, .atelier h3, .atelier h4 { color: var(--lx-ivory); font-weight: 300; }
.atelier p, .atelier li { color: var(--lx-mist); }
.atelier .numeral { color: var(--lx-brass); font-family: var(--f-mono); }

/* the display accent still carried the old azure */
.atelier .display-i { color: var(--lx-brass-lt); font-style: italic; }
.atelier h1 .display-i { font-style: italic; }
.atelier .section--white .display-i, .atelier .section--alt .display-i { color: var(--lx-clay); }

/* ---- cards ---- */
.atelier .card {
  background: rgba(18,28,40,.5); border: 1px solid var(--lx-hair-2); border-radius: 8px;
  box-shadow: none; transition: background .5s var(--lx-e), border-color .5s var(--lx-e), transform .6s var(--lx-e);
}
.atelier .card:hover { background: rgba(18,28,40,.85); border-color: rgba(201,162,39,.32); transform: translateY(-3px); }
.atelier .card h3, .atelier .card h4 { color: var(--lx-ivory); }
.atelier .card p { color: var(--lx-mist); }
.atelier .callout {
  background: rgba(201,162,39,.07); border: 1px solid rgba(201,162,39,.24);
  border-left: 2px solid var(--lx-brass); border-radius: 0 8px 8px 0; color: var(--lx-mist);
}
.atelier .callout strong, .atelier .callout b { color: var(--lx-brass-lt); }

/* ---- accordion ---- */
.atelier .acc__item { border-bottom: 1px solid var(--lx-hair-2); background: transparent; }
.atelier .acc__btn { color: var(--lx-ivory); transition: color .35s var(--lx-e); }
.atelier .acc__btn:hover { color: var(--lx-brass-lt); }
.atelier .acc__icon { color: var(--lx-brass); }
.atelier .acc__panel { color: var(--lx-mist); }

/* ---- buttons & links ---- */
.atelier .btn {
  background: var(--lx-brass); color: var(--lx-void); border: 0; border-radius: 4px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  transition: background .35s var(--lx-e);
}
.atelier .btn:hover { background: var(--lx-brass-lt); }
.atelier .btn--ghost, .atelier .btn--quiet {
  background: transparent; color: var(--lx-brass); border: 1px solid rgba(201,162,39,.4);
}
.atelier .btn--ghost:hover, .atelier .btn--quiet:hover { background: rgba(201,162,39,.1); color: var(--lx-brass-lt); }
.atelier main a:not(.btn):not(.card):not(.nav__link) { color: var(--lx-brass); }
.atelier .section--white a:not(.btn), .atelier .section--alt a:not(.btn) { color: #8A5A22; }

/* ---- footer ---- */
.atelier .footer { background: var(--lx-void); border-top: 1px solid var(--lx-hair-2); color: var(--lx-mist); }
.atelier .footer h4, .atelier .footer h5, .atelier .footer__col > b {
  color: var(--lx-slate); font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .24em; text-transform: uppercase; font-weight: 500;
}
.atelier .footer a { color: var(--lx-mist); transition: color .35s var(--lx-e); }
.atelier .footer a:hover { color: var(--lx-brass-lt); }
.atelier .footer__blurb { color: var(--lx-slate); }
.atelier .footer__mail { color: var(--lx-brass); }
.atelier .footer__legal { border-top: 1px solid var(--lx-hair-2); color: var(--lx-slate); }

/* ---- the notice, now sitting at the foot of the page ---- */
.atelier .site-notice {
  display: block; background: rgba(201,162,39,.05);
  border-block: 1px solid rgba(201,162,39,.18); border-left: 0;
  padding-block: clamp(1.1rem,.8rem + 1vw,1.7rem);
}
.atelier .site-notice__inner { display: grid; gap: .5rem 2rem; align-items: start; }
.atelier .site-notice p { color: var(--lx-slate); font-size: .84rem; line-height: 1.65; max-width: 78ch; }
.atelier .site-notice strong { color: var(--lx-mist); }
.atelier .site-notice a { color: var(--lx-brass); font-size: .8rem; }
@media (min-width: 900px) {
  .atelier .site-notice__inner { grid-template-columns: 1fr auto; }
}

/* ==========================================================================
   16 · DEPTH — a 3D register for the home page
   Each section moves in a way that means something: statements are laid down,
   the fleet is dealt out, findings are lifted off the sheet, figures turn up.
   ========================================================================== */

.lx-persp { perspective: 1300px; perspective-origin: 50% 38%; }
.lx-stack { display: grid; }
.lx-stack > span { display: block; }
.lx-persp-near { perspective: 800px; }

/* --- laid down: rotates forward from the top edge, like a plate set on a table */
.js [data-in3d="lay"] {
  opacity: 0; transform: rotateX(-26deg) translateY(34px);
  transform-origin: 50% 0%;
}
[data-in3d="lay"].is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--lx-e) var(--d,0ms), transform 1.15s var(--lx-e) var(--d,0ms);
}

/* --- dealt: turns in around its leading edge, like a card off the deck */
.js [data-in3d="deal"] {
  opacity: 0; transform: rotateY(-22deg) translateX(30px) translateZ(-70px);
  transform-origin: 0% 50%;
}
[data-in3d="deal"].is-in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--lx-e) var(--d,0ms), transform 1.2s var(--lx-e) var(--d,0ms);
}

/* --- lifted: rises off the sheet toward the reader */
.js [data-in3d="lift"] {
  opacity: 0; transform: translateZ(-90px) translateY(26px);
}
[data-in3d="lift"].is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--lx-e) var(--d,0ms), transform 1.05s var(--lx-e) var(--d,0ms);
}

/* --- turned up: a figure flipping face-up */
.js [data-in3d="turn"] {
  opacity: 0; transform: rotateX(62deg); transform-origin: 50% 100%;
}
[data-in3d="turn"].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--lx-e) var(--d,0ms), transform 1.05s var(--lx-e) var(--d,0ms);
}

/* --- scroll-linked tilt: JS writes --rx / --ty as the element crosses the view */
[data-tilt] {
  transform: rotateX(var(--rx, 0deg)) translateY(var(--ty, 0px)) translateZ(var(--tz, 0px));
  will-change: transform;
}

/* --- the hero: sun crossing her after the line is laid down --------------- */
.lx-hero__plate { position: relative; }
.lx-hero__plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(105deg, transparent 38%, rgba(232,206,122,.16) 48%,
              rgba(255,253,248,.24) 51%, rgba(232,206,122,.16) 54%, transparent 64%);
  transform: translateX(-120%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 66%, transparent 86%);
}
.js .lx-hero.is-drawn .lx-hero__plate::after {
  animation: lx-sweep 3.4s cubic-bezier(.4,0,.2,1) 2.1s both;
}
@keyframes lx-sweep { to { transform: translateX(120%); } }

/* the sea keeps moving after she settles */
.lx-vessel .h-water { stroke-dasharray: 3 9; animation: lx-drift 9s linear infinite; }
@keyframes lx-drift { to { stroke-dashoffset: -96; } }

/* --- the method section: a rule that draws down the steps ----------------- */
.lx-steps-rail { position: relative; }
.lx-steps-rail::before {
  content: ""; position: absolute; right: 1.1rem; top: .4rem; bottom: .4rem; width: 1px;
  background: linear-gradient(180deg, var(--lx-brass), rgba(201,162,39,.15));
  transform: scaleY(var(--p, 0)); transform-origin: top;
  transition: transform .18s linear;
}
.lx-ground--paper .lx-steps-rail::before { background: linear-gradient(180deg, var(--lx-clay), rgba(180,85,58,.15)); }

@media (prefers-reduced-motion: reduce) {
  .js [data-in3d] { opacity: 1 !important; transform: none !important; }
  [data-tilt] { transform: none !important; }
  .lx-hero__plate::after, .js .lx-hero.is-drawn .lx-hero__plate::after { animation: none; display: none; }
  .lx-vessel .h-water { animation: none; stroke-dasharray: none; }
  .lx-steps-rail::before { transform: scaleY(1); }
}

/* ==========================================================================
   17 · CINEMATIC PHOTOGRAPHY
   Original, project-owned raster art replaces the decorative vessel SVGs.
   The technical anatomy drawing remains SVG because its individual paths are
   the interactive data model, not decoration.
   ========================================================================== */

/* Home hero: keep the existing editorial grid, but let a real vessel carry
   the middle of the first viewport. The crop has room on the left for copy. */
.lx-hero__plate {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  min-height: 0;
  margin: 0;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background: var(--lx-hull);
}
.lx-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}
.lx-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,8,13,.86) 0%, rgba(5,8,13,.68) 35%, rgba(5,8,13,.12) 76%),
    linear-gradient(180deg, rgba(5,8,13,.42), transparent 48%, rgba(5,8,13,.60));
  pointer-events: none;
}
.lx-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  filter: saturate(.82) contrast(1.04);
  transform: scale(1.045);
  transition: transform 7s cubic-bezier(.16,1,.3,1), filter 1.2s ease;
}
.js .lx-hero__photo {
  clip-path: inset(0 100% 0 0);
}
.js .lx-hero.is-drawn .lx-hero__photo {
  clip-path: inset(0);
  transition: clip-path 1.45s var(--lx-e) .14s;
}
.js .lx-hero.is-drawn .lx-hero__photo img { transform: scale(1); }
.lx-hero__plate > .lx-vessel { display: none; }

/* Fleet photographs are deliberately full-bleed. A shared aspect ratio keeps
   the five columns calm while object-fit gives every class an equal presence. */
.lx-fleet__item { overflow: hidden; }
.lx-fleet__item img {
  width: calc(100% + clamp(3.2rem, 2rem + 4.4vw, 6rem));
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: calc(clamp(1.6rem, 1rem + 2.2vw, 3rem) * -1);
  margin-bottom: .25rem;
  opacity: .76;
  filter: saturate(.72) contrast(1.06);
  transform: scale(1.01);
  transition: opacity .6s var(--lx-e), transform 1.15s var(--lx-e), filter .8s ease;
}
.lx-fleet__item:hover img {
  opacity: 1;
  filter: saturate(.96) contrast(1.03);
  transform: scale(1.055);
}

/* Interior heroes receive contextual imagery via the active navigation item.
   Specific vessel pages override the fleet default with their own photograph. */
body.atelier:has(.nav__link[href$="fleet.html"][aria-current="page"]) {
  --phero-image: url("../img/photo/generated/motor-yacht.jpg");
  --phero-focus: 68% 52%;
}
body.atelier:has(.nav__link[href$="yacht-charter/"][aria-current="page"]) {
  --phero-image: url("../img/photo/generated/charter-cove.jpg");
  --phero-focus: 72% 56%;
}
body.atelier:has(.nav__link[href$="yachts-for-sale/"][aria-current="page"]),
body.atelier.page-contact {
  --phero-image: url("../img/photo/generated/ownership-survey.jpg");
  --phero-focus: 72% 50%;
}
body.atelier.page-motor {
  --phero-image: url("../img/photo/generated/motor-yacht.jpg");
  --phero-focus: 70% 52%;
}
body.atelier.page-sailing {
  --phero-image: url("../img/photo/generated/sailing-yacht.jpg");
  --phero-focus: 72% 58%;
}
body.atelier.page-superyacht {
  --phero-image: url("../img/photo/generated/superyacht.jpg");
  --phero-focus: 70% 52%;
}
body.atelier.page-catamaran {
  --phero-image: url("../img/photo/generated/catamaran.jpg");
  --phero-focus: 72% 56%;
}
body.atelier.page-explorer {
  --phero-image: url("../img/photo/generated/explorer-yacht.jpg");
  --phero-focus: 70% 54%;
}
body.atelier:has(.nav__link[aria-current="page"]) .phero::before,
body.atelier.page-contact .phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(5,8,13,.98) 0%, rgba(5,8,13,.94) 35%, rgba(5,8,13,.56) 66%, rgba(5,8,13,.30) 100%),
    linear-gradient(180deg, rgba(5,8,13,.08), rgba(5,8,13,.42)),
    var(--phero-image);
  background-size: cover;
  background-position: var(--phero-focus, 70% 50%);
  transform: scale(1.025);
  transition: transform 1.8s var(--lx-e), filter .8s ease;
  filter: saturate(.78) contrast(1.04);
}
.js body.atelier:has(.nav__link[aria-current="page"]) .phero::before,
.js body.atelier.page-contact .phero::before { transform: scale(1); }
.atelier .phero::after { z-index: 0; }
.atelier .phero > .shell { z-index: 1; }

/* Category art: a large photographic editorial plate with one restrained
   reveal, instead of a padded technical thumbnail. */
.atelier .media-frame {
  padding: 0 !important;
  aspect-ratio: 16 / 8.4;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: 0 34px 80px -42px rgba(0,0,0,.75);
}
.atelier .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.atelier .vcard__media {
  border-radius: 10px;
  background: var(--lx-hull);
  border-color: var(--lx-hair-2);
  box-shadow: 0 24px 55px -36px rgba(0,0,0,.8);
}
.atelier .vcard__media img,
.atelier .vcard__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.atelier .vcard:hover .vcard__media img { transform: scale(1.045); }

/* Correct the warm-ground cascade at the end of the stylesheet. Earlier base
   selectors paint all atelier type ivory; these scoped rules are intentionally
   last so headings, body copy and cards stay readable on chart paper. */
body.atelier .lx-ground--paper { color: var(--lx-ink-d2); }
body.atelier .lx-ground--paper :where(p, li, dd, td, figcaption) { color: #334D5D; }
body.atelier .lx-ground--paper :where(h1, h2, h3, h4, h5, h6, strong) { color: var(--lx-ink-d); }
body.atelier .lx-ground--paper :where(.lx-eyebrow, .numeral, [class*="__idx"]) { color: #7A4D18; }
body.atelier .section--white :where(p, li, dd, td, figcaption),
body.atelier .section--alt :where(p, li, dd, td, figcaption) { color: #334D5D; }
body.atelier .section--white :where(h1, h2, h3, h4, h5, h6, strong, b),
body.atelier .section--alt :where(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--lx-ink-d); }
body.atelier .section--white .card :where(h3, h4),
body.atelier .section--alt .card :where(h3, h4) { color: var(--lx-ink-d); }
body.atelier .section--white .card:hover :where(h3, h4),
body.atelier .section--alt .card:hover :where(h3, h4) { color: #7A4D18; }

/* Header CTA is a layout wrapper; only its child link is the brass button. */
body.atelier .header__cta,
body.atelier .header__cta:hover {
  padding: 0;
  background: transparent;
  border: 0;
}

.atelier .design-credit {
  margin-inline-start: auto;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lx-slate);
  white-space: nowrap;
}
.atelier .design-credit a {
  color: var(--lx-brass);
  border-bottom: 1px solid rgba(201,162,39,.32);
  padding-bottom: .16em;
  transition: color .3s var(--lx-e), border-color .3s var(--lx-e);
}
.atelier .design-credit a:hover {
  color: var(--lx-brass-lt);
  border-color: var(--lx-brass-lt);
}

@media (max-width: 719px) {
  .lx-hero__photo img { object-position: 72% 50%; }
  .lx-hero__photo::after {
    background:
      linear-gradient(90deg, rgba(5,8,13,.88), rgba(5,8,13,.38)),
      linear-gradient(180deg, rgba(5,8,13,.48), transparent 44%, rgba(5,8,13,.72));
  }
  body.atelier:has(.nav__link[aria-current="page"]) .phero::before,
  body.atelier.page-contact .phero::before {
    background-image:
      linear-gradient(90deg, rgba(5,8,13,.96), rgba(5,8,13,.62)),
      linear-gradient(180deg, rgba(5,8,13,.16), rgba(5,8,13,.62)),
      var(--phero-image);
    background-position: 62% 50%;
  }
  .atelier .media-frame { aspect-ratio: 4 / 3; border-radius: 8px; }
  .atelier .design-credit { width: 100%; margin-inline-start: 0; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .js .lx-hero__photo { clip-path: inset(0); }
  .lx-hero__photo img,
  body.atelier:has(.nav__link[aria-current="page"]) .phero::before,
  body.atelier.page-contact .phero::before,
  .lx-fleet__item img { transform: none !important; transition: none !important; }
}

/* Mobile navigation must win the later atelier header selectors. Both header
   variants previously re-applied display:flex to every direct child, which
   brought the desktop nav back and pushed the hamburger beyond the viewport. */
@media (max-width: 1024px) {
  body.atelier .header .nav,
  body.atelier .lx-head .nav,
  body.atelier .lx-head .lx-nav { display: none; }

  body.atelier .header__bar,
  body.atelier .lx-head__in {
    width: 100%;
    min-width: 0;
    gap: .75rem;
  }

  body.atelier .header__bar > .brand,
  body.atelier .lx-head__in > .brand {
    min-width: 0;
    max-width: calc(100% - 3.5rem);
    overflow: hidden;
  }

  body.atelier .header__bar > .header__cta,
  body.atelier .lx-head__in > .header__cta {
    display: flex;
    flex: 0 0 auto;
    min-width: 2.75rem;
    margin-inline-start: auto;
  }

  body.atelier .header__cta .btn { display: none; }
  body.atelier .burger { display: block; flex: 0 0 2.75rem; }
  body.atelier .lx-burger {
    display: flex;
    flex: 0 0 2.75rem;
    margin: 0;
  }

  body.atelier .header { z-index: 820; }
  body.atelier .drawer { z-index: 810; }
  body.atelier .lx-head { z-index: 110; }
  body.atelier .lx-sheet {
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(5.7rem + env(safe-area-inset-top)) var(--gutter)
             calc(2rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  body.atelier .brand__mark { width: 1.9rem; height: 1.9rem; }
  body.atelier .brand__name { font-size: .68rem; letter-spacing: .22em; }
  body.atelier .brand__tag { display: none; }
  body.atelier .lx-sheet { align-content: start; padding-top: calc(6.2rem + env(safe-area-inset-top)); }
  body.atelier .lx-sheet a { font-size: clamp(1.65rem, 8vw, 2.25rem); line-height: 1.32; }
}

/* Fleet is an editorial comparison: keep the desktop rhythm to two equal
   columns and let the fifth card close the composition on the centre line. */
@media (min-width: 900px) {
  body.atelier #categories .g-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.atelier #categories .vcard[style*="grid-column"] {
    width: 100%;
    justify-self: center;
  }
}