/*
Theme Name: Silver Rose
Theme URI: https://silverrosemanagement.com
Author: Silver Rose Management
Description: Custom theme for Silver Rose Management. Montserrat and Inter typography, wine-black and chrome palette, silver-rose opening film, creator montage, scroll-driven section artwork, results, animated counters, FAQ, creator video testimonials.
Version: 3.7.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: silver-rose
*/

:root {
  --ink: #150a0d;
  --ink-2: #1c0e12;
  --wine: #3b0e1c;
  --wine-2: #2a0a15;
  --garnet: #8c2036;
  --garnet-bright: #a92842;
  --chrome: #c7ccd2;
  --chrome-dim: #8f959c;
  --chrome-bright: #f3f4f6;
  --rose-taupe: #a9776b;
  --hairline: rgba(199, 204, 210, 0.18);

  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1180px;

  /* The signature easing: a long, expensive deceleration. Everything that moves
     on this site moves on this curve, so the whole page shares one physics. */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --dur: 0.75s;
  /* overshoot curve — the one at-agency uses on its buttons */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chrome);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

img, video { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--rose-taupe);
  outline-offset: 3px;
}

/* ---------- Header ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--wine-2);
  color: var(--chrome-bright);
  font-size: 0.9rem;
  border: 1px solid var(--rose-taupe);
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(21, 10, 13, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.wordmark-mark {
  width: auto;
  height: 52px;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
  transition: transform var(--dur) var(--ease);
}

.wordmark:hover .wordmark-mark { transform: scale(1.06) rotate(-2deg); }

.wordmark-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.14rem;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-bright);
}

.wordmark-text > span {
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  color: var(--rose-taupe);
  margin-top: 3px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.main-nav a {
  color: var(--chrome);
  transition: color 0.2s ease;
}

.main-nav a:hover { color: var(--chrome-bright); }

.nav-cta {
  padding: 9px 20px;
  border: 1px solid var(--chrome-dim);
  border-radius: 2px;
}

.nav-cta:hover {
  border-color: var(--chrome-bright);
  color: var(--chrome-bright);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 128px 0 0;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 18% 22%, rgba(140, 32, 54, 0.55), transparent 62%),
    radial-gradient(ellipse 45% 55% at 82% 68%, rgba(169, 119, 107, 0.30), transparent 66%),
    radial-gradient(ellipse 40% 40% at 60% 12%, rgba(199, 204, 210, 0.10), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--wine-2) 55%, var(--ink) 100%);
  background-size: 170% 170%, 170% 170%, 150% 150%, 100% 100%;
  animation: drift 34s ease-in-out infinite alternate;
}

/* Slow metallic light sweep — the "chrome" in Silver Rose catching the light. */
.hero-sheen {
  position: absolute;
  inset: -20% -40%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 38%,
    rgba(199, 204, 210, 0.07) 46%,
    rgba(243, 244, 246, 0.14) 50%,
    rgba(199, 204, 210, 0.07) 54%,
    transparent 62%
  );
  animation: sheen 13s ease-in-out infinite;
}

@keyframes sheen {
  0%, 100% { transform: translateX(-38%); opacity: 0; }
  40%      { opacity: 1; }
  60%      { opacity: 1; }
  50%      { transform: translateX(0%); }
  99%      { transform: translateX(38%); opacity: 0; }
}

/* Fine grain keeps the large dark gradients from banding and adds depth. */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  pointer-events: none;
}

.hero-video:not([src]):not(:has(source)) { display: none; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(21, 10, 13, 0.55) 0%, rgba(21, 10, 13, 0.25) 45%, rgba(21, 10, 13, 0.85) 100%);
  pointer-events: none;
}

@keyframes drift {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 30% 20%, 70% 80%, 0 0; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 96px;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--chrome-bright);
  max-width: 19ch;
  margin: 0 0 28px;
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s forwards;
}

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--chrome);
  max-width: 48ch;
  margin: 0 0 40px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Buttons — the mechanics at-agency.co uses, rebuilt in our crimson: a gradient
   that slides on hover, a spring-curve lift, a widening glow, and a single
   light sweep across the face. The overshoot in the easing is what makes it
   feel physical rather than a colour swap. */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 3.5rem;
  padding: 0 2.6rem;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.22s var(--spring), box-shadow 0.22s ease,
              filter 0.22s ease, background-position 0.45s ease,
              border-color 0.22s ease, color 0.22s ease;
}

/* the sweep */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 1;
  width: 50%;
  height: 100%;
  transform: skew(-20deg);
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0));
  pointer-events: none;
}

.btn:hover::after { animation: btn-shine 0.55s ease forwards; }

@keyframes btn-shine {
  to { left: 125%; }
}

.btn:hover { transform: translateY(-2px) scale(1.018); }
.btn:active { transform: translateY(0) scale(0.995); filter: brightness(0.98); transition-duration: 0.1s; }

.btn-primary {
  background: linear-gradient(135deg, #6d162a, var(--garnet-bright) 40%, var(--garnet), #5e1224);
  background-size: 200% 200%;
  background-position: 0% center;
  border: 1px solid rgba(214, 92, 118, 0.55);
  color: var(--chrome-bright);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 18px rgba(169, 40, 66, 0.35), 0 2px 10px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
  background-position: 100% center;
  border-color: rgba(214, 92, 118, 0.85);
  filter: brightness(1.12);
  box-shadow: 0 0 40px rgba(169, 40, 66, 0.55), 0 6px 20px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-ghost {
  background: linear-gradient(135deg, rgba(199,204,210,0.08), rgba(199,204,210,0.02) 45%, rgba(199,204,210,0.07));
  background-size: 200% 200%;
  background-position: 0% center;
  border: 1px solid rgba(199, 204, 210, 0.38);
  color: var(--chrome-bright);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-ghost:hover {
  background-position: 100% center;
  border-color: rgba(243, 244, 246, 0.85);
  box-shadow: 0 0 30px rgba(199, 204, 210, 0.22), 0 6px 20px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Nav CTA borrows the same language at a smaller size */
.nav-cta {
  height: 2.5rem;
  padding: 0 1.3rem;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgba(214, 92, 118, 0.5);
  background: linear-gradient(135deg, rgba(140,32,54,0.55), rgba(169,40,66,0.75));
  color: var(--chrome-bright);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.86rem;
  transition: transform 0.22s var(--spring), box-shadow 0.22s ease, border-color 0.22s ease;
}

.nav-cta:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(214, 92, 118, 0.9);
  box-shadow: 0 0 22px rgba(169, 40, 66, 0.5), 0 4px 14px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .nav-cta:hover { transform: none; }
  .btn:hover::after { animation: none; }
}

/* ---------- Stat ledger ---------- */

.stat-ledger {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
}

.stat {
  padding: 28px 24px 32px 0;
  border-right: 1px solid var(--hairline);
}

.stat:last-child { border-right: none; }

.stat-figure {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--chrome-bright);
  margin-bottom: 12px;
}

.stat-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  max-width: 26ch;
}

/* ---------- Page intro (subpages) ---------- */

.page-intro {
  padding: 72px 0 96px;
}

.page-kicker {
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rose-taupe);
  margin: 0 0 22px;
}

.page-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--chrome-bright);
  max-width: 22ch;
  margin: 0;
}

.page-lede {
  font-size: 1.1rem;
  color: var(--chrome);
  max-width: 52ch;
  margin: 28px 0 0;
}

/* ---------- Application form ---------- */

.application {
  padding: 0 0 120px;
}

.app-form {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--chrome-bright);
}

.optional {
  font-weight: 400;
  color: var(--chrome-dim);
  margin-left: 6px;
}

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--chrome-bright);
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.2s ease;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--chrome-dim); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--rose-taupe);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--chrome-dim) 50%), linear-gradient(135deg, var(--chrome-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field textarea { resize: vertical; }

.field-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.field-check input {
  margin-top: 4px;
  accent-color: var(--garnet);
  width: 16px;
  height: 16px;
}

.field-check label {
  font-weight: 400;
  color: var(--chrome);
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.form-actions .btn { align-self: flex-start; cursor: pointer; border: none; font-family: var(--font-body); }

.form-note {
  font-size: 0.88rem;
  color: var(--chrome-dim);
  margin: 0;
}

.form-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Framework (About page) ---------- */

.framework {
  padding: 96px 0;
  background: var(--wine-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.framework-intro {
  font-size: 1.08rem;
  color: var(--chrome);
  max-width: 56ch;
  margin: -16px 0 48px;
}

.framework-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.framework-list li {
  display: flex;
  gap: 20px;
}

.framework-list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--chrome-bright);
  margin: 0 0 8px;
}

.framework-list p {
  font-size: 1rem;
  color: var(--chrome);
  max-width: 60ch;
  margin: 0;
}

/* ---------- Statement ---------- */

.statement {
  padding: 140px 0;
  background: var(--ink);
}

.statement-line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
  color: var(--chrome-bright);
  max-width: 18ch;
  margin: 0 0 32px;
}

.statement-sub {
  font-size: 1.08rem;
  color: var(--chrome);
  max-width: 52ch;
  margin: 0;
}

.values {
  padding: 96px 0;
}

/* ---------- Section heading ---------- */

.section-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: var(--chrome-bright);
  margin: 0 0 48px;
}

/* ---------- Services ---------- */

.services {
  padding: 96px 0;
  background: var(--wine-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.service-list li {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
}

.service-list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--chrome-bright);
  margin: 0;
}

.service-list p {
  font-size: 1rem;
  color: var(--chrome);
  max-width: 52ch;
  margin: 0;
}

/* ---------- Comparison ---------- */

.comparison {
  padding: 96px 0;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0 24px 20px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--chrome-dim);
}

.comparison-table th:last-child {
  color: var(--chrome-bright);
}

.comparison-table td {
  padding: 22px 24px 22px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.02rem;
  vertical-align: top;
}

.comparison-table td:first-child {
  color: var(--chrome-dim);
  width: 42%;
}

.comparison-table td:last-child {
  color: var(--chrome-bright);
}

/* ---------- Process ---------- */

.process {
  padding: 96px 0;
  background: var(--wine-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.process-list li {
  display: flex;
  gap: 18px;
}

.process-index {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--rose-taupe);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.process-list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--chrome-bright);
  margin: 0 0 8px;
}

.process-list p {
  font-size: 0.98rem;
  color: var(--chrome);
  margin: 0;
}

/* ---------- Testimonials ---------- */

.testimonials {
  padding: 120px 0;
}

.testimonials-lede {
  max-width: 46ch;
  margin: -8px 0 40px;
  color: var(--chrome);
  font-size: 1.02rem;
  line-height: 1.6;
}

.testimonial-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.testimonial-card {
  margin: 0;
  position: relative;
}

.testimonial-player {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 3px;
}

.testimonial-player:focus-visible {
  outline: 2px solid var(--rose-taupe);
  outline-offset: 3px;
}

/* The name, age and country are burned into the footage, so this line exists
   for screen readers and search engines rather than for sighted readers. */
.testimonial-who {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1080px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .testimonials { padding: 84px 0; }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ---------- Closing ---------- */

.closing {
  padding: 140px 0;
  background: var(--wine-2);
  border-top: 1px solid var(--hairline);
  text-align: left;
}

.closing-line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--chrome-bright);
  margin: 0 0 40px;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.9rem;
  color: var(--chrome-dim);
}

.footer-nav a:hover { color: var(--chrome-bright); }

.footer-copy {
  font-size: 0.85rem;
  color: var(--chrome-dim);
  margin: 0;
}

/* ---------- Founder ---------- */

.founder {
  padding: 96px 0;
  background: var(--wine-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.founder-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}

.founder-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: linear-gradient(160deg, var(--wine) 0%, var(--ink-2) 100%);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

.founder-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--chrome-bright);
  margin: 0 0 20px;
}

.founder p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--chrome);
  max-width: 60ch;
  margin: 0 0 16px;
}

.founder .page-kicker { margin-bottom: 10px; }

.process-list-4 { grid-template-columns: repeat(4, 1fr); gap: 40px; }

.process-more {
  margin: 48px 0 0;
  font-size: 1rem;
}

.process-more a {
  color: var(--chrome-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Roadmap ---------- */

.roadmap {
  padding: 0 0 96px;
}

.roadmap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
  position: relative;
}

.roadmap-list::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--hairline);
}

.roadmap-list li {
  display: flex;
  gap: 28px;
  padding: 0 0 48px;
  position: relative;
}

.roadmap-list li:last-child { padding-bottom: 0; }

.roadmap-badge {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--rose-taupe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--chrome-bright);
}

.roadmap-list h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--chrome-bright);
  margin: 12px 0 10px;
}

.roadmap-list p {
  font-size: 1.02rem;
  color: var(--chrome);
  max-width: 60ch;
  margin: 0;
}

.roadmap-note {
  font-size: 0.98rem;
  color: var(--chrome-dim);
  max-width: 60ch;
  margin: 56px 0 0 84px;
}

.closing-sub {
  font-size: 1.08rem;
  color: var(--chrome);
  max-width: 48ch;
  margin: -16px 0 40px;
}

/* ---------- Roster ---------- */

.roster {
  padding: 0 0 96px;
}

.roster-empty {
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 56px 40px;
  max-width: 560px;
}

.roster-empty-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--chrome-bright);
  margin: 0 0 8px;
}

.roster-empty p:last-child {
  color: var(--chrome);
  margin: 0;
}

/* ---------- Inquiry types ---------- */

.inquiry-types {
  padding: 0 0 72px;
}

.inquiry-types .service-list { max-width: 760px; }

/* ---------- Legal ---------- */

.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--chrome-dim);
  margin: 24px 0 0;
}

.legal {
  padding: 0 0 120px;
}

.legal-body {
  max-width: 720px;
  margin-left: 0;
}

.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--chrome-bright);
  margin: 44px 0 12px;
}

.legal-body p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--chrome);
  margin: 0 0 16px;
}

.legal-body a,
.page-lede a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--chrome-bright);
}

.legal-body strong { color: var(--chrome-bright); font-weight: 500; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .field-row { grid-template-columns: 1fr; }
  .service-list li { grid-template-columns: 1fr; gap: 10px; }
  .process-list, .process-list-4 { grid-template-columns: 1fr; gap: 32px; }
  .founder-inner { grid-template-columns: 1fr; gap: 32px; }
  .founder-portrait { max-width: 240px; }
  .roadmap-note { margin-left: 0; }
  .roadmap-list::before { left: 23px; }
  .roadmap-badge { width: 48px; height: 48px; font-size: 0.95rem; }
  .roadmap-list li { gap: 20px; }
  .stat-ledger { grid-template-columns: 1fr 1fr; }
  .stat { padding: 22px 16px 22px 0; }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .comparison-table td:first-child { width: auto; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .stat-ledger { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--hairline); padding: 20px 0; }
  .stat:last-child { border-bottom: none; }
  .wordmark-mark { height: 40px; }
  .wordmark-text { font-size: 0.94rem; }
  .header-inner { height: 72px; }
  .main-nav { gap: 18px; font-size: 0.85rem; }
  .main-nav a:not(.nav-cta) { display: none; }
  .nav-cta { padding: 7px 14px; }
  .hero { padding-top: 88px; }
  .comparison-table { font-size: 0.9rem; }
  .comparison-table th, .comparison-table td { padding-right: 12px; }
}

/* ==========================================================================
   Opening sequence — plays intro.mp4 (the rose blooming, camera passing through
   its centre), then hands off to the looping montage already running in the hero.
   Renders only when the video file exists; otherwise the page opens on the hero.
   ========================================================================== */

.intro { display: none; }

body.intro-playing .intro,
body.intro-done .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

body.intro-playing { overflow: hidden; }

.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The bloom of light at the moment of passing through. */
.intro-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(243, 244, 246, 0.95) 0%, rgba(199, 204, 210, 0.45) 26%, rgba(140, 32, 54, 0.18) 46%, transparent 70%);
  opacity: 0;
}

.intro.is-crossing .intro-flash { animation: intro-flash 0.75s ease-out both; }

@keyframes intro-flash {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* A soft floor of shade so the wordmark holds up even over bright chrome petals. */
.intro-shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 4, 5, 0.45) 45%, rgba(8, 4, 5, 0.82) 100%);
  animation: intro-mark 3.4s ease-out 0.4s both;
}

.intro-mark {
  position: absolute;
  left: 50%;
  bottom: 14%;
  translate: -50% 0;
  text-align: center;
  pointer-events: none;
  animation: intro-mark 3.4s ease-out 0.4s both;
}

.intro-mark span {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.6vw, 2.9rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--chrome-bright);
  text-shadow: 0 2px 28px rgba(8, 4, 5, 0.9), 0 0 44px rgba(8, 4, 5, 0.7);
}

.intro-mark small {
  display: block;
  margin-top: 14px;
  text-shadow: 0 2px 18px rgba(8, 4, 5, 0.9);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--rose-taupe);
}

@keyframes intro-mark {
  0%   { opacity: 0; transform: translateY(14px); }
  18%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

.intro-skip {
  position: absolute;
  right: 26px;
  bottom: 22px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  background: rgba(21, 10, 13, 0.4);
  border: 1px solid var(--hairline);
  border-radius: 1px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.intro-skip:hover { color: var(--chrome-bright); border-color: var(--chrome-dim); }

.intro.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
}

/* Hero content waits behind the intro, then rises into place. */
body.intro-playing .hero-inner,
body.intro-playing .stat-ledger { opacity: 0; }

body.intro-done .hero-inner { animation: hero-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.intro-done .stat-ledger { animation: hero-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.intro-playing .intro, body.intro-done .intro { display: none; }
  body.intro-playing { overflow: auto; }
  body.intro-playing .hero-inner, body.intro-playing .stat-ledger { opacity: 1; }
}

/* ==========================================================================
   Premium layer — a shared motion language, a Results section built on real
   creator dashboards, and an FAQ that answers what models actually ask.
   ========================================================================== */

/* ---------- Small caps labels in mono ---------- */

.page-kicker,
.stat-label,
.video-note,
.legal-updated {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.15em;
}

/* ---------- Cursor trail ---------- */

/* A slow crimson haze that follows the pointer. Sits under everything and never
   takes a click. Hidden on touch devices and for reduced-motion viewers, where
   the script also refuses to start. */
.cursor-haze {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.cursor-haze.is-live { opacity: 1; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-haze { display: none; }
}

/* Content sits above the haze. */
.site-header { position: sticky; z-index: 40; }
main, .site-footer { position: relative; z-index: 2; }
.hero-inner, .stat-ledger { z-index: 4; }

/* ---------- Header: retreats on the way down, returns on the way up ---------- */

.site-header {
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-header.is-tucked { transform: translate3d(0, -100%, 0); }

/* ---------- Reveal on scroll ---------- */

/* Sections rise once as they enter. The hidden resting state only applies once
   the script has confirmed it is running and able to reveal them again — with
   JS off, or in a backgrounded tab where observers never fire, the content
   simply renders in place rather than being stranded at zero opacity. */
.js-reveal {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

html.reveal-armed .js-reveal {
  opacity: 0;
  transform: translateY(22px);
}

html.reveal-armed .js-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.reveal-armed .js-reveal { opacity: 1; transform: none; }
}

/* ---------- Results ---------- */

.results {
  padding: 120px 0;
  background: var(--ink);
  border-top: 1px solid var(--hairline);
}

.results-lede {
  font-size: 1.08rem;
  color: var(--chrome);
  max-width: 58ch;
  margin: -28px 0 56px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--ink-2);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.result-card:hover {
  border-color: var(--rose-taupe);
  transform: translateY(-4px);
}

/* The dashboard sits inset until you hover, then fills its frame — the reveal
   the reference site uses on its cards. */
.result-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wine-2);
}

.result-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  clip-path: inset(10px round 4px);
  transform: scale(1.01);
  transition: clip-path var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.result-card:hover .result-shot img {
  clip-path: inset(0 round 0);
  transform: scale(1.04);
}

/* Keeps the white dashboard from fighting the dark page. */
.result-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 10, 13, 0) 55%, rgba(21, 10, 13, 0.75) 100%);
}

.result-body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.result-rank {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-taupe);
}

.result-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--chrome-bright);
  margin: 0;
}

.result-headline small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.result-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.result-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.92rem;
}

.result-rows dt,
.result-rows .k {
  color: var(--chrome-dim);
}

.result-rows .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: var(--chrome-bright);
  text-align: right;
}

.result-rows .up { color: #5fbf8f; }

.results-note {
  font-size: 0.92rem;
  color: var(--chrome-dim);
  max-width: 76ch;
  margin: 40px 0 0;
}

/* ---------- FAQ ---------- */

.faq {
  padding: 120px 0;
  background: var(--wine-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.faq-lede {
  font-size: 1.08rem;
  color: var(--chrome);
  max-width: 56ch;
  margin: -28px 0 48px;
}

.faq-list {
  border-top: 1px solid var(--hairline);
  max-width: 860px;
}

.faq-item { border-bottom: 1px solid var(--hairline); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--chrome);
  transition: color var(--dur) var(--ease);
}

.faq-q:hover,
.faq-item.is-open .faq-q { color: var(--chrome-bright); }

/* A plus that becomes a minus. */
.faq-sign {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 6px;
}

.faq-sign::before,
.faq-sign::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--rose-taupe);
  transition: transform var(--dur) var(--ease);
}

.faq-sign::after { transform: rotate(90deg); }
.faq-item.is-open .faq-sign::after { transform: rotate(0deg); }

.faq-a {
  overflow: hidden;
  height: 0;
  transition: height var(--dur) var(--ease);
}

.faq-a p {
  font-size: 1rem;
  color: var(--chrome);
  max-width: 68ch;
  margin: 0 0 24px;
}

.faq-a p:first-child { margin-top: -4px; }

.faq-footnote {
  font-size: 0.98rem;
  color: var(--chrome-dim);
  margin: 40px 0 0;
}

.faq-footnote a {
  color: var(--chrome-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .result-grid { grid-template-columns: 1fr; }
  .results, .faq { padding: 88px 0; }
}

@media (max-width: 640px) {
  .btn { padding: 16px 26px; font-size: 0.68rem; }
  .result-body { padding: 22px 20px 26px; }
}

/* ==========================================================================
   Scroll stage — each major section is its own screen carrying one idea, with
   artwork that moves against the scroll. Motion is driven by a --p custom
   property the script updates (0 as a section enters, 1 as it leaves), so the
   CSS stays declarative and nothing animates without JS.
   ========================================================================== */

.stage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: clip;
  --p: 0.5;
}

/* Sections that hold a lot (services, FAQ) breathe instead of being pinned. */
.stage-tall { min-height: auto; padding: clamp(96px, 12vh, 168px) 0; }

.stage > .wrap { position: relative; z-index: 2; width: 100%; }

/* ---------- Section artwork ---------- */

.stage-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.stage-art svg { position: absolute; display: block; }

.stage-art .art-main {
  right: -6%;
  top: 50%;
  width: min(46vw, 620px);
  translate: 0 -50%;
  opacity: 0.5;
  transform: translateY(calc((var(--p) - 0.5) * -90px)) rotate(calc((var(--p) - 0.5) * 8deg));
}

.stage-art .art-far {
  left: -10%;
  bottom: -12%;
  width: min(38vw, 460px);
  opacity: 0.22;
  transform: translateY(calc((var(--p) - 0.5) * 140px));
}

/* A soft crimson bloom that drifts with the scroll, so the ground itself moves */
.stage-glow {
  position: absolute;
  z-index: 0;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.5;
  background: radial-gradient(circle, rgba(140, 32, 54, 0.55), rgba(140, 32, 54, 0) 68%);
  transform: translate3d(0, calc((var(--p) - 0.5) * -160px), 0);
}

.stage-glow-l { left: -22%; top: 8%; }
.stage-glow-r { right: -20%; bottom: 2%; background: radial-gradient(circle, rgba(169, 119, 107, 0.34), rgba(169, 119, 107, 0) 68%); }

/* Headings and body drift at different rates — the depth cue that makes the
   page feel like it has layers rather than one flat plane. */
.stage .section-heading,
.stage .statement-line,
.stage .closing-line { transform: translateY(calc((var(--p) - 0.5) * -34px)); }

.stage .statement-sub,
.stage .closing-sub,
.stage .results-lede,
.stage .faq-lede { transform: translateY(calc((var(--p) - 0.5) * -18px)); }

@media (prefers-reduced-motion: reduce) {
  .stage-art .art-main, .stage-art .art-far, .stage-glow,
  .stage .section-heading, .stage .statement-line, .stage .closing-line,
  .stage .statement-sub, .stage .closing-sub, .stage .results-lede, .stage .faq-lede {
    transform: none !important;
  }
}

/* ---------- Statement ---------- */

.statement.stage { padding: 0; }

.statement-line { max-width: 20ch; }

.statement-mark {
  display: block;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--garnet-bright), transparent);
  margin: 0 0 34px;
}

/* ---------- Services as a numbered ledger ---------- */

.service-list li {
  position: relative;
  align-items: start;
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}

.service-list li::before {
  counter-increment: svc;
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 32px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--garnet-bright);
  opacity: 0.85;
}

.service-list { counter-reset: svc; }
.service-list li { padding-left: 52px; }

.service-list li:hover { background: linear-gradient(90deg, rgba(140, 32, 54, 0.14), transparent 70%); }

/* ---------- Comparison as a face-off ---------- */

.comparison-table td:last-child,
.comparison-table th:last-child { position: relative; padding-left: 26px; }

.comparison-table td:last-child::before,
.comparison-table th:last-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--garnet-bright), transparent);
}

.comparison-table tr { transition: background var(--dur) var(--ease); }
.comparison-table tbody tr:hover { background: rgba(140, 32, 54, 0.10); }

/* ---------- Process as a track ---------- */

.process-list li {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  transition: border-color var(--dur) var(--ease);
}

.process-list li::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 0;
  background: var(--garnet-bright);
  transition: width 1.1s var(--ease);
}

.js-reveal.is-in .process-list li::after { width: 100%; }
.process-list li:nth-child(2)::after { transition-delay: 0.12s; }
.process-list li:nth-child(3)::after { transition-delay: 0.24s; }
.process-list li:nth-child(4)::after { transition-delay: 0.36s; }

.process-index {
  border: none;
  width: auto;
  height: auto;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--garnet-bright);
  justify-content: flex-start;
}

/* ---------- Staggered children ---------- */

.js-reveal .stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js-reveal.is-in .stagger > * { opacity: 1; transform: none; }
.js-reveal.is-in .stagger > *:nth-child(1) { transition-delay: 0.05s; }
.js-reveal.is-in .stagger > *:nth-child(2) { transition-delay: 0.12s; }
.js-reveal.is-in .stagger > *:nth-child(3) { transition-delay: 0.19s; }
.js-reveal.is-in .stagger > *:nth-child(4) { transition-delay: 0.26s; }
.js-reveal.is-in .stagger > *:nth-child(5) { transition-delay: 0.33s; }
.js-reveal.is-in .stagger > *:nth-child(6) { transition-delay: 0.40s; }

html:not(.reveal-armed) .js-reveal .stagger > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .stagger > * { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .stage { min-height: auto; padding: clamp(80px, 10vh, 120px) 0; }
  .statement.stage { padding: clamp(80px, 10vh, 120px) 0; }
  .stage-art .art-main { right: -24%; width: 70vw; opacity: 0.3; }
  .stage-art .art-far { display: none; }
  .service-list li { padding-left: 42px; }
}

/* ---------- Results cards ---------- */

.result-shot { aspect-ratio: 1 / 1; }

.result-shot img { object-position: top center; }

.result-growth {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--chrome-dim);
}

.result-growth b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: #5fbf8f;
}

/* The half that actually reaches the creator, set apart from the platform
   figures above it so the two are never confused for each other. */
.result-take {
  margin-top: auto;
  padding: 18px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(140, 32, 54, 0.30), rgba(140, 32, 54, 0.10));
  border: 1px solid rgba(214, 92, 118, 0.34);
}

.result-take-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-taupe);
  margin-bottom: 10px;
}

.result-take-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.result-take-row span { font-size: 0.88rem; color: var(--chrome); }

.result-take-row b {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1.12rem;
  color: var(--chrome-bright);
}

/* ---------- The maths, spelled out ---------- */

.results-explainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 56px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}

.results-explainer h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--chrome-bright);
  margin: 0 0 10px;
}

.results-explainer p {
  font-size: 0.98rem;
  color: var(--chrome);
  margin: 0;
  max-width: 44ch;
}

.results-explainer .step-n {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--garnet-bright);
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .results-explainer { grid-template-columns: 1fr; gap: 32px; }
}

/* The opening film is switched on before the first paint by a class stamped on
   <html> in the head — see silver_rose_intro_gate(). Without this the hero and
   its montage paint first and flash past before the rose appears. */

html.sr-intro, html.sr-intro body { overflow: hidden; }

html.sr-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

html.sr-intro .hero-inner,
html.sr-intro .stat-ledger { opacity: 0; }


/* ==========================================================================
   WordPress + WPForms integration
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--garnet);
  color: var(--chrome-bright);
  padding: 12px 20px;
  border-radius: 2px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* --- Editable page content (legal pages, Models roster, etc.) --- */

.legal-body h1,
.legal-body h2,
.legal-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--chrome-bright);
  margin: 44px 0 12px;
}

.legal-body h1 { font-size: 1.9rem; }
.legal-body h2 { font-size: 1.3rem; }
.legal-body h3 { font-size: 1.1rem; }

.legal-body ul,
.legal-body ol {
  color: var(--chrome);
  font-size: 1.02rem;
  line-height: 1.65;
  padding-left: 1.2em;
  margin: 0 0 16px;
}

.legal-body li { margin-bottom: 8px; }

.legal-body img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

.legal-body hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 40px 0;
}

/* Kadence/WP block leftovers shouldn't force their own background */
.legal-body .wp-block-group,
.legal-body .wp-block-columns {
  background: none !important;
}

/* --- WPForms, restyled for the dark palette --- */

.wpforms-container,
.wpforms-container-full {
  margin: 0 !important;
  max-width: 720px;
}

.wpforms-container .wpforms-form .wpforms-field-label,
.wpforms-container-full .wpforms-form .wpforms-field-label {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--chrome-bright) !important;
  margin-bottom: 8px !important;
}

.wpforms-container .wpforms-form .wpforms-field-sublabel,
.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
  color: var(--chrome-dim) !important;
  font-size: 0.85rem !important;
}

.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form input[type=email],
.wpforms-container .wpforms-form input[type=tel],
.wpforms-container .wpforms-form input[type=url],
.wpforms-container .wpforms-form input[type=number],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea,
.wpforms-container-full .wpforms-form input[type=text],
.wpforms-container-full .wpforms-form input[type=email],
.wpforms-container-full .wpforms-form input[type=tel],
.wpforms-container-full .wpforms-form select,
.wpforms-container-full .wpforms-form textarea {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--chrome-bright) !important;
  background: var(--ink-2) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 2px !important;
  padding: 13px 14px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease;
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container-full .wpforms-form input:focus,
.wpforms-container-full .wpforms-form select:focus,
.wpforms-container-full .wpforms-form textarea:focus {
  border-color: var(--rose-taupe) !important;
  outline: none !important;
}

.wpforms-container .wpforms-form input::placeholder,
.wpforms-container .wpforms-form textarea::placeholder {
  color: var(--chrome-dim) !important;
}

.wpforms-container .wpforms-form .wpforms-field,
.wpforms-container-full .wpforms-form .wpforms-field {
  padding: 0 0 22px !important;
}

.wpforms-container .wpforms-form .wpforms-field-checkbox label,
.wpforms-container .wpforms-form .wpforms-field-radio label,
.wpforms-container-full .wpforms-form .wpforms-field-checkbox label,
.wpforms-container-full .wpforms-form .wpforms-field-radio label {
  color: var(--chrome) !important;
  font-weight: 400 !important;
}

.wpforms-container .wpforms-form input[type=checkbox],
.wpforms-container .wpforms-form input[type=radio] {
  accent-color: var(--garnet);
}

.wpforms-container .wpforms-form button[type=submit],
.wpforms-container-full .wpforms-form button[type=submit] {
  font-family: var(--font-body) !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  color: var(--chrome-bright) !important;
  background: var(--garnet) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 15px 28px !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.wpforms-container .wpforms-form button[type=submit]:hover,
.wpforms-container-full .wpforms-form button[type=submit]:hover {
  background: var(--garnet-bright) !important;
}

.wpforms-container .wpforms-form .wpforms-error,
.wpforms-container-full .wpforms-form .wpforms-error {
  color: #ff9d9d !important;
  font-size: 0.9rem !important;
}

.wpforms-container .wpforms-form input.wpforms-error,
.wpforms-container .wpforms-form textarea.wpforms-error,
.wpforms-container .wpforms-form select.wpforms-error {
  border-color: #ff9d9d !important;
}

.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
  background: var(--ink-2) !important;
  border: 1px solid var(--rose-taupe) !important;
  border-radius: 2px !important;
  color: var(--chrome) !important;
  padding: 24px !important;
}

/* After applying: the thank-you box becomes the invitation to book the intro call.
   Full width of the page, centred, bright text, one big button. */
.app-form:has(.book-done) { max-width: none; }
.wpforms-confirmation-container-full.book-done,
.wpforms-confirmation-container.book-done {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(214, 92, 118, 0.45) !important;
  border-radius: 16px !important;
  background: radial-gradient(90% 120% at 50% 0%, rgba(169, 40, 66, 0.38), transparent 65%),
              linear-gradient(160deg, var(--wine), var(--ink-2)) !important;
  box-shadow: 0 0 80px rgba(169, 40, 66, 0.22);
}
.book-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(56px, 9vw, 110px) clamp(24px, 7vw, 96px);
}
.book-kicker {
  margin: 0 0 20px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e6b3a6;
}
.book-title {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.05;
  color: #fff;
}
.book-lede {
  max-width: 32em;
  margin: 0 0 30px;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.6;
  color: var(--chrome-bright);
}
.book-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}
.book-facts li {
  padding: 10px 20px;
  border: 1px solid rgba(243, 244, 246, 0.35);
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  background: rgba(243, 244, 246, 0.08);
}
.btn.btn-book {
  height: 5rem;
  padding: 0 4.2rem;
  border-radius: 14px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  animation: book-glow 2.6s ease-in-out infinite;
}
@keyframes book-glow {
  50% { box-shadow: 0 0 56px rgba(169, 40, 66, 0.7), 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
}
@media (prefers-reduced-motion: reduce) { .btn.btn-book { animation: none; } }
@media (max-width: 640px) {
  .btn.btn-book { width: 100%; height: 4.4rem; padding: 0 1.2rem; font-size: 1.2rem; }
}

/* WordPress admin bar sits above the sticky header when logged in */
body.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* ---------- Legal pages: content authored in the old block editor ----------
   The page template already prints the title, so the hero group still sitting
   inside the post content repeated it — two <h1>s on the page, one right under
   the other. Hide the duplicate heading and its eyebrow rather than editing the
   copy, which is attorney-approved, and strip the inline padding and width the
   old Kadence layout carried so the text sits in this theme's measure. */

.legal-body .wp-block-group { padding: 0 !important; }

.legal-body .srm-hero > .srm-eyebrow,
.legal-body .srm-hero > h1 { display: none; }

.legal-body .srm-hero > p {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  color: var(--chrome-dim);
  margin: 0 0 8px;
}

.legal-body .srm-max-narrow { max-width: none !important; }