/* ==========================================================================
   CA DESIGNS 4U — child theme stylesheet (v2, Oct 2026)
   This is ca-designs-4u-v2/styles.css from the static reference build,
   UNCHANGED, followed by a WordPress / Elementor reconciliation block at the
   very end. To change the design, edit the static build first, re-run Gate 1,
   then copy it over the top half of this file. Never edit tokens here only.
   Hello Elementor's own stylesheets are switched off in functions.php.
   ========================================================================== */

/* ==========================================================================
   CA DESIGNS 4U — DESIGN SYSTEM · v2 (16 Sep 2026)
   v2 changes: no parenthesised labels, sentence-case pill buttons, no pricing
   tiers or sample portfolio, one pinned stage per page, and the v2 components
   (hero poster, doors, device shells, Signature Launch, proof wall) at the end.
   Everything is driven by the :root block below. No rule anywhere else in
   this file hardcodes a colour, size, spacing step, or radius.
   ========================================================================== */

:root {
  /* ---- Colour: the two worlds ---- */
  --ink-black:       #000000;
  --ink-near:        #08090B;
  --panel:           #0D0F13;
  --panel-2:         #14171D;
  --hairline:        rgba(255, 255, 255, 0.11);
  --hairline-strong: rgba(255, 255, 255, 0.26);

  --paper:           #FFFFFF;
  --paper-dim:       #F3F3F4;
  --paper-line:      rgba(0, 0, 0, 0.12);
  --paper-line-2:    rgba(0, 0, 0, 0.26);

  /* ---- Colour: text ---- */
  --on-dark:         #FFFFFF;
  --on-dark-soft:    #B9BFC9;
  --on-dark-mute:    #7C8593;

  --on-light:        #0B0C0E;
  --on-light-soft:   #43474E;
  --on-light-mute:   #5E636B;

  /* ---- Colour: brand ---- */
  --brand:           #E01F26;   /* logo red — fills, borders, large type */
  --brand-lift:      #FF3A41;
  /* Small text needs a lighter red: #E01F26 only reaches 4.4:1 on pure black
     and 3.4:1 on white. These two are the accessible text tokens. */
  --flare:           #FF6B6F;   /* accent text on dark  */
  --flare-ink:       #C4161C;   /* accent text on light */
  --brand-wash:      rgba(224, 31, 38, 0.13);

  --focus:           #FF9195;
  --focus-ink:       #A31217;

  /* ---- Gradient: the monogram / display fill ---- */
  --sheen: linear-gradient(118deg, #FFFFFF 0%, #FFE3E4 20%, #FF8A8E 54%, #E01F26 100%);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:   Cinzel, "Times New Roman", Times, Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-micro: 0.6875rem;
  --fs-xs:    0.8125rem;
  --fs-sm:    0.9375rem;
  --fs-base:  1.0625rem;
  --fs-md:    1.25rem;
  --fs-lg:    1.5rem;
  --fs-xl:    2rem;
  --fs-2xl:   clamp(2rem, 5vw, 3.25rem);
  --fs-3xl:   clamp(2.5rem, 7vw, 4.75rem);
  --fs-mega:  clamp(3rem, 11vw, 8rem);

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-body:  1.62;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --track-mega:  -0.045em;
  --track-tight: -0.03em;
  --track-label:  0.34em;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-10: 10rem;

  /* ---- Radius ---- */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --shell-max: 1240px;
  --shell-pad: var(--space-5);

  /* Sticky-stage parallax geometry.
     --stage is the pinned viewport height; --travel is how far the page
     scrolls while the stage stays pinned. Raise --travel for a longer hold. */
  --stage:  100svh;
  --travel: 85vh;

  --ease: 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ink-black);
}

body {
  margin: 0;
  background: var(--ink-black);
  color: var(--on-dark-soft);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--on-dark);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-5);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); line-height: var(--lh-snug); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--flare); text-underline-offset: 4px; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li { margin-bottom: var(--space-2); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-6) 0; }

code { font-family: var(--font-mono); font-size: 0.9em; }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.on-light :focus-visible { outline-color: var(--focus-ink); }

.skip-link {
  position: absolute; left: var(--space-4); top: -120px; z-index: 200;
  background: var(--brand); color: var(--on-dark);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold); text-decoration: none;
  transition: top var(--ease);
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   SCROLL REVEALS — pure CSS, no JavaScript
   Progressive enhancement: browsers without scroll-driven animation support
   simply render everything visible. Nothing ever depends on this to be read.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .reveal-slow {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    /* Hero contents drift and fade as the next panel climbs over them.
       Driven by the stage wrapper's own view progress, not the pinned child's. */
    .stage__drift {
      animation: sink linear both;
      animation-timeline: --stagewrap;
      animation-range: contain 34% contain 100%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sink {
  from { opacity: 1; transform: none; }
  to   { opacity: 0.15; transform: translateY(-56px) scale(0.965); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.shell { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--shell-pad); }
.shell--narrow { max-width: 820px; }
.shell--wide { max-width: 1440px; }

.band { position: relative; z-index: 2; padding-block: var(--space-8); }
.band--tall { padding-block: var(--space-9); }

/* The two worlds. Every band declares its own opaque background so it can
   slide cleanly over a pinned stage below it. */
.on-dark  { background: var(--ink-black); color: var(--on-dark-soft); }
.on-panel { background: var(--panel);      color: var(--on-dark-soft); }
.on-light { background: var(--paper-dim);  color: var(--on-light-soft); overflow: hidden; }

.on-light h1, .on-light h2, .on-light h3, .on-light h4 { color: var(--on-light); }
.on-light a { text-decoration-color: var(--flare-ink); }

/* The white sections carry a soft light-bloom, like a lamp behind the page. */
.on-light::before {
  content: "";
  position: absolute; inset: -20% -10%;
  background: radial-gradient(52% 44% at 50% 38%, var(--paper) 0%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.on-light > * { position: relative; z-index: 1; }

/* ==========================================================================
   MOTION SYSTEM — four tiers, loudest at the top

   The hero is the only place that gets the full treatment. Everything below
   it is a quieter echo of the same language, so the page keeps breathing
   without competing with its own opening. Repeating the hero effect at full
   strength in every section is what makes a site feel cheap.

     Tier 1  the hero          film through letterforms + pinned stage
     Tier 2  section moments   a sheen travelling through display headlines
     Tier 3  ambient           a slow field drifting behind dark sections
     Tier 4  entrance          staggered reveals with scroll-linked depth

   Everything here is CSS and everything stops under prefers-reduced-motion.
   ========================================================================== */

/* ---- Tier 3: ambient drift behind dark bands ---------------------------- */

.band--alive { position: relative; overflow: hidden; }

.band--alive::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(28% 24% at 22% 30%, rgba(224,31,38,0.20), transparent 62%),
    radial-gradient(24% 22% at 78% 68%, rgba(255,138,142,0.13), transparent 60%),
    radial-gradient(30% 26% at 62% 14%, rgba(120,12,18,0.22), transparent 64%);
  animation: bandDrift 46s linear infinite;
}
.band--alive > * { position: relative; z-index: 1; }

/* Light bands get a cooler, fainter version so the whole page shares a pulse. */
.on-light.band--alive::after {
  background:
    radial-gradient(26% 22% at 24% 28%, rgba(224,31,38,0.07), transparent 62%),
    radial-gradient(22% 20% at 76% 70%, rgba(11,12,14,0.06), transparent 60%);
}

@keyframes bandDrift {
  from { transform: rotate(0deg)   translate3d(0, 0, 0)      scale(1.05); }
  50%  { transform: rotate(180deg) translate3d(2%, -2%, 0)   scale(1.18); }
  to   { transform: rotate(360deg) translate3d(0, 0, 0)      scale(1.05); }
}

/* ---- Tier 2: a sheen travelling through display headlines ---------------- */

.sheen-move {
  background: linear-gradient(100deg,
    #FFFFFF 0%, #FFFFFF 16%, #FFD9DA 28%, #FF8A8E 38%, #FF6B6F 46%,
    #FF8A8E 54%, #FFD9DA 66%, #FFFFFF 80%, #FFFFFF 100%);
  background-size: 210% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheenSlide 7.5s ease-in-out infinite;
}
/* Darkest stop is #FF8A8E, which clears 4.5:1 on every dark surface, so the
   headline stays readable at every frame of the sweep. */

.on-light .sheen-move {
  background: linear-gradient(100deg,
    #0B0C0E 0%, #0B0C0E 16%, #4A0D11 28%, #A31217 38%, #C4161C 46%,
    #A31217 54%, #4A0D11 66%, #0B0C0E 80%, #0B0C0E 100%);
  background-size: 210% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Lightest stop on white is #C4161C at 6.0:1. Also safe. */

@keyframes sheenSlide {
  0%, 5%    { background-position: 130% 50%; }
  55%, 100% { background-position: -30% 50%; }
}

/* ---- Tier 4: scroll-linked depth ---------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Elements travel at slightly different rates as the section passes,
       which reads as depth rather than as an effect. */
    .drift { animation: driftThrough linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .drift--slow { --drift: 22px; }
    .drift--fast { --drift: 54px; }

    /* Grid children reveal in sequence instead of as one block. */
    .reveal-seq > * {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 24%;
    }
    .reveal-seq > *:nth-child(2) { animation-range: entry 2% cover 30%; }
    .reveal-seq > *:nth-child(3) { animation-range: entry 2% cover 36%; }
    .reveal-seq > *:nth-child(4) { animation-range: entry 2% cover 42%; }

    /* The accent rule under a section label draws itself in. */
    .band-head .tag { animation: labelIn linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
  }
}

@keyframes driftThrough {
  from { transform: translateY(var(--drift, 34px)); }
  to   { transform: translateY(calc(var(--drift, 34px) * -1)); }
}
@keyframes labelIn {
  from { opacity: 0; letter-spacing: 0.5em; }
  to   { opacity: 1; letter-spacing: var(--track-label); }
}

/* ---- The global stop ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .band--alive::after { animation: none; }
  .sheen-move { animation: none; background-position: 40% 50%; }
}

/* ==========================================================================
   MICRO LABEL — plain letterspaced tag (parentheses dropped in v2)
   ========================================================================== */

.tag {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--flare);
  margin-bottom: var(--space-5);
}
.on-light .tag { color: var(--flare-ink); }

.tag--plain { color: var(--on-dark-mute); }
.on-light .tag--plain { color: var(--on-light-mute); }

.lede { font-size: var(--fs-md); max-width: 54ch; color: var(--on-dark-soft); }
.on-light .lede { color: var(--on-light-soft); }

.band-head { max-width: 46rem; margin-bottom: var(--space-7); }
/* ch units resolve against the element's OWN font size, so the measure caps
   live on the heading and the lede, never on their small-text parent. */
.band-head h2 { max-width: 15ch; }
.band-head .lede { margin-top: var(--space-5); max-width: 52ch; }

/* Display headline with the serif-italic accent word */
.display em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--flare);
}
.on-light .display em { color: var(--flare-ink); }
.display .sheen {
  background: var(--sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   STICKY STAGE — the parallax mechanism
   A tall wrapper holds a pinned, viewport-tall stage. The next band has an
   opaque background and simply scrolls over the top of it. 100% CSS.
   ========================================================================== */

.stage-wrap {
  position: relative;
  height: calc(var(--stage) + var(--travel));
  view-timeline: --stagewrap block;
}

.stage {
  position: sticky;
  top: 0;
  height: var(--stage);
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ink-black);
  padding-inline: var(--shell-pad);
}

/* Warm bloom behind the mark, plus a faint vertical grid */
.stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 40% at 50% 46%, rgba(224,31,38,0.26), transparent 72%),
    radial-gradient(80% 60% at 50% 100%, rgba(255,138,142,0.07), transparent 70%);
  pointer-events: none;
}
.stage::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to right, var(--hairline) 0 1px, transparent 1px 12.5%);
  opacity: 0.5;
  pointer-events: none;
}
.stage > * { position: relative; z-index: 1; }

/* ---- Status strip: the world-clock line ---- */
.status {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-2) var(--space-5);
  list-style: none; margin: 0 0 var(--space-7); padding: 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.status li { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.status b { color: var(--on-dark-soft); font-weight: var(--fw-medium); letter-spacing: 0.14em; }
.status .live { color: var(--flare); }
.status .live::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--brand); display: inline-block; margin-right: var(--space-2);
}

/* ==========================================================================
   THE MONOGRAM — film showing through the letterforms

   The C and the A are separate CSS masks over their own animated fill, so
   moving imagery reads through the strokes the way the SLY wordmark does.
   Stacking order, bottom to top:
     1. C layer   — fill masked to the C stroke
     2. cut       — a page-coloured stroke that carves the gap where the A
                    crosses the C, exactly as the printed logo does
     3. A layer   — fill masked to the A stroke
     4. bar       — the solid brand-red crossbar
   Everything is CSS. No JavaScript, no video file, no network request.
   ========================================================================== */

.mark-mega {
  width: var(--mark-size);
  height: auto;
  margin: var(--space-2) auto var(--space-6);
  filter: drop-shadow(0 30px 80px rgba(224, 31, 38, 0.26));
}

:root {
  --mark-size: min(54vw, 350px);

  /* Alpha masks. Each is a single white stroke — nothing else — so the mask
     works on alpha and needs no luminance-mask support. */
  --mask-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='42 42 119 119'%3E%3Cpath d='M126 58a48 48 0 1 0 0 84' fill='none' stroke='%23fff' stroke-width='15'/%3E%3C/svg%3E");
  --mask-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='42 42 119 119'%3E%3Cpath d='M86 152 118 56l32 96' fill='none' stroke='%23fff' stroke-width='15' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mark-film { display: none; }

@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .mark-film { display: block; }
  .mark-mega--fallback { display: none; }
}

.mark-film {
  position: relative;
  width: var(--mark-size);
  aspect-ratio: 1 / 1;
  margin: var(--space-2) auto var(--space-6);
  filter: drop-shadow(0 30px 80px rgba(224, 31, 38, 0.3));
}

.mark-film__layer,
.mark-film__cut,
.mark-film__bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mark-film__layer { overflow: hidden; }

.mark-film__layer--c {
  -webkit-mask-image: var(--mask-c); mask-image: var(--mask-c);
}
.mark-film__layer--a {
  -webkit-mask-image: var(--mask-a); mask-image: var(--mask-a);
}
.mark-film__layer--c, .mark-film__layer--a {
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ---- The moving fill ----
   Swap this whole element for <video autoplay muted loop playsinline> and the
   mask will clip the footage instead. No other change required. */
.film {
  position: absolute;
  inset: -55%;
  background:
    radial-gradient(28% 24% at 27% 24%, #FFFFFF 0%, rgba(255,255,255,0.55) 34%, rgba(255,255,255,0) 66%),
    radial-gradient(22% 20% at 72% 66%, #FFFFFF 0%, rgba(255,255,255,0) 58%),
    radial-gradient(34% 30% at 78% 18%, #FFB3B6 0%, rgba(255,179,182,0) 62%),
    radial-gradient(40% 34% at 60% 82%, #E01F26 0%, rgba(224,31,38,0) 66%),
    radial-gradient(44% 38% at 12% 74%, #05070C 0%, rgba(5,7,12,0) 64%),
    conic-gradient(from 0deg at 50% 50%,
      #05070C 0deg, #7E0D12 44deg, #E01F26 96deg, #FF9C9F 148deg,
      #FFFFFF 190deg, #FF6B6F 236deg, #A5121A 292deg, #0A0D14 336deg, #05070C 360deg);
}

/* Starfield — the fine speckle in the SLY nebula letters */
.film::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0 1px, transparent 1.6px) 0 0 / 58px 58px,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0 1px, transparent 1.4px) 24px 31px / 91px 91px,
    radial-gradient(circle at 50% 50%, rgba(255,210,212,0.7) 0 1px, transparent 1.5px) 47px 12px / 137px 137px;
}

/* A slow specular sweep across the letterforms */
.film::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-18%);
  opacity: 0.35;
}

/* ---- Hero loop slot ----
   v2 ships the poster state: the fill above is a still frame, nothing moves.
   When the loop exists, uncomment the <video class="film-video"> inside each
   .mark-film__layer. It sits over the poster fill and the mask clips it.
   Reduced motion hides the video and the poster shows through. */
.film-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .film-video { display: none; }
}

.stage__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: var(--space-4);
}

.stage__line {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  color: var(--on-dark);
  max-width: 22ch;
  margin: 0 auto var(--space-6);
}

.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
  text-decoration: none;
  margin-top: var(--space-6);
}
.scroll-cue svg { width: 16px; height: 16px; }
.scroll-cue:hover { color: var(--flare); }

/* Word-mark scale variant used on interior page stages */
.stage--compact { justify-content: flex-end; padding-bottom: var(--space-9); text-align: left; align-items: flex-start; }
.stage--compact .stage__inner { width: 100%; max-width: var(--shell-max); margin-inline: auto; }
.stage-wrap--page { height: calc(78svh + 30vh); }
.stage--page { height: 78svh; min-height: 460px; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding-block: var(--space-3);
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-tight);
  color: var(--on-dark);
  white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--flare); }

.site-nav { order: 3; width: 100%; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  text-decoration: none;
  transition: color var(--ease), background var(--ease);
}
.site-nav__link:hover { color: var(--on-dark); background: rgba(255,255,255,0.07); }
.site-nav__link[aria-current="page"] { color: var(--on-dark); background: var(--brand-wash); }

/* Specificity note: .btn sets display:inline-flex further down the sheet, so
   the hide rule needs to outrank it — hence the .site-header prefix. */
.site-header .site-header__cta { display: none; }

@media (min-width: 940px) {
  .site-nav { order: 0; width: auto; margin-right: var(--space-5); }
  .site-header .site-header__cta { display: inline-flex; }
}

/* ---- Fixed vertical rail (decorative, desktop only) ---- */
.rail {
  display: none;
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 55;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: var(--space-4) var(--space-2);
  writing-mode: vertical-rl;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
  text-decoration: none;
}
.rail:hover { color: var(--flare); }
@media (min-width: 1180px) { .rail { display: block; } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn--lg { padding: 1.0625rem var(--space-6); font-size: 1rem; }
.btn--block { width: 100%; }

.btn--solid { background: var(--brand); color: var(--on-dark); }
/* Hover darkens rather than lifts: white on --brand-lift is 3.54:1 and fails
   AA for button text (verified 16 Sep 2026). --flare-ink holds 6.04:1. */
.btn--solid:hover { background: var(--flare-ink); transform: translateY(-1px); }

.btn--wire { border-color: var(--hairline-strong); color: var(--on-dark); }
.btn--wire:hover { border-color: var(--on-dark); background: rgba(255,255,255,0.06); }

.on-light .btn--wire { border-color: var(--paper-line-2); color: var(--on-light); }
.on-light .btn--wire:hover { border-color: var(--on-light); background: rgba(0,0,0,0.05); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row--center { justify-content: center; }

/* ==========================================================================
   GRIDS, CARDS, LISTS
   ========================================================================== */

.grid { display: grid; gap: var(--space-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 660px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Staggered deck — cards sit at different heights, like the SLY four-moves row.
   Offset with margin, not transform: the .reveal keyframes end on
   `transform: none` and would flatten a transform-based stagger. */
@media (min-width: 980px) {
  .grid--stagger > *:nth-child(2) { margin-top: var(--space-6); }
  .grid--stagger > *:nth-child(3) { margin-top: var(--space-3); }
  .grid--stagger > *:nth-child(4) { margin-top: var(--space-7); }
}

.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--ease), background var(--ease);
}
.card:hover { border-color: var(--hairline-strong); background: var(--panel-2); }
.card h3 { margin-bottom: var(--space-3); }
.card p { font-size: var(--fs-sm); color: var(--on-dark-mute); }

.on-light .card { background: var(--paper); border-color: var(--paper-line); }
.on-light .card:hover { border-color: var(--paper-line-2); }
.on-light .card p { color: var(--on-light-mute); }

.card--link { display: block; text-decoration: none; }
.card--link:hover { transform: translateY(-4px); }

.card__glyph {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--flare);
  margin-bottom: var(--space-5);
}
.card__glyph svg { width: 24px; height: 24px; }
.on-light .card__glyph { border-color: var(--paper-line); color: var(--flare-ink); }

.card__step {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  color: var(--flare);
  display: block;
  margin-bottom: var(--space-4);
}
.on-light .card__step { color: var(--flare-ink); }

.card__foot {
  display: block;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.on-light .card__foot { border-color: var(--paper-line); color: var(--on-light-mute); }

.card__more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--flare);
}
.on-light .card__more { color: var(--flare-ink); }

/* Numbered and checked lists */
.numbered { counter-reset: n; list-style: none; padding: 0; margin: 0; }
.numbered > li { counter-increment: n; position: relative; padding-left: var(--space-7); margin-bottom: var(--space-6); }
.numbered > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0.15em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--flare);
}
.on-light .numbered > li::before { color: var(--flare-ink); }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding-left: var(--space-6); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--brand);
}

.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-list li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}
.rule-list li:last-child { border-bottom: 0; }
.rule-list b { color: var(--on-dark); font-weight: var(--fw-medium); }
.rule-list span { color: var(--on-dark-mute); text-align: right; }
.on-light .rule-list li { border-color: var(--paper-line); }
.on-light .rule-list b { color: var(--on-light); }
.on-light .rule-list span { color: var(--on-light-mute); }

.slab {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.on-light .slab { background: var(--paper); border-color: var(--paper-line); }

/* Split layouts */
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-8); }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
  .split--flip > *:first-child { order: 2; }
  /* Two stacked lists side by side should align at the top, not centre on
     each other — centring makes the shorter column look dropped. */
  .split:has(> .numbered) { align-items: start; }
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.on-light .table-scroll { border-color: var(--paper-line); }

.compare { width: 100%; border-collapse: collapse; min-width: 680px; font-size: var(--fs-sm); }
.compare caption {
  caption-side: bottom; text-align: left;
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-xs); color: var(--on-dark-mute);
}
.on-light .compare caption { color: var(--on-light-mute); }

.compare th, .compare td {
  padding: var(--space-4) var(--space-5);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.on-light .compare th, .on-light .compare td { border-color: var(--paper-line); }

.compare thead th {
  background: var(--panel);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.on-light .compare thead th { background: var(--paper); color: var(--on-light); }

.compare tbody th { color: var(--on-dark); font-weight: var(--fw-medium); }
.compare tbody td { color: var(--on-dark-mute); }
.on-light .compare tbody th { color: var(--on-light); }
.on-light .compare tbody td { color: var(--on-light-mute); }

.compare .col-us { background: var(--brand-wash); color: var(--on-dark-soft); }
.compare thead .col-us { background: var(--brand); color: var(--on-dark); }
.on-light .compare .col-us { color: var(--on-light-soft); }
.on-light .compare thead .col-us { color: var(--on-dark); }

.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   FAQ ACCORDION — <details> only, no JavaScript
   ========================================================================== */

.faq { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.on-light .faq { border-color: var(--paper-line); background: var(--paper); }

.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 0; }
.on-light .faq details { border-color: var(--paper-line); }

.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5);
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--on-dark);
  transition: background var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq details[open] summary { background: var(--panel); }
.on-light .faq summary { color: var(--on-light); }
.on-light .faq summary:hover, .on-light .faq details[open] summary { background: var(--paper-dim); }

.faq summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }

.faq__body { padding: 0 var(--space-5) var(--space-5); font-size: var(--fs-sm); color: var(--on-dark-mute); max-width: 74ch; }
.on-light .faq__body { color: var(--on-light-mute); }

/* ==========================================================================
   BEFORE / AFTER
   ========================================================================== */

.ba { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba__panel { border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: var(--space-6); background: var(--panel); }
.ba__panel--after { border-color: var(--brand); background: var(--panel-2); }
.on-light .ba__panel { background: var(--paper); border-color: var(--paper-line); }
.on-light .ba__panel--after { border-color: var(--brand); }
.ba__label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: var(--space-5);
}
.ba__panel--after .ba__label { color: var(--flare); }
.on-light .ba__label { color: var(--on-light-mute); }
.on-light .ba__panel--after .ba__label { color: var(--flare-ink); }

/* ==========================================================================
   NOTICE (sample-content warnings)
   ========================================================================== */

.notice {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--on-dark-mute);
  margin-bottom: var(--space-7);
}
.notice svg { width: 20px; height: 20px; flex: none; color: var(--flare); margin-top: 3px; }
.notice b { color: var(--on-dark); font-weight: var(--fw-medium); }
.on-light .notice { border-color: var(--paper-line-2); color: var(--on-light-mute); }
.on-light .notice svg { color: var(--flare-ink); }
.on-light .notice b { color: var(--on-light); }

/* ==========================================================================
   CTA STAGE
   ========================================================================== */

.cta-stage { text-align: center; }
.cta-stage h2 { max-width: 18ch; margin-inline: auto; }
.cta-stage .lede { margin-inline: auto; margin-bottom: var(--space-7); text-align: center; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--space-2); }
.field label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.on-light .field label { color: var(--on-light); }
.field label .req { color: var(--flare); }
.on-light .field label .req { color: var(--flare-ink); }
.field .hint { font-size: var(--fs-xs); color: var(--on-dark-mute); }
.on-light .field .hint { color: var(--on-light-mute); }

.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--on-dark);
  background: var(--panel);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--ease), background var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; padding-right: var(--space-6); }
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-mute); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--on-dark-mute); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); background: var(--panel-2); }
/* :user-invalid — only after the visitor has interacted, so empty required
   fields don't load in an error state (Name has no placeholder). */
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: var(--brand); }

/* Inputs invert with the band they sit in. */
.on-light .field input,
.on-light .field select,
.on-light .field textarea {
  background: var(--paper);
  border-color: var(--paper-line-2);
  color: var(--on-light);
}
.on-light .field input::placeholder,
.on-light .field textarea::placeholder { color: var(--on-light-mute); }
.on-light .field input:hover,
.on-light .field select:hover,
.on-light .field textarea:hover { border-color: var(--on-light-mute); }
.on-light .field input:focus,
.on-light .field select:focus,
.on-light .field textarea:focus { border-color: var(--brand); background: var(--paper); }

.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 4px; accent-color: var(--brand); }
.on-light .consent { color: var(--on-light-soft); }

fieldset { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-5); margin: 0; }
.on-light fieldset { border-color: var(--paper-line); background: var(--paper); }
legend {
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-dark); padding-inline: var(--space-2);
}
.on-light legend { color: var(--on-light); }
.stack > * + * { margin-top: var(--space-3); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  position: relative; z-index: 2;
  background: var(--ink-black);
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-8) var(--space-5);
}

.footer-grid { display: grid; gap: var(--space-7); }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr; } }
@media (min-width: 1020px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: var(--space-4);
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: var(--space-3); }
.footer-links a { font-size: var(--fs-sm); color: var(--on-dark-soft); text-decoration: none; }
.footer-links a:hover { color: var(--flare); text-decoration: underline; }

.footer-blurb { font-size: var(--fs-sm); color: var(--on-dark-mute); max-width: 42ch; margin-top: var(--space-5); }

.social { display: flex; gap: var(--space-2); list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.social li { margin: 0; }
.social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--on-dark-soft);
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.social a:hover { color: var(--on-dark); background: var(--brand); border-color: var(--brand); }
.social svg { width: 18px; height: 18px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   V2 — SHARED HELPERS
   ========================================================================== */

[id] { scroll-margin-top: 5rem; }
figure { margin: 0; }
.split--top { align-items: start; }
.stage--compact h1 { max-width: 20ch; }

/* Interior stages pin only where the copy fits; otherwise a plain tall band. */
@media (max-width: 939px) {
  .stage-wrap--page { height: auto; }
  .stage-wrap--page .stage { position: relative; height: auto; min-height: 78svh; padding-top: var(--space-9); }
  .stage-wrap--page .stage__drift { animation: none; }
}

/* Pure white band. The paste doors and proof wall sit on #FFF, not paper-dim. */
.on-light.on-paper { background: var(--paper); }
.on-light.on-paper::before { content: none; }

.band--rule { border-top: 1px solid var(--hairline); }

.note { font-size: var(--fs-xs); color: var(--on-dark-mute); max-width: 72ch; }
.on-light .note { color: var(--on-light-mute); }

.soft { color: var(--on-dark-soft); }
.on-light .soft { color: var(--on-light-soft); }

.mute { font-size: var(--fs-sm); color: var(--on-dark-mute); }
.on-light .mute { color: var(--on-light-mute); }

.text-link { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--flare); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.on-light .text-link { color: var(--flare-ink); }

.btn-row--spaced { margin-top: var(--space-6); }
.slab + .slab { margin-top: var(--space-5); }
.slab h3 + .checklist, .slab h3 + .rule-list { margin-top: var(--space-4); }
.checklist + h3, .rule-list + h3, .slab p + h3 { margin-top: var(--space-6); }

.band-head--wide h2 { max-width: 20ch; }
.band-head--wide .lede { max-width: 64ch; }

/* ==========================================================================
   V2 — HERO, POSTER STATE (paste: hero-poster)
   Monogram cropped off the left edge, copy set right, status strip on the
   bottom rule. Tier 1: the only pinned stage on the page. The mark is the v1
   CSS-masked layers — no image.
   ========================================================================== */

.stage--hero {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: stretch;
  text-align: left;
  padding-inline: 0;
}
.stage--hero::before {
  background: radial-gradient(42% 66% at 24% 44%, rgba(224,31,38,0.24), transparent 72%);
}
.stage--hero::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px);
  opacity: 1;
}

.hero__inner { flex: 1; display: flex; flex-direction: column; }

/* The hero slides up under the translucent sticky header so the whole
   composition — status strip included — fits the first screen. */
@media (min-width: 940px) and (min-height: 720px) {
  .stage-wrap--hero { --header-h: 4.75rem; margin-top: calc(var(--header-h) * -1); }
  .stage--hero { padding-top: var(--header-h); }
}

.hero__body {
  flex: 1;
  display: grid;
  align-content: center;
  gap: var(--space-6);
  padding: var(--space-7) var(--shell-pad);
}

.hero__mark { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; }

.hero__crop {
  --mark-size: 300px;
  width: calc(var(--mark-size) * 0.8);
  height: var(--mark-size);
  margin-left: calc(var(--shell-pad) * -1);
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-left: 0;
}
.hero__crop .mark-film,
.hero__crop .mark-mega {
  width: var(--mark-size);
  margin: 0 0 0 calc(var(--mark-size) * -0.2);
}

.hero__kicker {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

.hero__copy h1 {
  font-size: clamp(2.5rem, 5.3vw, 4.75rem);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-6);
}
.hero__copy .lede { max-width: 52ch; margin-bottom: var(--space-6); }

.hero__strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  border-top: 1px solid var(--hairline);
  padding: var(--space-5) var(--shell-pad);
}
.hero__status {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  list-style: none; margin: 0; padding: 0;
}
.hero__status li,
.hero__scroll {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.hero__status .live { color: var(--flare); }
.hero__scroll { color: var(--on-dark-mute); text-decoration: none; }
.hero__scroll:hover { color: var(--flare); }

@media (min-width: 940px) {
  .hero__body { grid-template-columns: 46% 54%; align-items: center; gap: 0; padding-inline: 0; }
  .hero__crop { --mark-size: clamp(300px, 27vw, 392px); width: calc(var(--mark-size) * 0.765); margin-left: 0; }
  .hero__crop .mark-film,
  .hero__crop .mark-mega { margin-left: calc(var(--mark-size) * -0.235); }
  .hero__kicker { padding-left: var(--space-8); }
  .hero__copy { padding: 0 var(--space-8) 0 var(--space-7); }
  .hero__strip { padding-inline: var(--space-8); }
}

/* Pin only where the whole composition fits one screen. Everywhere else the
   hero is an ordinary tall band and nothing is clipped. */
@media (max-width: 939px), (max-height: 719px) {
  .stage-wrap--hero { height: auto; }
  .stage-wrap--hero .stage { position: relative; height: auto; min-height: 100svh; }
  .stage-wrap--hero .stage__drift { animation: none; }
}

/* ==========================================================================
   V2 — DEVICE SHELLS
   Dark frame + brand-red radial field until real screenshots exist. To swap,
   put an <img> inside .frame__screen; it fills the screen.
   ========================================================================== */

.frame-browser {
  width: 100%;
  height: var(--frame-h, 420px);
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.on-light .frame-browser { border-color: var(--paper-line); }

.frame-browser__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.6875rem 0.875rem;
  border-bottom: 1px solid var(--hairline);
}
.frame-browser__bar i {
  width: 9px; height: 9px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
}
.frame-browser__url {
  margin-left: var(--space-3);
  flex: 0 1 280px; min-width: 0;
  padding: 0.125rem var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--on-dark-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.frame__screen {
  flex: 1;
  background-color: var(--ink-near);
  background-image: radial-gradient(70% 72% at 50% 24%, rgba(224,31,38,0.5), transparent 72%);
}
.frame__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.frame-phone {
  height: var(--frame-h, 420px);
  aspect-ratio: 6 / 13;
  flex: none;
  display: flex; flex-direction: column; gap: 8px;
  padding: 9px;
  background: var(--panel);
  border: 1px solid var(--hairline-strong);
  border-radius: 30px;
}
.on-light .frame-phone { border-color: var(--paper-line-2); }
.frame-phone::before {
  content: "";
  align-self: center;
  width: 52px; height: 5px;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
}
.frame-phone .frame__screen {
  border-radius: 22px;
  overflow: hidden;
  background-image: radial-gradient(90% 55% at 50% 26%, rgba(224,31,38,0.5), transparent 72%);
}

.frame-still {
  height: var(--frame-h, 200px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--ink-near);
  background-image: radial-gradient(60% 80% at 50% 40%, rgba(224,31,38,0.46), transparent 72%);
}

.frame-label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.on-light .frame-label { color: var(--on-light-mute); }

/* ==========================================================================
   V2 — TWO DOORS (paste: two-door)
   Vertical 50/50 seam, black then white. Stacks on mobile, black first.
   ========================================================================== */

.doors { position: relative; z-index: 2; display: grid; }
@media (min-width: 900px) { .doors { grid-template-columns: 1fr 1fr; } }

.door {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-8) var(--shell-pad);
  --frame-h: 250px;
}
.door h2 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
.door p { font-size: var(--fs-md); max-width: 44ch; color: var(--on-dark-soft); }
.door.on-light p { color: var(--on-light-soft); }
.door__device { flex: 1; display: flex; align-items: center; }
.door--apps .door__device { justify-content: center; --frame-h: 347px; }

@media (min-width: 900px) {
  .door { padding: var(--space-9) var(--space-8) var(--space-8); gap: 2.5rem; --frame-h: 420px; }
  .door--apps .door__device { --frame-h: 420px; }
}

.attach {
  position: relative; z-index: 2;
  background: var(--ink-black);
  border-top: 1px solid var(--hairline);
  padding: var(--space-6) var(--shell-pad);
  text-align: center;
}
.attach p { margin: 0 auto; max-width: 72ch; font-size: var(--fs-sm); letter-spacing: 0.02em; color: var(--on-dark-mute); }
.attach a { color: var(--on-dark); font-weight: var(--fw-medium); text-decoration: none; }
.attach a:hover { text-decoration: underline; }

/* ==========================================================================
   V2 — FOUR MOVES (mega numerals)
   ========================================================================== */

.moves { display: grid; gap: var(--space-7) var(--space-6); list-style: none; margin: 0; padding: 0; }
.move { margin: 0; }
@media (min-width: 660px) { .moves { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1020px) { .moves { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.move { border-top: 1px solid var(--hairline); padding-top: var(--space-5); }
.move__num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-mega);
  line-height: 0.82;
  letter-spacing: var(--track-mega);
  color: var(--brand);
  margin-bottom: var(--space-5);
}
.move h3 { margin-bottom: var(--space-2); }
.move__when {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.move p { font-size: var(--fs-sm); color: var(--on-dark-soft); }
.moves + .note { margin-top: var(--space-7); }

/* ==========================================================================
   V2 — SIGNATURE LAUNCH (paste: signature-launch)
   Tier 3 field, argument left, staggered shells right. Never pinned.
   ========================================================================== */

.sl {
  background-color: var(--ink-black);
  background-image:
    radial-gradient(60% 100% at 88% 50%, rgba(224,31,38,0.22), transparent 70%),
    radial-gradient(40% 70% at 0% 10%, rgba(224,31,38,0.09), transparent 70%);
}
.sl__grid { display: grid; gap: var(--space-7); align-items: center; }
.sl__copy h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); max-width: none; }
.sl__copy .tag { margin-bottom: var(--space-5); }
.sl__caption {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  color: var(--on-dark-mute);
}

.sl__frames { display: flex; flex-direction: column; gap: var(--space-5); }
.sl__stack { display: contents; }
.sl__phone { order: -1; --frame-h: 368px; }
.sl__web { margin-left: 2.5rem; --frame-h: 190px; }
.sl__still { margin-left: var(--space-4); --frame-h: 150px; }

@media (min-width: 1020px) {
  .sl__grid { grid-template-columns: 40% 1fr; gap: 4rem; }
  .sl__frames { display: grid; grid-template-columns: 1fr auto; gap: 1.75rem; align-items: start; }
  .sl__stack { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 4rem; }
  .sl__phone { order: 0; --frame-h: 529px; }
  .sl__web { margin-left: 0; --frame-h: 284px; }
  .sl__still { margin-left: 0; --frame-h: 200px; }
}

/* Services-page variant: three frames in a row, no stagger. */
.sl--row .sl__frames { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: end; }
.sl--row .sl__stack { display: contents; }
.sl--row .sl__phone { order: 0; --frame-h: 320px; justify-self: center; }
.sl--row .sl__web, .sl--row .sl__still { margin: 0; --frame-h: 200px; }
@media (min-width: 720px) {
  .sl--row .sl__frames { grid-template-columns: 1.4fr auto 1fr; }
  .sl--row .sl__web { order: -1; }
}

/* ==========================================================================
   V2 — PROOF STRIP (Home) and PROOF WALL (Work, paste: proof-wall)
   ========================================================================== */

.strip { display: grid; gap: var(--space-7) var(--space-6); list-style: none; margin: 0; padding: 0; --frame-h: 240px; }
@media (min-width: 900px) { .strip { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.strip li { margin: 0; }
.strip__link { display: block; text-decoration: none; }
.strip__visual { display: flex; gap: var(--space-3); align-items: stretch; }
.strip__visual .frame-browser { flex: 1; min-width: 0; }
.strip__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-4); align-items: baseline;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}
.strip__num {
  grid-row: span 2;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-2xl); line-height: 0.9; letter-spacing: var(--track-mega);
  color: var(--brand);
}
.strip__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--on-dark); letter-spacing: var(--track-tight); }
.strip__type { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-dark-mute); }
.strip__link:hover .strip__name { color: var(--flare); }
.strip + .btn-row { margin-top: var(--space-7); }

.proof { position: relative; z-index: 2; padding-bottom: var(--space-8); --frame-h: 260px; }
.proof .shell { max-width: 1440px; padding-inline: clamp(var(--shell-pad), 5vw, var(--space-8)); }

.proof__stage { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-7) var(--space-5); }
.proof__visual { display: flex; gap: var(--space-4); align-items: stretch; }
.proof__visual .frame-browser { flex: 1; min-width: 0; }
.proof__visual .frame-phone { --frame-h: 260px; }

.proof__status {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--flare);
}
.on-light .proof__status { color: var(--flare-ink); }

.proof__meta { border-top: 1px solid var(--hairline); }
.on-light .proof__meta { border-color: var(--paper-line); }
.proof__grid { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); }
.proof__head { display: flex; align-items: baseline; gap: var(--space-5); }

.proof__num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-mega);
  line-height: 0.82;
  letter-spacing: var(--track-mega);
  color: var(--brand);
}
.proof h3 { font-size: clamp(1.875rem, 3.6vw, 3.25rem); line-height: var(--lh-tight); margin: 0; }
.proof__type {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.on-light .proof__type { color: var(--on-light-mute); }
.proof__decision { font-size: var(--fs-md); color: var(--on-dark-soft); margin-bottom: var(--space-3); }
.on-light .proof__decision { color: var(--on-light-soft); }

@media (min-width: 900px) {
  .proof { --frame-h: 520px; padding-bottom: var(--space-8); }
  .proof__visual { gap: 2.5rem; }
  .proof__visual .frame-phone { --frame-h: 520px; }
  .proof__stage { padding-block: var(--space-8) 2.5rem; }
  .proof__status { align-self: flex-end; }
  .proof__grid { display: grid; grid-template-columns: 13.75rem 1fr 38%; gap: 3rem; align-items: start; padding-top: 3.25rem; }
  .proof__head { display: contents; }
  .proof__name { display: flex; flex-direction: column; gap: var(--space-4); }
}

/* ==========================================================================
   V2 — SERVICES PAGE
   ========================================================================== */

.pagenav { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.pagenav li { margin: 0; }
.pagenav a {
  display: block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--on-dark);
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}
.pagenav a:hover { border-color: var(--on-dark); background: rgba(255,255,255,0.06); }

.service-title { font-size: var(--fs-3xl); max-width: none; }

.types { display: grid; gap: var(--space-5); margin-block: var(--space-7); }
@media (min-width: 900px) { .types { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.cols { display: grid; gap: var(--space-6); }
@media (min-width: 780px) { .cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 980px) { .cols--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.col { border-top: 2px solid var(--brand); padding-top: var(--space-5); }
.col h3 { margin-bottom: var(--space-3); }
.col p { font-size: var(--fs-sm); color: var(--on-dark-mute); }
.on-light .col p { color: var(--on-light-mute); }

/* ==========================================================================
   V2 — CONTACT FORM ROUTING + LIGHT-WORLD SIDEBAR
   ========================================================================== */

.options { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.option {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--on-dark-soft);
  cursor: pointer;
}
.on-light .option { color: var(--on-light-soft); }
.option input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--brand); }
fieldset .hint { display: block; margin-top: var(--space-4); }

.on-light .slab .numbered p { font-size: var(--fs-sm); color: var(--on-light-mute); }
.slab .numbered p { font-size: var(--fs-sm); color: var(--on-dark-mute); }
.numbered--tight { margin-top: var(--space-5); }

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .site-header, .site-footer, .rail, .scroll-cue, .btn { display: none; }
  .stage-wrap { height: auto; }
  .stage { position: static; height: auto; }
  body, .on-dark, .on-panel { background: #fff; color: #000; }
}


/* ==========================================================================
   WORDPRESS / ELEMENTOR RECONCILIATION (free tier)
   Every page is built from full-width Elementor containers, class "ca-wrap",
   each holding one HTML widget (or the CA Film Hero widget) that carries one
   band of the static build's markup. These rules make Elementor's wrappers
   transparent so the static CSS applies exactly as it does in the reference.
   ========================================================================== */

/* Containers: no padding, no gap, no max-width — the band manages its own. */
.e-con.ca-wrap {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --content-width: 100%; --container-max-width: 100%; --width: 100%;
  padding: 0; gap: 0; max-width: none; width: 100%;
  display: block;
}
.e-con.ca-wrap > .e-con-inner { padding: 0; gap: 0; max-width: none; width: 100%; display: block; }
.e-con.ca-wrap > .elementor-element,
.e-con.ca-wrap > .e-con-inner > .elementor-element { width: 100%; max-width: none; margin: 0; }

/* The page wrapper Elementor prints. */
.elementor.elementor-page, .elementor-section-wrap { width: 100%; }

/* Elementor's frontend CSS gives widgets a few defaults that leak. */
.ca-wrap .elementor-widget-container { padding: 0; margin: 0; }

/* The sticky stage pins against the viewport; nothing above it may clip. */
.e-con.ca-wrap, .ca-wrap .elementor-element, .ca-wrap .elementor-widget-container { overflow: visible; }

/* Admin bar offsets the viewport; keep the pinned stage honest. */
body.admin-bar .stage { top: 32px; height: calc(var(--stage) - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .stage { top: 46px; height: calc(var(--stage) - 46px); }
}
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* Elementor's editor preview has no sticky context: show stages inline so
   they can be selected, and keep scroll-driven reveals visible. */
.elementor-editor-active .stage { position: relative; }
.elementor-editor-active .reveal,
.elementor-editor-active .reveal-seq > *,
.elementor-editor-active .drift { animation: none !important; opacity: 1 !important; transform: none !important; }

/* Contact brief — success / error notice printed by [ca4u_brief_form]. */
.form-notice {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--paper-line-2);
  margin-bottom: var(--space-6);
  color: var(--on-light-soft);
}
.form-notice b { color: var(--on-light); font-weight: var(--fw-bold); }
.form-notice a { color: var(--flare-ink); }
.form-notice--ok { border-color: var(--flare-ink); background: var(--brand-wash); }
.form-notice--error { border-color: var(--flare-ink); }
.on-dark .form-notice, .on-panel .form-notice { color: var(--on-dark-soft); border-color: var(--hairline-strong); }
.on-dark .form-notice b, .on-panel .form-notice b { color: var(--on-dark); }

/* Elementor's frontend sets `figure { margin: 0 }` inside widgets at
   (0,4,1) specificity, which flattens the Signature Launch stagger on
   phones. Restore the static values, one step more specific. */
.elementor .e-con.ca-wrap .elementor-widget-html figure.sl__web { margin-left: 2.5rem; }
.elementor .e-con.ca-wrap .elementor-widget-html figure.sl__still { margin-left: var(--space-4); }
@media (min-width: 1020px) {
  .elementor .e-con.ca-wrap .elementor-widget-html figure.sl__web,
  .elementor .e-con.ca-wrap .elementor-widget-html figure.sl__still { margin-left: 0; }
}
.elementor .e-con.ca-wrap .elementor-widget-html .sl--row figure.sl__web,
.elementor .e-con.ca-wrap .elementor-widget-html .sl--row figure.sl__still { margin: 0; }

/* ==========================================================================
   HERO v2.1 (16 Oct 2026) — centred monogram + a living fill.
   Replaces the left-bleed crop. Pure CSS, no video needed; when the hero loop
   exists it still drops into .film-video and these rules keep working.
   Everything here stops under prefers-reduced-motion (global rule above).
   ========================================================================== */

.hero__mark { align-items: center; justify-content: center; }
.hero__crop {
  width: auto; height: auto;
  margin: 0 auto;
  overflow: visible;
  border: 0;
}
.hero__crop .mark-film,
.hero__crop .mark-mega { margin: 0 auto; }
.hero__kicker { text-align: center; padding-left: 0; }
@media (min-width: 940px) {
  .hero__crop { width: auto; margin: 0 auto; }
  .hero__crop .mark-film,
  .hero__crop .mark-mega { margin-left: auto; margin-right: auto; }
  .hero__kicker { padding-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Entrance: the C sweeps in, the A rises through it, the bar locks on. */
  .stage--hero .mark-film__layer--c { animation: heroCIn 1.1s cubic-bezier(.22,.8,.18,1) both; }
  .stage--hero .mark-film__cut,
  .stage--hero .mark-film__layer--a { animation: heroAIn 1s .35s cubic-bezier(.22,.8,.18,1) both; }
  .stage--hero .mark-film__bar { animation: heroBarIn .6s .95s cubic-bezier(.22,.8,.18,1) both; }
  .stage--hero .hero__kicker { animation: labelIn 1.2s 1.2s ease-out both; }

  /* 2. Then it breathes: the light inside the letters keeps turning,
        the C and the A in opposite directions so they read as two layers. */
  .stage--hero .mark-film__layer--c .film { animation: filmTurn 34s linear infinite; }
  .stage--hero .mark-film__layer--a .film { animation: filmTurn 26s linear infinite reverse; }
  .stage--hero .film::before { animation: starDrift 48s linear infinite; }
  .stage--hero .film::after  { animation: specSweep 7s 2s ease-in-out infinite; }

  /* 3. And the whole mark floats, just enough to feel alive. */
  .stage--hero .hero__crop { animation: markFloat 9s 2s ease-in-out infinite; }
}

@keyframes heroCIn {
  from { clip-path: inset(0 0 0 100%); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
@keyframes heroAIn {
  from { transform: translateY(16%); opacity: 0; }
  to   { transform: none;            opacity: 1; }
}
@keyframes heroBarIn {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes filmTurn { to { transform: rotate(360deg); } }
@keyframes starDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-58px, -58px, 0); }
}
@keyframes specSweep {
  0%, 100% { transform: translateX(-70%); opacity: 0; }
  45%      { opacity: 0.55; }
  60%      { transform: translateX(70%); opacity: 0; }
}
@keyframes markFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}