/* Asta Sans is self-hosted under OFL 1.1. Helvetica uses the visitor's system font. */
@font-face {
  font-family: 'Asta Sans';
  src: url('/assets/asta-sans-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/assets/DMMono-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  --font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Asta Sans', Helvetica, Arial, sans-serif;
  --section-title: clamp(38px, 3.35vw, 48px);
  --content-gutter: max(var(--gutter), calc((100vw - 1472px) / 2));
}
body { font-family: var(--font-body); font-weight: 400; }
h1, h2, h3,
.creator-card-copy, .creative-overlay, .creative-card-caption strong,
.process-item button, .metric-grid strong, .form-heading {
  font-family: var(--font-heading);
  font-weight: 650;
}
h1, h2, h3 { letter-spacing: -.035em; }
p { line-height: 1.6; }
.eyebrow, .outline-tag, .character-spec, .footer-bottom,
.brief-form label, .brief-form input, .brief-form textarea, .form-note {
  font-family: var(--font-body);
}
.brand, .footer-wordmark { font-family: var(--font-heading); font-weight: 600; }
.brand-logo { display: block; width: 152px; height: auto; }
.brand-logo--white { width: 154px; }
.brand-logo--black { width: 154px; }
.brand-mark-image { display: block; width: 35px; height: 35px; object-fit: contain; }
.network-center .brand-mark-image { width: 35px; height: 35px; }
.distribution-hub .brand-mark-image { width: 35px; height: 35px; }
.hero--reels h1 {
  font-size: clamp(48px, 4.85vw, 78px);
  line-height: 1.07;
  letter-spacing: -.045em;
  font-weight: 650;
}
.hero--reels h1 span,
.operation-heading h2 span,
.creators > .section-intro h2 span,
.network-copy h2 span,
.faq-heading h2 span { display: block; }
.hero--reels .hero-content > p { font-size: 18px; max-width: 450px; }
.hero--reels .hero-content .button { font-weight: 400; }
.hero-partners h2 {
  font: 400 13px/1.2 var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  padding: 9px 12px;
}
.hero-partners .treg-wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 130px;
  height: 36px;
  overflow: visible;
  color: #181818;
}
.treg-wordmark img { width: 31px; height: 31px; object-fit: contain; }
.treg-wordmark > span { font: 500 25px/1 'DM Mono', monospace; letter-spacing: -.045em; }

/* Consistent, generous spaces separate the story, comparison, and process. */
.section { padding-block: 112px; }
.approach, .comparison-section, .operation {
  max-width: none;
  padding-inline: var(--content-gutter);
  background: var(--bg);
}
.operation { position: relative; isolation: isolate; }
.approach .split-heading { margin-bottom: 0; }
.split-heading, .creators > .section-intro,
.comparison-heading, .faq, .contact {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  max-width: none;
}
.split-heading::before, .creators > .section-intro::before,
.comparison-heading::before, .faq::before, .contact::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #24212326;
  pointer-events: none;
}
.split-heading > h2, .split-heading > div,
.creators > .section-intro h2, .creators > .section-intro > p {
  padding-inline: 32px;
  border: 0;
}
.split-heading > h2, .creators > .section-intro h2 { padding-left: 0; padding-right: 32px; }
.split-heading > div, .creators > .section-intro > p { padding-left: 32px; padding-right: 0; }
.split-heading > div { gap: 24px; }
.split-heading p, .creators > .section-intro > p {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
  color: #171719;
}
.split-heading h2, .creators > .section-intro h2,
.comparison-heading h2, .operation-heading h2,
.network-copy h2, .faq h2, .contact-intro h2,
.metric-heading h3 {
  font-size: var(--section-title);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.14;
  text-wrap: pretty;
}
.button { font-size: 16px; border-radius: 14px; }
.section .button-outline { border-color: #24212380; }
.section .button-outline:hover { background: #242123; color: #fff; }

/* A quiet table with room to read; the Fama column is the only tinted surface. */
.comparison-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin: 0 0 64px;
}
.comparison-heading h2 { max-width: 650px; }
.comparison-heading p {
  max-width: 440px;
  font-size: 18px;
  line-height: 1.6;
  color: #171719;
  padding: 5px 32px 0;
}
.comparison-heading p { padding-left: 32px; padding-right: 32px; }
.comparison-heading > * { position: relative; z-index: 1; }
.comparison-switch { display: none; }
.comparison-scroll {
  width: min(100%, 1280px);
  margin: 0 auto;
  border: 1px solid #24212314;
  border-radius: 34px;
  background: #ffffff63;
  overflow: hidden;
}
.comparison-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.comparison-table { min-width: 0; font-size: 16px; line-height: 1.45; }
.comparison-table th, .comparison-table td {
  padding: 21px 24px;
  border-right: 0;
  border-bottom: 1px solid #2421231c;
  vertical-align: top;
}
.comparison-table thead th {
  background: transparent;
  padding-block: 24px;
  font-size: 18px;
  line-height: 1.35;
  font-family: var(--font-heading);
  font-weight: 600;
}
.comparison-table th:first-child { width: 17%; }
.comparison-table th:nth-child(n+2) { width: 27.666%; }
.comparison-table tbody th { font-size: 15px; font-weight: 500; color: #3a3337; }
.comparison-table td { color: #29282a; }
.comparison-table .comparison-fama { background: #eee5e5; color: #272124; }
.comparison-table thead .comparison-fama { color: #9f304e; font-weight: 700; }
.results-promise {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-top: 36px;
  color: #625a5e;
}
.results-promise p { font-size: 16px; }
.results-promise strong { font-weight: 600; }

/* Process headings are compact selectors, with an outlined destination button. */
.operation-heading { margin-bottom: 72px; }
.operation-heading h2 { max-width: 1000px; }
.operation-heading h2 { max-width: 720px; }
.process-grid {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 8%;
  align-items: start;
}
.process-tabs { border: 0; padding: 0; }
.process-item { border: 0; padding: 4px 0; }
.process-item button {
  padding: 16px;
  border-radius: 13px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
}
.process-item button:hover { background: #24212308; }
.process-item.active button { background: #e6e3e1; }
.process-description { padding: 24px 16px 32px; }
.process-description p { font-size: 18px; line-height: 1.6; max-width: 390px; margin-bottom: 28px; color: #171719; }
.process-description .text-link {
  align-items: center;
  gap: 28px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 400;
  border: 1px solid #24212370;
  border-radius: 14px;
  padding: 13px 16px;
  transition: background .2s, color .2s;
}
.process-description .text-link:hover { color: #fff; background: #242123; }
.process-description .text-link span { font-family: Arial, sans-serif; font-size: 19px; }
.process-art { min-height: 0; aspect-ratio: 1.2; border-radius: 32px; }
.process-art .network-center { transition: background .35s, border-color .35s; }
.process-art[data-step='1'] .network-center { background: #181619; }
.process-art[data-step='2'] .network-center { background: #181619; }
.process-art[data-step='3'] .network-center { background: #181619; }
.process-art .network-center > span:last-child { font-size: 14px; }

.creator-statement h3 { font-size: clamp(32px, 3.1vw, 44px); margin-top: 0; line-height: 1.15; }
.creator-statement p { max-width: 380px; line-height: 1.6; color: #171719; }
.metric-section { margin-top: 104px; padding: 96px 0 0; border-top: 0; }
.metric-heading { display: block; padding: 0 24px 110px; text-align: center; }
.metric-heading h3 { max-width: 760px; margin-inline: auto; }
.metric-heading p { max-width: 720px; margin: 30px auto 0; font-size: 18px; line-height: 1.5; }
.metric-grid { border-top: 0; border-bottom: 0; }
.metric-grid article, .metric-grid article:first-child {
  position: relative;
  min-height: 420px;
  padding: 88px 32px 54px;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 1px solid #24212326;
}
.metric-grid article:last-child { border-right: 0; }
.metric-grid strong { font-size: clamp(58px, 6.1vw, 96px); font-weight: 650; letter-spacing: -.045em; }
.metric-grid p { position: absolute; left: 32px; right: 32px; top: 300px; margin: 0; font-size: 18px; line-height: 1.5; color: #171719; }
.creative-card-caption strong { font-weight: 600; }
.network-section-inner { padding-block: 112px; }
.network-copy p { font-size: 18px; line-height: 1.6; }
.service-grid h3 { font-weight: 650; font-size: 28px; }
.service-grid p { font-size: 17px; line-height: 1.6; }
.faq-list summary { font-family: var(--font-heading); font-weight: 600; font-size: 21px; }
.faq-list details p { font-size: 17px; line-height: 1.65; }
.contact { column-gap: 9%; }
.contact-intro h2 { max-width: 590px; }
.contact-intro p { max-width: 470px; }
.brief-form label { font-size: 14px; }
.brief-form input, .brief-form textarea { font-size: 17px; }
.form-note { font-size: 13px; line-height: 1.5; }
.footer { padding-top: 88px; padding-bottom: 34px; --footer-title-size: clamp(100px, 19.2vw, 310px); }
.footer-column a { font-size: 17px; line-height: 1.45; }
.footer-wordmark { font-weight: 550; letter-spacing: -.055em; }
.faq-heading { padding-right: 64px; }
.faq-list { padding-left: 32px; }
.footer-bottom { font-size: 14px; }
.card-light { display: none !important; }
.hero-partners .customer-logo { height: 24px; max-width: 118px; }
.hero-partners .customer-logo--treg { max-width: 94px; }
.hero-partners .customer-logo--monid, .hero-partners .customer-logo--kuse { max-width: 98px; }

@media (min-width: 810px) and (max-width: 1100px) {
  .hero--reels h1 { font-size: 4.8vw; }
  .split-heading > h2, .split-heading > div,
  .creators > .section-intro h2, .creators > .section-intro > p { padding-inline: 24px; }
  .split-heading > h2, .creators > .section-intro h2 { padding-left: 0; padding-right: 24px; }
  .split-heading > div, .creators > .section-intro > p { padding-left: 24px; padding-right: 0; }
  .comparison-heading { gap: 6%; }
  .comparison-table th, .comparison-table td { padding: 24px 20px; }
  .comparison-table thead th { font-size: 18px; }
  .process-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 5%; }
  .process-art { aspect-ratio: 1; }
  .process-item button { font-size: 20px; }
  .process-description p { font-size: 17px; }
  .results-promise { flex-direction: column; gap: 8px; }
  .footer-column { padding-inline: 24px; }
}
@media (max-width: 809px) {
  :root { --section-title: clamp(34px, 6vw, 44px); }
  .section, .network-section-inner { padding-block: 72px; }
  .hero.hero--reels { flex-direction: column; }
  .hero--reels h1 { font-size: clamp(42px, 8vw, 64px); line-height: 1.08; }
  .hero--reels h1 span { display: inline; }
  .hero--reels .hero-content > p { font-size: 17px; }
  .hero-partners .treg-wordmark { height: 28px; gap: 7px; max-width: 115px; }
  .treg-wordmark img { width: 27px; height: 27px; }
  .treg-wordmark > span { font-size: 22px; }
  .split-heading, .creators > .section-intro { grid-template-columns: 1fr; gap: 32px; }
  .split-heading::before, .creators > .section-intro::before,
  .comparison-heading::before, .faq::before, .contact::before { display: none; }
  .split-heading > h2, .split-heading > div,
  .creators > .section-intro h2, .creators > .section-intro > p { padding-inline: 20px 0; }
  .split-heading > h2, .creators > .section-intro h2 { padding-right: 0; }
  .split-heading > div, .creators > .section-intro > p { padding-left: 0; }
  .split-heading p, .creators > .section-intro > p { font-size: 17px; }
  .comparison-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
  .comparison-heading p { padding: 0; font-size: 17px; max-width: 560px; }
  .comparison-switch { display: flex; gap: 8px; margin-bottom: 20px; }
  .comparison-switch button {
    flex: 1;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #24212330;
    border-radius: 12px;
    background: transparent;
  }
  .comparison-switch button[aria-pressed='true'] { background: #242123; color: #fff; border-color: #242123; }
  .comparison-table { min-width: 0; font-size: 16px; }
  .comparison-table th, .comparison-table td { display: none; padding: 22px 18px; }
  .comparison-table th:first-child { display: table-cell; width: 32%; font-size: 15px; }
  .comparison-scroll[data-provider='kol'] tr > :nth-child(2),
  .comparison-scroll[data-provider='ugc'] tr > :nth-child(3),
  .comparison-scroll[data-provider='fama'] tr > :nth-child(4) { display: table-cell; width: 68%; }
  .comparison-table thead th { font-size: 18px; }
  .results-promise { flex-direction: column; gap: 10px; margin-top: 28px; }
  .results-promise p { font-size: 15px; }
  .operation-heading { margin-bottom: 40px; }
  .process-grid { grid-template-columns: 1fr; gap: 32px; }
  .process-item button { font-size: 21px; }
  .process-description p { max-width: 550px; font-size: 17px; }
  .process-art { width: 100%; max-width: 600px; min-height: 360px; justify-self: center; }
  .creator-statement h3 { font-size: 34px; }
  .metric-heading { padding: 0 20px 56px; }
  .metric-section { margin-top: 62px; padding-top: 58px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid article, .metric-grid article:first-child { min-height: 260px; padding: 58px 22px 32px; border-left: 0; border-right: 0; border-bottom: 1px solid #24212326; }
  .metric-grid p { position: static; margin-top: 90px; }
  .metric-grid article:last-child { border-bottom: 0; }
  .metric-grid strong { font-size: clamp(64px, 19vw, 96px); }
  .contact { grid-template-columns: 1fr; }
  .footer { padding-block: 64px 28px; --footer-title-size: 19vw; }
  .footer-column { padding-left: 20px; padding-right: 0; }
  .footer-column a { font-size: 16px; }
}
@media (max-width: 430px) {
  .hero--reels h1 { font-size: clamp(39px, 10.9vw, 47px); }
  .hero-partners .customer-logos { gap: 24px 16px; }
  .comparison-table th, .comparison-table td { padding: 20px 14px; }
  .comparison-table th:first-child { width: 31%; font-size: 14px; }
  .comparison-scroll[data-provider] tr > :nth-child(n+2) { width: 69%; }
  .comparison-table thead th { font-size: 17px; }
  .comparison-switch button { font-size: 13px; padding-inline: 8px; }
  .process-art { min-height: 330px; border-radius: 24px; }
  .process-description { padding-inline: 14px; }
  .creator-card-copy, .creator-lane--secondary .creator-card-copy { font-size: 18px; }
  .identity-front h3 { font-size: 24px; }
  .footer-column { padding-left: 14px; }
  .footer-column a { font-size: 14px; overflow-wrap: anywhere; }
  .footer-bottom { font-size: 12px; }
}

/* Final layout adjustments for the requested two-line editorial rhythm. */
.hero--reels h1 span,
.operation-heading h2 span,
.creators > .section-intro h2 span,
.network-copy h2 span,
.faq-heading h2 span { display: block; }

.hero--reels .hero-content { width: 58%; max-width: none; }
.hero-gallery { left: 52%; }
.gallery-stage { inset-inline: 24px; transform: rotate(-6deg); transform-origin: 50% 50%; }
.creator-lane--primary { --lane-angle: 0deg; }
.creator-lane--secondary { --lane-angle: 0deg; }

.comparison-heading p,
.faq-list { padding-left: 32px; padding-right: 32px; }
.faq-heading { padding-right: 64px; }
.operation-heading h2 { max-width: 760px; }

.brand-logo { width: 154px; height: auto; object-fit: contain; }
.brand-logo--white { width: 154px; }
.brand-logo--black { width: 154px; }
.brand-mark-image { display: block; width: 35px; height: 35px; object-fit: contain; }
.network-center .brand-mark-image { width: 35px; height: 35px; }
.distribution-hub .brand-mark-image { width: 35px; height: 35px; }

@media (max-width: 1100px) {
  .hero--reels .hero-content { width: 58%; }
  .hero-gallery { left: 52%; }
  .gallery-stage { inset-inline: 22px; }
  .comparison-heading p, .faq-list { padding-left: 24px; padding-right: 24px; }
  .faq-heading { padding-right: 40px; }
}

@media (max-width: 809px) {
  .hero--reels .hero-content { width: 100%; }
  .hero-gallery { left: auto; }
  .gallery-stage { inset-inline: 6%; transform: rotate(-6deg); }
  .hero--reels h1 span,
  .operation-heading h2 span,
  .creators > .section-intro h2 span,
  .network-copy h2 span,
  .faq-heading h2 span { display: block; }
  .comparison-heading p { padding-left: 0; padding-right: 0; }
  .faq-list { padding-left: 0; padding-right: 0; }
  .faq-heading { padding-left: 20px; padding-right: 0; }
  .brand-logo { width: 128px; }
}

/* Keep the authored heading lines intact and match the contact-column gutter. */
@media (min-width: 810px) {
  .hero--reels h1 span { white-space: nowrap; }
  .faq-list { padding-left: 9%; padding-right: 0; }
}
@media (max-width: 809px) {
  .hero--reels h1 { font-size: clamp(24px, 7.4vw, 58px); }
  .hero--reels h1 span { white-space: nowrap; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* Full-sized parallel reels; the shared stage supplies the only permanent tilt. */
.hero--reels h1 { font-size: clamp(38px, 4.4vw, 71px); }
.approach { overflow: hidden; }
.approach::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 50%; z-index: -1; pointer-events: none;
  background: url('/media/section2-wash.webp') center / 100% 100% no-repeat;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.approach-story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.approach-copy { padding-right: 48px; }
.approach-copy h2 { font-size: var(--section-title); line-height: 1.14; margin-bottom: 32px; }
.approach-copy p { max-width: 470px; margin-bottom: 24px; font-size: 18px; color: var(--ink); }
.approach-copy .button { margin-top: 12px; }
.featured-work { margin: 0; border-left: 1px solid var(--line); padding-left: 48px; display: grid; justify-items: center; gap: 22px; }
.featured-reel { position: relative; display: block; width: min(100%, 300px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 24px; color: #fff; box-shadow: 0 20px 60px #33232a25; }
.featured-reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.featured-reel:hover img { transform: scale(1.035); }
.featured-reel::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,#151316cc); }
.featured-reel-label { position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 1; display: flex; justify-content: space-between; align-items: end; font-size: 18px; font-weight: 500; }
.featured-reel-label span { border: 1px solid #ffffff88; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.featured-work figcaption { width: min(100%,300px); }
.featured-work figcaption > a { font-size: 18px; font-weight: 600; }
.featured-work figcaption p { font-size: 16px; margin-top: 8px; }
.featured-work figcaption strong { font-weight: 650; }
@media (max-width: 1100px) and (min-width: 810px) {
 .gallery-stage { inset-inline: 18px; }
 .approach-copy { padding-right: 32px; }
 .featured-work { padding-left: 32px; }
}
@media (max-width: 809px) {
 .hero--reels h1 { font-size: clamp(24px, 7.4vw, 58px); }
 .hero-gallery { left: auto; }
 .approach-story { grid-template-columns: 1fr; gap: 36px; }
 .approach-copy { padding-right: 0; }
 .featured-work { margin: 0; border-left: 0; padding-left: 0; }
 .featured-reel, .featured-work figcaption { width: min(100%, 360px); }
}

/* Original screenshots preserve the visible engagement UI without overlays. */
.featured-reel { aspect-ratio: 1206 / 2622; width: min(100%, 280px); }
.featured-reel img { display: block; height: auto; object-fit: contain; }
.featured-reel:hover img { transform: none; }
.featured-reel::after { content: none; }
.operation::after { content: none; }
.creators {
  background: linear-gradient(180deg, var(--bg), transparent 65px, transparent 300px, var(--bg) 440px),
    url('/media/middle-transition.webp') center top / 100% 440px no-repeat;
}
.creative { position: relative; isolation: isolate; background: var(--bg); }
.creative::before {
  content: ''; position: absolute; inset: auto 0 0; height: 50%; z-index: -1; pointer-events: none;
  background: url('/media/section2-wash.webp') center / 100% 100% no-repeat;
  transform: scaleY(-1);
  mask-image: linear-gradient(180deg, #000, #000 70%, transparent);
}
.services { background: var(--bg); }
.contact {
  background: linear-gradient(180deg, var(--bg), transparent 12%, transparent 65%, var(--bg)),
    url('/media/middle-transition.webp') center / 100% 100% no-repeat, var(--bg);
}
.video-story { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; max-width: 740px; margin: 64px auto 80px; }
.video-story figure { margin: 0; }
.video-story a { display: block; width: 100%; max-width: 280px; margin-inline: auto; border-radius: 24px; overflow: hidden; background: #0b1014; }
.video-story img { display: block; width: 100%; height: auto; }
.video-story figcaption { margin-top: 24px; }
.video-story h3 { font-size: 26px; line-height: 1.2; }
.video-story p { font-size: 17px; line-height: 1.5; margin-top: 12px; }
@media (max-width: 809px) {
 .featured-reel { width: min(100%, 280px); }
 .video-story { gap: 24px; margin-block: 40px 56px; }
 .video-story a { border-radius: 16px; }
 .video-story h3 { font-size: 22px; }
 .video-story p { font-size: 16px; }
}
.contact .brief-form label,
.contact .brief-form input,
.contact .brief-form textarea,
.contact .form-note { color: #242123; }
.contact .brief-form input::placeholder,
.contact .brief-form textarea::placeholder { color: #433638; opacity: 1; }
.contact .brief-form input,
.contact .brief-form textarea { border-color: #24212366; }

/* Unified brand UI and revised story placement. */
:root { --accent: #ff0a3d; --brand-red: #ff0a3d; --brand-rose: #ff0a3d; --brand-dark: #181619; }
.creative::before { height: 25%; }
.contact { background: var(--bg); isolation: isolate; overflow: visible; }
.contact::after {
 content: ''; position: absolute; z-index: -1; pointer-events: none;
 top: -160px; left: 0; right: 0; height: 400px;
 background: url('/media/middle-transition.webp') center / 100% 100% no-repeat;
 mask-image: linear-gradient(transparent, #000 22%, #000 72%, transparent);
}
.faq { position: relative; }
.faq-heading, .faq-list { position: relative; z-index: 1; }
.footer-wordmark { line-height: 0; }
.footer-wordmark img { display: block; width: 100%; height: auto; }
.comparison-scroll { background: #f5f0ea; border-color: #24212326; }
.comparison-table thead th { background: #e9e4de; color: #242123; }
.comparison-table tbody th, .comparison-table td { background: #faf7f2; }
.comparison-table .comparison-fama { background: #242123; color: #f5f0ea; border-bottom-color: #ffffff26; }
.comparison-table thead .comparison-fama { background: #181619; color: #fff; box-shadow: inset 0 5px var(--accent); }
.process-item button { background: #242123; color: #f5f0ea; }
.process-item button:hover { background: #080809; color: #fff; }
.process-item.active button { background: #080809; color: #fff; box-shadow: inset 4px 0 var(--accent); }
.process-art { background: #eee7e1; border-color: #24212320; }
.network-center { background: #181619; color: #fff; border-color: var(--accent); box-shadow: 0 0 60px #ff0a3d18; }
.network-orbits i { border-color: #ff0a3d25; }
.network-lines { stroke: #ff0a3d55; }
.network-lines .animated-line { stroke: var(--accent); }
.mini-person img, .network-section .profile-node img { border-color: #ff0a3d66; }
.network-section .distribution-hub { background: #181619; border-color: var(--accent); box-shadow: 0 0 70px #ff0a3d20; }
.network-section .distribution-ring { border-color: #ff0a3d30; }
.network-section .ring-b { border-color: #ff0a3d50; }
.button-light:hover, .brief-form .button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.form-result { background: #ff0a3d0a; border-color: var(--accent); }
.form-result a, .footer-column a:hover { color: var(--accent); }
.creator-stage { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: center; padding-right: 40px; }
.creator-stage .video-story { width: 100%; max-width: none; gap: 22px; margin: 56px 0; }
.creator-stage .video-story h3 { font-size: 21px; }
.creator-stage .video-story p { font-size: 16px; }
.creator-stage .video-story a { border-radius: 18px; }
@media (max-width: 1100px) { .creator-stage { grid-template-columns: 1fr; padding: 40px; } .creator-statement { padding: 0; } .creator-stage .video-story { margin: 32px 0 0; } }
@media (max-width: 809px) {
 .creator-stage { padding: 32px 24px; }
 .creator-stage .video-story { gap: 16px; }
 .creator-stage .video-story h3 { font-size: 20px; }
 .contact::after { top: -100px; height: 340px; }
}

/* Interactive A/B stack and a short, explicitly screenshot-based Reel preview. */
.approach-copy h2 { margin-bottom: 48px; }
.approach-copy p { margin-bottom: 32px; }
.approach-copy .button { margin-top: 20px; }
.featured-reel { width: min(100%, 240px); }
.preview-frame-b { position: absolute; inset: 0; opacity: 0; }
.preview-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: #181619bf; color: #fff; font-size: 20px; opacity: 0; transition: opacity .4s; }
.featured-reel.is-playing .preview-frame-b { animation: preview-cut 8s both; }
.featured-reel.is-ended .preview-end { opacity: 1; }
@keyframes preview-cut { 0%,45% { opacity: 0; } 52%,92% { opacity: 1; } 100% { opacity: 0; } }
.creators { background: var(--bg); isolation: isolate; }
.creators::before { content: ''; position: absolute; top: var(--story-wash-top, 320px); left: 0; right: 0; height: 440px; z-index: -1; pointer-events: none; background: url('/media/middle-transition.webp') center / 100% 100% no-repeat; mask-image: linear-gradient(transparent,#000 25%,#000 72%,transparent); }
.creator-stage.roll-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; padding: 64px 54px; }
.roll-stage .creator-statement { padding: 0; }
.roll-description { min-height: 180px; margin-top: 32px; }
.roll-description h4 { font-family: var(--font-heading); font-size: 23px; font-weight: 600; margin-bottom: 16px; }
.roll-description p { margin: 0; font-size: 18px; }
.roll-switch { display: inline-flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid #24212355; border-radius: 14px; color: var(--ink); background: transparent; font-size: 16px; }
.roll-switch:hover { background: #242123; color: #fff; }
.roll-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.roll-stack { position: relative; width: 100%; max-width: 520px; justify-self: center; height: clamp(390px,44vw,620px); }
.roll-card { position: absolute; margin: 0; top: 6%; width: 59%; border-radius: 22px; overflow: hidden; box-shadow: 0 16px 40px #24161928; transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .65s; }
.roll-card img { display: block; width: 100%; height: auto; }
.roll-card-a { left: 8%; z-index: 2; transform: rotate(-7deg); }
.roll-card-b { left: 33%; z-index: 1; transform: translateY(16px) rotate(8deg) scale(.94); filter: brightness(.83); }
[data-active-roll='b'] .roll-card-a { z-index: 1; transform: translateY(16px) rotate(-7deg) scale(.94); filter: brightness(.83); }
[data-active-roll='b'] .roll-card-b { z-index: 2; transform: rotate(8deg); filter: none; }
@media (max-width: 1100px) and (min-width: 810px) { .creator-stage.roll-stage { gap: 20px; padding: 48px 32px; } .roll-stage .creator-statement h3 { font-size: 32px; } .roll-description { min-height: 205px; } }
@media (max-width: 809px) { .creator-stage.roll-stage { grid-template-columns: 1fr; padding: 36px 24px; gap: 24px; } .roll-description { min-height: 145px; } .roll-stack { max-width: 430px; height: clamp(360px,105vw,570px); } .roll-description p { font-size: 17px; } .roll-card { border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) { .roll-card { transition: none; } .featured-reel.is-playing .preview-frame-b { animation: none; } }

.contact-card > p:not(.form-note) { max-width: 470px; margin: 0 0 30px; color: #3f393a; font-size: 18px; line-height: 1.6; }
.contact-card > p strong { color: #242123; font-weight: 600; }
.contact-card .button { display: flex; }
.metric-section .metric-digit { animation: none; }
.site-header, .site-header.is-scrolled { background: #252528; }
.roll-stack { max-width: 440px; }
.roll-card { width: 52%; }
.roll-card-a { left: 10%; }
.roll-card-b { left: 36%; }
@media (max-width: 809px) { .roll-stack { max-width: 400px; } }

/* One content edge, matching the comparison table at every viewport size. */
:root { --page-gutter: max(var(--gutter), calc((100vw - 1280px) / 2)); }
main > .section, .network-section-inner.section, .footer {
 max-width: none; width: 100%; padding-inline: var(--page-gutter);
}
.comparison-scroll { width: 100%; }
.operation-heading, .creators > .section-intro, .creators > .creator-stage { max-width: none; }
.creator-stage.roll-stage { padding: 48px; gap: 40px; }
.roll-stack { max-width: 340px; height: 350px; }
.roll-card { width: 56%; border-radius: 18px; }
.roll-card img { aspect-ratio: 2 / 3; object-fit: cover; }
.roll-card figcaption { position: absolute; top: 12px; left: 12px; right: 12px; padding: 9px 10px; border-radius: 9px; background: #181619e8; color: #fff; font: 650 14px/1.2 var(--font-heading); }
.roll-card figcaption span { display: block; margin-top: 4px; font: 400 12px/1.2 var(--font-body); color: #f5f0ea; }
.roll-card-a figcaption { border-top: 3px solid var(--accent); }
.roll-card-b figcaption { border-top: 3px solid #a49cfa; }
.roll-description { min-height: 160px; margin-top: 28px; }
@media (max-width: 809px) {
 .creator-stage.roll-stage { padding: 32px 24px; gap: 24px; }
 .roll-stack { max-width: 310px; height: 310px; }
 .comparison-scroll { width: 100%; margin-right: 0; border-radius: 24px; }
 .roll-card figcaption { top: 8px; left: 8px; right: 8px; font-size: 12px; padding: 7px; }
}

/* Real production media: compact layers and a focused playback dialog. */
.roll-card .roll-video { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#181619; }
.roll-card figcaption { top:auto; bottom:10px; }
.creative-image img { filter:none; }
.creative-image::after { background:linear-gradient(0deg,#181619a6,transparent 32%); }
.creative-image .work-action { display:flex; color:#fff; font:600 12px/1.2 var(--font-body); letter-spacing:.02em; }
.creative-card-caption strong { font-weight:600; }
.concept-media { min-width:0; background:#181619; display:grid; place-items:center; }
.concept-media { position:relative; }
.concept-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.7); border-radius:999px; padding:15px 22px; color:#fff; background:rgba(20,20,20,.86); font:inherit; cursor:pointer; white-space:nowrap; }
.concept-play:hover,.concept-play:focus-visible { background:#fff; color:#1b1b1b; }
.concept-play[hidden] { display:none; }
.concept-media img,.concept-media video { width:100%; height:min(72vh,680px); object-fit:contain; }
.concept-media [hidden] { display:none; }
.concept-dialog-grid { min-height:0; }
@media(max-width:809px) {
 .concept-media img,.concept-media video { height:45vh; }
 .creative-image .work-action { font-size:10px; }
}

.work-action { position:absolute; bottom:18px; left:18px; right:18px; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid #ffffff70; border-radius:10px; background:#181619b8; }

/* Evidence and readable, unboxed roll labels. */
.roll-card .roll-motion { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; }
.roll-card figcaption { top:16px; bottom:auto; left:12px; right:12px; padding:0; border:0; border-radius:0; background:none; color:white; text-align:center; font:750 clamp(24px,2.5vw,34px)/1 var(--font-heading); text-shadow:0 2px 12px #0009; }
.featured-work { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:20px; }
.featured-work .featured-reel { width:100%; }
.featured-reel .viral-gif { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured-reel .viral-gif[hidden] { display:none; }
.featured-reel .preview-end { inset:auto 8px 10px; padding:10px; border-radius:10px; font-size:14px; background:#181619db; }
.evidence-card { padding:0; border:0; background:#0c1115; border-radius:18px; overflow:hidden; color:white; text-align:center; }
.evidence-card img { display:block; width:100%; height:auto; }
.evidence-card>span { display:block; padding:12px 8px; font-size:15px; }
.evidence-card strong { font:700 26px/1.1 var(--font-heading); }
.featured-work .evidence-note { grid-column:1/-1; width:auto; margin:0; font-size:13px; color:var(--ink); }
.account-proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
.account-shot { min-width:0; padding:0; background:#0b1115; color:white; border:1px solid #ffffff30; border-radius:14px; overflow:hidden; }
.account-shot img { width:100%; height:auto; display:block; }
.account-shot>span { display:block; padding:12px 4px; font-size:13px; }
.account-proof p { grid-column:1/-1; text-align:center; font-size:12px; color:#c9c4c6; margin:6px 0 0; }
.proof-dialog { border:1px solid #ffffff30; border-radius:20px; padding:20px; background:#121114; color:white; width:min(640px,92vw); max-height:92vh; }
.proof-dialog::backdrop { background:#111b; backdrop-filter:blur(8px); }
.proof-dialog>img { display:block; width:auto; max-width:100%; max-height:78vh; margin:auto; object-fit:contain; }
.proof-dialog>p { margin:14px 0 0; font-size:12px; text-align:center; }
@media(max-width:809px) {
 .featured-work { gap:14px; max-width:480px; margin-inline:auto; }
 .account-proof { max-width:560px; width:100%; margin-inline:auto; gap:10px; }
 .account-shot>span { font-size:10px; }
 .roll-card figcaption { font-size:28px; }
}

.featured-work .featured-reel { aspect-ratio:720/1355; }