/* ---------------------------------------------------------
   Cruscale: Sovereign by design
   --------------------------------------------------------- */

:root {
  --ground: #07080a;
  --ground-raised: #0d0f12;
  --ink: #dbd8cb;
  --ink-muted: #a6a399;
  --ink-faint: #8a8779;
  --accent: #4a6bab;
  --accent-bright: #6f8bc2;
  --accent-deep: #16223f;
  --rule: rgba(219, 216, 203, 0.12);
  --rule-strong: rgba(219, 216, 203, 0.4);
  --rule-accent: rgba(74, 107, 171, 0.55);

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Archivo", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --measure: 62ch;
  --edge: clamp(1.5rem, 4vw, 4.5rem);
  --nav-h: 84px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

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

body {
  margin: 0;
  background-color: var(--ground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, figure { margin: 0; }

::selection { background: var(--accent); color: #f4f2ea; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--accent-deep); border: 2px solid var(--ground); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
html { scrollbar-color: var(--accent-deep) var(--ground); scrollbar-width: thin; }

:focus-visible {
  outline: 1.5px solid var(--accent-bright);
  outline-offset: 3px;
}

html { caret-color: var(--accent-bright); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ground);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.skip-link:focus {
  left: var(--edge);
  top: 1rem;
}

/* gives a section an accessible name without altering its composition */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85em 1.4em;
  background: transparent;
  cursor: pointer;
  transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}

.btn span { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }

.btn:hover, .btn:focus-visible {
  border-color: var(--accent-bright);
  background: rgba(74, 107, 171, 0.1);
  color: #f4f2ea;
}
.btn:hover span, .btn:focus-visible span { transform: translateX(4px); }

.btn--large { padding: 1.05em 1.8em; font-size: 0.85rem; }

.btn--nav {
  display: none;
}

/* ---------------------------------------------------------
   Nav
   --------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1.5rem;
  padding: 0 var(--edge);
  background: linear-gradient(to bottom, rgba(7, 8, 10, 0.7), transparent);
  transition: background-color 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
  border-bottom: 1px solid transparent;
}

.nav__brand { grid-column: 1; justify-self: start; }
.nav__links { grid-column: 2; justify-self: center; }
.btn--nav, .nav__toggle { grid-column: 3; justify-self: end; }

/* document pages reuse the site nav rather than a lookalike, so the logo size,
   spacing, type and link behaviour can never drift apart from the home page */
.nav--static {
  position: static;
  background: transparent;
  border-bottom-color: var(--rule);
}
.nav--static.is-scrolled { background: transparent; backdrop-filter: none; }

.nav.is-scrolled {
  background: rgba(7, 8, 10, 0.86);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}

.nav__brand, .footer__brand {
  display: flex;
  align-items: center;
}

.nav__logo { height: 54px; width: auto; object-fit: contain; }
.footer__logo { height: 40px; width: auto; object-fit: contain; }

.nav__links {
  display: none;
  align-items: center;
  gap: 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav__links a { position: relative; padding: 0.25rem 0; transition: color 200ms ease; }
.nav__links a:hover, .nav__links a:focus-visible { color: var(--ink); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent-bright);
  transition: right 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { right: 0; }

.nav__toggle {
  width: 32px;
  height: 22px;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 260ms ease, opacity 260ms ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 7, 9, 0.98);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.75rem;
  padding: 0 var(--edge);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.4rem;
  text-transform: uppercase;
  color: var(--ink);
}
.mobile-menu .btn { margin-top: 1rem; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .btn--nav { display: inline-flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* The plate ships as two layers cut from one 4K upscale: the background (globe,
   charts, mountains, star field, with the figure's silhouette knocked back to
   near-black behind a feathered edge) and the figure itself on transparency.
   They are stacked with the instrument layer BETWEEN them, because in the
   artwork the statue's raised hand passes in front of the globe: the transits
   must run behind her arm, not over it.

   The split costs nothing at 1x (256KB for both layers against 308KB for the
   old flat plate, since the background compresses better without the figure and
   the figure layer is mostly transparent) and buys real depth: the two move at
   different rates, so the figure separates from the star field instead of the
   whole picture sliding as one flat card. */
.hero__plate {
  position: absolute;
  inset: 0;
}
.hero__plate--bg { z-index: -4; }
.hero__plate--figure { z-index: -2; }

.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* The motion plate rides OVER the still background inside the same layer, not
   instead of it. The still stays the LCP element and the poster frame, so first
   paint is unchanged whether or not the video ever arrives; the video is fetched
   only after JS decides it should be (never on reduced-motion, never on a small
   screen, never on save-data) and is revealed only once it can actually play.
   The clip's first and last frames are the plate itself, so the loop is seamless
   and the crossfade lands on an identical image. */

@media (max-width: 640px) {
  .hero__plate img { object-position: 62% top; }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 6, 8, 0.75) 0%, rgba(5, 6, 8, 0) 16%, rgba(5, 6, 8, 0) 72%, rgba(5, 6, 8, 0.9) 100%),
    linear-gradient(90deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.88) 40%, rgba(5, 6, 8, 0.32) 60%, rgba(5, 6, 8, 0.05) 78%);
}

/* Between 641px and 1100px the hero image is cropped horizontally (cover fits
   the height, and object-position anchors right), which walks the figure's lit
   drapery straight into the text column. The default scrim's stops are tuned for
   wide viewports and have already released by then, so these two tiers push the
   falloff right. Measured, not guessed: without them the subhead sits at 1.01:1
   at 900px. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 6, 8, 0.75) 0%, rgba(5, 6, 8, 0) 16%, rgba(5, 6, 8, 0) 72%, rgba(5, 6, 8, 0.9) 100%),
      linear-gradient(90deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.93) 42%, rgba(5, 6, 8, 0.82) 64%, rgba(5, 6, 8, 0.32) 84%, rgba(5, 6, 8, 0.06) 100%);
  }
}

/* 800px, not 641px. The subhead is a fixed 544px block, so its right edge lands
   at 72% of the frame at 800px (scrim ~0.86, fine), 82% at 700px and 89% at
   641px, out where this horizontal gradient has released: 3.57:1 and 2.61:1.
   A horizontal scrim can only protect text whose end position is predictable,
   so below 800px the vertical treatment takes over instead. */
@media (min-width: 800px) and (max-width: 1023px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 6, 8, 0.75) 0%, rgba(5, 6, 8, 0) 16%, rgba(5, 6, 8, 0) 72%, rgba(5, 6, 8, 0.9) 100%),
      linear-gradient(90deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.96) 48%, rgba(5, 6, 8, 0.88) 70%, rgba(5, 6, 8, 0.42) 88%, rgba(5, 6, 8, 0.1) 100%);
  }
}

@media (max-width: 799px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0.79) 45%, rgba(5, 6, 8, 0.95) 100%),
      rgba(5, 6, 8, 0.28);
  }
}


.hero__content {
  position: relative;
  padding: calc(var(--nav-h) + 2rem) var(--edge) 8rem;
  max-width: 40rem;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.75rem;
}

.hero__subhead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 34rem;
  margin-bottom: 2.5rem;
}

.hero__ticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--rule);
  background: rgba(5, 6, 8, 0.55);
  backdrop-filter: blur(8px);
  padding: 0.9rem var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.hero__ticker-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.hero__sectors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__sectors li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hero__sectors li:not(:last-child) { border-right: 1px solid var(--rule); padding-right: 1.5rem; }

.hero__sectors svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--ink-faint);
}

@media (max-width: 560px) {
  .hero__sectors li:not(:last-child) { border-right: none; padding-right: 0; }
}

/* ---------------------------------------------------------
   Doctrine
   --------------------------------------------------------- */

.doctrine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--rule);
}

.doctrine__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.doctrine__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.doctrine__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.92) 34%, rgba(5, 6, 8, 0.6) 58%, rgba(5, 6, 8, 0.32) 78%, rgba(5, 6, 8, 0.4) 100%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0.2) 20%, rgba(5, 6, 8, 0.2) 80%, rgba(5, 6, 8, 0.6) 100%);
}

@media (max-width: 640px) {
  .doctrine__media img { object-position: 65% center; }
  .doctrine__scrim {
    background:
      linear-gradient(180deg, rgba(5, 6, 8, 0.5) 0%, rgba(5, 6, 8, 0.72) 45%, rgba(5, 6, 8, 0.95) 100%),
      rgba(5, 6, 8, 0.4);
  }
}

.doctrine__content {
  padding: clamp(5rem, 12vw, 9rem) var(--edge);
}

.doctrine__line {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: 0.005em;
  max-width: 20ch;
  margin-bottom: 1.5rem;
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal .doctrine__line { opacity: 0; transform: translateY(18px); }
.doctrine__line.is-visible { opacity: 1; transform: translateY(0); }

.doctrine__line .w-light { font-weight: 300; color: var(--ink-muted); }
.doctrine__line .w-bold { font-weight: 700; color: var(--ink); }

.doctrine__close {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--accent-bright);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: 40ch;
}

/* ---------------------------------------------------------
   Sovereignty
   --------------------------------------------------------- */

/* deliberately imageless and dense: this is the specification that makes the
   claim checkable, and it earns its place by contrasting with the illustrated
   sections either side of it */
.sovereignty {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4rem, 8vw, 6.5rem) var(--edge);
  border-bottom: 1px solid var(--rule);
}

.sovereignty__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

.sovereignty__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.02;
}

.sovereignty__head p {
  max-width: 38ch;
  color: var(--ink-muted);
  padding-bottom: 0.4rem;
}

/* The cutaway is the section's ENVIRONMENT, not a stacked illustration. Giving
   the image its own vertical band made this the tallest section on the page
   (1412px, taller than the hero); laying the terms over it recovers ~500px and
   turns the specification into something inscribed on the vault. */
.sovereignty__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.sovereignty__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* heavier low down, where the terms sit over the structure's bright masonry */
.sovereignty__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 6, 8, 0.8) 0%, rgba(5, 6, 8, 0.62) 30%, rgba(5, 6, 8, 0.88) 68%, rgba(5, 6, 8, 0.94) 100%);
}

/* The commitments read as a specification, not as three loose columns and not
   as a second card deck: ONE bordered container divided by hairlines, the way a
   terms table is set. */
.terms {
  margin: 0;
  border: 1px solid var(--rule-strong);
  background: transparent;
  backdrop-filter: blur(2px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 820px) {
  .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.terms__cell {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.terms__cell:first-child { border-top: 0; }

@media (min-width: 820px) {
  .terms__cell { border-top: 0; border-left: 1px solid var(--rule); }
  .terms__cell:first-child { border-left: 0; }
}

.js-reveal .terms__cell { opacity: 0; transform: translateY(14px); }
.terms__cell.is-visible { opacity: 1; transform: translateY(0); }

/* the cobalt tick rides the cell's own edge, as on the plaques */
.terms__cell::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 30px;
  height: 1px;
  background: var(--rule-accent);
}
@media (min-width: 820px) {
  .terms__cell::before { top: -1px; left: -1px; width: 1px; height: 30px; }
}

.terms dt {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.terms dd {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Capabilities
   --------------------------------------------------------- */

.capabilities {
  padding: clamp(5rem, 12vw, 9rem) var(--edge);
  border-bottom: 1px solid var(--rule);
}

.capabilities__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(3rem, 7vw, 5rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

.capabilities__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.02;
}

.capabilities__head p {
  max-width: 34ch;
  color: var(--ink-muted);
  padding-bottom: 0.4rem;
}

.plaques {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem 1.75rem;
}

.plaque { min-width: 0; grid-column: span 12; }

@media (min-width: 700px) {
  .plaque { grid-column: span 6; }
}

@media (min-width: 1100px) {
  .plaque { grid-column: span 4; }
}

.plaque__frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 100%;
  padding: 2.25rem 2rem;
  border: 1px solid var(--rule);
  background: var(--ground-raised);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal .plaque__frame { opacity: 0; transform: translateY(26px); }
.plaque.is-visible .plaque__frame { opacity: 1; transform: translateY(0); }

.plaque__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.plaque__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

.plaque__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.86) 32%, rgba(5, 6, 8, 0.45) 58%, rgba(5, 6, 8, 0.22) 78%, rgba(5, 6, 8, 0.4) 100%),
    linear-gradient(0deg, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0.1) 30%, rgba(5, 6, 8, 0.1) 70%, rgba(5, 6, 8, 0.35) 100%);
}

.plaque__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--rule-accent), var(--rule-accent)), linear-gradient(var(--rule-accent), var(--rule-accent)),
    linear-gradient(var(--rule-accent), var(--rule-accent)), linear-gradient(var(--rule-accent), var(--rule-accent)),
    linear-gradient(var(--rule-accent), var(--rule-accent)), linear-gradient(var(--rule-accent), var(--rule-accent)),
    linear-gradient(var(--rule-accent), var(--rule-accent)), linear-gradient(var(--rule-accent), var(--rule-accent));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%;
}

.plaque__numeral {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.plaque__lockup {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.55rem;
}

.plaque__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--ink);
}
.plaque__icon path, .plaque__icon circle, .plaque__icon rect {
  transition: stroke-dashoffset 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.plaque__frame h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.45rem, 2.1vw, 1.8rem);
  line-height: 1;
  color: var(--ink);
}

.plaque__kind {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}

.plaque__frame p:not(.plaque__kind) {
  color: var(--ink-muted);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 36ch;
}

/* ---------------------------------------------------------
   Services
   --------------------------------------------------------- */

.services {
  padding: clamp(5rem, 12vw, 9rem) var(--edge);
  border-bottom: 1px solid var(--rule);
}

.services__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.services__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.02;
  margin-bottom: 1.25rem;
}

.services__head p {
  color: var(--ink-muted);
  max-width: 52ch;
  line-height: 1.6;
}

/* Folio plates: figures on a page, not cards. The rule sits around the PLATE
   only; the caption lives on open ground below it. That, plus the absence of
   any container or fill, is what separates these from the product cards. */
.services__folio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 620px) {
  .services__folio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* reserve two lines so descriptions start on a common baseline across the row,
     whether or not a given name wraps */
  .folio__name { min-height: 2.1em; }
}

/* four across once there is genuinely room for it; the plates get small, so the
   caption steps down with them rather than wrapping into three ragged lines */
@media (min-width: 1200px) {
  .services__folio {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 1.8vw, 1.75rem);
  }
  .folio__name { font-size: clamp(1.05rem, 1.25vw, 1.35rem); letter-spacing: 0.015em; }
  .folio__desc { font-size: 0.88rem; line-height: 1.55; }
  .folio__caption { padding-top: 1rem; }
  .folio__tick { width: 26px; }
}

.folio {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.folio__plate {
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.folio__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.js-reveal .folio__plate { opacity: 0; transform: translateY(18px); }
.folio.is-visible .folio__plate { opacity: 1; transform: translateY(0); }

.folio__caption {
  position: relative;
  padding-top: clamp(1.25rem, 2vw, 1.6rem);
}

.folio__tick {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--rule-accent);
}

.folio__name {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.7rem;
  clip-path: inset(-4px -4px -4px -4px);
  transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}
.js-reveal .folio__name { clip-path: inset(-4px 100% -4px -4px); }
.folio.is-visible .folio__name { clip-path: inset(-4px -4px -4px -4px); }

.folio__desc {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 46ch;
  transition: opacity 700ms ease 240ms, transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 240ms;
}
.js-reveal .folio__desc { opacity: 0; transform: translateY(12px); }
.folio.is-visible .folio__desc { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------
   Access
   --------------------------------------------------------- */

.access {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(5rem, 12vw, 9rem) var(--edge);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* The page closes on first light: every other section is night, so dawn lands
   exactly where the visitor is asked to act.

   The plate's glow is a horizontal band across 37-75% of its height, and the
   form column starts at 48% of the section's width, so art and writing want the
   same pixels. The first attempt covered the art with a filled panel, which is
   the wrong trade twice over: it hides the thing the section exists to show
   (the Terms Table refuses a fill for exactly this reason), and it makes the
   form a slab. So the plate is placed instead of washed. It takes the region
   the layout leaves empty, dissolving into the ground on the edges that face
   the text. */
.access {
  --dawn-band: clamp(190px, 30vh, 250px);
  /* mobile: the section is one column, so the empty region is the foot */
  --dawn-mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 28%, #000 62%);
  padding-bottom: calc(clamp(5rem, 12vw, 9rem) + var(--dawn-band) * 0.66);
}

.access__media,
.access__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--dawn-band);
  -webkit-mask-image: var(--dawn-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--dawn-mask);
  /* both layers carry the same mask and the same box, so the scrim never
     outlives the image it darkens and leaves a dimmed rectangle on open ground */
  mask-composite: intersect;
}

.access__media { z-index: -2; }
.access__scrim {
  z-index: -1;
  /* light: nothing is written on the plate, so this only keeps the dawn from
     out-shining a page that is night everywhere else */
  background: linear-gradient(180deg, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0.26) 45%, rgba(5, 6, 8, 0.22) 100%);
}

.access__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

@media (min-width: 900px) {
  .access {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    padding-bottom: clamp(5rem, 12vw, 9rem);
    /* desktop: the empty region is the left column below the invitation copy.
       Top edge dissolves under that copy, right edge dissolves before the
       fields; left and bottom bleed to the section's own edges. */
    --dawn-mask:
      linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 24%, #000 56%),
      linear-gradient(90deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.5) 80%, transparent 100%);
  }
  .access__media,
  .access__scrim {
    inset: auto auto 0 0;
    width: 47%;
    height: 54%;
  }
  /* the plate's own 1.77 aspect nearly matches this box, so the whole
     composition reads rather than a crop of it */
  .access__media img { object-position: center 50%; }
}

.access__intro h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  margin-bottom: 1.5rem;
}

.access__intro p {
  color: var(--ink-muted);
  max-width: 42ch;
  line-height: 1.6;
}

.access__form {
  display: grid;
  gap: 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0.65rem 0;
  resize: vertical;
  transition: border-color 220ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent-bright); outline: none; }

.access__form .btn { justify-self: start; margin-top: 0.5rem; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 6vw, 5rem) var(--edge) 0;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 680px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
    gap: clamp(2rem, 3vw, 3.5rem);
  }
}

.footer__brandcol { display: flex; flex-direction: column; gap: 1.1rem; }
.footer__brand { display: flex; align-items: center; }
.footer__logo { height: 40px; width: auto; object-fit: contain; }

.footer__blurb {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 34ch;
}

.footer__place {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.footer__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

.footer__group a,
.footer__linkbtn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-muted);
  transition: color 200ms ease;
}
.footer__group a:hover,
.footer__group a:focus-visible,
.footer__linkbtn:hover,
.footer__linkbtn:focus-visible { color: var(--ink); }

.footer__linkbtn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}

.footer__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.footer__tagline { letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------------------------------------------------------
   Cookie consent
   --------------------------------------------------------- */

/* a bar, not a modal: consent needs no protected focus, and a dialog that traps
   the page behind it is the pattern every visitor has learned to resent */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: rgba(7, 8, 10, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule-strong);
  padding: 1.1rem var(--edge);
  transform: translateY(100%);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
.consent.is-open { transform: translateY(0); }

.consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin: 0 auto;
  max-width: 1400px;
}

.consent__text {
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 74ch;
}
.consent__text a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.consent__text a:hover { color: var(--ink); }

.consent__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }

/* both choices carry identical weight; an accept button beside a dismissable
   cross is a dark pattern, not a consent mechanism */
.btn--consent { padding: 0.7em 1.6em; font-size: 0.75rem; }

/* ---------------------------------------------------------
   Document pages (privacy, cookies, 404)
   --------------------------------------------------------- */

.docpage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.doc {
  flex: 1;
  padding: clamp(3rem, 8vw, 6rem) var(--edge);
  max-width: 82ch;
}

.doc h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: 0.75rem;
}

.doc__stamp {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.doc h2 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0.02em;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0.85rem;
}

.doc p, .doc li {
  color: var(--ink-muted);
  font-size: 0.97rem;
  line-height: 1.7;
  max-width: 70ch;
}
.doc p + p { margin-top: 0.9rem; }

.doc ul { margin: 0.9rem 0 0; padding-left: 1.1rem; }
.doc li { margin-bottom: 0.5rem; }

.doc a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--ink); }

/* placeholders the company must replace before launch: loud on purpose */
.doc mark {
  background: rgba(74, 107, 171, 0.18);
  color: var(--ink);
  border-bottom: 1px solid var(--rule-accent);
  padding: 0.1em 0.28em;
  margin-right: -0.12em;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.doc__back { margin-top: clamp(2.5rem, 5vw, 4rem); }

.doc--center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  text-align: center;
  align-items: center;
}

.access__privacy {
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 46ch;
}
.access__privacy a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.access__privacy a:hover { color: var(--ink); }