/* ============================================================
   MATTERA v2 · Hero + radial hatched "exposure" diagram
   ============================================================ */

.hero { position: relative; background: transparent; display: flex; align-items: stretch; overflow: hidden; min-height: min(88svh, 960px); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); z-index: 5; pointer-events: none; }
.hero-grid {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
/* center divider — decorative only */
.hero-grid::before { content: ""; position: absolute; top: 75px; bottom: 0; left: 50%; width: 1px; background: var(--line); pointer-events: none; }

/* hero-left needs its own stacking context so it paints above hero-right
   (which has position:relative). Without z-index on hero-left the grid's
   natural paint order puts the positioned right column on top — which can
   intercept hover/click events for elements near the column boundary,
   including the form's submit button. */
.hero-left { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 104px clamp(28px,4vw,64px) 38px var(--gutter); }
.hero-right { position: relative; display: flex; flex-direction: column; padding: 104px var(--gutter) 30px clamp(8px,2.1vw,24px); }

/* announcement pill */
.announce {
  display: inline-flex; align-items: center; gap: 0; align-self: flex-start;
  padding: 10px 18px; margin-bottom: clamp(20px, 3.5vh, 44px);
  border: 1px solid var(--line); border-radius: 0; background: rgba(221,232,248,.03);
  font-size: 13.5px; color: var(--cream-2); max-width: 100%;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.announce .a-txt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); opacity: .9; transition: opacity .25s; }
.announce .a-arrow {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--cream);
  margin-left: -14px; opacity: 0;
  transition: margin-left .35s var(--ease-out), opacity .25s var(--ease-out);
}
.announce:hover { background: rgba(221,232,248,.08); border-color: var(--line-strong); }
.announce:hover .a-txt { opacity: 1; }
.announce:hover .a-arrow { margin-left: 12px; opacity: 1; }

/* Auto top margin pairs with .hero-trust's auto margin: the column's free
   space splits evenly above the headline and below the form — the content
   block floats centered while the trust line stays pinned at the bottom. */
.hero h1 { margin: auto 0 0; max-width: 16ch; color: #fff; }
/* serif-italic emphasis, same treatment as the CTA's "clearly" — plus the
   sprinkled green accent (--ember), matching eyebrows like "The problem". */
.hero h1 .em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ember); }
.hero-sub { margin-top: 24px; max-width: 46ch; }

/* email capture form
   No overflow:hidden — border-radius is 0 so clipping isn't needed visually,
   and overflow:hidden can clip the interactive hit area of children (the button)
   in some Chromium and WebKit builds when the child sits at the container edge. */
.hero-form { margin-top: 44px; display: flex; align-items: stretch; max-width: 520px; border: 1px solid var(--line-strong); border-radius: 0; background: rgba(221,232,248,.02); }
.hero-form input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--cream); font-family: var(--sans); font-size: 15px; padding: 0 20px; height: 56px; cursor: text; }
.hero-form input::placeholder { color: var(--sage-dim); }
.hero-form button { position: relative; border: none; border-left: 1px solid var(--line-strong); background: var(--cream); color: var(--green); font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 0 24px; display: inline-flex; align-items: center; gap: 12px; transition: background .25s; white-space: nowrap; height: 56px; cursor: pointer; }
.hero-form button:hover { background: #fff; }
.hero-form button .arr { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.hero-form button:hover .arr { transform: translateX(4px); }
/* Submitting state — disable interactions; button text is swapped to "Sending…" by JS */
.hero-form.is-submitting { pointer-events: none; opacity: .65; }

/* ---------- Validation tooltip (replaces unstyled browser popup) ---------- */
.hero-input-tip[hidden] { display: none; }
.hero-input-tip {
  display: inline-block;
  position: relative;
  margin-top: 10px;
  padding: 7px 12px 7px 11px;
  background: var(--green-deep);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--ember);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cream-2);
  pointer-events: none;
}
/* Up-pointing caret aligned under the email input */
.hero-input-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 16px;
  border: 5px solid transparent;
  border-bottom-color: var(--line-strong);
}
.hero-input-tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 17px;
  border: 4px solid transparent;
  border-bottom-color: var(--green-deep);
}

/* Success / error message that replaces the form after submission */
.hero-form-msg {
  margin-top: 18px;
  max-width: 520px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  line-height: 1.55;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
}
.hero-form-msg.is-success { color: var(--cream); border-color: var(--cream); background: rgba(221,232,248,.04); }
.hero-form-msg.is-error   { color: var(--ember); border-color: var(--ember); background: rgba(74,158,90,.05); }
.hero-altcta { margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sage); display: inline-flex; align-items: center; gap: 8px; }
.hero-altcta:hover { color: var(--cream); }
.hero-altcta .arr { transition: transform .4s var(--ease-out); }
.hero-altcta:hover .arr { transform: translateX(4px); }

/* trust strip in hero — auto margin pins it to the hero's bottom edge
   (mirrors .hero h1's auto top margin); padding-top guards a minimum
   gap to the form on short viewports */
.hero-trust { margin-top: auto; padding-top: 44px; }
.hero-trust .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-dim); margin-bottom: 0; }
.firm-row { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); }
.firm { display: flex; align-items: center; gap: 10px; color: var(--cream-2); opacity: .66; transition: opacity .3s; }
.firm:hover { opacity: 1; }
.firm-mark { width: 26px; height: 26px; border-radius: 0; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--cream); }
.firm-name { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.firm-name .thin { font-weight: 400; color: var(--sage); }

/* ---------- Radial diagram ---------- */
.radial { position: absolute; right: var(--frame); bottom: 0; width: min(88%, 715px, calc(100svh - 140px)); aspect-ratio: 1/1; pointer-events: none; }
.radial svg { width: 100%; height: 100%; overflow: visible; display: block; pointer-events: none; }
.r-arc { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.r-arc.dash { stroke-dasharray: 3 5; stroke: var(--line); }
.r-spoke { stroke: var(--line); stroke-width: 1; }
.r-spoke.lit { stroke: var(--line-strong); }
.r-wedge { fill: url(#hatch); stroke: var(--ember-bright); stroke-width: 1.5; stroke-opacity: 1; }
.r-outline { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 5; }
.r-mark { fill: var(--cream); }
.r-lead { stroke: var(--line-strong); stroke-width: 1; }
.r-label { fill: var(--cream-2); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.r-label .pct { fill: var(--sage); }
.r-cap { fill: var(--sage); font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.r-center { fill: var(--cream); font-family: var(--sans); }

@media (prefers-reduced-motion: no-preference) {
  /* Radial container: always visible — children animate individually */
  html.js-fx .radial { opacity: 1; transform: none; transition: none; }

  /* Hide individual radial elements until parent has .in */
  html.js-fx .radial svg .r-outline,
  html.js-fx .radial svg .r-arc,
  html.js-fx .radial svg .r-spoke,
  html.js-fx .radial svg .r-wedge,
  html.js-fx .radial svg .r-lead,
  html.js-fx .radial svg .r-mark,
  html.js-fx .radial svg .r-label {
    opacity: 0;
    transition: opacity .50s var(--ease-out);
  }

  /* Staggered draw-in sequence — tightened so dial finishes ~1s after text */
  html.js-fx .radial.in svg .r-outline                  { opacity: 1; transition-delay: .25s; }
  html.js-fx .radial.in svg .r-arc.dash:nth-of-type(1)  { opacity: 1; transition-delay: .38s; }
  html.js-fx .radial.in svg .r-arc.dash:nth-of-type(2)  { opacity: 1; transition-delay: .51s; }
  html.js-fx .radial.in svg .r-arc:not(.dash)           { opacity: 1; transition-delay: .64s; }
  html.js-fx .radial.in svg .r-spoke:nth-of-type(1)     { opacity: 1; transition-delay: .77s; }
  html.js-fx .radial.in svg .r-spoke:nth-of-type(2)     { opacity: 1; transition-delay: .86s; }
  html.js-fx .radial.in svg .r-spoke:nth-of-type(3)     { opacity: 1; transition-delay: .95s; }
  html.js-fx .radial.in svg .r-spoke:nth-of-type(4)     { opacity: 1; transition-delay: 1.04s; }
  html.js-fx .radial.in svg .r-wedge                    { opacity: 1; transition-delay: 1.45s; }

  /* Labels: flicker in alongside the spokes; last flicker ends as wedge appears */
  html.js-fx .radial.in svg .r-lead:nth-of-type(5),
  html.js-fx .radial.in svg .r-mark:nth-of-type(1),
  html.js-fx .radial.in svg .r-label:nth-of-type(1) {
    transition: none;
    animation: label-flicker .55s steps(1, end) 1.00s forwards;
  }
  html.js-fx .radial.in svg .r-lead:nth-of-type(6),
  html.js-fx .radial.in svg .r-mark:nth-of-type(2),
  html.js-fx .radial.in svg .r-label:nth-of-type(2) {
    transition: none;
    animation: label-flicker .55s steps(1, end) 1.10s forwards;
  }
  html.js-fx .radial.in svg .r-lead:nth-of-type(7),
  html.js-fx .radial.in svg .r-mark:nth-of-type(3),
  html.js-fx .radial.in svg .r-label:nth-of-type(3) {
    transition: none;
    animation: label-flicker .55s steps(1, end) 1.20s forwards;
  }
  html.js-fx .radial.in svg .r-lead:nth-of-type(8),
  html.js-fx .radial.in svg .r-mark:nth-of-type(4),
  html.js-fx .radial.in svg .r-label:nth-of-type(4) {
    transition: none;
    animation: label-flicker .55s steps(1, end) 1.30s forwards;
  }

  .r-wedge { transform-box: fill-box; transform-origin: 100% 100%; }
}

@keyframes label-flicker {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  24%  { opacity: 0; }
  36%  { opacity: 1; }
  42%  { opacity: 0; }
  55%  { opacity: 1; }
  100% { opacity: 1; }
}

@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid::before { display: none; }
  /* Stacked: reset the desktop right-column padding (its left pad was the
     tiny inter-column gap) to the page gutter so the announce pill aligns
     with content; clip so the radial can't escape past the divider. */
  .hero-right { min-height: 62vh; order: 2; border-top: 1px solid var(--line); padding: 64px var(--gutter) 64px; overflow: hidden; }
  .hero-left { order: 1; padding-bottom: 56px; }
  .hero h1 { margin-top: 0; }
  .hero-trust { margin-top: clamp(36px, 5vh, 56px); padding-top: 0; }
  /* Anchor to the frame line + bottom (not -10% bleed); overflow:hidden on
     .hero-right keeps it from poking into the gutter or above the divider. */
  .radial { right: var(--frame); bottom: 0; width: min(86%, 560px); }
}
@media (max-width: 600px) {
  /* Stacked: drop the unified bordered box and give the field + button each
     their own border, separated by a small gap — two distinct controls
     rather than a split bar touching at a divider line. */
  .hero-form { flex-direction: column; border: none; background: transparent; gap: 10px; }
  /* flex:none so the input's height applies — in a column, the base flex:1
     (flex-basis:0%) would otherwise govern the main axis (now vertical) and
     collapse the field to its content height. */
  .hero-form input { flex: none; height: 56px; border: 1px solid var(--line-strong); background: rgba(221,232,248,.02); }
  .hero-form button { border: 1px solid var(--line-strong); justify-content: center; }
  .hero-right { min-height: 50vh; }
}
@media (max-width: 760px) {
  /* Center the hero trust line on mobile. */
  .hero-trust .lbl { text-align: center; }
}