/* ==========================================================================
   Davision Creative Studio, page styles
   Loads AFTER style.css. Everything here is scoped to the Studio page.
   The shared chrome (nav, footer, .btn, .wf word-fill, .container, Lenis)
   comes from style.css / main.js and is NOT redefined here.
   ========================================================================== */

/* ---------- 1. Tokens ------------------------------------------------- */
:root {
  /* Surfaces, black + navy + very dark violet, never flat #000 */
  --cs-bg:          #030307;
  --cs-bg-2:        #06070c;   /* matches studio-ui-poster background */
  --cs-surface:     #0a0b12;
  --cs-surface-2:   #101220;
  --cs-surface-tint:#0d0a16;

  /* Borders */
  --cs-border:        rgba(255, 255, 255, 0.10);
  --cs-border-2:      rgba(255, 255, 255, 0.18);
  --cs-border-accent: rgba(108, 108, 255, 0.35);

  /* Text, opacity scale carries the hierarchy. Every step used for *text*
     clears WCAG AA on --cs-bg (t2 9.9:1, t3 5.6:1, t4 4.9:1). --cs-t5 is
     decorative only: large numerals (>=24px, 3:1 floor) and icon strokes. */
  --cs-t1: #ffffff;
  --cs-t2: rgba(255, 255, 255, 0.70);
  --cs-t3: rgba(255, 255, 255, 0.52);
  --cs-t4: rgba(255, 255, 255, 0.48);
  --cs-t5: rgba(255, 255, 255, 0.36);

  /* Brand-family chrome (inherited from the corporate site) */
  --cs-brand:       #4c4fd7;
  --cs-brand-light: #6a6cff;
  --cs-brand-blue:  #3d8bff;
  --cs-brand-cyan:  #5ee6ff;

  /* Creative Studio product accent, the exact values the corporate site
     already uses for its Creative Studio CTA */
  --cs:        #ff5a4d;
  --cs-deep:   #e5342b;
  --cs-grad:   linear-gradient(135deg, #ff5a4d, #e5342b);
  --cs-shadow: 0 14px 34px rgba(229, 52, 43, 0.32);

  /* Type scale */
  --cs-fs-h1:   clamp(34px, 4.6vw, 68px);
  --cs-fs-h2:   clamp(32px, 4vw, 56px);
  --cs-fs-h3:   clamp(24px, 2.6vw, 36px);
  --cs-fs-h4:   clamp(19px, 1.8vw, 24px);
  --cs-fs-lead: clamp(17px, 1.4vw, 20px);
  --cs-fs-body: 16px;
  --cs-fs-sm:   14px;
  --cs-fs-xs:   12px;

  /* Spacing, 4px base */
  --cs-s1: 4px;  --cs-s2: 8px;  --cs-s3: 12px; --cs-s4: 16px; --cs-s5: 24px;
  --cs-s6: 32px; --cs-s7: 48px; --cs-s8: 64px; --cs-s9: 96px; --cs-s10: 128px;

  --cs-sec-y:       clamp(64px, 6.4vw, 104px);
  --cs-sec-y-tight: clamp(40px, 4vw, 64px);
  --cs-gut:         clamp(20px, 4vw, 48px);
  --cs-narrow:      900px;

  /* Radius */
  --cs-r-sm: 8px; --cs-r-md: 12px; --cs-r-lg: 20px; --cs-r-xl: 28px; --cs-r-pill: 100px;

  /* Elevation */
  --cs-shadow-card:  0 10px 40px rgba(0, 0, 0, 0.35);
  --cs-shadow-media: 0 10px 70px rgba(0, 0, 0, 0.42);

  /* Motion */
  --cs-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --cs-ease-std: cubic-bezier(0.40, 0, 0.20, 1);
  --cs-dur-fast: 180ms;
  --cs-dur: 350ms;
  --cs-dur-slow: 600ms;

  /* Texture */
  --cs-dots: radial-gradient(rgba(166, 180, 255, 0.06) 1px, transparent 1.4px);
}

/* ---------- 2. Page base ---------------------------------------------- */
.studio-page {
  background: var(--cs-bg);
  color: var(--cs-t1);
}
/* The corporate global roaming glow is too busy behind a product page */
.studio-page .global-glass-bg { opacity: 0.45; }

.studio-page section {
  padding: var(--cs-sec-y) 0;
  position: relative;
  z-index: 5;
}
.studio-page section.sec--tight { padding: var(--cs-sec-y-tight) 0; }
.studio-page section.sec--flush { padding-top: var(--cs-s7); }

.cs-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--cs-gut);
}
.cs-narrow { max-width: var(--cs-narrow); margin-inline: auto; }

/* Dot grid, one shared decorative layer, never stacked twice */
.cs-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cs-dots);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
}
.cs-wrap { position: relative; z-index: 1; }

/* A single controlled ambient glow per section, opt-in */
.cs-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.5;
}
.cs-glow--violet {
  width: min(900px, 90vw); height: 460px;
  left: 50%; top: 0; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(76, 79, 215, 0.22), transparent 70%);
}
.cs-glow--red {
  width: min(760px, 86vw); height: 420px;
  left: 50%; bottom: -120px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(229, 52, 43, 0.20), transparent 70%);
}

/* ---------- 3. Typography --------------------------------------------- */
.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-s2);
  font-family: var(--font-main);
  font-size: var(--cs-fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-t3);
  margin-bottom: var(--cs-s4);
}
.cs-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cs-brand-light);
  flex: none;
}
.cs-eyebrow--rule::before {
  width: 22px; height: 1px; border-radius: 0;
  background: linear-gradient(90deg, var(--cs-brand-light), transparent);
}
.cs-eyebrow--cs::before { background: var(--cs); }

.cs-h1 {
  font-family: var(--font-display);
  font-size: var(--cs-fs-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.cs-h2 {
  font-family: var(--font-display);
  font-size: var(--cs-fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--cs-s5);
}
.cs-h3 {
  font-family: var(--font-display);
  font-size: var(--cs-fs-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cs-h4 {
  font-family: var(--font-display);
  font-size: var(--cs-fs-h4);
  font-weight: 600;
  line-height: 1.3;
}
.cs-lead {
  font-family: var(--font-main);
  font-size: var(--cs-fs-lead);
  line-height: 1.6;
  color: var(--cs-t2);
}
.cs-body {
  font-family: var(--font-main);
  font-size: var(--cs-fs-body);
  line-height: 1.65;
  color: var(--cs-t2);
}
.cs-sm { font-size: var(--cs-fs-sm); line-height: 1.55; color: var(--cs-t3); }

/* Section head */
.cs-head { max-width: 760px; }
.cs-head--center { margin-inline: auto; text-align: center; }
.cs-head .cs-lead { margin-top: var(--cs-s4); }

/* ---------- 4. Buttons ------------------------------------------------ */
/* Buttons hold still. The shared layer lifts them, scales the shadow and runs
   a light sweep across them; none of that happens here. The only hover signal
   is the face going darker, faded in and back out. The darkening is a layer
   rather than a filter so the label keeps its own colour, and it sits at
   z-index -1 inside an isolated button so it lands above the button's own
   background but under the text. */
.studio-page .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  isolation: isolate;
  will-change: auto;
  transform: none !important;
  transition: border-color var(--cs-dur) var(--cs-ease-std),
              color var(--cs-dur) var(--cs-ease-std);
}
.studio-page .btn::after { display: none; }
.studio-page .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.30);
  opacity: 0;
  transition: opacity var(--cs-dur) var(--cs-ease-std);
  pointer-events: none;
}
.studio-page .btn:hover::before,
.studio-page .btn:focus-visible::before { opacity: 1; }
.btn-cs {
  background: var(--cs-grad);
  color: #fff;
  border: none;
  padding: 15px 30px;
  box-shadow: var(--cs-shadow);
}
.btn-cs:hover { box-shadow: var(--cs-shadow); }
.btn-cs svg { width: 16px; height: 16px; }

.btn-ghost {
  background: transparent;
  color: var(--cs-t1);
  border: 1px solid var(--cs-border-2);
  padding: 15px 28px;
}
.btn-ghost:hover { border-color: var(--cs-border-2); }
.btn-ghost svg { width: 16px; height: 16px; }

.cs-actions { display: flex; flex-wrap: wrap; gap: var(--cs-s3); }
.cs-actions--center { justify-content: center; }

/* Focus, visible on every interactive element */
.studio-page a:focus-visible,
.studio-page button:focus-visible,
.studio-page summary:focus-visible,
.studio-page [tabindex]:focus-visible {
  outline: 2px solid var(--cs-brand-light);
  outline-offset: 3px;
  border-radius: var(--cs-r-sm);
}

.cs-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--cs-surface-2); color: #fff;
  padding: 12px 20px; border-radius: var(--cs-r-sm); z-index: 2000;
}
.cs-skip:focus { left: 16px; top: 16px; }/* ---------- 6. Hero --------------------------------------------------- */
/* Short of a full viewport on purpose: the top edge of the product video has
   to be visible at load, and the model strip has to arrive one short scroll
   later, a 100svh hero pushed both below the fold. */
.cs-hero {
  height: 100svh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 124px 0 0 !important;
  overflow: visible;         /* the plate has to carry past the hero edge */
  isolation: isolate;
}
/* Full-bleed motion plate. It covers the whole hero, so the type gets its
   contrast from the scrim below rather than from the plate being small. */
/* The plate runs past the bottom of the hero and dissolves inside the next
   section, so the background changes by fading rather than by ending on a
   line. This is why the hero does not clip its overflow. */
.cs-hero__silk {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: clamp(-320px, -24vh, -140px);
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
}
.cs-hero__silk video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* Covering the whole hero means the type no longer sits on bare background,
   so the contrast floor comes from a scrim instead of from the plate being
   small. Bottom stop lands on --cs-bg so the next section joins seamlessly. */
.cs-hero__silk::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 52% at 50% 40%, rgba(3, 3, 7, 0.66) 0%, rgba(3, 3, 7, 0) 72%),
    linear-gradient(to bottom,
      rgba(3, 3, 7, 0.74) 0%,
      rgba(3, 3, 7, 0.40) 24%,
      rgba(3, 3, 7, 0.30) 52%,
      rgba(3, 3, 7, 0.52) 72%,
      rgba(3, 3, 7, 0.86) 88%,
      rgba(3, 3, 7, 0.92) 100%);
}
.cs-hero__inner { text-align: center; max-width: 1040px; margin-inline: auto; }
.cs-hero .cs-h1 { margin-bottom: var(--cs-s5); }
.cs-hero .cs-lead { max-width: 640px; margin: 0 auto var(--cs-s7); }

/* The interface sits in the hero, directly under the buttons. It is taller
   than the room left below them on purpose: the hero clips it, so the fold
   shows as much of the product as the screen has space for. */
.cs-hero .cs-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* The frame takes whatever height is left on the first screen and crops its
   own video, so the interface shows as much as fits and never pushes the
   logo strip off the fold. */
.cs-hero__ui {
  width: 100%;
  max-width: 1120px;
  margin: clamp(20px, 4vh, 56px) auto 0;
  flex: 1 1 auto;
  min-height: 0;
}
.cs-hero__ui video { height: auto; }

/* Every clip on this page is decoration: muted, looping, no controls. iOS
   still paints its own start-playback button over a paused video, so it is
   suppressed explicitly. */
.studio-page video::-webkit-media-controls,
.studio-page video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* ---------- 7. Media frame -------------------------------------------- */
.cs-frame {
  position: relative;
  border-radius: var(--cs-r-lg);
  overflow: hidden;
  background: var(--cs-bg-2);
  border: 1px solid var(--cs-border);
  box-shadow: var(--cs-shadow-media);
}
.cs-frame img,
.cs-frame video { display: block; width: 100%; height: auto; }
.cs-frame--product { max-width: 1180px; margin-inline: auto; }

/* The product film. 16:9 is reserved before the file arrives so nothing on the
   page moves when it does. */
.cs-frame--reel {
  max-width: 1180px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--cs-r-xl);
}
.cs-frame--reel video { width: 100%; height: 100%; object-fit: cover; }
.cs-reel__sound {
  position: absolute;
  right: 16px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border-radius: var(--cs-r-pill);
  border: 1px solid var(--cs-border-2);
  background: rgba(3, 3, 7, 0.55);
  backdrop-filter: blur(10px);
  color: var(--cs-t2);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--cs-dur), border-color var(--cs-dur);
}
.cs-reel__sound:hover { color: #fff; border-color: var(--cs-border-accent); }
.cs-reel__sound svg { width: 17px; height: 17px; }
.cs-reel__sound .cs-reel__on { display: none; }
.cs-reel__sound[aria-pressed="true"] .cs-reel__off { display: none; }
.cs-reel__sound[aria-pressed="true"] .cs-reel__on  { display: inline; }

.cs-frame__zoom {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cs-border-2);
  background: rgba(10, 11, 18, 0.7);
  backdrop-filter: blur(8px);
  color: var(--cs-t2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--cs-dur) var(--cs-ease-std), color var(--cs-dur);
}
.cs-frame:hover .cs-frame__zoom,
.cs-frame__zoom:focus-visible { opacity: 1; }
.cs-frame__zoom:hover { color: #fff; border-color: var(--cs-border-accent); }
.cs-frame__zoom svg { width: 15px; height: 15px; }

/* ---------- 7b. Feature rows ------------------------------------------ */
.cs-feats {
  margin-top: var(--cs-s9);
  display: grid;
  gap: clamp(64px, 7vw, 120px);
}
.cs-feat {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
/* Alternating sides: the eye zig-zags down the run instead of scanning one
   column of images and ignoring the copy. The track sizes swap with the order,
   otherwise the media lands in the narrow column on every other row and those
   screenshots render smaller than the ones above them. */
.cs-feat:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.cs-feat:nth-child(even) .cs-feat__media { order: 2; }
.cs-feat__body { max-width: 46ch; }
/* The icons are the ones the live page uses. They carry the accent instead of
   sitting in a tinted tile, so the run stays quiet next to the screenshots. */
.cs-feat__ico {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--cs-r-md);
  border: 1px solid var(--cs-border);
  background: rgba(229, 52, 43, 0.09);
  color: var(--cs);
  margin-bottom: var(--cs-s5);
}
.cs-feat__ico svg { width: 27px; height: 27px; display: block; }
.cs-feat .cs-h3 {
  font-size: clamp(27px, 3vw, 42px);
  margin-bottom: var(--cs-s4);
}
.cs-feat .cs-body { color: var(--cs-t2); }
/* One box for all six, so the run reads as a column of equal cards even
   though the screenshots ship at three different sizes. */
.cs-feat .cs-frame { aspect-ratio: 738 / 525; }
.cs-feat .cs-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform var(--cs-dur-slow) var(--cs-ease);
}
.cs-feat .cs-frame:hover img { transform: scale(1.015); }

/* The model board ships as black pills on transparency, straight onto this
   page that is black on black. Inverting turns them into light chips, which
   is the only pass that keeps every glyph legible without re-drawing it. */
.cs-frame--plain {
  background: none;
  border: 0;
  box-shadow: none;
}
/* contained, not cropped: the board's outermost pills touch its own edges */
.cs-feat .cs-frame--plain img { object-fit: contain; filter: invert(1); }

@media (max-width: 899px) {
  .cs-feat { grid-template-columns: 1fr; gap: var(--cs-s6); }
  .cs-feat:nth-child(even) .cs-feat__media { order: 0; }
  .cs-feat__body { max-width: none; }

}

/* ---------- 8. Logo strip --------------------------------------------- */
.cs-logos { overflow: hidden; }
/* Pinned to the bottom of the first screen, sitting on the interface frame.
   The rise behind it is what keeps the marks readable over whatever the video
   happens to be showing, and it stops short of solid black so the plate that
   bleeds below the hero still blends. */
.cs-hero__logos {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding-top: clamp(88px, 15vh, 196px);
  padding-bottom: clamp(8px, 1.4vh, 20px);
  /* darker under the marks, and the fall to transparent is spread over more
     of the block so the rise never reads as a band with an edge */
  background: linear-gradient(to top,
    rgba(3, 3, 7, 0.985) 0%,
    rgba(3, 3, 7, 0.96) 22%,
    rgba(3, 3, 7, 0.82) 44%,
    rgba(3, 3, 7, 0.52) 64%,
    rgba(3, 3, 7, 0.22) 82%,
    rgba(3, 3, 7, 0.06) 93%,
    transparent 100%);
}
.cs-logos__track {
  display: flex;
  gap: clamp(18px, 2vw, 38px);
  width: max-content;
  align-items: center;
  animation: cs-marquee 56s linear infinite;
}
/* A long fade that starts well inside the edge, so logos arrive and leave
   gradually instead of appearing at the gutter. */
.cs-logos__mask {
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 8%, #000 22%, #000 78%, rgba(0, 0, 0, 0.35) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 8%, #000 22%, #000 78%, rgba(0, 0, 0, 0.35) 92%, transparent 100%);
}
/* No plates. Each mark sits on the black rise on its own, in a fixed width
   slot so wordmarks of very different proportions still land on one rhythm. */
.cs-chipmark {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(170px, 15.5vw, 258px);
  height: clamp(44px, 3.9vw, 62px);
}
.cs-chipmark img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.72;
  filter: grayscale(1) brightness(1.75);
  transition: opacity var(--cs-dur), filter var(--cs-dur);
}
.cs-chipmark:hover img { opacity: 1; filter: grayscale(0) brightness(1); }
/* two marks sit smaller than the rest inside the shared 420x64 canvas */
.cs-chipmark img.cs-logo--sm { transform: scale(1.3); }
/* brands whose wordmark file has not landed yet, set in type at the same
   optical weight so the row stays even */
.cs-chipmark--type {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--cs-dur);
}
.cs-chipmark--type:hover { color: var(--cs-t1); }

@keyframes cs-marquee { to { transform: translateX(-50%); } }

/* ---------- 9. Statement and benefits ---------------------------------- */
/* One long centred statement, then three benefit cards, the same two beats
   the live page opens with. The statement is set at h2 weight but lighter, so
   it reads as a claim rather than as another section heading. */
.cs-statement {
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.1vw, 46px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--cs-t1);
  text-wrap: balance;
}
/* the one phrase the claim turns on, in the product accent */
.cs-statement__hl { color: var(--cs); }

.cs-benefits {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
/* The three cards are identical in structure. What makes them worth hovering
   is the light: a spotlight tracks the pointer inside the card, the 1px border
   lights up brightest nearest the cursor, and the icon redraws itself stroke
   by stroke. Sibling cards dim, so the one under the hand is unmistakably the
   one you are reading. All of it is driven by two custom properties the
   pointer handler writes, so the CSS stays declarative. */
.cs-benefit {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--cs-s4);
  min-height: 320px;
  padding: var(--cs-s8) var(--cs-s6);
  text-align: center;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-xl);
  background: linear-gradient(180deg, rgba(16, 18, 32, 0.55), rgba(6, 7, 12, 0.75));
  transition:
    transform var(--cs-dur) var(--cs-ease),
    border-color var(--cs-dur),
    opacity var(--cs-dur);
}
/* the spotlight, a wash centred on the pointer */
.cs-benefit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(106, 108, 255, 0.34), rgba(106, 108, 255, 0.08) 46%, transparent 68%);
  opacity: 0;
  transition: opacity var(--cs-dur);
}
/* the border, painted only where the pointer is. padding-box against
   border-box with mask-composite leaves exactly the 1px ring. */
.cs-benefit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    var(--cs-brand-light), rgba(106, 108, 255, 0.18) 42%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--cs-dur);
  pointer-events: none;
}
.cs-benefit:hover,
.cs-benefit:focus-within { transform: translateY(-4px); }
.cs-benefit:hover::before,
.cs-benefit:hover::after,
.cs-benefit:focus-within::before,
.cs-benefit:focus-within::after { opacity: 1; }

/* the card you are not on steps back rather than competing */
.cs-benefits:has(.cs-benefit:hover) .cs-benefit:not(:hover) { opacity: 0.34; }

.cs-benefit__ico { color: var(--cs-t3); transition: color var(--cs-dur); }
.cs-benefit:hover .cs-benefit__ico { color: var(--cs-t1); }
.cs-benefit__ico svg { width: 52px; height: 52px; display: block; overflow: visible; }
/* --len is measured per path by studio.js, so the redraw is exact rather than
   a guessed dasharray that snaps at the end */
.cs-benefit__ico svg > * {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: 0;
}
.cs-benefit:hover .cs-benefit__ico svg > * {
  animation: cs-draw 780ms var(--cs-ease-std) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes cs-draw {
  from { stroke-dashoffset: var(--len, 200); }
  to   { stroke-dashoffset: 0; }
}

.cs-benefit__t {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cs-t1);
}
.cs-benefit__d {
  font-family: var(--font-main);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cs-t3);
  transition: color var(--cs-dur);
}
.cs-benefit:hover .cs-benefit__d { color: var(--cs-t1); }


/* Lightbox, opened by the zoom control on any product frame */
.cs-lightbox {
  position: fixed; inset: 0;
  z-index: 3000;
  display: none;
  place-items: center;
  padding: var(--cs-s6);
  background: rgba(3, 3, 7, 0.92);
  backdrop-filter: blur(10px);
}
.cs-lightbox[open], .cs-lightbox.is-open { display: grid; }
.cs-lightbox img {
  max-width: min(1200px, 92vw);
  max-height: 86vh;
  width: auto; height: auto;
  border-radius: var(--cs-r-md);
  box-shadow: var(--cs-shadow-media);
}
.cs-lightbox__close {
  position: absolute; top: 20px; right: 20px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cs-border-2);
  background: rgba(16, 18, 32, 0.8);
  color: #fff; cursor: pointer;
}
.cs-lightbox__close svg { width: 18px; height: 18px; }
.cs-lightbox__cap {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--cs-t3); letter-spacing: 0.06em;
  font-family: var(--font-main);
}

/* ---------- 14. Showcase strip ---------------------------------------- */
/* One throwable row of produced work. It runs past both gutters and loops,
   so there is no edge to hit and no arrows to design. */
.cs-strip {
  --card-tall:  clamp(300px, 40vh, 430px);
  --card-story: calc(var(--card-tall) * 0.88);
  --card-post:  calc(var(--card-tall) * 0.76);
  position: relative;
  margin-top: var(--cs-s8);
}
.cs-strip__mask {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;           /* vertical scroll still belongs to the page */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cs-strip.is-dragging .cs-strip__mask { cursor: grabbing; }
.cs-strip__track {
  display: flex;
  align-items: flex-end;
  gap: var(--cs-s3);
  width: max-content;
  will-change: transform;
}

.cs-card {
  position: relative;
  flex: none;
  margin: 0;
  height: var(--card-tall);
  aspect-ratio: 9 / 16;
}
.cs-card--story { height: var(--card-story); }
.cs-card--post  { height: var(--card-post); aspect-ratio: 4 / 5; }

.cs-card__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--cs-r-xl);
  border: 1px solid var(--cs-border);
  background: var(--cs-surface);
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.75);
}
.cs-card__media img,
.cs-card__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* just enough top wash to keep the format badge legible on a bright frame */
.cs-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.34), transparent 26%);
  pointer-events: none;
}

/* the stacked pair behind a carousel card, offset so it reads as a set */
.cs-card__ghost {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-r-xl);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--cs-border);
}
.cs-card__ghost--1 { transform: translate(6px, 4px)  scale(0.976); }
.cs-card__ghost--2 { transform: translate(11px, 7px) scale(0.95); }

.cs-card__badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--cs-r-pill);
  background: rgba(3, 3, 7, 0.55);
  backdrop-filter: blur(10px);
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.cs-card__live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3fd9a0;
  box-shadow: 0 0 0 3px rgba(63, 217, 160, 0.26);
}
.cs-card__dots {
  position: absolute;
  left: 14px; top: 15px;
  z-index: 2;
  display: flex;
  gap: 4px;
}
.cs-card__dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.cs-card__dots i:first-child { background: #fff; }

/* ---------- 17. Pricing ----------------------------------------------- */
.cs-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cs-s4); margin-top: var(--cs-s8); align-items: stretch; }
.cs-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--cs-s6);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  background: var(--cs-surface);
  transition: border-color var(--cs-dur), transform var(--cs-dur) var(--cs-ease);
}
.cs-plan:hover { border-color: var(--cs-border-2); transform: translateY(-3px); }
.cs-plan--featured {
  border-color: rgba(229, 52, 43, 0.4);
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(229, 52, 43, 0.16), transparent 70%),
    var(--cs-surface-2);
}
.cs-plan__badge {
  position: absolute; top: -11px; left: var(--cs-s6);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--cs-r-pill);
  background: var(--cs-grad); color: #fff; font-family: var(--font-main);
}
.cs-plan__name { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.cs-plan__credits { font-size: 13px; color: var(--cs-t3); margin-top: 4px; font-family: var(--font-main); }
.cs-plan__price {
  margin: var(--cs-s6) 0 var(--cs-s5);
  font-family: var(--font-display);
  font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
}
.cs-plan__price small { font-size: 14px; font-weight: 500; color: var(--cs-t3); letter-spacing: 0; }
.cs-plan__list { list-style: none; display: grid; gap: 11px; margin-bottom: var(--cs-s6); }
.cs-plan__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--cs-t2); font-family: var(--font-main); line-height: 1.45;
}
.cs-plan__list svg { width: 13px; height: 13px; flex: none; margin-top: 4px; color: var(--cs-t4); }
.cs-plan--featured .cs-plan__list svg { color: var(--cs); }
.cs-plan .btn { margin-top: auto; width: 100%; justify-content: center; }

/* Comparison table, shown in full, the way the live page shows it. It is the
   Models target in the nav, so it keeps clear of the fixed header. */
.cs-compare {
  margin-top: var(--cs-s9);
  scroll-margin-top: 108px;
}
.cs-compare__body { margin-top: 0; }
.cs-compare__scroll { overflow-x: auto; }
/* separate + 0 spacing, not collapse: sticky <th> is unreliable inside a
   collapsed-border table (the header box overlaps the first body row). Row
   rules are drawn with inset shadows instead so the look is unchanged. */
.cs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px;
  font-family: var(--font-main);
}
.cs-table caption {
  text-align: center;
  font-size: 13.5px;
  color: var(--cs-t3);
  padding-bottom: var(--cs-s6);
}
.cs-table th,
.cs-table td {
  padding: 15px 20px;
  text-align: right;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cs-table th:first-child,
.cs-table td:first-child { text-align: left; white-space: normal; width: 34%; }
.cs-table thead th {
  position: sticky;
  top: 92px;
  background: var(--cs-bg);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-t2);
  box-shadow: inset 0 -1px 0 var(--cs-border-2);
  z-index: 2;
}
/* Group labels are NOT sticky. They were, and the sticky box carries its own
   48px of top padding, so once it parked under the header it sat on top of the
   first row of its own group and cut it in half. The column header is the one
   that has to stay: it is what tells you which plan a number belongs to. */
.cs-table tbody th[scope="rowgroup"] {
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-brand-light);
  background: transparent;
  padding-top: var(--cs-s7);
  padding-bottom: var(--cs-s3);
  box-shadow: inset 0 1px 0 var(--cs-border);
}
.cs-table tbody td {
  color: var(--cs-t2);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
/* every other row tinted: with five numeric columns the eye needs a rail to
   follow across, otherwise you read the wrong plan's number */
.cs-table tbody tr:nth-of-type(even) td { background: rgba(255, 255, 255, 0.022); }
.cs-table tbody tr:hover td { background: rgba(106, 108, 255, 0.07); }
/* the model and its price are two facts, so they get two lines */
.cs-table .cs-model {
  display: block;
  color: var(--cs-t1);
  font-weight: 600;
  font-size: 14.5px;
}
.cs-table .cs-token {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--cs-t4);
  margin-top: 3px;
}
.cs-table .is-featured { background: rgba(229, 52, 43, 0.06); color: #fff; }
.cs-table tbody tr:nth-of-type(even) td.is-featured { background: rgba(229, 52, 43, 0.085); }
.cs-table tbody tr:hover td.is-featured { background: rgba(229, 52, 43, 0.12); }
.cs-table thead .is-featured { color: var(--cs); }
/* Group labels stick just under the column header. Without this the first
   one ("Image models") is permanently hidden behind the sticky thead, and the
   others scroll away exactly when you need to know which block you are in. *//* ---------- 18. FAQ --------------------------------------------------- */
.cs-faq { max-width: 900px; margin: var(--cs-s8) auto 0; }
.cs-faq details {
  border-top: 1px solid var(--cs-border);
}
.cs-faq details:last-of-type { border-bottom: 1px solid var(--cs-border); }
.cs-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cs-s5);
  padding: var(--cs-s5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  color: var(--cs-t1);
  min-height: 48px;
}
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq__sign {
  position: relative; flex: none;
  width: 20px; height: 20px; margin-top: 4px;
  color: var(--cs-brand-light);
}
.cs-faq__sign::before, .cs-faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor; border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform var(--cs-dur) var(--cs-ease-std), opacity var(--cs-dur);
}
.cs-faq__sign::before { width: 14px; height: 1.5px; }
.cs-faq__sign::after  { width: 1.5px; height: 14px; }
.cs-faq details[open] .cs-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.cs-faq__a {
  padding: 0 60px var(--cs-s6) 0;
  font-size: 15px; line-height: 1.7; color: var(--cs-t2);
  font-family: var(--font-main);
  max-width: 720px;
}

/* ---------- 19. Final CTA + form -------------------------------------- */
.cs-cta { overflow: hidden; }
.cs-cta__panel {
  position: relative;
  border-radius: var(--cs-r-xl);
  border: 1px solid rgba(229, 52, 43, 0.22);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(229, 52, 43, 0.20), transparent 68%),
    linear-gradient(165deg, var(--cs-surface-2), var(--cs-bg-2));
  padding: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  overflow: hidden;
}
.cs-cta__silk {
  position: absolute; right: -10%; bottom: -40%;
  width: 60%; opacity: 0.3; pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 72%);
}
.cs-cta__silk img { width: 100%; display: block; }
.cs-cta__left { position: relative; z-index: 1; }
.cs-cta__contact { display: grid; gap: 10px; margin-top: var(--cs-s7); }
.cs-cta__contact a, .cs-cta__contact p {
  font-size: 14px; color: var(--cs-t3); text-decoration: none;
  font-family: var(--font-main); line-height: 1.6;
}
.cs-cta__contact a:hover { color: var(--cs-brand-light); }
.cs-form {
  position: relative; z-index: 1;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  background: rgba(6, 7, 12, 0.72);
  backdrop-filter: blur(14px);
  padding: var(--cs-s6);
}
.cs-form__t { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: var(--cs-s5); }
/* Reserve the form's height before HubSpot loads: keeps CLS at zero and gives
   the IntersectionObserver a non-zero box to observe (a 0-height element never
   reports as intersecting). */
#hs-form-target { min-height: 392px; }
#hs-form-target.is-ready { min-height: 0; }
/* HubSpot embed restyled to the dark theme */
.cs-form .hs-form-field { margin-bottom: var(--cs-s4); }
.cs-form label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--cs-t3); margin-bottom: 6px; font-family: var(--font-main);
}
.cs-form .hs-form-required { color: var(--cs); }
.cs-form input[type="text"],
.cs-form input[type="email"],
.cs-form input[type="tel"],
.cs-form textarea {
  width: 100%;
  font-family: var(--font-main);
  font-size: 16px;                 /* 16px stops iOS zoom-on-focus */
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-sm);
  padding: 13px 14px;
  min-height: 48px;
  transition: border-color var(--cs-dur), background var(--cs-dur);
}
.cs-form input:focus, .cs-form textarea:focus {
  outline: none;
  border-color: var(--cs-border-accent);
  background: rgba(255, 255, 255, 0.06);
}
.cs-form input::placeholder { color: var(--cs-t5); }
.cs-form .hs-button,
.cs-form input[type="submit"] {
  width: 100%;
  border: none;
  cursor: pointer;
  background: var(--cs-grad);
  color: #fff;
  font-family: var(--font-main);
  font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 15px 30px;
  min-height: 48px;
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-shadow);
  transition: box-shadow var(--cs-dur), transform var(--cs-dur) var(--cs-ease);
}
.cs-form .hs-button:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(229, 52, 43, 0.42); }
.cs-form .hs-error-msg, .cs-form .hs-error-msgs label { color: #ff8b81; font-size: 12px; }
.cs-form__fallback { display: grid; gap: var(--cs-s4); }

/* Word-fill resting colour: the shared default (0.30 alpha) is only 2.5:1,
   which fails the large-text floor if the scroll fill never runs. */
.studio-page .wf .wf-w { color: rgba(255, 255, 255, 0.42); }
.studio-page .wf .wf-w.on { color: #fff; }

/* ---------- 20. Reveal ------------------------------------------------ */
.cs-reveal { opacity: 0; transform: translateY(24px); }
.cs-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 450ms var(--cs-ease), transform 450ms var(--cs-ease);
  transition-delay: var(--d, 0ms);
}

/* ==========================================================================
   Responsive, 3 breakpoints only: <600 mobile, 600–1023 tablet, >=1024 desktop
   ========================================================================== */

@media (max-width: 1023px) {
  .cs-plans  { grid-template-columns: repeat(2, 1fr); }
  .cs-split, .cs-split--rev { grid-template-columns: 1fr; gap: var(--cs-s6); }
  .cs-split__media { order: -1; }
  .cs-cta__panel { grid-template-columns: 1fr; }  .cs-step {
    flex: none;
    width: auto;                 /* base rule is width:100% for the vertical rail */
    scroll-snap-align: start;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-r-pill);
    padding: 10px 16px;
  }
  .cs-step[aria-selected="true"] { border-color: rgba(229, 52, 43, 0.4); }

}

@media (max-width: 599px) {
  .cs-hero { padding-top: 116px !important; }
  .cs-hero__inner { padding-bottom: 4vh; }
  .cs-hero .cs-lead { margin-bottom: var(--cs-s6); }
  .cs-actions { flex-direction: column; align-items: stretch; }
  .studio-page .btn { width: 100%; justify-content: center; min-height: 44px; }

  .cs-benefits { grid-template-columns: 1fr; }
  .cs-benefit { min-height: 0; padding: var(--cs-s7) var(--cs-s6); }

  /* keep more than two logos in frame on a phone */
  .cs-logos__track { gap: 26px; }
  .cs-chipmark { width: 128px; height: 36px; }

  .cs-strip { --card-tall: clamp(240px, 62vw, 320px); }
  .cs-plans  { grid-template-columns: 1fr; }
  .cs-plan--featured { order: -1; }

  .cs-faq__a { padding-right: var(--cs-s5); }  .cs-cta__panel { padding: var(--cs-s6) var(--cs-s5); }
  .cs-form { padding: var(--cs-s5); }

}

/* Mobile plan picker for the comparison table */
.cs-planpick { display: none; }
@media (max-width: 599px) {
  .cs-planpick {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--cs-s5);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-r-pill);
    background: rgba(255, 255, 255, 0.03);
    position: sticky;
    top: 70px;
    z-index: 3;
    backdrop-filter: blur(20px);
  }
  .cs-planpick button {
    flex: 1;
    border: none; background: transparent;
    color: var(--cs-t3);
    font-family: var(--font-main);
    font-size: 12px; font-weight: 600;
    padding: 9px 4px;
    border-radius: var(--cs-r-pill);
    cursor: pointer;
    min-height: 40px;
  }
  .cs-planpick button[aria-pressed="true"] { background: var(--cs-grad); color: #fff; }
}

/* ---------- 20b. Shared-footer contrast --------------------------------
   style.css sets these to rgba(255,255,255,.4) = 3.66:1, just under AA for
   small text. Scoped here rather than edited in the shared file, the same
   fix is worth upstreaming to the corporate site. */
.studio-page .f-title,
.studio-page .footer-bottom p { color: rgba(255, 255, 255, 0.52); }

/* ---------- 21. Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cs-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-logos__track { animation: none; transform: none; }
  .studio-page * { scroll-behavior: auto !important; }

}