/* ALPHA — "The Perimeter".
   Black ground for anything that carries the emblem; warm night for reading.
   Gold marks hierarchy and the active ring, never body copy. Steel is used
   only for metadata and preview notes. Geometry comes from the emblem's
   points: square or cut corners, diamonds as nodes, circles only for the
   protection rings. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-wdth.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #000;            /* replaced at build with the emblem's measured background */
  --night-1: #0c0b09;        /* warm black: reading sections */
  --night-2: #141519;        /* gunmetal (logo kit colour direction): approach, form */
  --night-3: #1e1b15;
  --gold-hi: #f0d48e;
  --gold: #cfa453;
  --gold-deep: #9a7433;
  --brass: #5d4a27;
  --platinum: #e8e7e3;       /* the lockup's lettering colour, used for headings */
  --bone: var(--platinum);
  --text: #cfc8ba;           /* body */
  --muted: #a39b8c;
  --steel: #8e9ba5;          /* metadata and preview notes only */
  --hair: rgba(207, 164, 83, 0.26);
  --hair-soft: rgba(237, 231, 219, 0.12);

  --sans: 'Space Grotesk', system-ui, sans-serif; /* ELVN OS Design System 2.0 UI family, adopted 2026-11-02 */
  /* Display: Archivo, a grotesque with a real width axis, set heavy and
     expanded. Broad-shouldered and squared like automotive and tactical
     lettering, never thin, readable at every size. Replaced Bodoni Moda
     italic at Matthew's direction (2026-11-02: "masculine, modern, upscale,
     somewhat bold, not curly"). */
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;

  --gut: clamp(20px, 4vw, 64px);
  --max: 1440px;
  --head-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
p { text-wrap: pretty; }
body {
  margin: 0;
  background: var(--night-1);
  color: var(--text);
  font: 400 17px/1.62 var(--sans);
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--gold); color: #0c0b09; }

:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gold); color: #0c0b09; padding: 12px 16px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- shared type ---------- */
.eyebrow {
  font: 600 13px/1.2 var(--sans);
  font-stretch: 112%;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.descriptor {
  display: block;
  font: 500 12px/1.3 var(--sans);
  font-stretch: 110%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.wordmark {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold);
  line-height: 0.9;
}
h2 {
  font: 800 clamp(32px, 4.1vw, 62px)/1.02 var(--display);
  font-stretch: 118%;
  color: var(--bone);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Preview notes: steel, condensed, bracketed. Never shown in production. */
.pv {
  display: inline-block;
  font: 600 11px/1.3 var(--sans);
  font-stretch: 75%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}
.pv::before { content: '[ '; }
.pv::after { content: ' ]'; }
.pv--block { display: block; white-space: normal; margin-top: 14px; max-width: 46ch; }
.preview-strip {
  background: var(--night-2);
  color: var(--steel);
  font: 500 12px/1.4 var(--sans);
  font-stretch: 80%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px var(--gut);
}

/* ---------- button: a cut corner taken from the emblem's points ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  border: 0; cursor: pointer;
  font: 650 14px/1 var(--sans);
  font-stretch: 112%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0c0b09;
  background: linear-gradient(225deg, transparent 13px, var(--gold) 13px); /* design-exception: draws the cut top-right corner while keeping a rectangular focus outline */
  transition: background-color 0.2s, color 0.2s;
}
.btn:hover { background: linear-gradient(225deg, transparent 13px, var(--gold-hi) 13px); /* design-exception: same cut corner, hover tone */ }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  height: var(--head-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gut);
  background: var(--ground);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.masthead.is-scrolled { border-bottom-color: var(--hair-soft); }
.masthead__brand { display: flex; align-items: center; justify-content: center; gap: 14px; text-decoration: none; min-height: 44px; min-width: 44px; }
.masthead__name { display: flex; flex-direction: column; gap: 4px; }
.masthead__name .wordmark { font-size: 22px; }
.masthead__name .descriptor { font-size: 10px; letter-spacing: 0.2em; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 550 13px/1 var(--sans); font-stretch: 112%;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--text);
  transition: color 0.2s;
}
.site-nav a:hover { color: var(--gold-hi); }
.site-nav__cta a { color: var(--gold); border-bottom: 1px solid var(--gold-deep); }

/* ---------- emblem ---------- */
/* The approved artwork sits on --ground, the colour of its own background,
   so its edges never show. `lighten` keeps that true even on sub-pixel
   seams; it cannot change any pixel lighter than the ground. */
.emblem { display: block; flex: none; mix-blend-mode: lighten; }
.emblem img { width: 100%; height: auto; }
.emblem--header { width: 48px; }

/* Full-name lockup (logo kit 01-Primary): same black ground as the emblem,
   so the same blend hides its edge. Never cropped, recoloured or animated. */
.lockup { display: block; mix-blend-mode: lighten; }
.lockup img { width: 100%; height: auto; }
.hero__mark--lockup { aspect-ratio: auto; margin-block: 24px; }
.hero__logo { margin: 0; width: min(100%, 560px); font: inherit; }
.hero__copy--lockup .hero__statement { margin-top: 26px; font-size: clamp(32px, 3.3vw, 52px); max-width: 13ch; }
.lockup--footer { width: 300px; }
.emblem--footer { width: 96px; }
.emblem--pending {
  display: grid; place-items: center; aspect-ratio: 1;
  border: 1px dashed var(--gold-deep);
  color: var(--steel);
  font: 600 10px/1.35 var(--sans); font-stretch: 80%;
  letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
}
.emblem--header.emblem--pending span, .emblem--footer.emblem--pending span { display: none; }
.emblem--header.emblem--pending::after, .emblem--footer.emblem--pending::after { content: 'A'; font: 700 16px var(--sans); color: var(--gold-deep); }

/* ---------- hero: mark · words · person ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  min-height: min(calc(100svh - var(--head-h)), 940px);
  background: var(--ground);
  isolation: isolate;
}
.hero__mark {
  position: relative;
  display: grid; place-items: center;
  margin: 56px clamp(8px, 2vw, 32px) 56px calc(var(--gut) + 8px);
  aspect-ratio: 1;
  align-self: center;
}
/* Positioned (so it paints after the rings) but with no z-index, so it does
   not form a stacking context and `lighten` can blend with the rings behind. */
.hero__mark .emblem--hero { width: 62%; position: relative; }
.hero__rings {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%;
  overflow: visible;
}
.hero__rings circle { fill: none; stroke: var(--brass); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.8; }
.hero__rings circle:nth-child(2) { opacity: 0.55; }
.hero__rings circle:nth-child(3) { opacity: 0.32; }

.hero__copy { padding: 56px clamp(16px, 2.4vw, 40px); position: relative; z-index: 2; }
.hero__title { margin: 22px 0 0; font-weight: inherit; }
.hero__title .wordmark { display: block; font-size: clamp(64px, 7.6vw, 124px); margin-left: -0.04em; }
.hero__title .descriptor { margin-top: 16px; font-size: 13px; color: var(--bone); }
.hero__statement {
  margin-top: 34px;
  font: 700 clamp(26px, 2.5vw, 38px)/1.12 var(--display);
  font-stretch: 112%;
  letter-spacing: -0.01em;
  color: var(--bone);
  max-width: 15ch;
  text-wrap: balance;
}
.hero__support { margin-top: 20px; max-width: 38ch; color: var(--text); }
.hero__actions { margin-top: 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero__call { color: var(--muted); font-size: 15px; }
.tel { color: var(--bone); text-decoration-color: var(--gold-deep); text-underline-offset: 4px; white-space: nowrap; }
.tel:hover { color: var(--gold-hi); }

.hero__portrait { align-self: stretch; position: relative; }
.hero__portrait .slot {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%); /* design-exception: the portrait dissolves into the ground so the emblem and copy never sit on the photo */
  mask-image: linear-gradient(to right, transparent 0, #000 38%);
}
/* Ground falls away into the warm reading surface below the hero. */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 120px; z-index: 3;
  background: linear-gradient(to bottom, transparent, var(--night-1)); /* design-exception: tonal hand-off from the emblem's black ground to the warm reading black */
  pointer-events: none;
}

/* ---------- media slots ---------- */
.slot { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--night-2); }
.slot img, .slot picture { width: 100%; height: 100%; }
.slot img { object-fit: cover; object-position: var(--focal); }
.slot figcaption {
  position: absolute; left: 0; bottom: 0; padding: 14px 18px;
  font: 500 12px/1.4 var(--sans); font-stretch: 85%; letter-spacing: 0.08em; color: var(--muted);
}
.slot--empty {
  outline: 1px dashed rgba(142, 155, 165, 0.35);
  outline-offset: -12px;
  background:
    radial-gradient(120% 80% at 72% 18%, rgba(207, 164, 83, 0.13), transparent 58%), /* design-exception: abstract placeholder lit like a single streetlamp; marks an empty photo slot */
    linear-gradient(180deg, #17150f, #0d0c0a 70%);
}
.slot__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  max-width: 44ch; margin-left: auto;
  font: 500 11px/1.5 var(--sans); font-stretch: 80%;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel);
  text-align: right;
}
.slot__label b { color: var(--gold-deep); font-weight: 700; }

/* ---------- transition scene ---------- */
.scene {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(80px, 12vw, 180px) var(--gut) clamp(72px, 9vw, 140px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
}
.scene__line {
  grid-column: 2 / span 9;
  font: 800 clamp(36px, 5.2vw, 86px)/1 var(--display);
  font-stretch: 116%;
  color: var(--bone);
  letter-spacing: -0.015em;
  max-width: 17ch;
}
.scene__image { grid-column: 1 / -1; margin: clamp(48px, 7vw, 96px) calc(var(--gut) * -1) 0; }
.scene__body { grid-column: 7 / span 5; margin-top: 40px; font-size: 19px; max-width: 46ch; }

/* ---------- services: the perimeter ---------- */
.services { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--gut) 40px; }
.services__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 18px; align-items: end; }
.services__head .eyebrow { grid-column: 1 / -1; }
.services__head h2 { grid-column: 1 / span 7; max-width: 14ch; }
.services__intro { grid-column: 9 / span 4; max-width: 38ch; }

/* The perimeter stands on its own: rings on the left, one straight leader
   per ring, labels in a single aligned column. Hovering or focusing a label
   lights its ring and leader. */
.perimeter-key { position: relative; max-width: 1080px; margin: clamp(48px, 6vw, 88px) auto 0; aspect-ratio: 1000 / 400; }
.perimeter-key .perimeter { position: absolute; left: 0; top: 0; width: 40%; height: 100%; overflow: visible; }
.perimeter .ring { fill: none; stroke: var(--brass); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: stroke 0.3s, stroke-width 0.3s; }
.perimeter .ring[data-ring='1'] { stroke: var(--gold-deep); }
.perimeter .leader { fill: none; stroke: var(--gold-deep); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 0.3s; }
.perimeter circle.node { fill: var(--night-1); stroke: var(--gold); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: fill 0.3s; }
.perimeter .core { fill: var(--gold); }
.perimeter .core-label { fill: var(--bone); font: 600 13px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; text-anchor: middle; }
.ring-key__item { position: absolute; left: 48%; right: 0; transform: translateY(-50%); }
.ring-key a { display: flex; align-items: center; gap: 18px; min-height: 44px; text-decoration: none; }
.ring-key__num { display: none; }
.ring-key__text { display: flex; flex-direction: column; gap: 6px; }
.ring-key__phase { font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.ring-key__name { font: 750 clamp(19px, 2.1vw, 28px)/1.05 var(--display); font-stretch: 112%; color: var(--bone); transition: color 0.25s; }
.ring-key a:hover .ring-key__name, .ring-key a:focus-visible .ring-key__name { color: var(--gold-hi); }
.ring-key a:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.perimeter-key:has(a[data-ring='4']:is(:hover, :focus-visible)) :is(.ring, .leader)[data-ring='4'],
.perimeter-key:has(a[data-ring='3']:is(:hover, :focus-visible)) :is(.ring, .leader)[data-ring='3'],
.perimeter-key:has(a[data-ring='2']:is(:hover, :focus-visible)) :is(.ring, .leader)[data-ring='2'],
.perimeter-key:has(a[data-ring='1']:is(:hover, :focus-visible)) :is(.ring, .leader)[data-ring='1'] { stroke: var(--gold-hi); stroke-width: 2.25; }
.perimeter-key:has(a[data-ring='4']:is(:hover, :focus-visible)) .node[data-ring='4'],
.perimeter-key:has(a[data-ring='3']:is(:hover, :focus-visible)) .node[data-ring='3'],
.perimeter-key:has(a[data-ring='2']:is(:hover, :focus-visible)) .node[data-ring='2'],
.perimeter-key:has(a[data-ring='1']:is(:hover, :focus-visible)) .node[data-ring='1'] { fill: var(--gold); }

/* The four services follow in one centred column. */
.services__body { max-width: 900px; margin: clamp(56px, 7vw, 104px) auto 0; }
.svc { position: relative; padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 48px); }
.svc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; }
.svc__num { color: var(--gold-hi); }
.svc__index { display: flex; gap: 18px; font: 600 12px/1 var(--sans); font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.svc__index span + span { color: var(--steel); }
.svc__name {
  margin-top: 20px;
  font: 850 clamp(32px, 3.7vw, 58px)/0.98 var(--display);
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--bone);
}
.svc__line { margin-top: 22px; font: 650 clamp(20px, 1.8vw, 27px)/1.22 var(--display); font-stretch: 108%; color: var(--gold-hi); max-width: 26ch; text-wrap: balance; }
.svc__text { margin-top: 20px; max-width: 52ch; font-size: 18px; }
.svc h4 { font: 600 12px/1 var(--sans); font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; }

/* threat assessment: an inspection ledger */
.svc__ledger { margin-top: 40px; max-width: 560px; }
.svc__ledger ol { counter-reset: l; border-top: 1px solid var(--hair); }
.svc__ledger li { counter-increment: l; display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hair-soft); color: var(--bone); }
.svc__ledger li::before { content: counter(l, decimal-leading-zero); font: 600 13px var(--sans); font-stretch: 80%; letter-spacing: 0.1em; color: var(--gold-deep); }

/* secure transportation: a route with nodes */
.svc__route { margin-top: 44px; display: flex; justify-content: space-between; position: relative; max-width: 560px; }
.svc__route::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; border-top: 1px dashed var(--gold-deep); }
.svc__route li { position: relative; padding-top: 28px; font: 600 13px/1.2 var(--sans); font-stretch: 85%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); }
.svc__route li::before { content: ''; position: absolute; left: 0; top: 0; width: 12px; height: 12px; background: var(--night-1); border: 1px solid var(--gold); transform: rotate(45deg); }
.svc__route li:last-child { text-align: right; }
.svc__route li:last-child::before { left: auto; right: 0; background: var(--gold); }
.svc__photo { margin-top: 40px; max-width: 640px; }

/* executive protection: settings set as a typographic run */
.svc__settings { margin-top: 40px; }
.svc__settings ul { display: flex; flex-wrap: wrap; gap: 4px 0; }
.svc__settings li { font: 600 clamp(18px, 1.5vw, 23px)/1.4 var(--display); font-stretch: 108%; color: var(--bone); }
.svc__settings li:not(:last-child)::after { content: '/'; color: var(--gold-deep); margin: 0 0.55em; }

/* personal bodyguards: the promise carries the article */
.svc--statement .svc__line { font-size: clamp(30px, 3.3vw, 52px); line-height: 1.08; max-width: 18ch; }

/* ---------- personal training: not a ring (it is not protection), so it
   gets its own form: a lit portrait beside a regimen set in wide caps ---------- */
.training {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) var(--gut);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(32px, 6vw, 110px); align-items: center;
  border-top: 1px solid var(--hair-soft);
}
.training__name { margin-top: 18px; font-size: clamp(40px, 5vw, 80px); max-width: 12ch; }
.training__line { margin-top: 18px; font: 650 clamp(20px, 1.8vw, 27px)/1.22 var(--display); font-stretch: 108%; color: var(--gold-hi); text-wrap: balance; }
.training__text { margin-top: 22px; max-width: 48ch; font-size: 18px; }
.training__list { margin-top: 34px; border-top: 1px solid var(--hair); max-width: 520px; }
.training__list li {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--hair-soft);
  font: 650 15px/1.2 var(--sans); font-stretch: 118%;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone);
}
.training__list li::before { content: ''; width: 9px; height: 9px; flex: none; background: var(--gold); transform: rotate(45deg); }
.training__cta { margin-top: 34px; }
.btn--quiet { background: none; color: var(--gold); border: 1px solid var(--gold-deep); }
.btn--quiet:hover { background: none; color: var(--gold-hi); border-color: var(--gold); }

/* ---------- approach: a route, not a card row ---------- */
.approach { background: var(--night-2); padding: clamp(72px, 9vw, 140px) var(--gut); }
.approach__head, .route { max-width: var(--max); margin: 0 auto; }
.approach__head h2 { margin-top: 18px; max-width: 16ch; }
.route { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); position: relative; }
.route::before { content: ''; position: absolute; left: 0; right: 0; top: 23px; border-top: 1px solid var(--hair); }
.route__stop { position: relative; }
.route__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.route__num {
  position: relative; display: inline-block; padding-right: 16px;
  background: var(--night-2);
  font: 850 40px/1.2 var(--display); font-stretch: 125%; color: var(--gold);
}
.route h3 { margin-top: 26px; font: 650 19px/1.25 var(--sans); font-stretch: 112%; color: var(--bone); }
.route p { margin-top: 12px; color: var(--text); font-size: 16px; max-width: 30ch; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 110px); align-items: center; max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 160px) var(--gut) clamp(80px, 10vw, 160px) 0; }
.about__portrait .slot { --ar: 3/4; }
.about__copy h2 {
  margin-top: 18px;
  font: 900 clamp(42px, 5.6vw, 94px)/0.92 var(--display);
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0;
}
.about__role { margin-top: 18px; font: 600 13px/1.3 var(--sans); font-stretch: 112%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.about__bio { margin-top: 22px; font-size: 19px; max-width: 46ch; color: var(--text); }
.about__bio:first-of-type { margin-top: 28px; }
.about__signoff { margin-top: 30px; font: 800 clamp(20px, 1.9vw, 28px)/1.2 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-hi); }
.record { margin-top: 44px; max-width: 520px; border-top: 1px solid var(--hair); padding-top: 18px; }
.record h3 { font: 600 12px/1 var(--sans); font-stretch: 80%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); }
.record p { margin-top: 12px; font-size: 15px; color: var(--muted); max-width: 44ch; }
.record dl div { display: grid; grid-template-columns: 40% 1fr; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.record dt { color: var(--muted); }
.record dd { color: var(--bone); }

/* ---------- consultation ---------- */
.consult {
  background: var(--ground);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 6vw, 110px);
  padding: clamp(80px, 10vw, 150px) var(--gut);
}
.consult__intro h2 { margin-top: 18px; font-size: clamp(38px, 4.4vw, 68px); max-width: 12ch; }
.consult__intro > p:not(.eyebrow) { margin-top: 24px; max-width: 40ch; }
.consult__direct { color: var(--muted); }
.consult__privacy { padding-top: 20px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--bone); }

.inquiry { background: var(--night-2); padding: clamp(28px, 4vw, 56px); border-top: 2px solid var(--gold-deep); align-self: start; }
.inquiry__notice { margin-bottom: 28px; padding: 14px 16px; border: 1px dashed var(--steel); color: var(--steel); font-size: 14px; }
.inquiry__notice b { color: var(--bone); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.field { display: flex; flex-direction: column; margin-bottom: 22px; min-width: 0; border: 0; }
.field label, .field legend {
  font: 600 12px/1.3 var(--sans); font-stretch: 100%;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone);
  margin-bottom: 8px; padding: 0;
}
.opt { color: var(--muted); letter-spacing: 0.08em; font-weight: 500; text-transform: none; font-size: 12px; margin-left: 6px; }
.field input, .field textarea {
  width: 100%; min-height: 48px;
  padding: 10px 2px;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--muted);
  border-radius: 0;
  color: var(--bone);
  font: 400 17px/1.4 var(--sans);
  transition: border-color 0.2s;
}
.field textarea { resize: vertical; min-height: 112px; }
.field input::placeholder, .field textarea::placeholder { color: #7a7366; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--bone); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-bottom-color: var(--gold); }
.field [aria-invalid='true'] { border-bottom-color: #e0806a; }
.field__hint { margin-top: 8px; font-size: 14px; color: var(--muted); }
.field__error { margin-top: 6px; font-size: 14px; color: #f0a08c; min-height: 0; }
.field__error:empty { display: none; }
.field__error:not(:empty)::before { content: 'Check: '; font-weight: 600; }

/* Selection Study 02: one row per option, an indicator that turns into a
   gold check when chosen, so the choice never rests on colour alone. */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.choice { position: relative; display: flex; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  position: relative; flex: 1;
  display: flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 0 16px;
  font-size: 15px; font-weight: 500; color: var(--text);
  transition: border-color 0.2s, color 0.2s;
}
.choice span::before { content: ''; flex: none; width: 20px; height: 20px; box-sizing: border-box; transition: background 0.2s, border-color 0.2s; }
.choice span::after { content: ''; position: absolute; left: 23px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid #1c1204; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.15s; }
.choice:hover span { color: var(--bone); }
.choice input:checked + span { color: var(--bone); }
.choice input:checked + span::after { opacity: 1; }
.choice input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 10px; }
/* Feedback Study 01: the result of sending sits in a smoked notice with a
   status sphere and a plain-word label, so state is never colour alone. */
.inquiry__status { flex: 1 1 320px; max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--bone); }
.inquiry__status:empty { display: none; }
.notice { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 16px 18px; }
.notice__mark { position: relative; width: 26px; height: 26px; margin-top: -1px; display: grid; place-items: center; font: 800 14px/1 var(--display); color: #1c1204; }
.notice b { display: block; font-weight: 700; color: var(--bone); margin-bottom: 2px; }

/* ---------- footer ---------- */
.footer {
  background: var(--ground);
  border-top: 1px solid var(--hair-soft);
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 32px;
  padding: 56px var(--gut) 48px;
}
.footer__brand { display: flex; align-items: center; gap: 20px; }
.footer__brand p { display: flex; flex-direction: column; gap: 6px; }
.footer__brand .wordmark { font-size: 30px; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 4px 28px; justify-content: center; }
.footer__nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font: 550 13px/1 var(--sans); font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; }
.footer__nav a:hover { color: var(--gold-hi); }
.footer__meta { text-align: right; color: var(--muted); font-size: 14px; line-height: 1.8; }
.footer__meta [data-preview] { color: var(--steel); }

/* ---------- motion (opt-in: only with JS and without reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-enter] { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js .hero [data-enter='mark'] { transform: scale(0.97); transition-duration: 1.2s; }
  .js .hero [data-enter='portrait'] { transform: none; transition-duration: 1.6s; }
  .js .hero__rings circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease); }
  .js .hero__rings circle:nth-child(2) { transition-delay: 0.15s; }
  .js .hero__rings circle:nth-child(3) { transition-delay: 0.3s; }
  .js .is-ready .hero [data-enter] { opacity: 1; transform: none; }
  .js .is-ready .hero__rings circle { stroke-dashoffset: 0; }
  .js .hero [data-enter='1'] { transition-delay: 0.25s; }
  .js .hero [data-enter='2'] { transition-delay: 0.35s; }
  .js .hero [data-enter='3'] { transition-delay: 0.55s; }
  .js .hero [data-enter='4'] { transition-delay: 0.7s; }
  .js .hero [data-enter='5'] { transition-delay: 0.85s; }
  .js .hero [data-enter='portrait'] { transition-delay: 0.3s; }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
  /* The observed wrapper stays unclipped (a zero-area clip makes
     IntersectionObserver report it as never visible); only its child is clipped. */
  .js [data-reveal='clip'] { opacity: 1; transform: none; }
  .js [data-reveal='clip'] > * { clip-path: inset(0 50% 0 50%); transition: clip-path 1.3s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal='clip'].is-in > * { clip-path: inset(0 0 0 0); }
}

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .hero__mark { grid-column: 1; grid-row: 1; padding: 40px 0 40px var(--gut); }
  .hero__copy { grid-column: 2; grid-row: 1; padding-right: var(--gut); }
  .hero__portrait { grid-column: 1 / -1; grid-row: 2; }
  .hero__portrait .slot { position: relative; inset: auto; aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); /* design-exception: same dissolve, from the top when the portrait sits below the copy */ }
  .services__head h2 { grid-column: 1 / -1; }
  .services__intro { grid-column: 1 / span 8; }
  .route { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .route::before { display: none; }
  .route__num { padding-right: 0; }
    .route__num { font-size: 32px; }
  .route h3 { margin-top: 12px; }
}

@media (max-width: 999px) {
  /* Below desktop the header keeps the emblem and a call link; sections
     move to the floating navigation bar at the bottom (Navigation Study 01). */
  .site-nav { display: none; }
  .masthead__call { display: inline-flex; }
  .island { display: flex; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .about { grid-template-columns: 1fr; padding: 0 0 80px; }
  .about__portrait { margin-bottom: 40px; }
  .about__portrait .slot { --ar: 4/3; }
  .about__copy { padding: 0 var(--gut); }
  .consult { grid-template-columns: 1fr; row-gap: 48px; }
  .training { grid-template-columns: 1fr; row-gap: 40px; }
  .training__photo { order: -1; }
  .scene__line { grid-column: 1 / -1; }
  .scene__body { grid-column: 1 / -1; }
  .footer { grid-template-columns: 1fr; align-items: start; }
  .footer__nav ul { justify-content: flex-start; }
  .footer__meta { text-align: left; }
}

/* ---------- phone ---------- */
@media (max-width: 699px) {
  :root { --head-h: 64px; }
  body { font-size: 16.5px; }
  .masthead__name .descriptor { display: none; }
  .masthead__name .wordmark { font-size: 20px; }
  .emblem--header { width: 38px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__mark { grid-column: 1; grid-row: 1; width: min(78vw, 360px); justify-self: center; padding: 36px 0 8px; }
  .hero__mark--lockup { width: min(86vw, 400px); margin: 12px auto 0; padding: 20px 0 0; }
  .hero__copy--lockup .hero__statement { font-size: clamp(30px, 8.6vw, 38px); margin-top: 18px; }
  .lockup--footer { width: 240px; }
  .hero__copy { grid-column: 1; grid-row: 2; padding: 8px var(--gut) 40px; }
  .hero__portrait { grid-row: 3; }
  .hero__portrait .slot { aspect-ratio: 4 / 5; }
  .hero__title .wordmark { font-size: clamp(54px, 17vw, 76px); }
  .hero__title .descriptor { font-size: 11.5px; letter-spacing: 0.18em; }
  .hero__statement { font-size: clamp(27px, 8vw, 34px); margin-top: 26px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .scene { padding-top: 72px; }
  .scene__body { font-size: 17px; }
  .services__intro { grid-column: 1 / -1; }
  .svc__name { font-size: clamp(25px, 7.6vw, 38px); font-stretch: 108%; overflow-wrap: anywhere; }
  .svc__route li { font-size: 11.5px; letter-spacing: 0.1em; }
  .route { grid-template-columns: 1fr; row-gap: 16px; }
  .field-row { grid-template-columns: 1fr; }
  .inquiry { margin: 0 calc(var(--gut) * -1); }
  .inquiry__submit .btn { width: 100%; }
  .masthead__call span { font-size: 12px; }
  .slot__label { font-size: 10px; padding: 14px 16px; }
  .svc__settings ul { flex-direction: column; gap: 8px; }
  .svc__settings li:not(:last-child)::after { content: none; }
  .svc__settings li::before { content: '/'; color: var(--gold-deep); margin-right: 0.5em; }
}

/* =====================================================================
   ELVN OS Design System 2.0 components, recoloured gold (2026-11-02).
   Matthew chose this from the rendered mock-up ("do it that way, match
   the exact style of the picture"). Sources in Notion: Approved Liquid
   Buttons, Approved Glass Inputs, Card Study 03, Space Grotesk.
   ===================================================================== */
.eyebrow, .site-nav a, .svc__index, .about__role { letter-spacing: 0.12em !important; }

/* liquid gold glass buttons */
.liquid-control { position: relative; isolation: isolate; overflow: hidden; border: 0 !important; border-radius: 14px; min-height: 52px; padding: 0 30px; text-transform: none !important; letter-spacing: 0.01em !important; font-size: 15px !important; font-weight: 650 !important; transition: transform 0.15s, box-shadow 0.2s; /* design-exception: Matthew asked for liquid gold glass buttons (2026-11-02); the radius is the glass vessel's edge */ }
.liquid-control.primary { color: #231503 !important; text-shadow: 0 1px 0 #fff6d899;
  background: linear-gradient(180deg, #fff4d2 0%, #f5dfa0 32%, #ebcb7c 60%, #dcb35a 100%) !important;
  box-shadow: 0 0 0 1px #4a2f08, 0 10px 20px -8px #000e, 0 2px 4px #0009, inset 0 1px 0 #fffcee, inset 0 0 0 1px #fff3c855, inset 0 -4px 10px #6b420a55; /* design-exception: Matthew asked for liquid gold glass buttons (2026-11-02): champagne glass body, dark outer edge and inner refraction */ }
.liquid-control.secondary { color: #f3ead8 !important; text-shadow: 0 1px 2px #000b;
  background: linear-gradient(180deg, #3d372c 0%, #221e18 50%, #15130f 100%) !important;
  box-shadow: 0 0 0 1px #000, 0 10px 20px -8px #000e, inset 0 0 0 1px #e9c46a66, inset 0 1px 0 #ffffff30; /* design-exception: Matthew asked for liquid gold glass buttons (2026-11-02): smoked glass body with a gold glass edge */ }
.liquid-control::before { content: ''; position: absolute; left: 3px; right: 3px; top: 2px; height: 46%; z-index: 2; pointer-events: none; border-radius: 12px 12px 40% 40% / 12px 12px 12px 12px; background: linear-gradient(180deg, #ffffffd9, #ffffff38 70%, #ffffff00); transition: opacity 0.2s; /* design-exception: Matthew asked for liquid gold glass buttons (2026-11-02): the gloss cap on the glass */ }
.liquid-control.secondary::before { opacity: 0.32; }
.glass__liquid { position: absolute; left: 0; bottom: 0; width: 200%; height: 56%; z-index: 1; pointer-events: none; transition: height 0.45s var(--ease); }
.liquid-control.secondary .glass__liquid { height: 22%; }
.glass__liquid svg { display: block; width: 100%; height: 100%; }
.liquid-control:hover .glass__liquid { height: 64%; animation: slosh 2.4s linear infinite; }
.liquid-control.secondary:hover .glass__liquid { height: 28%; }
@keyframes slosh { to { transform: translateX(-50%); } }
.liquid-label { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; pointer-events: none; }
.liquid-control:active { transform: translateY(1px); }
.liquid-control.primary:active { box-shadow: 0 0 0 1px #4a2f08, 0 3px 8px -4px #000e, inset 0 1px 0 #fffcee, inset 0 0 0 1px #fff3c855, inset 0 -2px 6px #6b420a66; /* design-exception: Matthew asked for liquid gold glass buttons (2026-11-02): pressed, the glass sits lower and its shadow tightens */ }
.liquid-control:active::before { opacity: 0.7; }
.liquid-control:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .liquid-control:hover .glass__liquid { animation: none; } .glass__liquid { transition: none; } }
.liquid-control[disabled] { opacity: 0.6; }

/* glass inputs */
.field input:not([type=radio]), .field textarea { border: 0 !important; background: transparent !important; position: relative; z-index: 1; color: #f2ede3 !important; text-shadow: 0 1px 2px #0009; padding: 0 !important; min-height: 54px; outline: 0 !important; /* design-exception: approved ELVN OS Design System 2.0 text lift on metal and glass, recoloured gold (2026-11-02) */ }
.field textarea { padding-top: 16px !important; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #a8a294 !important; }
.well-frame { display: block; position: relative; padding: 2px; border-radius: 18px; isolation: isolate; transition: box-shadow .15s;
  background: linear-gradient(150deg,#e8e4dc 0%,#a9a397 8%,#5e584c 21%,#1a1712 39%,#463f33 65%,#aca592 87%,#d8d2c4 96%,#6d6656 100%);
  box-shadow: 0 3px 4px #000b, 0 -1px 0 #ffffff19, inset 0 1px 0 #fff5; /* design-exception: approved ELVN OS Design System 2.0 glass input: platinum lip, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.well-frame:before { content: ''; position: absolute; inset: 2px; border-radius: 16px; border: 1px solid #040302; box-shadow: inset 0 1px 1px #000, inset 0 -1px 0 #d1c6b033; pointer-events: none; z-index: 3; /* design-exception: approved ELVN OS Design System 2.0 glass input: inner black separation, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.well { position: relative; display: flex; align-items: center; padding: 0 18px; min-height: 54px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 82% 135%,#8a7a5c24 0%,#6b5a3b0b 40%,transparent 66%), linear-gradient(104deg,#0f0d0af5 0%,#0a0806ee 38%,#1a1610e8 74%,#0f0d0af5 100%);
  box-shadow: inset 0 5px 8px #000d, inset 0 -2px 5px #e5d4b513; /* design-exception: approved ELVN OS Design System 2.0 glass input: recessed smoked glass, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.well:before { content: ''; position: absolute; inset: 1px; pointer-events: none; border-radius: inherit; z-index: 0;
  background: radial-gradient(ellipse 54% 120% at 2% -57%,#fcf7eead 0%,#f1e6d066 34%,#d3c0a02b 52%,transparent 71%), radial-gradient(ellipse 39% 110% at 99% -53%,#fff6e8aa 0%,#e8dcc555 35%,#bfaa8a1c 55%,transparent 73%); /* design-exception: approved ELVN OS Design System 2.0 glass input: curved shoulder reflections, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.well:after { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: 0; opacity: .85;
  background: linear-gradient(116deg,transparent 5%,#efe2d100 19%,#eadcc714 25%,#efe3d023 27%,#d0bfa510 33%,transparent 41%,transparent 61%,#e3d3bb0b 68%,#f5ead91a 73%,#e3d3bb05 81%,transparent 89%), radial-gradient(ellipse 65% 42% at 59% 118%,#e9d6b92b 0%,transparent 72%); /* design-exception: approved ELVN OS Design System 2.0 glass input: diagonal lens reflections, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.well-frame:focus-within { background: linear-gradient(145deg,#fff0c2,#f0c869 22%,#b6862f 50%,#e9c06a 81%,#fff1c8); box-shadow: 0 0 0 1px #d8a84a55, 0 3px 4px #0009, inset 0 1px 0 #fff5; /* design-exception: approved ELVN OS Design System 2.0 glass input: gold focus lip, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.field [aria-invalid='true'] { border: 0 !important; }
.well-frame.invalid { background: linear-gradient(150deg,#d6aaa3,#987873 18%,#392b30 45%,#a87f79 86%,#dbb5ad); /* design-exception: approved ELVN OS Design System 2.0 glass input: validation lip, paired with the text error, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.field > label, .field > legend { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: #d8d2c4 !important; margin-bottom: 10px !important; }
.choice span { text-transform: none; letter-spacing: 0; font-family: var(--sans); border-radius: 14px; border: 1px solid #c9c0ad33; background: linear-gradient(104deg,#16130ef5,#0d0b08ee 50%,#1d1912e8); box-shadow: inset 0 3px 6px #000c; /* design-exception: approved ELVN OS Design System 2.0 Selection Study 02: smoked-glass option row, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.choice:hover span { border-color: #c9c0ad66; }
.choice span::before { border-radius: 50%; border: 1.5px solid #b3aa9a; background: radial-gradient(circle at 50% 50%, #0a0806 0 40%, transparent 41%), linear-gradient(150deg,#3a352c,#141210); box-shadow: inset 0 1px 2px #000; /* design-exception: approved ELVN OS Design System 2.0 Selection Study 02: round indicator well, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.choice input:checked + span { border-color: #d8a84a99; box-shadow: inset 0 3px 6px #000c, 0 0 0 1px #d8a84a44; /* design-exception: approved ELVN OS Design System 2.0 Selection Study 02: selected rim, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.choice input:checked + span::before { border-color: #fff0c2; background: radial-gradient(circle at 34% 28%, #fff6d6 0, #f2c75f 38%, #b9842a 78%, #6f4b15 100%); box-shadow: 0 1px 2px #000a; /* design-exception: approved ELVN OS Design System 2.0 Selection Study 02: gold indicator sphere behind the check mark, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.choice input:checked + span::after { filter: drop-shadow(0 1px 0 #fff3c066); /* design-exception: approved ELVN OS Design System 2.0 text lift on metal and glass, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }

/* V2 card material (Card Study 03: straight edges, r=17, platinum rim) */
.v2-card { position: relative; isolation: isolate; }
.card-surface { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; filter: drop-shadow(0 6px 8px #0005); /* design-exception: approved ELVN OS Design System 2.0 card material: soft lift under the card, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
html:not(.js) .v2-card { border: 1px solid #6b624f !important; border-radius: 17px; background: #15130e !important; /* design-exception: approved ELVN OS Design System 2.0 card material: no-JavaScript fallback for the drawn card surface, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.svc.v2-card { margin-bottom: 16px; }
.route__stop.v2-card { padding: 28px 24px 30px !important; border-top: 0 !important; }
.route::before { display: none !important; }
.route__num { background: none !important; }
.inquiry.v2-card { background: none !important; border-top: 0 !important; }
.record.v2-card { border-top: 0 !important; padding: 24px 26px !important; }
@media (max-width: 699px) { .inquiry { margin: 0 !important; } }

/* Card Study 03 interlock: cards stacked in one column share a 7px curved
   seam (drawn in main.js), with a constant 16px gap that follows it. */
.v2-card.has-seam-top { margin-top: 0; }

/* V2 metallic icons (approved icon renderer, gold face; platinum utility) */
.metal-svg { display: block; overflow: visible; flex: none; }
.metal-svg.platinum { filter: drop-shadow(0 1px 0 #0009); /* design-exception: approved ELVN OS Design System 2.0 platinum icon: one-pixel cast line, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.well--icon { gap: 12px; }
.well__icon { position: relative; z-index: 1; }
.well--icon:has(textarea) { align-items: flex-start; }
.well--icon:has(textarea) .well__icon { margin-top: 17px; }
.route__head .metal-svg { margin-right: 2px; }
.contact-lines { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.contact-lines li { display: flex; align-items: center; gap: 14px; min-height: 44px; color: var(--text); }
.contact-lines .tel { display: inline-flex; align-items: center; min-height: 44px; }
.contact-lines li > span { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; }
.contact-lines .tel { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.consult__intro { min-width: 0; }
.consult { overflow-x: clip; } /* the icons' soft cast shadows may not widen the page */

/* Header call link below desktop */
.masthead__call { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 10px; text-decoration: none; color: var(--bone); font: 600 13px/1 var(--sans); letter-spacing: 0.04em; }
.masthead__call:hover span { color: var(--gold-hi); }

/* Navigation Study 01: floating smoked-glass bar on phones and tablets.
   Opaque smoke instead of backdrop blur, so text behind it never shows
   through and nothing depends on a blur the browser may not draw. */
.island {
  display: none; position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 520px);
  justify-content: space-between; padding: 6px;
  border: 1.5px solid transparent; border-radius: 22px;
  background: linear-gradient(104deg,#15130ef7,#0b0907f7 48%,#1a1711f7) padding-box, linear-gradient(150deg,#e8e4dc,#8f8676 22%,#2b2720 45%,#6d6656 72%,#d8d2c4) border-box;
  box-shadow: 0 10px 24px #000c, 0 2px 4px #000a, inset 0 1px 0 #ffffff14; /* design-exception: approved ELVN OS Design System 2.0 Navigation Study 01: floating bar with platinum rim and lift, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */
}
.island a {
  flex: 1 1 0; min-width: 0; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-decoration: none; color: #a8a294; border-radius: 16px;
  font: 600 11px/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap;
  transition: color 0.2s, background-color 0.2s; /* design-exception: approved ELVN OS Design System 2.0 Navigation Study 01: the pressed/selected well inside the bar, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */
}
.island a .metal-svg { filter: saturate(0) brightness(1.25) contrast(.9); transition: filter 0.2s; }
.island a[aria-current='true'] { color: var(--gold-hi); background: #ffffff0d; }
.island a[aria-current='true'] .metal-svg { filter: none; }
.island a:active .metal-body { transform: translate(.12px, .48px); }
.island a:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -2px; }
@media (max-width: 359px) { .island a span { font-size: 10px; } }

/* Feedback Study 01 notice */
.notice { border-radius: 16px; border: 1px solid #c9c0ad33; background: linear-gradient(104deg,#16130ef5,#0d0b08ee 50%,#1d1912e8); box-shadow: inset 0 1px 0 #ffffff12, 0 4px 10px #0008; /* design-exception: approved ELVN OS Design System 2.0 Feedback Study 01: smoked-glass notice, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.notice__mark { border-radius: 50%; box-shadow: 0 1px 2px #000a, inset 0 -2px 3px #0004; /* design-exception: approved ELVN OS Design System 2.0 Feedback Study 01: status sphere, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.notice--sent .notice__mark, .notice--sending .notice__mark { background: radial-gradient(circle at 34% 28%, #fff6d6 0, #f2c75f 38%, #b9842a 78%, #6f4b15 100%); /* design-exception: approved ELVN OS Design System 2.0 Feedback Study 01: gold sphere for sent, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.notice--unavailable .notice__mark { background: radial-gradient(circle at 34% 28%, #ffffff 0, #d9d3c6 40%, #8f8676 85%, #5c564b 100%); /* design-exception: approved ELVN OS Design System 2.0 Feedback Study 01: platinum sphere for not-sent information, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.notice--error .notice__mark { background: radial-gradient(circle at 34% 28%, #ffd6cc 0, #e0806a 40%, #a4442f 85%, #6b2618 100%); color: #2a0b05; /* design-exception: approved ELVN OS Design System 2.0 Feedback Study 01: red sphere, used only when sending failed or entries need fixing, recoloured gold for ALPHA at Matthew's direction (2026-11-02) */ }
.notice--error { border-color: #e0806a55; }
@media (prefers-reduced-motion: reduce) { .island a, .island a .metal-svg, .liquid-control { transition: none; } }
/* Placed after the base rules so they win below desktop. */
@media (max-width: 999px) {
  .masthead__call { display: inline-flex; }
  .island { display: flex; }
}
@media (max-width: 699px) {
  /* The display face is set wide; scale it with the screen so the longest
     word always fits a 320px phone. */
  h2 { font-size: clamp(26px, 8.4vw, 40px); }
}

/* Phones and small tablets: the rings sit on top at a readable size, the leaders drop away and
   the numbered nodes are matched by a numbered key underneath. */
@media (max-width: 899px) {
  .perimeter-key { aspect-ratio: auto; max-width: 560px; }
  .perimeter-key .perimeter { position: relative; display: block; width: min(100%, 300px); height: auto; margin: 0 auto; }
  .perimeter .leaders { display: none; }
  .ring-key { margin-top: 28px; border-top: 1px solid var(--hair-soft); }
  .ring-key__item { position: static; transform: none; border-bottom: 1px solid var(--hair-soft); }
  .ring-key a { min-height: 64px; padding: 10px 0; gap: 16px; }
  .ring-key__num { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--gold); border-radius: 50%; font: 700 12px/1 var(--sans); color: var(--gold-hi); /* design-exception: the same round numbered node drawn on each ring, repeated in the key so the two read as one */ }
  .ring-key__name { font-size: 19px; }
}
@media (max-width: 699px) {
  .liquid-control { padding: 12px 20px; }
  .liquid-label { white-space: normal; text-align: center; }
}

.page-veil { position: fixed; inset: 0; z-index: 90; background: var(--ground); opacity: 0; pointer-events: none; }
.is-leaving-page .page-veil { opacity: 1; transition: opacity 0.34s ease-in; }
.is-leaving-page .masthead, .arrive .masthead { z-index: 95; }
.arrive .page-veil { opacity: 1; animation: veil-out 0.46s var(--ease) 0.05s forwards; }
.arrive main { animation: content-in 0.6s var(--ease) both; }
@keyframes veil-out { to { opacity: 0; } }
@keyframes content-in { from { translate: 0 10px; } to { translate: none; } }
@media (prefers-reduced-motion: reduce) { .arrive .page-veil { animation-duration: 0.01s; } .arrive main { animation: none; } }

/* The header mark on the homepage waits until the entrance mark has left
   the screen, so there is only ever one emblem in view. */
.site-nav a[aria-current='page'] { color: var(--gold-hi); }

/* ---------- service journeys ---------- */
.journey {
  max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 96px) var(--gut) clamp(56px, 7vw, 112px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 88px); align-items: center;
}
.journey__title { margin-top: 18px; font: 800 clamp(40px, 5.2vw, 84px)/0.98 var(--display); font-stretch: 116%; letter-spacing: -0.012em; color: var(--bone); max-width: 13ch; text-wrap: balance; }
.journey__line { margin-top: 22px; font: 650 clamp(20px, 1.8vw, 27px)/1.22 var(--display); font-stretch: 108%; color: var(--gold-hi); max-width: 26ch; text-wrap: balance; }
.journey__text { margin-top: 20px; font-size: 18px; max-width: 48ch; }
.journey__actions { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.journey .svc__route { margin-top: 40px; }
.journey--transport .journey__photo { margin-right: calc(var(--gut) * -1); }
.journey--transport .journey__photo .slot { --ar: 4/3 !important; }
.journey--security { min-height: min(84vh, 860px); align-items: stretch; padding-top: 0; padding-bottom: 0; }
.journey--security .journey__copy { align-self: center; padding-block: clamp(48px, 7vw, 112px); }
.journey--security .journey__photo { min-height: 520px; margin-right: calc(var(--gut) * -1); }
.journey--training { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.journey--training .training__list { margin-top: 30px; }

@media (max-width: 899px) {
  .journey, .journey--training { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .journey--transport .journey__photo, .journey--security .journey__photo { margin-right: calc(var(--gut) * -1); margin-left: calc(var(--gut) * -1); }
  .journey--security { min-height: 0; }
  .journey--security .journey__copy { padding-block: 40px 0; }
  .journey--security .journey__photo { min-height: 0; }
  .journey--security .hero__portrait .slot { position: relative; aspect-ratio: 4 / 5; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%); /* design-exception: the portrait dissolves from the top into the ground on narrow screens */ }
  .journey--training .journey__photo { order: 2; }
}



/* =====================================================================
   Service pages: editorial, not app. No cards, icons or numbering; a
   heading column and a reading column divided by hairlines (Matthew,
   2026-11-02). The security page's four rings are drawn once, then each
   ring is a plain section: its phase in large type, its description beside.
   ===================================================================== */
.textlink { color: var(--gold-hi); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.textlink:hover { color: #fff; }

.advance { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 140px) var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); align-items: start; }
.advance__head { grid-column: 1 / span 5; }
.advance__head h2 { font: 800 clamp(38px, 4.6vw, 76px)/1 var(--display); font-stretch: 116%; letter-spacing: -0.012em; color: var(--bone); max-width: 11ch; text-wrap: balance; }
.advance__head p { margin-top: 28px; max-width: 34ch; font-size: 19px; }
.advance__list { grid-column: 7 / -1; border-bottom: 1px solid var(--hair-soft); }
.advance__list li { display: grid; padding: 26px 0; border-top: 1px solid var(--hair-soft); }
.advance__list strong { font: 800 clamp(26px, 3vw, 44px)/1.05 var(--display); font-stretch: 112%; color: var(--bone); }
.advance__list span { margin-top: 8px; max-width: 44ch; color: var(--muted); }

.layers { max-width: var(--max); margin: clamp(56px, 7vw, 104px) auto 0; }
.layer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 72px); padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--hair-soft); scroll-margin-top: calc(var(--head-h) + 16px); }
.layer__phase { align-self: start; position: sticky; top: calc(var(--head-h) + 32px); }
.layer__word { font: 800 clamp(48px, 6.4vw, 104px)/0.95 var(--display); font-stretch: 118%; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px var(--gold); /* design-exception: the ring's phase (Before, Between, Around, Beside) is the section's large label; outlined so it names the ring without competing with the text beside it */ }
.layer__ring { margin-top: 14px; font: 600 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); }
.layer__name { font: 800 clamp(30px, 3.4vw, 52px)/1.04 var(--display); font-stretch: 114%; letter-spacing: -0.01em; color: var(--bone); text-wrap: balance; }
.layer__line { margin-top: 18px; font: 650 clamp(20px, 1.8vw, 27px)/1.22 var(--display); font-stretch: 108%; color: var(--gold-hi); max-width: 28ch; text-wrap: balance; }
.layer__text { margin-top: 18px; max-width: 54ch; font-size: 18px; }
.layer__list { margin-top: 32px; max-width: 520px; }
.layer__list h4 { font: 600 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; }
.layer__list li { padding: 13px 0; border-top: 1px solid var(--hair-soft); color: var(--bone); }
.layer__list li:last-child { border-bottom: 1px solid var(--hair-soft); }
.layer__more { margin-top: 28px; }

.ed { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 128px) var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--hair-soft); }
.ed__note { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.ed__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--head-h) + 32px); }
.ed__head h2 { margin-top: 16px; font-size: clamp(30px, 3.2vw, 50px); max-width: 12ch; text-wrap: balance; }
.ed__lead { margin-top: 20px; max-width: 30ch; font-size: 17px; color: var(--text); }
.ed__rows, .ed__lines, .ed__faq { grid-column: 6 / -1; }
.ed__rows li { display: grid; grid-template-columns: minmax(84px, 130px) minmax(0, 1fr); column-gap: 28px; padding: 30px 0; border-top: 1px solid var(--hair-soft); }
.ed__rows li:last-child, .ed__lines li:last-child, .ed__faq > div:last-child { border-bottom: 1px solid var(--hair-soft); }
.ed__label { padding-top: 7px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.ed__rows h3 { font: 750 clamp(21px, 2vw, 30px)/1.15 var(--display); font-stretch: 112%; color: var(--bone); }
.ed__rows p { max-width: 54ch; font-size: 17px; }
.ed__rows h3 + p { margin-top: 10px; }
.ed__lines li { padding: 20px 0; border-top: 1px solid var(--hair-soft); font: 750 clamp(24px, 2.9vw, 44px)/1.1 var(--display); font-stretch: 112%; color: var(--bone); transition: color 0.3s; }
.ed__lines li:hover { color: var(--gold-hi); }
.ed__faq > div { padding: 28px 0; border-top: 1px solid var(--hair-soft); }
.ed__faq dt { font: 650 clamp(19px, 1.7vw, 24px)/1.25 var(--display); font-stretch: 108%; color: var(--bone); }
.ed__faq dd { margin-top: 10px; max-width: 54ch; font-size: 17px; }
/* Three short statements read across the page rather than down it. */
.ed--columns .ed__head { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); }
.ed--columns .ed__head .eyebrow { grid-column: 1 / -1; }
.ed--columns .ed__head h2 { grid-column: 1 / span 7; max-width: 16ch; }
.ed__cols { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 56px); }
.ed__cols li { padding-top: 22px; border-top: 1px solid var(--gold-deep); }
.ed__cols h3 { font: 750 clamp(20px, 1.9vw, 27px)/1.15 var(--display); font-stretch: 110%; color: var(--bone); }
.ed__cols p { margin-top: 12px; max-width: 34ch; font-size: 17px; }

@media (max-width: 999px) {
  .advance { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .advance__head, .advance__list { grid-column: 1; }
  .layer { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .layer__phase, .ed__head { position: static; }
  .ed { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .ed__head, .ed__rows, .ed__lines, .ed__faq, .ed__cols { grid-column: 1; }
  .ed--columns .ed__head { display: block; }
  .ed__cols { grid-template-columns: minmax(0, 1fr); row-gap: 34px; margin-top: 0; }
}
@media (max-width: 599px) {
  .ed__rows li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 24px 0; }
}


/* =====================================================================
   Homepage: the atrium. The owner's approved architectural black-and-gold
   concept (Alpha-Claude-Homepage-Handoff, 2026-11-02), rebuilt as layers and
   made cinematic (ALPHA Client Website Standard, 21:16 direction).
   - A full-viewport stage, pinned inside a tall scroll track while scrolling
     drives a timeline (src/main.js). Without the script, with reduced motion
     or on very short screens it is a normal full-screen hero.
   - The world (plate, side architecture, room lights) is one box sized to
     cover the screen; the live layers (halo, emblem, question, platform,
     services, cue) sit in a 1586 x 992 stage scaled by --k.
   - Phones recompose instead of shrinking.
   ===================================================================== */
@font-face { font-family: 'Cormorant'; src: url('/fonts/cormorant.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/fonts/cormorant-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
:root {
  /* Display serif for the homepage: Cormorant (SIL OFL), the closest open
     match to the concept's high-contrast roman capitals and true italic.
     Not claimed to be the concept's own typeface. */
  --serif: 'Cormorant', 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --ivory: #f0e9da;
  --champagne: #e6c48e;
  --gilt: #d9a64a;
  --gilt-light: #fddd80;
  --cine-d: 280svh; /* scroll distance the pinned scene is scrubbed over */
}
@media (max-width: 899px) { :root { --cine-d: 240svh; } }

/* Track and stage */
.cine { position: relative; }
.cine__stage { height: 100vh; height: 100svh; }
html.cine-on .cine { height: calc(100svh + var(--cine-d)); }
html.cine-on .cine__stage { position: sticky; top: 0; }
@media (max-height: 559px) { .cine__stage { height: auto; min-height: 100svh; } }

.atrium { position: relative; isolation: isolate; container-type: inline-size; background: #090a09; color: var(--ivory); overflow: clip; }

/* World: sized to cover the screen, so the plate, the side architecture and
   every light share one coordinate space and scale together. */
.atrium__world { --wk: calc(max(100cqw, 159.87svh) / 1586); position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100svh * 1.5987)); aspect-ratio: 1586 / 992; translate: -50% -50%; z-index: -1; transform-origin: 50% 38%; will-change: transform; pointer-events: none; }
.atrium__plate, .atrium__plate img, .atrium__wing { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.atrium__plate img { object-fit: cover; }
.atrium__wing { will-change: transform; }
.atrium__wing--l { transform-origin: 0% 50%; }
.atrium__wing--r { transform-origin: 100% 50%; }

/* Light inside the room. Everything here moves slowly and never goes dark and
   bright again: intensity swells and falls on long, offset cycles, highlights
   travel and fade in and out at both ends, so nothing blinks or flickers. */
.atrium__lights { position: absolute; inset: 0; pointer-events: none; }
.lt { position: absolute; display: block; mix-blend-mode: screen; will-change: opacity, transform; }
.lt--pillar {
  overflow: hidden;
  background: linear-gradient(180deg, #ffd58a00 0%, #ffd58a4d 26%, #ffb24f8f 56%, #ffd58a40 82%, #ffd58a00 100%); /* design-exception: warm light running down the fluted pillars of the approved room, as in the concept */
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(var(--wk) * 5), #0000 calc(var(--wk) * 5) calc(var(--wk) * 10));
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(var(--wk) * 5), #0000 calc(var(--wk) * 5) calc(var(--wk) * 10));
  animation: lt-pillar var(--d) ease-in-out var(--o) infinite;
}
.lt--pillar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 36%;
  background: linear-gradient(180deg, #ffe7b000, #ffe7b0b3, #ffe7b000); /* design-exception: a soft highlight travelling down the pillar, fading in and out so it never pops */
  animation: lt-travel calc(var(--d) * 0.85) ease-in-out var(--o) infinite;
}
.lt--wash {
  background: radial-gradient(ellipse at 50% 100%, #ffbe6a8c, #ffbe6a00 70%); /* design-exception: warm light bounced off the wall where it meets the floor, from the approved room */
  animation: lt-wash var(--d) ease-in-out var(--o) infinite;
}
.lt--floor {
  background: radial-gradient(ellipse at 50% 0%, #ffbb5c73, #ffbb5c00 72%); /* design-exception: light from the pillars reflected on the polished floor */
  animation: lt-floor var(--d) ease-in-out var(--o) infinite;
}
.lt--bounce {
  background: radial-gradient(ellipse at 50% 30%, #ffc46a47, #ffc46a00 70%); /* design-exception: warm bounce on the floor around the platform */
  animation: lt-bounce var(--d) ease-in-out var(--o) infinite;
}
.lt-trim { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; overflow: visible; }
.lt-trim path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lt-trim__glow { stroke: #ffbe5a; stroke-width: 24; opacity: 0.42; stroke-dasharray: 420 1580; animation: lt-trim-glow var(--d) linear var(--o) infinite; }
.lt-trim__core { stroke: #ffe7ad; stroke-width: 2; opacity: 0.38; stroke-dasharray: 260 1740; animation: lt-trim-core var(--d) linear var(--o) infinite; }
@keyframes lt-pillar { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.74; } }
@keyframes lt-travel { 0% { transform: translateY(-110%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(300%); opacity: 0; } }
@keyframes lt-wash { 0%, 100% { opacity: 0.42; transform: translateX(-3%) scale(1); } 50% { opacity: 0.86; transform: translateX(3%) scale(1.08); } }
@keyframes lt-floor { 0%, 100% { opacity: 0.32; transform: translateX(-2%) scaleY(0.92); } 50% { opacity: 0.7; transform: translateX(2%) scaleY(1.08); } }
@keyframes lt-bounce { 0%, 100% { opacity: 0.4; transform: scale(0.97); } 50% { opacity: 0.85; transform: scale(1.04); } }
@keyframes lt-trim-glow { from { stroke-dashoffset: 420; } to { stroke-dashoffset: -1000; } }
@keyframes lt-trim-core { from { stroke-dashoffset: 340; } to { stroke-dashoffset: -1080; } }
@media (prefers-reduced-motion: reduce) { .lt, .lt::after, .lt-trim path { animation: none; } .lt--pillar { opacity: 0.5; } .lt--wash, .lt--floor, .lt--bounce { opacity: 0.55; } .lt-trim { display: none; } }

/* Bloom and dim: the scroll timeline's light flash and its fall to dark. */
.atrium__bloom { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 34%, #fff1c8 0%, #ffd27a 20%, #e29a3a66 50%, #e29a3a00 78%); /* design-exception: the warm flash as the camera passes through the halo, driven by scroll */ }
.atrium__dim { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: #0b0a09; }

/* Stage: the 1586 x 992 coordinate space for the live layers. */
.atrium__stage { --k: calc(min(100cqw, 160svh) / 1586); position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--k) * 1586); height: calc(var(--k) * 992); z-index: 1; }
.atrium__emblem { display: contents; }

/* Header: light and quiet, fixed so navigation is always there. */
.atrium-head { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 40px); padding: clamp(8px, 1.6vw, 28px) clamp(18px, 4.7vw, 80px); }
.atrium-head::before { content: ''; position: absolute; inset: 0 0 -18px 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(#050504 0%, #050504f2 74%, #05050400 100%); transition: opacity 0.3s ease-out; /* design-exception: a dark scrim under the fixed header once the page has moved, so INQUIRE stays legible over content */ }
.atrium-head.is-scrolled::before { opacity: 1; }
.atrium-head__brand { display: inline-flex; align-items: center; min-height: 44px; font: 500 clamp(20px, 2.05vw, 34px)/1 var(--serif); letter-spacing: 0.6em; text-transform: uppercase; color: var(--champagne); text-decoration: none; }
.atrium-head__rule { flex: 1; height: 1px; background: linear-gradient(90deg, #d9a64a8c, #d9a64a2e); /* design-exception: the concept's hairline rule between the ALPHA word and INQUIRE fades toward the right, a single thin line and not a decorative gradient */ }
.atrium-head__inquire { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: 500 13px/1 var(--sans); letter-spacing: 0.36em; text-transform: uppercase; color: var(--ivory); text-decoration: none; background: linear-gradient(var(--gilt), var(--gilt)) 0 calc(50% + 14px) / calc(100% - 0.36em) 1px no-repeat; /* design-exception: INQUIRE carries the concept's fine gold underline, drawn as a background line so it hugs the text */ transition: color 0.22s ease-out; }
.atrium-head a:hover, .atrium-head a:focus-visible { color: var(--gilt-light); }
.atrium-head a:focus-visible { outline: 1px solid var(--champagne); outline-offset: 6px; }

/* Halo: diffuse amber light behind the emblem. It pulses on its own, slower
   rhythm (the emblem turns on a faster one), and starts at once. */
.atrium__halo {
  position: absolute; left: calc(var(--k) * 395); top: calc(var(--k) * -29); width: calc(var(--k) * 796); height: calc(var(--k) * 682);
  border-radius: 50%; /* design-exception: the halo is a soft elliptical light behind the emblem, per the approved concept */
  pointer-events: none; will-change: transform, opacity;
}
.atrium__halo::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(closest-side, #e0a04a3a 0%, #e0a04a00 56%, #f0b45a92 82%, #e0a04a30 94%, #e0a04a00 100%); /* design-exception: diffuse amber halo from the approved concept; soft atmospheric light, not a hard neon ring */
  animation: halo 7.5s ease-in-out infinite;
}
@keyframes halo { 0%, 100% { opacity: 0.327; transform: scale(0.965); } 50% { opacity: 1; transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .atrium__halo::before { animation: none; opacity: 0.45; } }

/* Emblem: the existing approved falcon-A render, large. The frame is cropped
   to the emblem's reveal extent; at rest the emblem is 85% of its width. */
.atrium .entrance__mark { position: absolute; left: calc(var(--k) * 481.2); top: calc(var(--k) * 47.5); width: calc(var(--k) * 626); display: grid; z-index: 1; will-change: transform, opacity; }
.atrium .entrance__mark:not(.entrance__mark--motion) { left: calc(var(--k) * 525.5); top: calc(var(--k) * 83); width: calc(var(--k) * 535); mix-blend-mode: lighten; }
.entrance__mark > * { grid-area: 1 / 1; }
.entrance__mark .emblem--entrance, .entrance__mark picture, .entrance__mark img, .entrance__video, .entrance__anim { display: block; width: 100%; height: auto; }
.entrance__video { visibility: hidden; }
.entrance__mark--motion.is-playing .entrance__video { visibility: visible; }
.entrance__mark--motion.is-playing:not(.is-spinning) .entrance__video--spin { visibility: hidden; }
.entrance__mark--motion.is-spinning .entrance__video:not(.entrance__video--spin) { visibility: hidden; }
.entrance__mark--motion.is-playing .entrance__final { visibility: hidden; }

/* The question: one h1, live text, two spans. */
.atrium__title { position: absolute; left: 0; right: 0; top: calc(var(--k) * 553); margin: 0; text-align: center; font-weight: 500; text-shadow: 0 2px 26px #000c; z-index: 2; will-change: transform, opacity; }
.atrium__t1 { display: block; font: 500 calc(var(--k) * 82)/1 var(--serif); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ivory); }
.atrium__t2 { display: block; margin-top: calc(var(--k) * -19); font: italic 500 calc(var(--k) * 100)/1.05 var(--serif); letter-spacing: 0.005em; color: var(--champagne); }

/* Platform: a low luminous gold ellipse between the question and the choices. */
.atrium__dais { position: absolute; left: calc(var(--k) * 427); top: calc(var(--k) * 722); width: calc(var(--k) * 734); height: calc(var(--k) * 58); pointer-events: none; will-change: transform, opacity; }
.atrium__dais::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62%;
  border-radius: 50%; /* design-exception: the platform's top face is an ellipse seen in perspective, as in the approved concept */
  background: radial-gradient(ellipse at 50% 12%, #6a4a1c 0%, #33230e 52%, #1a1209 100%); /* design-exception: warm gold top face of the platform from the approved concept */
  box-shadow: 0 0 calc(var(--k) * 2) #fff6d2, 0 0 calc(var(--k) * 9) #ffd27ae6, 0 0 calc(var(--k) * 30) #f0a83c99, 0 0 calc(var(--k) * 90) #d9892e59, inset 0 calc(var(--k) * 2) calc(var(--k) * 2) #ffefb4, inset 0 calc(var(--k) * -8) calc(var(--k) * 14) #0000006b; /* design-exception: the platform's thin, intensely lit rim and its warm bloom, per the approved concept */
}
.atrium__dais::after {
  content: ''; position: absolute; left: 1.2%; right: 1.2%; top: 34%; height: 46%; z-index: -1;
  border-radius: 0 0 50% 50% / 0 0 100% 100%; /* design-exception: the platform's front fascia follows the ellipse's lower curve */
  background: linear-gradient(#9a6f2c, #3a2610 82%); /* design-exception: darker gold front fascia of the platform from the approved concept */
}
.atrium__dais i { position: absolute; left: 6%; right: 6%; top: 98%; height: 60%; background: radial-gradient(ellipse at 50% 0%, #f0b45a73, #e8a84f00 72%); /* design-exception: soft warm reflection of the platform on the polished floor */ }

/* Services: three real links in an open row with fine dividers. No numbers,
   no button shapes. Hover and keyboard focus share one state. */
.atrium__services { position: absolute; left: calc(var(--k) * 178); top: calc(var(--k) * 806); width: calc(var(--k) * 1314); z-index: 2; }
.atrium__services ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.atrium__services li { will-change: transform, opacity; }
.atrium__services li + li { border-left: 1px solid #d9a64a57; /* design-exception: the concept's fine vertical dividers between the three choices; a hairline, not an accent rail */ }
.dest { position: relative; display: flex; align-items: flex-start; gap: calc(var(--k) * 24); min-height: calc(max(var(--k) * 86, 44px)); padding: calc(var(--k) * 14) calc(var(--k) * 20) calc(var(--k) * 22) calc(var(--k) * 87); text-decoration: none; color: var(--ivory); transition: color 0.22s ease-out; }
.dest__name { display: block; font: 500 max(15px, calc(var(--k) * 31))/1.04 var(--serif); letter-spacing: 0.035em; text-transform: uppercase; }
.dest__name span { display: block; }
.dest__arrow { flex: none; align-self: flex-end; width: max(22px, calc(var(--k) * 34)); height: auto; margin-bottom: calc(var(--k) * 6); fill: none; stroke: currentColor; stroke-width: 1.3; opacity: 0; transform: translateX(-4px); transition: opacity 0.22s ease-out, transform 0.22s ease-out; }
.dest::after {
  content: ''; position: absolute; left: calc(var(--k) * 87); bottom: calc(var(--k) * 6); width: calc(var(--k) * 240); height: 1px;
  background: linear-gradient(90deg, #fddd80, #d9a64a 62%, #d9a64a00); /* design-exception: the concept's glowing baseline under the highlighted service */
  box-shadow: 0 0 calc(var(--k) * 9) #e8a84f; /* design-exception: soft glow on the active service's baseline, as in the approved concept */
  transform: scaleX(0.2); transform-origin: 0 50%; opacity: 0; transition: transform 0.24s ease-out, opacity 0.24s ease-out;
}
.dest:is(:hover, :focus-visible, .is-chosen) { color: var(--champagne); }
.dest:is(:hover, :focus-visible, .is-chosen)::after { transform: scaleX(1); opacity: 1; }
.dest:is(:hover, :focus-visible, .is-chosen) .dest__arrow { opacity: 1; transform: translateX(6px); }
.dest.is-chosen { color: var(--gilt-light); }
.dest:focus-visible { outline: 1px solid var(--champagne); outline-offset: -4px; }
@media (hover: none) { .dest__arrow { opacity: 0.85; transform: none; } }

/* Scroll cue: a real link; it glides through the scene to About. */
.atrium__scroll { position: absolute; left: 50%; top: calc(var(--k) * 934); transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--k) * 8); min-height: 44px; padding: 2px 20px; font: 500 max(10.5px, calc(var(--k) * 11.5))/1 var(--sans); letter-spacing: 0.38em; text-transform: uppercase; color: #d8cdb8; text-decoration: none; white-space: nowrap; transition: color 0.22s ease-out; }
.atrium__scroll span { margin-right: -0.38em; }
.atrium__chev { width: max(14px, calc(var(--k) * 22)); height: auto; fill: none; stroke: var(--gilt); stroke-width: 1.4; }
.atrium__scroll:is(:hover, :focus-visible) { color: var(--champagne); }
.atrium__scroll:focus-visible { outline: 1px solid var(--champagne); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .atrium__chev { animation: chev 2.8s ease-in-out infinite; }
}
@keyframes chev { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }

/* Arrival: the architecture and emblem first, then the question and choices.
   Without JS, with reduced motion, or coming back, everything simply shows. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.intro-seen) :is(.atrium__title, .atrium__dais, .atrium__services li, .atrium__scroll) { opacity: 0; translate: 0 8px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); }
  .js .entrance.is-revealed :is(.atrium__title, .atrium__dais, .atrium__services li, .atrium__scroll) { opacity: 1; translate: none; }
  .js .entrance.is-revealed .atrium__dais { transition-delay: 0.12s; }
  .js .entrance.is-revealed .atrium__services li:nth-child(1) { transition-delay: 0.24s; }
  .js .entrance.is-revealed .atrium__services li:nth-child(2) { transition-delay: 0.34s; }
  .js .entrance.is-revealed .atrium__services li:nth-child(3) { transition-delay: 0.44s; }
  .js .entrance.is-revealed .atrium__scroll { transition-delay: 0.6s; }
}

/* The invitation rises over the pinned scene as its last stage, out of the
   dark; About follows it as an ordinary section. */
html.cine-on .page-home .invite { position: relative; z-index: 4; margin-top: calc(var(--cine-d) * -0.5); border-top: 0; overflow: clip visible; }
html.cine-on .page-home .invite::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 34svh; pointer-events: none;
  background: linear-gradient(#08080700, #080807); /* design-exception: the invitation rises out of the dark the pinned scene falls into, so the two read as one transition */
}

/* Leaving: the shared veil carries the scene's warm light into the next page. */
.page-veil { background: radial-gradient(ellipse at 50% 40%, #3a2a12 0%, #0b0a09 70%); /* design-exception: the transition veil continues the scene's warm light so no blank frame shows between pages */ }
.is-leaving-page .page-veil { opacity: 1; transition: opacity 0.3s ease-in; }
.arrive .page-veil { opacity: 1; animation: veil-out 0.7s var(--ease) 0.05s forwards; }

/* Phones and narrow tablets: recomposed, not squashed. The scene is a column
   that fills the screen: header, the emblem (as large as the remaining height
   allows), the question, a restrained platform, the choices as full-width
   rows, the cue. The animated room and the scroll timeline still apply. */
@media (max-width: 899px) {
  .atrium__world { transform-origin: 50% 30%; }
  .atrium__stage { --k: 1px; left: 0; top: 0; translate: none; width: 100%; height: 100%; padding: 64px 18px max(10px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 1.2svh, 10px); }
  .atrium__emblem { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; position: relative; flex: 1 1 0; width: 100%; min-height: 0; container-type: size; }
  .atrium__halo { position: absolute; left: 50%; top: 49%; translate: -50% -50%; width: calc(min(100cqw, 114.29cqh) * 1.12); height: calc(min(100cqw, 114.29cqh) * 0.96); }
  .atrium .entrance__mark, .atrium .entrance__mark:not(.entrance__mark--motion) { position: relative; left: auto; top: auto; width: 88%; height: 88%; mix-blend-mode: normal; }
  .atrium .entrance__mark:not(.entrance__mark--motion) { mix-blend-mode: lighten; }
  .atrium .entrance__mark { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
  .entrance__mark .emblem--entrance, .entrance__mark picture, .entrance__mark img, .entrance__video, .entrance__anim { width: 100%; height: 100%; object-fit: contain; }
  .atrium__title { position: relative; top: auto; left: auto; right: auto; width: 100%; flex: none; margin-top: 8px; }
  .atrium__t1 { font-size: clamp(24px, min(7.6vw, 4.6svh), 46px); }
  .atrium__t2 { font-size: clamp(30px, min(9.4vw, 5.6svh), 56px); margin-top: -4px; }
  .atrium__dais { position: relative; left: auto; top: auto; flex: none; width: min(80vw, 400px); height: clamp(16px, 3svh, 26px); margin: clamp(6px, 1.6svh, 14px) 0 clamp(2px, 1svh, 8px); }
  .atrium__services { position: relative; left: auto; top: auto; flex: none; width: 100%; max-width: 480px; }
  .atrium__services ul { display: block; }
  .atrium__services li { border-top: 1px solid #d9a64a40; }
  .atrium__services li:last-child { border-bottom: 1px solid #d9a64a40; }
  .atrium__services li + li { border-left-width: 0; }
  .dest { min-height: clamp(46px, 7.4svh, 68px); padding: 6px 6px; align-items: center; gap: 18px; }
  .dest__name { font-size: clamp(17px, min(5.4vw, 2.9svh), 25px); }
  .dest__arrow { margin: 0 0 0 auto; align-self: center; width: 28px; }
  .dest::after { left: 6px; bottom: 6px; width: 150px; }
  .atrium__scroll { position: relative; left: auto; top: auto; transform: none; flex: none; min-height: 40px; margin-top: 2px; gap: 6px; }
  .atrium__chev { width: 18px; }
}


/* =====================================================================
   Below the hero: About, consultation, footer, carried through in the same
   black-and-gold stone language (owner-approved concept, 2026-11-02). Quieter
   than the hero: reading surfaces, fine bronze lines, the hero's display serif
   for headings and the project's sans for text. No glass cards, no glow, no
   rounded or pill controls.
   ===================================================================== */
.page-home { --bronze: rgba(176, 134, 62, 0.42); --bronze-soft: rgba(176, 134, 62, 0.2); }
.page-home .about, body .consult { scroll-margin-top: 16px; }

/* About Adam */
.page-home .about {
  max-width: 1200px; margin: 0 auto; padding: clamp(72px, 8vw, 128px) var(--gut);
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 50fr); column-gap: clamp(36px, 6vw, 96px); align-items: center;
  background: #0b0a09; border-top: 1px solid var(--bronze-soft);
}
.page-home .about { max-width: none; padding-inline: max(var(--gut), calc((100% - 1200px) / 2)); }
.page-home .about__portrait .slot { --ar: 4 / 5; border: 1px solid var(--bronze); }
.page-home .about__copy .eyebrow { color: var(--champagne); letter-spacing: 0.34em !important; font-weight: 500; }
.page-home .about__copy h2 { margin-top: 18px; font: 500 clamp(46px, 5.4vw, 84px)/0.98 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ivory); max-width: none; }
.page-home .about__role { margin-top: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--bronze-soft); max-width: 46ch; font: 500 12px/1.5 var(--sans); letter-spacing: 0.22em !important; color: var(--champagne); }
.page-home .about__bio { margin-top: 20px; font: 400 17.5px/1.75 var(--sans); color: #d6cfc0; max-width: 54ch; }
.page-home .about__bio:first-of-type { margin-top: 28px; }
.page-home .about__signoff { margin-top: 34px; font: italic 500 clamp(26px, 2.5vw, 38px)/1.15 var(--serif); letter-spacing: 0; text-transform: none; color: var(--champagne); }

/* Consultation: a quiet dark-stone panel, thin bronze edge, square corners. */
body .consult {
  background: #080807; border-top: 1px solid var(--bronze-soft);
  max-width: none; padding-inline: max(var(--gut), calc((100% - 1200px) / 2));
  column-gap: clamp(36px, 6vw, 96px); padding-block: clamp(72px, 8vw, 128px);
}
body .consult__intro .eyebrow { color: var(--champagne); letter-spacing: 0.34em !important; font-weight: 500; }
body .consult__intro h2 { margin-top: 18px; font: 500 clamp(40px, 4.6vw, 70px)/1.02 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ivory); max-width: 11ch; }
body .consult__intro > p:not(.eyebrow) { font-size: 17px; line-height: 1.7; color: #cfc8ba; }
body .consult__privacy { border-top: 1px solid var(--bronze-soft); color: var(--ivory); font-size: 15px; }
/* Footer: brand / navigation / contact, a fine bronze rule on top. */
.footer {
  background: #060605; border-top: 1px solid var(--bronze);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 40px; align-items: start;
  padding: clamp(56px, 7vw, 96px) max(var(--gut), calc((100% - 1200px) / 2)) clamp(32px, 4vw, 48px);
}
.footer__brand { display: block; }
.wordmark-img { display: block; }
.wordmark-img img { display: block; width: 100%; height: auto; }
.wordmark-img--footer { width: clamp(280px, 26vw, 340px); }
.footer__h { margin: 0 0 14px; font: 500 12px/1.3 var(--sans); font-stretch: 100%; letter-spacing: 0.3em; text-transform: uppercase; color: var(--champagne); }
.footer__nav ul { display: block; }
.footer__nav a { display: inline-flex; min-height: 44px; align-items: center; font: 400 17px/1.3 var(--serif); font-stretch: 100%; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ivory); text-decoration: none; transition: color 0.22s ease-out; }
.footer__nav a:hover, .footer__nav a:focus-visible { color: var(--champagne); }
.footer__contact p { font: 400 16px/1.9 var(--sans); color: #cfc8ba; overflow-wrap: anywhere; }
.footer__contact a { color: var(--ivory); }
.footer__legal { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--bronze-soft); font: 400 13px/1.7 var(--sans); color: #9a9384; }
.footer__legal [data-preview] { display: block; color: var(--steel); }

@media (max-width: 899px) {
  .page-home .about { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding: 56px var(--gut); }
  .page-home .about__portrait .slot { --ar: 4 / 5; }
  .footer { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gut); }
  .wordmark-img--footer { width: min(300px, 84vw); }
}

html:has(body.page-home) { scroll-padding-top: 64px; }


/* Very short screens (a phone on its side): the column keeps its natural height,
   the emblem gets a fixed zone, and the page scrolls normally. */
@media (max-width: 899px) and (max-height: 559px) {
  .cine__stage { height: auto; min-height: 100svh; }
  .atrium__stage { height: auto; min-height: 100svh; padding-top: 58px; }
  .atrium__emblem { flex: none; height: min(66svh, 250px); }
}


/* =====================================================================
   The invitation and the form's lead-in. After About, one clear next step;
   beside the form, what happens after you send it (the site's own proposed
   workflow, nothing promised beyond it); inside the panel, a line that says
   where to begin. Entering the section the form's glow wakes up.
   ===================================================================== */
.invite { position: relative; isolation: isolate; overflow: clip; text-align: center; background: #080807; border-top: 1px solid rgba(176, 134, 62, 0.2); padding: clamp(84px, 11vw, 168px) var(--gut); }
.invite__glow { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1100px, 130vw); aspect-ratio: 1.6; translate: -50% -50%; pointer-events: none; border-radius: 50%; /* design-exception: the halo's warm light echoed behind the invitation so the closing step shares the hero's glow */ background: radial-gradient(closest-side, #d9a64a38 0%, #d9a64a14 46%, #d9a64a00 100%); /* design-exception: soft warm glow behind the invitation, the same family as the emblem's halo */ animation: invite-glow 9s ease-in-out infinite; }
@keyframes invite-glow { 0%, 100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .invite__glow { animation: none; opacity: 0.6; } }
.invite__title { max-width: 26ch; margin: 0 auto; font: 500 clamp(42px, 6.2vw, 96px)/1.02 var(--serif); letter-spacing: -0.005em; color: var(--ivory); text-wrap: balance; text-transform: none; }
.invite__title em { display: block; font-style: italic; color: var(--champagne); }
.invite__text { max-width: 46ch; margin: clamp(22px, 2.6vw, 34px) auto 0; font: 400 clamp(17px, 1.5vw, 20px)/1.7 var(--sans); color: #d6cfc0; }
.invite__actions { margin-top: clamp(30px, 3.4vw, 46px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.invite__cta { min-height: 60px; padding: 0 44px; font-size: 16px !important; }
.invite__alt { font: 400 15px/1.5 var(--sans); color: #a39b8c; }
.invite__alt .tel { color: var(--ivory); }

.consult__next { margin-top: 34px; max-width: 46ch; }
.consult__next-h { font: 600 12px/1.4 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--champagne); margin-bottom: 4px; }
.consult__next ul { border-top: 1px solid rgba(176, 134, 62, 0.28); margin-top: 14px; }
.consult__next li { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid rgba(176, 134, 62, 0.16); }
.consult__next-name { font: 500 clamp(20px, 1.8vw, 26px)/1.15 var(--serif); color: var(--ivory); }
.consult__next-text { font-size: 15.5px; line-height: 1.6; color: #b9b2a3; }
.consult__direct { margin-top: 30px; }

.inquiry__head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid rgba(176, 134, 62, 0.28); }
.inquiry__kicker { font: italic 500 clamp(30px, 3vw, 44px)/1.05 var(--serif); color: var(--champagne); }
.inquiry__lead { margin-top: 10px; max-width: 46ch; font: 400 15.5px/1.6 var(--sans); color: #cfc8ba; }

/* The form's own glow wakes when it scrolls into view. */
body .consult { position: relative; isolation: isolate; }
body .consult::before { content: ''; position: absolute; right: -6%; top: 50%; z-index: -1; width: min(820px, 90vw); aspect-ratio: 1; translate: 0 -50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, #d9a64a2e, #d9a64a00 72%); /* design-exception: a warm glow behind the form panel that rises as it comes into view, drawing the eye to where to begin */ transition: opacity 1.6s var(--ease); }
body .consult:has(.inquiry.is-in)::before { opacity: 1; }
@media (max-width: 899px) { .invite__cta { width: 100%; max-width: 420px; padding: 0 22px; } }


/* =====================================================================
   Service pages, shared system (ALPHA Client Website Standard, 2026-11-02).
   The same black room as the homepage, three different stagings: a framed
   photograph (a chrome-and-gold window in the stone), the words, a floor
   arc, then a pinned story with real tabs, disclosures and FAQs. Reuses the
   homepage's world, light and tokens.
   ===================================================================== */
:root { --pad: clamp(22px, 5vw, 96px); --story-d: 170svh; --bronze: rgba(176, 134, 62, 0.42); --bronze-soft: rgba(176, 134, 62, 0.2); }
@media (max-width: 899px) { :root { --story-d: 150svh; } }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.site-head { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 40px); padding: clamp(8px, 1.4vw, 24px) var(--pad); }
.site-head::before { content: ''; position: absolute; inset: 0 0 -18px 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(#050504 0%, #050504f2 74%, #05050400 100%); transition: opacity 0.3s ease-out; /* design-exception: an opaque dark band under the fixed header once the page has moved, so the navigation stays legible over content */ }
.site-head.is-scrolled::before { opacity: 1; }
.site-head__brand { display: inline-flex; align-items: center; min-height: 44px; font: 500 clamp(20px, 2.05vw, 34px)/1 var(--serif); letter-spacing: 0.6em; text-transform: uppercase; color: var(--champagne); text-decoration: none; margin-right: auto; }
.site-head__nav ul { display: flex; gap: clamp(18px, 2.6vw, 44px); list-style: none; margin: 0; padding: 0; }
.site-head__nav a, .site-head__inquire, .site-head__menu { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--ivory); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; transition: color 0.22s ease-out; }
.site-head__nav a[aria-current='page'] { color: var(--gilt-light); background: linear-gradient(var(--gilt), var(--gilt)) 0 calc(50% + 13px) / calc(100% - 0.28em) 1px no-repeat; /* design-exception: the current page carries the same fine gold underline as INQUIRE, drawn as a background line that hugs the text */ }
.site-head__inquire { padding-left: clamp(18px, 2.4vw, 40px); border-left: 1px solid #d9a64a57; /* design-exception: a hairline divider between the three pages and INQUIRE, as in the approved concept */ }
.site-head a:is(:hover, :focus-visible), .site-head__menu:is(:hover, :focus-visible) { color: var(--gilt-light); }
.site-head a:focus-visible, .site-head__menu:focus-visible { outline: 1px solid var(--champagne); outline-offset: 6px; }
.site-head__menu { display: none; }
@media (max-width: 899px) {
  .site-head__nav, .site-head__inquire { display: none; }
  .site-head__menu { display: inline-flex; padding: 0 2px; }
  html:not(.js) .site-head__menu { display: none; }
  html:not(.js) .site-head { flex-wrap: wrap; }
  html:not(.js) .site-head__nav { display: block; order: 3; width: 100%; }
  html:not(.js) .site-head__nav ul { flex-wrap: wrap; gap: 4px 18px; }
  html:not(.js) .site-head__inquire { display: inline-flex; border: 0; padding-left: 0; }
}
.site-menu { position: fixed; inset: 0; z-index: 58; display: flex; flex-direction: column; gap: 22px; padding: 104px var(--pad) 40px; background: #070706fa; overflow-y: auto; opacity: 0; transition: opacity 0.25s ease-out; }
.site-menu.is-open { opacity: 1; }
.site-menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bronze-soft); }
.site-menu li { border-bottom: 1px solid var(--bronze-soft); }
.site-menu a { display: flex; align-items: center; min-height: 64px; font: 500 clamp(28px, 8vw, 40px)/1.1 var(--serif); letter-spacing: 0.02em; color: var(--ivory); text-decoration: none; }
.site-menu a[aria-current='page'] { color: var(--gilt-light); }
.site-menu a:is(:hover, :focus-visible) { color: var(--champagne); }
.site-menu a:focus-visible { outline: 1px solid var(--champagne); outline-offset: -4px; }
.site-menu__call { font: 400 17px/1.6 var(--sans); color: #cfc8ba; }
.site-menu__call .tel { color: var(--ivory); min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { .site-menu { display: none !important; } }

/* ---------- motion and scene controls ---------- */
.ctl { position: fixed; z-index: 55; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 8px; }
.ctl__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 14px; justify-content: center; font: 500 10.5px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: #d8cdb8; background: #0a0908e0; border: 1px solid var(--bronze); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.ctl__btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ctl__btn:is(:hover, :focus-visible) { color: var(--gilt-light); border-color: var(--gilt); }
.ctl__btn:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; }
.ctl__play { display: none; }
.ctl__btn[aria-pressed='true'] .ctl__play { display: block; fill: currentColor; stroke: none; }
.ctl__btn[aria-pressed='true'] .ctl__pause { display: none; }
@media (max-width: 899px) { .ctl__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ctl__btn { padding: 0; } }
html:not(.js) .ctl { display: none; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; }

/* ---------- the opening scene ---------- */
.cine--svc { position: relative; }
html.cine-on .cine--svc { height: calc(100svh + var(--cine-d)); }
.svc-scene { --fr: 0; height: 100svh; min-height: 560px; perspective: 1400px; }
html.cine-on .svc-scene { position: sticky; top: 0; }
.world__inner { position: absolute; inset: 0; }
.svc-scene--security .world__inner { transform: scaleX(-1); }
.svc-scene--training .world__inner { transform: scale(1.22) translateX(-4%); filter: brightness(0.74); }
.svc-scene .atrium__world { will-change: transform; }
.svc-scene .atrium__bloom { z-index: 4; }
.svc__arc { position: absolute; left: 0; right: 0; bottom: 1svh; width: 100%; height: 30svh; z-index: 1; pointer-events: none; opacity: 0.95; will-change: transform; transform-origin: 50% 100%; filter: drop-shadow(0 0 14px #e8a84f99); /* design-exception: the gold floor arc carries a soft warm bloom, per the approved transportation concept */ }
.svc-scene--security .svc__arc, .svc-scene--training .svc__arc { opacity: 0.6; }

/* The framed photograph: a window in the stone, edged in banded chrome and
   gold. Square corners (the room's geometry), the real photograph graded warm
   and dark so it sits in the room, crisp edges (nothing hazed). */
.svc__subject { position: absolute; z-index: 2; will-change: transform; transform-style: preserve-3d; }
.frame { position: relative; margin: 0; padding: 4px; background: linear-gradient(112deg, #fff 0%, #8d867a 6%, #2b271f 13%, #e9e2d2 19%, #fffdf4 22%, #6f685a 28%, #1d1a14 40%, #3a352b 53%, #cdc4af 64%, #fff 68%, #7b7365 75%, #1a1712 85%, #b9b09b 93%, #f4eedf 100%); /* design-exception: banded chrome edge: narrow bright specular bands against darker reflected bands, per the ALPHA standard's reflective-chrome direction */ box-shadow: 0 30px 60px -20px #000, 0 0 0 1px #000, 0 0 60px -10px #d9a64a55; /* design-exception: the framed photograph stands off the stone with a deep cast shadow and a faint warm spill */ }
.frame__in { position: relative; overflow: hidden; background: #0c0b09; width: 100%; height: 100%; }
.frame__in .photo, .frame__in img { display: block; width: 100%; height: 100%; }
.frame__in img { object-fit: cover; filter: brightness(0.86) contrast(1.07) saturate(0.9); will-change: transform; }
.frame__in::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0b0a0700 55%, #0b0a0788 100%), linear-gradient(90deg, #0b0a0766 0%, #0b0a0700 22%); /* design-exception: a low warm-black grade over the real photograph so it takes the room's light and its bright garage ceiling does not break the page */ }
.frame__sheen { position: absolute; inset: 3px; pointer-events: none; overflow: hidden; z-index: 2; }
.frame__sheen::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 30%; transform: skewX(-18deg); background: linear-gradient(90deg, #ffe7ad00, #ffe7ad2e, #ffe7ad00); /* design-exception: a slow, soft highlight crossing the chrome-framed photograph like light sliding along glass; fades at both ends */ animation: frame-sheen 11s ease-in-out infinite; }
@keyframes frame-sheen { 0%, 55% { left: -45%; opacity: 0; } 62% { opacity: 1; } 92% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .frame__sheen::before { animation: none; opacity: 0; } }

.svc__copy { position: absolute; z-index: 3; left: var(--pad); top: 50%; translate: 0 -50%; width: min(33vw, 520px); will-change: transform, opacity; }
.svc__copy::before { content: ''; position: absolute; inset: -60px -70px -60px -90px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 40% 50%, #060605d9 0%, #060605a6 48%, #06060500 78%); /* design-exception: a dark grade behind the words so they hold contrast over the lit pillars of the room */ }
.svc__eyebrow { font: 500 clamp(11px, 0.9vw, 13px)/1.4 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: var(--gilt); padding-bottom: 16px; margin-bottom: 22px; background: linear-gradient(90deg, var(--gilt), #d9a64a00) 0 100% / 88px 1px no-repeat; /* design-exception: the concept's short gold rule beneath the eyebrow */ }
.svc__title { margin: 0; font: 500 clamp(44px, 5.5vw, 100px)/0.98 var(--serif); letter-spacing: -0.005em; color: var(--ivory); text-transform: none; text-shadow: 0 2px 30px #000c; text-wrap: balance; }
.svc__title em { font-style: italic; color: var(--ivory); }
.svc__line { margin-top: clamp(18px, 2.2vw, 30px); font: italic 500 clamp(19px, 1.7vw, 27px)/1.3 var(--serif); color: var(--champagne); max-width: 28ch; }
.svc__cta { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; margin-top: clamp(22px, 3vw, 40px); padding: 0 2px 6px 0; font: 500 11.5px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ivory); text-decoration: none; background: linear-gradient(90deg, var(--gilt), #d9a64a40) 0 100% / 100% 1px no-repeat; /* design-exception: the concept's fine gold underline under the call to action */ transition: color 0.22s ease-out; }
.svc__cta-arrow { width: 34px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform 0.22s ease-out; }
.svc__cta:is(:hover, :focus-visible) { color: var(--gilt-light); }
.svc__cta:is(:hover, :focus-visible) .svc__cta-arrow { transform: translateX(6px); }
.svc__cta:focus-visible { outline: 1px solid var(--champagne); outline-offset: 6px; }
.svc__scroll { z-index: 3; top: auto; bottom: clamp(12px, 3svh, 30px); }

/* per-page composition */
.svc-scene--transport .svc__subject { right: clamp(14px, 2.4vw, 44px); top: 50%; translate: 0 -46%; width: min(60vw, 1000px); }
.svc-scene--transport .frame { aspect-ratio: 16 / 10; }
.svc-scene--transport .frame__in img { object-position: 50% 74%; }
.svc-scene--security .svc__subject { right: clamp(30px, 7vw, 150px); top: 50%; translate: 0 -48%; height: min(74svh, 780px); aspect-ratio: 4 / 5; }
.svc-scene--security .frame { height: 100%; }
.svc-scene--security .frame__in img { object-position: 84% 42%; }
.svc-scene--security .svc__copy { width: min(40vw, 620px); }
.svc-scene--training .svc__subject { left: clamp(30px, 8vw, 170px); top: 50%; translate: 0 -48%; width: min(34vw, 480px); aspect-ratio: 1; }
.svc-scene--training .frame { height: 100%; }
.svc-scene--training .frame__in img { object-position: 50% 30%; }
.svc-scene--training .svc__copy { left: auto; right: var(--pad); width: min(40vw, 620px); }

/* phones and narrow tablets: a column that fills the screen */
@media (max-width: 899px) {
  .svc-scene { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(12px, 2.2svh, 26px); padding: 76px 18px max(72px, calc(env(safe-area-inset-bottom) + 58px)); height: 100svh; }
  .svc__copy, .svc-scene--training .svc__copy { position: relative; left: auto; right: auto; top: auto; translate: none; width: 100%; max-width: 520px; margin: 0 auto; flex: none; }
  .svc__subject, .svc-scene--transport .svc__subject, .svc-scene--security .svc__subject, .svc-scene--training .svc__subject { position: relative; left: auto; right: auto; top: auto; translate: none; width: 100%; max-width: 520px; height: clamp(160px, 31svh, 400px); aspect-ratio: auto; margin: 0 auto; flex: 1 1 0; min-height: 0; }
  .svc-scene--training .svc__subject { max-width: 360px; }
  .svc-scene .frame { aspect-ratio: auto; width: 100%; height: 100%; }
  .svc__eyebrow { padding-bottom: 10px; margin-bottom: 14px; }
  .svc__title { font-size: clamp(34px, min(10.4vw, 6svh), 60px); }
  .svc__line { margin-top: 10px; font-size: clamp(17px, 2.6svh, 22px); }
  .svc__cta { margin-top: 14px; min-height: 44px; }
  .svc__scroll { display: none; }
  .svc__arc { height: 20svh; }
  .svc-scene--security .frame__in img { object-position: 82% 36%; }
}
@media (max-height: 699px) and (max-width: 899px) { .svc-scene { height: auto; min-height: 100svh; } .svc-scene .svc__subject, .svc-scene--transport .svc__subject, .svc-scene--security .svc__subject, .svc-scene--training .svc__subject { flex: none; height: clamp(190px, 34svh, 260px); } .svc__scroll { display: none; } .story__stage { min-height: 0; } }

/* ---------- the story: pinned stage, real tabs ---------- */
.story { position: relative; background: #080807; border-top: 1px solid var(--bronze-soft); }
html.cine-on .story { height: calc(100svh + var(--story-d)); border-top: 0; }
.story__stage { position: relative; isolation: isolate; overflow: clip; min-height: 100svh; display: flex; align-items: center; padding: clamp(96px, 14svh, 150px) var(--pad); }
html.cine-on .story__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
.story__stage::before { content: ''; position: absolute; inset: 0; z-index: -2; background: #080807 url('/img/hero-plate.jpg') 50% 40% / cover no-repeat; opacity: 0.5; }
.story__stage::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #080807f2 0%, #080807c8 46%, #08080780 100%); /* design-exception: a dark grade over the room image behind the story so its text holds contrast */ }
.story__inner { width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.story__head .eyebrow { color: var(--champagne); letter-spacing: 0.34em !important; font-weight: 500; }
.story__title { margin-top: 16px; font: 500 clamp(38px, 4.8vw, 80px)/1 var(--serif); letter-spacing: -0.005em; text-transform: none; color: var(--ivory); max-width: 12ch; text-wrap: balance; }
.story__lead { margin-top: 18px; max-width: 38ch; font: 400 17px/1.65 var(--sans); color: #cfc8ba; }
.story__tabs { position: relative; display: flex; gap: clamp(20px, 3.4vw, 56px); margin-top: clamp(28px, 4.4svh, 52px); padding-bottom: 0; border-bottom: 1px solid var(--bronze-soft); max-width: 640px; }
.story__tab { position: relative; min-height: 48px; padding: 0 0 14px; font: 500 12.5px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: #b9b2a3; background: none; border: 0; cursor: pointer; transition: color 0.22s ease-out; }
.story__tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gilt-light); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.34s var(--ease); }
.story__tab:is(:hover, :focus-visible) { color: var(--ivory); }
.story__tab.is-active { color: var(--gilt-light); }
.story__tab.is-active::after { transform: scaleX(1); }
.story__tab:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }
.story__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; }
.story__line i { display: block; height: 100%; width: 100%; background: #ffe7ad66; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.story__panels { position: relative; max-width: 640px; margin-top: clamp(22px, 3.4svh, 40px); min-height: 190px; }
.story__panel { display: none; outline: none; }
.story__panel.is-active { display: block; animation: panel-in 0.5s var(--ease) both; }
.story__panel:focus-visible { outline: 1px solid var(--champagne); outline-offset: 8px; }
@keyframes panel-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: none; } }
.story__label { display: none; font: 500 12px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gilt); margin-bottom: 10px; }
.story__ptitle { font: 500 clamp(24px, 2.4vw, 36px)/1.15 var(--serif); color: var(--ivory); }
.story__ptext { margin-top: 12px; font: 400 17px/1.7 var(--sans); color: #d6cfc0; max-width: 54ch; }
/* Without script all four stages are visible, in reading order. */
html:not(.js) .story__tabs { display: none; }
html:not(.js) .story__panel { display: block; margin-bottom: 26px; }
html:not(.js) .story__label { display: block; }
/* The media beside the stage: the real photograph, cropped to this stage. */
.story__media { position: absolute; z-index: 0; right: var(--pad); top: 50%; translate: 0 -50%; width: min(42vw, 700px); aspect-ratio: 1 / 1; max-height: 78svh; padding: 3px; background: linear-gradient(112deg, #fff 0%, #8d867a 6%, #2b271f 13%, #e9e2d2 19%, #fffdf4 22%, #6f685a 28%, #1d1a14 40%, #3a352b 53%, #cdc4af 64%, #fff 68%, #7b7365 75%, #1a1712 85%, #b9b09b 93%, #f4eedf 100%); /* design-exception: the same banded chrome edge as the scene's framed photograph */ box-shadow: 0 30px 60px -20px #000, 0 0 0 1px #000; /* design-exception: the framed photograph stands off the stone with a deep cast shadow */ will-change: transform; }
.story__media .story__shot { position: absolute; inset: 3px; margin: 0; overflow: hidden; opacity: 0; transition: opacity 0.7s var(--ease); }
.story__media .story__shot.is-on { opacity: 1; }
.story__shot .photo, .story__shot img { display: block; width: 100%; height: 100%; }
.story__shot img { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--z, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); filter: brightness(0.88) contrast(1.06) saturate(0.9); transition: transform 1.2s var(--ease); }
.story__scrim { position: absolute; inset: 3px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, #0b0a0700 60%, #0b0a0788 100%); /* design-exception: a low warm-black grade on the story photograph, matching the scene frame */ }
.story:has(.story__media) .story__inner { max-width: none; padding-right: min(48vw, 780px); }
@media (max-width: 899px) {
  .story__stage { align-items: flex-start; padding-top: 84px; padding-bottom: 30px; }
  .story__media { position: relative; right: auto; top: auto; translate: none; width: 100%; aspect-ratio: 16 / 10; max-height: 30svh; margin: 0 0 18px; }
  .story:has(.story__media) .story__inner { padding-right: 0; }
  .story__stage:has(.story__media) { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .story__tabs { gap: 18px; max-width: none; }
  .story__tab { font-size: 11.5px; letter-spacing: 0.2em; }
  .story__title { font-size: clamp(32px, 9vw, 48px); max-width: none; }
  .story__lead { margin-top: 10px; font-size: 15.5px; }
  .story__panels { min-height: 0; }
  .story__ptext { font-size: 16px; }
}

/* ---------- disclosures and FAQ ---------- */
.disc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bronze); }
.disc__item { border-bottom: 1px solid var(--bronze-soft); }
.disc__h { margin: 0; }
.disc__btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; width: 100%; min-height: 64px; padding: 18px 4px; text-align: left; font: inherit; color: var(--ivory); background: none; border: 0; cursor: pointer; transition: color 0.22s ease-out; }
.disc__btn .disc__tag { grid-column: 1; font: 500 11px/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gilt); margin-bottom: 8px; }
.disc__title { grid-column: 1; font: 500 clamp(24px, 2.7vw, 42px)/1.15 var(--serif); letter-spacing: 0; text-wrap: balance; }
.disc--faq .disc__title { font-size: clamp(20px, 2vw, 28px); }
.disc__chev { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; fill: none; stroke: var(--gilt); stroke-width: 1.6; transition: transform 0.32s var(--ease), stroke 0.22s; }
.disc__btn:is(:hover, :focus-visible) { color: var(--gilt-light); }
.disc__btn:focus-visible { outline: 1px solid var(--champagne); outline-offset: -3px; }
.disc__item.is-open .disc__chev { transform: rotate(180deg); stroke: var(--gilt-light); }
.disc__item.is-open .disc__title { color: var(--gilt-light); }
.disc__region { display: grid; grid-template-rows: 1fr; }
.js .disc__region { grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease); }
.js .disc__item.is-open .disc__region { grid-template-rows: 1fr; }
.disc__clip { overflow: hidden; min-height: 0; }
.disc__body { display: grid; gap: 26px; padding: 4px 4px 28px; }
.disc__body.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: start; }
.disc__text p { max-width: 54ch; font: 400 17px/1.7 var(--sans); color: #d6cfc0; }
.disc__more { margin-top: 16px; }
.disc__more .textlink { display: inline-flex; align-items: center; min-height: 44px; }
.disc__media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--bronze); }
.disc__media .photo, .disc__media img { display: block; width: 100%; height: 100%; }
.disc__media img { object-fit: cover; object-position: var(--fx) var(--fy); transform: scale(var(--z)); transform-origin: var(--fx) var(--fy); filter: brightness(0.88) contrast(1.06) saturate(0.9); }
.disc__list { margin-top: 22px; max-width: 520px; }
.disc__list h4 { font: 600 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: #8e9ba5; margin-bottom: 12px; }
.disc__list li { padding: 12px 0; border-top: 1px solid var(--hair-soft); color: var(--ivory); }
.disc__list li:last-child { border-bottom: 1px solid var(--hair-soft); }
@media (max-width: 899px) { .disc__body.has-media { grid-template-columns: minmax(0, 1fr); } .disc__title { font-size: clamp(21px, 6vw, 30px); } }
.ed__disc { grid-column: 6 / -1; }
.ed--disclosures .ed__head, .ed--faq .ed__head { grid-column: 1 / span 4; }
.services__disc { max-width: 900px; margin: clamp(48px, 6vw, 88px) auto 0; }
.advance, .ed { scroll-margin-top: 70px; }
@media (max-width: 999px) { .ed__disc { grid-column: 1; } }
.ed__cols h3 { font-family: var(--serif); font-weight: 500; }

/* ---------- chrome on the form (the approved glossy fields, with shine) ---------- */
.well-frame { background: linear-gradient(112deg, #fff 0%, #a9a397 5%, #2b271f 12%, #e9e2d2 18%, #fffdf4 21%, #6f685a 27%, #1d1a14 40%, #3a352b 54%, #cdc4af 65%, #fff 69%, #7b7365 76%, #1a1712 86%, #b9b09b 94%, #f4eedf 100%); /* design-exception: banded reflective chrome edge on the glossy fields, narrow specular bands against darker reflected bands, per the ALPHA standard */ box-shadow: 0 3px 4px #000b, 0 -1px 0 #ffffff26, inset 0 1px 0 #ffffff66; /* design-exception: platinum lip on the glossy fields, per the approved form reference */ }
.well__icon .metal-svg, .well__icon { filter: drop-shadow(0 0 5px #f4c86a88) brightness(1.16) contrast(1.12); /* design-exception: the gold icons inside the fields gleam, with light and dark in the metal, per the ALPHA standard */ }
.choice span { border-color: #d6cdb877; box-shadow: inset 0 1px 0 #ffffff33, inset 0 -1px 0 #0009, 0 1px 0 #000; /* design-exception: reflective top edge on the service-choice rows, per the ALPHA standard */ }
.choice input:checked + span { border-color: #f4cf72; box-shadow: inset 0 1px 0 #ffe9a8aa, inset 0 0 0 1px #f0c86e66, 0 0 18px -6px #e8a84f; /* design-exception: the selected service row is clearly gold: bright border, inner gold line, faint warm spill */ }
.notice--unavailable .alt-contact, .notice--error .alt-contact { display: block; margin-top: 8px; }
.alt-contact a { color: var(--gilt-light); }

/* ---------- not found ---------- */
.nf { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: center; padding: 120px var(--pad) 90px; }
.nf .atrium__world { z-index: -1; }
.nf__copy { max-width: 640px; }
.nf__links { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 4px; }
.nf .svc__title em { color: var(--champagne); }

/* ---------- arrival and leaving (shared) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .arrive .svc-scene .atrium__world { animation: world-arrive 1.1s var(--ease) both; }
  .arrive .svc__copy > * { animation: copy-arrive 0.9s var(--ease) both; }
  .arrive .svc__copy > :nth-child(2) { animation-delay: 0.08s; }
  .arrive .svc__copy > :nth-child(3) { animation-delay: 0.16s; }
  .arrive .svc__copy > :nth-child(4) { animation-delay: 0.24s; }
  .arrive .svc__subject { animation: subject-arrive 1.1s var(--ease) both; }
}
@keyframes world-arrive { from { scale: 1.16; filter: brightness(1.5); } to { scale: 1; filter: none; } }
@keyframes copy-arrive { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes subject-arrive { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
.is-leaving-page .ctl { opacity: 0; transition: opacity 0.2s; }


/* Serif section headings across the site (the heavy sans is retired). */
.ed__head h2, .services__head h2, .advance__head h2 { font: 500 clamp(34px, 3.8vw, 62px)/1.02 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ivory); max-width: 14ch; text-wrap: balance; }
.advance__head h2 { max-width: 12ch; font-size: clamp(38px, 4.6vw, 76px); }
.services__head h2 { max-width: 16ch; }
.advance__list strong { font-family: var(--serif); font-weight: 500; letter-spacing: 0; text-transform: none; }

.story__tabs { flex-wrap: wrap; max-width: 780px; column-gap: clamp(16px, 2.4vw, 36px); }
.story__tab { white-space: nowrap; letter-spacing: 0.22em; }
.advance__list span { color: #b9b2a3; }
/* The training photograph is small: its frame never exceeds its own size. */
.story[data-page='training'] .story__media { width: min(34vw, 480px); }
.story[data-page='training'] .story__shot img { transform: none; }
@media (min-width: 900px) { .story[data-page='training']:has(.story__media) .story__inner { padding-right: min(44vw, 640px); } }

html.cine-on .svc-scene .svc__copy, html.cine-on .svc-scene .svc__subject, html.cine-on .story__media { translate: none; }
@media (max-width: 899px) { html.cine-on .story__media, html.cine-on .svc-scene .svc__subject, html.cine-on .svc-scene .svc__copy { translate: none; } }

@media (max-width: 899px) {
  .svc-scene--security .svc__title, .svc-scene--training .svc__title { font-size: clamp(28px, min(8.4vw, 4.8svh), 46px); }
  .svc__line { font-size: clamp(15px, 2.2svh, 20px); }
  .svc__cta { white-space: nowrap; letter-spacing: 0.2em; font-size: 11px; }
  .story__tab { letter-spacing: 0.16em; }
  .story__tabs { column-gap: 14px; }
  .story[data-page='training'] .story__media { width: auto; height: min(30svh, 280px); aspect-ratio: 1; max-height: none; }
}
.nf__copy { position: relative; }
.nf__copy::before { content: ''; position: absolute; inset: -60px -90px -50px -90px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 35% 50%, #060605e0 0%, #060605a8 52%, #06060500 80%); /* design-exception: a dark grade behind the words so they hold contrast over the lit pillars */ }

@media (max-width: 380px) {
  .svc__cta { letter-spacing: 0.12em; font-size: 10.5px; gap: 10px; }
  .svc__cta-arrow { width: 26px; flex: none; }
}

@media (max-width: 380px) { .svc__cta { white-space: normal; max-width: 100%; align-items: flex-start; padding-bottom: 8px; line-height: 1.5; } .svc__cta span { flex: 1 1 auto; } }

@media (max-width: 899px) {
  .svc-scene .svc__copy, .svc-scene--transport .svc__copy, .svc-scene--security .svc__copy, .svc-scene--training .svc__copy { position: relative; left: auto; right: auto; top: auto; translate: none; width: 100%; max-width: 520px; margin: 0 auto; }
}