/* =====================================================================
   FREGATE ISLAND — landing
   Palette stays green + gold. Motion is built like an AE comp: every
   reveal is a mask + a transform, never an opacity fade on its own.
   ===================================================================== */

/* ---------------------------------------------------------------- Fonts */
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/noto-sans-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif";
  src: url("fonts/noto-serif-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  /* `clip`, not `hidden`: the reveal briefly scales <main> past the viewport
     and would otherwise flash a horizontal scrollbar. Unlike `hidden`, clip
     does not turn this into a scroll container, so html stays the vertical
     scrollport and position:sticky keeps working. */
  overflow-x: clip;
  scrollbar-gutter: auto;
}
html.locked {
  overflow-x: clip;
  overflow-y: hidden;
  touch-action: none;
}
html.locked body {
  overflow: hidden;
  touch-action: none;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
ul,
li,
address,
form {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
button,
input {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
}
button {
  cursor: pointer;
}
address {
  font-style: normal;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- Scrollbar
   Hidden completely so no browser gutter reads as a line beside the page. */
html {
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
.scroll-thumb {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1200;
  width: max(18px, calc(18 * var(--px)));
  height: var(--scroll-thumb-h, calc(70 * var(--px)));
  border-radius: 100px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(var(--scroll-thumb-y, 0px));
  background: transparent;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.22s var(--ease), background 0.22s var(--ease);
}
.scroll-thumb::before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(5 * var(--px));
  width: max(3px, calc(3 * var(--px)));
  height: 100%;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.72);
  transition: background 0.22s var(--ease), opacity 0.22s var(--ease);
}
.fregate-root.revealed .scroll-thumb {
  opacity: var(--scroll-thumb-o, 0);
}
.scroll-thumb.is-dragging {
  cursor: grabbing;
}
.scroll-thumb.is-dragging::before,
.scroll-thumb:hover::before {
  background: rgba(255, 255, 255, 0.94);
}

/* --------------------------------------------- Proportional scale system
   Everything is expressed in --px, a fraction of the viewport width, so a
   layout designed at 390 / 1024 / 1440 keeps its exact proportions on any
   screen instead of snapping between breakpoints. Capped at 2240px so the
   design stops growing on ultrawide displays. */
.fregate-root {
  --dw: 390;
  --vw-cap: 100vw;
  --px: calc(min(100vw, var(--vw-cap)) / var(--dw));
  --nav-offset: 0px;
  --menu-edge: calc(22 * var(--px));

  --dark-green: #11382d;
  --green: #006e4b;
  --light-green: #00d09e;
  --gold: #d8ad45;
  --gold-hi: #ffe8ad;
  --gold-lo: #9f781f;
  --sand: #efefdc;
  --ink: #0a2019;
  --outline: rgba(17, 55, 44, 0.2);

  --ease: cubic-bezier(0.22, 0.68, 0.16, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* The travelling shimmer, shared by the buttons and the image frames so they
     catch the light identically. It is ONE soft highlight on a solid-gold field:
     background-size:300% keeps the highlight in the middle third, so at the ends
     of the sweep (0% / 100%) the element shows plain gold. The highlight fades in
     as it enters, sweeps across, fades out as it leaves — and because both ends
     are the same plain gold, the loop re-merges with no visible seam or jump. */
  --rim-gold: linear-gradient(
    110deg,
    var(--gold) 0%,
    var(--gold) 40%,
    #fff6dd 50%,
    var(--gold) 60%,
    var(--gold) 100%
  );

  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: calc(16 * var(--px));
  line-height: 1.55;
  /* Page is green throughout with light text — same treatment the middle
     sections already used. The header bar and the footer logo band opt back
     out to the light colour on their own. */
  background: var(--dark-green);
  color: var(--sand);
  /* deliberately no overflow here — it is handled on <html>, so <body> never
     becomes a scroll container and .exp-sticky stays anchored to the viewport */
}
/* The design width ladder is deliberately dense. A single 390 -> 1024 jump
   (as the previous build had) drives --px down to 0.5 on a 512px viewport,
   which renders body copy at 8px. Each step below keeps --px inside roughly
   0.8-1.3 at every real device width: large phones, phones in landscape,
   small tablets and split-screen windows all stay legible. */
@media screen and (min-width: 481px) {
  .fregate-root {
    --dw: 600;
    --vw-cap: 100vw;
  }
}
@media screen and (min-width: 768px) {
  .fregate-root {
    --dw: 900;
    --vw-cap: 100vw;
  }
}
@media screen and (min-width: 1025px) {
  .fregate-root {
    --dw: 1440;
    --vw-cap: 2240px;
  }
}
.fregate-root.tv-zoom-desktop {
  --dw: 1440;
  --vw-cap: 2240px;
}

/* ----------------------------------------------------------- Typography */
.xl-heading {
  font-family: "Noto Serif", serif;
  font-weight: 200;
  font-size: calc(52 * var(--px));
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.sub-heading {
  font-family: "Noto Serif", serif;
  font-weight: 300;
  font-size: calc(20 * var(--px));
  line-height: 1.3;
}
.lead {
  font-family: "Noto Serif", serif;
  font-weight: 300;
  font-size: calc(28 * var(--px));
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: rgba(239, 239, 220, 0.9);
}
.lead.sm {
  font-size: calc(22 * var(--px));
}
.pull {
  font-family: "Noto Serif", serif;
  font-weight: 200;
  font-size: calc(34 * var(--px));
  line-height: 1.2;
  text-align: center;
  color: var(--gold-hi);
}
.eyebrow,
.section-index {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  /* larger over-titles (was 11) */
  font-size: calc(18 * var(--px));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow i,
.section-index i {
  display: block;
  width: calc(48 * var(--px));
  height: 1px;
  /* explicit gold, not currentColor — the label text is now transparent
     (clipped gradient), which would otherwise make this divider vanish */
  background: var(--gold);
  opacity: 0.55;
}
/* Each .ln is its own line, and it MUST be a block: the split wraps its text
   in a block-level mask, and an inline box containing a block cannot paint a
   background reliably — which silently made every `background-clip: text`
   headline transparent outside the hero. */
.ln {
  display: block;
}

/* ---------------------------------------------------- Shimmering gold text
   One treatment for EVERY gold text on the page, matching the crest: a
   symmetric gold gradient (dark → bright → dark) clipped to the glyphs and
   translated so a bright highlight flows across. Symmetric ends plus a
   one-tile shift make the loop seamless. -webkit-text-fill-color wins over any
   later `color`, so individual gold rules don't need changing. */
.gold-ink,
.eyebrow,
.section-index,
.stat-num,
.stat-unit,
.pull,
.exp-badge,
.news-kicker,
.news-card-meta,
.news-article-meta,
.news-read,
.news-article-body h2,
.news-article-body h3 {
  background-image: linear-gradient(
    100deg,
    #9f781f 0%,
    #d8ad45 12%,
    #ffe8ad 25%,
    #d8ad45 38%,
    #9f781f 50%,
    #d8ad45 62%,
    #ffe8ad 75%,
    #d8ad45 88%,
    #9f781f 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmerGold 5s linear infinite;
}
@keyframes shimmerGold {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* =====================================================================
   LOADING SCREEN — centred gold flare on DEEP FOREST GREEN
   Green ground, matching the page and the theme-color meta, so the boot has
   no light flash before the hero. The "Schein" stays: a warm gold radial
   bloom + rotating rays + glints, and it reads far hotter against the green
   than it did on cream. Type flips to sand/gold for contrast; the crest keeps
   its flowing gold gradient and shimmering rim (in the SVG) and gets a gold
   glow here instead of a drop-shadow, which would vanish on a dark ground.
   Transform/opacity only, one blur on exit.
   ===================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(30 * var(--px));
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 46% at 50% 50%, rgba(216, 173, 69, 0.3), rgba(216, 173, 69, 0) 66%),
    radial-gradient(ellipse 120% 100% at 50% 46%, #17493a 0%, #11382d 52%, #0a2019 100%);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 1.65s cubic-bezier(0.33, 0, 0.18, 1),
    transform 1.65s cubic-bezier(0.33, 0, 0.18, 1);
  will-change: opacity, transform;
  contain: paint;
  backface-visibility: hidden;
}

/* rotating starburst — gold on the green ground */
.ls-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vmax, 1500px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(247, 210, 140, 0.15) 1.3deg, transparent 4.2deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 6%, transparent 58%);
  mask: radial-gradient(circle closest-side, #000 6%, transparent 58%);
  opacity: 0;
  animation: lsRaysIn 2.4s ease-out both, lsSpin 80s linear infinite;
}
@keyframes lsRaysIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lsSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* central warm bloom, breathing */
.ls-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(52vmin, 540px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(247, 210, 140, 0.42), rgba(216, 173, 69, 0.2) 42%, rgba(216, 173, 69, 0) 70%);
  opacity: 0;
  animation: lsCoreBreathe 4.8s cubic-bezier(0.45, 0, 0.2, 1) 0.35s infinite both;
  will-change: opacity, transform;
}
@keyframes lsCoreBreathe {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  30% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
  58% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.045); }
  100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
}

/* brand — crest carries its flowing gold + shimmer rim from the SVG; the glow
   below just lifts it off the green. Wordmark is sand: the green wordmark used
   on the light nav is illegible here, exactly as on the original site where it
   flips to white over dark sections. */
.ls-brand {
  position: relative;
  z-index: 2;
  --brand-lockup-gap: calc(20 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-lockup-gap);
}
.ls-bird {
  width: min(74vw, calc(282 * var(--px)));
  height: auto;
  filter: drop-shadow(0 0 calc(18 * var(--px)) rgba(247, 210, 140, 0.45));
  animation: lsRise 1.5s var(--ease-out) 0.4s both;
}
.ls-stack {
  width: min(92vw, calc(492 * var(--px)));
  --logo-bird-word-gap: min(8.36vw, calc(44.73 * var(--px)));
  --logo-star-gap: min(3.66vw, calc(19.57 * var(--px)));
}
.ls-word {
  width: auto;
  height: auto;
  color: var(--sand);
  animation: lsRise 1.5s var(--ease-out) 0.62s both;
}
.ls-stars {
  margin-bottom: calc(-12 * var(--px));
  animation: lsRise 1.4s var(--ease-out) 0.92s both;
}
.ls-stars .ls-star {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: lsStarIn 0.8s var(--ease-out) both;
  animation-delay: calc(1.08s + var(--s) * 0.13s);
  filter: blur(calc(5 * var(--px)));
}
@keyframes lsStarIn {
  from {
    opacity: 0;
    transform: translateY(calc(7 * var(--px))) scale(0.86);
    filter: blur(calc(5 * var(--px)));
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
.ls-word path {
  opacity: 0;
  animation: lsLetter 0.9s var(--ease-out) both;
  animation-delay: calc(0.72s + var(--i) * 0.07s);
}
/* Taglines under the wordmark. Same rule as the hero: sized off the wordmark
   here too (.ls-word is min(420*--px, 82vw)), so the gold line lands just under
   FREGATE on the loader exactly as it does on the page. */
.ls-brand {
  /* one size for both loader lines, so "THE ULTIMATE PRIVATE ISLAND" and
     "Unique in the world" match — the same treatment the hero uses. */
  --ls-copy: min(calc(25.6 * var(--px)), 4.96vw);
}
.ls-copy {
  --ls-copy-w: min(calc(492 * var(--px)), 92vw);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--px));
  width: var(--ls-copy-w);
  margin-top: calc(5 * var(--px));
}
.ls-divider {
  display: block;
  width: min(var(--ls-copy-w), calc(var(--ls-copy-w) * 0.94));
  aspect-ratio: 2906 / 313;
  height: auto;
  background-image: linear-gradient(
    90deg,
    #9f781f 0%,
    #d8ad45 25%,
    #ffe8ad 50%,
    #d8ad45 75%,
    #9f781f 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: lsRise 1.25s var(--ease-out) 1.18s both, flourishSheen 3.6s linear infinite reverse;
  -webkit-mask: url("images/divider.png") center / contain no-repeat;
  mask: url("images/divider.png") center / contain no-repeat;
  filter: drop-shadow(0 calc(2 * var(--px)) calc(7 * var(--px)) rgba(7, 24, 18, 0.45));
}
.ls-divider.bottom {
  transform: scaleY(-1);
  animation: lsDividerBottomIn 1.25s var(--ease-out) 1.7s both, flourishSheen 3.6s linear infinite reverse;
}
@keyframes lsDividerBottomIn {
  from { opacity: 0; transform: translateY(calc(16 * var(--px))) scaleY(-1); }
  to { opacity: 1; transform: scaleY(-1); }
}
.ls-tagline {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: var(--ls-copy);
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  line-height: 1.22;
  text-transform: uppercase;
  margin: 0;
  animation: lsRise 1.4s var(--ease-out) 1.35s both;
}
/* Takes .gold-ink in the markup for the same flowing shimmer as the hero, but
   on its own gradient: the shared one bottoms out on #9f781f, which all but
   disappears against the loader's dark green. This one rides between --gold and
   near-white so the travel stays legible on the dark ground.

   Both animations have to be named here. .ls-tagline already declares lsRise
   and, being the later single-class rule, it would otherwise replace
   .gold-ink's shimmerGold outright and the shimmer would never run. */
.ls-tagline.gold-ink {
  animation: lsRise 1.4s var(--ease-out) 1.35s both, shimmerGold 5s linear infinite;
  background-image: linear-gradient(
    100deg,
    #d8ad45 0%,
    #e8bd6a 12%,
    #fff6dd 25%,
    #e8bd6a 38%,
    #d8ad45 50%,
    #e8bd6a 62%,
    #fff6dd 75%,
    #e8bd6a 88%,
    #d8ad45 100%
  );
}
.ls-sub {
  font-family: "Noto Serif", serif;
  font-weight: 300;
  font-size: var(--ls-copy);
  line-height: 1.2;
  margin: 0;
  color: var(--sand);
  animation: lsRise 1.4s var(--ease-out) 1.55s both;
}
@keyframes lsRise {
  from { opacity: 0; transform: translateY(calc(16 * var(--px))); }
  to { opacity: 1; transform: none; }
}
@keyframes lsLetter {
  from { opacity: 0; transform: translateY(30%); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .ls-brand {
    --ls-mobile-w: min(calc(296 * var(--px)), 76vw);
    --brand-lockup-gap: calc(16 * var(--px));
    --ls-copy: min(calc(16 * var(--px)), 4.1vw);
  }
  .ls-bird {
    width: calc(var(--ls-mobile-w) * 0.573);
  }
  .ls-stack,
  .ls-copy {
    width: var(--ls-mobile-w);
  }
  .ls-stack {
    --logo-bird-word-gap: calc(var(--ls-mobile-w) * 0.091);
    --logo-star-gap: calc(var(--ls-mobile-w) * 0.0398);
  }
  .ls-divider {
    width: calc(var(--ls-mobile-w) * 0.94);
  }
}
@media (orientation: landscape) and (max-width: 1280px) and (max-height: 640px),
  ((hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 640px)) {
  .loader {
    gap: calc(10 * var(--px));
  }
  .ls-brand {
    --ls-landscape-w: min(calc(340 * var(--px)), 60vw, 74svh);
    --brand-lockup-gap: calc(9 * var(--px));
    --ls-copy: min(calc(15 * var(--px)), 3.35svh);
  }
  .ls-bird {
    width: calc(var(--ls-landscape-w) * 0.52);
  }
  .ls-stack,
  .ls-copy {
    width: var(--ls-landscape-w);
  }
  .ls-stack {
    --logo-bird-word-gap: calc(var(--ls-landscape-w) * 0.072);
    --logo-star-gap: calc(var(--ls-landscape-w) * 0.032);
  }
  .ls-copy {
    gap: calc(3 * var(--px));
    margin-top: calc(2 * var(--px));
  }
  .ls-divider {
    width: calc(var(--ls-landscape-w) * 0.92);
  }
}

/* real decode progress */
.ls-bar {
  display: none;
  position: relative;
  z-index: 2;
  width: calc(190 * var(--px));
  height: 2px;
  background: rgba(239, 239, 220, 0.18);
  overflow: hidden;
  animation: lsFadeIn 0.8s ease 0.9s both;
}
.ls-bar span {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transition: width 0.45s var(--ease-out);
}
@keyframes lsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* exit — the page is already painted underneath; this is only the soft curtain. */
.loader.done {
  opacity: 0;
  transform: translate3d(0, calc(-10 * var(--px)), 0) scale(1.018);
  pointer-events: none;
}
.loader.done .ls-brand,
.loader.done .ls-bar {
  animation: lsContentExit 1.48s cubic-bezier(0.33, 0, 0.18, 1) forwards;
  will-change: opacity, transform, filter;
}
@keyframes lsContentExit {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(calc(-10 * var(--px)));
    filter: blur(calc(2.4 * var(--px)));
  }
}

/* The page underneath is fully decoded and painted before the curtain lifts.
   Keep this handoff instant under the opaque loader so the visible transition
   is one motion: the loader leaving, not the page catching up behind it. */
.fregate-root main,
.fregate-root .nav,
.fregate-root .footer {
  opacity: 1;
  transition: none;
}
.fregate-root.booting main,
.fregate-root.booting .nav,
.fregate-root.booting .footer {
  opacity: 0;
}
.fregate-root.revealing main,
.fregate-root.revealing .nav,
.fregate-root.revealing .footer {
  opacity: 1;
}
.fregate-root.revealed main,
.fregate-root.revealed .nav,
.fregate-root.revealed .footer {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .loader,
  .fregate-root main,
  .fregate-root .nav,
  .fregate-root .footer {
    transition-duration: 0.25s;
  }
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.brand-stars {
  display: block;
  flex: none;
  height: auto;
  overflow: visible;
  filter:
    drop-shadow(0 0 calc(3 * var(--px)) rgba(255, 244, 214, 0.52))
    drop-shadow(0 calc(2 * var(--px)) calc(7 * var(--px)) rgba(159, 120, 31, 0.42));
}
.brand-word-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--logo-star-gap, calc(3.5 * var(--px)));
  line-height: 0;
  margin-top: calc(var(--logo-bird-word-gap, calc(8 * var(--px))) - var(--brand-lockup-gap, 0px));
}
.brand-word-stack > svg {
  display: block;
  width: 100%;
  height: auto;
  flex: none;
}

/* =====================================================================
   NAV
   ===================================================================== */
/* The default navigation state is intentionally minimal: only the menu control
   floats over the page. The full branded bar is enabled by JS only when the
   visitor is below the hero and scrolls upward. */
.nav {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: calc(14 * var(--px)) var(--menu-edge) calc(12 * var(--px));
  background: transparent;
  isolation: isolate;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.22, 0.68, 0.16, 1),
    filter 0.42s cubic-bezier(0.22, 0.68, 0.16, 1);
  will-change: transform, opacity, filter;
}
.nav.is-header-visible {
  animation: navFadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.nav.is-nav-hidden {
  transform: translateY(calc(-10 * var(--px)));
  opacity: 0;
  filter: blur(calc(18 * var(--px)));
  pointer-events: none;
  animation: navFadeOut 0.34s cubic-bezier(0.22, 0.68, 0.16, 1) both;
}
.fregate-root.revealed .nav {
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.22, 0.68, 0.16, 1),
    filter 0.42s cubic-bezier(0.22, 0.68, 0.16, 1);
}
.fregate-root.revealed .nav.is-nav-hidden {
  transform: translateY(calc(-10 * var(--px)));
  opacity: 0;
  filter: blur(calc(18 * var(--px)));
  pointer-events: none;
}
@keyframes navFadeIn {
  from {
    opacity: 0;
    filter: blur(calc(16 * var(--px)));
    transform: translateY(calc(-8 * var(--px)));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes navFadeOut {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
  to {
    opacity: 0;
    filter: blur(calc(18 * var(--px)));
    transform: translateY(calc(-10 * var(--px)));
  }
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78));
  backdrop-filter: blur(24px) saturate(1.35) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.35) brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 calc(12 * var(--px)) calc(30 * var(--px)) rgba(7, 24, 18, 0.08);
  transition: opacity 0.38s cubic-bezier(0.22, 0.68, 0.16, 1);
  will-change: opacity;
}
.nav.is-header-visible::before {
  opacity: 1;
}
@-moz-document url-prefix() {
  .nav::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.84));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.is-header-visible {
    animation: navFadeInFirefox 0.34s ease-out both;
  }
  .nav.is-nav-hidden {
    animation: navFadeOutFirefox 0.3s ease-in both;
  }
  @keyframes navFadeInFirefox {
    from {
      opacity: 0;
      filter: blur(calc(10 * var(--px)));
      transform: translateY(calc(-6 * var(--px)));
    }
    to {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
  }
  @keyframes navFadeOutFirefox {
    from {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
    to {
      opacity: 0;
      filter: blur(calc(12 * var(--px)));
      transform: translateY(calc(-8 * var(--px)));
    }
  }
}
.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity 0.38s cubic-bezier(0.22, 0.68, 0.16, 1);
  will-change: opacity;
}
.nav.is-header-visible::after {
  opacity: 0.92;
}
.nav-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(12 * var(--px));
  opacity: 1;
  filter: blur(0);
  transition:
    opacity 0.36s var(--ease),
    filter 0.36s var(--ease);
}
.nav.is-nav-hidden .nav-inner {
  opacity: 0;
  filter: blur(calc(10 * var(--px)));
  transition-delay: 0s;
}
.nav.is-header-visible .nav-inner {
  opacity: 1;
  filter: blur(0);
  transition-delay: 0s;
}
.brand {
  --brand-lockup-gap: calc(5 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-lockup-gap);
  opacity: 0;
  pointer-events: none;
  filter: blur(calc(8 * var(--px)));
  transform: translateY(calc(-7 * var(--px)));
  transition:
    opacity 0.36s var(--ease),
    filter 0.36s var(--ease),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav.is-header-visible .brand {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
  transform: none;
  transition-delay: 0s;
}
/* Crest carries the same flowing gold + shimmering rim as the loader (its
   gradients are defined inline in the SVG). Wordmark green. Larger than
   before so the bird reads properly in the bar. */
.brand-bird {
  width: calc(62 * var(--px));
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 calc(1 * var(--px)) calc(3 * var(--px)) rgba(159, 120, 31, 0.4));
  transition: transform 0.6s var(--ease-out);
}
.nav-stack {
  width: calc(88 * var(--px));
}
.brand-word {
  width: 100%;
  color: var(--green);
}
.brand:hover .brand-bird {
  transform: none;
}

.menu-button {
  --menu-shine: linear-gradient(
    100deg,
    #9f781f 0%,
    #d8ad45 12%,
    #ffe8ad 25%,
    #d8ad45 38%,
    #9f781f 50%,
    #d8ad45 62%,
    #ffe8ad 75%,
    #d8ad45 88%,
    #9f781f 100%
  );
  display: flex;
  align-items: center;
  gap: calc(11 * var(--px));
  justify-self: start;
  font-size: calc(13 * var(--px));
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  padding: calc(9 * var(--px)) calc(13 * var(--px));
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 calc(6 * var(--px)) calc(18 * var(--px)) rgba(7, 24, 18, 0.18);
  text-shadow: 0 calc(1 * var(--px)) calc(5 * var(--px)) rgba(7, 24, 18, 0.58);
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    color 0.3s var(--ease),
    filter 0.3s var(--ease);
}
.menu-close {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--px));
  justify-self: start;
  font-size: calc(11 * var(--px));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
}
.menu-label {
  color: currentColor;
}
.menu-button:hover {
  background-color: transparent;
  filter: none;
}
.menu-button:hover .menu-label,
.menu-button[aria-expanded="true"] .menu-label {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
  animation: none;
}
.burger,
.x {
  position: relative;
  display: block;
  width: calc(26 * var(--px));
  height: calc(14 * var(--px));
}
.burger i,
.x i {
  position: absolute;
  left: 0;
  width: 100%;
  height: max(2px, calc(2.2 * var(--px)));
  background: currentColor;
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out);
}
.menu-button:hover .burger i,
.menu-button[aria-expanded="true"] .burger i {
  background: currentColor;
  animation: none;
}
.burger i:nth-child(1) {
  top: 1px;
}
.burger i:nth-child(2) {
  bottom: 1px;
  width: 72%;
}
.menu-button:hover .burger i:nth-child(2) {
  width: 100%;
}
/* when the dropdown is open the burger folds into an X */
.menu-button[aria-expanded="true"] {
  background-color: transparent;
  color: var(--gold);
  filter: none;
  border-color: rgba(216, 173, 69, 0.9);
  box-shadow: none;
  text-shadow: none;
}
.nav.is-header-visible .menu-button {
  color: var(--green);
  border-color: rgba(0, 110, 75, 0.74);
  box-shadow: none;
  text-shadow: none;
}
.nav.is-header-visible .menu-button:hover {
  background-color: transparent;
  color: var(--green);
  border-color: rgba(0, 110, 75, 0.74);
}
.nav.is-header-visible .menu-button[aria-expanded="true"] {
  background-color: transparent;
  color: var(--gold);
  border-color: rgba(216, 173, 69, 0.9);
}
.menu-button[aria-expanded="true"] .burger i:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.menu-button[aria-expanded="true"] .burger i:nth-child(2) {
  bottom: auto;
  top: 50%;
  width: 100%;
  transform: translateY(-50%) rotate(-45deg);
}
/* The header CTA has been removed; the nav is now just Menu (left) + centred
   wordmark. The empty right grid track keeps the wordmark centred. */
@media (max-width: 640px) {
  .brand-bird {
    width: calc(50 * var(--px));
  }
  .nav-stack {
    width: calc(76 * var(--px));
  }
}
@media (max-width: 480px) {
  .nav {
    padding-top: calc(19 * var(--px));
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .nav::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.74));
    backdrop-filter: blur(24px) saturate(1.35) brightness(1.04);
    -webkit-backdrop-filter: blur(24px) saturate(1.35) brightness(1.04);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.34),
      0 calc(10 * var(--px)) calc(26 * var(--px)) rgba(7, 24, 18, 0.08);
  }
  .menu-button {
    gap: 0;
    padding: calc(9 * var(--px)) calc(12 * var(--px));
  }
  .menu-button .menu-label {
    display: none;
  }
}

/* =====================================================================
   MENU — simple dropdown
   A compact GREEN panel that drops under the menu button. It does NOT cover
   the page (no overlay, no scroll lock). White links; on hover they take the
   same shimmering gold as the crest. Its top is set from the header height in
   JS so it always hangs just below the bar.
   ===================================================================== */
.menu {
  display: block;
  position: fixed;
  top: calc(60 * var(--px));
  left: var(--menu-edge);
  z-index: 890;
  width: min(84vw, calc(330 * var(--px)));
  padding: calc(14 * var(--px)) calc(20 * var(--px)) calc(16 * var(--px));
  background: linear-gradient(165deg, #11382d 0%, #0a2a20 100%);
  border: 1px solid rgba(255, 232, 173, 0.22);
  border-radius: calc(4 * var(--px));
  box-shadow: 0 calc(18 * var(--px)) calc(48 * var(--px)) rgba(6, 23, 16, 0.4);
  transform-origin: top left;
  opacity: 0;
  transform: translateY(calc(-8 * var(--px))) scale(0.98);
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.menu[hidden] {
  display: none;
}
.menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.menu-links {
  display: flex;
  flex-direction: column;
}
.menu-links li {
  border-bottom: 1px solid rgba(255, 232, 173, 0.12);
}
.menu-links li:last-child {
  border-bottom: 0;
}
.menu-links a {
  position: relative;
  display: block;
  padding: calc(11 * var(--px)) 0 calc(11 * var(--px)) 0;
  font-family: "Noto Serif", serif;
  font-weight: 300;
  font-size: calc(16 * var(--px));
  line-height: 1.2;
  color: #ffffff;
  transition: padding-left 0.3s var(--ease-out);
}
.menu-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: width 0.3s var(--ease-out);
}
/* hover: white → shimmering gold, same treatment as the crest text */
.menu-links a:hover,
.menu-links a:focus-visible {
  padding-left: calc(18 * var(--px));
  background-image: linear-gradient(
    100deg,
    #9f781f 0%, #d8ad45 12%, #ffe8ad 25%, #d8ad45 38%, #9f781f 50%,
    #d8ad45 62%, #ffe8ad 75%, #d8ad45 88%, #9f781f 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmerGold 3s linear infinite;
}
.menu-links a:hover::before,
.menu-links a:focus-visible::before {
  width: calc(11 * var(--px));
}
.menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--px));
  margin-top: calc(12 * var(--px));
  padding-top: calc(12 * var(--px));
  border-top: 1px solid rgba(255, 232, 173, 0.2);
  font-size: calc(11 * var(--px));
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
}
.menu-foot > a:hover {
  color: var(--gold-hi);
}
.menu-socials {
  display: flex;
  gap: calc(15 * var(--px));
}
.menu-socials a {
  display: grid;
  place-items: center;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.25s, transform 0.25s var(--ease-out);
}
.menu-socials svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.menu-socials a:hover {
  color: var(--gold-hi);
  transform: translateY(calc(-2 * var(--px)));
}

/* =====================================================================
   HERO
   ===================================================================== */
/* The island must never be covered by type, at ANY viewport shape. Its position
   is not guesswork — it is derived from the crop maths.

   Measured on every hero variant: the landmass spans 38.5%-61.5% of the image
   height, i.e. +-11.5% around the image centre. .hero-media is 116% of the hero
   height and centred on it, and the img is scaled up to 1.14 by kenBurns, so
   the island reaches 0.115 * 1.14 * Rh = 0.131 * Rh from the centre, where

     Rh = max(1.16 * heroH, 100vw / imageAspect)     (object-fit: cover)

   On top of that the parallax drifts the media by up to 7% of its own height,
   i.e. 0.0812 * heroH — and that drift is already non-zero at scroll 0 whenever
   min-height makes the hero taller than the viewport. So the guard is a SUM of
   the two, not a max:

     height-driven  0.131 * 1.16 + 0.0812  = 23.3% of heroH
     width-driven   0.131 / 1.5006         =  8.74vw, plus the same 8.12%

   The hero is then a 3-row grid: sky band, island band, sea band. Type lives in
   rows 1 and 3 only, so resizing the window moves the bands with the island
   instead of letting it drift under the type. Verified across 14 viewport
   shapes from 360x640 to 3440x900. */
.hero {
  /* The FREGATE wordmark's width cap, shared so the bottom line can be sized
     from it and is therefore never wider than FREGATE. */
  --word-w: min(calc(360 * var(--px)), 54vw, 37svh);
  /* Half the island, without any parallax allowance. */
  --half: max(17%, 9.3vw);

  /* The parallax only ever drifts the media DOWNWARDS once you start scrolling
     (the media centre falls behind the viewport centre, so the shift is
     positive). Downward drift moves the island AWAY from the lockup above it
     and TOWARDS the type below it — so the allowance belongs on the bottom band
     only. Reserving it on both, as this did at first, threw away ~8% of the
     hero at the top and squeezed the lockup to nothing on low windows.

     The one case where the island drifts UP is at scroll 0 with min-height
     making the hero taller than the viewport: then d = (heroH - vh) / 2 and the
     shift is -0.28d, i.e. 0.14 * (heroH - vh), still capped at 7% of the media
     height. That is --drift-up, and it is zero whenever the hero fits. */
  --drift-up: max(0px, min(8.2%, calc(0.14 * (560 * var(--px) - 100svh))));
  --band-top: calc(var(--half) + var(--drift-up));
  --band-bot: calc(var(--half) + 8.2%);

  /* The fixed header's own height plus a little air. This is a GRID ROW, not
     padding on the lockup: as padding it could exceed a short row, collapse the
     content box to zero and make the crest vanish (or, capped, let the header
     cut into it). As a row it is reserved first, and the lockup gets the rest. */
  --nav-h: 0px;
  position: relative;
  margin-top: var(--nav-offset);
  height: calc(100svh - var(--nav-offset));
  min-height: calc(560 * var(--px));
  display: grid;
  grid-template-rows:
    var(--nav-h)
    calc(50% - var(--band-top) - var(--nav-h))
    1fr
    calc(50% - var(--band-bot));
  overflow: hidden;
  color: var(--sand);
}
/* Portrait formats use the vertical/mobile island image, so the wider island
   guard is needed there too. Landscape must keep the desktop crop; otherwise a
   300%-zoomed TV reports a narrow CSS viewport and incorrectly gets mobile. */
@media ((max-width: 1280px) and (orientation: portrait)),
  ((hover: none) and (pointer: coarse) and (orientation: portrait)) {
  .hero {
    --half: max(17%, 27.9vw);
  }
}
@media (min-width: 481px) and (max-width: 920px) and (min-height: 720px) {
  .hero {
    --word-w: min(calc(420 * var(--px)), 50vw, 40svh);
  }
}
/* gold frame inset from the hero edges, matting the first image */
.hero::after {
  content: "";
  position: absolute;
  inset: calc(14 * var(--px));
  padding: 2px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.hero-media {
  position: absolute;
  inset: 0 0 -8%;
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}
.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media img {
  /* a very slow push-in — the shot is never quite static */
  animation: kenBurns 26s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.14);
  }
}
.fregate-root.booting .hero-media img,
.fregate-root.booting .hero-lockup .hero-brand,
.fregate-root.booting .hero-copy,
.fregate-root.booting .hero::after {
  opacity: 0 !important;
  filter: blur(calc(18 * var(--px)));
}
.fregate-root.revealing .hero-media img.loaded,
.fregate-root.revealed .hero-media img.loaded {
  opacity: 1 !important;
  filter: blur(0);
  transition:
    opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.fregate-root.revealing .hero-lockup .hero-brand,
.fregate-root.revealing .hero-copy,
.fregate-root.revealed .hero-lockup .hero-brand,
.fregate-root.revealed .hero-copy {
  opacity: 1 !important;
  filter: blur(0);
  transition:
    opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.fregate-root.revealing .hero::after,
.fregate-root.revealed .hero::after {
  opacity: 0.85 !important;
  filter: blur(0);
  transition:
    opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.fregate-root.revealing .hero-media img.loaded,
.fregate-root.revealing .hero-lockup .hero-brand,
.fregate-root.revealing .hero-copy,
.fregate-root.revealing .hero::after {
  filter: none !important;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 24, 18, 0.55) 0%, rgba(7, 24, 18, 0.05) 32%, rgba(7, 24, 18, 0.12) 58%, rgba(7, 24, 18, 0.82) 100%);
  transition: opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  transition: opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fregate-root.revealing .hero-scrim,
.fregate-root.revealing .hero-grain,
.fregate-root.revealed .hero-scrim,
.fregate-root.revealed .hero-grain {
  opacity: 0;
}
/* Row 1: crest + wordmark over the sky. overflow:hidden is the hard backstop —
   if the band ever gets shorter than the lockup, the lockup is clipped rather
   than allowed to spill onto the island. padding-top clears the header bar. */
.hero-lockup {
  grid-row: 2;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(16 * var(--px));
  overflow: visible;
}
@media (min-width: 1281px) and (hover: hover) and (pointer: fine) {
  .hero-lockup {
    transform: translateY(clamp(calc(18 * var(--px)), 3svh, calc(42 * var(--px))));
  }
}
@media (max-width: 480px) {
  .hero-lockup {
    transform: translateY(calc(82 * var(--px)));
  }
  .hero-copy {
    transform: translateY(calc(-2.2svh - 3 * var(--px)));
  }
}
@media (orientation: landscape) and (max-width: 599px),
  ((hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 599px)) {
  .hero {
    --word-w: clamp(calc(260 * var(--px)), 32vw, calc(420 * var(--px)));
    --fw: clamp(calc(240 * var(--px)), 34vw, calc(420 * var(--px)));
    height: calc(100svh - var(--nav-offset));
    min-height: calc(100svh - var(--nav-offset));
    display: block;
  }
  .hero-media {
    inset: 0;
  }
  .hero-media img {
    object-position: center center;
  }
  .hero-lockup {
    position: absolute;
    top: clamp(calc(26 * var(--px)), 7svh, calc(70 * var(--px)));
    left: 0;
    right: 0;
    height: clamp(calc(120 * var(--px)), 30svh, calc(220 * var(--px)));
    padding: 0 calc(18 * var(--px));
    transform: none;
  }
  .hero-lockup .hero-brand {
    height: 100%;
  }
  .hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(calc(54 * var(--px)), 10svh, calc(92 * var(--px)));
    padding: 0 calc(20 * var(--px));
    transform: none;
    gap: calc(3 * var(--px));
    --copy-size: clamp(calc(10.5 * var(--px)), 2.5svh, calc(18 * var(--px)));
  }
  .hero-divider {
    width: var(--fw);
    filter:
      drop-shadow(0 0 calc(5 * var(--px)) rgba(255, 232, 173, 0.45))
      drop-shadow(0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, 0.45));
  }
  .hero-tagline {
    background-image: linear-gradient(
      100deg,
      #d8ad45 0%,
      #ffe8ad 20%,
      #fff6dd 34%,
      #d8ad45 52%,
      #ffe8ad 72%,
      #fff6dd 86%,
      #d8ad45 100%
    );
    text-shadow: 0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.72);
  }
  .hero-sub {
    color: #fff6dd;
    text-shadow:
      0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.8),
      0 0 calc(8 * var(--px)) rgba(255, 232, 173, 0.18);
  }
  .hero-map {
    bottom: clamp(calc(22 * var(--px)), 4svh, calc(36 * var(--px)));
    font-size: clamp(calc(7.5 * var(--px)), 1.65svh, calc(10 * var(--px)));
  }
  .hero::after {
    inset: calc(12 * var(--px));
  }
}
/* the gap has to give way too when the band is thin, or it eats the crest */
.hero-lockup .hero-brand {
  --brand-lockup-gap: min(calc(6 * var(--px)), 5%);
  gap: var(--brand-lockup-gap);
}
/* The definite-height chain that sizes the lockup to its band: the row gives
   .hero-lockup a definite height, height:100% passes it to .hero-brand, and the
   % max-heights below then resolve. This works in BOTH directions — the lockup
   shrinks when the band is short and grows when the band is tall, which is why
   the width caps on .hb-bird / .hb-word are set generously: they are there to
   stop it running off the sides, not to hold the size down. */
.hero-lockup .hero-brand {
  height: 100%;
  min-height: 0;
  overflow: visible;
}

/* Last row: the loading screen's two lines, over the sea.

   The row runs from the island down to the hero's bottom EDGE, but the block
   should read as centred between the island and the gold FRAME, which sits
   14*--px inside that edge. The row also starts 8.2% lower than the island
   actually is, because --band-bot carries the parallax allowance.

     row centre     = 75% + band-bot/2
     wanted centre  = (50% + half + 100% - 14*--px) / 2 = 75% + half/2 - 7*--px
     difference     = (band-bot - half)/2 + 7*--px = 4.1% + 7*--px

   Done as a transform, not padding: padding shrinks the content box, and with
   only ~130px of type in a 213px row the block hit the top edge and the 2px
   rule was silently clipped off by the overflow below. A transform moves the
   whole box and leaves the content box full height. */
.hero-copy {
  grid-row: 4;
  position: relative;
  z-index: 2;
  padding: 0 calc(24 * var(--px));
  /* pulled up so the taller two-flourish block clears the island above and the
     Explore cue below on every format (verified 360x640 … 3440x900) */
  transform: translateY(calc(-6.5svh - 7 * var(--px)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: min(calc(8 * var(--px)), 1.1svh);
  overflow: visible;
}
@media (min-width: 481px) and (max-width: 920px) and (min-height: 720px) {
  .hero-copy {
    transform: translateY(calc(-5.2svh - 6 * var(--px)));
  }
}
/* Same lines as the loader but set larger, since here they carry the whole
   lower half of the frame. The tagline takes .gold-ink in the markup, so it
   gets the identical flowing-gold shimmer as .eyebrow / .section-index / .pull
   — hence no `color` here, which would fight the clipped gradient. The shadows
   are the one addition: on the loader these sat on flat green, here on a photo. */
/* "Unique in the world" keeps its size. The tagline is sized off the WORDMARK
   instead: .hb-word is min(720*--px, 92vw) wide, and the tracked line runs
   about 17em, so font-size = 0.9 * wordmark / 17 lands the gold line at ~90% of
   FREGATE — just under it, never over. Both terms are scaled the same way, so
   the ratio holds at every viewport. */
.hero-copy {
  /* One size for both lines: the tagline sets it (tied to --fw so it never
     exceeds FREGATE), and "Unique in the world" takes the SAME size. */
  --copy-size: var(--hero-copy-js, min(calc(var(--fw, 58vw) / 17.55), 8.4svh));
}
/* The baroque divider crowns the block (PNG alpha mask over the bird's flowing
   gold, shimmering the same way); a plain gold rule (::after) closes it below
   "Unique in the world". */
.hero-divider {
  align-self: center;
  /* Same treatment as the loading screen: wider than the copy, but still
     inside the FREGATE wordmark width. */
  width: var(--fw, 74vw);
  aspect-ratio: 2906 / 313;
  height: auto;
  background-image: linear-gradient(
    90deg,
    #9f781f 0%,
    #d8ad45 25%,
    #ffe8ad 50%,
    #d8ad45 75%,
    #9f781f 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat;
  animation: flourishSheen 3.6s linear infinite reverse;
  -webkit-mask: url("images/divider.png") center / contain no-repeat;
  mask: url("images/divider.png") center / contain no-repeat;
  filter: drop-shadow(0 calc(2 * var(--px)) calc(6 * var(--px)) rgba(7, 24, 18, 0.5));
}
/* The bottom flourish: a copy of the top divider, mirrored across the horizontal
   axis (scaleY -1) so it reflects the top one and frames the text symmetrically.
   Replaces the old plain gold rule. */
.hero-divider.bottom {
  transform: scaleY(-1);
}
.hero-tagline {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: var(--copy-size);
  letter-spacing: 0.08em;
  line-height: 1.22;
  text-transform: uppercase;
  text-shadow: 0 calc(2 * var(--px)) calc(12 * var(--px)) rgba(7, 24, 18, 0.72);
  /* the trailing letter-spacing after the last glyph would sit the line
     fractionally left of centre */
  text-indent: 0.08em;
}
.hero-sub {
  font-family: "Noto Serif", serif;
  font-weight: 300;
  font-size: var(--copy-size);
  line-height: 1.15;
  color: var(--sand);
  text-shadow: 0 calc(2 * var(--px)) calc(14 * var(--px)) rgba(7, 24, 18, 0.72);
}
.hero-brand {
  --brand-lockup-gap: calc(6 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--brand-lockup-gap);
}
/* The band height is the real governor (see .hero-lockup); these widths only
   keep the lockup off the side edges. Together the two max-heights plus the gap
   account for the whole band, so the lockup fills whatever room the format
   gives it — small on a squat window, large on a tall one. */
.hb-bird {
  width: min(calc(250 * var(--px)), calc(var(--word-w) * 0.62), 36vw);
  max-height: 40%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 calc(2 * var(--px)) calc(9 * var(--px)) rgba(7, 24, 18, 0.55));
}
/* The wordmark row. This carries the 40% that used to sit on .hb-word itself —
   the shrink chain needs a definite height at this level, otherwise the
   flourishes' percentage height has nothing to resolve against. */
.hb-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --logo-bird-word-gap: min(calc(36.36 * var(--px)), 5.45vw, 3.73svh);
  --logo-star-gap: min(calc(14.32 * var(--px)), 2.15vw, 1.43svh);
  gap: var(--logo-star-gap);
  width: var(--word-w);
  max-width: 100%;
  max-height: 48%;
  height: auto;
  overflow: visible;
}
.hb-word {
  width: 100%;
  height: auto;
  flex: 0 1 auto;
  color: var(--sand);
}
.hb-stars {
  width: 100%;
  filter:
    drop-shadow(0 0 calc(3 * var(--px)) rgba(255, 244, 214, 0.52))
    drop-shadow(0 calc(2 * var(--px)) calc(7 * var(--px)) rgba(159, 120, 31, 0.42));
}
@keyframes flourishSheen {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* Coordinates in the bottom-right, now a link to the island on Google Maps with
   a gold location pin. */
.hero-map {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(30 * var(--px));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--px));
  font-size: calc(10 * var(--px));
  letter-spacing: 0.2em;
  color: rgba(239, 239, 220, 0.62);
  transition: color 0.3s var(--ease);
}
.hero-map:hover {
  color: var(--sand);
}
.map-pin {
  width: calc(15 * var(--px));
  height: auto;
  flex: none;
  fill: var(--gold-hi);
  filter:
    drop-shadow(0 0 calc(5 * var(--px)) rgba(255, 232, 173, 0.75))
    drop-shadow(0 0 calc(12 * var(--px)) rgba(216, 173, 69, 0.55))
    drop-shadow(0 calc(1 * var(--px)) calc(4 * var(--px)) rgba(7, 24, 18, 0.55));
  animation: pinGoldGlow 2.8s ease-in-out infinite;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease), fill 0.3s var(--ease);
}
.hero-map:hover .map-pin {
  transform: translateY(calc(-2 * var(--px)));
  fill: var(--gold-hi);
  filter:
    drop-shadow(0 0 calc(8 * var(--px)) rgba(255, 244, 214, 0.9))
    drop-shadow(0 0 calc(18 * var(--px)) rgba(216, 173, 69, 0.75))
    drop-shadow(0 calc(2 * var(--px)) calc(5 * var(--px)) rgba(7, 24, 18, 0.62));
}
@keyframes pinGoldGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 calc(4 * var(--px)) rgba(255, 232, 173, 0.62))
      drop-shadow(0 0 calc(10 * var(--px)) rgba(216, 173, 69, 0.45))
      drop-shadow(0 calc(1 * var(--px)) calc(4 * var(--px)) rgba(7, 24, 18, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 calc(7 * var(--px)) rgba(255, 244, 214, 0.88))
      drop-shadow(0 0 calc(16 * var(--px)) rgba(216, 173, 69, 0.68))
      drop-shadow(0 calc(1 * var(--px)) calc(4 * var(--px)) rgba(7, 24, 18, 0.55));
  }
}
@media (min-width: 700px) {
  .hero-copy {
    padding-left: calc(40 * var(--px));
    padding-right: calc(40 * var(--px));
  }
}
@media (orientation: landscape) and (max-width: 599px),
  ((hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 599px)) {
  .hero {
    --word-w: clamp(calc(260 * var(--px)), 32vw, calc(420 * var(--px)));
    --fw: clamp(calc(240 * var(--px)), 34vw, calc(420 * var(--px)));
    height: calc(100svh - var(--nav-offset));
    min-height: calc(100svh - var(--nav-offset));
    display: block;
  }
  .hero-media {
    inset: 0;
  }
  .hero-media img {
    object-position: center center;
  }
  .hero-lockup {
    position: absolute;
    top: clamp(calc(26 * var(--px)), 7svh, calc(70 * var(--px)));
    left: 0;
    right: 0;
    height: clamp(calc(120 * var(--px)), 30svh, calc(220 * var(--px)));
    padding: 0 calc(18 * var(--px));
    transform: none;
  }
  .hero-lockup .hero-brand {
    height: 100%;
  }
  .hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(calc(54 * var(--px)), 10svh, calc(92 * var(--px)));
    padding: 0 calc(20 * var(--px));
    transform: none;
    gap: calc(3 * var(--px));
    --copy-size: clamp(calc(10.5 * var(--px)), 2.5svh, calc(18 * var(--px)));
  }
  .hero-divider {
    width: var(--fw);
    filter:
      drop-shadow(0 0 calc(5 * var(--px)) rgba(255, 232, 173, 0.45))
      drop-shadow(0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, 0.45));
  }
  .hero-tagline {
    background-image: linear-gradient(
      100deg,
      #d8ad45 0%,
      #ffe8ad 20%,
      #fff6dd 34%,
      #d8ad45 52%,
      #ffe8ad 72%,
      #fff6dd 86%,
      #d8ad45 100%
    );
    text-shadow: 0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.72);
  }
  .hero-sub {
    color: #fff6dd;
    text-shadow:
      0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.8),
      0 0 calc(8 * var(--px)) rgba(255, 232, 173, 0.18);
  }
  .hero-map {
    bottom: clamp(calc(22 * var(--px)), 4svh, calc(36 * var(--px)));
    font-size: clamp(calc(7.5 * var(--px)), 1.65svh, calc(10 * var(--px)));
  }
  .hero::after {
    inset: calc(12 * var(--px));
  }
}
@media (orientation: landscape) and (max-width: 599px) and (max-height: 640px),
  ((hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 599px) and (max-height: 640px)) {
  .hero {
    --word-w: clamp(calc(285 * var(--px)), 36vw, calc(430 * var(--px)));
    --fw: clamp(calc(270 * var(--px)), 39vw, calc(455 * var(--px)));
    height: max(calc(920 * var(--px)), 250svh);
    min-height: max(calc(920 * var(--px)), 250svh);
    display: block;
    background: #06231b;
  }
  .hero-media {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
  }
  .hero-media picture,
  .hero-media img {
    width: 100%;
    height: 100%;
  }
  .hero-media img {
    object-fit: cover;
    object-position: center center;
  }
  .hero-lockup {
    position: absolute;
    top: clamp(calc(118 * var(--px)), 34svh, calc(178 * var(--px)));
    left: 0;
    right: 0;
    height: clamp(calc(128 * var(--px)), 34svh, calc(195 * var(--px)));
    padding: 0 calc(18 * var(--px));
    transform: none;
  }
  .hero-lockup .hero-brand {
    height: 100%;
  }
  .hero-copy {
    position: absolute;
    top: calc(100svh + clamp(calc(330 * var(--px)), 90svh, calc(470 * var(--px))));
    bottom: auto;
    left: 0;
    right: 0;
    padding: 0 calc(20 * var(--px));
    transform: none;
    gap: calc(10 * var(--px));
    --copy-size: clamp(calc(15.5 * var(--px)), 4.1svh, calc(24 * var(--px)));
  }
  .hero-copy [data-reveal],
  .hero-copy [data-reveal].in {
    transform: none !important;
    transition-property: opacity;
  }
  .hero-divider {
    width: var(--fw);
    filter:
      drop-shadow(0 0 calc(5 * var(--px)) rgba(255, 232, 173, 0.45))
      drop-shadow(0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, 0.45));
  }
  .hero-tagline {
    background-image: linear-gradient(
      100deg,
      #d8ad45 0%,
      #ffe8ad 20%,
      #fff6dd 34%,
      #d8ad45 52%,
      #ffe8ad 72%,
      #fff6dd 86%,
      #d8ad45 100%
    );
    text-shadow: 0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.72);
  }
  .hero-sub {
    color: #fff6dd;
    text-shadow:
      0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.8),
      0 0 calc(8 * var(--px)) rgba(255, 232, 173, 0.18);
  }
  .hero-map {
    top: auto;
    bottom: clamp(calc(22 * var(--px)), 4svh, calc(34 * var(--px)));
    font-size: clamp(calc(7.5 * var(--px)), 1.55svh, calc(10 * var(--px)));
  }
}
@media (min-width: 768px) and (max-width: 1280px) and (min-height: 760px) and (hover: hover) and (pointer: fine) {
  .hero-lockup {
    transform: translateY(clamp(calc(130 * var(--px)), 18svh, calc(190 * var(--px))));
  }
}
.fregate-root.tv-zoom-desktop .hero {
  --word-w: min(calc(360 * var(--px)), 54vw, 37svh);
  --half: max(17%, 9.3vw);
  --drift-up: max(0px, min(8.2%, calc(0.14 * (560 * var(--px) - 100svh))));
  --band-top: calc(var(--half) + var(--drift-up));
  --band-bot: calc(var(--half) + 8.2%);
  height: calc(100svh - var(--nav-offset));
  min-height: calc(560 * var(--px));
  display: grid;
  grid-template-rows:
    var(--nav-h)
    calc(50% - var(--band-top) - var(--nav-h))
    1fr
    calc(50% - var(--band-bot));
  background: transparent;
}
.fregate-root.tv-zoom-desktop .hero-media {
  inset: 0 0 -8%;
  height: auto;
}
.fregate-root.tv-zoom-desktop .hero-media img {
  object-fit: cover;
  object-position: center center;
}
.fregate-root.tv-zoom-desktop .hero-lockup {
  grid-row: 2;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  padding: 0 calc(16 * var(--px));
  transform: translateY(clamp(calc(18 * var(--px)), 3svh, calc(42 * var(--px))));
}
.fregate-root.tv-zoom-desktop .hero-copy {
  grid-row: 4;
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  padding: 0 calc(40 * var(--px));
  transform: translateY(calc(-6.5svh - 7 * var(--px)));
  gap: min(calc(8 * var(--px)), 1.1svh);
  --copy-size: var(--hero-copy-js, min(calc(var(--fw, 58vw) / 17.55), 8.4svh));
}
.fregate-root.tv-zoom-desktop .hero-copy [data-reveal],
.fregate-root.tv-zoom-desktop .hero-copy [data-reveal].in {
  transition-property: opacity, transform;
}
.fregate-root.tv-zoom-desktop .hero-divider {
  width: var(--fw, 74vw);
}
.fregate-root.tv-zoom-desktop .hero-map {
  top: auto;
  bottom: calc(30 * var(--px));
  font-size: calc(10 * var(--px));
}
.fregate-root.tv-zoom-desktop .hero::after {
  inset: calc(14 * var(--px));
}
/* =====================================================================
   SECTIONS
   ===================================================================== */
.section {
  position: relative;
  padding: calc(84 * var(--px)) 0;
  /* Native hash jumps land on the section box, before its top padding. Keep
     this small so the first heading does not sit too far below the header. */
  scroll-margin-top: calc(10 * var(--px));
}
/* Between two sections the visitor sees the sum of one section's bottom padding
   and the next one's top padding. Before the FIRST section there is only its own
   top padding (the hero has none), so the gap to "01 — The Island" looked half
   as big as the gaps to 02/03/04. Add one section padding of top margin here so
   the hero→01 gap matches the others. */
.hero + .section {
  margin-top: calc(84 * var(--px));
}
/* Sections that END on an image (island, villas) carried that image's bottom
   margin into the gap before the next over-title, making 02/03 wider than 01/04.
   Zeroing the last child's bottom margin makes every inter-section gap identical
   (just the two paddings). */
.section > *:last-child {
  margin-bottom: 0;
}
.footer {
  scroll-margin-top: calc(10 * var(--px));
}
.section.dark {
  background: transparent;
  color: var(--sand);
}
.section.dark .lead {
  color: rgba(239, 239, 220, 0.88);
}
.section.dark .section-index {
  color: var(--gold-hi);
}
.wrap {
  padding: 0 calc(24 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--px));
}
.wrap-wide {
  padding: 0 calc(14 * var(--px));
}
/* the Conservation film keeps the same 40-unit rhythm as every other block
   (media-pair / media.full), above and below, so spacing stays uniform */
#conservation .wrap-wide {
  margin: calc(40 * var(--px)) 0;
}
.centered-block {
  align-items: center;
  text-align: center;
  gap: calc(30 * var(--px));
}
.centered {
  text-align: center;
}
@media (min-width: 700px) {
  .section {
    padding: calc(110 * var(--px)) 0;
  }
  .hero + .section {
    margin-top: calc(110 * var(--px));
  }
  .wrap {
    padding: 0 calc(40 * var(--px));
    gap: calc(30 * var(--px));
  }
  .wrap-wide {
    padding: 0 calc(24 * var(--px));
  }
  #conservation .wrap-wide {
    margin: calc(54 * var(--px)) 0;
  }
  .lead {
    font-size: calc(34 * var(--px));
    max-width: calc(1000 * var(--px));
  }
  .lead.sm {
    font-size: calc(24 * var(--px));
  }
  .pull {
    font-size: calc(52 * var(--px));
  }
}

/* --------------------------------------------------------------- Media */
.media {
  position: relative;
  overflow: hidden;
  clip-path: none;
}
/* gold frame on every image — sits at the figure edge, above the image, and
   is clipped by the reveal so it wipes in with the photo.
   Deliberately a plain, still gold line: a travelling gradient was tried here
   and looked like a progress bar. A ring is mostly two long horizontal edges,
   and anything sliding along them reads as a loading indicator no matter how
   the tile is sized. The buttons keep their shimmer because they are small and
   read as one object; the frames stay still. */
/* Gold frame with the SAME travelling shimmer as the buttons. A border can't
   animate a gradient, so the frame is a filled box carrying --rim-gold, masked
   down to a 2px ring (paint the whole box, subtract the padding-box, keep the
   2px difference). The fixed --rim-tile keeps the glints fine on a wide frame,
   not one slow sweep. */
.media::after,
.video::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  z-index: 3;
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.media picture {
  display: block;
  overflow: hidden;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transform: scale(1.12);
  transition: transform 1.65s var(--ease-out), filter 1.15s ease;
  will-change: transform;
}
/* full-width images are inset from the window edge by the same amount as the
   side-by-side pair below, so their gold frame sits free of the viewport edge */
.media.full {
  margin: calc(40 * var(--px)) calc(14 * var(--px));
}
.media.full img {
  aspect-ratio: 4 / 5;
}
.media-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(14 * var(--px));
  padding: 0 calc(14 * var(--px));
  margin: calc(40 * var(--px)) 0;
}
@media (min-width: 700px) {
  .media-pair {
    grid-template-columns: 1fr 1fr;
    gap: calc(20 * var(--px));
    padding: 0 calc(24 * var(--px));
    margin: calc(54 * var(--px)) 0;
  }
  .media.full {
    margin: calc(54 * var(--px)) calc(24 * var(--px));
  }
  .media.full img {
    aspect-ratio: 16 / 8;
  }
  .media img {
    aspect-ratio: 4 / 4.4;
  }
}
/* Parallax rides on <picture>, the reveal scale rides on <img>. They are
   separate elements on purpose: the reveal wants a long transition, the
   parallax must be instant, and they would fight over `transform`.
   The 1.18 overscan gives the drift room so no edge is ever exposed. */
.media[data-parallax] picture {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.18);
}
.js .media {
  opacity: 0;
  clip-path: inset(0 0 -2% 0);
  transform: translateY(calc(22 * var(--px))) scale(0.975);
  filter: blur(calc(16 * var(--px)));
  transition:
    opacity 1.15s ease,
    transform 1.45s var(--ease-out),
    filter 1.15s ease;
  will-change: opacity, transform, filter;
}
.js .media.in {
  opacity: 1;
  clip-path: none;
  transform: none;
  filter: blur(0);
}
.js .media.in img {
  transform: scale(1);
}
@media (max-width: 699.98px) {
  .js .media {
    clip-path: none;
    opacity: 0;
    transform: translateY(calc(18 * var(--px))) scale(0.98);
    filter: blur(calc(14 * var(--px)));
    transition:
      opacity 1.05s ease,
      transform 1.35s var(--ease-out),
      filter 1.05s ease;
  }
  .js .media.in {
    clip-path: none;
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  .js .media img {
    transform: scale(1.105);
  }
  .js .media.in img {
    transform: scale(1);
  }
}
/* no-JS: show everything */
.fregate-root:not(.js) .media {
  clip-path: none;
}
.fregate-root:not(.js) .media img {
  transform: none;
}

/* ---------------------------------------------------------- Image lightbox */
html.lightbox-locked {
  overflow-y: hidden;
}
html.lightbox-locked body {
  overflow: hidden;
  touch-action: none;
}
.media[data-lightbox-ready],
.exp-visual[data-lightbox-ready],
.news-article-visual[data-lightbox-ready],
.news-gallery figure[data-lightbox-ready] {
  cursor: pointer;
}
.image-lightbox {
  --lb-gap: calc(12 * var(--px));
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: calc(6 * var(--px));
  background:
    radial-gradient(circle at 20% 18%, rgba(216, 173, 69, 0.08) 0, rgba(216, 173, 69, 0) 34vw),
    radial-gradient(circle at 78% 72%, rgba(0, 110, 75, 0.2) 0, rgba(0, 110, 75, 0) 42vw),
    linear-gradient(155deg, #12382d 0%, #09271f 54%, #03130f 100%);
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.34s;
}
.image-lightbox.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.image-lightbox__frame {
  position: relative;
  width: var(--lb-frame-w, min(calc(1500 * var(--px)), calc(100dvw - var(--lb-gap))));
  height: var(--lb-frame-h, auto);
  max-width: calc(100dvw - var(--lb-gap));
  max-height: calc(100dvh - var(--lb-gap));
  transform: scale(0.996);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.34s ease;
}
.image-lightbox.is-open .image-lightbox__frame {
  transform: scale(1);
  opacity: 1;
}
.image-lightbox__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  opacity: 0;
  filter: blur(calc(18 * var(--px)));
  transform: scale(0.996);
  box-shadow: 0 calc(22 * var(--px)) calc(70 * var(--px)) rgba(0, 0, 0, 0.44);
  transition:
    opacity 0.42s ease,
    filter 0.48s ease,
    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.image-lightbox__img.is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.image-lightbox__img:not([src]),
.image-lightbox__img[src=""] {
  visibility: hidden;
}
.image-lightbox__frame.is-loading .image-lightbox__img {
  opacity: 0;
  filter: blur(calc(18 * var(--px)));
  transform: scale(0.996);
}
.image-lightbox__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.image-lightbox__close {
  position: fixed;
  top: calc(18 * var(--px));
  right: calc(18 * var(--px));
  z-index: 3;
  width: calc(50 * var(--px));
  height: calc(50 * var(--px));
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-hi);
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  border: 0;
  border-radius: 0;
  clip-path: var(--notch);
  box-shadow:
    0 calc(10 * var(--px)) calc(28 * var(--px)) rgba(0, 0, 0, 0.34),
    0 0 calc(18 * var(--px)) rgba(216, 173, 69, 0.12);
  transition:
    color 0.28s ease,
    transform 0.28s var(--ease),
    box-shadow 0.28s ease;
}
.image-lightbox__close::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  clip-path: var(--notch);
  background: rgba(7, 24, 18, 0.7);
  transition: background 0.28s ease, box-shadow 0.28s ease;
}
.image-lightbox__close-x {
  position: relative;
  z-index: 1;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
}
.image-lightbox__close-x i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(22 * var(--px));
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
}
.image-lightbox__close-x i:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.image-lightbox__close-x i:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.image-lightbox__close:hover {
  color: #2a1a04;
  transform: translateY(calc(-1 * var(--px)));
  box-shadow:
    0 calc(14 * var(--px)) calc(34 * var(--px)) rgba(0, 0, 0, 0.38),
    0 0 calc(24 * var(--px)) rgba(255, 232, 173, 0.2);
}
.image-lightbox__close:hover::before {
  background: linear-gradient(135deg, var(--gold) 0%, #e2bf5c 42%, var(--gold-hi) 100%);
}
@media (max-width: 699.98px) {
  .image-lightbox {
    --lb-gap: calc(8 * var(--px));
    padding: calc(4 * var(--px));
  }
  .image-lightbox__frame,
  .image-lightbox__img {
    max-width: calc(100dvw - var(--lb-gap));
    max-height: calc(100dvh - var(--lb-gap));
  }
  .image-lightbox__close {
    top: calc(12 * var(--px));
    right: calc(12 * var(--px));
    width: calc(46 * var(--px));
    height: calc(46 * var(--px));
  }
}

/* ---------------------------------------------------------------- Video */
.video {
  position: relative;
  overflow: hidden;
  background: var(--dark-green);
  clip-path: inset(0 0 100% 0);
}
.js .video.in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.3s var(--ease-out);
}
.fregate-root:not(.js) .video {
  clip-path: none;
}
.video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--dark-green) center / cover;
}
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video-play span {
  position: relative;
  display: block;
  width: calc(74 * var(--px));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 232, 173, 0.6);
  background: rgba(17, 56, 45, 0.32);
  backdrop-filter: blur(4px);
  transition: transform 0.5s var(--ease-out), background 0.4s, border-color 0.4s;
}
.video-play span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: calc(14 * var(--px)) solid var(--gold-hi);
  border-top: calc(9 * var(--px)) solid transparent;
  border-bottom: calc(9 * var(--px)) solid transparent;
}
.video-play:hover span {
  transform: scale(1.1);
  background: rgba(216, 173, 69, 0.28);
  border-color: var(--gold-hi);
}
.video.playing .video-play {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

/* ---------------------------------------------------------- Video theatre */
.video-showcase {
  padding-top: calc(76 * var(--px));
}
.video-theatre {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(18 * var(--px));
  padding: calc(40 * var(--px)) calc(14 * var(--px)) 0;
}
.video-theatre-stage {
  min-height: 0;
  align-self: start;
  aspect-ratio: 16 / 9;
  background: transparent;
}
.video-theatre-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #071812;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.video-theatre-stage video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #071812;
  transition:
    opacity 0.42s ease,
    filter 0.48s ease,
    transform 0.5s var(--ease-out);
}
.video-theatre-stage video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.video-theatre-stage.is-switching video {
  opacity: 0;
  filter: blur(calc(14 * var(--px)));
  transform: scale(0.992);
}
.video-theatre-stage.is-switching::before,
.video-theatre-stage.is-loading::before {
  opacity: 1;
}
.video-theatre-stage figcaption {
  position: absolute;
  left: calc(18 * var(--px));
  top: calc(16 * var(--px));
  z-index: 4;
  color: var(--gold-hi);
  font-size: calc(11 * var(--px));
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 calc(2 * var(--px)) calc(16 * var(--px)) rgba(7, 24, 18, 0.82);
  pointer-events: none;
}
.theatre-center-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: calc(86 * var(--px));
  height: calc(86 * var(--px));
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.96);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  border-radius: 50%;
  background: rgba(239, 239, 220, 0.1);
  backdrop-filter: blur(calc(18 * var(--px))) saturate(1.22);
  -webkit-backdrop-filter: blur(calc(18 * var(--px))) saturate(1.22);
  box-shadow:
    0 calc(20 * var(--px)) calc(52 * var(--px)) rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.28s ease,
    transform 0.36s var(--ease-out),
    color 0.26s ease,
    background 0.26s ease;
  -webkit-tap-highlight-color: transparent;
}
.theatre-center-play::before,
.theatre-center-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.theatre-center-play::before {
  z-index: 0;
  background: rgba(239, 239, 220, 0.08);
  transition: background 0.26s ease;
}
.theatre-center-play::after {
  z-index: 1;
  padding: 2px;
  opacity: 0;
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity 0.28s ease;
}
.theatre-center-play span {
  position: relative;
  z-index: 2;
  width: 0;
  height: 0;
  margin-left: calc(4 * var(--px));
  border-left: calc(15 * var(--px)) solid currentColor;
  border-top: calc(10 * var(--px)) solid transparent;
  border-bottom: calc(10 * var(--px)) solid transparent;
}
.video-theatre-stage.is-playing .theatre-center-play,
.video-theatre-stage.is-switching .theatre-center-play,
.video-theatre-stage.is-loading .theatre-center-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
}
@media (hover: none), (pointer: coarse) {
  .video-theatre .theatre-center-play {
    display: none;
  }
}
@media (max-width: 699.98px) {
  .video-theatre .theatre-center-play {
    display: none;
  }
}
.theatre-center-play:hover,
.theatre-center-play:focus-visible {
  color: #2a1a04;
  background: transparent;
  transform: translate(-50%, -50%) scale(1.05);
}
.theatre-center-play:hover::before,
.theatre-center-play:focus-visible::before {
  background: linear-gradient(135deg, var(--gold) 0%, #e2bf5c 42%, var(--gold-hi) 100%);
}
.theatre-center-play:hover::after,
.theatre-center-play:focus-visible::after {
  opacity: 1;
}
.video-playlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--px));
}
.video-playlist button {
  position: relative;
  min-height: calc(42 * var(--px));
  padding: calc(10 * var(--px)) calc(10 * var(--px));
  clip-path: var(--notch);
  color: var(--gold-hi);
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  font-size: calc(10 * var(--px));
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}
.video-playlist button::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 0;
  clip-path: var(--notch);
  background: #123329;
  transition: background 0.32s ease;
}
.video-playlist button span {
  position: relative;
  z-index: 1;
}
.video-playlist button:hover,
.video-playlist button.is-active {
  color: #2a1a04;
}
.video-playlist button:hover::after,
.video-playlist button.is-active::after {
  background: linear-gradient(135deg, var(--gold) 0%, #e2bf5c 40%, var(--gold-hi) 100%);
}
@media (min-width: 700px) {
  .video-theatre {
    grid-template-columns: minmax(0, 1fr) minmax(calc(230 * var(--px)), calc(330 * var(--px)));
    gap: calc(20 * var(--px));
    padding: calc(54 * var(--px)) calc(24 * var(--px)) 0;
    align-items: stretch;
  }
  .video-theatre-stage {
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
  }
  .video-theatre-stage video {
    min-height: 100%;
    aspect-ratio: auto;
  }
  .video-playlist {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, minmax(calc(48 * var(--px)), 1fr));
    align-content: stretch;
    height: 100%;
  }
  .video-playlist button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
    font-size: calc(10.5 * var(--px));
  }
}

/* ---------------------------------------------------------------- Stats */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(26 * var(--px)) calc(16 * var(--px));
  margin: calc(18 * var(--px)) 0 calc(6 * var(--px));
  border-top: 1px solid rgba(216, 173, 69, 0.32);
  padding-top: calc(28 * var(--px));
}
.section.dark .stats,
.stats.gold {
  border-color: rgba(216, 173, 69, 0.32);
}
.stats li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(3 * var(--px));
}
.stat-num {
  font-family: "Noto Serif", serif;
  font-weight: 200;
  font-size: calc(46 * var(--px));
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.stat-unit {
  font-family: "Noto Serif", serif;
  font-size: calc(20 * var(--px));
  color: var(--gold);
  opacity: 0.8;
}
.stat-label {
  flex: 1 0 100%;
  margin-top: calc(6 * var(--px));
  font-size: calc(11.5 * var(--px));
  line-height: 1.45;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
@media (min-width: 700px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(30 * var(--px));
  }
  .stat-num {
    font-size: calc(62 * var(--px));
  }
}

/* --------------------------------------------------------- Detail grids */
.detail-grid {
  display: grid;
  gap: calc(20 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: 1.7;
  opacity: 0.92;
}
@media (min-width: 700px) {
  /* keep the experiences block on the same 54-unit top rhythm as the media blocks */
  .exp {
    padding-top: calc(54 * var(--px));
  }
  .detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(26 * var(--px)) calc(40 * var(--px));
    font-size: calc(15 * var(--px));
  }
  .detail-grid.wide {
    grid-template-columns: 1fr 1fr;
  }
}

/* =====================================================================
   EXPERIENCES — sticky visual + cards
   ===================================================================== */
.exp {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(24 * var(--px));
  /* 40 top for the block rhythm; 14 sides so the image sits the SAME distance
     from the edge as every other section image (.media.full / .media-pair) */
  padding: calc(40 * var(--px)) calc(14 * var(--px)) 0;
}
.exp-sticky {
  position: relative;
}
.exp-visual {
  position: relative;
  overflow: hidden;
  background: rgba(7, 24, 18, 0.28);
}
.exp-visual img {
  width: 100%;
  /* das ganze Foto zeigen (kein Cover-Crop); die Hoehe folgt dem echten
     Seitenverhaeltnis. Am Desktop wird sie unten gedeckelt. */
  height: auto;
  object-fit: contain;
  transform: scale(1.115);
  filter: blur(calc(16 * var(--px)));
  transition:
    opacity 1.05s ease,
    transform 1.4s var(--ease-out),
    filter 1.05s ease;
  will-change: opacity, transform, filter;
}
.exp-frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold);
  pointer-events: none;
  z-index: 3;
}
.exp-badge {
  position: absolute;
  left: calc(22 * var(--px));
  bottom: calc(18 * var(--px));
  font-family: "Noto Serif", serif;
  font-size: calc(40 * var(--px));
  line-height: 1;
  color: var(--gold-hi);
  text-shadow: 0 2px 24px rgba(7, 24, 18, 0.7);
}
/* the pull quote must not crowd the sticky column when it releases */
.exp + .wrap {
  margin-top: calc(54 * var(--px));
}
/* TABS, not an accordion: the four card headers sit side by side in one row and
   the active card's body shows full-width beneath them — so every button is
   visible at once and the image above never leaves the screen, on every device.
   `display:contents` dissolves each .card so its header and body drop straight
   into this grid; headers fill row 1, every body sits in row 2 (col 1/-1) and
   overlaps — only the active one has height. */
.exp-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(16 * var(--px)) calc(8 * var(--px));
  align-items: start;
}
.card {
  display: contents;
}
.card-body {
  grid-row: 2;
  grid-column: 1 / -1;
}
/* Each card header is now an outline button, exactly like "Explore our
   stories": notch, shimmering gold rim, dark inner fill, gold text — and it
   fills gold when hovered or when its card is open. */
.card header {
  grid-row: 1;
  /* stretch every tab to the tallest one so the row is even even when labels
     wrap to a different number of lines on a phone */
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(5 * var(--px));
  padding: calc(12 * var(--px)) calc(10 * var(--px));
  cursor: pointer;
  clip-path: var(--notch);
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  color: var(--gold-hi);
  transition: color 0.4s var(--ease);
}
.card header::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: var(--notch);
  background: #123329;
  transition: background 0.45s var(--ease);
  z-index: 0;
}
.card header h3 {
  position: relative;
  z-index: 1;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: calc(12 * var(--px));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.card-no {
  order: -1;
  position: relative;
  z-index: 1;
  font-size: calc(12 * var(--px));
  letter-spacing: 0.2em;
}
.card:hover header,
.card.active header {
  color: #2a1a04;
}
.card:hover header::after,
.card.active header::after {
  background: linear-gradient(135deg, var(--gold) 0%, #e2bf5c 40%, var(--gold-hi) 100%);
}
/* No accordion, no overlap: only the active tab's panel is in the flow, the rest
   are display:none. It just appears in place, stacked — this is what stops the
   text "popping up in the wrong spot and vanishing". */
.card-body {
  display: none;
}
.card.active .card-body {
  display: block;
}
.card-body ul {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--px));
  padding-bottom: calc(14 * var(--px));
  font-size: calc(14 * var(--px));
  opacity: 0.85;
}
.card-body ul + ul {
  border-top: 1px solid rgba(255, 232, 173, 0.14);
  padding-top: calc(14 * var(--px));
}
.card-body li {
  padding-left: calc(16 * var(--px));
  position: relative;
}
.card-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(9 * var(--px));
  width: calc(6 * var(--px));
  height: 1px;
  background: var(--gold);
}
@media (min-width: 900px) {
  .exp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(calc(360 * var(--px)), 1fr);
    align-items: start;
    gap: calc(34 * var(--px));
    padding: calc(54 * var(--px)) calc(24 * var(--px)) 0;
  }
  .exp-sticky {
    position: sticky;
    top: calc(var(--header-height, calc(88 * var(--px))) + calc(18 * var(--px)));
    align-self: start;
  }
  .exp-visual {
    margin: 0;
    min-height: min(calc(690 * var(--px)), calc(100svh - var(--header-height, calc(88 * var(--px))) - calc(72 * var(--px))));
  }
  .exp-visual img {
    width: 100%;
    height: min(calc(690 * var(--px)), calc(100svh - var(--header-height, calc(88 * var(--px))) - calc(72 * var(--px))));
    min-height: calc(520 * var(--px));
    object-fit: cover;
  }
  .exp-cards {
    margin: 0;
    align-self: start;
  }
  .card header {
    padding: calc(16 * var(--px)) calc(16 * var(--px));
  }
  .card header h3 {
    font-size: calc(14 * var(--px));
  }
  .card.active .card-body {
    padding-top: calc(14 * var(--px));
  }
}

/* =====================================================================
   BUTTONS — a shimmering gold rim. The button body never moves: the shimmer
   is a background-position animation on the rim layer only, so there is no
   transform, no magnetic offset and no sparkle field.
   ===================================================================== */
.fregate-root {
  --notch: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(13 * var(--px)) calc(26 * var(--px));
  font-size: calc(11.5 * var(--px));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: var(--notch);
  /* the rim: the shared --rim-gold tile at a fixed width (--rim-tile). The
     animation moves by exactly one tile, so it loops with no jump. */
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
}
/* the highlight sweeps from one plain-gold end to the other; both ends look the
   same, so the loop re-merges seamlessly (no jump) */
@keyframes rimShimmer {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 100% 0;
  }
}
/* inner fill, inset by the rim width and clipped to the same notch */
.btn::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 1;
  clip-path: var(--notch);
  transition: background 0.45s var(--ease);
}
.btn-label {
  position: relative;
  z-index: 2;
}

/* --- solid gold */
.btn-gold {
  color: #2a1a04;
}
.btn-gold::after {
  background: linear-gradient(135deg, #b98b24 0%, var(--gold) 40%, #dfbb55 100%);
}
.btn-gold:hover::after {
  background: linear-gradient(135deg, var(--gold) 0%, #e2bf5c 40%, var(--gold-hi) 100%);
}

/* --- outline: rim only, fills with gold on hover */
.btn-outline {
  color: var(--gold-hi);
  transition: color 0.45s var(--ease);
}
.btn-outline::after {
  background: #123329;
}
.btn-outline:hover {
  color: #2a1a04;
}
.btn-outline:hover::after {
  background: linear-gradient(135deg, var(--gold) 0%, #e2bf5c 40%, var(--gold-hi) 100%);
}
.btn-wide {
  width: 100%;
  padding: calc(16 * var(--px));
}
/* the rim brightens on hover, still without moving anything */
/* hover only brightens — keep the same animation-duration so the shimmer
   phase never jumps */
.btn:hover {
  filter: brightness(1.1);
}

/* =====================================================================
   STORIES / COMING
   ===================================================================== */
.stories {
  background: linear-gradient(170deg, #11382d, #06201a);
  color: var(--sand);
}
.stories .xl-heading {
  font-size: calc(46 * var(--px));
}
.coming {
  text-align: center;
  padding: calc(96 * var(--px)) 0;
}
/* Coming Back Soon shows the SAME lockup as the top of the page (hero): the gold
   shimmering crest over the FREGATE wordmark in sand, same sizes and the same
   tight spacing between the two. */
.coming-lockup {
  --brand-lockup-gap: calc(6 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-lockup-gap);
  margin-top: calc(18 * var(--px));
}
.crest {
  width: min(calc(366 * var(--px)), 52vw);
  height: auto;
  filter: drop-shadow(0 calc(2 * var(--px)) calc(9 * var(--px)) rgba(7, 24, 18, 0.55));
}
.coming-stack {
  width: min(calc(630 * var(--px)), 82vw);
  --logo-bird-word-gap: min(calc(57.27 * var(--px)), 7.455vw);
  --logo-star-gap: min(calc(25.06 * var(--px)), 3.26vw);
}
.coming-word {
  display: block;
  width: 100%;
  height: auto;
  color: var(--sand);
}
.coming-stars {
  filter: drop-shadow(0 calc(2 * var(--px)) calc(9 * var(--px)) rgba(7, 24, 18, 0.56));
}
/* The drawn frigatebird on the blossoming branch, as on the original site.
   Sits below the "Coming Back Soon" heading and carries the same gold as the
   wordmark; it only breathes, it does not soar (the branch is anchored). */
.bird-branch {
  display: block;
  width: calc(180 * var(--px));
  height: auto;
  margin: calc(40 * var(--px)) auto 0;
  filter: drop-shadow(0 calc(8 * var(--px)) calc(26 * var(--px)) rgba(159, 102, 44, 0.28));
  animation: branch-breathe 9s ease-in-out infinite;
}
@keyframes branch-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(calc(-6 * var(--px))) scale(1.012);
  }
}
@keyframes soar {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(calc(-10 * var(--px))) rotate(-2.5deg);
  }
}
@media (min-width: 700px) {
  .stories .xl-heading {
    font-size: calc(78 * var(--px));
  }
  .bird-branch {
    width: calc(420 * var(--px));
  }
}
@media (min-width: 1100px) {
  .bird-branch {
    width: calc(454 * var(--px));
  }
}

/* =====================================================================
   FOOTER + FORM
   ===================================================================== */
.footer {
  position: relative;
  background: transparent;
  color: var(--sand);
  padding: calc(70 * var(--px)) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(calc(18 * var(--px)), 4vw, calc(72 * var(--px)));
  align-items: center;
}
.footer-wrap {
  grid-row: 1;
  grid-column: 1 / -1;
  display: grid;
  gap: calc(40 * var(--px));
  padding: 0 calc(24 * var(--px));
}
.footer-copy {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: 1.65;
  color: rgba(239, 239, 220, 0.82);
}
.footer-copy .lead {
  color: var(--sand);
}
.footer-copy .section-index {
  color: var(--gold-hi);
}
.form {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--px));
}
.form-row {
  display: grid;
  gap: calc(16 * var(--px));
}
.field {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--px));
}
.field > span {
  font-size: calc(10.5 * var(--px));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 232, 173, 0.7);
}
.field input {
  padding: calc(12 * var(--px)) 0;
  border-bottom: 1px solid rgba(239, 239, 220, 0.28);
  font-size: calc(15 * var(--px));
  color: var(--sand);
  transition: border-color 0.4s;
}
.field input::placeholder {
  color: rgba(239, 239, 220, 0.32);
}
.field input:focus {
  border-color: var(--gold);
  outline: none;
}
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: calc(11 * var(--px));
  font-size: calc(12 * var(--px));
  line-height: 1.55;
  color: rgba(239, 239, 220, 0.7);
  cursor: pointer;
}
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.box {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  margin-top: calc(2 * var(--px));
  border: 1px solid rgba(239, 239, 220, 0.4);
  transition: background 0.3s, border-color 0.3s;
}
.box svg {
  width: 70%;
  fill: none;
  stroke: #14261e;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset 0.35s var(--ease-out);
}
.checkbox input:checked + .box {
  background: var(--gold);
  border-color: var(--gold);
}
.checkbox input:checked + .box svg {
  stroke-dashoffset: 0;
}
.form-success {
  padding: calc(18 * var(--px)) 0;
  color: var(--gold-hi);
}
/* The hand-drawn plate at the very bottom. The PNG carries its own alpha, so it
   sits directly on the footer green without a frame. */
.footer-illustration {
  grid-row: 2;
  grid-column: 3;
  justify-self: end;
  position: relative;
  width: fit-content;
  margin: calc(30 * var(--px)) 0 0;
  overflow: visible;
}
.footer-illustration img {
  display: block;
  margin-left: auto;
  width: clamp(calc(116 * var(--px)), 30vw, calc(300 * var(--px)));
  height: auto;
  transform: scaleX(-1);
  transform-origin: center;
}
.js .footer-illustration img {
  opacity: 0;
  filter: blur(calc(18 * var(--px)));
  transform: scaleX(-1) scale(1.08);
  transition:
    opacity 1.15s var(--ease-out),
    filter 1.15s var(--ease-out),
    transform 1.45s var(--ease-out);
  will-change: opacity, filter, transform;
}
.js .footer-illustration.in img.loaded {
  opacity: 1;
  filter: blur(0);
  transform: scaleX(-1) scale(1);
}
.js .footer-illustration {
  opacity: 0;
  clip-path: inset(0 0 -2% 0);
  transform: translateY(calc(22 * var(--px))) scale(0.975);
  filter: blur(calc(16 * var(--px)));
  transition:
    opacity 1.15s ease,
    transform 1.45s var(--ease-out),
    filter 1.15s ease;
  will-change: opacity, transform, filter;
}
.js .footer-illustration.in {
  opacity: 1;
  clip-path: none;
  transform: none;
  filter: blur(0);
}
.footer-base {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto minmax(calc(28 * var(--px)), 1fr) auto;
  gap: calc(24 * var(--px));
  align-self: stretch;
  align-items: start;
  margin-top: calc(30 * var(--px));
  padding: 0 calc(40 * var(--px));
  border-top: 0;
  font-size: calc(12.5 * var(--px));
  line-height: 1.7;
  color: rgba(239, 239, 220, 0.62);
}
.footer-details ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(5 * var(--px));
  margin: calc(13 * var(--px)) 0;
}
.footer-details {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: end;
  text-align: left;
  margin-bottom: calc(36 * var(--px));
  font-size: calc(14.5 * var(--px));
  line-height: 1.72;
}
.footer-details li {
  display: flex;
  justify-content: flex-start;
  gap: calc(10 * var(--px));
}
.footer-details p strong {
  font-size: calc(15.5 * var(--px));
  color: var(--sand);
}
.footer-details a:hover {
  color: var(--gold);
}
.footer-mark {
  font-size: calc(10.5 * var(--px));
  line-height: 1.55;
  color: var(--green);
  text-align: center;
  white-space: nowrap;
}
.footer-address {
  font-size: calc(12.5 * var(--px));
  line-height: 1.65;
  color: rgba(239, 239, 220, 0.54);
  text-align: left;
  margin-left: 0;
  margin-top: calc(11 * var(--px));
}
.footer-policy,
.footer-terms {
  color: var(--green);
  font-size: calc(11.5 * var(--px));
  transition: color 0.3s var(--ease);
}
.footer-policy:hover,
.footer-policy:focus-visible,
.footer-policy:active,
.footer-policy:visited,
.footer-terms:hover,
.footer-terms:focus-visible,
.footer-terms:active,
.footer-terms:visited {
  color: var(--green);
}
.footer-right {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--px));
  align-items: center;
  margin-bottom: calc(56 * var(--px));
}
.footer-bottom {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(24 * var(--px));
  width: min(100%, calc(760 * var(--px)));
  margin: calc(12 * var(--px)) auto 0;
  text-align: center;
}
.footer-policy {
  justify-self: end;
}
.footer-terms {
  justify-self: start;
}
/* social media as icons */
.footer-socials {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: calc(14 * var(--px));
}
.footer-socials a {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(38 * var(--px));
  height: calc(38 * var(--px));
  border-radius: 50%;
  color: var(--sand);
  transition: color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease-out);
}
/* shimmering gold ring, same travelling gradient as the buttons and frames */
.footer-socials a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.5px;
  pointer-events: none;
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.footer-socials svg {
  width: calc(17 * var(--px));
  height: calc(17 * var(--px));
  fill: currentColor;
}
.footer-socials a:hover {
  color: #2a1a04;
  background: linear-gradient(135deg, var(--gold), var(--gold-hi));
  transform: translateY(calc(-2 * var(--px)));
}
@media (max-width: 699.98px) {
  .footer {
    grid-template-columns: 1fr;
    row-gap: calc(26 * var(--px));
    padding-bottom: calc(28 * var(--px));
  }
  .footer-illustration {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: 100%;
    margin-top: calc(34 * var(--px));
  }
  .footer-illustration img {
    margin-left: 0;
    width: min(calc(210 * var(--px)), 60vw);
    transform: none;
  }
  .js .footer-illustration img {
    transform: scale(1.08);
  }
  .js .footer-illustration.in img.loaded {
    transform: scale(1);
  }
  .footer-base {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: calc(24 * var(--px));
    margin-top: 0;
    padding: 0 calc(24 * var(--px));
  }
  .footer-details {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    align-self: auto;
    text-align: center;
    margin-bottom: 0;
    font-size: calc(15 * var(--px));
  }
  .footer-details ul {
    align-items: center;
  }
  .footer-details li {
    justify-content: center;
  }
  .footer-details p strong {
    font-size: calc(16 * var(--px));
  }
  .footer-address {
    margin-left: 0;
    text-align: center;
    font-size: calc(13 * var(--px));
  }
  .footer-right {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    align-self: auto;
    align-items: center;
    gap: calc(18 * var(--px));
    margin-bottom: calc(14 * var(--px));
  }
  .footer-socials {
    justify-content: center;
  }
  .footer-bottom {
    position: static;
    grid-column: 1;
    grid-row: 4;
    justify-self: stretch;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: calc(8 * var(--px));
    row-gap: 0;
    align-items: center;
    width: 100%;
    max-width: none;
    margin-top: calc(12 * var(--px));
    text-align: center;
  }
  .footer-mark,
  .footer-address {
    text-align: center;
  }
  .footer-policy,
  .footer-terms {
    font-size: calc(8.2 * var(--px));
    line-height: 1.25;
    white-space: nowrap;
  }
  .footer-mark {
    font-size: calc(8.2 * var(--px));
    line-height: 1.25;
    white-space: nowrap;
  }
  .footer-policy {
    justify-self: end;
    order: initial;
  }
  .footer-terms {
    justify-self: start;
    order: initial;
  }
  .footer-mark {
    justify-self: center;
    order: initial;
  }
}

/* Large brand lockup at the very bottom of the page. Crest carries the same
   flowing gold + shimmer rim as the loader; wordmark is sand on the dark bar. */
/* The one light band on the page: the closing logo sits on sand, so the
   wordmark switches to green (like the header/loader on light grounds). */
.footer-brand {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  --brand-lockup-gap: calc(8 * var(--px));
  flex-direction: column;
  align-items: center;
  gap: var(--brand-lockup-gap);
  /* breathing room between the address/socials block above and this logo band */
  margin-top: calc(32 * var(--px));
  padding: calc(42 * var(--px)) calc(20 * var(--px)) calc(26 * var(--px));
  background: var(--sand);
  color: var(--green);
}
.fb-bird {
  width: min(34vw, calc(245 * var(--px)));
  height: auto;
  filter: drop-shadow(0 calc(4 * var(--px)) calc(16 * var(--px)) rgba(6, 23, 16, 0.5));
}
.fb-stack {
  width: min(56vw, calc(420 * var(--px)));
  --logo-bird-word-gap: min(3.8vw, calc(28 * var(--px)));
  --logo-star-gap: min(1.7vw, calc(12 * var(--px)));
}
.fb-word,
.fb-stars {
  width: 100%;
  height: auto;
}
.fb-word {
  color: var(--green);
}
.js .footer-brand[data-reveal] {
  opacity: 0;
  transform: translateY(calc(10 * var(--px))) scale(0.996);
  filter: blur(calc(7 * var(--px)));
  transition:
    opacity 0.5s ease,
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease;
}
.js .footer-brand[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.js .footer-brand[data-reveal] .fb-bird,
.js .footer-brand[data-reveal] .fb-word,
.js .footer-brand[data-reveal] .fb-stars {
  opacity: 0;
  transform: translateY(calc(4 * var(--px)));
  filter: blur(calc(4 * var(--px)));
  transition:
    opacity 0.46s ease,
    transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.46s ease;
}
.js .footer-brand[data-reveal].in .fb-bird,
.js .footer-brand[data-reveal].in .fb-word,
.js .footer-brand[data-reveal].in .fb-stars {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.js .footer-brand[data-reveal].in .fb-word {
  transition-delay: 35ms;
}
.js .footer-brand[data-reveal].in .fb-stars {
  transition-delay: 70ms;
}

/* =====================================================================
   NEWS PAGES
   ===================================================================== */
.news-page {
  background-color: var(--dark-green);
}
.news-main {
  min-height: 100vh;
  padding-top: calc(122 * var(--px));
}
.news-hero {
  padding: calc(44 * var(--px)) calc(24 * var(--px)) calc(38 * var(--px));
}
.news-hero-inner {
  display: grid;
  gap: calc(28 * var(--px));
  align-items: end;
}
.news-kicker {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--px));
  color: var(--gold-hi);
  font-size: calc(11 * var(--px));
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.news-kicker::before {
  content: "";
  width: calc(28 * var(--px));
  height: 1px;
  background: var(--gold);
}
.news-title {
  font-family: "Noto Serif", serif;
  font-size: clamp(calc(54 * var(--px)), 10vw, calc(132 * var(--px)));
  line-height: 0.92;
  font-weight: 200;
  color: var(--sand);
}
.news-intro {
  max-width: calc(640 * var(--px));
  color: rgba(239, 239, 220, 0.82);
  font-size: calc(16 * var(--px));
  line-height: 1.75;
}
.news-feature {
  position: relative;
  overflow: hidden;
  margin-top: calc(32 * var(--px));
  background: rgba(7, 24, 18, 0.28);
  aspect-ratio: 16 / 9;
}
.news-feature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-feature::after,
.news-card-media::after,
.news-article-visual::after,
.news-gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  z-index: 3;
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.news-tools {
  padding: 0 calc(24 * var(--px)) calc(26 * var(--px));
}
.news-filter {
  display: flex;
  gap: calc(8 * var(--px));
  overflow-x: auto;
  padding-bottom: calc(4 * var(--px));
}
.news-filter button,
.news-back,
.legal-header-back,
.news-article-nav a {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(42 * var(--px));
  padding: calc(10 * var(--px)) calc(16 * var(--px));
  clip-path: var(--notch);
  color: var(--gold-hi);
  background-image: var(--rim-gold);
  background-size: 400% 100%;
  background-repeat: repeat;
  animation: rimShimmer 3s linear infinite;
  font-size: calc(10.5 * var(--px));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.news-filter button::after,
.news-back::after,
.legal-header-back::after,
.news-article-nav a::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 0;
  clip-path: var(--notch);
  background: #123329;
  transition: background 0.28s ease;
}
.news-filter button span,
.news-back span,
.legal-header-back span,
.news-article-nav a span {
  position: relative;
  z-index: 1;
}
.news-filter button.is-active,
.news-filter button:hover,
.news-back:hover,
.legal-header-back:hover,
.news-article-nav a:hover {
  color: #2a1a04;
}
.news-filter button.is-active::after,
.news-filter button:hover::after,
.news-back:hover::after,
.legal-header-back:hover::after,
.news-article-nav a:hover::after {
  background: linear-gradient(135deg, var(--gold) 0%, #e2bf5c 40%, var(--gold-hi) 100%);
}
.news-page .news-back {
  --news-back-top: calc(22 * var(--px));
  --news-back-left: calc(var(--menu-edge) + calc(126 * var(--px)));
  --news-back-height: calc(42 * var(--px));
  position: fixed;
  top: var(--news-back-top);
  left: var(--news-back-left);
  z-index: 901;
  height: var(--news-back-height);
  min-height: 0;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 0.42s cubic-bezier(0.22, 0.68, 0.16, 1),
    filter 0.42s cubic-bezier(0.22, 0.68, 0.16, 1);
  will-change: opacity, filter;
}
.news-page .news-back.is-floating-hidden {
  opacity: 0;
  transform: translateY(0);
  filter: blur(calc(18 * var(--px)));
  pointer-events: none;
}
.legal-header-back {
  justify-self: end;
  opacity: 0;
  pointer-events: none;
  filter: blur(calc(8 * var(--px)));
  transform: translateY(calc(-7 * var(--px)));
  transition:
    opacity 0.36s var(--ease),
    filter 0.36s var(--ease),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav.is-header-visible .legal-header-back {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
  transform: none;
}
@media (max-width: 480px) {
  .news-page .news-back {
    --news-back-top: calc(25 * var(--px));
    --news-back-left: calc(var(--menu-edge) + calc(64 * var(--px)));
  }
  .news-article .news-back {
    --news-back-left: auto;
    --news-back-height: calc(34 * var(--px));
    left: auto;
    right: var(--menu-edge);
    width: calc(52 * var(--px));
    min-width: 0;
    padding: 0;
  }
  .news-article .news-back span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0;
    position: relative;
  }
  .news-article .news-back span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(19 * var(--px));
    height: calc(19 * var(--px));
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M15 9H4M9 4L4 9l5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M15 9H4M9 4L4 9l5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translate(-50%, -50%);
  }
  .news-article .news-back span::after {
    content: none;
  }
  .legal-header-back {
    width: calc(52 * var(--px));
    min-width: 0;
    min-height: calc(34 * var(--px));
    height: calc(34 * var(--px));
    padding: 0;
  }
  .legal-header-back span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0;
    position: relative;
  }
  .legal-header-back span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(19 * var(--px));
    height: calc(19 * var(--px));
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M15 9H4M9 4L4 9l5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M15 9H4M9 4L4 9l5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 699.98px) {
  .news-tools {
    padding: 0 calc(18 * var(--px)) calc(24 * var(--px));
  }
  .news-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(8 * var(--px));
    overflow: visible;
    padding-bottom: 0;
  }
  .news-filter button {
    width: 100%;
    min-height: calc(38 * var(--px));
    padding: calc(9 * var(--px)) calc(8 * var(--px));
    white-space: normal;
    text-align: center;
    font-size: calc(9.2 * var(--px));
    line-height: 1.16;
    letter-spacing: 0.08em;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .news-tools {
    padding: 0 calc(18 * var(--px)) calc(20 * var(--px));
  }
  .news-filter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(7 * var(--px));
    overflow: visible;
    padding-bottom: 0;
  }
  .news-filter button {
    width: 100%;
    min-height: calc(34 * var(--px));
    padding: calc(7 * var(--px)) calc(5 * var(--px));
    white-space: normal;
    text-align: center;
    font-size: calc(8.3 * var(--px));
    line-height: 1.08;
    letter-spacing: 0.055em;
  }
}
@media (min-width: 700px) and (max-width: 1366px) and (orientation: landscape) {
  .news-tools {
    padding: 0 calc(18 * var(--px)) calc(20 * var(--px));
  }
  .news-filter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(7 * var(--px));
    overflow: visible;
    padding-bottom: 0;
  }
  .news-filter button {
    width: 100%;
    min-height: calc(34 * var(--px));
    padding: calc(7 * var(--px)) calc(5 * var(--px));
    white-space: normal;
    text-align: center;
    font-size: calc(8.3 * var(--px));
    line-height: 1.08;
    letter-spacing: 0.055em;
  }
}
.news-grid {
  display: grid;
  gap: calc(28 * var(--px));
  padding: calc(24 * var(--px)) calc(24 * var(--px)) calc(86 * var(--px));
}
@media (max-width: 699.98px) {
  .news-grid {
    padding: calc(56 * var(--px)) calc(18 * var(--px)) calc(86 * var(--px));
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .news-grid {
    padding: calc(46 * var(--px)) calc(18 * var(--px)) calc(86 * var(--px));
  }
}
@media (min-width: 700px) and (max-width: 1366px) and (orientation: landscape) {
  .news-grid {
    padding: calc(46 * var(--px)) calc(18 * var(--px)) calc(86 * var(--px));
  }
}
.news-card {
  min-height: 100%;
}
.news-card.is-hidden {
  display: none;
}
.news-card a {
  display: grid;
  gap: calc(14 * var(--px));
  height: 100%;
}
.news-card-media {
  position: relative;
  overflow: hidden;
  background: rgba(7, 24, 18, 0.28);
  aspect-ratio: 16 / 9;
}
.news-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card:hover .news-card-media.in img.loaded {
  transform: scale(1.055);
}
.news-card-meta,
.news-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--px)) calc(12 * var(--px));
  color: rgba(255, 232, 173, 0.78);
  font-size: calc(10.5 * var(--px));
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.news-card h2 {
  font-family: "Noto Serif", serif;
  font-size: calc(25 * var(--px));
  line-height: 1.08;
  font-weight: 260;
  color: var(--sand);
}
.news-card p {
  color: rgba(239, 239, 220, 0.76);
  font-size: calc(14 * var(--px));
  line-height: 1.65;
}
.news-read {
  color: var(--gold-hi);
  font-size: calc(11 * var(--px));
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.news-article {
  --news-article-width: calc(1180 * var(--px));
  padding: calc(26 * var(--px)) calc(24 * var(--px)) calc(86 * var(--px));
}
.news-article-head {
  display: grid;
  gap: calc(24 * var(--px));
  max-width: var(--news-article-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(42 * var(--px));
}
.news-article-visual {
  position: relative;
  overflow: hidden;
  order: -1;
  background: rgba(7, 24, 18, 0.28);
  aspect-ratio: 16 / 9;
}
.news-article-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-article-title {
  font-family: "Noto Serif", serif;
  font-size: clamp(calc(42 * var(--px)), 7vw, calc(92 * var(--px)));
  line-height: 0.98;
  font-weight: 220;
  color: var(--sand);
}
.news-article-copy {
  max-width: var(--news-article-width);
  margin: 0 auto;
}
.news-article-body {
  color: rgba(239, 239, 220, 0.88);
  font-size: calc(17.5 * var(--px));
  line-height: 1.78;
}
.news-article-body p + p,
.news-article-body ul + p,
.news-article-body p + ul {
  margin-top: calc(18 * var(--px));
}
.news-article-body h2,
.news-article-body h3 {
  margin-top: calc(34 * var(--px));
  margin-bottom: calc(14 * var(--px));
  font-family: "Noto Serif", serif;
  color: var(--gold-hi);
  font-size: calc(30 * var(--px));
  line-height: 1.15;
  break-after: avoid;
}
.news-article-body li {
  position: relative;
  padding-left: calc(18 * var(--px));
}
.news-article-body li + li {
  margin-top: calc(8 * var(--px));
}
.news-article-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(13 * var(--px));
  width: calc(7 * var(--px));
  height: 1px;
  background: var(--gold);
}
.legal-main {
  min-height: 100vh;
  padding: calc(132 * var(--px)) calc(24 * var(--px)) calc(88 * var(--px));
}
.legal-article {
  max-width: calc(1180 * var(--px));
  margin: 0 auto;
}
.legal-head {
  display: grid;
  gap: calc(16 * var(--px));
  margin-bottom: calc(48 * var(--px));
}
.legal-title {
  max-width: calc(980 * var(--px));
  font-family: "Noto Serif", serif;
  font-size: clamp(calc(42 * var(--px)), 7vw, calc(104 * var(--px)));
  line-height: 0.98;
  font-weight: 220;
  color: var(--sand);
}
.legal-date {
  color: rgba(255, 232, 173, 0.76);
  font-size: calc(11 * var(--px));
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal-body {
  max-width: calc(1040 * var(--px));
  display: grid;
  gap: calc(18 * var(--px));
  color: rgba(239, 239, 220, 0.8);
  font-size: calc(15.5 * var(--px));
  line-height: 1.78;
}
.legal-body h2,
.legal-body h3 {
  margin-top: calc(20 * var(--px));
  color: var(--gold-hi);
  font-family: "Noto Serif", serif;
  font-weight: 260;
  line-height: 1.12;
}
.legal-body h2 {
  font-size: calc(29 * var(--px));
}
.legal-body h3 {
  font-size: calc(21 * var(--px));
}
.legal-body ul {
  display: grid;
  gap: calc(10 * var(--px));
  padding-left: calc(18 * var(--px));
}
.legal-body li {
  position: relative;
  padding-left: calc(16 * var(--px));
}
.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: calc(5 * var(--px));
  height: calc(5 * var(--px));
  background: var(--gold);
  border-radius: 50%;
}
.legal-source {
  margin-top: calc(28 * var(--px));
  padding-top: calc(18 * var(--px));
  border-top: 1px solid rgba(239, 239, 220, 0.16);
  color: rgba(239, 239, 220, 0.56);
  font-size: calc(12 * var(--px));
}
.legal-source a {
  color: var(--gold-hi);
}
.news-gallery {
  display: grid;
  gap: calc(18 * var(--px));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(420 * var(--px))), 1fr));
  align-items: start;
  margin-top: calc(48 * var(--px));
}
.news-gallery figure {
  position: relative;
  overflow: hidden;
  align-self: start;
  background: rgba(7, 24, 18, 0.28);
  aspect-ratio: 16 / 9;
}
.news-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.js .news-media {
  opacity: 0;
  clip-path: inset(0 0 -2% 0);
  transform: translateY(calc(22 * var(--px))) scale(0.975);
  filter: blur(calc(16 * var(--px)));
  transition:
    opacity 1.15s ease,
    transform 1.45s var(--ease-out),
    filter 1.15s ease;
  will-change: opacity, transform, filter;
}
.js .news-media.in {
  opacity: 1;
  clip-path: none;
  transform: none;
  filter: blur(0);
}
.js .news-media img {
  opacity: 0;
  transform: scale(1.12);
  transition:
    transform 1.65s var(--ease-out),
    opacity 0.7s ease,
    filter 0.95s ease;
  will-change: transform, opacity;
}
.js .news-media.in img.loaded {
  opacity: 1;
  transform: scale(1);
}
.news-article-nav {
  display: grid;
  gap: calc(12 * var(--px));
  margin-top: calc(54 * var(--px));
}
@media (min-width: 700px) {
  .news-hero {
    padding-left: calc(40 * var(--px));
    padding-right: calc(40 * var(--px));
  }
  .news-hero-inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .news-tools,
  .news-grid,
  .news-article {
    padding-left: calc(40 * var(--px));
    padding-right: calc(40 * var(--px));
  }
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .news-article-nav {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(38 * var(--px)) calc(26 * var(--px));
  }
  .news-article-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: calc(34 * var(--px));
  }
  .news-article-visual {
    order: 0;
  }
  .news-article-title {
    font-size: clamp(calc(48 * var(--px)), 4.8vw, calc(84 * var(--px)));
  }
}
@media (max-width: 699.98px) {
  .js .news-media {
    clip-path: none;
    opacity: 0;
    transform: translateY(calc(18 * var(--px))) scale(0.98);
    filter: blur(calc(14 * var(--px)));
    transition:
      opacity 1.05s ease,
      transform 1.35s var(--ease-out),
      filter 1.05s ease;
  }
  .js .news-media.in {
    clip-path: none;
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  .js .news-media img {
    transform: scale(1.105);
  }
  .js .news-media.in img.loaded {
    transform: scale(1);
  }
}
@media (min-width: 800px) {
  .footer-wrap {
    grid-template-columns: 1fr 1fr;
    gap: calc(70 * var(--px));
    padding: 0 calc(40 * var(--px));
    align-items: start;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
  .footer-base {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    padding: 0 calc(40 * var(--px));
  }
  /* Original nudges the plate a touch past the text column so the branch
     bleeds toward the page edge instead of lining up with the copy. */
  .footer-illustration {
    width: 100%;
    max-width: none;
    margin: calc(54 * var(--px)) 0 0;
  }
  .footer-illustration img {
    width: clamp(calc(170 * var(--px)), 22vw, calc(300 * var(--px)));
  }
  .footer-right {
    align-items: center;
  }
}
@media (min-width: 700px) and (max-width: 1279.98px) {
  .footer-illustration {
    width: 100%;
    max-width: none;
    margin: calc(54 * var(--px)) 0 0;
  }
  .footer-illustration img {
    width: clamp(calc(150 * var(--px)), 26vw, calc(270 * var(--px)));
  }
}

/* =====================================================================
   REVEAL PRIMITIVES
   ===================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(calc(22 * var(--px)));
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}
/* split text: each line rides up out of its own mask */
.ln-mask {
  display: block;
  overflow: hidden;
  /* room for descenders (the g in "Fregate") — the clip would otherwise cut
     them; the negative margin keeps the layout height unchanged */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
/* word masks are inline so the browser still breaks lines naturally.
   The padding/margin pair gives descenders room inside the clip. */
.wd-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.ln-inner {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.in .ln-inner {
  transform: translateY(0);
}

/* images fade over their own backdrop once decoded */
.js .media img,
.js .hero-media img,
.js .exp-visual img {
  opacity: 0;
}
.js .media img.loaded,
.js .hero-media img.loaded,
.js .exp-visual img.loaded {
  opacity: 1;
}
.js .media img,
.js .exp-visual img {
  transition:
    transform 1.65s var(--ease-out),
    opacity 0.7s ease,
    filter 0.95s ease;
}
.js .exp-visual img {
  transform: scale(1.115);
  filter: blur(calc(16 * var(--px)));
  transition:
    opacity 1.05s ease,
    transform 1.4s var(--ease-out),
    filter 1.05s ease;
}
.js .exp-visual.in.is-ready img,
.js .exp-visual.in img.loaded {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
.js .exp-visual:not(.in).is-ready img,
.js .exp-visual:not(.in) img.loaded,
.js .exp-visual.is-switching img {
  opacity: 0;
  transform: scale(1.09);
  filter: blur(calc(14 * var(--px)));
}
.js .exp-visual.is-switching img {
  transition:
    opacity 0.42s ease,
    transform 0.5s var(--ease-out),
    filter 0.42s ease;
}
.js .hero-media img {
  transition: opacity 1.1s ease;
}
.fregate-root:not(.js) img {
  opacity: 1;
}
.fregate-root.revealed img.loaded,
.fregate-root.revealed .media.in img.loaded,
.fregate-root.revealed .news-media.in img.loaded,
.fregate-root.revealed .footer-illustration.in img.loaded,
.fregate-root.revealed .exp-visual.in:not(.is-switching) img.loaded {
  opacity: 1 !important;
}
.fregate-root.revealed [data-reveal-media].in,
.fregate-root.revealed .media.in,
.fregate-root.revealed .news-media.in,
.fregate-root.revealed .footer-illustration.in,
.fregate-root.revealed .exp-visual.in:not(.is-switching) {
  opacity: 1 !important;
}
.fregate-root.revealed .exp-visual:not(.in) img.loaded,
.fregate-root.revealed .exp-visual.is-switching img {
  opacity: 0 !important;
}

/* =====================================================================
   MOBILE — Content-Fotos immer im vollen Original-Seitenverhältnis
   Auf schmalen Viewports werden die Bilder NICHT mehr in ein festes
   Seitenverhältnis (object-fit: cover) beschnitten, sondern in ihrer
   natürlichen Höhe (Querformat) dargestellt — die Quellen (-mdw) sind
   hier ohnehin schon Querformat.
   Mobile verwendet bewusst keinen Clip-Path-Wisch mehr: die Bilder werden
   nach Decode als ganzes Motiv weich eingeblendet, damit beim schnellen
   Scrollen kein Teilbereich sichtbar nachzeichnet.
   ===================================================================== */
@media (max-width: 699.98px) {
  .media img,
  .media.full img {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
  }
}

/* =====================================================================
   MOTION PREFERENCES
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .ln-inner {
    opacity: 1;
    transform: none;
  }
  .js .media {
    clip-path: none;
  }
  .js .media img {
    transform: none;
  }
}