/* ==========================================================================
   True Light Holding — site.css
   Design intent: a private office. Near-black canvas, one gold accent used
   sparingly, generous space, hairline structure. Serif carries the enduring
   statements; sans carries the business. Nothing decorative.
   ========================================================================== */

/* ---------- fonts (self-hosted: no third-party requests) ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/cormorant-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 300; font-display: swap;
  src: url('../fonts/cormorant-300i.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  --ink:      #0a0a0b;
  --ink-2:    #0d0d0f;
  --ink-3:    #101013;
  --ink-deep: #060607;

  --line:   rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.14);

  --text:   #f0efec;
  --text-2: rgba(240, 239, 236, 0.58);
  --text-3: rgba(240, 239, 236, 0.5);   /* floor for 11px labels: keeps AA on near-black */

  --gold:      #fbc85c;
  --gold-soft: rgba(251, 200, 92, 0.55);
  --gold-faint: rgba(251, 200, 92, 0.14);

  --serif: 'Cormorant Garamond', Cormorant, 'Times New Roman', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --measure: 1180px;

  /* vertical rhythm */
  --sec-y: clamp(5.5rem, 11vh, 9.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(251, 200, 92, 0.22); color: #fff; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- film grain ----------
   Large flat fields of near-black read as dead rather than deep. A fixed grain
   layer over the whole page gives it the tooth of a dark print. Kept very low
   and non-tinting: it must be felt, not seen. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-image: url('../img/grain.svg');
  background-repeat: repeat;
  background-size: 300px 300px;
  opacity: 0.42;
  mix-blend-mode: soft-light;
}
@media (min-resolution: 2dppx) {
  /* on retina the tile renders finer, so it needs slightly more presence */
  .grain { background-size: 220px 220px; opacity: 0.5; }
}

.skip {
  position: absolute; left: -9999px; top: 0;
  padding: 0.75rem 1.25rem; background: var(--ink-3); color: var(--text);
  z-index: 100; font-size: 0.8125rem;
}
.skip:focus { left: 1rem; top: 1rem; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-y); position: relative; background: var(--ink); }
.section + .section { border-top: 1px solid var(--line); }

/* Alternating surfaces so the page has rhythm instead of one unbroken field —
   the hairline borders only read as edges if the planes either side differ.
   A faint warm cast from the left keeps the black from going blue. */
.section--alt {
  background:
    linear-gradient(100deg, rgba(251, 200, 92, 0.022) 0%, rgba(251, 200, 92, 0) 46%),
    var(--ink-3);
}

/* label | content grid — the one structural idea, repeated everywhere */
.row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- type ---------- */
.label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.label .num { color: var(--gold); opacity: 0.75; font-variant-numeric: tabular-nums; }

.lede {
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  line-height: 1.62;
  font-weight: 400;
  color: var(--text);
  max-width: 42ch;
}
.lede + .lede { margin-top: 1.25em; color: var(--text-2); }

.body { color: var(--text-2); max-width: 46ch; font-size: 0.9375rem; line-height: 1.78; }
.body + .body { margin-top: 1em; }

.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* ==========================================================================
   HERO — light descending through darkness
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(5rem, 14vh, 9rem);
  overflow: hidden;
  isolation: isolate;
  /* the canvas stays black; only a faint lift from below keeps it from being flat */
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0) 62%),
    var(--ink);
}

.hero__inner { position: relative; display: grid; justify-items: center; gap: clamp(2rem, 4.5vh, 3.25rem); }

/* The light comes out of the mark, not out of the air: a tight halo behind the
   logotype rather than an ambient wash (which reads as haze over near-black). */
.hero__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: clamp(-3rem, -4vh, -1.5rem); left: 50%;
  width: min(60rem, 150vw); aspect-ratio: 16 / 10;
  translate: -50% -34%;
  /* many stops = gaussian-ish falloff; too few and the halo shows a hard edge */
  background: radial-gradient(closest-side at 50% 50%,
              rgba(251, 200, 92, 0.17) 0%,
              rgba(251, 200, 92, 0.135) 12%,
              rgba(251, 200, 92, 0.092) 24%,
              rgba(251, 200, 92, 0.056) 36%,
              rgba(251, 200, 92, 0.031) 48%,
              rgba(251, 200, 92, 0.015) 60%,
              rgba(251, 200, 92, 0.006) 74%,
              rgba(251, 200, 92, 0.0015) 87%,
              rgba(251, 200, 92, 0) 100%);
  pointer-events: none;
  will-change: transform, opacity;
  animation: breathe 34s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.82; }
  50%      { transform: scale(1.07); opacity: 1; }
}

.hero__logo {
  width: clamp(15rem, 38vw, 25rem);
  filter: drop-shadow(0 0 46px rgba(251, 200, 92, 0.18));
}

/* Faith · Precision · Technology · Discipline */
.creed {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.7rem, 1.8vw, 1.45rem);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.5vw, 1.1875rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-2);
}
.creed li { display: flex; align-items: center; gap: clamp(0.7rem, 1.8vw, 1.45rem); }
.creed li + li::before {
  content: '';
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); opacity: 0.7;
  flex: none;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.625rem);
  line-height: 1.32;
  letter-spacing: -0.008em;
  max-width: 30ch;
  color: var(--text);
  text-wrap: balance;
}

.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 1.1rem;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
}
.hero__meta li { display: flex; align-items: center; gap: 1.1rem; }
.hero__meta li + li::before {
  content: ''; width: 1px; height: 0.7em;
  background: var(--line-2); flex: none;
}

/* Narrow screens: the creed can't hold one line, so break it into a clean 2x2
   and keep the gold dot only between columns — never at the start of a line. */
@media (max-width: 600px) {
  .creed {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 0.6rem 1.5rem;
    letter-spacing: 0.24em;
  }
  .creed li:nth-child(3)::before { display: none; }

  .hero__meta {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.14em;
  }
  .hero__meta li + li::before { display: none; }
}

/* the descending light — a hairline falling out of the hero */
.descend {
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: clamp(3.5rem, 9vh, 6.5rem);
  background: linear-gradient(to bottom, rgba(251, 200, 92, 0) 0%, var(--gold-soft) 55%, rgba(251, 200, 92, 0) 100%);
  animation: fall 4.5s var(--ease) infinite;
}
@keyframes fall {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.3); transform-origin: top; }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); transform-origin: top; }
}

/* ==========================================================================
   DOMAINS — an index, not cards
   ========================================================================== */
/* One trunk of light descending, branching once into each domain. Drawn in CSS
   rather than as an SVG so the branches stay aligned with the rows at every
   breakpoint, and so the trunk can draw itself in on scroll. */
.domains {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.domains::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
              rgba(251, 200, 92, 0.6) 0%,
              rgba(251, 200, 92, 0.34) 55%,
              rgba(251, 200, 92, 0.06) 88%,
              rgba(251, 200, 92, 0) 100%);
}
/* the list carries .reveal only to drive the trunk; the rows fade themselves */
.domains.reveal { opacity: 1; transform: none; }
.domains.reveal::before {
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.6s var(--ease) 150ms;
}
.domains.reveal.in::before { transform: scaleY(1); }

.domain {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 19rem);
  align-items: baseline;
  gap: clamp(1rem, 2.4vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.125rem);
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* the branch into this row */
.domain::after {
  content: '';
  position: absolute; top: 50%;
  left: calc(clamp(1.5rem, 3vw, 2.25rem) * -1);
  width: clamp(0.9rem, 1.9vw, 1.4rem); height: 1px;
  background: linear-gradient(to right, var(--gold-soft), rgba(251, 200, 92, 0.12));
  opacity: 0.6;
  transition: opacity 0.5s var(--ease), width 0.5s var(--ease);
}
.domain:hover::after { opacity: 1; width: clamp(1.2rem, 2.6vw, 1.9rem); }

.domain__num {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em;
  color: var(--gold); opacity: 0.82; font-variant-numeric: tabular-nums;
}
.domain__name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.3125rem, 2.5vw, 1.9375rem);
  line-height: 1.2; color: var(--text);
  text-wrap: nowrap;
}
.domain__note {
  font-size: 0.8125rem; color: var(--text-3);
  letter-spacing: 0.02em; text-align: right;
}
@media (max-width: 760px) {
  .domain { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .domain__name { text-wrap: balance; }
  .domain__note { grid-column: 2; text-align: left; margin-top: 0.5rem; }
}

/* ==========================================================================
   METHOD — how the group actually runs. Numbered pairs, deliberately set in
   sans so it does not compete with the serif domain names above or the serif
   principles below.
   ========================================================================== */
.method {
  display: grid;
  /* fixed 2x2: auto-fit gave three columns at this measure and left the fourth
     cell empty, and boxed cells read as a dashboard rather than a document */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  counter-reset: method;
}
@media (max-width: 620px) {
  .method { grid-template-columns: 1fr; gap: 1.75rem; }
}

.method__item { counter-increment: method; }
.method__item h3 {
  font-family: var(--sans);
  font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.005em; color: var(--text);
  display: flex; align-items: baseline; gap: 0.85rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.method__item h3::after {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 1.5rem; height: 1px; background: var(--gold); opacity: 0.5;
}
.method__item h3::before {
  content: counter(method, decimal-leading-zero);
  font-size: 0.625rem; letter-spacing: 0.14em;
  color: var(--gold); opacity: 0.75;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.method__item p {
  margin-top: 0.55rem;
  padding-left: 2.1rem;
  font-size: 0.875rem; line-height: 1.7; color: var(--text-2);
  text-wrap: pretty;
}

/* ==========================================================================
   PRINCIPLES
   ========================================================================== */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.principle h3 {
  font-family: var(--sans);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text);
  padding-bottom: 0.9rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.principle h3::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 1.5rem; height: 1px; background: var(--gold); opacity: 0.55;
}
.principle p {
  font-family: var(--serif); font-weight: 300;
  font-size: 1.1875rem; line-height: 1.45; color: var(--text-2);
  text-wrap: balance;
}

/* ==========================================================================
   CREDO — the emotional centre. Full bleed, the cross carries it.
   ========================================================================== */
.credo {
  background: var(--ink-deep);
  text-align: center;
  padding-block: clamp(7rem, 16vh, 12rem);
  position: relative; overflow: hidden; isolation: isolate;
}
.credo::before {
  content: ''; position: absolute; z-index: -1;
  top: 50%; left: 50%; translate: -50% -50%;
  width: min(46rem, 130vw); aspect-ratio: 5 / 4;
  background: radial-gradient(closest-side at 50% 50%,
              rgba(251, 200, 92, 0.055) 0%,
              rgba(251, 200, 92, 0.055) 22%,
              rgba(251, 200, 92, 0.045) 38%,
              rgba(251, 200, 92, 0.03) 52%,
              rgba(251, 200, 92, 0.017) 65%,
              rgba(251, 200, 92, 0.008) 78%,
              rgba(251, 200, 92, 0.002) 90%,
              rgba(251, 200, 92, 0) 100%);
  pointer-events: none;
}

/* the words sit inside the light, with no symbol at the centre */
.credo__figure {
  position: relative;
  isolation: isolate;
}

.aperture {
  position: absolute;
  top: 50%; left: 50%; translate: -50% -50%;
  /* kept small enough that the outer ring clears the section's edges, which
     .credo's overflow:hidden would otherwise cut */
  width: min(34rem, 86vw); aspect-ratio: 1;
  color: var(--gold);
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.aperture circle { stroke-width: 1; vector-effect: non-scaling-stroke; }
.aperture__spin {
  transform-box: fill-box; transform-origin: center;
  animation: turn 150s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }

.credo blockquote {
  font-family: var(--serif);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.28; letter-spacing: -0.01em;
  color: var(--text);
  max-width: 30ch; margin-inline: auto;
  text-wrap: balance;
}
.credo figcaption {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-3);
}

/* ==========================================================================
   ENDURE — the darkest section. Shadow, with one light that holds.
   ========================================================================== */
.endure {
  background: #050506;
  text-align: center;
  padding-block: clamp(7rem, 17vh, 12.5rem);
  position: relative; overflow: hidden; isolation: isolate;
  border-top: 1px solid var(--line);
}
.endure::before {
  content: ''; position: absolute; z-index: -1;
  bottom: -18rem; left: 50%; translate: -50% 0;
  width: min(66rem, 160vw); aspect-ratio: 2 / 1;
  background: radial-gradient(closest-side at 50% 50%,
              rgba(251, 200, 92, 0.19) 0%,
              rgba(251, 200, 92, 0.15) 12%,
              rgba(251, 200, 92, 0.102) 24%,
              rgba(251, 200, 92, 0.062) 36%,
              rgba(251, 200, 92, 0.034) 48%,
              rgba(251, 200, 92, 0.016) 60%,
              rgba(251, 200, 92, 0.006) 74%,
              rgba(251, 200, 92, 0) 100%);
  pointer-events: none;
}
/* feather the clip, so the contained light doesn't read as a seam across the page */
.endure::after {
  content: ''; position: absolute; z-index: -1;
  inset: auto 0 0 0; height: 9rem;
  background: linear-gradient(to bottom, rgba(5, 5, 6, 0) 0%, #050506 78%);
  pointer-events: none;
}
.endure__eyebrow {
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); opacity: 0.72;
}
.endure h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.125rem, 6.2vw, 4.25rem);
  line-height: 1.1; letter-spacing: -0.015em;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  text-wrap: balance;
}
.endure p {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  margin-inline: auto; max-width: 46ch;
  color: var(--text-2); font-size: 0.9375rem; line-height: 1.8;
  text-wrap: pretty;
}

/* ==========================================================================
   ENQUIRIES
   ========================================================================== */
.enquire__link {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.375rem, 3.4vw, 2.25rem);
  line-height: 1.2; color: var(--text);
  display: inline-block;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-2);
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease);
  overflow-wrap: anywhere;
}
.enquire__link:hover { border-color: var(--gold); color: #fff; }
.enquire__note { margin-top: 1.5rem; color: var(--text-3); font-size: 0.8125rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot {
  background: var(--ink-deep);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 8vh, 5.5rem);
}
.foot__top {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 2rem;
  padding-bottom: clamp(2rem, 4vh, 2.75rem);
  border-bottom: 1px solid var(--line);
}
.foot__logo { width: clamp(10rem, 22vw, 13.5rem); opacity: 0.88; }
.foot__creed {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  color: var(--text-2);
}
.foot__legal {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  justify-content: space-between;
  padding-top: clamp(1.5rem, 3vh, 2rem);
  font-size: 0.75rem; color: var(--text-3);
}
.foot__legal ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.foot__legal li { display: flex; align-items: center; gap: 1.25rem; }
.foot__legal li + li::before {
  content: ''; width: 1px; height: 0.7em; background: var(--line-2); flex: none;
}

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
/* if JS never runs, content must still be visible */
.no-js .reveal { opacity: 1; transform: none; }

/* Stagger is declared here rather than as inline style="--d:…" attributes:
   the site is served under a strict CSP (style-src 'self'), which blocks inline
   style attributes outright. Position-based selectors keep the markup clean. */
.label.reveal                     { --d: 0ms; }
.body.reveal                      { --d: 40ms; }
.lede.reveal:nth-of-type(1)       { --d: 60ms; }
.lede.reveal:nth-of-type(2)       { --d: 150ms; }
.domains .domain:nth-child(1)     { --d: 60ms; }
.domains .domain:nth-child(2)     { --d: 150ms; }
.domains .domain:nth-child(3)     { --d: 240ms; }
.domains .domain:nth-child(4)     { --d: 330ms; }
.method .method__item:nth-child(1)  { --d: 60ms; }
.method .method__item:nth-child(2)  { --d: 140ms; }
.method .method__item:nth-child(3)  { --d: 220ms; }
.method .method__item:nth-child(4)  { --d: 300ms; }
.principles .principle:nth-child(1) { --d: 60ms; }
.principles .principle:nth-child(2) { --d: 150ms; }
.principles .principle:nth-child(3) { --d: 240ms; }
.credo blockquote                 { --d: 170ms; }
.credo figcaption                 { --d: 300ms; }
.endure__eyebrow                  { --d: 0ms; }
.endure h2                        { --d: 120ms; }
.endure p                         { --d: 250ms; }
.enquire__link                    { --d: 60ms; }
.enquire__note                    { --d: 160ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__inner::before, .descend, .aperture__spin { animation: none !important; }
  .domains.reveal::before { transform: none !important; transition: none !important; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .hero { min-height: auto; }
  .grain, .descend, .aperture,
  .hero__inner::before, .credo::before, .endure::before, .endure::after { display: none; }
  .section, .section--alt, .credo, .endure, .foot { background: #fff; }
  .display, .hero h1, .credo blockquote, .endure h2 { color: #000; }
}