/* ===========================================================================
   SHIKA GROUP - master design system
   One stylesheet for the whole site. Mobile-first. Reduce-motion safe.

   THE IDEA
   A deep burgundy field with light in it. Antique gold. Warm ivory.

   Rothschild gravitas without the bank. LVMH restraint without the fashion
   house. Future-facing enough to own AI companies without reading as an AI
   startup. The weight comes from the ground being a real colour, not black:
   deep plum and burgundy, lit from inside, with the portfolio companies hung
   on it as framed assets rather than floating screenshots.

   THE TONAL LADDER RUNS DARK. Class names were kept from the earlier light
   systems so no page markup had to change, but they now mean:
     .paper   base plum field        (the default section)
     .paper-2 plum, one step lifted
     .paper-3 burgundy field         (the brand moment)
     .ink     deepest plum
     .ink-2   burgundy, deep
     .ink-3   deepest plum
     .ivory   the rare warm ivory section, used for breathing and for reading
   Do not assume .paper means light. It does not.

   Gold is legible as text on every ground here (5.4:1 and up), which the ivory
   system could never do. It is still used sparingly: hairlines, numbering,
   plates, one button.

   Replaced the burgundy-on-ivory system on 6 Sep 2026. Backups:
   shika.css.burgundy-bak, shika.css.cobalt-bak, shika.css.dark-bak.
   =========================================================================== */

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

:root {
  /* ---- The field. Deep, warm, and unmistakably a colour. Never black. ---- */
  --plum:       #210911;   /* the ground */
  --plum-lift:  #2E101A;   /* one step up, for alternation */
  --plum-deep:  #0F0206;   /* the deepest, for the footer */
  --burgundy:   #6E101F;   /* the brand field */
  --burgundy-2: #87202F;   /* lifted burgundy, panels and hover */
  --mat:        #431825;
  /* The hero field. Graded like the silk reference: deep in the folds, lit high
     right. Deliberately deeper than --burgundy so the framed work still reads
     against it; a flat brand-colour hero flattens the frames. */
  --stage:      #3A0810;
  --stage-top:  #2A050C;
  --stage-mid:  #4A0C18;
  --stage-deep: #24060C;
  --stage-bloom: rgba(142,28,42,0.88);
  --stage-ember: rgba(176,138,71,0.17);   /* the mat inside a frame */

  /* ---- Antique gold. Warm and aged, never yellow, never metallic. ---- */
  --gold:      #B08A47;
  --gold-lift: #C9A468;
  --gold-line: rgba(176,138,71,0.34);
  --gold-soft: rgba(176,138,71,0.10);

  /* ---- Warm ivory. The light. Never stark white. ---- */
  --ivory:     #F2EBE1;
  --ivory-mid: #C7B7AB;
  --ivory-dim: #9C8B84;
  --ivory-sec: #F6F1E9;   /* the ground of an .ivory section */

  /* ---- Type on ivory sections ---- */
  --on-light:     #241016;
  --on-light-mid: #5C4A50;
  --on-light-dim: #7B6A6F;

  /* ---- Hairlines ---- */
  --line:      rgba(242,235,225,0.13);
  --line-soft: rgba(242,235,225,0.08);

  /* ---- Shadow. Deep and warm. Nothing floats like an app card. ---- */
  --lift-1: 0 2px 8px rgba(0,0,0,0.30);
  --lift-2: 0 18px 44px -18px rgba(0,0,0,0.66), 0 2px 6px rgba(0,0,0,0.30);
  --lift-3: 0 40px 90px -30px rgba(0,0,0,0.82), 0 4px 12px rgba(0,0,0,0.34);

  /* ---- Text tokens. Redefined per ground. ---- */
  --text:     var(--ivory);
  --text-mid: var(--ivory-mid);
  --text-dim: var(--ivory-dim);

  --accent:      #C9A468;
  --accent-soft: rgba(176,138,71,0.10);

  /* ---- Atmosphere. Each portfolio company keeps its own colour. ---- */
  --atmos: #B08A47;

  /* ---- Fonts. Editorial and contemporary, paired with a plain grotesk. ---- */
  --f-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --f-ui:      'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Rhythm. More generous than before: the space is the gravitas. ---- */
  --gut:      clamp(1.5rem, 5.5vw, 4.5rem);
  --sec:      clamp(6.5rem, 15vw, 14rem);
  --sec-sm:   clamp(4rem, 9vw, 8rem);
  --maxw:     84rem;
  --maxw-wide:104rem;
  --maxw-nar: 46rem;

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

  --r-xs: 1px;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --radius: 3px; /* legacy alias */
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--plum); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.72;
  font-weight: 400;
  color: var(--text);
  background: var(--plum);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--plum); }

/* ============================ TYPE ============================ */
/* Instrument Serif: single weight, high contrast, contemporary editorial. It
   carries every display size on its proportions alone. Italic is used once a
   page at most, as emphasis, never as decoration. */

.d1, .d2, .d3, .d4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.008em;
  color: var(--ivory);
  text-wrap: balance;
}
.d1 { font-size: clamp(2.9rem, 6.6vw, 5.4rem); line-height: 1.0; }
.d2 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
.d3 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); line-height: 1.08; }
.d4 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); line-height: 1.2; }
/* Emphasis: gold roman by default. Italic only where it is explicitly asked
   for, and never for more than a few words. */
.d1 em, .d2 em, .d3 em, .d4 em { font-style: normal; color: var(--gold-lift); }
.d1 i, .d2 i, .d3 i, .d4 i { font-style: italic; color: var(--gold-lift); }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.34; letter-spacing: -0.002em; color: var(--text); }

/* Labels. Letter-spaced grotesk caps. No mono: mono reads as software. */
.label, .eyebrow {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow { display: inline-flex; align-items: center; gap: 1.1rem; }
.eyebrow::before { content: ''; width: 2.75rem; height: 1px; background: var(--gold); flex: none; opacity: 0.7; }
.label-accent { color: var(--accent); }

.lede {
  font-size: clamp(1.04rem, 1.6vw, 1.2rem);
  line-height: 1.78;
  color: var(--text-mid);
  max-width: 48ch;
  text-wrap: pretty;
}
.body-lg { font-size: clamp(1rem, 1.35vw, 1.07rem); line-height: 1.82; color: var(--text-mid); }
.muted   { color: var(--text-mid); }

/* ---- The field. Dark tones, with a single ivory escape. ---- */
.paper, .paper-2, .paper-3, .ink, .ink-2, .ink-3 {
  color: var(--ivory);
  --text: #F2EBE1; --text-mid: #C7B7AB; --text-dim: #9C8B84;
  --line: rgba(242,235,225,0.13); --line-soft: rgba(242,235,225,0.07);
  --accent: #C9A468;
}
.paper   { background: var(--plum); }
.paper-2 { background: var(--plum-lift); }
.paper-3 { background: var(--burgundy); }
.ink     { background: var(--plum-deep); }
.ink-2   { background: var(--burgundy); }
.ink-3   { background: var(--plum-deep); }

/* The one light ground. Used for breathing and for reading-heavy blocks. */
.ivory {
  background: var(--ivory-sec); color: var(--on-light);
  --text: #241016; --text-mid: #5C4A50; --text-dim: #7B6A6F;
  --line: #E0D5C8; --line-soft: #EDE5DA;
  --accent: #6E101F;
}
.ivory .d1, .ivory .d2, .ivory .d3, .ivory .d4 { color: var(--on-light); }
.ivory .label, .ivory .eyebrow { color: #836223; }
.ivory .eyebrow::before { background: var(--gold); opacity: 1; }

/* Grain. One inline SVG. On a deep field it stops the ground reading as flat
   fill and gives it the density of pigment. */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ivory.grain::after { opacity: 0.03; mix-blend-mode: multiply; }
.grain > * { position: relative; z-index: 2; }

/* ============================ LAYOUT ============================ */

.wrap      { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap-wide { width: 100%; max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gut); }
.wrap-nar  { width: 100%; max-width: var(--maxw-nar); margin: 0 auto; padding: 0 var(--gut); }
.sec       { padding: var(--sec) 0; }
.sec-sm    { padding: var(--sec-sm) 0; }
.rule      { height: 1px; background: var(--line); border: 0; }
.stack > * + * { margin-top: 1.15rem; }

.sec-head { display: grid; gap: 1.6rem; max-width: 56rem; }
.sec-head .lede { max-width: 52ch; }

.split { display: grid; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
@media (min-width: 900px) {
  .split    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split-40 { grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr); }
  .split-60 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr); }
}

.ruled { position: relative; }
/* The column grid is drawn in the ground colour, so it is invisible. That is
   deliberate, set by Maheshika on 7 Sep 2026: the rules divided the container
   into four equal columns while the content runs on a 4.5rem / 19rem / 1fr
   layout, so they lined up with nothing and read as an artifact. The structure
   is kept rather than deleted. To bring it back, put --line-soft back below,
   and align the lines to the content columns before you do. */
.ruled::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  max-width: var(--maxw); margin: 0 auto; left: 0; right: 0;
  background-image: linear-gradient(90deg, var(--plum-deep) 1px, transparent 1px);
  background-size: calc(100% / 4) 100%;
}
.ruled > * { position: relative; z-index: 1; }
@media (max-width: 700px) { .ruled::before { background-size: calc(100% / 2) 100%; } }

/* ============================ BUTTONS ============================ */
/* Primary: antique gold, plum type. Secondary: gold hairline, ivory type. */

.btn, .btn-line, .btn-arrow {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--f-ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; border: 1px solid transparent;
  transition: background .6s var(--ease), color .6s var(--ease),
              border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.btn, .btn-line { padding: 1.15rem 2.1rem; border-radius: var(--r-sm); }

.btn { background: var(--gold); color: var(--plum); }
.btn:hover { background: var(--gold-lift); }
.btn-line { background: transparent; color: var(--ivory); border-color: var(--gold-line); }
.btn-line:hover { border-color: var(--gold); color: var(--gold-lift); }

.ivory .btn { background: var(--burgundy); color: var(--ivory); }
.ivory .btn:hover { background: var(--burgundy-2); box-shadow: inset 0 -2px 0 0 var(--gold); }
.ivory .btn-line { color: var(--burgundy); border-color: rgba(74,22,38,0.35); }
.ivory .btn-line:hover { border-color: var(--gold); color: #8A6A2E; }

.btn-arrow {
  padding: 0.45rem 0; border-bottom: 1px solid var(--line); border-radius: 0;
  color: var(--text); letter-spacing: 0.14em;
}
.btn-arrow:hover { border-bottom-color: var(--gold); color: var(--gold-lift); }
.ivory .btn-arrow { color: var(--on-light); border-bottom-color: #E0D5C8; }
.ivory .btn-arrow:hover { color: #8A6A2E; border-bottom-color: var(--gold); }

.ar { transition: transform .6s var(--ease); }
.btn:hover .ar, .btn-line:hover .ar, .btn-arrow:hover .ar { transform: translateX(5px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-xs);
}

/* ============================ NAV ============================ */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background .7s var(--ease), border-color .7s var(--ease);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  height: 5.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* The wordmark. SHIKA in the serif, GROUP set small and wide, one gold rule
   between them as the only device. No crest, no monogram, no shield. */
.nav-mark { display: inline-flex; align-items: center; gap: 0.95rem; white-space: nowrap; color: var(--ivory); }
/* The two words share a baseline with each other; the pair is centred against
   the mark. One flex row cannot do both, hence the wrapper. */
.nav-type { display: inline-flex; align-items: baseline; gap: 1.15rem; }
/* The S mark. The supplied lockup is vertical, and at an 88px nav height its GROUP
   would set at about 4px, so the mark rides alongside the type wordmark instead of
   the whole lockup being shrunk into the bar. Swapped by CSS, not by script, so it
   stays correct when the nav sits on a light ground. */
.nav-logo {
  width: 2.35rem; height: 4.1rem; flex: none;
  background: url('/assets/img/brand/shika-mark-gold.png') center / contain no-repeat;
}
.nav.on-light .nav-logo { background-image: url('/assets/img/brand/shika-mark-burgundy.png'); }
.nav-mark .nm-1 {
  font-family: var(--f-display); font-size: 1.4rem; letter-spacing: 0.3em;
  text-transform: uppercase; line-height: 1;
}
.nav-mark .nm-2 {
  font-family: var(--f-ui); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.38em;
  text-transform: uppercase; color: var(--gold); position: relative; padding-left: 1.35rem;
}
.nav-mark .nm-2::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 0.8rem; height: 1px; background: var(--gold);
}
@media (max-width: 420px) { .nav-mark .nm-2 { display: none; } }

.nav-links { display: none; align-items: center; gap: 2.6rem; }
.nav-links a {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory-mid); position: relative; padding: 0.35rem 0;
  transition: color .5s var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--gold); transition: right .6s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-lift); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
.nav-cta { display: none; }

.nav.is-stuck {
  background: rgba(27,17,22,0.86);
  backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-bottom-color: var(--line-soft);
}
/* Over an ivory page head. Declared in HTML, never derived in JS, so the nav
   stays readable when the script is blocked. */
.nav.on-light .nav-mark { color: var(--on-light); }
.nav.on-light .nav-toggle { color: var(--on-light); }
.nav.on-light .nav-links a { color: var(--on-light-mid); }
.nav.on-light .nav-links a:hover, .nav.on-light .nav-links a[aria-current="page"] { color: var(--burgundy); }
.nav.on-light.is-stuck { background: rgba(246,241,233,0.92); border-bottom-color: #E0D5C8; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.8rem; background: none;
  border: 0; cursor: pointer; font-size: 0.68rem; color: var(--ivory); padding: 0.5rem 0;
  font-family: var(--f-ui); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
}
.nav-toggle .bars { display: block; width: 24px; height: 9px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .6s var(--ease);
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after  { bottom: 0; }
body.menu-open .nav-toggle .bars::before { transform: translateY(4px) rotate(45deg); }
body.menu-open .nav-toggle .bars::after  { transform: translateY(-4px) rotate(-45deg); }
body.menu-open .nav { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-open .nav-mark, body.menu-open .nav-toggle { color: var(--ivory); }

@media (min-width: 1000px) {
  .nav-links, .nav-cta { display: flex; }
  .nav-toggle { display: none; }
}

/* ---- Studio dropdown -------------------------------------------------
   Shows the six industries at the top of every page, because the breadth is
   part of the pitch. CSS only: :hover for pointers, :focus-within for
   keyboards. No JS, so it still works with the script blocked, and no
   aria-expanded we would have no way to keep truthful. The ::before strip
   bridges the gap between the trigger and the panel so the panel does not
   close as the pointer travels down to it. */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop::before {
  content: ''; position: absolute; top: 100%; left: -1rem; right: -1rem;
  height: 1.1rem; display: block;
}
.nav-menu {
  position: absolute; top: calc(100% + 1rem); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 15.5rem; padding: 0.55rem 0;
  background: var(--plum-deep);
  border: 1px solid var(--gold-line); border-radius: 3px;
  box-shadow: var(--lift-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 95;
}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-menu a {
  display: block; padding: 0.62rem 1.25rem; font-size: 0.84rem;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--ivory-mid); transition: color .25s var(--ease), background .25s var(--ease);
}
/* The parent rule draws a sliding underline on every nav link. Not in here. */
.nav-menu a::after { display: none; }
.nav-menu a:hover, .nav-menu a:focus-visible {
  color: var(--gold-lift); background: var(--gold-soft);
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none; }
}

.nav-drawer {
  position: fixed; inset: 0; z-index: 89; background: var(--plum-deep); color: var(--ivory);
  padding: 7.5rem var(--gut) 2.5rem; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-1rem);
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility .7s;
  overflow-y: auto; overscroll-behavior: contain;
}
body.menu-open .nav-drawer { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }
.nav-drawer a.dl {
  font-family: var(--f-display); color: var(--ivory);
  font-size: clamp(2.1rem, 9vw, 3.2rem); line-height: 1.26; letter-spacing: -0.004em;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft);
  transition: color .5s var(--ease);
}
.nav-drawer a.dl:hover { color: var(--gold-lift); }
.nav-drawer .dsub { display: grid; gap: 0.75rem; margin: 2.4rem 0 0; }
.nav-drawer .dsub a { font-size: 0.95rem; color: var(--ivory-mid); }
.nav-drawer .dsub a:hover { color: var(--gold-lift); }
.nav-drawer .dsub h4 {
  font-family: var(--f-ui); font-size: 0.63rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold); font-weight: 500;
}
.nav-drawer .btn { margin-top: 2.6rem; align-self: flex-start; }

/* ============================ THE STAGE (hero) ============================ */
/* A deep burgundy field lit from inside, and the work hung on it. */

.stage {
  position: relative; overflow: hidden;
  background: var(--stage); color: var(--ivory);
  padding: 9.5rem 0 var(--sec-sm);
}
@media (min-width: 900px) {
  .stage { min-height: 100svh; display: flex; align-items: center; padding: 12rem 0 7rem; }
}
/* The light in the field: a burgundy bloom high right, a gold ember low left,
   and a fine diagonal weave. Static. Nothing here moves. */
.stage-horizon {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(78% 62% at 72% 8%, var(--stage-bloom), transparent 68%),
    radial-gradient(52% 48% at 10% 96%, var(--stage-ember), transparent 70%),
    linear-gradient(180deg, var(--stage-top) 0%, var(--stage-mid) 55%, var(--stage-deep) 100%);
}
.stage-weave {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(104deg, transparent 0 70px, rgba(176,138,71,0.05) 70px 71px);
  -webkit-mask-image: radial-gradient(72% 62% at 62% 28%, #000, transparent);
          mask-image: radial-gradient(72% 62% at 62% 28%, #000, transparent);
}
.stage-in { position: relative; z-index: 3; width: 100%; }
.stage-grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 1000px) { .stage-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); } }
.stage-copy { display: grid; gap: 2rem; justify-items: start; max-width: 40rem; min-width: 0; }
.stage-copy h1 { color: var(--ivory); }

.rise { display: block; overflow: hidden; padding-bottom: 0.08em; }
.rise > span { display: block; }
.motion-ok .rise > span { transform: translate3d(0, 105%, 0); }
.motion-ok .stage-copy.in .rise > span { transform: none; transition: transform 1.5s var(--ease-out); }
.motion-ok .stage-copy.in .rise:nth-of-type(2) > span { transition-delay: .14s; }
.motion-ok .stage-copy.in .rise:nth-of-type(3) > span { transition-delay: .28s; }
.motion-ok .stage-copy.in .rise:nth-of-type(4) > span { transition-delay: .42s; }

/* ---- The register: what the group is, in numbers ---- */
.register {
  display: flex; flex-wrap: wrap; gap: clamp(2rem, 4.5vw, 4rem);
  width: 100%; margin-top: 0.75rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.register .n { font-family: var(--f-display); font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1; color: var(--gold-lift); }
.register .k {
  font-family: var(--f-ui); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--text-dim); margin-top: 0.7rem; display: block;
}

/* ==================== THE FRAMED ASSET ==================== */
/* A portfolio company is hung, not floated. A mat, a gold hairline inside the
   frame, and a museum plate underneath. The tilt is slight on purpose: enough
   to read as depth, not enough to read as a SaaS mockup. */

.gallery { position: relative; perspective: 2000px; perspective-origin: 54% 44%; height: clamp(24rem, 58vh, 36rem); }
.gallery-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-7deg) rotateX(3deg); }

.frame {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  transform: translate3d(0, 0, var(--z));
  background: var(--mat); padding: clamp(0.5rem, 0.9vw, 0.8rem);
  border: 1px solid var(--gold-line);
  box-shadow: var(--lift-3);
}
.frame::before {
  content: ''; position: absolute; inset: 0.28rem; border: 1px solid rgba(176,138,71,0.22);
  pointer-events: none; z-index: 2;
}
.frame img, .frame video { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top center; }
.plate {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.75rem 0.2rem 0.15rem;
}
.plate b {
  font-family: var(--f-display); font-weight: 400; font-size: 0.98rem; color: var(--ivory);
  letter-spacing: 0.01em;
}
.plate span {
  font-family: var(--f-ui); font-size: 0.54rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.ivory .frame { background: #EDE3D6; border-color: rgba(176,138,71,0.5); }
.ivory .plate b { color: var(--on-light); }

@media (max-width: 999px) {
  .gallery { perspective: none; height: auto; }
  .gallery-in {
    position: static; transform: none;
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding-bottom: 0.75rem; scrollbar-width: none;
    align-items: start;
  }
  .gallery-in::-webkit-scrollbar { display: none; }
  .frame { position: relative; left: auto; top: auto; width: auto; transform: none; scroll-snap-align: start; }
}

/* Legacy aliases from the previous systems. .depth/.frag are the same rail. */
.depth { position: relative; min-width: 0; }
.depth-in {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
  align-items: start; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: 0.75rem; scrollbar-width: none;
}
.depth-in::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .depth-in { grid-auto-columns: 33%; } }
.frag {
  position: relative; background: var(--mat); padding: 0.6rem;
  border: 1px solid var(--gold-line); box-shadow: var(--lift-2); scroll-snap-align: start;
}
.frag img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top center; }
.frag figcaption {
  padding: 0.7rem 0.2rem 0.1rem; font-family: var(--f-ui); font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}

.cue {
  display: none; align-items: center; gap: 0.9rem;
  font-family: var(--f-ui); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-dim); margin-top: 0.5rem;
}
.cue::after { content: ''; width: 4.5rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
@media (min-width: 900px) { .cue { display: inline-flex; } }

/* ============================ PROJECT CANVAS ============================ */
/* One company per section, hung on the field. Shika supplies the frame; the
   company supplies its own colour through --atmos and nothing else. */

.canvas { position: relative; padding: var(--sec) 0; overflow: hidden; }
.canvas-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.22;
  background: radial-gradient(44% 52% at var(--gx, 74%) 44%, var(--atmos), transparent 70%);
}
.ivory .canvas-glow, .canvas.ivory .canvas-glow { opacity: 0.10; }
.canvas > .wrap, .canvas > .wrap-wide { position: relative; z-index: 1; }

.canvas-grid { display: grid; gap: clamp(2.5rem, 5.5vw, 5.5rem); align-items: center; }
@media (min-width: 940px) {
  .canvas-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .canvas.flip .canvas-media { order: 2; }
}
.canvas-body { display: grid; gap: 1.5rem; justify-items: start; }
.canvas-body h2 a { transition: color .6s var(--ease); }
.canvas-body h2 a:hover { color: var(--gold-lift); }
.canvas-n {
  font-family: var(--f-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.28em;
  color: var(--accent); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.9rem;
}
.canvas-n::after { content: ''; width: 2.25rem; height: 1px; background: var(--gold); opacity: 0.6; }

/* The media is framed, exactly like the hero. */
.canvas-media {
  position: relative; display: block;
  background: var(--mat); padding: clamp(0.5rem, 0.9vw, 0.85rem);
  border: 1px solid var(--gold-line);
  box-shadow: var(--lift-2);
  transition: box-shadow 1.1s var(--ease-out), transform 1.1s var(--ease-out), border-color 1.1s var(--ease);
}
.canvas-media::before {
  content: ''; position: absolute; inset: 0.3rem; border: 1px solid rgba(176,138,71,0.2);
  pointer-events: none; z-index: 2;
}
.canvas-media img, .canvas-media video {
  display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top center;
  transition: transform 2s var(--ease-out);
}
a.canvas-media:hover { transform: translateY(-3px); box-shadow: var(--lift-3); border-color: var(--gold); }
a.canvas-media:hover img, a.canvas-media:hover video { transform: scale(1.025); }
/* The film is scenery inside the link, never a click target of its own. */
.canvas-media video { pointer-events: none; }
.ivory .canvas-media { background: #EDE3D6; border-color: rgba(176,138,71,0.5); }

/* ============================ TAGS ============================ */
/* Ownership labels are non-negotiable. Every project carries exactly one. */

.tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-ui); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.5rem 0.85rem; border-radius: var(--r-xs);
  border: 1px solid currentColor; white-space: nowrap;
}
.tag::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.tag-client { color: #E0A9B6; }
.tag-built  { color: #C9A468; }
.tag-demo   { color: #C7B7AB; }
.ivory .tag-client { color: #8A2740; }
.ivory .tag-built  { color: #836223; }
.ivory .tag-demo   { color: #5C4A50; }

/* ============================ WORK (legacy contract) ============================ */

.work { display: grid; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
@media (min-width: 940px) {
  .work { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .work.flip .work-media { order: 2; }
}
.work + .work { margin-top: var(--sec-sm); padding-top: var(--sec-sm); border-top: 1px solid var(--line); }
.work-media {
  position: relative; display: block;
  background: var(--mat); padding: clamp(0.5rem, 0.9vw, 0.8rem);
  border: 1px solid var(--gold-line); box-shadow: var(--lift-2);
  transition: box-shadow 1s var(--ease-out), transform 1s var(--ease-out), border-color 1s var(--ease);
}
.work-media img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top center; transition: transform 1.8s var(--ease-out); }
a.work-media:hover { transform: translateY(-3px); box-shadow: var(--lift-3); border-color: var(--gold); }
a.work-media:hover img { transform: scale(1.025); }
.ivory .work-media { background: #EDE3D6; border-color: rgba(176,138,71,0.5); }

.work-body { display: grid; gap: 1.35rem; justify-items: start; }
.work-meta { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.work-meta .dot { font-size: 0; line-height: 0; display: inline-flex; align-items: center; }
.work-meta .dot::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); display: block; }
.work-services { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.work-services li {
  list-style: none; font-family: var(--f-ui); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
}

.work-grid { display: grid; gap: clamp(2.5rem, 4.5vw, 4rem); }
@media (min-width: 820px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-card { display: grid; gap: 1rem; align-content: start; }
.work-card.is-wide { grid-column: 1 / -1; }
@media (min-width: 820px) { .work-card.is-wide .work-media img { aspect-ratio: 21/9; } }
.work-card[hidden] { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.filter {
  font-family: var(--f-ui); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; padding: 0.7rem 1.25rem; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--text-mid);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.filter:hover { border-color: var(--gold); color: var(--gold-lift); }
.filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--plum); }

/* ============================ THE AXIS ============================ */

.axis { display: grid; border-top: 1px solid var(--line); }
.axis-row {
  display: grid; gap: 0.7rem 3rem; padding: clamp(2rem, 3.6vw, 3rem) 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
  transition: background .6s var(--ease), padding-left .6s var(--ease);
}
@media (min-width: 860px) {
  .axis-row { grid-template-columns: 4.5rem 19rem minmax(0, 1fr); }
  .axis-row:hover { padding-left: 1.25rem; background: var(--gold-soft); }
}
.axis-n { font-family: var(--f-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.26em; color: var(--accent); }
.axis-row h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.18; letter-spacing: -0.004em; }
.axis-row p { color: var(--text-mid); font-size: 0.97rem; max-width: 56ch; }
a.axis-row h3 { transition: color .6s var(--ease); }
a.axis-row:hover h3 { color: var(--gold-lift); }
a.axis-row h3::after { content: ' \2192'; opacity: 0; transition: opacity .6s var(--ease); }
a.axis-row:hover h3::after { opacity: 1; }

/* ============================ THE DUO ============================ */

.duo { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo-half { padding: clamp(2.75rem, 5vw, 4.25rem) 0; display: grid; gap: 1.45rem; align-content: start; justify-items: start; }
@media (min-width: 900px) {
  .duo-half + .duo-half { border-left: 1px solid var(--line); padding-left: clamp(3rem, 5.5vw, 5.25rem); }
  .duo-half:first-child { padding-right: clamp(3rem, 5.5vw, 5.25rem); }
}
@media (max-width: 899px) { .duo-half + .duo-half { border-top: 1px solid var(--line); } }
.duo-half .lede { max-width: 44ch; }

/* ============================ THE RANGE BAND ============================ */
/* Static. Nothing on this site moves for the sake of moving. */

.band { border-block: 1px solid var(--line); padding: clamp(2rem, 3.4vw, 2.75rem) 0; overflow: hidden; }
.band-track {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.7rem 0; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
}
.band-track span {
  font-family: var(--f-display); font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  letter-spacing: 0.012em; padding: 0 1.3rem; white-space: nowrap; color: var(--text-mid);
  display: inline-flex; align-items: center;
}
.band-track span::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); margin-left: 1.3rem; }
.band-track span:last-child::after { display: none; }

/* ============================ CARDS / LISTS ============================ */

.cards { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); }
@media (min-width: 720px)  { .cards-2, .cards-3, .cards-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1040px) { .cards-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.card {
  padding: clamp(1.9rem, 3vw, 2.75rem); border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(242,235,225,0.028);
  display: grid; gap: 0.95rem; align-content: start;
  transition: border-color .6s var(--ease), background .6s var(--ease);
}
a.card:hover { border-color: var(--gold-line); background: rgba(176,138,71,0.055); }
.card h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.card p  { font-size: 0.96rem; color: var(--text-mid); line-height: 1.78; }
.card .label { margin-bottom: 0.2rem; }
.ivory .card { background: #FBF7F0; border-color: #E0D5C8; }
.ivory a.card:hover { border-color: var(--gold); background: #FFFCF7; }

.steps { display: grid; gap: 0; }
.step { display: grid; gap: 0.7rem 2.5rem; padding: clamp(2rem, 3.4vw, 2.75rem) 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .step { grid-template-columns: 4rem 18rem minmax(0, 1fr); align-items: baseline; } }
.step-n { font-family: var(--f-ui); font-size: 0.68rem; font-weight: 500; color: var(--accent); letter-spacing: 0.26em; }
.step h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.18; }
.step p { color: var(--text-mid); font-size: 0.96rem; max-width: 54ch; }

.messy { display: grid; gap: 0; margin: 0; list-style: none; }
.messy li {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.56; letter-spacing: -0.002em;
  color: var(--text-mid); padding: 0.28rem 0; transition: color .6s var(--ease);
}
.messy li:hover { color: var(--gold-lift); }

.stats { display: grid; gap: 2.25rem; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
.stat .n { font-family: var(--f-display); font-size: clamp(2.4rem, 4.2vw, 3.2rem); line-height: 1; color: var(--gold-lift); }
.stat .k { font-family: var(--f-ui); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); margin-top: 0.75rem; display: block; }

.facts { display: grid; gap: 0; }
.fact { display: grid; gap: 0.3rem 2rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.facts .fact:last-of-type { border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .fact { grid-template-columns: 11rem minmax(0, 1fr); } }
.fact dt { font-family: var(--f-ui); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.fact dd { font-size: 0.98rem; color: var(--text-mid); }

.prose { display: grid; gap: 1.35rem; max-width: 44rem; }
.prose p { color: var(--text-mid); line-height: 1.9; text-wrap: pretty; }
.prose ul { display: grid; gap: 0.75rem; padding-left: 1.15rem; color: var(--text-mid); }
.prose li { line-height: 1.82; }
.prose strong { color: var(--text); font-weight: 600; }

.chapter { display: grid; gap: 1.6rem; padding: var(--sec-sm) 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .chapter { grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; } }
.chapter-h { display: grid; gap: 0.8rem; align-content: start; }

figure.shot { display: grid; gap: 0.9rem; margin: 0; }
figure.shot img {
  width: 100%; height: auto; background: var(--mat); padding: clamp(0.4rem, 0.7vw, 0.7rem);
  border: 1px solid var(--gold-line); box-shadow: var(--lift-2);
}
figure.shot figcaption { font-family: var(--f-ui); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.shots-2 { display: grid; gap: 1.75rem; }
@media (min-width: 780px) { .shots-2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.shot-phone img { max-width: 21rem; margin-inline: auto; }
.shots-lead { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); align-items: end; }
@media (min-width: 780px) { .shots-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 0.32fr); } }
.shots-lead .shot-phone { justify-self: center; }
.shots-lead .shot-phone img { max-width: 13rem; }
.shots-lead .shot-phone figcaption { max-width: 20ch; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center;
  font-family: var(--f-ui); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
}
.crumbs a, .crumbs span { color: var(--text-dim); transition: color .5s; }
.crumbs a:hover { color: var(--gold-lift); }

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; padding: 1.7rem 2.5rem 1.7rem 0; position: relative;
  font-family: var(--f-display); font-weight: 400; font-size: clamp(1.15rem, 1.9vw, 1.45rem);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--f-ui); font-size: 1.05rem; color: var(--gold);
}
.acc details[open] summary::after { content: '\2013'; }
.acc .acc-body { padding: 0 0 1.8rem; color: var(--text-mid); max-width: 60ch; line-height: 1.88; }

/* ============================ PHEAD ============================ */

.phead {
  padding: 10rem 0 var(--sec-sm); position: relative; overflow: hidden;
  background: var(--plum);
}
@media (min-width: 900px) { .phead { padding: 13rem 0 var(--sec-sm); } }
.phead-in { display: grid; gap: 1.8rem; max-width: 58rem; justify-items: start; position: relative; z-index: 1; }
.phead.ivory { background: var(--ivory-sec); }
.phead-horizon {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(64% 54% at 76% 4%, rgba(142,28,42,0.5), transparent 68%),
    radial-gradient(44% 42% at 8% 96%, rgba(176,138,71,0.10), transparent 70%);
}
.phead.ivory .phead-horizon { background: radial-gradient(50% 50% at 78% 8%, rgba(176,138,71,0.12), transparent 70%); }
.phead-grid { display: grid; gap: clamp(2.75rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 980px) { .phead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); } }
.phead-grid .phead-in { max-width: 40rem; }
.phead-art { position: relative; width: 100%; max-width: 17rem; justify-self: start; }
@media (min-width: 980px) { .phead-art { justify-self: center; } }
.phead-art img {
  width: 100%; height: auto; background: var(--mat); padding: 0.6rem;
  border: 1px solid var(--gold-line); box-shadow: var(--lift-3);
}

/* ---- Salon film ------------------------------------------------------
   Carried over from the retired salon home page. The phone frame holds the
   portrait clip; the band holds the landscape nail macro. Both are decorative,
   so both are aria-hidden and both fall back to a poster image. Under
   reduce-motion the videos are hidden outright and the poster is what shows,
   which is why the poster is a real screenshot and not a black frame. */
.phone-frame {
  position: relative; width: 100%; max-width: 16rem; margin-inline: auto;
  aspect-ratio: 9 / 19.2; background: var(--plum-deep);
  border-radius: 2.4rem; padding: 0.6rem;
  box-shadow: var(--lift-3), 0 0 0 1px var(--gold-line) inset,
              0 30px 70px -30px rgba(176,138,71,0.30);
}
.phone-frame .notch {
  position: absolute; top: 0.72rem; left: 50%; transform: translateX(-50%);
  width: 4.6rem; height: 1.05rem; background: var(--plum-deep);
  border-radius: 100px; z-index: 3;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 1.9rem; overflow: hidden; background: var(--plum);
}
.phone-screen video, .phone-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.motion-ok .floaty { animation: floaty 7s ease-in-out infinite; }

/* The nail macro, as one restrained strip rather than a full-bleed takeover. */
.film-band {
  position: relative; width: 100%; overflow: hidden;
  height: clamp(13rem, 30vw, 22rem);
  border-block: 1px solid var(--gold-line);
  background: var(--plum);
}
.film-band video, .film-band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.film-band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--plum) 0%, rgba(33,9,17,0.20) 42%, rgba(33,9,17,0) 70%);
}
.film-band .film-cap {
  position: absolute; left: var(--gut); bottom: clamp(1.25rem, 3vw, 2rem); z-index: 2;
  max-width: 22ch; color: var(--ivory);
  font-family: var(--f-display); font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  line-height: 1.24; letter-spacing: -0.015em;
}

@media (prefers-reduced-motion: reduce) {
  .motion-ok .floaty { animation: none; }
  .phone-screen video, .film-band video { display: none; }
}

/* ============================ FORM ============================ */
/* The email route, offered as an equal alternative above the form rather than
   buried under it. Some people will never fill in a form and that is fine. */
.or-email {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem; color: var(--text-mid);
}
.or-email a {
  color: var(--gold-lift); border-bottom: 1px solid var(--gold-line);
  padding-bottom: 1px; transition: color .25s var(--ease), border-color .25s var(--ease);
}
.or-email a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }



.form { display: grid; gap: 2rem; }
.field { display: grid; gap: 0.65rem; }
.field > label { font-family: var(--f-ui); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.field .hint { font-size: 0.85rem; color: var(--text-dim); line-height: 1.65; }
.field input, .field textarea, .field select {
  width: 100%; padding: 1.05rem 1.2rem; border-radius: var(--r-sm);
  background: rgba(242,235,225,0.045); border: 1px solid var(--line);
  color: var(--text); font-size: 1rem;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.75; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); background: rgba(242,235,225,0.07);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); opacity: 0.75; }
.field select option { background: var(--plum-lift); color: var(--ivory); }
.ivory .field > label { color: #8A6A2E; }
.ivory .field input, .ivory .field textarea, .ivory .field select { background: #FBF7F0; border-color: #E0D5C8; color: var(--on-light); }
.field-row { display: grid; gap: 2rem; }
@media (min-width: 700px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.86rem; color: var(--text-dim); line-height: 1.75; max-width: 52ch; }
.form-status { font-size: 0.93rem; padding: 1.1rem 1.3rem; border-radius: var(--r-sm); border: 1px solid var(--gold-line); background: rgba(176,138,71,0.07); }
.fieldset { display: grid; gap: 2rem; padding: 0; border: 0; margin: 0; }
.fieldset > legend { font-family: var(--f-ui); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); padding: 0 0 0.7rem; }
.drop { border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 1.5rem; display: grid; gap: 0.8rem; background: rgba(242,235,225,0.03); }
.drop input[type="file"] { font-size: 0.88rem; padding: 0; border: 0; background: none; }
.file-list { display: grid; gap: 0.35rem; font-size: 0.87rem; color: var(--text-mid); }
.done { display: none; }
.form-sent .done { display: grid; gap: 1.3rem; justify-items: start; }
.form-sent .form { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: block; font-family: var(--f-ui); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; padding: 0.8rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--text-mid);
  background: transparent; transition: all .5s var(--ease);
}
.chip input:hover + span { border-color: var(--gold-line); color: var(--gold-lift); }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--plum); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================ CTA BAND ============================ */
/* The burgundy full-width moment. Class name kept from the cobalt system. */

.cta-blue {
  background: var(--burgundy); color: var(--ivory); position: relative; overflow: hidden;
  --line: rgba(242,235,225,0.2); --line-soft: rgba(242,235,225,0.1);
  --text: #F2EBE1; --text-mid: rgba(242,235,225,0.82); --text-dim: rgba(242,235,225,0.64);
  --accent: #C9A468;
}
.cta-blue::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 82% 12%, rgba(176,138,71,0.16), transparent 68%);
}
.cta-blue .btn { background: var(--gold); color: var(--plum); }
.cta-blue .btn:hover { background: var(--gold-lift); }
.cta-blue .btn-line { color: var(--ivory); border-color: rgba(242,235,225,0.34); }
.cta-blue .btn-line:hover { border-color: var(--gold-lift); color: var(--gold-lift); }
.cta-inner { display: grid; gap: 2.3rem; justify-items: start; max-width: 48rem; position: relative; z-index: 1; }

/* ============================ FOOTER ============================ */

.foot {
  background: var(--plum-deep); color: var(--ivory); padding: var(--sec-sm) 0 3rem;
  --line: rgba(242,235,225,0.13); --line-soft: rgba(242,235,225,0.07);
}
.foot a { color: var(--ivory-mid); transition: color .5s var(--ease); }
.foot a:hover { color: var(--gold-lift); }
.foot-top { display: grid; gap: clamp(2.75rem, 5vw, 4.5rem); }
@media (min-width: 880px) { .foot-top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.57fr)); } }
.foot-col { display: grid; gap: 0.8rem; align-content: start; }
.foot-col h2 {
  font-family: var(--f-ui); font-size: 0.61rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 0.4rem; line-height: 1.4;
}
.foot-col a { font-size: 0.93rem; }
.foot-mark { display: inline-flex; align-items: baseline; gap: 1.25rem; color: var(--ivory); }
.foot-mark .nm-1 { font-family: var(--f-display); font-size: 1.55rem; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1; }
.foot-mark .nm-2 {
  font-family: var(--f-ui); font-size: 0.57rem; font-weight: 500; letter-spacing: 0.38em;
  text-transform: uppercase; color: var(--gold); position: relative; padding-left: 1.35rem;
}
.foot-mark .nm-2::before { content: ''; position: absolute; left: 0; top: 50%; width: 0.8rem; height: 1px; background: var(--gold); }
/* The footer is the signature close, and it has the vertical room the nav does not,
   so it carries the full lockup. */
.foot-logo { display: block; width: auto; height: 6.5rem; margin-bottom: 1.15rem; }
.foot-note { color: var(--ivory-dim); font-size: 0.9rem; max-width: 34ch; line-height: 1.85; }
.foot-base {
  margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 2.2rem;
  border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap;
  gap: 1rem 2rem; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: var(--ivory-dim);
}
.foot-base a { font-size: 0.78rem; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ============================ MOTION ============================ */
/* Slow, deliberate, and entirely optional. Content is visible by default: the
   hidden start state is opted into only when JS runs AND motion is welcome. */

.motion-ok .reveal { opacity: 0; transform: translate3d(0, 16px, 0); }
.motion-ok .reveal.in { opacity: 1; transform: none; transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out); }
.motion-ok .reveal-d1.in { transition-delay: .13s; }
.motion-ok .reveal-d2.in { transition-delay: .26s; }
.motion-ok .reveal-d3.in { transition-delay: .39s; }

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

/* ============================ UTILITIES ============================ */

.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; }
.skip { position: absolute; top: -100%; left: var(--gut); z-index: 200; background: var(--gold); color: var(--plum); padding: 0.9rem 1.3rem; border-radius: 0 0 var(--r-sm) var(--r-sm); }
.skip:focus { top: 0; }
.center { text-align: center; justify-items: center; }
.nowrap { white-space: nowrap; }
.accent { color: var(--gold-lift); }
.gold   { color: var(--gold); }
.cyan   { color: var(--gold-lift); }  /* legacy alias */

/* ============================ THE TRIAD ============================ */

.triad { display: grid; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .triad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.triad-item { padding: clamp(2.4rem, 4.5vw, 3.5rem) 0; display: grid; gap: 1rem; align-content: start; justify-items: start; }
@media (min-width: 820px) {
  .triad-item + .triad-item { border-left: 1px solid var(--line); padding-left: clamp(2.5rem, 4.5vw, 3.75rem); }
  .triad-item:first-child { padding-right: clamp(2.5rem, 4.5vw, 3.75rem); }
}
@media (max-width: 819px) { .triad-item + .triad-item { border-top: 1px solid var(--line); } }
.triad-item .n {
  font-family: var(--f-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.26em;
  color: var(--gold); display: inline-flex; align-items: center; gap: 0.85rem;
}
.triad-item .n::after { content: ''; width: 1.75rem; height: 1px; background: var(--gold); opacity: 0.6; }
.triad-item h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.08; letter-spacing: -0.004em;
  color: var(--ivory);
}
.ivory .triad-item h3 { color: var(--on-light); }
.triad-item p { color: var(--text-mid); font-size: 0.97rem; max-width: 32ch; }

/* ============================ TICK LIST ============================ */
/* Block, not grid. A grid list item turns every raw text node into its own
   grid cell, which stacks the copy one word per line. The marker is a short
   gold rule drawn with a pseudo-element: no glyph to mangle. */

.ticks { display: grid; gap: 0; margin: 0; list-style: none; }
.ticks li {
  position: relative; padding: 1.15rem 0 1.15rem 2.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.99rem; color: var(--text-mid); line-height: 1.78;
}
.ticks li:first-child { border-top: 1px solid var(--line); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 1.95rem; width: 1.1rem; height: 1px; background: var(--gold); }
.ticks strong { color: var(--text); font-weight: 600; }