/* Konverta Studios page (/studios/). Compact, app-like layout on site.css (Midnight Editorial tokens).
   Dark throughout: cream only on the client-logo chips (and site.css .btn-primary).
   Media never exceeds min(60vh, 520px): every frame has a fixed width/aspect or a max-height. Mobile-first. */

/* ---------- Shared bits ---------- */
.st-sec { position: relative; padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.st-head { display: grid; gap: 10px 32px; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.st-head .idx { margin: 0; }
.st-h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }
.st-h2 em { color: #8FE0E8; }
.st-sub { margin: 0; color: var(--soft); font-size: .975rem; }
@media (min-width: 1000px) {
  .st-head { grid-template-columns: minmax(200px, 1fr) 3fr; align-items: baseline; }
  .st-head .st-h2, .st-head .st-sub { grid-column: 2; }
}
.st-block-head { max-width: 52rem; margin-bottom: 1rem; }
.st-block-head h3 { margin: 0 0 .3rem; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.st-block-head p { margin: 0; color: var(--soft); font-size: .95rem; }
.st-block-head p + p { margin-top: .4rem; }
.st-block-head .pill { margin-bottom: .6rem; }
.st-block-head .kicker { margin-bottom: .5rem; }
.st-disclaimer { font-size: .875rem; font-style: italic; color: var(--muted) !important; }

.st-video { margin: 0; }
.st-frame {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 14px;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.st-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.st-16x9 { aspect-ratio: 16 / 9; }
.st-9x16 { aspect-ratio: 9 / 16; }
.st-8x5 { aspect-ratio: 8 / 5; }
.st-video figcaption { margin-top: .55rem; font-size: .875rem; line-height: 1.45; color: var(--soft); }
.st-video figcaption strong { color: var(--text); font-weight: 500; }
.st-frame-tag { position: absolute; z-index: 2; left: 12px; top: 12px; pointer-events: none; }
.st-frame-tag .pill { background: rgba(6, 15, 26, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- Hero: text left (~45%), showreel right (~55%, max 480px tall) ---------- */
.st-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); }
.st-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 80% 10%, rgba(15, 135, 210, .28), transparent 70%),
    radial-gradient(40% 50% at 5% 90%, rgba(15, 180, 195, .14), transparent 70%); }
.st-hero-grid { display: grid; gap: 1.1rem clamp(2rem, 4vw, 3.5rem); }
.st-h1 { margin: 0; font-size: clamp(2.3rem, 4.6vw, 3.9rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.02; max-width: 13ch; }
.st-h1 em { background: linear-gradient(100deg, #7EE6EE 0%, #0FB4C3 35%, #3AA6EC 70%, #9FD3F6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.st-hero-copy .kicker { margin-bottom: .9rem; }
.st-hero-side .lead { margin: 0 0 1.25rem; font-size: clamp(1rem, 1.3vw, 1.125rem); max-width: 48ch; }
.st-hero-side .hero-note { margin: 1rem 0 0; font-size: .875rem; color: var(--muted); }
.st-showreel { min-width: 0; }
.st-showreel .st-frame { max-width: calc(480px * 16 / 9); box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -40px rgba(15, 135, 210, .6), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.st-reel-cap { margin-top: .6rem; font-size: .875rem; color: var(--soft); }
.st-reel-play {
  position: absolute; z-index: 3; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(6, 15, 26, .6); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.st-reel-play[hidden] { display: none; }
.st-reel-play-i { display: grid; place-items: center; width: 44px; height: 44px; margin: auto; border-radius: 50%; background: var(--grad); color: var(--ink); }
.st-reel-play svg { width: 16px; height: 16px; margin-left: 2px; }
.st-reel-play:hover { border-color: var(--cyan); }
.st-ctrl-toggle {
  position: absolute; z-index: 4; right: 10px; top: 10px; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(6, 15, 26, .66); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 .6875rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
}
.st-ctrl-toggle[hidden] { display: none; }
.st-ctrl-toggle:hover, .st-ctrl-toggle[aria-pressed="true"] { border-color: var(--cyan); }
@media (min-width: 1000px) {
  .st-hero-grid { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); grid-template-rows: auto 1fr; align-items: start; }
  .st-hero-copy { grid-column: 1; grid-row: 1; padding-top: 1rem; }
  .st-hero-side { grid-column: 1; grid-row: 2; }
  .st-showreel { grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: 100%; }
}

/* Featured work: slim row of small thumbnails (horizontal scroll on phones) */
.st-featured {
  list-style: none; margin: clamp(1.25rem, 2.5vw, 1.75rem) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) .25rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.st-featured::-webkit-scrollbar { display: none; }
.st-featured li { scroll-snap-align: start; min-width: 0; }
.st-feat {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 8px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none;
  transition: border-color .25s, background-color .25s;
}
.st-feat:hover { color: var(--text); border-color: rgba(15, 180, 195, .5); background: var(--surface-2); }
.st-feat img { flex: none; width: 72px; height: 56px; border-radius: 9px; object-fit: cover; }
.st-feat img.is-sam { object-position: 50% 30%; }
.st-feat span { display: grid; gap: 2px; min-width: 0; }
.st-feat strong { font-weight: 400; font-size: .9375rem; line-height: 1.2; }
.st-feat strong::after { content: " →"; color: var(--cyan); }
.st-feat small { font-size: .75rem; color: var(--muted); }
@media (min-width: 1000px) { .st-featured { margin-inline: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- How we advise: 5-step flow ---------- */
.st-advise { padding-block: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.st-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
.st-flow li { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 12px; align-content: start; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.st-flow .num { grid-row: span 3; font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--cyan); }
.st-flow h3 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.st-flow p { margin: 0 0 .6rem; font-size: .875rem; line-height: 1.45; color: var(--soft); }
.st-chip {
  justify-self: start; display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: 999px;
  font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  color: var(--accent); border: 1px solid rgba(15, 180, 195, .45); background: rgba(15, 180, 195, .08);
}
.st-flow-note { margin: 1rem 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--text); }
@media (min-width: 1000px) {
  .st-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .st-flow li { grid-template-columns: 1fr; padding: 16px 18px 6px; border-top: 0; }
  .st-flow li + li { border-left: 1px solid var(--line); }
  .st-flow li:first-child { padding-left: 0; }
  .st-flow .num { grid-row: auto; margin-bottom: .55rem; }
  /* arrow between steps */
  .st-flow li + li::before { content: ""; position: absolute; left: -5px; top: 22px; width: 9px; height: 9px; border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); transform: rotate(45deg); background: var(--ink); }
}

/* ---------- Trusted by: logos on cream chips ---------- */
.st-trust { border-block: 1px solid var(--line); }
.st-trust-in { display: grid; gap: .8rem; padding-block: 1rem; }
.st-trust-label { margin: 0; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.st-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(10px, 2.4vw, 22px); }
.st-logos li {
  display: grid; place-items: center; height: 52px; min-width: 138px; padding: 0 18px; border-radius: 12px;
  background: var(--cream); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 14px 30px -18px rgba(15, 180, 195, .5);
}
.st-logos img { height: 28px; width: auto; max-width: 118px; object-fit: contain; }
@media (max-width: 420px) { .st-logos li { flex: 0 0 calc(50% - 5px); min-width: 0; padding: 0 12px; } }
@media (min-width: 720px) {
  .st-trust-in { grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
  .st-trust-label { padding-right: 24px; border-right: 1px solid var(--line); }
}

/* ---------- Services: compact 5-up row (snap rail below 1000px) ---------- */
.st-services {
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) .5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 270px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: rgba(15, 180, 195, .5) transparent;
}
.st-services > li { scroll-snap-align: start; }
.st-service { padding: 1.25rem 1.25rem 1.4rem; border-top: 1px solid rgba(15, 180, 195, .5); }
.st-service .card-top { margin-bottom: .9rem; }
.st-service h3 { font-size: 1.1rem; font-weight: 400; margin-bottom: .45rem; }
.st-service p { font-size: .9rem; line-height: 1.5; }
.st-service.is-lead { background: linear-gradient(150deg, #0A1F36 0%, #0F2D4B 60%, #0F4F8A 140%); border-color: rgba(15, 180, 195, .35); }
@media (min-width: 1000px) {
  .st-services { margin: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Work: tabs ---------- */
.st-tabs {
  display: flex; gap: 6px; margin: 0 calc(var(--gutter) * -1) clamp(1rem, 2vw, 1.4rem); padding: 0 var(--gutter) 4px;
  overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line);
}
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: .9rem; font-weight: 400; color: var(--soft); text-decoration: none; white-space: nowrap;
  border-radius: 10px 10px 0 0; transition: color .2s, background-color .2s;
}
.st-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -5px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transition: transform .3s var(--ease); }
.st-tab:hover { color: var(--text); background: var(--surface); }
.st-tab[aria-selected="true"] { color: var(--text); }
.st-tab[aria-selected="true"]::after { transform: scaleX(1); }
.st-tab:focus-visible { outline-offset: -2px; }
@media (min-width: 1000px) { .st-tabs { margin-inline: 0; padding-inline: 0; } }
.st-panel { padding-bottom: .5rem; }
.st-panel[hidden] { display: none; }
.st-panel:focus { outline: none; }
/* without JS every panel shows: separate them */
html:not(.js) .st-panel + .st-panel { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* Reels: horizontal rail of ~240px cards at every width */
.st-rail {
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: .25rem var(--gutter) .75rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: rgba(15, 180, 195, .5) transparent;
}
.st-rail > li { scroll-snap-align: start; min-width: 0; }
.st-rail .st-frame { max-height: min(60vh, 427px); }
.st-rail:focus-visible { outline-offset: -3px; }
@media (min-width: 1000px) { .st-rail { margin: 0; padding-inline: 0; } }

/* AI influencers (experimental): Sam, cropped like the homepage */
.st-influencer { display: grid; gap: 1.25rem; align-items: center; }
.st-sam-quote { margin: 1rem 0 .75rem; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.05; color: var(--text); max-width: 14ch; }
.st-sam-quote em { color: var(--accent); }
.st-sam { width: 220px; justify-self: center; }
.st-sam-frame { border-radius: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 5px rgba(6, 15, 26, .7), 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 70px -10px rgba(15, 135, 210, .35); }
.st-sam-frame video { object-fit: cover; object-position: 50% 34%; }
/* SAM: screen recording with Instagram UI; crop the chrome (only once JS has swapped native controls for the button) */
.st-sam-frame.is-live video { transform: scale(1.2); transform-origin: 50% 40%; cursor: pointer; }
.st-sam figcaption { text-align: center; }
@media (min-width: 760px) {
  .st-influencer { grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(2rem, 5vw, 4rem); }
  .st-sam { justify-self: end; }
}
@media (min-width: 1000px) { .st-influencer { grid-template-columns: minmax(0, 1fr) 220px minmax(0, .5fr); } .st-sam { justify-self: center; } }
.st-vbtn {
  position: absolute; z-index: 4; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px 0 5px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(6, 15, 26, .7); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 .6875rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
.st-vbtn[hidden] { display: none; }
.st-vbtn i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: var(--ink); font-style: normal; }
.st-vbtn svg { width: 12px; height: 12px; }
.st-vbtn .i-pause { display: none; }
.st-vbtn[aria-pressed="true"] .i-play { display: none; }
.st-vbtn[aria-pressed="true"] .i-pause { display: block; }
.st-vbtn:hover { border-color: var(--cyan); }

/* Key visuals: photography era vs AI era (same three frames, fixed height, ratios preserved) */
.st-eras { margin-bottom: 1.5rem; }
.st-era-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: .9rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); }
.st-era-toggle[hidden] { display: none; }
.st-era-toggle button {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--soft);
  font: 500 .8125rem/1 var(--font); letter-spacing: .02em; transition: background-color .2s, color .2s;
}
.st-era-toggle button:hover { color: var(--text); }
.st-era-toggle button[aria-pressed="true"] { background: var(--grad); color: var(--ink); font-weight: 600; }
.st-era[hidden] { display: none; }
.st-eras:not(.is-live) .st-era + .st-era { margin-top: 1.5rem; }
.st-era-lead { margin: 0 0 .8rem; max-width: 70ch; font-size: .9375rem; color: var(--soft); }
.st-era-lead strong { color: var(--text); font-weight: 500; }
.st-era-frames { --h: 250px; list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 12px; }
.st-era-frames li { position: relative; flex: none; height: var(--h); overflow: hidden; border-radius: 10px; background: #000; box-shadow: inset 0 0 0 1px var(--line); }
.st-era-frames .f-16x9 { aspect-ratio: 16 / 9; }
.st-era-frames .f-1x1 { aspect-ratio: 1 / 1; }
.st-era-frames .f-9x16 { aspect-ratio: 9 / 16; }
.st-era-frames img { width: 100%; height: 100%; object-fit: cover; }
.st-fmt { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(6, 15, 26, .78); border: 1px solid var(--line-2); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; color: var(--text); }
@media (max-width: 1100px) { .st-era-frames { --h: min(250px, calc((100vw - 2 * var(--gutter) - 24px) / 3.3334)); } }
@media (max-width: 599px) {
  .st-era-frames { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5625fr); align-items: start; gap: 8px; }
  .st-era-frames li { height: auto; }
  .st-era-frames .f-16x9 { grid-column: 1 / -1; }
}
.st-callouts { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-callouts li { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 12px 3px 8px; border-radius: 999px; font-size: .8125rem; line-height: 1.25; }
.st-callouts li::before { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .6875rem; font-weight: 600; flex: none; }
.st-callouts.is-bad li { color: #FFD3CE; border: 1px solid rgba(255, 140, 130, .45); background: rgba(255, 120, 110, .08); }
.st-callouts.is-bad li::before { content: "\2715"; color: var(--ink); background: var(--danger); }
.st-callouts.is-good li { color: #D6F7F9; border: 1px solid rgba(15, 180, 195, .5); background: rgba(15, 180, 195, .1); }
.st-callouts.is-good li::before { content: "\2713"; color: var(--ink); background: var(--accent); }

/* below the comparison: thumbnails (lightbox) + before/after */
.st-kv-more { display: grid; gap: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .st-kv-more { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } }
.st-kv-col .st-block-head { margin-bottom: .55rem; }
.st-kv-col .st-block-head h3 { font-size: 1.05rem; }
.st-kv-sub { margin-top: 1rem; }
.st-thumbs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .st-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-thumb { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; cursor: zoom-in; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.st-thumb:hover img { transform: scale(1.06); }
.st-thumb span { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(6, 15, 26, .78); font-size: .6875rem; line-height: 1.4; color: var(--text); }
.st-kv-col .st-ba { max-width: 420px; }

/* Before / after. No JS: side by side. With JS (.is-live): stacked + range slider. */
.st-ba { position: relative; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(480px * 16 / 9); }
.st-ba-item { position: relative; margin: 0; }
.st-ba-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--ink-2); }
.st-ba-item figcaption {
  position: absolute; top: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: .625rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(6, 15, 26, .78); color: var(--text); border: 1px solid var(--line-2);
}
.st-ba-before figcaption { left: 10px; }
.st-ba-after figcaption { right: 10px; }
.st-ba-range { display: none; }
.st-ba.is-live { --pos: 50%; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .85); }
.st-ba.is-live .st-ba-item { grid-area: 1 / 1; }
.st-ba.is-live .st-ba-item img { border-radius: 0; }
.st-ba.is-live .st-ba-after { clip-path: inset(0 0 0 var(--pos)); }
.st-ba.is-live::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--accent); box-shadow: 0 0 18px rgba(15, 180, 195, .8); pointer-events: none;
}
.st-ba-handle {
  display: none; position: absolute; top: 50%; left: var(--pos); z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background-color: var(--ink); color: var(--accent); border: 1px solid var(--accent); pointer-events: none;
  box-shadow: 0 0 0 5px rgba(6, 15, 26, .45), 0 10px 30px -6px rgba(15, 180, 195, .6);
}
.st-ba-handle svg { width: 20px; height: 20px; margin: 11px; }
.st-ba.is-live .st-ba-handle { display: block; }
.st-ba.is-live .st-ba-range {
  display: block; position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; border: 0; box-shadow: none;
}
.st-ba.is-live:focus-within .st-ba-handle { outline: 2px solid var(--accent); outline-offset: 4px; }
.st-ba-help { margin: .6rem 0 0; font-size: .8125rem; color: var(--muted); }

/* Fan film: 16:9 + matching-height 9:16 */
.st-concept { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.st-concept > .st-video:first-child { max-width: calc(min(60vh, 400px) * 16 / 9); }
.st-concept .st-video-tall { width: min(100%, 200px); }
@media (min-width: 760px) {
  .st-concept { grid-template-columns: minmax(0, 711px) 200px; justify-content: start; }
  .st-concept > .st-video:first-child { max-width: none; }
  .st-concept .st-video-tall { width: 200px; }
}

/* ---------- Why: slim row ---------- */
.st-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.st-why li { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.st-why .n { grid-row: span 2; font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(15, 180, 195, .8); }
.st-why h3 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.st-why p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--soft); }
@media (min-width: 760px) { .st-why { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
@media (min-width: 1100px) {
  .st-why { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; border-bottom: 1px solid var(--line); }
  .st-why li { grid-template-columns: 1fr; padding: 16px 18px; border-bottom: 0; }
  .st-why li + li { border-left: 1px solid var(--line); }
  .st-why li:first-child { padding-left: 0; }
  .st-why .n { grid-row: auto; margin-bottom: .4rem; }
}

/* ---------- Book: copy beside the form ---------- */
.st-book { overflow: hidden; }
.st-book::before { content: ""; position: absolute; left: 50%; bottom: -60%; width: 120%; height: 110%; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(15, 180, 195, .2), rgba(15, 135, 210, .1) 45%, transparent 75%); }
.st-book-grid { position: relative; display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 1000px) { .st-book-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.st-book-copy .idx { margin-bottom: .9rem; }
.st-book-copy .st-h2 { max-width: 14ch; margin-bottom: .9rem; }
.st-book-copy > p { color: var(--soft); max-width: 42ch; }
.st-book-copy .btn-row { margin: 1.25rem 0 1rem; }
.st-book .contact-line .muted { color: var(--muted); }
.st-form { padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.st-form .form-title { font-size: 1.15rem; margin-bottom: .8rem; }
.st-form .form, .st-form .form-row { gap: .75rem; }
.st-form input[type="text"], .st-form input[type="email"], .st-form select { min-height: 44px; padding-block: .6rem; }
.st-form textarea { min-height: 92px; }
.st-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.st-form-foot .btn { min-height: 46px; }

/* ---------- Also from Konverta.ai ---------- */
.st-also { padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--line); }
.st-also .st-trust-label { margin-bottom: .9rem; }
.st-also-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .st-also-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-also-line {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: .55rem 1rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--soft); font-size: .9rem; text-decoration: none; transition: border-color .25s, color .25s;
}
.st-also-line .pill { flex: none; }
.st-also-line > span:last-child::after { content: " \2192"; color: var(--cyan); }
.st-also-line:hover { color: var(--text); border-color: rgba(15, 180, 195, .5); }

/* ---------- Lightbox (native <dialog>) ---------- */
.st-lightbox {
  width: min(96vw, 1200px); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--ink-2); color: var(--text); box-shadow: 0 40px 120px rgba(0, 0, 0, .8); overflow: hidden;
}
.st-lightbox::backdrop { background: rgba(3, 8, 14, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.st-lightbox figure { margin: 0; display: grid; place-items: center; background: #000; }
.st-lightbox img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
.st-lightbox figcaption { width: 100%; padding: .7rem 1rem; font-size: .9rem; color: var(--soft); background: var(--ink-2); }
.st-lightbox figcaption[hidden] { display: none; }
.st-lb-btn {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(6, 15, 26, .72); color: var(--text); font: 300 1.6rem/1 var(--font);
}
.st-lb-btn:hover { border-color: var(--cyan); }
.st-lb-prev { left: 12px; top: 50%; margin-top: -22px; }
.st-lb-next { right: 12px; top: 50%; margin-top: -22px; }
.st-lb-close { right: 12px; top: 12px; }
.st-lb-count { position: absolute; left: 14px; top: 14px; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(6, 15, 26, .72); font-size: .75rem; letter-spacing: .1em; color: var(--soft); }

@media (prefers-reduced-motion: reduce) {
  .st-rail, .st-services, .st-featured { scroll-behavior: auto; }
}

/* =====================================================================
   Work as separate sections (A–F). Rule: vertical video is never shown alone,
   always three 9:16 frames side by side at equal height.
   ===================================================================== */
/* head left, media right (desktop); stacked on phones */
.st-split { display: grid; gap: clamp(24px, 3vw, 40px); align-items: center; }
section.band .st-split > .band-head { margin-bottom: 0; }
.st-actions { margin-top: 20px !important; }
@media (min-width: 1000px) { .st-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); gap: clamp(36px, 4vw, 64px); } }

/* 3-up row of 9:16 frames */
.st-trio-wrap { min-width: 0; }
.st-trio { --tile-h: min(460px, 60vh); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 14px; justify-content: end; }
.st-trio-item { margin: 0; }
.st-trio-frame {
  position: relative; display: block; height: var(--tile-h); aspect-ratio: 9 / 16; padding: 0; border: 0; overflow: hidden; border-radius: 14px;
  background: #000; color: inherit; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .85);
}
button.st-trio-frame { cursor: pointer; }
button.st-trio-frame::after { content: "\25B6  Sound"; position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(6, 15, 26, .7); border: 1px solid var(--line-2); font: 500 .625rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text); opacity: .85; transition: opacity .2s, border-color .2s; }
button.st-trio-frame:hover::after, button.st-trio-frame:focus-visible::after { opacity: 1; border-color: var(--cyan); }
.st-trio-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-trio-item figcaption { margin-top: 8px; max-width: calc(var(--tile-h) * 9 / 16); font-size: .8125rem; line-height: 1.4; color: var(--soft); }
.st-trio-item figcaption strong { color: var(--text); font-weight: 500; }
.st-trio-btn { display: inline-flex; align-items: center; margin-top: 12px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); cursor: pointer; font: 500 .75rem/1 var(--font); letter-spacing: .08em; }
.st-trio-btn[hidden] { display: none; }
.st-trio-btn:hover { color: var(--text); border-color: var(--cyan); }
@media (min-width: 1000px) { .st-trio-wrap { text-align: right; } .st-trio-item { text-align: left; } }
@media (max-width: 999px) and (min-width: 600px) { .st-trio { --tile-h: min(420px, 60vh); justify-content: start; } }
/* phones: swipe row showing ~1.3 cards so the next one peeks in */
@media (max-width: 599px) {
  .st-trio { --tile-h: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68vw; justify-content: start;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .st-trio::-webkit-scrollbar { display: none; }
  .st-trio > li { scroll-snap-align: start; }
  .st-trio-frame { width: 100%; height: auto; max-height: min(60vh, 520px); }
  .st-trio-item figcaption { max-width: none; }
}

/* Key visuals: both eras at once, aligned column by column */
.st-eras2 { --h: 240px; display: grid; gap: 0; }
.st-era2 { display: grid; gap: 14px 32px; align-items: center; }
.st-era2-label p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--soft); max-width: 44ch; }
.st-era2-label .st-era2-name { margin-bottom: 6px; font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.is-photo .st-era2-name { color: #FFB3AA; }
.is-ai .st-era2-name { color: var(--accent); }
.st-era2-frames { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; align-items: flex-end; }
.st-era2-frames li { position: relative; flex: none; height: var(--h); overflow: hidden; border-radius: 10px; background: #000; box-shadow: inset 0 0 0 1px var(--line); }
.st-era2-frames .f-16x9 { aspect-ratio: 16 / 9; }
.st-era2-frames .f-1x1 { aspect-ratio: 1 / 1; }
.st-era2-frames .f-9x16 { aspect-ratio: 9 / 16; }
.st-era2-frames img { width: 100%; height: 100%; object-fit: cover; }
.st-era2-frames li.is-bad img { filter: saturate(.45) brightness(.82); }
.st-era2-frames li.is-bad { box-shadow: inset 0 0 0 1px rgba(255, 140, 130, .45); }
.st-era2 .st-fmt { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(6, 15, 26, .8); border: 1px solid var(--line-2); font-size: .6875rem; font-weight: 500; letter-spacing: .06em; color: var(--text); }
.st-flag { position: absolute; left: 8px; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 16px); padding: 4px 9px 4px 6px; border-radius: 999px; font-size: .6875rem; line-height: 1.25; }
.st-flag::before { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; font-size: .625rem; font-weight: 700; color: var(--ink); }
.st-flag.is-bad { color: #FFE1DD; background: rgba(60, 14, 12, .82); border: 1px solid rgba(255, 140, 130, .6); }
.st-flag.is-bad::before { content: "\2715"; background: var(--danger); }
.st-flag.is-good { color: #DFFAFC; background: rgba(4, 30, 36, .82); border: 1px solid rgba(15, 180, 195, .6); }
.st-flag.is-good::before { content: "\2713"; background: var(--accent); }
.st-vs { position: relative; margin: 14px 0; height: 24px; text-align: center; }
.st-vs::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line-2); }
.st-vs span { position: relative; display: inline-grid; place-items: center; width: 38px; height: 24px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line-strong); font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--text); }
@media (min-width: 1000px) {
  .st-era2 { grid-template-columns: 240px minmax(0, 1fr); }
  .st-vs { margin-left: 272px; }
}
@media (max-width: 1239px) and (min-width: 1000px) { .st-eras2 { --h: 200px; } }
@media (max-width: 999px) {
  .st-eras2 { --h: 200px; }
  .st-era2-frames { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .st-era2-frames::-webkit-scrollbar { display: none; }
  .st-era2-frames li { scroll-snap-align: start; }
}
.st-thumbs-row { margin-top: clamp(24px, 3vw, 36px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1000px) { .st-thumbs-row { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 559px) { .st-thumbs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-thumbs-row li:nth-child(n+5) { display: none; } }

/* Photorealistic 3D visualisation */
.st-viz { min-width: 0; }
.st-ba-viz { max-width: none; width: 100%; max-height: min(60vh, 520px); aspect-ratio: 16 / 9; }
.st-ba-viz.is-live { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.st-ba-viz .st-ba-item img { aspect-ratio: 16 / 9; }
.st-ba-viz.is-live .st-ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.st-ba-viz.is-live .st-ba-after { clip-path: inset(0 0 0 var(--pos)); }
.st-ba-viz.is-live .st-ba-item { grid-area: 1 / 1; }
.st-viz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 12px; }
.st-viz-labels { display: flex; justify-content: space-between; gap: 16px; flex: 1 1 260px; margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.st-viz-labels span:last-child { color: var(--accent); }
.st-pairs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.st-pairs button { display: block; width: 72px; height: 41px; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid var(--line-2); background: var(--ink-2); opacity: .7; transition: opacity .2s, border-color .2s; }
.st-pairs button img { width: 100%; height: 100%; object-fit: cover; }
.st-pairs button:hover { opacity: 1; }
.st-pairs button[aria-pressed="true"] { opacity: 1; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.st-viz .st-ba-help { margin-top: 8px; }

/* Fan film (16:9 only) */
.st-fan-film { min-width: 0; }
.st-fan-film .st-frame { max-height: min(60vh, 520px); }

/* Full-reel player */
.st-vlb { width: min(92vw, 440px); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: #000; color: var(--text); overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .8); }
.st-vlb::backdrop { background: rgba(3, 8, 14, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.st-vlb video { display: block; width: 100%; max-height: 84vh; aspect-ratio: 9 / 16; background: #000; object-fit: contain; }
.st-vlb-title { margin: 0; padding: .65rem 1rem; font-size: .875rem; color: var(--soft); background: var(--ink-2); }
.st-vlb .st-lb-close { right: 10px; top: 10px; }

/* the book glow sits behind the band surface */
.st-book.band::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -60%; width: 120%; height: 110%; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(15, 180, 195, .16), rgba(15, 135, 210, .08) 45%, transparent 75%); }
.st-vlb.is-wide { width: min(94vw, 1100px); }
.st-vlb.is-wide video { aspect-ratio: 16 / 9; }
.st-trio-note { margin: 10px 0 0; font-size: .75rem; }
@media (min-width: 1000px) { .st-trio-note { text-align: right; } }
section.band .st-split .band-head > h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); }