/* CEO collateral visual-alignment experiment, September 2026.
   This file is deliberately a skin: no layout model, content, asset, motion,
   breakpoint or interaction architecture is defined here. */

:root {
  --brand-primary: var(--brand);
  --brand-accent: var(--brand-2);
  --brand-accent-strong: #007A83;
  --brand-accent-on-dark: var(--brand-light);
  --brand-accent-line: color-mix(in srgb, var(--brand-accent) 62%, var(--line));
  --section-space: clamp(64px, 8vw, 112px);
  --heading-space: clamp(18px, 2.3vw, 30px);
  --copy-measure: 62ch;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

/* A single quiet page before the existing five-stage opening. */
.opening-splash {
  position: relative;
  z-index: 70;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  padding: 32px;
  background: #fff;
}
.opening-splash__fragments {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(78vw, 760px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .3;
  pointer-events: none;
  user-select: none;
}
.opening-splash__logo {
  display: block;
  width: clamp(260px, 38vw, 468px);
  max-width: calc(100vw - 48px);
  height: auto;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.opening-splash__copy {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(50% + clamp(96px, 10vw, 126px));
  width: min(620px, calc(100vw - 48px));
  transform: translateX(-50%);
  text-align: center;
  color: var(--brand-primary);
  opacity: 0;
  visibility: hidden;
}
.opening-splash.is-settled .opening-splash__copy {
  visibility: visible;
  animation: opening-copy-type 1.5s steps(38, end) both;
}
@keyframes opening-copy-type {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
.opening-splash__copy h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.035em;
}
.opening-splash__copy p {
  max-width: 58ch;
  margin: 0 auto;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.5;
}
.opening-splash__letter {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
}
.opening-splash.is-ready .opening-splash__letter { opacity: 0; }
.opening-splash.is-ready.is-assembling .opening-splash__letter {
  animation: opening-letter-assemble var(--dur, 1000ms) cubic-bezier(.16, 1, .3, 1) var(--d, 0ms) both;
  will-change: transform, opacity;
}
@keyframes opening-letter-assemble {
  0% {
    opacity: 0;
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(.78);
  }
  18% { opacity: 1; }
  82% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1.035);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opening-splash__letter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .opening-splash__copy {
    opacity: 1;
    visibility: visible;
    animation: none !important;
    clip-path: none !important;
  }
}
@media (max-width: 600px) {
  .opening-splash__fragments {
    width: min(126vw, 520px);
    opacity: .24;
  }
  .opening-splash__copy {
    top: calc(50% + 92px);
    width: min(360px, calc(100vw - 36px));
  }
  .opening-splash__copy h1 { font-size: 22px; }
  .opening-splash__copy p { font-size: 14px; }
}
/* Once the mark has landed, the assemble animation is taken off the letters
   so the pointer can drive them instead: it is fill-forwards, and a running
   animation outranks an inline style, so every letter would otherwise stay
   pinned at the 100% keyframe's transform:none. Dropping the animation also
   drops the .is-ready opacity the keyframes were covering, so that is
   restored here. This carries the assembling rule's full class list because
   that is the rule being switched off, and a shorter selector loses to it. */
.opening-splash.is-ready.is-assembling.is-settled .opening-splash__letter {
  animation: none;
  opacity: 1;
}
/* The swoosh never assembled - it is the one mark that was always there - but
   it takes a pull like the letters, so it needs the same transform box. */
.opening-splash__swoosh {
  transform-box: fill-box;
  transform-origin: center;
}
/* Promoted only while something is actually moving. Twenty-three permanent
   compositor layers for a mark that is usually still is not worth it. */
.opening-splash.is-gravity-live .opening-splash__letter,
.opening-splash.is-gravity-live .opening-splash__swoosh {
  will-change: transform;
}

/* The opening is a full screen holding one mark and nothing else, which gives
   a visitor no reason to believe there is more below it. This says so in the
   page's own register - a tracked micro-label over a hairline, the same
   vocabulary as the eyebrows and the route line - rather than a bouncing
   chevron. It is a real link, so it answers a click and a keyboard as well as
   the eye, and it is a child of the section rather than fixed to the window,
   so it leaves with the opening instead of needing to be hidden on scroll. */
.opening-splash__scroll {
  position: absolute;
  bottom: clamp(18px, 4.5vh, 44px);
  /* Centred on the margins, not with a transform: the reveal below needs the
     transform, and the two would overwrite each other. */
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-45);
  text-decoration: none;
  transition: opacity .7s var(--ease-out) .1s,
              transform .7s var(--ease-out) .1s,
              color var(--dur-fast, .2s) var(--ease-out);
}
/* Hidden by the class the script adds, not by default, so that a visitor
   whose JavaScript never arrives still gets the cue - the same bargain the
   letters strike two rules up. It then arrives once the wordmark has settled:
   offering the way out while the letters are still flying in would undercut
   both. */
.opening-splash.is-ready .opening-splash__scroll {
  opacity: 0;
  transform: translateY(8px);
}
.opening-splash.is-settled .opening-splash__scroll {
  opacity: 1;
  transform: none;
}
.opening-splash__scroll:hover {
  color: var(--brand-accent-strong);
}
.opening-splash__scroll-rail {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}
/* A single travelling segment rather than a bob: it states a direction once
   per cycle and is still for most of it, which is quieter on a page whose
   whole argument is restraint. */
.opening-splash__scroll-rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 14px;
  background: var(--brand-accent-strong);
  animation: opening-scroll-run 2.1s var(--ease-out) infinite;
}
@keyframes opening-scroll-run {
  0%   { transform: translateY(-15px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-splash__scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* The rail keeps its mark, parked at the top, so the cue still reads as
     pointing down rather than becoming a bare line. */
  .opening-splash__scroll-rail::after {
    animation: none;
    opacity: 1;
  }
}


h1, h2, h3, h4 {
  font-family: var(--font-display);
}

h1, h2 {
  font-weight: 700;
  letter-spacing: -.035em;
}

h3, h4 { font-weight: 650; }
.lede { max-width: var(--copy-measure); line-height: 1.56; }

.eyebrow {
  color: var(--brand-accent-strong);
  font-weight: 700;
  letter-spacing: .16em;
}

.section { padding-block: var(--section-space); }
.section.alt, .section-alt { background: var(--paper-alt); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--brand-accent-strong);
  outline-width: 3px;
}

/* Navigation keeps its existing architecture and hero inversion. */
@media (min-width: 1001px) {
  .hdr .nav > a {
    color: var(--brand-primary);
    font-weight: 650;
  }
  .hdr .nav > a::after { background: var(--brand-accent); }
  .hdr .nav > a:hover,
  .hdr .nav > a[aria-current] { color: var(--brand-accent-strong); }
}

.hdr .nav > .navcta {
  border-color: var(--brand-accent-strong);
  background: var(--brand-accent-strong);
  color: #fff;
  /* `.nav a` (site.css) is more specific than `.btn`, so it was overriding
     the button's own `display:inline-flex` and its vertical padding with
     `inline-block` + `padding-block:6px`. The label then sat on the
     baseline near the top of the 44px min-height pill instead of in the
     middle of it. Restore the button's own centring for this one element. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: .95em;
}

.hdr .nav > .navcta:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
}

body.over-hero .hdr .nav > .navcta {
  border-color: color-mix(in srgb, var(--on-ground) 42%, transparent);
  background: transparent;
  color: var(--on-ground);
}

body.over-hero .hdr .nav > .navcta:hover {
  border-color: var(--brand-accent-on-dark);
  background: color-mix(in srgb, var(--brand-accent-on-dark) 14%, transparent);
  color: var(--on-ground);
}

@media (max-width: 1000px) {
  .nav { background: var(--ground); }
  .burger { z-index: 2; }
  .nav a { color: var(--on-ground); min-height: 44px; }
  .nav a:hover,
  .nav a[aria-current] { color: var(--brand-accent-on-dark); }
  .hdr .nav > .navcta {
    border-color: var(--brand-accent-strong);
    background: var(--brand-accent-strong);
    color: #fff;
    padding-inline: 24px;
  }
}

/* One restrained action system: teal primary, navy secondary. */
.btn,
.formcard button.send {
  min-height: 44px;
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: .035em;
}

.btn.primary,
.formcard button.send {
  border-color: var(--brand-accent-strong);
  background: var(--brand-accent-strong);
  color: #fff;
}

.btn.primary:hover,
.formcard button.send:hover:not(:disabled) {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
  filter: none;
}

.btn.ghost,
.btn.btn-ghost {
  border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--line));
  background: transparent;
  color: var(--brand-primary);
}

.btn.ghost:hover,
.btn.btn-ghost:hover {
  border-color: var(--brand-accent-strong);
  color: var(--brand-accent-strong);
}

.hero .btn.outline,
.approach-intro .btn.outline {
  border-color: var(--brand-accent-strong);
  border-radius: var(--r-pill);
  background: var(--brand-accent-strong);
  color: #fff;
}

.hero .btn.outline:hover,
.hero .btn.outline:focus-visible,
.approach-intro .btn.outline:hover,
.approach-intro .btn.outline:focus-visible {
  border-color: var(--brand-accent-on-dark);
  background: var(--brand-accent-on-dark);
  color: var(--ground-3);
}

.approach-intro h1 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -.04em;
}

.approach-intro .eyebrow,
.hero .eyebrow { color: var(--brand-accent-on-dark); }

.approach-panel__copy strong { font-weight: 700; }
.approach-route circle.is-active {
  fill: var(--brand-accent-on-dark);
  stroke: var(--on-ground);
}

/* Existing cinematic hero: only type, accent and control presentation change. */
.hero .hero-title,
.hero-b h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.04em;
}

.hero .posline { color: var(--on-ground-mut2); font-weight: 650; }

/* Light sections take the collateral's navy hierarchy and fine teal rules. */
.reality h2 { font-weight: 700; }

.reality h2 span { color: var(--brand-accent-strong); }
.reality p {
  border-left-color: var(--brand-accent-line);
  max-width: 40ch;
}

/* Rules drawn by the cells, not by the grid's background showing through a
   1px gap: Tony can now add or remove situations (content/homepage.json),
   and with a short last row the gap method painted the empty cells grey.
   A full grid looks exactly as before. */
.sitgrid { background: none; gap: 0; border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sit { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sit b,
.stage .n { color: var(--brand-accent-strong); font-weight: 700; }
.appr-track::after,
.stage .dot::after { background: var(--brand-accent); }
.stage .dot { border-color: var(--brand-accent-strong); }

.facts { border-top-color: var(--brand-accent-line); }

/* Form structure and validation behavior are untouched. */
.formcard {
  background: var(--surface);
  box-shadow: 0 24px 64px -42px color-mix(in srgb, var(--ground-3) 68%, transparent);
}

.formcard > h3 { font-weight: 700; }
.formcard .cf-field label { color: var(--brand-primary); font-weight: 650; }
.formcard .cf-field input,
.formcard .cf-field textarea { border-color: var(--line-2); }
.formcard .cf-field input:focus,
.formcard .cf-field textarea:focus {
  border-color: var(--brand-accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 22%, transparent);
}
.formcard .consent input { accent-color: var(--brand-accent-strong); }
.formcard .consent a,
.formcard .failed a { color: var(--brand-accent-strong); }
.formcard button.send:focus-visible { outline-color: var(--brand-accent-strong); }

/* Footer content and columns stay fixed; only the material treatment changes. */
.ftr { background: var(--ground); }
.ftr h3,
.ftr h4 { color: var(--brand-accent-on-dark); }
.ftr a:hover,
.ftr a:focus-visible { color: var(--brand-accent-on-dark); }
.ftr .reg,
.ftr .bar { border-top-color: color-mix(in srgb, var(--brand-accent) 36%, var(--line-dark)); }

.progress span { background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); }
.totop:hover,
.totop:focus-visible { border-color: var(--brand-accent-strong); color: var(--brand-accent-strong); }
.totop::before { background: conic-gradient(var(--brand-accent) calc(var(--pc, 0) * 1%), transparent 0); }

@media (max-width: 820px) {
  h1, h2 { letter-spacing: -.03em; }
  .approach-intro h1,
  .hero .hero-title,
  .hero-b h2 { letter-spacing: -.035em; }
  .formcard { padding: clamp(22px, 7vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .formcard button.send { transition: none; }
}