/* ============================================================================
   Artimist studio experience — the Claude Design build, ported to the site.

   Tokens first, then shell (header, rails, overlays), then each section in the
   order it appears on the page. Day and night are driven by one attribute on
   the root so a single toggle repaints everything.
   ========================================================================== */

@font-face { font-family: ArtimistGrotesk; src: url('/media/fonts/NimbusSansNarrow-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: ArtimistGrotesk; src: url('/media/fonts/NimbusSansNarrow-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: ArtimistSans; src: url('/media/fonts/NimbusSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: ArtimistUI; src: url('/fonts/geist-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: ArtimistSans; src: url('/media/fonts/NimbusSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: ArtimistSerif; src: url('/media/fonts/P052-Roman.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: ArtimistSerif; src: url('/media/fonts/P052-Italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }

.st {
  --ink: #11110f;
  --paper: #ffffff;
  --paper-alt: #f7f3f4;
  --crimson: #651c32;
  --rose: #7a2134;
  --blush: #e9bcc4;
  --grotesk: ArtimistGrotesk, 'Helvetica Neue', Arial, sans-serif;
  --sans: ArtimistUI, 'Helvetica Neue', Arial, sans-serif;
  --serif: ArtimistSerif, Georgia, 'Times New Roman', serif;
  position: relative;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.st[data-mode='night'] {
  --paper: #161413;
  --paper-alt: #100e0e;
  --ink: #f2ede7;
}
/* Night also lifts the dark sections a touch so the whole page shifts
   together rather than only the paper ones changing. */
.st[data-mode='night'] .st-dark { background: #050505; }
.st[data-mode='night'] .st-film { background: #050505; }
.st[data-mode='night'] .st-hero-veil {
  background: linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.3) 62%, rgba(0,0,0,.45)),
              linear-gradient(0deg, rgba(0,0,0,.78), transparent 55%); }
.st[data-mode='night'] .st-realtime img,
.st[data-mode='night'] .st-contact img { filter: brightness(.62) saturate(.85); }
.st[data-mode='night'] .st-feature-media img,
.st[data-mode='night'] .st-feature-media video,
.st[data-mode='night'] .st-row-media img { filter: brightness(.78); }
.st[data-mode='night'] .st-plan.is-featured { background: #000; border-color: #2a2422; }
.st-paper, .st-paper-alt, .st-dark, .st-film { transition: background .7s ease, color .7s ease; }

.st * { box-sizing: border-box; }
.st a { color: inherit; text-decoration: none; }
.st img { display: block; max-width: 100%; }
.st ::selection { background: var(--crimson); color: #fff; }

.st-shell { width: min(1760px, calc(100% - 80px)); margin-inline: auto; }

/* ---- scroll progress + cursor aura ------------------------------------- */
.st-progress { position: fixed; z-index: 1000; left: 0; top: 0; width: 0; height: 2px; background: var(--rose); pointer-events: none; }
.st-aura { position: fixed; z-index: 3; left: 50vw; top: 50vh; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(185,59,80,.07), transparent 68%); pointer-events: none; }

/* ---- header ------------------------------------------------------------ */
.st-header {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 72px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 30px; color: #fff;
  /* A constant 60% bar rather than a fade, so the nav never disappears into
     a pale section or fights the content behind it. */
  background: rgba(8, 8, 8, .6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.st-header img { height: 30px; width: auto; }
.st-nav { display: flex; gap: 23px; padding: 9px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(0,0,0,.25); backdrop-filter: blur(12px); }
.st-nav a { font-size: 7.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.st-nav a:hover { color: var(--blush); }
.st-head-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.st-pill { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 10px 13px; border: 1px solid rgba(255,255,255,.26); border-radius: 99px; background: rgba(0,0,0,.25); color: #fff; font: inherit; font-size: 8px; letter-spacing: .14em; cursor: pointer; }
.st-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; font-style: normal; }
.st-cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; font-size: 8px; font-weight: 700; letter-spacing: .13em; transition: background .3s; }
.st-cta:hover { background: rgba(255,255,255,.14); }

/* ---- section rail ------------------------------------------------------ */
.st-rail { position: fixed; z-index: 90; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 11px; align-items: flex-end; }
.st-rail a { display: flex; align-items: center; gap: 9px; color: #fff; mix-blend-mode: difference; }
.st-rail small { font-size: 6px; letter-spacing: .14em; opacity: 0; transition: opacity .3s; }
.st-rail i { width: 16px; height: 1px; background: #fff; opacity: .35; transition: width .3s, opacity .3s; }
.st-rail a:hover small { opacity: .85; }
.st-rail a:hover i { width: 26px; opacity: 1; }

/* ---- index overlay ----------------------------------------------------- */
.st-index { position: fixed; z-index: 500; inset: 0; background: #080808; color: #fff; opacity: 0; visibility: hidden; transform: translateY(-2%); transition: .6s cubic-bezier(.2,.75,.2,1); overflow: hidden; }
.st-index.is-open { opacity: 1; visibility: visible; transform: none; }
.st-index-top { position: absolute; top: 26px; left: 34px; right: 34px; display: flex; align-items: center; justify-content: space-between; font-size: 7px; letter-spacing: .17em; color: rgba(255,255,255,.6); }
.st-index-close { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: #fff; font: inherit; font-size: 7px; letter-spacing: .17em; cursor: pointer; }
.st-index-close i { width: 30px; height: 30px; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font-style: normal; font-size: 15px; }
.st-index-mark { position: absolute; left: 46px; bottom: 86px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-size: clamp(64px, 7.5vw, 132px); line-height: .72; letter-spacing: -.07em; color: rgba(255,255,255,.92); }
.st-index-mark b { color: var(--rose); font-weight: 400; }
.st-index-body { position: absolute; left: 30%; right: 34px; top: 78px; bottom: 58px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; overflow-y: auto;
  /* rows must size to their content. Left to stretch, the two lists get squeezed
     into equal halves of the panel and their items spill over each other. */
  align-content: start; grid-auto-rows: max-content; }
.st-index-col { display: flex; flex-direction: column; }
.st-index-heading { margin: 0 0 10px; font-size: 7.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.42); }
.st-index-list { display: flex; flex-direction: column; }
.st-index-list a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.13);
  transition: padding-left .28s, color .28s, background .28s; }
.st-index-list i { font-style: normal; color: rgba(255,255,255,.35); font-size: 10px; }
.st-index-list a:hover { padding-left: 14px; color: #f2cbd1; background: rgba(255,255,255,.04); }
.st-index-list small { color: var(--rose); font-size: 6.5px; letter-spacing: .14em; }
.st-index-list span { font-family: var(--serif); font-size: clamp(17px, 2.1vh, 28px); line-height: 1.05; letter-spacing: -.03em; }
.st-index-foot { position: absolute; left: 34px; right: 34px; bottom: 22px; display: flex; justify-content: space-between; gap: 20px; font-size: 7px; letter-spacing: .16em; color: rgba(255,255,255,.5); }

/* ---- reveal ------------------------------------------------------------ */
.st [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.75,.2,1), transform 1.1s cubic-bezier(.2,.75,.2,1); }
.st [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- hero -------------------------------------------------------------- */
.st-hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: #080808; color: #fff; }
.st-hero-scene { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.5s ease, transform 7s ease; }
.st-hero-scene.is-on { opacity: 1; transform: scale(1); }
.st-hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.08) 62%, rgba(0,0,0,.26)), linear-gradient(0deg, rgba(0,0,0,.62), transparent 55%); }
.st-hero-grid { position: absolute; inset: 72px 0 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(25% - .5px), rgba(255,255,255,.1) 25%, transparent calc(25% + .5px), transparent calc(50% - .5px), rgba(255,255,255,.1) 50%, transparent calc(50% + .5px), transparent calc(75% - .5px), rgba(255,255,255,.1) 75%, transparent calc(75% + .5px)); }
.st-hero-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 152px; }
.st-eyebrow { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .25em; color: inherit; opacity: .72; }
/* On dark sections the eyebrow inherits white; on paper it inherits ink. */
.st-hero .st-eyebrow, .st-dark .st-eyebrow, .st-portal .st-eyebrow,
.st-realtime .st-eyebrow, .st-film .st-eyebrow, .st-brief .st-eyebrow,
.st-contact .st-eyebrow { color: rgba(255,255,255,.78); opacity: 1; }
.st-hero h1 { margin: 18px 0 26px; max-width: 1280px; font-family: var(--grotesk); font-weight: 400; text-transform: uppercase; font-size: clamp(58px, 8.4vw, 158px); line-height: 1.02; letter-spacing: -.073em; }
.st-hero h1 em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: -.045em; color: #f0d3d6; }
.st-hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.st-hero-foot p { max-width: 480px; margin: 0; color: rgba(255,255,255,.74); font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.st-underline { flex: none; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.55); font-size: 9px; letter-spacing: .17em; }
.st-scroll-cue { position: absolute; z-index: 6; left: 50%; bottom: 88px; transform: translateX(-50%); display: grid; place-content: center; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; background: rgba(0,0,0,.32); backdrop-filter: blur(8px); color: #fff; font-size: 15px; animation: stFloat 3.4s ease-in-out infinite; }
@keyframes stFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } }
.st-ticker { position: absolute; left: 30px; right: 30px; bottom: 25px; display: grid; grid-template-columns: auto minmax(100px,220px) auto auto 1fr auto; align-items: center; gap: 13px; font-size: 8px; letter-spacing: .15em; color: #fff; }
.st-ticker button { background: none; border: 0; color: #fff; font: inherit; font-size: 8px; letter-spacing: .15em; cursor: pointer; padding: 0; }
.st-ticker-bar { height: 1px; background: rgba(255,255,255,.35); }
.st-ticker-bar i { display: block; height: 1px; background: var(--rose); transition: width .6s; }
.st-ticker-meta { display: flex; gap: 14px; align-items: baseline; color: rgba(255,255,255,.72); }
.st-ticker-meta small { color: #f0a6b2; font-size: 8px; letter-spacing: .15em; }

/* ---- offices strip ----------------------------------------------------- */
.st-offices { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; min-height: 56px; padding: 0 30px; background: #0c0c0b; color: rgba(255,255,255,.6); font-size: 8px; letter-spacing: .18em; border-bottom: 1px solid rgba(255,255,255,.1); }
.st-offices p { margin: 0; color: rgba(255,255,255,.4); }
.st-offices a { margin-left: auto; color: #fff; }

/* ---- portal -------------------------------------------------------------
   Full-bleed live model with the controls, the note and the headline laid
   over it, exactly as the Claude Design build composes it.
   ------------------------------------------------------------------------ */
.st-portal { position: relative; min-height: 100svh; overflow: hidden; background: #060606; color: #fff; }
.st-portal spatial-model { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; background: #060606; }
.st-portal-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.05) 55%),
              linear-gradient(0deg, rgba(0,0,0,.78), transparent 42%); }
/* Stack order only — these children set their own positioning below, so this
   must never declare `position` or it will flatten the whole layout. */
.st-portal-controls, .st-portal-note, .st-portal-head, .st-legend, .st-portal .st-scroll-cue { z-index: 5; }

.st-portal-label { margin: 0; font-size: 8px; font-weight: 600; letter-spacing: .22em; color: rgba(255,255,255,.6); }

.st-portal-controls { position: absolute; top: 96px; left: 34px; display: flex; flex-direction: column; gap: 10px; max-width: min(560px, calc(100% - 68px)); }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { padding: 11px 20px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px;
  background: rgba(8,8,8,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font: inherit; font-size: 8px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.st-chip:hover { border-color: rgba(255,255,255,.6); }
.st-chip[aria-pressed='true'] { background: #7d1a2c; border-color: #b93b50; color: #fff; }

.st-portal-note { position: absolute; top: 96px; right: 34px; width: min(430px, calc(100% - 68px));
  padding: 22px 24px; border: 1px solid rgba(255,255,255,.16); background: rgba(8,8,8,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.st-portal-note-title { margin: 0 0 12px; font-size: 8px; font-weight: 600; letter-spacing: .2em; color: #e0576f; }
.st-portal-note p { margin: 0 0 16px; color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 1.65; }
.st-portal-note .st-underline { display: inline-block; font-size: 8px; }

.st-portal-head { position: absolute; left: 34px; right: 34px; bottom: 96px; max-width: min(900px, 62%); pointer-events: none; }
.st-portal-head h2 { margin: 12px 0 0; max-width: 15ch; font-family: var(--grotesk); font-weight: 400;
  text-transform: uppercase; font-size: clamp(46px, 6.6vw, 118px); line-height: .86; letter-spacing: -.07em;
  text-shadow: 0 10px 60px rgba(0,0,0,.7); }
.st-portal-head h2 em { font-family: var(--serif); font-style: italic; text-transform: none;
  letter-spacing: -.045em; color: var(--blush); }

.st-legend { position: absolute; left: 34px; right: 34px; bottom: 22px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 22px; font-size: 7.5px; font-weight: 600; letter-spacing: .16em; color: rgba(255,255,255,.6); }
.st-legend span { display: inline-flex; align-items: center; gap: 8px; }
.st-legend i { width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.st-live i { width: 7px; height: 7px; border-radius: 50%; background: #e0576f; animation: stPulse 2.4s ease-in-out infinite; }
@keyframes stPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.st-legend-meta { color: rgba(255,255,255,.4); }
.st-legend-status { margin-left: auto; color: rgba(255,255,255,.5); }

/* ---- work wall --------------------------------------------------------- */
.st-dark { background: #090908; color: #fff; padding: 120px 0; }
.st-kicker { display: flex; align-items: baseline; gap: 14px; font-size: 9px; font-weight: 600; letter-spacing: .25em; }
.st-kicker b { color: var(--rose); font-weight: 600; }

/* ---- work index -------------------------------------------------------- */
.st-index-rows { margin-top: 30px; }
.st-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5vw; padding: 34px 0; border-top: 1px solid rgba(255,255,255,.12); }
.st-row:nth-child(even) .st-row-media { order: 2; }
.st-row-media { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #111; }
.st-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.75,.2,1); }
.st-row:hover .st-row-media img { transform: scale(1.04); }
.st-row-no { position: absolute; top: 16px; left: 18px; font-family: var(--serif); font-size: 26px; color: #fff; }
.st-row-tags { margin: 0 0 14px; font-size: 7.5px; letter-spacing: .16em; color: var(--rose); text-transform: uppercase; }
.st-row h3 { margin: 0; font-family: var(--grotesk); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 62px); line-height: .92; letter-spacing: -.055em; }
.st-row p { max-width: 440px; margin: 16px 0 0; color: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.6; }
.st-row-meta { margin-top: 14px; font-size: 7.5px; letter-spacing: .16em; color: rgba(255,255,255,.4); }

/* ---- paper sections ---------------------------------------------------- */
.st-paper { background: var(--paper); color: var(--ink); padding: 130px 0; transition: background .6s, color .6s; }
.st-paper-alt { background: var(--paper-alt); color: var(--ink); padding: 130px 0; border-top: 1px solid rgba(17,17,15,.12); transition: background .6s, color .6s; }
.st-split { display: grid; grid-template-columns: .75fr 1.45fr; gap: 8vw; }
.st-h2 { margin: 0; font-family: var(--grotesk); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 6vw, 112px); line-height: .87; letter-spacing: -.066em; }
.st-h2 em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: -.045em; color: #8d2636; }
.st[data-mode='night'] .st-h2 em { color: var(--blush); }
.st-lead { max-width: 700px; margin: 26px 0 0; color: #514c45; font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.st[data-mode='night'] .st-lead { color: rgba(242,237,231,.66); }
.st-list { margin: 40px 0 0; border-top: 1px solid rgba(17,17,15,.16); }
.st[data-mode='night'] .st-list { border-color: rgba(255,255,255,.16); }
.st-list a { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 20px; padding: 26px 0; border-bottom: 1px solid rgba(17,17,15,.16); transition: padding-left .3s, color .3s; }
.st[data-mode='night'] .st-list a { border-color: rgba(255,255,255,.16); }
.st-list a:hover { padding-left: 14px; color: var(--crimson); }
.st-list small { font-size: 8px; letter-spacing: .16em; opacity: .5; }
.st-list h3 { margin: 0; font-family: var(--grotesk); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 40px); letter-spacing: -.05em; }
.st-list p { grid-column: 2; margin: 8px 0 0; max-width: 620px; font-size: 13px; line-height: 1.6; opacity: .62; }

/* ---- real-time + animation --------------------------------------------- */
.st-realtime { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.st-realtime img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-realtime .st-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.86), rgba(0,0,0,.15) 65%); }
.st-realtime-body { position: relative; padding-bottom: 90px; }
.st-film { background: #0a0a09; color: #fff; padding: 12px 12px 125px; }
.st-film-inner { padding-top: 110px; }
.st-stat-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); }
.st-stat { padding: 46px 30px; border-right: 1px solid rgba(255,255,255,.14); }
.st-stat:last-child { border-right: 0; }
.st-stat strong { display: block; font-family: var(--grotesk); font-weight: 400; font-size: clamp(38px, 4.4vw, 74px); line-height: 1; letter-spacing: -.05em; }
.st-stat small { display: block; margin-top: 12px; font-size: 7.5px; letter-spacing: .17em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.st-stat em { font-family: var(--serif); font-style: italic; color: var(--blush); }

/* ---- team ring --------------------------------------------------------- */
.st-ring { position: relative; width: min(1300px, calc(100% - 70px)); aspect-ratio: 1.06; margin: 0 auto 40px; perspective: 1600px; }
.st-ring-o { position: absolute; border: 1px solid rgba(157,48,66,.16); border-radius: 50%; }
.st-ring-o.a { inset: 14%; }
.st-ring-o.b { inset: 26%; border-color: rgba(157,48,66,.13); }
.st-ring-x { position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px; background: rgba(157,48,66,.1); }
.st-ring-y { position: absolute; top: 50%; left: 8%; right: 8%; height: 1px; background: rgba(157,48,66,.1); }
.st-ring-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 23%; aspect-ratio: 1; border-radius: 50%; background: rgba(216,208,196,.34); display: grid; place-content: center; text-align: center; padding: 14px; }
.st-ring-core span { font-size: 7px; letter-spacing: .16em; opacity: .6; }
.st-ring-core strong { display: block; margin: 8px 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 58px); line-height: 1; color: #8d2636; }
.st-ring-core small { font-size: 9.5px; line-height: 1.5; opacity: .6; }
.st-member { position: absolute; transform: translate(-50%,-50%); width: 12.6%; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.st-portrait { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; transform-style: preserve-3d; transition: transform .2s ease-out; }
.st-portrait span { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, #26211f, #100f0e); border: 3px solid rgba(255,255,255,.85); box-shadow: 0 16px 34px -18px rgba(17,17,15,.55); }
.st-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: grayscale(1) contrast(1.06); }
.st-member-card { position: relative; z-index: 2; width: 100%; margin-top: -8px; padding: 7px 6px 8px;
  background: rgba(255,255,255,.92); text-align: center; box-shadow: 0 12px 26px -18px rgba(17,17,15,.5); }
.st-member:hover { z-index: 5; }
.st-member:hover .st-member-card { width: 150%; margin-left: -25%; background: #fff; }
.st-member-card small { display: block; font-size: 5px; line-height: 1.4; letter-spacing: .08em; opacity: .5; text-transform: uppercase; }
.st-member-card b { display: block; margin-top: 3px; font-family: var(--serif); font-weight: 400; font-size: clamp(9px, .8vw, 12.5px); line-height: 1.12; color: var(--ink); }
.st[data-mode='night'] .st-member-card { background: rgba(30,28,26,.86); }

/* ---- plans ------------------------------------------------------------- */
.st-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.st-plan { display: flex; flex-direction: column; padding: 34px 30px 30px; border: 1px solid rgba(17,17,15,.18); background: rgba(255,255,255,.4); }
.st[data-mode='night'] .st-plan { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.st-plan.is-featured { background: #11110f; color: #f2ede7; border-color: #11110f; }
.st-plan-tag { font-size: 7.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.st-plan h3 { margin: 16px 0 4px; font-family: var(--grotesk); font-weight: 400; text-transform: uppercase; font-size: 30px; letter-spacing: -.04em; }
.st-plan-price { font-family: var(--serif); font-size: 42px; line-height: 1.1; }
.st-plan p { margin: 14px 0 20px; font-size: 13px; line-height: 1.6; opacity: .7; }
.st-plan ul { margin: 0 0 26px; padding: 0; list-style: none; font-size: 12.5px; }
.st-plan li { padding: 9px 0; border-bottom: 1px solid rgba(127,127,127,.22); }
.st-plan a { margin-top: auto; padding: 14px 20px; text-align: center; border: 1px solid currentColor; border-radius: 99px; font-size: 8px; letter-spacing: .17em; text-transform: uppercase; transition: background .3s, color .3s; }
.st-plan a:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }

/* ---- brief form -------------------------------------------------------- */
.st-brief { background: #0b0a0a; color: #f2ede7; padding: 120px 0 90px; background-image: radial-gradient(900px 520px at 82% 0%, rgba(156,31,53,.28), transparent 62%); }
.st-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.st-field { display: flex; flex-direction: column; gap: 8px; }
.st-field.is-wide { grid-column: 1 / -1; }
.st-field label { font-size: 7.5px; letter-spacing: .17em; text-transform: uppercase; color: rgba(242,237,231,.55); }
.st-field input, .st-field select, .st-field textarea { padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #f2ede7; font: inherit; font-size: 14px; border-radius: 2px; }
.st-field textarea { min-height: 140px; resize: vertical; }
.st-field input:focus, .st-field select:focus, .st-field textarea:focus { outline: 2px solid var(--rose); outline-offset: 1px; }
.st-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.st-submit button { padding: 16px 34px; border: 0; border-radius: 99px; background: var(--crimson); color: #fff; font: inherit; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.st-submit button:disabled { opacity: .5; cursor: not-allowed; }
.st-note { margin: 0; font-size: 12px; color: rgba(242,237,231,.6); }
.st-note.is-error { color: #ff9aa8; }
.st-note.is-ok { color: #9ae6b4; }

/* ---- clients + contact + footer ---------------------------------------- */
.st-clients { background: #0b0b0a; color: #fff; padding: 110px 0 0; overflow: hidden; }
.st-marquee { display: flex; gap: 0; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.st-marquee-track { display: flex; gap: 0; animation: stFlow 34s linear infinite; }
.st-client { position: relative; flex: none; width: 260px; height: 190px; display: grid; place-content: center;
  padding: 0 22px 34px; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }
.st-client strong { font-family: var(--grotesk); font-weight: 400; text-transform: uppercase;
  font-size: 22px; line-height: 1.05; letter-spacing: -.02em; color: rgba(255,255,255,.92); }
.st-client b { position: absolute; left: 22px; bottom: 16px; font-weight: 600; font-size: 7.5px;
  letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.38); }
.st-client img { max-height: 42px; width: auto; padding: 8px 12px; background: #fff; border-radius: 3px; }
@keyframes stFlow { to { transform: translateX(-50%); } }
.st-partners { display: flex; flex-wrap: wrap; gap: 26px; padding: 22px 0 90px; font-size: 7.5px; letter-spacing: .17em; color: rgba(255,255,255,.5); }
.st-partners b { color: #fff; font-weight: 400; }
.st-partners span { margin-left: auto; }
.st-contact { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.st-contact img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-contact-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}.st-contact-actions a{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1px solid rgba(255,255,255,.54);border-radius:999px;color:#fff;font:700 9px/1 Arial,sans-serif;letter-spacing:.12em;text-decoration:none;transition:background-color .25s ease,color .25s ease}.st-contact-actions a:first-child{background:#fff;color:#1b0c12}.st-contact-actions a:hover{background:#fff;color:#1b0c12}.st-contact-actions .st-underline{margin:0;border-bottom:1px solid rgba(255,255,255,.54)}
.st-footer { background: #070707; color: rgba(255,255,255,.7); padding: 80px 0 44px; }
.st-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.st-footer h3 { margin: 0; font-family: var(--grotesk); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3vw, 46px); letter-spacing: -.05em; color: #fff; }
.st-footer h3 em { font-family: var(--serif); font-style: italic; text-transform: none; color: var(--blush); }
.st-footer ul { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.st-footer li { padding: 7px 0; }
.st-footer li a:hover { color: var(--blush); }
.st-footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 7.5px; letter-spacing: .16em; color: rgba(255,255,255,.4); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1080px) {
  .st-shell { width: 100%; padding-inline: 26px; }
  .st-split, .st-portal-head { grid-template-columns: 1fr; gap: 26px; }
  .st-plans { grid-template-columns: 1fr; }
  .st-stat-ribbon { grid-template-columns: 1fr 1fr; }
  .st-stat { border-bottom: 1px solid rgba(255,255,255,.14); }
  .st-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .st-nav, .st-cta, .st-rail { display: none; }
  .st-header { grid-template-columns: 1fr auto; height: 58px; padding: 0 14px; gap: 10px; }
  .st-wordmark { font-size: 16px; }
  .st-wordmark small { font-size: 5.5px; letter-spacing: .26em; }
  .st-head-right { gap: 6px; }
  .st-pill { padding: 8px 10px; font-size: 7px; letter-spacing: .1em; }
  .st-shell { padding-inline: 20px; }

  /* HERO — clear the fixed header, and simplify the ticker so it stops
     collapsing into unreadable columns. */
  .st-hero { height: auto; min-height: 100svh; padding-top: 58px; }
  .st-hero-body { padding-top: 30px; padding-bottom: 120px; justify-content: center; }
  .st-hero h1 { font-size: clamp(38px, 12.5vw, 62px); letter-spacing: -.05em; }
  .st-hero-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .st-hero-foot p { font-size: 14px; }
  .st-scroll-cue { width: 42px; height: 42px; bottom: 74px; }
  .st-ticker { grid-template-columns: auto 1fr auto auto auto; gap: 9px; bottom: 18px; left: 20px; right: 20px; }
  .st-ticker-meta { display: none; }
  .st-ticker #nextBtn { justify-self: end; }

  /* PORTAL — stacked, with the model given real height instead of a strip. */
  .st-portal { min-height: 0; padding: 76px 0 26px; }
  .st-portal spatial-model { position: relative; z-index: 0; inset: auto; height: 68svh; min-height: 420px; margin-top: 18px; }
  .st-portal-scrim { display: none; }
  .st-portal-controls, .st-portal-note, .st-portal-head, .st-legend {
    position: static; inset: auto; transform: none; width: auto; max-width: none;
    margin-inline: 20px; }
  .st-portal-head { order: -2; margin-bottom: 4px; }
  .st-portal-head h2 { max-width: none; font-size: clamp(34px, 10.5vw, 54px); }
  .st-portal { display: flex; flex-direction: column; }
  .st-portal-controls { order: -1; margin-top: 16px; }
  .st-portal-note { order: 1; margin-top: 16px; }
  .st-legend { order: 2; margin-top: 18px; gap: 12px 18px; }
  .st-legend-status { margin-left: 0; width: 100%; }
  .st-portal .st-scroll-cue { display: none; }
  .st-chip { padding: 10px 14px; font-size: 7.5px; }

  /* WORK + INDEX */
  .st-row { grid-template-columns: 1fr; gap: 18px; }
  .st-row:nth-child(even) .st-row-media { order: 0; }
  .st-h2 { font-size: clamp(34px, 10vw, 56px); }
  .st-lead { font-size: 16px; }

  /* TEAM — a ring of fourteen cannot work on a phone. Two clean columns
     instead, same portraits, nothing overlapping. */
  .st-ring { width: calc(100% - 40px); aspect-ratio: auto; display: grid;
    grid-template-columns: 1fr 1fr; gap: 22px 16px; perspective: none; margin-bottom: 10px; }
  .st-ring-o, .st-ring-x, .st-ring-y { display: none; }
  .st-ring-core { position: static; transform: none; width: auto; grid-column: 1 / -1;
    aspect-ratio: auto; border-radius: 0; background: none; padding: 0 0 8px; text-align: left; }
  .st-ring-core strong { font-size: 46px; margin: 4px 0; }
  .st-member { position: static; transform: none; width: auto; }
  .st-member-card { width: 100%; margin-left: 0; }
  .st-member:hover .st-member-card { width: 100%; margin-left: 0; }
  .st-member-card small { font-size: 6px; }
  .st-member-card b { font-size: 13px; }

  /* THE REST */
  .st-plans { grid-template-columns: 1fr; }
  .st-form { grid-template-columns: 1fr; }
  .st-index-body { left: 20px; right: 20px; top: 82px; bottom: 30px; grid-template-columns: 1fr; gap: 20px; }
  .st-index-mark { display: none; }
  .st-index-list span { font-size: 18px; }
  .st-stat-ribbon { grid-template-columns: 1fr 1fr; }
  .st-footer-grid { grid-template-columns: 1fr 1fr; }
  .st-client { width: 190px; height: 150px; }
  .st-realtime-body { padding-bottom: 56px; }
  .st-offices { gap: 14px; padding: 14px 20px; font-size: 7px; }
  .st-offices a { margin-left: 0; }
}

@media (max-width: 460px) {
  .st-ring { grid-template-columns: 1fr; }
  .st-stat-ribbon { grid-template-columns: 1fr; }
  .st-footer-grid { grid-template-columns: 1fr; }
  .st-hero h1 { font-size: clamp(32px, 11.5vw, 46px); }
}

@media (prefers-reduced-motion: reduce) {
  .st [data-reveal] { opacity: 1; transform: none; transition: none; }
  .st-marquee-track, .st-scroll-cue { animation: none; }
  .st-hero-scene { transition: opacity .4s; }
}


/* Typographic wordmark — no image dependency, so the header cannot break. */
.st-wordmark { display: flex; flex-direction: column; line-height: .9; color: #fff;
  font-family: var(--serif); font-size: 21px; letter-spacing: .04em; }
.st-wordmark span { display: block; white-space: nowrap; }
.st-wordmark b { color: var(--rose); font-weight: 400; }
.st-wordmark small { margin-top: 3px; font-family: var(--sans); font-size: 6.5px;
  letter-spacing: .34em; color: rgba(255,255,255,.62); }

/* Chips stay dim and inert until the GLB is parsed, so a click before the
   model is ready reads as "not yet" instead of "broken". */
.st-chip[data-waiting] { opacity: .45; pointer-events: none; }
.st-client.is-word strong { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.5vw, 21px); letter-spacing: .01em; color: rgba(255,255,255,.9); }


/* ---- selected work ------------------------------------------------------
   One project at a time: a large stage on the left, the story and the
   numbered picker on the right. */
.st-feature { margin-top: 34px; display: grid; grid-template-columns: 1.25fr .95fr; gap: clamp(24px, 3.4vw, 56px); align-items: stretch; }
.st-feature-stage { position: relative; overflow: hidden; background: #111; aspect-ratio: 4 / 3; }
.st-feature-media { position: absolute; inset: 0; }
.st-feature-media img, .st-feature-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-feature-media video { opacity: 0; transition: opacity 1.1s ease; }
.st-feature-media video[data-ready] { opacity: 1; }
.st-feature-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.34), transparent 34%, transparent 62%, rgba(0,0,0,.5)); }
.st-feature-no { position: absolute; z-index: 2; left: 22px; top: 16px; font-family: var(--serif); font-size: clamp(40px, 5vw, 74px);
  line-height: 1; color: rgba(255,255,255,.9); text-shadow: 0 2px 22px rgba(0,0,0,.6); }
.st-feature-body { display: flex; flex-direction: column; }
.st-feature-cat { margin: 0 0 12px; font-size: 7.5px; font-weight: 600; letter-spacing: .24em; color: var(--rose); }
.st-feature-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.02; letter-spacing: -.03em; color: #fff; }
.st-feature-copy { margin: 16px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.68; color: rgba(255,255,255,.72); }
.st-feature-services { margin: 14px 0 0; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.44); }
.st-feature-act { margin: 24px 0 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; }
.st-feature-cta { font-size: 8.5px; font-weight: 600; letter-spacing: .2em; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 5px; }
.st-feature-cta:hover { color: #f2cbd1; border-color: #f2cbd1; }
.st-feature-meta { font-size: 7.5px; letter-spacing: .18em; color: rgba(255,255,255,.42); }
.st-feature-tabs { margin-top: auto; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.14); }
.st-feature-tab { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; width: 100%;
  padding: 13px 6px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6); font: inherit; text-align: left; cursor: pointer;
  transition: padding-left .28s, color .28s, background .28s; }
.st-feature-tab small { font-size: 7px; letter-spacing: .16em; color: rgba(255,255,255,.34); }
.st-feature-tab span { font-family: var(--serif); font-size: 15px; letter-spacing: -.01em; }
.st-feature-tab:hover { padding-left: 14px; color: #fff; background: rgba(255,255,255,.04); }
.st-feature-tab[aria-selected='true'] { color: #fff; }
.st-feature-tab[aria-selected='true'] small { color: var(--rose); }

/* ---- walkthrough lightbox ---------------------------------------------- */
.st-lightbox { position: fixed; z-index: 900; inset: 0; display: none; align-items: center; justify-content: center;
  gap: 18px; padding: 5vh 4vw; background: rgba(6,6,6,.94); }
.st-lightbox.is-open { display: flex; }
.st-lb-frame { position: relative; margin: 0; max-width: min(1180px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.st-lb-frame img { max-width: 100%; max-height: 82vh; object-fit: contain; background: #111; }
.st-lb-frame figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 18px;
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.st-lb-nav, .st-lb-close { display: grid; place-content: center; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; cursor: pointer; flex: none; }
.st-lb-nav { width: 48px; height: 48px; font-size: 17px; }
.st-lb-close { position: absolute; top: 22px; right: 24px; width: 42px; height: 42px; font-size: 21px; line-height: 1; }
.st-lb-nav:hover, .st-lb-close:hover { background: rgba(255,255,255,.16); }

/* ---- moving image reel -------------------------------------------------- */
.st-reel { margin-top: 46px; display: grid; grid-template-columns: 1.5fr .8fr; gap: clamp(20px, 2.6vw, 40px); align-items: start; }
.st-reel-stage { position: relative; background: #0b0b0a; border: 1px solid rgba(255,255,255,.1); }
.st-reel-stage video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0b0a; }
.st-reel-title { margin: 0; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 30px); color: #fff; }
.st-reel-note { margin: 8px 0 18px; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.46); }
.st-reel-list { display: flex; flex-direction: column; gap: 10px; }
.st-reel-pick { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 12px; padding: 8px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); color: #fff; font: inherit;
  text-align: left; cursor: pointer; transition: background .28s, border-color .28s; }
.st-reel-pick img { width: 74px; height: 48px; object-fit: cover; }
.st-reel-pick b { display: block; font-family: var(--serif); font-weight: 400; font-size: 14px; }
.st-reel-pick small { display: block; margin-top: 3px; font-size: 7px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.46); }
.st-reel-pick:hover { background: rgba(255,255,255,.07); }
.st-reel-pick[aria-current='true'] { border-color: var(--rose); background: rgba(185,59,80,.14); }

/* ---- ask a question ----------------------------------------------------- */
.st-ask-btn { position: fixed; z-index: 520; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; border: 0; border-radius: 999px; background: var(--rose); color: #fff; font: inherit;
  font-size: 8.5px; font-weight: 600; letter-spacing: .18em; cursor: pointer;
  box-shadow: 0 16px 34px -14px rgba(157,48,66,.75); transition: transform .3s, background .3s; }
.st-ask-btn i { display: grid; place-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.22); font-style: normal; font-size: 11px; font-weight: 700; }
.st-ask-btn:hover { transform: translateY(-2px); background: #a3324a; }
.st-ask-btn.is-open { background: #2a2523; }
.st-ask { position: fixed; z-index: 521; right: 20px; bottom: 76px; width: min(340px, calc(100vw - 40px));
  padding: 20px; background: #141211; color: #fff; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.85); }
.st-ask-top { display: flex; align-items: center; justify-content: space-between; }
.st-ask-top p { margin: 0; font-size: 8px; font-weight: 600; letter-spacing: .22em; color: rgba(255,255,255,.62); }
.st-ask-top button { background: none; border: 0; color: rgba(255,255,255,.7); font-size: 20px; line-height: 1; cursor: pointer; }
.st-ask-lead { margin: 12px 0 16px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.62); }
.st-ask label { display: block; margin-bottom: 5px; font-size: 7px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.st-ask input, .st-ask textarea { width: 100%; margin-bottom: 13px; padding: 9px 10px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 13px; border-radius: 0; }
.st-ask input:focus, .st-ask textarea:focus { outline: 2px solid var(--rose); outline-offset: 1px; }
.st-ask textarea { resize: vertical; min-height: 84px; }
.st-ask button[type='submit'] { width: 100%; padding: 11px; background: var(--rose); border: 0; color: #fff;
  font: inherit; font-size: 8.5px; font-weight: 600; letter-spacing: .2em; cursor: pointer; }
.st-ask button[type='submit']:disabled { opacity: .55; cursor: progress; }
.st-ask-note { margin: 11px 0 0; font-size: 11px; line-height: 1.55; color: rgba(255,255,255,.55); }
.st-ask-note.is-ok { color: #9fd8a8; }
.st-ask-note.is-error { color: #ef8f9f; }

@media (max-width: 1080px) {
  .st-feature { grid-template-columns: 1fr; }
  .st-reel { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .st-feature-stage { aspect-ratio: 3 / 2; }
  .st-feature-tab span { font-size: 14px; }
  .st-lightbox { padding: 12px; gap: 8px; }
  .st-lb-nav { width: 40px; height: 40px; }
  .st-lb-close { top: 12px; right: 12px; }
  .st-ask-btn { right: 12px; bottom: 12px; padding: 11px 15px; font-size: 8px; }
  .st-ask { right: 12px; left: 12px; bottom: 66px; width: auto; }
}

/* ---- section aside -------------------------------------------------------
   The left column of a split section used to be a lone eyebrow above a large
   void. It now carries an image and the three numbers worth knowing, and it
   sticks while the list on the right scrolls past. */
.st-aside { position: sticky; top: 104px; align-self: start; display: flex; flex-direction: column; gap: 22px; }
.st-aside-figure { margin: 0; }
.st-aside-figure img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.st-aside-figure figcaption { margin-top: 10px; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.st-aside-facts { margin: 0; display: grid; gap: 14px; border-top: 1px solid rgba(17,17,15,.16); padding-top: 16px; }
.st-aside-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-aside-facts dt { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.st-aside-facts dd { margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.7vw, 26px); line-height: 1; }
.st[data-mode='night'] .st-aside-facts { border-color: rgba(255,255,255,.16); }
.st[data-mode='night'] .st-aside-figure img { filter: brightness(.78); }

/* A single reel needs no picker, so the video takes the room back. */
.st-reel.is-single { grid-template-columns: 1.9fr .6fr; }
.st-reel.is-single .st-reel-list { display: none; }

@media (max-width: 1080px) {
  .st-aside { position: static; }
  .st-aside-figure img { aspect-ratio: 16 / 9; }
  .st-reel.is-single { grid-template-columns: 1fr; }
}

/* The scroll cue sits centre-low in the portal, clear of the headline on the
   left and the note panel on the right. */
.st-portal-cue { left: 54%; bottom: 14%; transform: translateX(-50%); z-index: 6; }
@media (max-width: 820px) { .st-portal .st-portal-cue { display: none; } }


/* ---- production quality pass -------------------------------------------
   Preserve the editorial character while making actions readable, tactile,
   and keyboard-visible across desktop and mobile. */
.st-nav a,
.st-pill,
.st-cta,
.st-underline,
.st-index-close,
.st-feature-cta,
.st-plan a,
.st-submit button,
.st-ask-btn,
.st-ask button[type='submit'] {
  font-family: var(--sans);
  font-size: clamp(10.5px, .72vw, 12px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .11em;
}

.st-pill,
.st-cta,
.st-index-close,
.st-feature-tab,
.st-plan a,
.st-submit button,
.st-ask-btn,
.st-ask button[type='submit'],
.st-lb-close,
.st-lb-nav {
  min-height: 44px;
}

.st-feature-tab {
  padding-top: 14px;
  padding-bottom: 14px;
}

.st-feature-tab span {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}

.st-row {
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
}

.st-row:focus-visible,
.st a:focus-visible,
.st button:focus-visible,
.st input:focus-visible,
.st select:focus-visible,
.st textarea:focus-visible {
  outline: 2px solid #f0a6b2;
  outline-offset: 4px;
}

.st-row:focus-visible .st-row-media img {
  transform: scale(1.025);
}

@media (max-width: 700px) {
  .st-nav a,
  .st-pill,
  .st-cta,
  .st-underline,
  .st-feature-cta,
  .st-plan a,
  .st-submit button,
  .st-ask-btn,
  .st-ask button[type='submit'] {
    font-size: 11px;
    letter-spacing: .09em;
  }

  .st-feature-copy,
  .st-row > div > p:not(.st-row-tags):not(.st-row-meta),
  .st-plan > p,
  .st-lead,
  .st-note {
    font-size: 16px;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st *,
  .st *::before,
  .st *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .st-row:hover .st-row-media img,
  .st-row:focus-visible .st-row-media img,
  .st-ask-btn:hover {
    transform: none;
  }
}


/* ---- cinematic finish -------------------------------------------------- */
.st {
  color-scheme: light;
  text-rendering: optimizeLegibility;
}

.st[data-mode='night'] {
  --paper: #0a0e15;
  --paper-alt: #0e131c;
  --ink: #f4f7fb;
  --crimson: #6753b9;
  --rose: #69c5e6;
  --blush: #c8effb;
  color-scheme: dark;
}

.st[data-mode='night'] .st-paper {
  background:
    radial-gradient(1000px 620px at 8% 12%, rgba(65, 91, 143, .22), transparent 62%),
    linear-gradient(180deg, #0c1119, #080c12);
}

.st[data-mode='night'] .st-paper-alt {
  background:
    radial-gradient(900px 520px at 92% 18%, rgba(105, 197, 230, .12), transparent 62%),
    linear-gradient(180deg, #111823, #0b1018);
}

.st[data-mode='night'] .st-dark,
.st[data-mode='night'] .st-film {
  background: #03070c;
}

.st[data-mode='night'] .st-aura {
  background: radial-gradient(circle, rgba(105, 197, 230, .13), transparent 68%);
}

.st[data-mode='night'] .st-header {
  background: linear-gradient(180deg, rgba(3, 7, 12, .82), rgba(3, 7, 12, .28));
}

.st[data-mode='night'] .st-plan {
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border-color: rgba(137, 208, 234, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.28);
}

.st[data-mode='day'] .st-plan {
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 24px 70px rgba(58, 42, 35, .08);
}

/* A stable selected-work composition: media never enters the story column. */
.st-feature {
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
  gap: clamp(38px, 4vw, 72px);
  align-items: start;
}

.st-feature-stage {
  min-width: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px;
  box-shadow: 0 34px 90px rgba(0,0,0,.38);
  isolation: isolate;
}

.st-feature-body {
  min-width: 0;
  padding-top: 4px;
}

.st-feature-tabs {
  margin-top: 24px;
}

.st-feature-media img,
.st-feature-media video,
.st-row-media img,
.st-reel-stage video,
.st-aside-figure img,
.st-client img {
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.st-row:hover .st-row-media img {
  transform: scale(1.02);
}

/* Geist UI: calmer tracking, proper size, uppercase only as a hierarchy cue. */
.st-nav a,
.st-pill,
.st-cta,
.st-underline,
.st-index-close,
.st-feature-cta,
.st-plan a,
.st-submit button,
.st-ask-btn,
.st-ask button[type='submit'] {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

.st-wordmark {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 620;
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: .145em;
  line-height: 1;
}

.st-wordmark span {
  padding-left: .04em;
}

.st-wordmark small {
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 7px;
  font-weight: 560;
  letter-spacing: .19em;
}

.st-wordmark b {
  margin-right: .02em;
  font-weight: 620;
}

/* Clean vector controls; no platform-dependent fallback glyphs. */
.st-mode-icon,
.st-menu-icon,
.st-arrow-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-mode-icon {
  width: 15px;
  height: 15px;
}

.st-sun-icon { display: none; }
.st-moon-icon { display: block; }
.st[data-mode='night'] .st-sun-icon { display: block; }
.st[data-mode='night'] .st-moon-icon { display: none; }

.st-control-divider {
  width: 1px;
  height: 14px;
  margin: 0 3px;
  background: rgba(255,255,255,.28);
}

.st-pill,
.st-cta,
.st-plan a,
.st-submit button,
.st-ask-btn,
.st-ask button[type='submit'] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.st-pill::before,
.st-cta::before,
.st-plan a::before,
.st-submit button::before,
.st-ask-btn::before,
.st-ask button[type='submit']::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 16%, rgba(255,255,255,.24) 44%, transparent 68%);
  transform: translateX(-135%);
  transition: transform .7s cubic-bezier(.2,.75,.2,1);
}

.st-pill:hover::before,
.st-cta:hover::before,
.st-plan a:hover::before,
.st-submit button:hover::before,
.st-ask-btn:hover::before,
.st-ask button[type='submit']:hover::before {
  transform: translateX(135%);
}

.st-nav,
.st-pill,
.st-cta {
  border-color: rgba(255,255,255,.32);
  background-color: rgba(12,12,12,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 10px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

/* Animated wording without breaking semantic text or accessibility. */
.st-wording {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(.32em);
  filter: blur(5px);
  transition:
    opacity .7s ease,
    clip-path 1s cubic-bezier(.16,1,.3,1),
    transform 1s cubic-bezier(.16,1,.3,1),
    filter .8s ease;
}

.st-wording.is-wording-in {
  opacity: 1;
  clip-path: inset(0);
  transform: none;
  filter: none;
}

.st-wording em {
  background: linear-gradient(100deg, currentColor 20%, var(--blush) 46%, #fff 52%, var(--blush) 58%, currentColor 82%);
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  animation: stWordSheen 8s ease-in-out 1.1s infinite;
}

@keyframes stWordSheen {
  0%, 68%, 100% { background-position: 100% 0; }
  82% { background-position: 0 0; }
}

@media (max-width: 1180px) {
  .st-feature {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .86fr);
    gap: 32px;
  }
  .st-feature-title { font-size: clamp(28px, 3.8vw, 46px); }
  .st-feature-copy { font-size: 15px; }
}

@media (max-width: 900px) {
  .st-feature {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .st-feature-stage { aspect-ratio: 16 / 10; }
  .st-feature-body { padding-top: 0; }
}

@media (max-width: 700px) {
  .st-nav a,
  .st-pill,
  .st-cta,
  .st-underline,
  .st-feature-cta,
  .st-plan a,
  .st-submit button,
  .st-ask-btn,
  .st-ask button[type='submit'] {
    font-size: 11px;
    letter-spacing: .035em;
  }
  .st-wordmark { font-size: 16px; letter-spacing: .12em; }
  .st-wordmark small { font-size: 6.5px; letter-spacing: .15em; }
}

@media (prefers-reduced-motion: reduce) {
  .st-wording,
  .st-wording.is-wording-in {
    opacity: 1;
    clip-path: none;
    transform: none;
    filter: none;
  }
  .st-wording em {
    animation: none;
    background: none;
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
  }
}


.st-aside-link,
.st-row-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin-top: 26px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

.st-row-action {
  color: rgba(255,255,255,.88);
}

.st-row-action i {
  font-style: normal;
  transition: transform .3s ease;
}

.st-row:hover .st-row-action i {
  transform: translate(3px,-3px);
}


/* Resilient motion: content is never dependent on JavaScript to remain visible. */
.st [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
.st-wording,
.st-wording.is-wording-in {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
}
.st-wording.is-wording-in {
  animation: stSafeWording .72s cubic-bezier(.16,1,.3,1) both;
}
@keyframes stSafeWording {
  from { opacity: .18; transform: translateY(.14em); }
  to { opacity: 1; transform: none; }
}


/* 2026-08 connected legibility + client-grid refinement */
.st-wording,
.st-wording.is-wording-in {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}
.st-wording em,
.st-wording.is-wording-in em {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  animation: none !important;
}
.st[data-mode='day'] .st-plan.is-featured {
  color: #f8f4ef;
  background: linear-gradient(145deg,#282124,#0d0d0c);
  border-color: #8f2635;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 28px 70px rgba(46,26,30,.22);
}
.st[data-mode='day'] .st-plan.is-featured p,
.st[data-mode='day'] .st-plan.is-featured .st-plan-tag { color: rgba(255,255,255,.76); opacity: 1; }
.st-marquee { display: block; overflow: hidden; }
.st-marquee-track {
  width: max-content;
  display: flex;
  will-change: transform;
  animation: stFlow 34s linear infinite !important;
}
.st-client { width: 260px; min-width: 260px; height: 174px; }
.st-client strong { font-size: clamp(16px,1.5vw,24px); overflow-wrap: anywhere; }
@keyframes stFlow {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}
.st-ask-btn { right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); min-height: 46px; padding: 11px 16px; letter-spacing: .055em; }
@media (max-width: 760px) {
  .st-marquee { overflow-x: auto; scroll-snap-type: x mandatory; }
  .st-marquee-track { width: max-content; display: flex; animation: none !important; transform: none; }
  .st-client { width: 72vw; min-width: 72vw; height: 150px; scroll-snap-align: center; }
}


/* 2026-08 hotfix: keep Ask the Studio outside document flow.
   A shared glossy-button rule set position:relative after the component's
   original fixed rule, which placed it as a footer child on the left. */
.st > .st-ask-btn {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: max(18px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 920 !important;
  margin: 0 !important;
}
.st > .st-ask {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: max(18px, env(safe-area-inset-right, 0px)) !important;
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 62px) !important;
  z-index: 921 !important;
}
@media (max-width: 480px) {
  .st > .st-ask-btn {
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .st > .st-ask {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 58px) !important;
    width: auto !important;
  }
}


/* 2026-08 Ask the Studio quick-answer system */
.st > .st-ask {
  max-height: min(760px, calc(100dvh - 100px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.st-ask-faq {
  margin: 0 0 20px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.st-ask-faq-label {
  margin: 14px 0 7px;
  color: rgba(255,255,255,.45);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .18em;
}
.st-ask-faq details {
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.st-ask-faq summary {
  position: relative;
  padding: 11px 26px 11px 0;
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.st-ask-faq summary::-webkit-details-marker { display: none; }
.st-ask-faq summary::after {
  content: '+';
  position: absolute;
  top: 10px;
  right: 2px;
  color: var(--blush);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}
.st-ask-faq details[open] summary::after { content: '\2212'; }
.st-ask-faq details > p {
  margin: -1px 20px 12px 0;
  color: rgba(255,255,255,.62);
  font-size: 10.5px;
  line-height: 1.55;
}
.st-ask-faq summary:focus-visible {
  outline: 1px solid var(--blush);
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .st > .st-ask { max-height: calc(100dvh - 88px); }
  .st-ask-faq summary { min-height: 44px; display: flex; align-items: center; }
}


/* 2026-08 mobile edge-to-edge reset + founder team gateway */
html,
body {
  margin: 0 !important;
  padding: 0;
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  background: #e9e6df;
}
.st {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.st-team-mobile-cta { display: none; }

@media (max-width: 820px) {
  #team.st-paper {
    width: 100%;
    margin: 0;
    padding: 92px 0 72px;
    overflow: hidden;
  }
  #team > .st-shell {
    width: 100%;
    margin: 0;
    padding-inline: 20px;
  }
  #team .st-ring {
    width: 100%;
    margin: 12px 0 0;
    padding: 0 20px;
    display: block;
    aspect-ratio: auto;
  }
  #team .st-ring-core,
  #team .st-ring-o,
  #team .st-ring-x,
  #team .st-ring-y {
    display: none !important;
  }
  #team .st-member {
    display: none !important;
  }
  #team .st-member.is-founder {
    display: block !important;
    position: static;
    width: min(100%, 440px);
    margin: 0 auto;
    transform: none;
  }
  #team .st-member.is-founder .st-portrait {
    width: 100%;
    margin: 0 auto;
  }
  #team .st-member.is-founder .st-member-card {
    width: 100%;
    margin: -8px auto 0;
    padding: 12px 10px 13px;
  }
  #team .st-member.is-founder .st-member-card small {
    font-size: 7px;
    letter-spacing: .13em;
  }
  #team .st-member.is-founder .st-member-card b {
    font-size: 18px;
  }
  .st-team-mobile-cta {
    width: calc(100% - 40px);
    min-height: 58px;
    margin: 28px auto 0;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(17,17,15,.2);
    border-bottom: 1px solid rgba(17,17,15,.2);
    color: var(--ink);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .1em;
  }
  .st-team-mobile-cta i {
    color: var(--crimson);
    font-size: 22px;
    font-style: normal;
  }
}


/* 2026-08 final commercial pass: five-tier plans, readable index groups and budget reassurance. */
.st-paper-alt#plans { padding-top: clamp(82px, 8vw, 118px); }
.st-plan-assurance {
  max-width: 760px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(17,17,15,.18);
  color: rgba(17,17,15,.68);
  font-size: 12px;
  line-height: 1.65;
}
.st[data-mode='night'] .st-plan-assurance { border-color: rgba(255,255,255,.17); color: rgba(255,255,255,.7); }
.st-plan-assurance strong { display:inline-block; margin-right:8px; color:#a72f49; font-size:8px; letter-spacing:.13em; }
.st-field-help { display:block; margin-top:2px; color:rgba(242,237,231,.58); font-size:10px; line-height:1.5; }
.st-plans { grid-template-columns: repeat(5, minmax(0,1fr)); gap:14px; }
.st-plan { min-width:0; padding:30px 22px 24px; }
.st-plan h3 { font-size:clamp(22px,1.8vw,30px); }
.st-plan-price { font-size:clamp(35px,2.8vw,44px); }
.st[data-mode] .st-plan.is-signature {
  position:relative;
  overflow:hidden;
  color:#f5f0e7;
  border-color:rgba(184,151,84,.74);
  background:
    radial-gradient(circle at 84% 5%,rgba(220,190,126,.14),transparent 34%),
    linear-gradient(145deg,#18150f,#090908 72%);
  box-shadow:inset 0 1px 0 rgba(239,215,163,.2),0 26px 76px rgba(75,55,20,.2);
}
.st-plan.is-signature::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 15%,rgba(234,212,163,.08) 42%,transparent 64%);
  transform:translateX(-100%);
  animation:stSignatureSweep 8s ease-in-out infinite;
}
.st-plan.is-signature .st-plan-tag { color:#d6bb7e; opacity:1; }
.st-plan.is-signature .st-plan-price { color:#eee2c8; }
.st-plan.is-signature a { border-color:rgba(214,187,126,.78); }
.st-plan.is-signature a:hover { background:#b3975f; border-color:#b3975f; color:#111; }
@keyframes stSignatureSweep { 0%,72%,100%{transform:translateX(-100%)} 84%{transform:translateX(100%)} }
.st-index-group {
  margin:20px 0 5px;
  color:#c44a62;
  font:700 7px/1.2 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.st-index-group:first-child { margin-top:0; }
.st-wording em,.st-wording.is-wording-in em { color:#bd3b57 !important; -webkit-text-fill-color:#bd3b57 !important; }

@media (max-width:1450px) {
  .st-plans { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .st-plan.is-signature { grid-column:span 2; }
}
@media (max-width:1080px) {
  .st-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-plan.is-signature { grid-column:1 / -1; }
}
@media (max-width:680px) {
  .st-plans { grid-template-columns:1fr; }
  .st-plan,.st-plan.is-signature { grid-column:auto; padding:28px 22px 24px; }
  .st-plan-assurance { font-size:13px; }
  .st-index-group { margin-top:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .st-plan.is-signature::after { display:none; }
}

/* Search belongs to the header, not a second mobile dock. */
.st-search-trigger{min-height:44px;gap:9px;font-size:9px}
.st-search-trigger svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.st>.st-ask{top:82px!important;bottom:auto!important;right:22px!important;left:auto!important;width:min(430px,calc(100vw - 44px))!important;max-height:calc(100dvh - 104px)!important;background:#0d0d0d;z-index:9500!important}
.st-ask[hidden]{display:none!important}
.st-ask-top button{width:44px;height:44px;font-size:26px}
.st-ask label.st-ask-lead{font-size:14px;letter-spacing:0;text-transform:none;line-height:1.5;margin:14px 0}
.st-ask input,.st-ask textarea{font-size:16px;min-height:48px}
.st-ask-faq summary,.st-ask-human>summary{font-size:14px;min-height:48px;line-height:1.45;cursor:pointer}
.st-ask-faq details>p{font-size:14px;line-height:1.65}
.st-ask-human>summary{padding:12px 0;border-top:1px solid #333;color:#e3b1bd}
#studio-search-results a{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:12px 0;border-bottom:1px solid #303030;color:#ece7e3;text-decoration:none;font-size:14px}
#studio-search-results p{font-size:14px;line-height:1.6}
@media(max-width:1280px){.st-header{grid-template-columns:1fr auto}.st-nav{display:none}}
@media(max-width:760px){.st-header{height:66px;padding:0 14px}.st-head-right{gap:6px}.st-search-trigger{width:42px;height:42px;min-height:42px;padding:0;justify-content:center}.st-search-trigger>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.st-mode-switch{width:42px;height:42px;padding:0;justify-content:center}.st-mode-switch>span{display:none}.st>.st-ask{inset:66px 0 0!important;width:100%!important;max-height:none!important;border-radius:0;padding:18px;box-sizing:border-box}.st-ask-human{padding-bottom:calc(24px + env(safe-area-inset-bottom))}}

@media(max-width:760px){.st-header .st-cta{display:inline-flex!important;width:42px;height:42px;padding:0;justify-content:center;font-size:0}.st-header .st-cta .st-arrow-icon{width:18px;height:18px}}
@media(max-width:640px){.st-contact-actions{align-items:stretch;flex-direction:column}.st-contact-actions a{justify-content:space-between;width:min(100%,330px)}}
@media(max-width:520px){.st-header .st-search-trigger{display:none}.st-wordmark{max-width:42vw}}
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* Conversational homepage studio guide */
.st-ask{width:min(440px,calc(100vw - 40px));max-height:min(780px,calc(100vh - 104px));overflow:auto}
.st-ask-ai-badge{display:flex;align-items:center;gap:9px;margin:16px 0 13px;color:#e8c1c8;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.st-ask-ai-badge i{width:8px;height:8px;border-radius:50%;background:#d96476;box-shadow:0 0 0 5px rgba(217,100,118,.13)}
.st-ask-chat-log{display:flex;flex-direction:column;gap:10px;max-height:270px;overflow:auto;padding:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12)}
.st-ask-message{max-width:88%;margin:0;padding:11px 13px;font-size:13px;line-height:1.55;white-space:pre-wrap}
.st-ask-message.is-assistant{align-self:flex-start;background:rgba(255,255,255,.08);color:rgba(255,255,255,.88)}
.st-ask-message.is-user{align-self:flex-end;background:#9d3042;color:#fff}
.st-ask-chat-form{margin-top:12px}.st-ask-chat-form>div{display:grid;grid-template-columns:1fr auto;gap:8px}
.st-ask .st-ask-chat-form input{margin:0;min-height:46px}.st-ask .st-ask-chat-form button{width:auto;min-width:78px;padding:0 14px}
.st-ask-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.st-ask-suggestions button,.st-ask-suggestions a{padding:8px 10px;border:1px solid rgba(255,255,255,.16);background:transparent;color:rgba(255,255,255,.72);font:600 9px/1.2 var(--sans);letter-spacing:.04em;cursor:pointer;text-decoration:none}
.st-ask-suggestions button:hover,.st-ask-suggestions a:hover{border-color:#d96476;color:#fff}
.st-ask-ai-note{margin:10px 0 18px;color:rgba(255,255,255,.46);font-size:10px;line-height:1.5}
@media(max-width:820px){.st-ask{max-height:calc(100vh - 86px)}.st-ask-chat-log{max-height:240px}}