/* =========================================================================
   Tectum Investments LLC — design system
   -------------------------------------------------------------------------
   Concept: "tectum" is Latin for roof. The firm's craft is the capital
   stack. So every layout device here is a horizontal stratum sitting on a
   datum line: full-width bands, hairline separated, tagged on a left rail.
   No cards. The single bold element is the capital-stack figure in the
   hero, which is the only thing on the site that animates.

   The palette carries no colour at all: neutral charcoal, cool zinc, and a
   graphite accent. That is the point. The wordmark is pure black and every
   photograph is greyscale, so a colour accent was the one thing on the page
   not speaking the brand's own language. Emphasis is carried by weight, rules
   and space. It is also, by construction, nothing like the navy + warm cream
   of beovest.com, the gold + white of wealthstonellc.com, or the black + tan
   of animacreators.com.
   ========================================================================= */

:root {
  /* ground */
  --ink:        #16191A;   /* dark bands, body text */
  --ink-2:      #212527;   /* lifted dark */
  --ink-3:      #2E3335;   /* hairlines on dark */
  --paper:      #FFFFFF;
  --zinc:       #ECEDEB;   /* cool light band */
  --zinc-2:     #E0E2E0;

  /* Accent. Monochrome on purpose: the wordmark is pure black and every
     photograph is greyscale, so a colour accent was the one thing on the page
     not speaking the brand's own language. Emphasis is carried by weight,
     rules and space instead. */
  --accent:      #2B3133;  /* rails, links, ticks on light */
  --accent-deep: #16191A;  /* buttons, and the hover state */
  --accent-lift: #B9BEC0;  /* graphic accent on dark: ticks, bars, rules */
  --accent-text: #D2D6D8;  /* small TEXT on dark */

  /* text */
  --muted:        rgba(19, 26, 27, 0.64);
  --faint:        rgba(19, 26, 27, 0.60);   /* 0.44 measured 2.9:1 on white */
  --line:         rgba(19, 26, 27, 0.14);
  --line-soft:    rgba(19, 26, 27, 0.08);
  --on-dark:      #E7EBE8;
  --on-dark-dim:  rgba(231, 235, 232, 0.68);
  --on-dark-faint:rgba(231, 235, 232, 0.60); /* 0.42 measured 3.4:1 on ink */
  --line-dark:    rgba(231, 235, 232, 0.16);

  /* type */
  --display: "Barlow Condensed", "Arial Narrow", Haettenschweiler, sans-serif;
  --sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* metrics */
  --maxw:     1280px;
  --measure:  66ch;
  --gutter:   clamp(20px, 5vw, 60px);
  --header-h: 76px;
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The header is fixed, so an anchor jump lands the target under it. The
   disclosures footnote links depend on this. */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible, .hero :focus-visible, .site-foot :focus-visible {
  outline-color: var(--accent-lift);
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--on-dark);
  padding: 10px 16px; font-size: 14px;
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--full { max-width: 1560px; }

.band { padding-block: clamp(56px, 7.5vw, 116px); }
.band--tight { padding-block: clamp(40px, 5vw, 72px); }
.band--paper { background: var(--paper); }
.band--zinc  { background: var(--zinc); }
.band--ink   { background: var(--ink); color: var(--on-dark); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--on-dark); }

/* a datum is a hairline that carries meaning: it marks where one stratum
   ends and the next begins. */
.datum { border-top: 1px solid var(--line); }
.band--ink .datum, .datum--dark, .on-dark .datum { border-top-color: var(--line-dark); }

/* ----------------------------------------------------------------- type */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.005em; }

.display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.d-1 { font-size: clamp(46px, 7.6vw, 118px); line-height: 0.9; }
.d-2 { font-size: clamp(34px, 4.6vw, 62px); }
.d-3 { font-size: clamp(27px, 3vw, 40px); line-height: 1.0; }

h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0; }

p { margin-bottom: 1.05em; }
p:last-child { margin-bottom: 0; }
.measure { max-width: var(--measure); }

.lead {
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}
.band--ink .lead, .on-dark .lead, .hero .lead, .site-foot .lead { color: var(--on-dark-dim); }

.note { font-size: 14.5px; line-height: 1.55; color: var(--faint); }
.band--ink .note, .on-dark .note, .hero .note, .site-foot .note { color: var(--on-dark-faint); }

/* The rail is the section's tag on the datum: a tick plus a name. Sentence
   case on purpose — this site has no tracked-out capitals anywhere. */
.rail {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; font-weight: 600;
  color: var(--accent);
  margin-bottom: 26px;
}
.rail::before {
  content: ""; flex: none;
  width: 26px; height: 1px; margin-bottom: 5px;
  background: currentColor;
}
.band--ink .rail, .on-dark .rail, .hero .rail, .site-foot .rail { color: var(--accent-text); }

/* -------------------------------------------------------------- actions */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px;
  font-family: var(--display);
  font-size: 19px; font-weight: 600; letter-spacing: 0.005em;
  background: var(--accent-deep); color: var(--paper);
  border: 1px solid var(--accent-deep);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
/* An ink button disappears on an ink band, so it inverts there. */
.band--ink .btn, .on-dark .btn, .hero .btn {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.band--ink .btn:hover, .on-dark .btn:hover, .hero .btn:hover {
  background: var(--zinc); border-color: var(--zinc);
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.band--ink .btn--ghost, .on-dark .btn--ghost { color: var(--on-dark); border-color: var(--line-dark); }
.band--ink .btn--ghost:hover, .on-dark .btn--ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* an inline link that reads as a link without an arrow bolted on */
.txtlink {
  display: inline-block;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid rgba(43, 49, 51, 0.38);
  padding-bottom: 1px;
  transition: border-color .18s var(--ease);
}
.txtlink:hover { border-bottom-color: var(--accent); }
.band--ink .txtlink, .on-dark .txtlink, .hero .txtlink, .site-foot .txtlink {
  color: var(--accent-text);
  border-bottom-color: rgba(185, 190, 192, 0.45);
}
.band--ink .txtlink:hover, .on-dark .txtlink:hover, .hero .txtlink:hover, .site-foot .txtlink:hover { border-bottom-color: var(--accent-text); }

/* --------------------------------------------------------------- header */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head__in {
  width: 100%; max-width: 1560px; margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; flex: none; padding-block: 8px; }
.brand img { height: 30px; width: auto; }
.brand__light { display: block; }
.brand__dark  { display: none; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
.nav a {
  font-size: 15.5px; font-weight: 400;
  color: rgba(231, 235, 232, 0.88);
  padding-block: 11px;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover { color: var(--on-dark); }
.nav a[aria-current="page"] { color: var(--on-dark); border-bottom-color: var(--accent-lift); }

/* solid state, set by JS once the hero image has scrolled past */
.site-head.is-solid {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line);
}
.site-head.is-solid .brand__light { display: none; }
.site-head.is-solid .brand__dark  { display: block; }
.site-head.is-solid .nav a { color: var(--muted); }
.site-head.is-solid .nav a:hover { color: var(--ink); }
.site-head.is-solid .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.site-head.is-solid .navbtn__bar { background: var(--ink); }

/* mobile trigger */
.navbtn { display: none; width: 40px; height: 40px; position: relative; margin-right: -8px; }
.navbtn__bar {
  position: absolute; left: 8px; width: 24px; height: 1.5px;
  background: var(--on-dark); transition: transform .25s var(--ease), opacity .2s;
}
.navbtn__bar:nth-child(1) { top: 15px; }
.navbtn__bar:nth-child(2) { top: 23px; }

.navpanel {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  padding: calc(var(--header-h) + 26px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.navpanel a {
  font-family: var(--display); font-size: 40px; font-weight: 600;
  color: var(--on-dark);
  padding-block: 12px;
  border-bottom: 1px solid var(--line-dark);
}
body.nav-open .navpanel { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
body.nav-open .navbtn__bar:nth-child(1) { top: 19px; transform: rotate(45deg); }
body.nav-open .navbtn__bar:nth-child(2) { top: 19px; transform: rotate(-45deg); }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: clamp(620px, 96vh, 940px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}
.hero--short { min-height: clamp(440px, 66vh, 640px); }

.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* left, so the headline holds */
    linear-gradient(100deg, rgba(22,25,26,.90) 0%, rgba(22,25,26,.60) 30%, rgba(22,25,26,.16) 62%, rgba(22,25,26,.02) 100%),
    /* bottom right, so the stack figure and its caption hold: they sit over
       the brightest wedge of the photograph */
    radial-gradient(78% 66% at 82% 82%, rgba(22,25,26,.86) 0%, rgba(22,25,26,.34) 66%, rgba(22,25,26,0) 100%),
    linear-gradient(to top, rgba(22,25,26,.90) 0%, rgba(22,25,26,.62) 20%, rgba(22,25,26,.24) 42%, rgba(22,25,26,0) 62%),
    /* top, so the nav holds over a bright frame */
    linear-gradient(to bottom, rgba(22,25,26,.80) 0%, rgba(22,25,26,.34) 11%, rgba(22,25,26,0) 28%),
    /* and a soft pool under the headline block, which on some frames sits
       over the brightest part of the picture */
    radial-gradient(120% 95% at 6% 76%, rgba(22,25,26,.70) 0%, rgba(22,25,26,0) 60%);
}

/* A short hero carries its headline high on the left over whatever the frame
   happens to be doing there, so it gets its own heavier wash. Measured, not
   eyeballed: see the contrast probe in the build notes. */
.hero--short .hero__media::after {
  background:
    linear-gradient(98deg, rgba(22,25,26,.93) 0%, rgba(22,25,26,.82) 30%, rgba(22,25,26,.46) 58%, rgba(22,25,26,.12) 100%),
    linear-gradient(to bottom, rgba(22,25,26,.90) 0%, rgba(22,25,26,.54) 11%, rgba(22,25,26,.16) 30%, rgba(22,25,26,.30) 100%);
}

.hero__in {
  position: relative; z-index: 2;
  width: 100%; max-width: 1560px; margin-inline: auto;
  padding: calc(var(--header-h) + clamp(56px, 9vw, 120px)) var(--gutter) clamp(48px, 6vw, 84px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(36px, 5vw, 76px); align-items: end;
}
.hero--short .hero__in { grid-template-columns: minmax(0, 1fr); }

.hero__title { margin-bottom: 26px; max-width: 15ch; }
.hero__lead { max-width: 46ch; margin-bottom: 32px; color: var(--on-dark-dim); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }

/* ------------------------------------------------------- capital stack */
/* The one bold element on the site. Bar width encodes each layer's share
   of a typical stack; the full-width crown above it is Tectum. It draws
   itself once, on load, and nothing else on the site moves. */
.stack { border-top: 1px solid var(--line-dark); padding-top: 20px; }
.stack__row {
  display: grid; grid-template-columns: 136px minmax(0, 1fr);
  gap: 18px; align-items: center;
  padding-block: 9px;
}
.stack__label {
  font-size: 14.5px; line-height: 1.35;
  color: rgba(231, 235, 232, 0.82);
  text-align: right;
}
.stack__bar {
  height: 15px;
  background: var(--tier, var(--accent-lift));
  width: var(--w, 100%);
  transform-origin: left center;
}
.stack__row--crown { padding-bottom: 14px; }
.stack__row--crown .stack__label { color: var(--on-dark); font-weight: 600; }
.stack__row--crown .stack__bar { height: 24px; background: var(--on-dark); }
.stack__gap { height: 10px; }
/* "The structure" is a header over the four layers, not a layer itself: a
   label plus a rule across the bar column, so the diagram reads Tectum, then
   the structure, then the parts it is made of. */
.stack__group {
  display: grid; grid-template-columns: 136px minmax(0, 1fr);
  gap: 18px; align-items: center;
  margin-bottom: 10px;
}
.stack__group span:first-child {
  font-size: 13.5px; text-align: right;
  color: var(--accent-text);
}
.stack__group span:last-child { height: 1px; background: rgba(231, 235, 232, 0.30); }
.stack__cap {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  font-size: 15px; line-height: 1.55; color: var(--on-dark-dim);
  max-width: 46ch;
}

/* The one orchestrated moment: the bars sweep out from the datum, once, on
   load. Written as an explicit scaleX rather than transitioning a custom
   property inside transform(), which is the harder thing to reason about.
   Verified by listening for transitionstart/transitionend, not by eye. */
@media (prefers-reduced-motion: no-preference) {
  .js .stack__bar { transform: scaleX(0); transition: transform .62s var(--ease); }
  .js .stack.is-drawn .stack__bar { transform: scaleX(1); }
  /* Delay comes from the bar's own --d, not from nth-child: inserting one
     element into the figure silently reshuffled positional selectors and left
     the bottom bar with no delay. */
  .js .stack .stack__bar { transition-delay: var(--d, 0s); }
}

/* --------------------------------------------------------- strata rows */
/* Content that would otherwise become a grid of identical cards is set as
   full-width strata instead: label left, substance right, one hairline
   between each. */
.strata { border-top: 1px solid var(--line); }
.band--ink .strata, .strata--dark, .on-dark .strata { border-top-color: var(--line-dark); }

.stratum {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 64px);
  padding-block: clamp(30px, 3.4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.band--ink .stratum, .strata--dark .stratum, .on-dark .stratum { border-bottom-color: var(--line-dark); }
.stratum__head { position: relative; }
.stratum__title { font-family: var(--display); font-size: clamp(26px, 2.7vw, 38px); font-weight: 600; line-height: 1.0; }
.stratum__tick { display: block; width: 34px; height: 2px; background: var(--accent); margin-bottom: 16px; }
.band--ink .stratum__tick, .strata--dark .stratum__tick, .on-dark .stratum__tick { background: var(--accent-lift); }
.stratum__body > p { max-width: var(--measure); }

/* a plain hairline list: one fact per line, nothing decorating it */
.rows { border-top: 1px solid var(--line); }
.band--ink .rows, .on-dark .rows, .site-foot .rows { border-top-color: var(--line-dark); }
.rows li {
  list-style: none;
  padding-block: clamp(15px, 1.6vw, 22px);
  border-bottom: 1px solid var(--line);
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.45;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
}
.band--ink .rows li, .on-dark .rows li, .site-foot .rows li { border-bottom-color: var(--line-dark); }
.rows li b { font-weight: 600; }
.rows li span { font-size: 15.5px; color: var(--muted); line-height: 1.55; max-width: 62ch; }
.band--ink .rows li span, .on-dark .rows li span, .site-foot .rows li span { color: var(--on-dark-dim); }

/* ------------------------------------------------------------ two-up */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.duo--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* an image band that runs to the page edge, used sparingly */
.plate { position: relative; background: var(--ink); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--figure { aspect-ratio: 4 / 5; }
.plate--strip { aspect-ratio: 32 / 9; }
.plate--statement { display: grid; }
.plate--statement img { grid-area: 1 / 1; }
.plate--statement figcaption {
  grid-area: 1 / 1; align-self: center;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
}
/* the measure goes on the span, not the figcaption: putting it on the block
   made margin-inline:auto centre a 24ch box in the frame, off the page grid */
.plate--statement figcaption span {
  display: block; max-width: 21ch;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 3.1vw, 46px); line-height: 1.02;
  letter-spacing: -0.01em; color: var(--on-dark);
  text-wrap: balance;
}
@media (max-width: 760px) { .plate--strip { aspect-ratio: 16 / 9; } }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--ink); color: var(--on-dark);
}
.split__text { padding: clamp(44px, 6vw, 96px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.split__text > div { max-width: 560px; margin-inline: auto; width: 100%; }
.split__media { position: relative; min-height: 380px; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------- form */
.form { display: grid; gap: 20px; max-width: 640px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.band--ink .field label, .on-dark .field label { color: var(--on-dark-dim); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--paper);
  border: 1px solid rgba(19, 26, 27, 0.24);
  color: var(--ink);
  font-size: 16.5px;
  border-radius: 0;
  transition: border-color .18s var(--ease);
}
.field textarea { min-height: 158px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline-offset: 0; }
.field--half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formnote { font-size: 14px; color: var(--faint); max-width: 52ch; }
.formmsg { font-size: 16px; line-height: 1.55; padding: 14px 16px; border-left: 2px solid var(--accent); background: var(--zinc); }
.formmsg[data-state="error"] { border-left-color: #A6402F; }
.formmsg[hidden] { display: none; }

/* --------------------------------------------------------------- footer */
.site-foot { background: var(--ink); color: var(--on-dark); padding-block: clamp(48px, 5.5vw, 78px) 34px; }
.site-foot__top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: 40px; border-bottom: 1px solid var(--line-dark);
}
.site-foot__brand img { height: 36px; width: auto; margin-bottom: 20px; }
.site-foot h2 { font-size: 14px; font-weight: 600; color: var(--on-dark); margin-bottom: 14px; letter-spacing: 0; }
.site-foot ul { list-style: none; display: grid; gap: 9px; }
.site-foot ul a { font-size: 15.5px; color: var(--on-dark-dim); transition: color .18s var(--ease); }
.site-foot ul a:hover { color: var(--on-dark); }
.site-foot__base {
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  font-size: 13.5px; color: var(--on-dark-faint);
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(34px, 6vw, 54px); }
  .hero__title { max-width: 18ch; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .navbtn { display: block; }
  .stratum, .duo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .duo--even { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  /* min-height + aspect-ratio is a trap: the height wins, then aspect-ratio
     DERIVES the width from it, so this box came out 480px wide inside a 390px
     column. On a mobile viewport that widened the layout viewport and pushed
     the menu button off screen, which is how it was found. */
  .split__media { min-height: 0; aspect-ratio: 16 / 10; width: 100%; }
  .site-foot__top { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .stack__row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .stack__label { font-size: 12.5px; }
  .field--half { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .navpanel a { font-size: 32px; }
}

/* Narrow viewports stack the hero content down the middle of the frame, so the
   left-weighted desktop wash misses it entirely: the lead paragraph measured
   2.01:1 on a 390px screen. A full vertical wash plus a stronger text colour.
   Strength taken from the measured background (p98 luminance 0.17 under the
   lead), not chosen by eye. Must sit AFTER the base .hero__lead rule: an
   earlier block loses the specificity tie and silently does nothing. */
@media (max-width: 1080px) {
  .hero__media::after {
    background:
      linear-gradient(to bottom,
        rgba(22,25,26,.90) 0%,
        rgba(22,25,26,.72) 12%,
        rgba(22,25,26,.80) 46%,
        rgba(22,25,26,.92) 100%);
  }
  .hero__lead { color: rgba(231, 235, 232, 0.92); }
  .stack__label { color: rgba(231, 235, 232, 0.94); }
  .stack__cap { color: rgba(231, 235, 232, 0.88); }
}

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

@media print {
  .site-head, .navpanel, .navbtn { display: none; }
  body { font-size: 12pt; }
}


/* =========================================================================
   PAYMENT CLUSTER (2026-09-10)
   payments.html, receipt.html, payment-terms.html. Private, direct-link
   pages, so none of this loads any new font or asset: it is the existing
   design system applied to a form.

   The system says NO CARDS, so the three steps are strata separated by
   hairlines rather than boxes, and the numeral sits on the rail exactly the
   way .stratum__tick does elsewhere.
   ========================================================================= */

/* The UA default is display:none, but several of these elements are grid or
   flex, whose display would otherwise win. Payment amounts and a review step
   must never appear because a rule elsewhere out-specified [hidden]. */
[hidden] { display: none !important; }

.pay-form { max-width: 640px; gap: 0; }

/* Required-field marker. Carries no meaning on its own, so it is aria-hidden
   in the labels and the `required` attribute is what assistive tech reads. */
.req { color: var(--ink); font-weight: 600; }

.pay-step { padding-block: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); }
.pay-step:first-of-type { border-top: 0; padding-top: 0; }
.pay-step > .field, .pay-step > .field--half { margin-top: 20px; }

.pay-step__head {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14.5px; font-weight: 600; color: var(--accent);
  margin-bottom: 4px;
}
.pay-step__num {
  font-family: var(--display); font-size: 21px; font-weight: 600;
  line-height: 1; color: var(--ink);
  /* Barlow Condensed ships lining figures, but say so: an old-style "1"
     next to a "2" reads as a capital I. */
  font-variant-numeric: lining-nums tabular-nums;
}

/* ------------------------------------------------------------- amount */
.pay-amount { display: flex; align-items: stretch; }
.pay-amount__sym {
  display: flex; align-items: center;
  padding-inline: 15px;
  border: 1px solid rgba(19, 26, 27, 0.24); border-right: 0;
  background: var(--zinc);
  font-size: 16.5px; color: var(--muted);
}
.pay-amount input { flex: 1 1 auto; min-width: 0; }
.pay-amount input:focus { position: relative; z-index: 1; }

.pay-error {
  font-size: 15px; line-height: 1.5; color: #A6402F; font-weight: 600;
  max-width: 52ch;
}

/* --------------------------------------------------------- fee notice */
/* A network requirement, not decoration: the fee has to be disclosed before
   the cardholder commits. Full contrast body text, never a grey footnote. */
.pay-fee-note {
  margin-top: 18px; margin-bottom: 22px;
  padding: 14px 16px;
  background: var(--zinc); border-left: 2px solid var(--accent);
  font-size: 15.5px; line-height: 1.55; color: var(--ink);
  max-width: 62ch;
}
.pay-fee-note b { font-weight: 600; }

/* ------------------------------------------------------------ summary */
.pay-summary { margin-top: 20px; border-top: 1px solid var(--line); }
.pay-summary__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
}
.pay-summary__row dt { color: var(--muted); max-width: 40ch; }
.pay-summary__row dd { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
/* nowrap is right for money and wrong for a Stripe reference: a 27-character
   id in a nowrap cell widened the LAYOUT VIEWPORT at 320px, which pushed the
   shared header's menu button off screen. The overflow showed up in the
   header, not here, which is what made it worth a rule of its own. */
.pay-ref {
  white-space: normal; word-break: break-all;
  font-size: 14.5px; font-variant-numeric: normal; text-align: right;
}
.pay-summary__row--total {
  border-bottom-width: 0;
  border-top: 1px solid var(--ink);
  font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600; line-height: 1.1;
}
.pay-summary__row--total dt { color: var(--ink); }

/* --------------------------------------------------------- disclaimer */
/* Body size, full contrast, above the button, never collapsed. See the
   comment block in _src/payments.html before changing anything here. */
.pay-disclaimer {
  padding-block: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.pay-disclaimer p {
  font-size: 15.5px; line-height: 1.6; color: var(--ink); max-width: 66ch;
}

.pay-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pay-actions .btn { flex: 0 0 auto; }
.pay-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pay-form .formmsg { margin-top: 20px; }

/* ------------------------------------------------------- terms overlay */
body.has-overlay { overflow: hidden; }

.terms-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.terms-overlay__backdrop { position: absolute; inset: 0; background: rgba(22, 25, 26, 0.72); }
.terms-overlay__panel {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  max-height: min(84vh, 900px);
  display: flex; flex-direction: column;
  background: var(--paper);
}
.terms-overlay__bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}
.terms-overlay__title { font-family: var(--display); font-size: 26px; font-weight: 600; }
.terms-overlay__close { font-size: 26px; line-height: 1; color: var(--muted); padding: 4px 8px; }
.terms-overlay__close:hover { color: var(--ink); }
.terms-overlay__body {
  flex: 1 1 auto; overflow-y: auto;
  padding: clamp(20px, 3vw, 34px);
}
.terms-overlay__body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.terms-overlay__foot {
  flex: none; padding: 14px clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line); font-size: 14.5px;
}

/* ---------------------------------------------------------- terms body */
.terms-clause { font-size: 16px; line-height: 1.65; margin-bottom: 1.25em; }
.terms-clause b { font-weight: 600; }
.terms-updated { font-size: 14px; color: var(--faint); margin-top: 2em; }

/* -------------------------------------------------------- receipt page */
.pay-result { max-width: 62ch; }
/* State mark. Monochrome like everything else: a rule, weighted by outcome,
   in the same idiom as .stratum__tick. Colour is never the only signal —
   the heading text says what happened. */
.pay-result__mark { display: block; width: 44px; height: 3px; margin-bottom: 24px; background: var(--line); }
.pay-result__mark[data-state="ok"]    { background: var(--ink); }
.pay-result__mark[data-state="error"] { background: #A6402F; }
.pay-result .pay-summary { margin-top: 34px; max-width: 460px; }

@media (max-width: 620px) {
  .pay-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pay-summary__row { gap: 12px; }
}