/* Habile Capital website prototype — site stylesheet.
   Binds to ../../../../3-Resources/Branding/_tokens.css (v1.4.0). No hex, radius, shadow or
   font-family is set here except where a token does not exist (noted inline).
   House style v2.6: flat, one hue, 3-4px radii, no shadows, no gradients, sentence-case labels,
   one takeaway band per page, icon chips and accent edges kept on purpose. */

/* Site palette (Jase, 2026-09-30): Habile Capital dark navy and black are the primary colours of the
   website. Mapped here onto the brand ramp, not added to _tokens.css, so decks and documents keep
   Capital blue #1A2591 as their accent. Navy = --hc-blue-800, black = ink (--hc-neutral-900). */
:root {
  --site-navy:  var(--hc-blue-800);
  --site-black: var(--hc-neutral-900);
  --accent:       var(--site-navy);
  --accent-hover: var(--site-black);
  --accent-deep:  var(--site-black);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-doc-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--hc-neutral-700);
  background: var(--paper);
}
h1, h2, h3 { font-family: var(--font-doc-title); color: var(--ink); line-height: var(--lh-tight); margin: 0; font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-display); letter-spacing: var(--tr-tight); }
h2 { font-size: var(--fs-h1); letter-spacing: var(--tr-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter-page); }
.narrow { max-width: var(--container-narrow); }
.muted { color: var(--muted); }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Prototype status strip — house style §7: a page that is not final says so. */
.status { background: var(--panel); border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.status .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-1); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-caption); font-weight: var(--fw-semibold); white-space: nowrap; }
.tag::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.tbc { background: var(--hc-blue-100); color: var(--hc-blue-800); padding: 0 5px; border-radius: var(--radius-1); font-size: .85em; white-space: nowrap; }

/* Header */
.site-head { background: var(--panel); border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 10; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--hc-blue-800); font-family: var(--font-doc-title); font-weight: var(--fw-bold); font-size: var(--fs-h3); }
.brand img { height: 38px; width: auto; }
.nav { display: flex; gap: var(--sp-1); align-items: center; }
.nav a { text-decoration: none; color: var(--hc-neutral-700); font-size: var(--fs-body); padding: var(--sp-2) var(--sp-3); border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.nav .btn { margin-left: var(--sp-2); }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; padding: var(--sp-2); color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .nav { display: flex; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 10px 18px; border-radius: var(--radius-2); background: var(--accent); color: var(--on-accent) !important; font-weight: var(--fw-semibold); font-size: var(--fs-body); text-decoration: none; border: 1px solid var(--accent); transition: background var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--accent) !important; }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.on-dark { background: var(--hc-neutral-0); color: var(--site-navy) !important; border-color: var(--hc-neutral-0); }
.btn.on-dark:hover { background: var(--hc-blue-50); }
.btn .icon { width: 16px; height: 16px; }

/* Hero — full-bleed Capital blue with the cube field (the brand's own geometry, cover/divider use only). */
.hero { position: relative; overflow: hidden; background: var(--site-navy); color: var(--hc-neutral-0); }
.hero svg.cubes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .wrap { position: relative; padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.hero h1 { color: var(--hc-neutral-0); max-width: 17em; }
.hero .lead { font-size: var(--fs-h3); line-height: 1.5; color: var(--hc-blue-100); max-width: 36em; margin-top: var(--sp-5); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero .rule { width: 56px; height: 3px; background: var(--hc-neutral-0); margin-bottom: var(--sp-5); }
.hero.page .wrap { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.hero.page h1 { font-size: 40px; }
.crumb { font-size: var(--fs-body); color: var(--hc-blue-100); margin-bottom: var(--sp-4); display: flex; gap: var(--sp-2); align-items: center; }
.crumb .icon { width: 18px; height: 18px; }

/* Sections */
section.block { padding: var(--sp-9) 0; border-bottom: 1px solid var(--line); }
section.block.alt { background: var(--panel); }
.sec-label { display: flex; align-items: center; gap: var(--sp-2); color: var(--accent); font-size: var(--fs-body); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.sec-label .icon { width: 18px; height: 18px; }
.sec-head { max-width: var(--container-mid); margin-bottom: var(--sp-7); }
.sec-head p { margin-top: var(--sp-4); color: var(--hc-neutral-600); }
.split { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-8); align-items: start; }
.split h2 { font-size: var(--fs-h2); }
.prose p { max-width: 38em; }
.prose p:last-child { margin-bottom: 0; }

/* Cards — accent top edge + tinted icon chip (kept on purpose, house style 2.2.0). */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.card { background: var(--panel); border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); border-radius: var(--radius-3); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; }
section.alt .card { background: var(--paper); }
.chip-ic { width: 44px; height: 44px; border-radius: var(--radius-2); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: var(--sp-4); }
.chip-ic .icon { width: 22px; height: 22px; }
.card h3 { margin-bottom: var(--sp-3); }
.card p { font-size: var(--fs-body); color: var(--hc-neutral-600); flex: 1; }
.card .more { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); font-size: var(--fs-body); text-decoration: none; margin-top: var(--sp-2); }
.card .more .icon { width: 16px; height: 16px; }
a.card { text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease-out); }
a.card:hover { border-color: var(--accent); }

/* Steps — numbered chevron timeline. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
.step { position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-top: 2px solid var(--accent); }
.step + .step { padding-left: var(--sp-5); }
.step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-small); margin: -21px 0 var(--sp-4); }
.step h3 { font-size: var(--fs-lead); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-body); color: var(--hc-neutral-600); margin: 0; }

/* Takeaway band — one per page. */
.band { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: var(--sp-6) var(--sp-7); border-radius: 0 var(--radius-3) var(--radius-3) 0; }
.band p { font-family: var(--font-doc-title); font-size: var(--fs-h2); line-height: 1.35; color: var(--hc-blue-800); font-weight: var(--fw-semibold); margin: 0; max-width: 30em; }

/* Plain lists */
.not-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-7); }
.not-list li { display: flex; gap: var(--sp-3); font-size: var(--fs-body); color: var(--hc-neutral-600); padding-top: var(--sp-4); border-top: 1px solid var(--line-strong); }
.not-list li .icon { color: var(--muted); margin-top: 2px; }
.not-list b { color: var(--ink); font-weight: var(--fw-semibold); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-6); margin: 0; font-size: var(--fs-body); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); }

/* Contact block */
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.contact .card p { flex: 0; }
.addr { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--fs-body); margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.addr .icon { width: 16px; height: 16px; color: var(--accent); }

/* Portrait slot — a real photograph or nothing (no stock). */
.portrait { aspect-ratio: 4 / 5; background: var(--hc-blue-50); border: 1px dashed var(--hc-blue-200); border-radius: var(--radius-3); display: grid; place-items: center; text-align: center; color: var(--hc-blue-400); font-size: var(--fs-small); padding: var(--sp-5); }

/* Footer */
.site-foot { background: var(--site-black); color: var(--hc-blue-100); font-size: var(--fs-small); }
.site-foot .wrap { padding-top: var(--sp-8); padding-bottom: var(--sp-6); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,.14); /* no token for a hairline on the deep surface */ }
.foot-brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--hc-neutral-0); font-family: var(--font-doc-title); font-weight: var(--fw-bold); font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.foot-brand img { height: 34px; width: auto; }
.site-foot h4 { color: var(--hc-neutral-0); font-size: var(--fs-body); margin: 0 0 var(--sp-3); font-weight: var(--fw-semibold); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.site-foot a { color: var(--hc-blue-100); text-decoration: none; }
.site-foot a:hover { color: var(--hc-neutral-0); text-decoration: underline; }
.site-foot .tbc { background: rgba(255,255,255,.12); color: var(--hc-neutral-0); }
.legal-line { padding-top: var(--sp-5); display: flex; justify-content: space-between; gap: var(--sp-6); color: var(--hc-blue-200); font-size: var(--fs-caption); line-height: 1.6; }
.legal-line p { margin: 0; max-width: 60em; }

/* Responsive */
@media (max-width: 900px) {
  h1 { font-size: 34px; }
  .hero.page h1 { font-size: 32px; }
  h2 { font-size: var(--fs-h2); }
  .cards, .contact { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
  .step + .step { padding-left: 0; }
  .step:nth-child(even) { padding-left: var(--sp-5); }
  .split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .legal-line { flex-direction: column; gap: var(--sp-3); }
}
@media (max-width: 760px) {
  body { font-size: var(--fs-body); }
  .site-head .wrap { height: 60px; }
  .brand img { height: 32px; }
  .site-head > .wrap > .nav { display: none; }
  .menu { display: block; }
  .menu .nav { display: none; position: absolute; left: 0; right: 0; top: 60px; background: var(--panel); border-bottom: 1px solid var(--line-strong); flex-direction: column; align-items: stretch; padding: var(--sp-3) var(--gutter-page) var(--sp-5); }
  .menu .nav a { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .menu .nav .btn { margin: var(--sp-3) 0 0; justify-content: center; }
  .hero .wrap, .hero.page .wrap { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
  .hero .lead { font-size: var(--fs-lead); }
  section.block { padding: var(--sp-7) 0; }
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(even) { padding-left: 0; }
  .not-list { grid-template-columns: 1fr; }
  .band { padding: var(--sp-5); }
  .band p { font-size: var(--fs-h3); }
  .status .wrap { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .status, .menu, .site-head .nav { display: none; }
  .site-head { position: static; }
}

/* ======================================================================
   v2 additions (2026-09-30): audience chooser, audience versions, imagery.
   ====================================================================== */

/* Audience switcher in the header */
.viewing { font-size: var(--fs-small); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-4); padding-left: var(--sp-4); border-left: 1px solid var(--line-strong); white-space: nowrap; }
.viewing b { color: var(--ink); font-weight: var(--fw-semibold); }
.hero .kicker { font-size: var(--fs-lead); color: var(--hc-blue-100); font-weight: var(--fw-semibold); margin-bottom: var(--sp-4); }

/* Chooser (landing gate) */
.gate { position: relative; overflow: hidden; background: var(--site-navy); color: var(--hc-neutral-0); min-height: calc(100vh - 100px); display: flex; align-items: center; }
.gate svg.cubes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gate .wrap { position: relative; padding-top: var(--sp-8); padding-bottom: var(--sp-8); width: 100%; }
.gate h1 { color: var(--hc-neutral-0); max-width: 18em; }
.gate .lead { font-size: var(--fs-h3); color: var(--hc-blue-100); max-width: 34em; margin: var(--sp-4) 0 var(--sp-7); }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.choice { background: var(--panel); color: var(--hc-neutral-700); border-radius: var(--radius-3); border-top: 3px solid var(--hc-neutral-0); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.choice:hover { border-top-color: var(--hc-blue-300); transform: translateY(-2px); }
.choice .vis { aspect-ratio: 16 / 9; background: var(--hc-blue-50); position: relative; overflow: hidden; }
.choice .vis svg.illo { width: 100%; height: 100%; }
.choice .txt { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.choice h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.choice p { font-size: var(--fs-body); color: var(--hc-neutral-600); flex: 1; }
.choice .go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.choice .go .icon { width: 16px; height: 16px; }
.resume { margin-top: var(--sp-6); font-size: var(--fs-body); color: var(--hc-blue-100); display: none; }
.resume a { color: var(--hc-neutral-0); font-weight: var(--fw-semibold); }
.resume.on { display: block; }

/* Photos: shown in their own colour, no filter or blend (Jase, 2026-09-30; was a one-hue navy treatment). */
.photo { position: relative; background: var(--site-navy); overflow: hidden; border-radius: var(--radius-3); margin: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .ph { position: absolute; top: var(--sp-2); right: var(--sp-2); background: var(--panel); color: var(--hc-blue-800); font-size: 11px; padding: 2px 6px; border-radius: var(--radius-1); }
.card.has-photo { padding: 0; overflow: hidden; }
.card.has-photo .photo { border-radius: 0; aspect-ratio: 3 / 2; }
.card.has-photo .card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.media-split .photo, .media-split .illo-box { aspect-ratio: 4 / 3; }
.illo-box { background: var(--hc-blue-50); border: 1px solid var(--line-strong); border-radius: var(--radius-3); display: grid; place-items: center; padding: var(--sp-4); }
.illo-box svg { width: 100%; height: 100%; }
figcaption.src { font-size: var(--fs-caption); color: var(--muted); margin-top: var(--sp-2); }

/* Tabs from the live site, as disclosure rows (work without script) */
.tabs { margin-top: var(--sp-5); border-top: 1px solid var(--line-strong); }
.tabs details { border-bottom: 1px solid var(--line-strong); }
.tabs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) 0; font-family: var(--font-doc-title); font-weight: var(--fw-semibold); font-size: var(--fs-lead); color: var(--ink); }
.tabs summary::-webkit-details-marker { display: none; }
.tabs summary .pm { width: 26px; height: 26px; border-radius: var(--radius-1); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: var(--fw-bold); }
.tabs details[open] summary .pm::before { content: "\2212"; }
.tabs details:not([open]) summary .pm::before { content: "+"; }
.tabs details p { font-size: var(--fs-body); color: var(--hc-neutral-600); padding: 0 var(--sp-6) var(--sp-4) 0; margin: 0; }

/* Leader band over the lake photograph (flat navy scrim, not a gradient) */
.leader { position: relative; overflow: hidden; background: var(--site-black); color: var(--hc-neutral-0); }
.leader > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; } /* colour kept; dimmed only so the text over it stays legible */
.leader .wrap { position: relative; padding-top: var(--sp-9); padding-bottom: var(--sp-9); display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-7); align-items: center; }
.leader h2 { color: var(--hc-neutral-0); margin-bottom: var(--sp-4); }
.leader p { color: var(--hc-blue-100); max-width: 36em; }
.leader .by { color: var(--hc-neutral-0); font-weight: var(--fw-semibold); margin-top: var(--sp-5); }
.leader .by span { color: var(--hc-blue-200); font-weight: var(--fw-regular); }
.leader .portrait { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: var(--hc-blue-100); }
.leader .ph { position: absolute; right: var(--sp-3); bottom: var(--sp-3); background: var(--panel); color: var(--hc-blue-800); font-size: 11px; padding: 2px 6px; border-radius: var(--radius-1); }

/* Connect with us */
.connect { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.connect .actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 900px) {
  .choices { grid-template-columns: 1fr; }
  .media-split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .leader .wrap { grid-template-columns: 1fr; }
  .leader .portrait { max-width: 200px; }
  .viewing { display: none; }
}
@media (max-width: 760px) {
  .gate { min-height: 0; }
  .gate .lead { font-size: var(--fs-lead); }
}

/* Minimal landing (2026-09-30): nothing but the mark, one question and three choices. */
body.bare { background: var(--site-navy); }
.gate-min { min-height: 100vh; min-height: 100svh; background: var(--site-navy); color: var(--hc-neutral-0); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-7) var(--gutter-page); text-align: center; }
.gm-inner { display: flex; flex-direction: column; align-items: center; margin-top: auto; }
.gm-mark { height: 56px; width: auto; }
.gm-name { font-family: var(--font-doc-title); font-weight: var(--fw-bold); font-size: var(--fs-h3); margin-top: var(--sp-3); }
.gm-q { color: var(--hc-blue-200); font-size: var(--fs-h3); margin: var(--sp-8) 0 var(--sp-5); }
.gm-opts { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.gm-opts a { color: var(--hc-neutral-0); text-decoration: none; font-size: var(--fs-h2); font-weight: var(--fw-semibold); padding: var(--sp-5) var(--sp-7); border: 1px solid var(--hc-blue-300); border-radius: var(--radius-2); min-width: 280px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.gm-opts a:hover, .gm-opts a:focus-visible { background: var(--hc-neutral-0); color: var(--site-navy); border-color: var(--hc-neutral-0); }
.gm-opts a.last { border-color: var(--hc-neutral-0); }
.gm-foot { margin-top: auto; padding-top: var(--sp-8); display: flex; gap: var(--sp-5); font-size: var(--fs-caption); color: var(--hc-blue-300); }
.gm-foot a { color: var(--hc-blue-200); }
@media (max-width: 760px) { .gm-opts { flex-direction: column; width: 100%; max-width: 360px; } .gm-opts a { min-width: 0; font-size: var(--fs-h3); padding: var(--sp-4) var(--sp-5); } }
@media (max-width: 1000px) and (min-width: 761px) { .gm-opts a { min-width: 220px; padding: var(--sp-4) var(--sp-5); } }

/* Entrance: slow and single. The mark fades in; then the question and all three options rise
   together as one group (no per-item stagger, per house style §2). Off under reduced motion. */
@keyframes gm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gm-mark, .gm-name { animation: gm-fade 1.4s var(--ease-out) both; }
.gm-q, .gm-opts { animation: gm-rise 1.6s var(--ease-out) 0.9s both; }
.gm-foot { animation: gm-fade 1.2s var(--ease-out) 2.2s both; }
@media (prefers-reduced-motion: reduce) { .gm-mark, .gm-name, .gm-q, .gm-opts, .gm-foot { animation: none; } }

/* The name band on About (Jase, 2026-09-30): the photograph fills the section, sits to the right and
   fades out to the left; the copy takes the left half. Mirror of the home page's .meet band. */
.name-band { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden; background: var(--site-black); color: var(--hc-neutral-0); }
.name-band .nb-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 68%;   /* keeps the hands and the wheel in frame */
  -webkit-mask-image: linear-gradient(to left, #000 30%, rgba(0,0,0,.3) 52%, rgba(0,0,0,.15) 72%, rgba(0,0,0,.06) 100%);
          mask-image: linear-gradient(to left, #000 30%, rgba(0,0,0,.3) 52%, rgba(0,0,0,.15) 72%, rgba(0,0,0,.06) 100%); }
.name-band > .wrap { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.name-band .copy { grid-column: 1; padding-top: 112px; padding-bottom: 112px; }
.name-band .sec-label { color: var(--hc-blue-200); }
.name-band h2 { color: #fff; }
.name-band p, .name-band li { color: var(--hc-neutral-300); max-width: 34em; }
.name-band .not-list.promise li .icon { color: var(--hc-blue-200); }
/* Slow rotation (Jase, 2026-09-30): six greyscale photographs, fifteen seconds each with a
   1.5-second crossfade (a 90-second cycle). The base image stays underneath so the band is never empty. */
.name-band .nb-img { filter: grayscale(1); }
/* Crossfade (Jase): the outgoing image fades out over the same 1.5 s the incoming fades in, so they overlap
   only during the fade; once it ends a single image is showing. Each image is fully shown for 10 s,
   the crossfade takes 3 s, so a slot is 13 s and six slots make a 78 s cycle.
   The still base is hidden while the rotation runs. */
.name-band .nb-base { display: none; }
.name-band .nb-rot { opacity: 0; animation: nb-cycle 78s linear infinite; animation-delay: calc(var(--i) * 13s); }
@keyframes nb-cycle { 0% { opacity: 0; } 3.846% { opacity: 1; } 16.667% { opacity: 1; } 20.513% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .name-band .nb-rot { display: none; } .name-band .nb-base { display: block; } }
@media (max-width: 760px) {
  .name-band { display: block; min-height: 0; }
  .name-band .nb-rot { display: none; }
  .name-band .nb-base { display: block; }
  .name-band .nb-img { position: relative; width: 100%; height: 52vh; object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
  .name-band > .wrap { grid-template-columns: 1fr; margin-top: -56px; }
  .name-band .copy { padding-top: 0; padding-bottom: 72px; }
}

/* Shore-derived additions (2026-09-30): process commitments, investor login. */
.not-list.promise li .icon { color: var(--accent); }
.nav a.login { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--muted); }
.nav a.login .icon { width: 15px; height: 15px; }
.login-card { align-self: start; }
.viewing .icon { width: 14px; height: 14px; }

/* Enquiry forms (2026-09-30): every contact route is a form; no published email. */
.enq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--sp-6); margin-top: var(--sp-5); }
.split > .enq, .contact-form > .enq { margin-top: 0; }
.enq label { display: block; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); }
.enq .opt { font-weight: var(--fw-regular); color: var(--muted); }
.enq input, .enq select, .enq textarea { font: inherit; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--ink); background: var(--hc-neutral-0); border: 1px solid var(--line-strong); border-radius: var(--radius-1); padding: var(--sp-3); width: 100%; box-sizing: border-box; display: block; margin-top: var(--sp-2); }
.enq input[type=file] { padding: var(--sp-2); }
.enq input:focus, .enq select:focus, .enq textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.enq .full, .enq label.full { grid-column: 1 / -1; }
.enq .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq-foot { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.enq-foot .muted { font-size: var(--fs-caption); margin: 0; flex: 1 1 260px; }
.enq-done { display: flex; gap: var(--sp-2); align-items: center; color: var(--accent); font-weight: var(--fw-semibold); margin: 0; }
.enq-done[hidden] { display: none; }
@media (max-width: 760px) { .enq { grid-template-columns: 1fr; padding: var(--sp-5); } }

/* Darker theme (Jase, 2026-09-30: "standard colours should include more black"). Black carries the
   chrome: header, heroes, the takeaway band, buttons, step numbers and card edges. Navy becomes the
   secondary colour (hover, icon chips). Website only; _tokens.css and the decks are unchanged. */
:root {
  --accent:       var(--site-black);
  --accent-hover: var(--site-navy);
  --accent-soft:  var(--hc-neutral-100);
}
.status { background: var(--site-black); border-bottom-color: rgba(255,255,255,.12); color: var(--hc-neutral-300); }
.status .tag { background: rgba(255,255,255,.1); color: var(--hc-neutral-0); }
.site-head { background: var(--site-black); border-bottom-color: rgba(255,255,255,.12); }
.brand { color: var(--hc-neutral-0); }
.nav a { color: var(--hc-neutral-300); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--hc-neutral-0); border-bottom-color: var(--hc-neutral-0); }
.site-head .btn { background: var(--hc-neutral-0); color: var(--site-black) !important; border-color: var(--hc-neutral-0); }
.site-head .btn:hover { background: var(--hc-neutral-200); border-color: var(--hc-neutral-200); }
.viewing { color: var(--hc-neutral-300); border-left-color: rgba(255,255,255,.2); }
.viewing b, .viewing a { color: var(--hc-neutral-0); }
.menu summary { color: var(--hc-neutral-0); }
.menu .nav { background: var(--site-black); }
.hero { background: var(--site-black); }
.hero .lead, .hero .kicker { color: var(--hc-neutral-300); }
.btn.on-dark { color: var(--site-black) !important; }
.chip-ic { background: var(--hc-blue-50); color: var(--site-navy); }
.band { background: var(--site-black); border-left-color: var(--site-navy); }
.band p { color: var(--hc-neutral-0); }
.not-list.promise li .icon { color: var(--site-navy); }
.site-foot { border-top: 1px solid rgba(255,255,255,.12); }

/* Portrait photograph (Jase's LinkedIn headshot, 2026-09-30). */
.portrait.has-img { padding: 0; border: 0; overflow: hidden; background: none; margin: 0; }
.portrait.has-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.portrait.small { max-width: 180px; }
.login-card .actions { margin-top: var(--sp-5); }

/* All-dark surfaces (Jase, 2026-09-30: "replace white background with shades of the HC dark navy
   or shades of black"). No white or pale surface remains. Surfaces:
     black   #0F1621 (--hc-neutral-900)  page, header, footer, leader band
     navy    #06082A (--hc-blue-900)     alternate sections
     navy    #0B1042 (--hc-blue-800)     heroes, takeaway band, icon chips
     charcoal #1B1F26 (--hc-neutral-800) cards, forms, illustration boxes
   Text is light neutrals; buttons are white on dark. Website only; _tokens.css is unchanged. */
:root {
  --paper:        var(--hc-neutral-900);
  --panel:        var(--hc-neutral-800);
  --ink:          var(--hc-neutral-0);
  --line:         rgba(255,255,255,.10);
  --line-strong:  rgba(255,255,255,.20);
  --muted:        var(--hc-neutral-400);
  --accent:       var(--hc-neutral-0);
  --accent-hover: var(--hc-blue-100);
  --accent-soft:  rgba(130,144,206,.14);
  --on-accent:    var(--hc-neutral-900);
  --site-alt:     var(--hc-blue-900);
}
body { color: var(--hc-neutral-300); background: var(--paper); }
section.block.alt { background: var(--site-alt); }
section.alt .card { background: var(--hc-neutral-900); }
.hero { background: var(--site-navy); }
/* Navigation strip in true black (Jase, 2026-09-30). #000 has no token; ink #0F1621 matched the page. */
.site-head, .menu .nav { background: #000; }
.hero .lead, .hero .kicker, .crumb { color: var(--hc-blue-100); }
.status { background: var(--hc-blue-900); }
.site-foot { background: var(--hc-blue-900); }
.sec-head p, .card p, .step p, .not-list li, .tabs details p { color: var(--hc-neutral-300); }
.not-list li .icon { color: var(--hc-neutral-400); }
.not-list.promise li .icon, .enq-done { color: var(--hc-blue-300); }
.chip-ic { background: var(--site-navy); color: var(--hc-blue-200); }
.tabs summary .pm { background: var(--site-navy); color: var(--hc-neutral-0); }
.band { background: var(--site-navy); border-left-color: var(--hc-blue-300); }
.band p { color: var(--hc-neutral-0); }
.btn.ghost { color: var(--hc-neutral-0) !important; border-color: var(--line-strong); }
.btn.ghost:hover { background: rgba(255,255,255,.08); }
.btn.on-dark:hover { background: var(--hc-blue-100); }
.illo-box { background: var(--panel); }
.illo text { fill: var(--hc-neutral-100); }
.illo text[fill="#5F6875"] { fill: var(--hc-neutral-400); }
.illo rect[fill="#FFFFFF"] { fill: var(--hc-neutral-900); }
.illo rect[fill="#F0F2FA"] { fill: var(--site-navy); }
.photo .ph, .leader .ph { background: var(--hc-neutral-900); color: var(--hc-neutral-300); }
.leader { background: var(--hc-neutral-900); }
.enq input, .enq select, .enq textarea { background: var(--hc-neutral-900); color: var(--hc-neutral-0); border-color: var(--line-strong); }
.enq input::placeholder, .enq textarea::placeholder { color: var(--hc-neutral-500); }
.enq input:focus, .enq select:focus, .enq textarea:focus { outline-color: var(--hc-blue-300); border-color: var(--hc-blue-300); }
.tbc { background: rgba(130,144,206,.22); color: var(--hc-blue-100); }
.menu .nav a { border-bottom-color: var(--line); }

/* Split panel (2026-09-30, "Who we are"): the photograph fills the right half of the screen from
   the section's top edge to its bottom edge, so the band and the image are one height. Image
   column about 40% of the screen (Jase: the half-screen version felt too big). The copy
   keeps the section padding on the left. Square corners; no shadow. */
.block.bleed-sec { padding: 0; overflow-x: clip; }
.media-split.bleed-right { grid-template-columns: 1.4fr 1fr; align-items: stretch; gap: var(--sp-8); }
.media-split.bleed-right > div:first-child { padding: var(--sp-8) 0; }
.media-split.bleed-right .photo {
  aspect-ratio: auto; height: 100%; min-height: 420px; border-radius: 0;
  margin-right: calc(-1 * (max(0px, (100vw - var(--container-wide)) / 2) + var(--gutter-page)));
}
.media-split.bleed-right .photo img { object-position: 30% center; }
@media (max-width: 900px) {
  .media-split.bleed-right { grid-template-columns: 1fr; gap: 0; }
  .media-split.bleed-right > div:first-child { padding: var(--sp-7) 0; }
  .media-split.bleed-right .photo { min-height: 0; aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--gutter-page)); }
}

/* ======================================================================
   v4 sellers home (2026-09-30): visual-first sections, scoped to .v2.
   Website-only house-style exceptions, recorded in the project _index: large statement bands,
   photo fades (mask gradients), scroll reveal both ways and slow parallax.
   ====================================================================== */

/* ---- v2 scratch variant: one message per screen, one sentence, one visual ---- */
.v2 .s { position: relative; overflow: hidden; }
.v2 .s .wrap { position: relative; }
.v2 .big { font-family: var(--font-doc-title); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.v2 .lede { font-size: 20px; line-height: 1.5; max-width: 34em; margin: 24px 0 0; }
.v2 .light { background: #FFFFFF; color: var(--hc-neutral-700); }
.v2 .light .big { color: var(--hc-blue-800); }
.v2 .navy { background: var(--site-navy); color: var(--hc-blue-100); }
.v2 .black { background: var(--site-black); color: var(--hc-neutral-300); }
.v2 .navy .big, .v2 .black .big { color: #FFFFFF; }

/* 1 hero: split, full height */
.v2 .hero2 { display: grid; grid-template-columns: 1.3fr 1fr; min-height: calc(100vh - 68px); }
.v2 .hero2 .copy { display: flex; flex-direction: column; justify-content: center; padding: 96px 64px 96px max(24px, calc((100vw - var(--container-wide)) / 2 + 24px)); }
.v2 .hero2 .big { font-size: clamp(34px, 4.3vw, 68px); white-space: nowrap; }
@media (max-width: 560px) { .v2 .hero2 .big { white-space: normal; } }
.v2 .hero2 .kick { color: var(--hc-blue-200); font-weight: var(--fw-semibold); margin-bottom: 20px; }
.v2 .hero2 .actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.v2 .hero2 figure { margin: 0; overflow: hidden; }
.v2 .hero2 img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; display: block; }

/* 2 figures strip */
.v2 .figs { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 96px; padding-bottom: 96px; }
.v2 .fig { padding: 0 24px; border-left: 1px solid var(--hc-neutral-200); }
.v2 .fig:first-child { border-left: 0; padding-left: 0; }
.v2 .fig b { display: block; font-family: var(--font-doc-title); font-size: clamp(48px, 5.4vw, 80px); line-height: 1; color: var(--hc-blue-800); font-weight: var(--fw-bold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2 .fig span { display: block; margin-top: 14px; font-size: 17px; color: var(--hc-neutral-600); max-width: 12em; }

/* 3 statement + drawing */
.v2 .statement { padding-top: 128px; padding-bottom: 112px; text-align: center; }
.v2 .statement .big { font-size: clamp(40px, 5vw, 68px); max-width: 15em; margin: 0 auto; }
.v2 .statement .lede { margin: 24px auto 0; }
.v2 .panel { margin: 72px auto 0; max-width: 980px; background: #FFFFFF; border-radius: 4px; padding: 40px 48px 24px; }
.v2 .panel svg { width: 100%; height: auto; display: block; }
.v2 .panel svg text { fill: var(--hc-neutral-700); }

/* 4 photo tiles */
.v2 .tiles-s { padding-top: 112px; padding-bottom: 112px; }
.v2 .tiles-s .big { font-size: clamp(34px, 3.6vw, 48px); margin-bottom: 48px; }
.v2 .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v2 .tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--site-navy); }
.v2 .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2 .tile::after { content: ""; position: absolute; inset: 0; background: rgba(6, 8, 42, .5); }
.v2 .tile p { position: absolute; left: 28px; right: 28px; bottom: 28px; margin: 0; z-index: 1; color: #FFFFFF; font-family: var(--font-doc-title); font-weight: var(--fw-bold); font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }

/* 5 process timeline */
.v2 .proc { padding-top: 112px; padding-bottom: 112px; }
.v2 .proc .big { font-size: clamp(34px, 3.6vw, 48px); }
.v2 .line { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; position: relative; }
.v2 .line::before { content: ""; position: absolute; left: 0; right: 0; top: 32px; height: 2px; background: var(--hc-blue-400); }
.v2 .st { position: relative; padding-right: 32px; }
.v2 .st .m { width: 64px; height: 64px; border-radius: 50%; background: #FFFFFF; color: var(--hc-blue-800); display: grid; place-items: center; font-family: var(--font-doc-title); font-weight: var(--fw-bold); font-size: 26px; }
.v2 .st h3 { color: #FFFFFF; font-size: 24px; margin: 28px 0 8px; }
.v2 .st p { margin: 0; font-size: 16px; color: var(--hc-blue-100); max-width: 15em; }
.v2 .more { display: inline-flex; gap: 8px; align-items: center; margin-top: 56px; color: #FFFFFF; font-weight: var(--fw-semibold); }
.v2 .more .icon { width: 18px; height: 18px; }

/* 6 full-bleed photo statement */
.v2 .bleed { min-height: 78vh; display: flex; align-items: center; background: var(--site-black); }
.v2 .bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.v2 .bleed > .wrap { width: 100%; }
.v2 .bleed .big { font-size: clamp(42px, 5.4vw, 76px); max-width: 12em; }
.v2 .bleed .lede { color: var(--hc-neutral-200); }

/* 7 Jase */
.v2 .jase { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; padding-top: 112px; padding-bottom: 48px; }
.v2 .jase img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.v2 .jase .big { font-size: clamp(40px, 4.6vw, 64px); }

/* Scroll motion, both directions. A section fades and rises in as it enters; when it leaves it
   resets, so scrolling back replays it from the side you come from (.from-top). One group per
   section, no per-item stagger. Big images drift slowly (parallax). Timeline line draws; photo
   tiles settle from a slight zoom. All of it off under reduced motion and without script. */
.js .v2 .rv { opacity: 0; transform: translateY(48px); transition: opacity 2.4s var(--ease-out), transform 2.4s var(--ease-out); } /* slowed twice 2026-09-30 (.9s, then 1.6s) */
.js .v2 .rv.from-top { transform: translateY(-48px); }
.js .v2 .rv.in { opacity: 1; transform: none; }
.js .v2 .line::before { transform: scaleX(0); transform-origin: left center; transition: transform 3.2s var(--ease-out) .6s; }
.js .v2 .rv.in .line::before { transform: scaleX(1); }
.js .v2 .tile img { transform: scale(1.07); transition: transform 3.4s var(--ease-out); }
.js .v2 .rv.in .tile img { transform: none; }
.v2 [data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .js .v2 .rv, .js .v2 .rv.from-top { opacity: 1; transform: none; transition: none; }
  .js .v2 .line::before, .js .v2 .tile img { transform: none; transition: none; }
}


@media (max-width: 900px) {
  .v2 .hero2 { grid-template-columns: 1fr; min-height: 0; }
  .v2 .hero2 .copy { padding: 72px 24px; }
  .v2 .hero2 figure { aspect-ratio: 4 / 3; }
  .v2 .figs { grid-template-columns: 1fr 1fr; row-gap: 48px; padding-top: 72px; padding-bottom: 72px; }
  .v2 .fig:nth-child(3) { border-left: 0; padding-left: 0; }
  .v2 .tiles { grid-template-columns: 1fr; }
  .v2 .tile { aspect-ratio: 4 / 3; }
  .v2 .line { grid-template-columns: 1fr; row-gap: 40px; }
  .v2 .line::before { display: none; }
  .v2 .jase { grid-template-columns: 1fr; gap: 32px; }
  .v2 .jase img { max-width: 240px; }
  .v2 .panel { padding: 24px 16px 12px; }
}

.v2 .hero2 video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2 .hero-bg { position: relative; min-height: calc(100vh - 68px); display: flex; align-items: center; overflow: hidden; }
.v2 .hero-bg > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2 .hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(11, 16, 66, .62); }
.v2 .hero-bg > .wrap { width: 100%; }
.v2 .hero-bg .copy { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 96px; }
.v2 .hero-bg .big { font-size: clamp(40px, 5.2vw, 84px); white-space: nowrap; color: #fff; }
.v2 .hero-bg .kick { color: var(--hc-blue-200); font-weight: var(--fw-semibold); margin-bottom: 20px; }
.v2 .hero-bg .lede { color: var(--hc-blue-100); }
.v2 .hero-bg .actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
@media (max-width: 560px) { .v2 .hero-bg .big { white-space: normal; } }

.v2 .meet { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; }
/* Fade (Jase): steep enough before the copy that the text reads easily (about 30% by where the
   copy starts), then a long gentle tail to the right edge so the photo still shows under the text. */
.v2 .meet .mt-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% center;
  -webkit-mask-image: linear-gradient(to right, #000 28%, rgba(0,0,0,.3) 48%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.12) 100%);
          mask-image: linear-gradient(to right, #000 28%, rgba(0,0,0,.3) 48%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.12) 100%); }
.v2 .meet > .wrap { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.v2 .meet .copy { grid-column: 2; padding-top: 112px; padding-bottom: 112px; }
.v2 .meet .kick { color: var(--hc-blue-200); font-weight: var(--fw-semibold); margin-bottom: 20px; }
.v2 .meet .big { font-size: clamp(36px, 4.2vw, 64px); max-width: 10em; color: #fff; }
.v2 .meet .lede { color: var(--hc-neutral-300); max-width: 26em; }
@media (max-width: 900px) {
  .v2 .meet { display: block; min-height: 0; }
  .v2 .meet .mt-img { position: relative; width: 100%; height: 56vh;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
  .v2 .meet > .wrap { grid-template-columns: 1fr; margin-top: -56px; }
  .v2 .meet .copy { grid-column: 1; padding-top: 0; padding-bottom: 80px; }
}

/* In-page links glide to their section (Jase, 2026-09-30): "Let's chat", "How a sale works" and the
   rest. Targets stop below the sticky header. Instant under reduced motion. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Talk to Jase + the form, merged into one section (2026-09-30). */
.v2 .talk { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; padding-top: 112px; padding-bottom: 112px; }
.v2 .talk img { width: 160px; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 32px; }
.v2 .talk .big { font-size: clamp(36px, 4vw, 56px); }
.v2 .talk .actions { display: flex; gap: 12px; margin-top: 32px; }
@media (max-width: 900px) { .v2 .talk { grid-template-columns: 1fr; gap: 40px; padding-top: 80px; padding-bottom: 80px; } }

/* Figures strip: a unit set small beside the number ("3 months"), 2026-09-30. */
.v2 .fig b small { font-size: .34em; font-weight: var(--fw-semibold); letter-spacing: 0; margin-left: .22em; color: var(--hc-blue-800); }

/* Headshot as a circle (Jase, 2026-09-30): home Talk to Jase, About and Contact portraits.
   Website-only house-style exception (discs are otherwise kept for numbered markers). */
.portrait.has-img { aspect-ratio: 1; border-radius: 50%; }
.portrait.has-img img { object-position: 50% 28%; }
.v2 .talk img { width: 200px; border-radius: 50%; object-position: 50% 28%; }

/* ======================================================================
   Header v2 (2026-09-30): transparent over the home hero, condenses on scroll, tucks away while
   scrolling down, link lines grow on hover, full-screen mobile menu. The mark never animates.
   ====================================================================== */
.site-head { transition: background-color .5s var(--ease-out), border-color .5s var(--ease-out), transform .5s var(--ease-out); }
.site-head .wrap { height: 80px; transition: height .45s var(--ease-out); }
.site-head .brand { font-size: 21px; transition: font-size .45s var(--ease-out); }
.site-head .brand img { height: 44px; width: auto; transition: height .45s var(--ease-out); }
.site-head.condensed .wrap { height: 60px; }
.site-head.condensed .brand { font-size: 18px; }
.site-head.condensed .brand img { height: 32px; }
.site-head.tucked { transform: translateY(-100%); }
/* Over the home hero: no bar, the brand floats on the video until the hero is passed. */
.site-head.over-hero { position: fixed; left: 0; right: 0; top: 0; }
.site-head.over-hero:not(.condensed) { background: transparent; border-bottom-color: transparent; }
.v2 .hero-bg { min-height: 100vh; min-height: 100svh; }
.v2 .hero-bg .copy { padding-top: 140px; }
/* Links: a 2px line grows from the left on hover and stays under the current page. */
.site-head .wrap > .nav a:not(.btn) { position: relative; border-bottom: 0; }
.site-head .wrap > .nav a:not(.btn)::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-out); }
.site-head .wrap > .nav a:not(.btn):hover::after, .site-head .wrap > .nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Mobile: a full-screen navy menu with large links. */
@media (max-width: 760px) {
  .site-head .wrap { height: 64px; }
  .site-head .brand img { height: 34px; }
  .menu summary { position: relative; z-index: 3; }
  .menu[open] .nav { position: fixed; inset: 0; top: 0; z-index: 2; background: var(--site-navy); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 96px 32px 48px; border: 0; animation: menu-in .45s var(--ease-out) both; }
  .menu[open] .nav a { font-family: var(--font-doc-title); font-size: 30px; font-weight: var(--fw-bold); color: #fff; border: 0; padding: 10px 0; }
  .menu[open] .nav .btn { font-size: 18px; margin-top: 24px; padding: 14px 28px; }
  @keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .site-head, .site-head .wrap, .site-head .brand, .site-head .brand img, .site-head .wrap > .nav a::after { transition: none; }
  .menu[open] .nav { animation: none; }
}

/* Mobile menu: the icon turns into a close mark, and the logo stays visible above the menu. */
.menu .i-close { display: none; }
.menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
@media (max-width: 760px) { .site-head .brand { position: relative; z-index: 3; } }

/* LinkedIn link under the About bio (2026-09-30). */
.li-link { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-2); color: var(--hc-neutral-0); font-weight: var(--fw-semibold); text-decoration: none; }
.li-link .icon { width: 22px; height: 22px; }
.li-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Operators (For CEOs) hero, v5 2026-09-30: the brand cube field behind a large statement. */
.v2 .hero-cube { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; }
.v2 .hero-cube > svg.cubes { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2 .hero-cube > .wrap { width: 100%; position: relative; }
.v2 .hero-cube .copy { padding-top: 112px; padding-bottom: 112px; }
.v2 .hero-cube .kick { color: var(--hc-blue-200); font-weight: var(--fw-semibold); margin-bottom: 20px; }
.v2 .hero-cube .big { font-size: clamp(36px, 4.6vw, 68px); color: #fff; }
.v2 .hero-cube .lede { color: var(--hc-blue-100); }
.v2 .hero-cube .actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }

/* Enquiry forms (2026-10-02). Once the server confirms, the form takes .sent: the fields go and the
   acknowledgement stands in their place. A failed send shows .enq-error and keeps the fields filled.
   The error carries the reserved risk red as a rule only; the text stays light for contrast. */
.enq.sent > :not(.enq-done) { display: none; }
.enq.sent { grid-template-columns: 1fr; }
.enq.sent .enq-done { font-size: var(--fs-body); padding: var(--sp-3) 0; outline: none; }
.enq-error { color: var(--hc-neutral-0); border-left: 3px solid var(--neg); padding-left: var(--sp-3); margin: 0; }
.enq-error[hidden] { display: none; }
.enq button[disabled] { opacity: .6; cursor: progress; }

/* Investor login: Sign in and Create an account side by side (2026-10-02). */
.login-card .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* About name band, five photographs (2026-10-02: the woodworker removed). Same 13 s per photograph
   (3 s fade in, 10 s held, 3 s overlapping fade out), so the cycle is 5 x 13 = 65 s. */
.name-band .nb-rot { animation: nb-cycle5 65s linear infinite; animation-delay: calc(var(--i) * 13s); }
@keyframes nb-cycle5 { 0% { opacity: 0; } 4.615% { opacity: 1; } 20% { opacity: 1; } 24.615% { opacity: 0; } 100% { opacity: 0; } }

/* Talk to Jase: name and title beside the portrait (Jase, 2026-10-02). */
.v2 .talk .talk-who { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: 32px; }
.v2 .talk .talk-who img { margin-bottom: 0; flex: none; }
.v2 .talk .talk-who p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.v2 .talk .talk-who b { color: #fff; font-size: 20px; font-weight: var(--fw-semibold); }
.v2 .talk .talk-who span { color: var(--hc-neutral-300); }
@media (max-width: 520px) { .v2 .talk .talk-who img { width: 120px; } }

/* Phones: the name band rotates too (Jase, 2026-10-02; it used to show the potter only). The rotating
   photographs sit on the still base image in the same 52vh box and fade through it, with the same mask.
   Reduced motion still shows the base image only. */
@media (max-width: 760px) {
  .name-band .nb-rot { display: block; position: absolute; top: 0; left: 0; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .name-band .nb-rot { display: none; }
}

/* Turnstile bot check in the enquiry forms (2026-10-04). Usually collapses to nothing; when it shows,
   it sits above the button. Hidden with the other fields once the form is sent. */
.enq .cf-turnstile { min-height: 0; }
.enq .cf-turnstile:not(:empty) { margin-top: var(--sp-2); }