/* InfluenceLab: marker lettering for campaign headlines; Clash Display,
   Space Grotesk and Inter retain their display, detail and reading roles. */
@font-face {
  font-family: 'Clash Display';
  src: url(assets/fonts/clash-display-variable.woff2?v=e0ec5644c93b04de82f0) format('woff2');
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url(assets/fonts/space-grotesk-variable.woff2?v=0640890476fc1198ab4d) format('woff2');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url(assets/fonts/inter-variable.woff2?v=3100e775e8616cd2611b) format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --display: 'Clash Display', 'Arial', sans-serif;
  --detail: 'Space Grotesk', 'Arial', sans-serif;
  --font: 'Inter', 'Arial', sans-serif;
  --type-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --type-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --type-section: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  --type-detail: clamp(1.25rem, 1.15rem + .5vw, 1.625rem);
}
body {
  font-family: var(--font);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.01em;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-size-adjust: .545898;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: var(--font); letter-spacing: -.01em }
input, select, textarea { line-height: 1.5 }
strong, b { font-weight: 600 }
h1, h2, .search-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
  hyphens: none;
  font-size-adjust: .504;
}
h3, h4, h5, h6 {
  font-family: var(--detail);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
  font-size-adjust: .486;
}
p { text-wrap: pretty }
.logo, .studio-home .header .logo, .studio-wordmark { font-family: var(--detail); font-weight: 700; letter-spacing: -.06em; font-size-adjust: .486 }
.logo span, .studio-wordmark span { font-weight: 400 }
.pill, .studio-home .pill { font-family: var(--font); font-weight: 600; letter-spacing: -.015em; line-height: 1.3 }
.desktop-nav, .search-nav { font-weight: 500; letter-spacing: -.01em }
.underlined, .hero-benefits-link, .studio-text-link { font-weight: 500; text-underline-offset: .25em }

/* Homepage: scale is the emphasis; avoid the old very tight, heavy tracking. */
.studio-home .hero h1.hero-promise {
  font-family: var(--display);
  font-size: clamp(3.5rem, 1.25rem + 5.9vw, 6.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.studio-home .hero .intro { font: 400 var(--type-lead)/1.55 var(--font); letter-spacing: -.015em; max-width: 35ch }
.studio-home .masthead-caption {
  font-family: var(--detail);
  font-size: clamp(1rem, .8rem + .65vw, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
  font-size-adjust: .486;
}
.studio-home #creadores .recruit-heading h2,
.studio-home #impacto .impact-heading,
.studio-home #talento .section-heading h2,
.studio-home #agencia h2,
.studio-home #marcas h2,
.studio-home .faq-layout h2 {
  font: 600 var(--type-section)/1.07 var(--display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.studio-home #creadores .recruit-benefits h3,
.studio-home #creadores .recruit-cost-note h3,
.studio-home #agencia .principles h3,
.studio-home #marcas #format-panel h3 {
  font: 500 var(--type-detail)/1.24 var(--detail);
  letter-spacing: -.02em;
}
.studio-home #creadores .recruit-benefits p,
.studio-home #creadores .recruit-cost-note p,
.studio-home #agencia .principles p,
.studio-home #marcas #format-panel p { font-size: 1rem; line-height: 1.65; letter-spacing: -.01em }
.studio-home #creadores .recruit-heading>p,
.studio-home #talento .section-heading p,
.studio-home #marcas .brands-intro { font-size: var(--type-lead); line-height: 1.6; max-width: 42ch }
.studio-home #agencia .agency-text { font-size: var(--type-body); line-height: 1.7 }
.studio-home #agencia .agency-text .lead { font-family: var(--detail); font-size: clamp(1.25rem, 1.1rem + .65vw, 1.6875rem); font-weight: 400; line-height: 1.4; letter-spacing: -.02em; max-width: 40ch }
.studio-home .closing h2 { font: 600 clamp(3rem, 1.6rem + 5vw, 6rem)/1.05 var(--display); letter-spacing: -.03em }

/* Numbers and creator identities use Space Grotesk, never the display face. */
.stat-grid strong, .search-proof strong, .studio-page .search-proof strong, .card-metrics strong, .profile-stats strong, .modal-stats strong,
.studio-home #impacto .stat-grid strong {
  font-family: var(--detail);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.045em;
  line-height: 1.1;
  font-size-adjust: .486;
}
.studio-home #impacto .stat-grid article:first-child strong { font-size: clamp(5.5rem, 3rem + 8vw, 10.5rem); letter-spacing: -.045em; line-height: 1.05 }
.studio-home #impacto .stat-grid article:first-child strong span { letter-spacing: -.04em }
.creator-name, .card-title, .card-name .creator-name, .real-talent-grid h3,
.studio-home .card-name .creator-name, .studio-home #talento .card-name .creator-name {
  font-family: var(--detail);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-size-adjust: .486;
}
.search-hero.talent-profile-hero h1, .profile-top h2 { font-family: var(--detail); font-weight: 500; letter-spacing: -.025em; overflow-wrap: anywhere; font-size-adjust: .486 }
.card-metrics strong { font-size: 1.5rem }
.faqs summary, .search-faq summary, .recruit-process>summary, .brand-proposal-disclosure>summary,
.studio-home .faqs summary, .studio-home #marcas .brand-proposal-disclosure>summary { font-family: var(--detail); font-weight: 500; line-height: 1.4; letter-spacing: -.015em; font-size-adjust: .486 }

/* The same hierarchy carries through recruitment, brands, profiles and guides. */
.search-hero h1, .studio-page .studio-hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.8vw, 5rem); font-weight: 600; line-height: 1.07; letter-spacing: -.03em }
.search-section h2, .studio-page .search-section h2, .studio-page .real-talent h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -.025em }
.search-section h3, .studio-page .recruit-benefits h3, .studio-page .recruit-steps h3, .studio-page .brand-process h3,
.studio-page .campaign-form h3 { font: 500 var(--type-detail)/1.25 var(--detail); letter-spacing: -.02em }
.studio-page .brand-format h3 { font-family: var(--detail); font-weight: 500; line-height: 1.2; letter-spacing: -.025em }
.search-hero .lead, .studio-page .studio-hero .lead { font-size: var(--type-lead); line-height: 1.6; letter-spacing: -.015em; max-width: 48ch }
.search-section p, .studio-page .recruit-benefits p, .studio-page .brand-process p { line-height: 1.7; max-width: 68ch }
.search-page .search-section .search-note { font-size: .875rem; line-height: 1.6 }
.search-page .search-faq summary { font-size: 1.125rem }
.studio-page .studio-final h2 { font-size: clamp(2.5rem, 1.5rem + 3.8vw, 5rem); letter-spacing: -.03em }
.legal-wrap { max-width: 72ch }
.legal-wrap h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); line-height: 1.1; letter-spacing: -.025em }
.legal-wrap h2 { font: 500 clamp(1.375rem, 1.25rem + .5vw, 1.75rem)/1.3 var(--detail); letter-spacing: -.015em }
.legal-wrap section p { font-size: 1rem; line-height: 1.8 }
.legal-intro { font-size: var(--type-lead); line-height: 1.65 }

/* Reading and forms remain comfortably sized at small widths. */
.campaign-form :is(input:not([type=checkbox]), select, textarea),
.studio-home .brand-form :is(input:not([type=checkbox]), select, textarea),
.studio-home #talento .catalog-toolbar :is(input, select) { font-family: var(--font); font-size: 1rem; line-height: 1.5; font-weight: 400 }
.campaign-field label, .brand-form>label { font-weight: 500; letter-spacing: -.005em }
.studio-home .hero .hero-proof, .studio-home .hero-afterword p,
.studio-home #impacto .period-note, .studio-home #agencia .agency-scene figcaption { font-family: var(--font); font-size: .875rem; line-height: 1.6; letter-spacing: 0 }
.studio-home #impacto .stat-grid article>span { font-size: .8125rem; letter-spacing: .005em }
@media(max-width:1000px) and (min-width:651px) {
  :root { --type-section: clamp(2.25rem, 1rem + 3vw, 3.5rem) }
  .studio-home .hero h1.hero-promise { font-size: clamp(3rem, 1rem + 5.4vw, 4.5rem) }
}
@media(max-width:650px) {
  :root { --type-section: clamp(2.25rem, 1.4rem + 4.2vw, 3.125rem); --type-detail: 1.3125rem }
  .studio-home .hero h1.hero-promise { font-size: clamp(2.5rem, 1rem + 8.2vw, 4.25rem); line-height: 1.05; letter-spacing: -.02em }
  .studio-home .hero .intro { font-size: 1rem; line-height: 1.6; max-width: 38ch }
  .studio-home .masthead-caption { font-size: .9375rem; line-height: 1.25; letter-spacing: -.02em }
  .studio-home .header .logo { font-size: 1.5rem; letter-spacing: -.065em }
  .studio-home .header-actions>.pill { font-size: .875rem }
  .studio-home #impacto .stat-grid article:first-child strong { font-size: clamp(5rem, 2.5rem + 12vw, 7.5rem) }
  .studio-home #impacto .stat-grid strong { font-size: clamp(2.25rem, 1.7rem + 3vw, 3rem) }
  .studio-home .closing h2 { font-size: clamp(2.75rem, 1.75rem + 5vw, 4rem); line-height: 1.07 }
  .search-hero h1, .studio-page .studio-hero h1 { font-size: clamp(2.125rem, 1.2rem + 4.8vw, 3rem); line-height: 1.1; letter-spacing: -.025em; max-inline-size: none }
  .search-section h2, .studio-page .search-section h2, .studio-page .real-talent h2 { font-size: clamp(1.875rem, 1.3rem + 3vw, 2.5rem); line-height: 1.12 }
  .studio-page .real-talent-grid h3 { font-size: 1.25rem; line-height: 1.3 }
  .studio-page .search-nav { font-size: .875rem; line-height: 1.5 }
  .studio-page .studio-final h2 { font-size: clamp(2.125rem, 1.2rem + 4.8vw, 3rem) }
  .legal-wrap h1 { font-size: clamp(2rem, 1.5rem + 3vw, 3rem) }
}
@media(max-width:360px) {
  .studio-home .header .logo { font-size: 1.3125rem }
  .studio-home .masthead-caption { font-size: .875rem }
}
@media print {
  body { font-size: 11pt }
  .legal-wrap h1 { font-size: 2rem }
  .legal-wrap h2 { font-size: 1.3rem }
}

/* Graffiti lettering is reserved for short, public-facing campaign titles.
   Live text preserves selection, search, zoom and accessible heading names. */
@font-face {
  font-family: 'Permanent Marker';
  src: url(assets/fonts/permanent-marker-latin.woff2?v=4884fec2c73aa52a2461) format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { --lettering: 'Permanent Marker', 'Clash Display', sans-serif }
.studio-home .hero h1.hero-promise,
.studio-home #creadores .recruit-heading h2,
.studio-home #impacto .impact-heading,
.studio-home #talento .section-heading h2,
.studio-home #agencia h2,
.studio-home #marcas h2,
.studio-home .faq-layout h2,
.studio-home .closing h2,
.studio-page .studio-hero h1,
.studio-page .search-section h2:where(:not(#brief-title)),
.studio-page .real-talent h2 {
  font-family: var(--lettering);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-size-adjust: .6103515625;
  letter-spacing: -.015em;
  line-height: 1.22;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.studio-home .hero h1.hero-promise {
  font-size: clamp(3.5rem, 1.25rem + 5.9vw, 6.75rem);
  line-height: 1.17;
  padding-bottom: .12em;
}
.studio-home #creadores .recruit-heading h2,
.studio-home #impacto .impact-heading,
.studio-home #talento .section-heading h2,
.studio-home #agencia h2,
.studio-home #marcas h2,
.studio-home .faq-layout h2 { font-size: clamp(2.125rem, 1.4rem + 3vw, 4rem) }
.studio-home .closing h2 { font-size: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem) }
.studio-page .studio-hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.8vw, 5rem); padding-bottom: .15em }
.studio-page .search-section h2:where(:not(#brief-title)),
.studio-page .real-talent h2 { font-size: clamp(1.875rem, 1.2rem + 2.5vw, 3.5rem) }
.studio-page .studio-final h2 { font-size: clamp(2.125rem, 1.5rem + 3vw, 4.25rem) }

/* The broad marker underline has a deliberately broken, painted edge.
   It uses CSS only: no image download or duplicate text for assistive tech. */
.graffiti-accent { position: relative; display: inline-block; color: var(--lime); isolation: isolate }
.studio-page .studio-hero h1 .graffiti-accent { color: var(--lime) }
.graffiti-accent::after {
  content: ''; position: absolute; pointer-events: none;
  left: .08em; right: .1em; bottom: -.05em; height: .095em;
  background: currentColor;
  clip-path: polygon(0 45%, 12% 21%, 46% 33%, 75% 6%, 100% 25%, 96% 65%, 83% 61%, 88% 80%, 38% 69%, 6% 100%, 10% 67%, 0 78%);
  transform: rotate(-1.7deg); transform-origin: left center;
}
.studio-home :is(#creadores,#talento,#agencia,#marcas,.faq-layout,.closing) h2 em {
  position: relative; isolation: isolate; display: inline-block;
  font-family: inherit; font-style: normal; font-weight: inherit;
  font-size-adjust: inherit; letter-spacing: inherit; color: inherit;
}
.studio-home :is(#agencia,#marcas,.closing) h2 em { color: var(--lime) }
.studio-home :is(#creadores,#talento,.faq-layout) h2 em::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -.02em; right: -.01em; bottom: .12em; height: .16em;
  background: var(--lime);
  clip-path: polygon(0 28%, 45% 10%, 97% 0, 100% 60%, 85% 75%, 100% 89%, 5% 100%, 2% 70%, 0 88%);
  transform: rotate(-1deg);
}
@media(max-width:1000px) and (min-width:651px) {
  .studio-home .hero h1.hero-promise { font-size: clamp(3rem, 1rem + 5.4vw, 4.5rem) }
  .studio-home #agencia h2 { font-size: clamp(2rem, 1rem + 2.4vw, 3rem) }
}
@media(max-width:650px) {
  .studio-home .hero h1.hero-promise { font-size: clamp(2.75rem, .5rem + 12vw, 4.75rem); line-height: 1.16 }
  .studio-home #creadores .recruit-heading h2,
  .studio-home #impacto .impact-heading,
  .studio-home #talento .section-heading h2,
  .studio-home #agencia h2,
  .studio-home #marcas h2,
  .studio-home .faq-layout h2 { font-size: clamp(2.125rem, 1.2rem + 5vw, 3rem) }
  .studio-home .closing h2 { font-size: clamp(2.125rem, 1.2rem + 5vw, 3rem) }
  .studio-page .studio-hero h1 { font-size: clamp(2rem, 1rem + 4.8vw, 3rem) }
  .studio-page .search-section h2:where(:not(#brief-title)),
  .studio-page .real-talent h2 { font-size: clamp(1.75rem, 1.1rem + 3vw, 2.25rem) }
}
@media print {
  .graffiti-accent { color: inherit }
  .graffiti-accent::after,
  .studio-home :is(#creadores,#talento,.faq-layout) h2 em::after { display: none }
}