/* Layer 10 — layer-10.com
   Tokens follow the brand board: obsidian/charcoal/slate surfaces, the gold
   system, ivory/stone/mist text, and three sparing accents. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  /* surfaces */
  --obsidian: #080B0D;
  --charcoal: #15171B;
  --slate: #23262D;
  /* gold system */
  --gold: #C7A958;
  --gold-deep: #A8863A;
  --gold-pale: #E4D3A1;
  /* text */
  --ivory: #EAE6DB;
  --stone: #BBB1A3;
  --mist: #8A8F98;
  /* accents */
  --ember: #C96A3D;
  --glass: #5A6E8C;
  --emerald: #2F5E50;
  --emerald-lit: #5FBF9A;

  --line: #2A2A27;
  --line-gold: rgba(199, 169, 88, .32);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1320px;
  --gutter: clamp(16px, 4.5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Cormorant defaults to old-style figures, which turn "10" into "ıo" and "01" into "oı".
   Every `font:` shorthand resets numeric variants, so this has to be universal and !important. */
*, *::before, *::after { font-variant-numeric: lining-nums !important; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 5px; border-radius: 2px; }
::selection { background: rgba(199, 169, 88, .35); color: var(--ivory); }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  padding: 10px 16px; background: var(--gold); color: var(--obsidian); border-radius: 3px;
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow span { color: var(--mist); margin: 0 .6em; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 24px;
  border: 1px solid var(--gold); border-radius: 3px;
  background: linear-gradient(115deg, var(--gold-pale), var(--gold) 58%, var(--gold-deep));
  color: var(--obsidian);
  font: 500 14px/1 var(--sans); letter-spacing: .02em;
  transition: filter .25s var(--ease-out), transform .25s var(--ease-out);
}
.button:hover { filter: brightness(1.1); }
.button:active { transform: translateY(1px); }
.button .arrow { transition: transform .25s var(--ease-out); }
.button:hover .arrow { transform: translateX(3px); }
.button-ghost {
  background: rgba(8, 11, 13, .55);
  color: var(--gold);
  border-color: rgba(199, 169, 88, .5);
}
.button-ghost:hover { border-color: var(--gold); filter: none; background: rgba(199, 169, 88, .08); }
.button-sm { min-height: 38px; padding: 0 16px; font-size: 13px; }

/* ---------- header ---------- */
.site-header { position: absolute; inset: 0 0 auto; z-index: 10; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 96px; }
.brand { display: inline-flex; align-items: center; gap: 18px; }
.brand-mark { width: 62px; height: 35px; }
.brand-word {
  font: 500 17px/1 var(--serif);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ivory);
  padding-top: 2px;
}
.site-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; }
.site-nav > a:not(.button) {
  color: var(--stone);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-nav > a:not(.button):hover { color: var(--gold-pale); border-color: var(--gold); }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: max(640px, min(100svh, 940px));
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero::before {               /* faint blueprint grid: the "modern" half of the brief */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(199, 169, 88, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 169, 88, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 20%, transparent 75%);
}
.hero-art {
  position: absolute; inset: 0 0 0 30%; z-index: -1;
  mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(0deg, transparent 0, #000 22%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.hero-art .nave { width: 100%; height: 100%; }
.hero-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 96px; }
.hero-copy { max-width: 600px; padding: 48px 0 72px; }
.hero h1 {
  margin: 0 0 24px;
  font: 400 clamp(56px, 7.4vw, 104px)/.98 var(--serif);
  letter-spacing: -.015em;
}
.hero h1 em { display: block; font-style: italic; font-weight: 400; color: var(--gold); }
.hero-sub { font: italic 400 clamp(22px, 2.2vw, 28px)/1.35 var(--serif); color: var(--gold-pale); margin-bottom: 22px; }
.hero-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding: 8px 0;
  border-bottom: 1px solid var(--line-gold);
  font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.hero-link:hover { color: var(--gold-pale); border-color: var(--gold); }
.hero-link .arrow { transition: transform .25s var(--ease-out); }
.hero-link:hover .arrow { transform: translateY(2px); }
.lead { max-width: 430px; color: var(--stone); font-size: 17px; line-height: 1.8; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; }
.hero-diamond {
  width: 9px; height: 9px; margin-bottom: -5px; transform: rotate(45deg);
  background: var(--obsidian); border: 1px solid var(--gold);
}

/* The chapel. Normally nave-gl.js draws it on the GPU into .nave-gl (built once on load, then a
   slow calm life); the inline SVG .nave is the static, finished fallback for reduced motion, no
   WebGL and no JS. With JS and motion allowed the SVG stays hidden until the renderer has either
   drawn its first frame (.gl-on) or given up (.gl-off), so there is never a flash of the finished
   chapel before the build, nor a blank hero if WebGL is missing. */
.nave .ln { fill: none; }
.hero-art { contain: layout paint; }
.nave-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero:not(.gl-off) .nave { visibility: hidden; }
}
.hero.gl-on .nave { display: none; }
.hero.gl-off .nave-gl { display: none; }
/* Static fallback light: the haze, shafts and floor pool are all drawn from the glass (see
   tools/gen_nave.py); they add to what is behind them like light does. */
.nave-haze, .nave-shaft, .nave-pool { mix-blend-mode: screen; }

/* ---------- sections ---------- */
.section-head h2 em { font-style: italic; color: var(--gold); }
.section-intro { max-width: 44ch; color: var(--stone); font-size: 15.5px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section-head h2 {
  margin-top: 14px;
  font: 400 clamp(36px, 4.2vw, 52px)/1.08 var(--serif);
  letter-spacing: -.01em;
}
.count {
  display: inline-grid; place-items: center; vertical-align: middle;
  min-width: 30px; height: 26px; padding: 0 8px; margin-left: 10px;
  border: 1px solid var(--line-gold); border-radius: 3px;
  font: 500 13px/1 var(--sans); color: var(--gold);
}
.section-path, .project-addr { font: 400 13px/1.4 ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; color: var(--mist); }
.section-path span, .project-addr span { color: var(--gold); }

/* ---------- the west window: one stained-glass light per project ---------- */
.window-sec { position: relative; padding: 120px 0 128px; overflow: clip; }   /* clip, not hidden: hidden boxes can be scrolled by focus or scrollIntoView */
.window-sec::before {         /* the light the window throws across the floor */
  content: ""; position: absolute; inset: 30% -10% -20%; pointer-events: none;
  background:
    radial-gradient(30% 45% at 18% 40%, rgba(233, 220, 191, .07), transparent 70%),
    radial-gradient(30% 45% at 40% 40%, rgba(46, 155, 240, .08), transparent 70%),
    radial-gradient(30% 45% at 62% 40%, rgba(210, 85, 63, .08), transparent 70%),
    radial-gradient(30% 45% at 84% 40%, rgba(203, 213, 222, .05), transparent 70%);
}
.window-sec .section-head { margin-bottom: 56px; }
/* Each light's colours live here, not in style="" attributes: the CSP (style-src 'self') blocks those. */
.light-marque  { --glow: #E9DCBF; --accent: #C9A876; }
.light-fisheye { --glow: #2E9BF0; --accent: #F97316; }
.light-knights { --glow: #D2553F; --accent: #E8A04A; }
.light-soon    { --glow: #CBD5DE; --accent: #BBB1A3; }
.lights { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.light { position: relative; display: flex; flex-direction: column; }
.light-glass { position: relative; aspect-ratio: 300 / 560; isolation: isolate; }
.light-glass::before {        /* halo: the pane glowing into the dark around it */
  content: ""; position: absolute; inset: -12% -30% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 34%, transparent), transparent);
  opacity: .45; transition: opacity 1.2s var(--ease-out);
}
.glass { width: 100%; height: 100%; transition: filter 1.8s var(--ease-out); }
.light:hover .light-glass::before { opacity: .9; }
.light:hover .glass { filter: brightness(1.12) saturate(1.1); transition-duration: .7s; }
.glass-sweep { transform-box: view-box; transition: transform 0s; }
.light:hover .glass-sweep { transform: translateX(600px); transition: transform 2.2s cubic-bezier(.45, 0, .3, 1); }

/* .light-body stays unpositioned so the card's stretched link (.project-action::after) covers the whole li */
.light-body { display: flex; flex-direction: column; flex: 1; padding: 30px 2px 0; }
.light-glass::after {         /* the colour pooling on the stone beneath the pane */
  content: ""; position: absolute; left: -10%; right: -10%; top: calc(100% + 6px); height: 140px; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 50% 0%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 75%);
  opacity: .7; transition: opacity 1.2s var(--ease-out);
}
.light:hover .light-glass::after { opacity: 1; }
.light-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.light h3 { margin: 18px 0 6px; font: 400 clamp(28px, 2.3vw, 34px)/1.08 var(--serif); }
.light-motto { font: italic 400 18px/1.35 var(--serif); color: var(--accent); }
.light-text { margin: 14px 0 22px; color: var(--stone); font-size: 14.5px; line-height: 1.65; }
.light .chips { margin: 18px 0 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.chips li {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 12px; color: var(--stone); background: rgba(255, 255, 255, .015);
}
.project-kind { font: 500 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--mist); }
.project-links { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.project-action { display: inline-flex; align-items: center; gap: .5em; min-height: 24px; padding: 6px 0; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); transition: color .2s var(--ease-out); }
.project-action:hover { color: var(--gold-pale); }
.project-action .arrow { display: inline-block; transition: transform .25s var(--ease-out); }
.project-action:hover .arrow { transform: translateX(3px); }
.project-action:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; }
.light-soon h3 { color: var(--stone); }
.light-soon .light-text { margin-bottom: 22px; }

/* A card with a link is clickable as a whole (the link's ::after covers it). On hover it rises with the
   same spring as the ten layers, its divider catches the gold and the arrow steps forward. The lift is on
   the card's two parts, not the li, because the li's reveal stagger delays every transition on it. */
.light:has(.project-action) { cursor: pointer; }
.light .project-action::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.light > .light-glass, .light > .light-body { transition: translate .5s cubic-bezier(.34, 1.4, .5, 1); }
.light .project-links { transition: border-color .35s var(--ease-out); }
.light h3 { transition: color .35s var(--ease-out); }
@media (hover: hover) {
  .light:has(.project-action):hover > .light-glass, .light:has(.project-action):hover > .light-body { translate: 0 -8px; }
  .light:has(.project-action):hover .project-links { border-color: rgba(199, 169, 88, .55); }
  .light:has(.project-action):hover h3 { color: var(--gold-pale); }
  .light:has(.project-action):hover .project-action { color: var(--gold-pale); }
  .light:has(.project-action):hover .project-action .arrow { transform: translateX(4px); }
}
.light:has(.project-action:focus-visible) > .light-glass, .light:has(.project-action:focus-visible) > .light-body { translate: 0 -8px; }
.light:has(.project-action:focus-visible) .project-links { border-color: rgba(199, 169, 88, .55); }
.light:has(.project-action):active > .light-glass, .light:has(.project-action):active > .light-body { translate: 0 -3px; }

/* the glass lights from dark to full as the window comes into view, left to right */
.js .light.reveal .glass { filter: brightness(.28) saturate(.5); }
.js .light.reveal.in .glass { filter: none; }
.js .light.reveal:nth-child(2), .js .light.reveal:nth-child(2) .glass { transition-delay: .18s; }
.js .light.reveal:nth-child(3), .js .light.reveal:nth-child(3) .glass { transition-delay: .36s; }
.js .light.reveal:nth-child(4), .js .light.reveal:nth-child(4) .glass { transition-delay: .54s; }
.js .light.reveal.in:hover .glass { filter: brightness(1.12) saturate(1.1); transition-delay: 0s; }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 9px; border-radius: 999px;
  font: 500 11px/1.2 var(--sans); letter-spacing: .04em;
  border: 1px solid;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-live { color: var(--emerald-lit); border-color: rgba(95, 191, 154, .35); background: rgba(47, 94, 80, .25); }
.status-live::before { box-shadow: 0 0 8px currentColor; }
.status-building { color: var(--gold-pale); border-color: var(--line-gold); background: rgba(199, 169, 88, .08); }
.status-planned { color: var(--mist); border-color: #33363C; }

/* ---------- about ---------- */
.about { position: relative; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-top: 112px; padding-bottom: 64px; }
.about-side { align-self: start; }
.rose { position: relative; isolation: isolate; width: min(100%, 420px); margin: 36px 0 0 -12px; aspect-ratio: 1; }
.rose::before {               /* the window's light spilling onto the wall around it: round, so it never shows an edge */
  content: ""; position: absolute; inset: -45%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(228, 211, 161, .15), rgba(199, 169, 88, .06) 45%, rgba(199, 169, 88, .02) 70%, transparent);
}
.rose-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.about-quote { font: 400 clamp(46px, 6.2vw, 88px)/1.02 var(--serif); letter-spacing: -.012em; margin-bottom: 34px; }
.about-quote em { display: block; font-style: italic; color: var(--gold); }
.about-philosophy { max-width: 64ch; }
.about-philosophy p { color: var(--stone); font-size: 17px; line-height: 1.8; margin-bottom: 1.6em; }
.approach + .approach { margin-top: 72px; }
.approach-ai {                /* set apart like an inscription: a gilt-edged panel */
  position: relative; padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line-gold); border-radius: 2px;
  background: linear-gradient(135deg, rgba(199, 169, 88, .07), rgba(21, 23, 27, .5) 60%);
  box-shadow: 0 30px 80px -40px rgba(199, 169, 88, .25);
}
.approach-ai::before {        /* a gilt rule along the top edge */
  content: ""; position: absolute; left: clamp(28px, 4vw, 52px); top: -1px; width: 72px; height: 2px;
  background: linear-gradient(90deg, var(--gold-pale), var(--gold));
}
.approach-title { font: 400 clamp(30px, 3.4vw, 42px)/1.12 var(--serif); margin-bottom: 20px; }
.approach-title em { font-style: italic; color: var(--gold); }
.approach-ai p { max-width: 64ch; color: var(--stone); font-size: 17px; line-height: 1.8; }
.approach-ai .approach-lede { font: italic 400 clamp(22px, 2.4vw, 28px)/1.45 var(--serif); color: var(--gold-pale); margin-bottom: 18px; }

/* ---------- project pages ("About the project") ---------- */
.site-header-page { position: relative; }
.project-page { padding: 24px 0 120px; }
.project-grid { display: grid; grid-template-columns: minmax(220px, 4fr) 7fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.project-glass { position: sticky; top: 32px; }
.project-glass .light-glass { width: min(100%, 340px); }
.project-body { max-width: 64ch; }
.project-body h1 { margin: 22px 0 18px; font: 400 clamp(44px, 5.6vw, 72px)/1.02 var(--serif); letter-spacing: -.01em; }
.project-lede { font: italic 400 clamp(22px, 2.3vw, 28px)/1.45 var(--serif); color: var(--gold-pale); }
.project-body h2 { margin: 48px 0 14px; font: 500 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.project-body > p { color: var(--stone); font-size: 17px; line-height: 1.8; }
.project-features li { padding: 18px 0; border-top: 1px solid var(--line); }
.project-features li:last-child { border-bottom: 1px solid var(--line); }
.project-features h3 { font: 400 24px/1.25 var(--serif); color: var(--ivory); margin-bottom: 6px; }
.project-features p { color: var(--stone); font-size: 15.5px; line-height: 1.7; }
.project-site { margin-top: 18px; }
.project-back { margin-top: 56px; }
/* Opening: the pane lights from dark, its halo blooms, one sweep of light crosses it, and the text
   rises in after it. Plays once on load. Fill "backwards" only, so hover still works afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .js .project-glass .glass { animation: pane-light 2.4s var(--ease-out) .1s backwards; }
  .js .project-glass .light-glass::before { animation: pane-halo 3s var(--ease-out) .2s backwards; }
  .js .project-glass .glass-sweep { animation: pane-sweep 2.6s cubic-bezier(.45, 0, .3, 1) 1.2s backwards; }
  .js .project-page .rise { animation: rise 1s var(--ease-out) backwards; }
  .js .project-page .rise-1 { animation-delay: .7s; }
  .js .project-page .rise-2 { animation-delay: .85s; }
  .js .project-page .rise-3 { animation-delay: 1.05s; }
  .js .project-page .rise-4 { animation-delay: 1.35s; }
}
@keyframes pane-light { from { filter: brightness(.18) saturate(.35); } }
@keyframes pane-halo { from { opacity: 0; } 55% { opacity: 1; } }
@keyframes pane-sweep { from { transform: none; } to { transform: translateX(600px); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; font-size: 13px; color: var(--mist); }
.footer-line { font: italic 400 17px/1.4 var(--serif); color: var(--stone); }
.brand-sm .brand-mark { width: 48px; height: 27px; }
.brand-sm .brand-word { font-size: 14px; color: var(--gold); }

/* ---------- reveal on scroll (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Layer X: the ten-layer stack, laid like cathedral courses ---------- */
.layers {
  padding: 80px 0 120px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(560px 320px at 72% 340px, rgba(199, 169, 88, .09), transparent 70%);
}
.layers-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.layers h2 { margin-top: 14px; font: 400 clamp(36px, 4.2vw, 52px)/1.08 var(--serif); letter-spacing: -.01em; }
.layers h2 em { display: block; font-style: italic; color: var(--gold); }
.layers-intro > h2 + p { margin-top: 22px; color: var(--stone); max-width: 46ch; }
.layers-intro > h2 + p em { font-family: var(--serif); font-size: 1.15em; color: var(--gold-pale); }

/* The list reads I→X for screen readers; visually it is built bottom-up, each
   course a little narrower than the one below, tapering toward the gilded X. */
.stack-wrap { position: relative; }
.stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
.course { --w: 100%; width: var(--w); }
.course:nth-child(2) { --w: 97%; }  .course:nth-child(3) { --w: 94%; }
.course:nth-child(4) { --w: 91%; }  .course:nth-child(5) { --w: 88%; }
.course:nth-child(6) { --w: 85%; }  .course:nth-child(7) { --w: 82%; }
.course:nth-child(8) { --w: 79%; }  .course:nth-child(9) { --w: 76%; }
/* Each row is a button that opens its layer's popover (site.js places it beside the row). On hover or
   focus the course slides out of the wall a little and its edge catches the gold, so it is clear which
   one a click will open; the open one stays out. */
.course-row {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 52px 1fr auto 12px; align-items: baseline; gap: 14px;
  padding: 10px 18px; margin: 0;
  border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(90deg, rgba(35, 38, 45, .55), rgba(21, 23, 27, .35));
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: translate .45s cubic-bezier(.34, 1.4, .5, 1), scale .15s var(--ease-out), border-color .3s var(--ease-out),
              background-color .3s var(--ease-out), box-shadow .45s var(--ease-out);
}
.course-row:focus-visible, .course.is-open .course-row {
  translate: -10px 0;
  border-color: rgba(199, 169, 88, .55);
  background-color: rgba(199, 169, 88, .06);
  box-shadow: 10px 0 0 -9px var(--gold), 0 10px 30px -18px rgba(199, 169, 88, .5);
}
.course-row:focus-visible { outline-offset: 3px; }
.course-row:focus-visible .course-num, .course.is-open .course-num { color: var(--gold); }
.course-row:focus-visible .course-name, .course.is-open .course-name { color: var(--ivory); }
.course-tog { position: relative; width: 12px; height: 12px; align-self: center; opacity: .55; transition: opacity .3s, rotate .4s var(--ease-out); }
.course-tog::before, .course-tog::after { content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: var(--gold); }
.course-tog::after { rotate: 90deg; }
.course-row:focus-visible .course-tog { opacity: 1; }
.course.is-open .course-tog { opacity: 1; rotate: 45deg; }
.course-num { font: 400 19px/1 var(--serif); color: var(--mist); letter-spacing: .04em; transition: color .3s; }
.course-name { font-size: 14.5px; color: var(--stone); transition: color .3s; }
.course-note { font: 400 12px/1 var(--mono, ui-monospace, Consolas, monospace); color: var(--mist); text-align: right; }
.course-human .course-row { background: linear-gradient(90deg, rgba(199, 169, 88, .07), rgba(21, 23, 27, .35)); border-color: #35322A; }
.course-human .course-num { color: var(--gold-deep); }
.course-x { --w: 73%; margin-bottom: 8px; }
.course-x .course-row {
  padding: 22px;
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(228, 211, 161, .16), rgba(199, 169, 88, .05) 45%, rgba(8, 11, 13, .6));
  box-shadow: 0 0 0 1px rgba(8, 11, 13, .8), 0 0 60px -12px rgba(199, 169, 88, .45);
}
.course-x .course-row:focus-visible, .course-x.is-open .course-row {
  translate: 0 -4px;
  box-shadow: 0 0 0 1px rgba(8, 11, 13, .8), 0 0 80px -8px rgba(199, 169, 88, .6);
}
.course-x .course-num {
  font: 500 46px/.8 var(--serif);
  background: linear-gradient(135deg, #F0E2B6, var(--gold) 50%, #9A7C35);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.course-x .course-name { font: 400 30px/1 var(--serif); color: var(--ivory); }
.course-x .course-note { color: var(--gold); }
@media (hover: hover) {
  .course-row:hover {
    translate: -10px 0;
    border-color: rgba(199, 169, 88, .55);
    background-color: rgba(199, 169, 88, .06);
    box-shadow: 10px 0 0 -9px var(--gold), 0 10px 30px -18px rgba(199, 169, 88, .5);
  }
  .course-row:hover .course-num { color: var(--gold); }
  .course-row:hover .course-name { color: var(--ivory); }
  .course-row:hover .course-tog { opacity: 1; }
  .course-x .course-row:hover { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(8, 11, 13, .8), 0 0 80px -8px rgba(199, 169, 88, .6); }
}
.course-row:active { scale: .99; }   /* a touch press registers, on phones too */
.layers-hint { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--mist); }
.layers-hint-dot { width: 6px; height: 6px; rotate: 45deg; background: var(--gold); }

/* ---- the layer popover: a small gilt-edged card beside its row, with a pointer at the row ---- */
.layer-pop {
  --ox: 10px; --oy: 0px;
  width: min(340px, calc(100vw - 32px)); margin: auto; padding: 24px 26px 24px;
  border: 1px solid var(--line-gold); border-radius: 2px;
  background: linear-gradient(160deg, #1A1C21, #101317 70%);
  color: var(--ivory); overflow: visible;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 50px -20px rgba(199, 169, 88, .35);
  opacity: 1; transform: none;
  transition: opacity .25s var(--ease-out), transform .35s var(--ease-out),
              overlay .35s allow-discrete, display .35s allow-discrete;
}
.layer-pop.placed { position: fixed; inset: auto; margin: 0; }
.layer-pop:not(:popover-open) { opacity: 0; transform: translate(var(--ox), var(--oy)) scale(.98); }
@starting-style { .layer-pop:popover-open { opacity: 0; transform: translate(var(--ox), var(--oy)) scale(.98); } }
.layer-pop::backdrop { background: transparent; }
.layer-pop::before {          /* gilt rule along the top */
  content: ""; position: absolute; left: 26px; top: -1px; width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--gold-pale), var(--gold));
}
.layer-pop::after {           /* the pointer toward the row: right edge on desktop, top or bottom on phones */
  content: ""; position: absolute; width: 10px; height: 10px; rotate: 45deg;
  background: #121519; border: 1px solid var(--line-gold);
  right: -6px; top: calc(var(--ay, 50%) - 5px); border-left: 0; border-bottom: 0;
}
.layer-pop[data-side="below"]::after { right: auto; left: calc(var(--ax, 32px) - 5px); top: -6px; border: 1px solid var(--line-gold); border-right: 0; border-bottom: 0; background: #1A1C21; }
.layer-pop[data-side="above"]::after { right: auto; left: calc(var(--ax, 32px) - 5px); top: auto; bottom: -6px; border: 1px solid var(--line-gold); border-left: 0; border-top: 0; }
.layer-pop[data-side="center"]::after { display: none; }
.layer-pop-num {
  font: 500 34px/1 var(--serif);
  background: linear-gradient(135deg, #F0E2B6, var(--gold) 50%, #9A7C35);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.layer-pop-name { margin: 6px 0 10px; font: 400 26px/1.15 var(--serif); }
.layer-pop-text { color: var(--stone); font-size: 14.5px; line-height: 1.65; }

/* the stack builds course by course, from the wire up */
.js .course { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .stack.in .course { opacity: 1; transform: none; }
.js .stack.in .course:nth-child(2) { transition-delay: .07s; } .js .stack.in .course:nth-child(3) { transition-delay: .14s; }
.js .stack.in .course:nth-child(4) { transition-delay: .21s; } .js .stack.in .course:nth-child(5) { transition-delay: .28s; }
.js .stack.in .course:nth-child(6) { transition-delay: .35s; } .js .stack.in .course:nth-child(7) { transition-delay: .42s; }
.js .stack.in .course:nth-child(8) { transition-delay: .62s; } .js .stack.in .course:nth-child(9) { transition-delay: .72s; }
.js .stack.in .course-x { transition-delay: 1.05s; transition-duration: 1.2s; }

/* ---------- gilt: borders catch the light where the cursor is ---------- */
[data-gilt]::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 226, 182, .9), rgba(199, 169, 88, .25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
[data-gilt]:hover::after { opacity: 1; }
.course-x [data-gilt]::after { opacity: .55; }

/* ---------- scroll: the hero copy fades (opacity only, set from JS) ---------- */
.hero-copy { opacity: calc(1 - var(--fade, 0) * .9); }

/* ---------- illuminated initial ---------- */
.about-philosophy > p:first-child::first-letter {
  float: left;
  margin: 8px 12px 0 0;
  font: 500 70px/.72 var(--serif);
  color: var(--gold);
}

@media (max-width: 1000px) {
  .layers-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .layers { padding: 80px 0; }
  .course { --w: 100% !important; }
  .course-row { grid-template-columns: 40px 1fr 12px; padding: 12px 14px; }
  .course-row:hover, .course-row:focus-visible, .course.is-open .course-row { translate: 0 0; }
  .course-x .course-row:hover, .course-x .course-row:focus-visible, .course-x.is-open .course-row { translate: 0 0; }
  .course-x .course-row { padding: 18px; }
  .course-note { display: none; }
  .course-x .course-note { display: block; grid-column: 2; grid-row: 2; text-align: left; margin-top: 6px; }
  .course-x .course-num { font-size: 38px; }
}

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px var(--gutter); }
.lost .brand-mark { width: 100px; height: 56px; margin: 0 auto 36px; }
.lost h1 { font: 400 clamp(44px, 6vw, 72px)/1.05 var(--serif); margin: 18px 0; }
.lost h1 em { color: var(--gold); }
.lost p:not(.eyebrow) { color: var(--stone); margin-bottom: 32px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  /* narrow/tablet: copy on top, the chapel fills the lower part so the window never sits behind text */
  .hero { justify-content: flex-start; min-height: max(760px, min(100svh, 1000px)); }
  .hero-art { inset: auto 0 0 0; height: 58%; mask-image: linear-gradient(180deg, transparent 0, #000 30%); -webkit-mask-composite: initial; mask-composite: initial; }
  .about { grid-template-columns: 1fr; }
  .about { overflow-x: clip; }   /* the rose's glow is wider than a phone; the section is full width here, so no edge shows */
  .lights { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 72px; }
  .light-glass { width: min(100%, 300px); margin: 0 auto; }
  .rose { width: min(72vw, 280px); margin: 24px auto 0; }
}
@media (max-width: 760px) {
  .site-nav > a:not(.button) { display: none; }
  .header-row { height: 80px; }
  .brand { gap: 12px; }
  .brand-mark { width: 50px; height: 28px; }
  .brand-word { font-size: 14px; letter-spacing: .32em; }
  .hero { min-height: 0; }
  .hero-copy { padding: 20px 0 72px; }
  .eyebrow { letter-spacing: .22em; font-size: 11px; }
  .eyebrow span { margin: 0 .35em; }
  .hero-inner { padding-top: 0; }
  .hero { min-height: 0; }
  /* phone: the chapel sits above the copy, enlarged and cropped to the window and its light */
  .hero-art { position: relative; inset: auto; order: -1; height: 270px; margin-top: 60px; overflow: hidden; z-index: 0;
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 72%, transparent 100%); }
  .hero-art .nave { width: 170%; margin-left: -35%; }
  .hero-art .nave-gl { left: -35%; width: 170%; }
  .hero h1 { font-size: clamp(54px, 15vw, 72px); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .about { padding-top: 80px; padding-bottom: 80px; }
  .window-sec { padding: 88px 0; }
  .window-sec .section-head { margin-bottom: 40px; }
  .footer-row { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding-block: 28px; }   /* block only: keep .wrap's side gutter */
}

@media (max-width: 760px) {
  .project-grid { grid-template-columns: 1fr; gap: 32px; }
  .project-glass { position: static; }
  .project-glass .light-glass { width: min(62vw, 240px); }
  .project-page { padding-bottom: 80px; }
}

@media (max-width: 560px) {
  .lights { grid-template-columns: 1fr; row-gap: 64px; }
}

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

/* ---------- hero: Layer 10 and its flagship (mockup, branch mockup/fisheye-flagship) ----------
   nave-gl.js sets --fe (0..1) on .hero while the window turns FishEye blue; the flagship answers it. */
.hero { --fe: 0; }
.hero h1 { font-size: clamp(56px, 7vw, 100px); }
.hero .lead { max-width: 470px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 1.2s var(--ease-out) backwards; }
  .hero-copy > :nth-child(1) { animation-delay: .5s; }
  .hero-copy > :nth-child(2) { animation-delay: .9s; }
  .hero-copy > :nth-child(3) { animation-delay: 1.2s; }
  .hero-copy > :nth-child(4) { animation-delay: 3.6s; animation-duration: 1.6s; }   /* arrives as the glass lights */
  .hero-copy > :nth-child(5) { animation-delay: 4.2s; }
}

.flagship {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 18px;
  max-width: 540px; margin-top: 34px; padding: 16px 22px 16px 16px;
  border: 1px solid var(--line-gold);
  background: linear-gradient(105deg, rgba(33, 134, 212, calc(.03 + var(--fe) * .16)), rgba(8, 11, 13, .55) 62%);
  box-shadow: 0 0 calc(10px + var(--fe) * 70px) rgba(33, 134, 212, calc(var(--fe) * .32)), inset 0 1px 0 rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .45s var(--ease-out), border-color .3s var(--ease-out);
}
.flagship:hover { transform: translateY(-2px); border-color: rgba(199, 169, 88, .6); }
.flag-mark {
  grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px;
  background: #fff; box-shadow: 0 8px 24px -8px rgba(33, 134, 212, calc(.35 + var(--fe) * .5));
}
.flag-text { display: grid; gap: 1px; min-width: 0; }
.flag-kind { font: 500 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.flag-name { font: 500 30px/1.05 var(--serif); color: var(--ivory); letter-spacing: -.005em; }
.flag-line { font-size: 14.5px; line-height: 1.5; color: var(--stone); }
.flag-trace { grid-row: 1; grid-column: 3; width: 120px; height: 36px; overflow: visible; }
.flag-go {
  grid-column: 3; justify-self: end; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) calc((1 - var(--fe)) * 100%), #6EC1F2);
}
.flag-go span { display: inline-block; transition: transform .3s var(--ease-out); }
.flagship:hover .flag-go span { transform: translateX(3px); }
.ft-line {
  fill: none; stroke-width: 1.6; stroke-linecap: round;
  stroke: color-mix(in srgb, var(--gold) calc((1 - var(--fe)) * 100%), #6EC1F2);
  stroke-dasharray: 150; stroke-dashoffset: 0;
}
.ft-dot { fill: #F97316; filter: drop-shadow(0 0 4px #F97316); opacity: 0;
  offset-path: path("M2 26 C14 26 16 22 24 23 S36 27 44 24 S52 9 60 10 S70 25 80 24 S96 20 104 21 L118 20"); }
@media (prefers-reduced-motion: no-preference) {
  .ft-line { animation: ft-draw 6s var(--ease-out) 4.4s infinite backwards; }
  .ft-dot { animation: ft-run 6s linear 4.4s infinite; }
}
@keyframes ft-draw { 0% { stroke-dashoffset: 150; } 45%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -150; } }
@keyframes ft-run { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 45% { offset-distance: 100%; opacity: 1; } 52%, 100% { offset-distance: 100%; opacity: 0; } }
.flagship + .hero-link { margin-top: 26px; }
@media (max-width: 560px) {
  .flagship { grid-template-columns: auto 1fr; padding: 14px 16px 14px 14px; gap: 0 14px; }
  .flag-mark { width: 44px; height: 44px; }
  .flag-trace { display: none; }
  .flag-go { grid-column: 2; justify-self: start; margin-top: 8px; }
  .flag-name { font-size: 26px; }
}
.flag-text { grid-row: span 2; }
@media (max-width: 560px) { .flag-text { grid-row: auto; } }
/* still frames (?navet=): CSS motion off so the copy is in place */
.shot *, .shot *::before, .shot *::after { animation: none !important; }

/* ---------- the flagship: FishEye in its own light ----------
   site.js writes --tp (0..1) on .trace as the section scrolls through the screen: the gold path draws
   hop by hop, each hop lights as the line reaches it, and at the end the new route appears in koi
   orange. Without JS or with reduced motion --tp stays 1, so the finished drawing is simply there. */
.flag-sec { position: relative; padding: 140px 0 120px; overflow: clip; border-bottom: 1px solid var(--line); }
.flag-sec::before {           /* the window's blue light across the floor */
  content: ""; position: absolute; left: -10%; top: 10%; width: 70%; height: 80%; z-index: -1;
  background: radial-gradient(ellipse at 30% 50%, rgba(46, 155, 240, .14), transparent 65%);
}
.flag-grid { display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.flag-art .light-glass { width: 100%; }
.flag-art .light-glass::before { opacity: .75; }
.flag-body h2 { margin: 14px 0 0; font: 400 clamp(44px, 5.4vw, 76px)/1.02 var(--serif); letter-spacing: -.01em; }
.flag-body h2 em { display: block; font-style: italic; color: var(--gold); }
.flag-lede { max-width: 54ch; margin: 26px 0 0; color: var(--stone); font-size: 17px; line-height: 1.75; }

.trace { --tp: 1; margin: 40px 0 0; }
.trace svg { display: block; width: 100%; max-width: 640px; height: auto; overflow: visible; }
.trace figcaption { max-width: 56ch; margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--mist); }
.trace-line, .trace-alt { fill: none; stroke-linecap: round; stroke-dasharray: 1; }
.trace-line { stroke: var(--gold); stroke-width: 1.6; stroke-dashoffset: calc(1 - min(1, var(--tp) * 1.25)); }
.trace-alt { stroke: #F97316; stroke-width: 1.8; stroke-dashoffset: calc(1 - clamp(0, (var(--tp) - .82) * 5.6, 1)); filter: drop-shadow(0 0 6px rgba(249, 115, 22, .55)); }
.hop circle { fill: var(--obsidian); stroke: var(--line-gold); stroke-width: 1.5; transition: stroke .5s var(--ease-out), fill .5s var(--ease-out); }
.hop text { fill: var(--stone); font: 500 11px var(--sans); text-anchor: middle; letter-spacing: .02em; opacity: .45; transition: opacity .5s var(--ease-out); }
.hop text.sub { fill: var(--mist); font-size: 10px; }
.hop.lit circle { stroke: #2E9BF0; fill: #0B2B52; }
.hop.lit text { opacity: 1; }
.trace-tag { opacity: clamp(0, (var(--tp) - .92) * 12.5, 1); }
.trace-tag rect { fill: rgba(249, 115, 22, .12); stroke: rgba(249, 115, 22, .6); stroke-width: 1; }
.trace-tag text { fill: #FDBA74; font: 500 10.5px var(--sans); text-anchor: middle; letter-spacing: .03em; }
.trace:not(.live) .hop circle { stroke: #2E9BF0; fill: #0B2B52; }
.trace:not(.live) .hop text { opacity: 1; }

.flag-facts { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.flag-facts li { padding-top: 16px; border-top: 1px solid var(--line-gold); color: var(--stone); font-size: 14.5px; line-height: 1.6; }
.flag-facts b { display: block; margin-bottom: 4px; font: italic 400 21px/1.2 var(--serif); color: var(--ivory); }
.flag-cta { margin-top: 36px; }
@media (max-width: 1000px) {
  .flag-grid { grid-template-columns: 1fr; }
  .flag-art { max-width: 280px; }
  .flag-facts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .flag-sec { padding: 96px 0 88px; }
  .flag-art { max-width: 220px; margin: 0 auto; }
  .hop text { font-size: 18px; } .hop text.sub { display: none; }   /* viewBox units: the 600-wide drawing is ~360 px here */
  .trace-tag text { font-size: 15px; } .trace-tag rect { width: 160px; x: 365px; height: 26px; }
}

/* ---------- contact ---------- */
.contact-sec { padding: 130px 0 140px; border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-head h2 { margin: 14px 0 18px; font: 400 clamp(44px, 5vw, 68px)/1.02 var(--serif); }
.contact-head h2 em { font-style: italic; color: var(--gold); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.field { display: grid; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field label { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.field .opt { margin-left: 6px; letter-spacing: .08em; color: var(--mist); text-transform: none; }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 2px;
  background: rgba(21, 23, 27, .7); color: var(--ivory); font: 400 16px/1.5 var(--sans);
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:hover, .field textarea:hover { border-color: rgba(199, 169, 88, .35); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--gold); background: rgba(21, 23, 27, .95); }
.field [aria-invalid="true"] { border-color: #D2553F; }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ts { min-height: 65px; }
.contact-send {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border: 1px solid var(--gold); border-radius: 2px;
  background: linear-gradient(180deg, rgba(199, 169, 88, .18), rgba(199, 169, 88, .06)); color: var(--gold-pale);
  font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.contact-send:hover { background: rgba(199, 169, 88, .28); color: var(--ivory); }
.contact-send:active { transform: translateY(1px); }
.contact-send[disabled] { opacity: .55; cursor: progress; }
.contact-status { min-height: 1.6em; margin: 0; color: var(--stone); font-size: 15px; }
.contact-status.err { color: #E8A08E; }
.contact-done { padding: 34px 30px; border: 1px solid var(--line-gold); background: rgba(21, 23, 27, .6); }
.contact-done h3 { margin: 0 0 8px; font: italic 400 30px/1.15 var(--serif); color: var(--gold-pale); }
.contact-done p { margin: 0; color: var(--stone); }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .contact-form { grid-template-columns: 1fr; } .contact-sec { padding: 96px 0 100px; } }
.contact-mail { margin-top: 18px; color: var(--stone); font-size: 15px; }
.contact-mail a { color: var(--gold-pale); text-decoration: underline; text-decoration-color: var(--line-gold); text-underline-offset: 4px; }
.contact-mail a:hover { color: var(--ivory); }

/* ---------- /approach/: the grand page ----------
   Ambient motion only (the rose's colour waves, slow light beams, drifting dust, one-shot entrances);
   nothing pins or takes over scrolling. Reduced motion keeps everything still and in place. */
.grand { position: relative; isolation: isolate; overflow: clip; min-height: max(760px, 100svh); display: grid; align-content: center; justify-items: center; gap: 8px; padding: 130px var(--gutter) 90px; text-align: center; border-bottom: 1px solid var(--line); }
.grand-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.grand-light .beams {
  position: absolute; left: 50%; top: 38%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(from 0deg, rgba(228, 211, 161, .07) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 14%, transparent 46%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 14%, transparent 46%);
}
.grand-light .dust {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #E4D3A1, transparent 60%), radial-gradient(1px 1px at 28% 64%, #E4D3A1, transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 18%, #F7F4EE, transparent 60%), radial-gradient(1px 1px at 61% 72%, #E4D3A1, transparent 60%),
    radial-gradient(2px 2px at 77% 30%, #E4D3A1, transparent 60%), radial-gradient(1px 1px at 88% 58%, #F7F4EE, transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 84%, #E4D3A1, transparent 60%), radial-gradient(1px 1px at 70% 12%, #F7F4EE, transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 46%, #E4D3A1, transparent 60%), radial-gradient(1px 1px at 6% 78%, #E4D3A1, transparent 60%);
}
.rose-grand { width: min(48vh, 500px, 78vw); margin: 0 auto 18px; }
.rose-grand::before { inset: -45%; }
.grand-copy { display: grid; justify-items: center; }
.grand .about-quote { margin: 14px 0 18px; font-size: clamp(50px, 7vw, 104px); }
.grand-lede { max-width: 30ch; margin: 0; font: italic 400 clamp(22px, 2.4vw, 30px)/1.35 var(--serif); color: var(--gold-pale); }
.grand .hero-link { margin-top: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .grand-light .beams { animation: beams-turn 240s linear infinite, beams-in 3s var(--ease-out) .8s backwards; }
  .grand-light .dust { animation: dust-drift 26s ease-in-out infinite alternate, beams-in 4s var(--ease-out) 1.4s backwards; }
  .rose-grand { animation: rose-light 2.6s var(--ease-out) .2s backwards; }
  .grand-copy > * { animation: rise 1.3s var(--ease-out) backwards; }
  .grand-copy > :nth-child(1) { animation-delay: 1.1s; }
  .grand-copy > :nth-child(2) { animation-delay: 1.3s; }
  .grand-copy > :nth-child(3) { animation-delay: 1.7s; }
  .grand-copy > :nth-child(4) { animation-delay: 2.2s; }
}
@keyframes beams-turn { to { transform: rotate(360deg); } }
@keyframes beams-in { from { opacity: 0; } }
@keyframes dust-drift { to { transform: translate3d(0, -50px, 0); } }
@keyframes rose-light { from { opacity: 0; transform: scale(.88); filter: brightness(.25) saturate(.4); } }

.grand-why { padding: 130px 0 100px; }
.grand-why-inner { max-width: 760px; }
.grand-why .about-philosophy { max-width: none; }
.grand-why .about-philosophy p { font-size: 19px; line-height: 1.85; }
.grand-why .about-philosophy p:first-child { font: 400 clamp(26px, 2.8vw, 34px)/1.45 var(--serif); color: var(--ivory); }

.grand-vows { padding: 40px 0 130px; }
.vows { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.vow {
  position: relative; isolation: isolate; overflow: hidden; padding: 0 30px 34px;
  border: 1px solid var(--line-gold); border-radius: 220px 220px 3px 3px / 170px 170px 3px 3px;
  background: linear-gradient(180deg, rgba(21, 23, 27, .4), rgba(8, 11, 13, .9));
}
.vow-glass {
  display: block; height: 220px; margin: 0 -30px 30px;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 46%, transparent 58%) no-repeat -160% 0 / 250% 100%,
    radial-gradient(120% 90% at 50% 100%, rgba(199, 169, 88, .45), transparent 60%),
    conic-gradient(from 200deg at 50% 110%, #1A2550, #2186D4, #6FCF8E, #E3B341, #DB7D33, #8E2F2A, #6B3FA0, #1A2550);
  opacity: .5; filter: saturate(.85);
  -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent);
}
.vow:nth-child(2) .vow-glass { filter: hue-rotate(60deg) saturate(.8); }
.vow:nth-child(3) .vow-glass { filter: hue-rotate(150deg) saturate(.8); }
.vow h3 { margin: 0 0 14px; font: 400 clamp(32px, 3vw, 42px)/1.05 var(--serif); }
.vow h3 em { font-style: italic; color: var(--gold); }
.vow p { margin: 0; color: var(--stone); font-size: 16px; line-height: 1.75; }
@media (prefers-reduced-motion: no-preference) {
  .js .vow.in .vow-glass { animation: glass-sweep 2.4s var(--ease-out) .3s both; }
  .js .vow:nth-child(2).in .vow-glass { animation-delay: .55s; }
  .js .vow:nth-child(3).in .vow-glass { animation-delay: .8s; }
  .vow:hover .vow-glass { opacity: .75; transition: opacity .6s var(--ease-out); }
}
@keyframes glass-sweep { from { background-position: -160% 0, 0 0, 0 0; opacity: .15; } to { background-position: 260% 0, 0 0, 0 0; opacity: .5; } }

.grand-ai { padding: 120px 0 40px; }
.grand-ai .approach-ai { max-width: 900px; margin: 0 auto; }
.grand-end { padding: 120px 0 140px; text-align: center; }
.grand-end h2 { margin: 0 0 48px; font: 400 clamp(40px, 5vw, 68px)/1.05 var(--serif); }
.grand-end h2 em { font-style: italic; color: var(--gold); }
.end-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; text-align: left; }
.end-card { position: relative; display: grid; gap: 8px; padding: 28px 26px; border: 1px solid var(--line); background: rgba(21, 23, 27, .5); transition: border-color .3s var(--ease-out), transform .4s var(--ease-out); }
.end-card:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.end-name { font: 400 28px/1.1 var(--serif); color: var(--ivory); }
.end-text { color: var(--stone); font-size: 15px; }

/* home: the doorway to /approach/ */
.grand-teaser { padding: 20px 0 130px; }
.teaser-arch {
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 14px;
  max-width: 820px; margin: 0 auto; padding: 130px clamp(24px, 5vw, 64px) 56px; text-align: center;
  border: 1px solid var(--line-gold); border-radius: 420px 420px 3px 3px / 300px 300px 3px 3px;
  background: radial-gradient(70% 55% at 50% 0%, rgba(199, 169, 88, .16), transparent 70%), rgba(8, 11, 13, .6);
  transition: border-color .4s var(--ease-out);
}
.teaser-arch:hover { border-color: rgba(199, 169, 88, .6); }
.teaser-rays {
  position: absolute; left: 50%; top: 0; z-index: -1; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
  background: repeating-conic-gradient(from 0deg, rgba(228, 211, 161, .08) 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 52%); mask: radial-gradient(circle, #000 0, transparent 52%);
  transition: opacity .6s var(--ease-out); opacity: .8;
}
.teaser-arch:hover .teaser-rays { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .teaser-rays { animation: beams-turn 200s linear infinite; } }
.teaser-title { font: 400 clamp(40px, 5.4vw, 72px)/1.02 var(--serif); color: var(--ivory); }
.teaser-title em { display: block; font-style: italic; color: var(--gold); }
.teaser-text { max-width: 46ch; color: var(--stone); font-size: 16px; line-height: 1.7; }
.teaser-arch .hero-link { margin-top: 18px; }

.site-nav a[aria-current="page"] { color: var(--gold-pale); }

@media (max-width: 1000px) {
  .vows, .end-links { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
  .grand { padding-top: 110px; min-height: 0; }
  .grand-why { padding: 90px 0 70px; }
  .vow-glass { height: 170px; }
  .teaser-arch { padding-top: 96px; border-radius: 260px 260px 3px 3px / 180px 180px 3px 3px; }
}
.grand-why .about-philosophy > p:first-child::first-letter { margin: 6px 14px 0 0; font: 500 116px/.8 var(--serif); }   /* two lines of the larger opening paragraph */

/* phones: the site has more than one page now, so the links stay, as a second header row */
@media (max-width: 760px) {
  .header-row { flex-wrap: wrap; height: auto; row-gap: 6px; padding-top: 16px; padding-bottom: 6px; }
  .site-nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 13px; }
  .site-nav > a:not(.button) { display: inline-block; padding: 8px 0; }
}