/* ==========================================================================
   Elevate 360 — Organizational Snapshot (10/8, v1)
   Head (photo under a navy grade, the interior-page height) → the
   instrument on paper: a rail (three steps, the aperture that turns as
   answers come in) beside the stage (about you → one statement at a time)
   → the results on navy. Reads from tokens.css. The .ph head rules are
   the copy that lives in cases.css/contact.css/ecc.css until the shared
   head lands in components.css (PAGES.md request).
   ========================================================================== */

/* --- Page head ----------------------------------------------------------- */
.ph { display: grid; background: var(--navy); color: var(--text-inverse); }
.ph__inner { display: grid; align-content: center; padding-block: var(--space-3xl) var(--section-y); }
.ph--photo { position: relative; overflow: hidden; }
.ph__media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.ph__media picture, .ph__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.ph__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 41, 66, 0.35) 0%, rgba(15, 41, 66, 0) 35%, rgba(15, 41, 66, 0.55) 100%),
    linear-gradient(90deg, rgba(15, 41, 66, 0.94) 0%, rgba(15, 41, 66, 0.78) 42%, rgba(15, 41, 66, 0.28) 75%, rgba(15, 41, 66, 0.10) 100%);
}
.ph--photo .ph__inner { position: relative; z-index: 1; }
.ph__title {
  margin: var(--space-sm) 0 0;
  max-width: 14ch;
  font-size: var(--step-5);
  font-weight: var(--weight-regular);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--on-navy);
}
.ph__title em { font-style: italic; }
.ph__lede {
  margin: var(--space-lg) 0 0;
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-inverse-muted);
}
.ph__cta { margin: var(--space-xl) 0 0; }
@media (max-width: 767px) {
  .ph--photo { min-height: 460px; }
  .ph__media img { object-position: 80% 50%; }
  .ph__media::after { background: linear-gradient(180deg, rgba(15, 41, 66, 0.55) 0%, rgba(15, 41, 66, 0.82) 100%); }
  .ph__cta .btn { width: 100%; }
}
@media (min-width: 1024px) {
  .ph { min-height: calc(464px + 8.65vw); }
  .ph__inner { padding-block: var(--space-4xl) var(--space-5xl); }
}

/* --- The instrument ------------------------------------------------------- */
.sn { position: relative; padding-block: var(--section-y-tight) var(--section-y); background: var(--paper); }
/* The progress line sits on the seam under the head and fills gold as
   the steps complete: one share for "about you", one per statement. */
.sn__line { grid-column: 1 / -1; height: 3px; background: var(--paper-warm); }
.sn__line-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--ease-emph); box-shadow: 0 0 10px rgba(210, 163, 67, 0.55); }
.sn__grid { display: grid; gap: var(--space-xl); }

/* the rail */
.sn__rail { display: grid; gap: var(--space-xl); align-content: start; }
.sn__steps { margin: 0; padding: 0; list-style: none; display: grid; }
.sn__step {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--rule);
  color: var(--text-meta);
  transition: color var(--dur-base) var(--ease-out);
}
.sn__step:last-child { border-bottom: 1px solid var(--rule); }
.sn__step-n { font-size: var(--step--1); font-weight: var(--weight-medium); font-stretch: var(--width-narrow); letter-spacing: 0.08em; transition: color var(--dur-base) var(--ease-out); }
.sn__step-t { font-size: var(--step-0); font-weight: var(--weight-medium); }
.sn__step-s { grid-column: 2; font-size: var(--step--1); color: var(--text-meta); }
.sn__step.is-current { color: var(--ink); }
.sn__step.is-current .sn__step-n { color: var(--gold); }
.sn__step.is-done { color: var(--text-muted); }
.sn__step.is-done .sn__step-n { color: var(--gold); }
.sn__step.is-done .sn__step-t::after { content: ""; display: inline-block; width: 0.5rem; height: 0.85rem; margin-left: 0.55rem; border: solid var(--gold); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); animation: sn-check 420ms var(--ease-emph) both; }
@keyframes sn-check { from { opacity: 0; transform: translateY(-1px) rotate(45deg) scale(0.4); } to { opacity: 1; transform: translateY(-1px) rotate(45deg) scale(1); } }
.sn__step-n { transition: transform var(--dur-slow) var(--ease-emph); display: inline-block; }
.sn__step.is-current .sn__step-n { transform: translateX(2px); }
.sn__mark.is-pulsing { animation: sn-pulse 600ms var(--ease-out); }
@keyframes sn-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* the aperture: its blades turn with --sp as answers come in (home.css
   turns them with the scroll; here progress drives it) */
.sn__mark { margin: 0; justify-self: center; width: min(50vw, 220px); filter: drop-shadow(0 18px 36px rgba(15, 41, 66, 0.28)); }
.sn__mark .aperture { display: block; width: 100%; height: auto; overflow: visible; }
.sn__mark .aperture__blades { transform-origin: 120px 120px; transform-box: view-box; transform: rotate(calc(var(--sp, 0) * 320deg)); transition: transform 900ms var(--ease-emph); will-change: transform; }
.sn__mark .aperture__centre { transform-box: view-box; transform-origin: 120px 120px; transform: scale(calc(1 + var(--sp, 0) * 0.14)); transition: transform 900ms var(--ease-emph); }
/* Hovering the mark does what it does on the Snapshot bands: the mark
   lifts, the blades turn a little further, the buildings come closer. */
.sn__mark { transition: transform var(--dur-slow) var(--ease-emph); }
.sn__mark:hover { transform: scale(1.035); }
.sn__mark:hover .aperture__blades { transform: rotate(calc(var(--sp, 0) * 320deg + 24deg)); transition-duration: var(--dur-slow); }
.sn__mark:hover .aperture__centre { transform: scale(calc(1 + var(--sp, 0) * 0.14 + 0.14)); transition-duration: var(--dur-slow); }

/* the stage */
.sn__stage { position: relative; display: grid; }
.sn__panel { display: none; margin: 0; padding: 0; border: 0; min-width: 0; }
.sn__panel.is-current { display: block; }
.js .sn__panel.is-current { animation: sn-panel 600ms var(--ease-emph) both; }
@keyframes sn-panel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sn__legend { padding: 0; margin: 0 0 var(--space-sm); float: left; width: 100%; }
.sn__legend .eyebrow { margin: 0; }
.sn__title {
  clear: both;
  margin: 0;
  max-width: 16ch;
  font-size: var(--step-3);
  font-weight: var(--weight-regular);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--ink);
}
.sn__title em { font-style: italic; }
.sn__body { margin: var(--space-md) 0 0; max-width: 44ch; color: var(--text-muted); }
.sn__noscript { margin: var(--space-lg) 0 0; color: var(--text-muted); }
.sn__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* fields: the Contact form's field boxes, on paper */
.sn__fields { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.sn__row { display: grid; gap: var(--space-md); }
.field { position: relative; display: grid; gap: var(--space-xs); }
.field__label { font-size: var(--step--1); font-weight: var(--weight-bold); font-stretch: var(--width-narrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); transition: color var(--dur-base) var(--ease-out); }
.field__opt { margin-left: 0.4em; font-weight: var(--weight-regular); letter-spacing: 0.04em; text-transform: none; opacity: 0.7; }
.field__input {
  width: 100%;
  padding: 0.7rem 0.9rem 0.75rem;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: var(--paper-warm);
  transition: background var(--dur-base) var(--ease-out);
  font: inherit;
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  color: var(--ink);
  outline: none;
  caret-color: var(--gold);
}
.field__input::placeholder { color: transparent; }
.field__input:hover { background: #E3DFD5; }
.field__input:focus { background: #E0DBD0; }
.field::after { content: ""; height: 1px; margin-top: calc(var(--space-xs) * -1); background: var(--ink-300); opacity: 0.5; }
.field::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-emph), background var(--dur-base) var(--ease-out); }
.field:focus-within::before { transform: scaleX(1); }
.field:focus-within .field__label { color: var(--ink); }
.field:has(.field__input:valid:not(:placeholder-shown))::before { transform: scaleX(1); background: var(--gold); }
.field:has(.field__input:valid:not(:placeholder-shown)) .field__label { color: var(--gold); }
.field:has(.field__input:invalid:not(:placeholder-shown):not(:focus))::before { transform: scaleX(1); background: var(--ink-300); }

.sn__foot { display: grid; gap: var(--space-sm); align-items: center; margin-top: var(--space-xl); }
.sn__foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; justify-self: start; }
.sn__foot .btn svg { width: 18px; flex: none; transition: transform var(--dur-base) var(--ease-emph); }
.sn__next:hover svg, .sn__submit:hover svg { transform: translateX(4px); }
.sn__back:hover svg { transform: translateX(-4px); }
.sn__hint { margin: 0; font-size: var(--step-0); font-weight: var(--weight-medium); color: var(--gold); }
.btn.is-nudged { animation: sn-nudge 420ms var(--ease-out); }
@keyframes sn-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 55% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }

/* --- The statements, one at a time ---------------------------------------- */
.sn__legend--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sn__prompt { margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--rule); max-width: none; font-size: var(--step--1); line-height: var(--leading-normal); color: var(--text-meta); }
.sn__cards { position: relative; display: grid; }
.sn__card { grid-area: 1 / 1; min-width: 0; }
.js .sn__card { opacity: 0; transform: translateX(36px); pointer-events: none; transition: opacity 480ms var(--ease-out), transform 640ms var(--ease-emph); }
.js .sn__card.is-left { transform: translateX(-36px); }
.js .sn__card.is-current { opacity: 1; transform: none; pointer-events: auto; }
.js .sn__card .sn__card-meta, .js .sn__card .sn__q, .js .sn__card .sn__scale { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease-out), transform 640ms var(--ease-emph); }
.js .sn__card.is-current .sn__card-meta, .js .sn__card.is-current .sn__q, .js .sn__card.is-current .sn__scale { opacity: 1; transform: none; }
.js .sn__card.is-current .sn__q { transition-delay: 90ms; }
.js .sn__card.is-current .sn__scale { transition-delay: 200ms; }
.js .sn__card .sn__pt { opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease-out), transform 480ms var(--ease-emph); }
.js .sn__card.is-current .sn__pt { opacity: 1; transform: none; transition-delay: calc(260ms + var(--k, 0) * 55ms); }
.js .sn__card .sn__card-meta::after { transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--ease-emph) 300ms; }
.js .sn__card.is-current .sn__card-meta::after { transform: scaleX(1); }
/* Each statement: a large thin numeral and the domain tag on one line, a
   short gold rule, then the statement itself in the light weight. */
.sn__card-meta { display: flex; align-items: baseline; gap: var(--space-lg); margin: 0 0 var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--rule); position: relative; }
.sn__card-meta::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 3rem; height: 2px; background: var(--gold); }
.sn__card-n { font-size: var(--step-4); font-weight: var(--weight-light); line-height: 0.9; letter-spacing: -0.04em; color: var(--navy); font-variant-numeric: tabular-nums; }
.sn__card-d { font-size: var(--step--1); font-weight: var(--weight-medium); font-stretch: var(--width-narrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sn__q {
  margin: 0;
  max-width: 36ch;
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* The scale: five marks on a line, 1 → 5. Hovering fills the line up to
   the mark; the chosen mark goes gold and the fill stays. */
.sn__scale { position: relative; margin-top: var(--space-2xl); padding-top: 1.1rem; }
.sn__scale-rail { position: absolute; left: 10%; right: 10%; top: calc(1.1rem + 9px); height: 2px; background: var(--paper-warm); }
.sn__scale-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left center; transition: transform 360ms var(--ease-emph); }
.sn__pts { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sn__pt { position: relative; display: grid; justify-items: center; gap: 0.6rem; padding: 0 0.25rem 0.5rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sn__pt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sn__pt-dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy-100); transition: transform 320ms var(--ease-emph), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.sn__pt-n { font-size: var(--step-1); font-weight: var(--weight-medium); color: var(--ink); line-height: 1; letter-spacing: -0.01em; transition: color var(--dur-base) var(--ease-out), transform 320ms var(--ease-emph); }
.sn__pt-l { font-size: var(--step--1); line-height: 1.25; text-align: center; color: var(--text-meta); max-width: 8rem; transition: color var(--dur-base) var(--ease-out); }
.sn__pt:hover .sn__pt-dot { border-color: var(--gold); transform: scale(1.2); }
.sn__pt:hover .sn__pt-n { color: var(--gold); }
.sn__pt:hover .sn__pt-l { color: var(--text-muted); }
.sn__pt input:focus-visible ~ .sn__pt-dot { box-shadow: 0 0 0 4px rgba(184, 137, 44, 0.3); }
.sn__pt.is-picked .sn__pt-dot { background: var(--gold); border-color: var(--gold); transform: scale(1.25); box-shadow: 0 0 0 6px rgba(184, 137, 44, 0.16); }
.sn__pt.is-picked .sn__pt-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold); animation: sn-ripple 700ms var(--ease-out) both; }
@keyframes sn-ripple { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.sn__pt-l { transition: color var(--dur-base) var(--ease-out), transform 320ms var(--ease-emph); }
.sn__pt:hover .sn__pt-l { transform: translateY(-1px); }
.sn__pt.is-picked .sn__pt-n { color: var(--gold); transform: translateY(-1px); }
.sn__pt.is-picked .sn__pt-l { color: var(--ink); }
/* marks before the hovered one read as "on the way" */
.sn__card.is-hovering .sn__pt:has(~ .sn__pt:hover) .sn__pt-dot { border-color: var(--gold); }
.sn__card.is-answered:not(.is-hovering) .sn__pt:has(~ .sn__pt.is-picked) .sn__pt-dot { border-color: var(--gold); }

.sn__foot--ask { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--space-md); margin-top: var(--space-2xl); }
.sn__back:disabled { opacity: 0.4; pointer-events: none; }
.sn__submit[hidden] { display: none; }
.js .sn__submit { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-emph), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.js .sn__submit.is-in { opacity: 1; transform: none; }

@media (max-width: 639px) {
  .sn__pt-l { display: none; }
  .sn__scale::after { content: "1 · Rarely true  ·  5 · A defining strength"; display: block; margin-top: var(--space-xs); font-size: var(--step--2); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-meta); text-align: center; white-space: pre; }
  .sn__foot--ask { grid-template-columns: 1fr; }
  .sn__foot .btn { width: 100%; }
  .sn__foot--ask .sn__back { order: 2; }
  .sn__foot--ask .sn__hint { order: 3; }
}
@media (max-width: 1023px) {
  .sn__rail { gap: var(--space-md); }
  .sn__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-md); border-top: 1px solid var(--rule); }
  .sn__step { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5rem; align-content: start; border-top: 0; border-bottom: 1px solid var(--rule); }
  .sn__step:last-child { border-bottom: 1px solid var(--rule); }
  .sn__step-t { font-size: var(--step--1); }
  .sn__step-s { display: none; }
  .sn__mark { display: none; }
}
@media (min-width: 640px) {
  .sn__row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .sn__foot { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-lg); }
}
@media (min-width: 1024px) {
  .sn { padding-block: var(--section-y) var(--section-y); }
  .sn__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-4xl); row-gap: var(--space-2xl); align-items: start; }
  .sn__mark { justify-self: start; width: min(100%, 240px); margin-top: var(--space-md); }
  .sn__stage { min-height: 28rem; }
}

/* --- The results (paper-warm) ------------------------------------------------
   One column, centred, that reads down the page. --------------------------- */
.snr { padding-block: var(--section-y); background: var(--paper-warm); color: var(--ink); }
.snr[hidden] { display: none; }
.snr__wrap { display: grid; justify-items: center; }
.snr__head { text-align: center; max-width: 60ch; }
.snr__headline { margin: var(--space-sm) auto 0; max-width: 24ch; font-size: var(--step-3); font-weight: var(--weight-regular); line-height: 1.08; letter-spacing: -0.024em; color: var(--ink); }
.snr__frame { margin: var(--space-lg) auto 0; max-width: 52ch; font-size: var(--step-0); color: var(--text-muted); }
/* the ring */
.ring { margin: var(--space-2xl) 0 0; width: min(100%, 560px); }
.ring__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ring__plate { fill: var(--paper); }
.ring__track { fill: none; stroke: var(--paper); stroke-width: 10; stroke-linecap: butt; }
.ring__fill { fill: none; stroke: var(--navy-300); stroke-width: 10; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.ring__seg--strength .ring__fill { stroke: var(--gold); }
.ring__seg--opportunity .ring__fill { stroke: var(--navy); }
.js .ring__fill { stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms var(--ease-emph); transition-delay: calc(400ms + var(--i, 0) * 160ms); }
.js .snr.is-in .ring__fill { stroke-dashoffset: calc(1 - var(--p, 0)); }
.ring text { font-family: var(--font-sans); }
.ring__pct { font-size: 28px; font-weight: var(--weight-regular); letter-spacing: -0.03em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.ring__pct-s { font-size: 13px; fill: var(--text-meta); letter-spacing: 0; }
.ring__seg--strength .ring__pct { fill: var(--gold); }
.ring__name { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-muted); }
.ring__org { font-size: 15px; font-weight: var(--weight-medium); letter-spacing: -0.01em; fill: var(--navy); }
.ring__sub { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--text-meta); }
.js .ring__seg text { opacity: 0; transition: opacity 600ms var(--ease-out); transition-delay: calc(900ms + var(--i, 0) * 160ms); }
.js .snr.is-in .ring__seg text { opacity: 1; }
.ring__legend { display: none; margin: var(--space-md) 0 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); }
.ring__key { display: grid; gap: 0.1rem; padding-top: var(--space-xs); border-top: 1px solid var(--rule); }
.ring__key-p { font-size: var(--step-2); letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring__key-p small { font-size: 0.5em; color: var(--text-meta); margin-left: 0.1em; }
.ring__key--strength .ring__key-p { color: var(--gold); }
.ring__key-n { font-size: var(--step--2); font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

/* the two calls */
.snr__pair { display: grid; gap: var(--space-xl); width: 100%; max-width: 64rem; margin-top: var(--space-3xl); }
.snr__call { position: relative; padding: var(--space-lg) 0 0; border-top: 1px solid var(--rule); }
.snr__call::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--gold); transform: scaleX(0.06); transform-origin: left center; transition: transform 700ms var(--ease-emph); }
.snr__call:hover::before { transform: scaleX(1); }
.snr__call--opportunity::before { background: var(--navy); }
.snr__call-k { margin: 0; font-size: var(--step--1); font-weight: var(--weight-medium); font-stretch: var(--width-narrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.snr__call-t { margin: var(--space-xs) 0 0; font-size: var(--step-2); font-weight: var(--weight-regular); letter-spacing: -0.02em; line-height: 1.1; color: var(--navy); }
.snr__call--strength .snr__call-t { color: var(--gold); }
.snr__call-b { margin: var(--space-sm) 0 0; max-width: 46ch; color: var(--text-muted); }

/* the blocks that follow: centred heading, then the content */
.snr__block { width: 100%; max-width: 64rem; margin-top: var(--space-4xl); }
.snr__sub { margin: 0 0 var(--space-xl); text-align: center; font-size: var(--step-2); font-weight: var(--weight-regular); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.snr__sub em { font-style: italic; }
/* the four domains, as rows */
.snr__domains { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--rule); }
.snr__domain { display: grid; gap: var(--space-lg); padding: var(--space-2xl) 0; border-bottom: 1px solid var(--rule); position: relative; }
/* under the pointer a gold line runs the row's top edge, the bar brightens
   and the number lifts a touch */
.snr__domain::before, .snr__mean::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 600ms var(--ease-emph); }
.snr__domain:hover::before, .snr__mean:hover::before { transform: scaleX(1); }
.snr__pct { transition: transform var(--dur-slow) var(--ease-emph), color var(--dur-base) var(--ease-out); display: inline-block; }
.snr__domain:hover .snr__pct { transform: translateY(-3px); }
.snr__bar-fill { transition: filter var(--dur-base) var(--ease-out); }
.snr__domain:hover .snr__bar-fill { filter: brightness(1.12); }
/* left: what the domain is; right: what the answers say about it */
.snr__domain-side { display: grid; align-content: start; gap: var(--space-2xs); }
.snr__domain-t { margin: 0; font-size: var(--step-1); font-weight: var(--weight-regular); letter-spacing: -0.01em; color: var(--ink); }
.snr__domain-d { margin: var(--space-xs) 0 0; max-width: 32ch; font-size: var(--step--1); line-height: var(--leading-normal); color: var(--text-meta); }
.snr__domain-s { margin: 0 0 var(--space-sm); display: flex; align-items: baseline; gap: 0.15rem; }
.snr__pct { font-size: var(--step-4); font-weight: var(--weight-light); letter-spacing: -0.04em; line-height: 0.95; color: var(--ink); font-variant-numeric: tabular-nums; }
.snr__pct-sign { font-size: var(--step-0); color: var(--text-meta); }
.snr__band { margin: 0 0 0 var(--space-md); font-size: var(--step--1); font-weight: var(--weight-medium); font-stretch: var(--width-narrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.snr__domain--strength .snr__pct, .snr__domain--strength .snr__band { color: var(--gold); }
.snr__domain-main { display: grid; align-content: start; gap: var(--space-sm); }
.snr__bar { position: relative; height: 3px; background: var(--paper); }
.snr__bar-fill { position: absolute; inset: 0; background: var(--navy-300); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.snr__domain--strength .snr__bar-fill { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.snr__domain--opportunity .snr__bar-fill { background: var(--navy); }
.snr__bar-tick { position: absolute; top: -3px; width: 1px; height: 9px; background: var(--navy-100); }
.js .snr__bar-fill { transform: scaleX(0); transition: transform 1100ms var(--ease-emph), filter var(--dur-base) var(--ease-out); transition-delay: calc(350ms + var(--i, 0) * 140ms), 0s; }
.js .snr.is-in .snr__bar-fill { transform: scaleX(var(--p, 0)); }
.snr__domain-k { margin: var(--space-lg) 0 0; font-size: var(--step--1); font-weight: var(--weight-medium); font-stretch: var(--width-narrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.snr__domain-i { margin: 0; max-width: 52ch; font-size: var(--step-1); font-weight: var(--weight-light); font-style: italic; line-height: 1.42; letter-spacing: -0.004em; color: var(--ink); }
.snr__domain-i strong { font-weight: var(--weight-regular); font-style: normal; color: var(--gold); }
.snr__domain-raw { margin: var(--space-md) 0 0; font-size: var(--step--2); letter-spacing: 0.02em; color: var(--text-meta); }
/* what this may mean: the same row as a domain, so the list runs on. */
.snr__mean { width: 100%; max-width: 64rem; display: grid; gap: var(--space-lg); padding: var(--space-2xl) 0; border-bottom: 1px solid var(--rule); position: relative; }
.snr__mean .snr__domain-t em { font-style: italic; }
.snr__mean .snr__domain-k { margin-top: 0; }
/* what happens next: a paper panel, title left, buttons right */
.snr__next { width: 100%; max-width: 64rem; margin-top: var(--space-3xl); padding: var(--space-2xl) var(--space-xl); background: var(--paper); border: 1px solid var(--rule); display: grid; gap: var(--space-xl); transition: transform var(--dur-slow) var(--ease-emph), box-shadow var(--dur-slow) var(--ease-out); }
.snr__next:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(15, 41, 66, 0.10); }
.snr__next .eyebrow { margin: 0; }
.snr__next-t { margin: var(--space-sm) 0 0; max-width: 16ch; font-size: var(--step-3); font-weight: var(--weight-regular); line-height: 1.06; letter-spacing: -0.024em; color: var(--ink); }
.snr__next-t em { font-style: italic; }
.snr__next-b { margin: var(--space-md) 0 0; max-width: 42ch; color: var(--text-muted); }
.snr__next-actions { display: grid; gap: var(--space-sm); align-content: center; }
.snr__next-actions .btn { justify-content: center; }
.snr__note { margin: var(--space-xs) 0 0; font-size: var(--step--1); color: var(--gold); }
/* your responses */
.snr__responses { width: 100%; max-width: 64rem; margin-top: var(--space-3xl); border-top: 1px solid var(--rule); }
.snr__responses summary { cursor: pointer; padding: var(--space-md) 0; font-size: var(--step-0); font-weight: var(--weight-medium); color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.snr__responses summary::-webkit-details-marker { display: none; }
.snr__responses summary::before { content: ""; width: 0.5rem; height: 0.5rem; border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--dur-base) var(--ease-out); }
.snr__responses[open] summary::before { transform: rotate(45deg); }
.snr__table { width: 100%; border-collapse: collapse; font-size: var(--step--1); margin: var(--space-sm) 0 var(--space-lg); }
.snr__table th, .snr__table td { padding: 0.6rem 0.75rem 0.6rem 0; vertical-align: top; text-align: left; border-bottom: 1px solid var(--rule); }
.snr__table th { font-weight: var(--weight-medium); font-stretch: var(--width-narrow); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--step--2); color: var(--text-muted); }
.snr__table td { color: var(--text-muted); }
.snr__table td strong { color: var(--ink); font-weight: var(--weight-medium); }
.snr__table td:nth-child(2) { white-space: nowrap; }
.snr__table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.snr__table tbody tr:hover { background: rgba(244, 242, 237, 0.7); }
.js .snr__responses[open] tbody tr { animation: snr-row 500ms var(--ease-out) both; animation-delay: calc(var(--r, 0) * 50ms); }
@keyframes snr-row { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.snr__legal { margin: var(--space-xl) 0 0; max-width: 72ch; text-align: center; font-size: var(--step--2); line-height: var(--leading-normal); color: var(--text-meta); }
/* results arrive block by block */
.js .snr__wrap > * { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-emph); }
.js .snr.is-in .snr__wrap > * { opacity: 1; transform: none; }
.js .snr.is-in .snr__wrap > :nth-child(2) { transition-delay: 160ms; }
.js .snr.is-in .snr__wrap > :nth-child(3) { transition-delay: 300ms; }
.js .snr.is-in .snr__wrap > :nth-child(4) { transition-delay: 380ms; }
.js .snr.is-in .snr__wrap > :nth-child(n+5) { transition-delay: 520ms; }
@media (max-width: 639px) {
  .ring__svg { width: 86%; margin-inline: auto; }
  .ring__seg text { display: none; }
  .ring__legend { display: grid; }
  .snr__table thead { display: none; }
  .snr__table tr { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0 var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--rule); }
  .snr__table td { border: 0; padding: 0; }
  .snr__table td:nth-child(2) { grid-column: 2; font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-meta); }
  .snr__table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .snr__table td:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
  .snr__next { padding: var(--space-xl) var(--space-lg); }
}
@media (min-width: 768px) {
  .snr__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3xl); }
  .snr__domain { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-4xl); }
  .snr__mean { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-4xl); }
  .snr__mean .snr__domain-main { padding-top: var(--space-2xs); }
  .snr__next { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); padding: var(--space-2xl) var(--space-2xl); }
}

/* --- Print: the results only, on white --------------------------------------- */
@media print {
  .site-header, .site-footer, .ph, .sn, .snr__next { display: none !important; }
  .snr { display: block !important; background: #fff !important; color: #000; padding: 0; }
  .ring__plate, .ring__track { fill: none; stroke: #ddd; }
  .ring__fill { stroke-dashoffset: calc(1 - var(--p, 0)) !important; transition: none !important; }
  .snr * { color: #000 !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .snr__bar { background: #ddd; }
  .snr__bar-fill { background: #B8892C !important; transform: scaleX(var(--p, 0)) !important; }
  .snr__responses[open] summary::before, .snr__responses summary::before { display: none; }
  .snr__responses { display: block; }
  .snr__table th, .snr__table td { border-color: #ccc; }
}

@media (prefers-reduced-motion: reduce) {
  .js .sn__panel.is-current { animation: none; }
  .js .sn__card, .js .sn__card.is-left { transition: none; transform: none; }
  .sn__mark, .sn__mark:hover, .sn__line-fill, .sn__scale-fill, .sn__mark .aperture__blades, .sn__mark .aperture__centre, .sn__pt-dot, .sn__pt-n, .field::before { transition: none; }
  .btn.is-nudged { animation: none; }
  .js .sn__card .sn__card-meta, .js .sn__card .sn__q, .js .sn__card .sn__scale, .js .sn__card .sn__pt { opacity: 1; transform: none; transition: none; }
  .sn__pt.is-picked .sn__pt-dot::after, .sn__step.is-done .sn__step-t::after, .sn__mark.is-pulsing, .js .snr__responses[open] tbody tr { animation: none; }
  .snr__domain::before, .snr__mean::before, .snr__call::before, .snr__next, .snr__pct { transition: none; }
  .js .snr__wrap > *, .js .snr__bar-fill, .js .ring__fill, .js .ring__seg text { transition: none; }
}