/*
Theme Name: Youth Unbound
Theme URI: https://youthunbound.com/
Author: Youth Unbound Limited
Description: A bold editorial WordPress theme for a global creator marketing agency.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: youth-unbound
*/

:root {
  --paper: #f8f8f5;
  --ink: #050505;
  --muted: #5e5e5e;
  --line: #e5e5e0;
  --accent: #c8ff00;
  --cyan: #20b7d3;
  --coral: #ff5a46;
  --mint: #7ee6bd;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; margin: 0; }
body.admin-bar .topbar { top: 32px; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img { max-width: 100%; }
.site { background: var(--paper); overflow: hidden; }
.screen-reader-text { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }

.topbar {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  left: 0;
  padding: 18px clamp(18px, 3.4vw, 48px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 30;
}
.topbar::before { backdrop-filter: blur(18px); background: rgba(248,248,245,.88); border-bottom: 1px solid rgba(229,229,224,.86); content: ""; inset: 0; position: absolute; z-index: -1; }
.topbar button, .topbar a { background: transparent; border: 0; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.topbar > a:last-child { justify-self: end; }
.center-logo { display: block; width: min(260px, 34vw); }
.center-logo img, .center-logo .custom-logo { display: block; height: auto; width: 100%; }
.site-menu { background: var(--ink); color: var(--paper); display: grid; gap: 18px; left: 0; min-width: 280px; padding: 96px 48px 48px; position: fixed; top: 0; transform: translateX(-102%); transition: transform .3s ease; z-index: 29; }
.site-menu.is-open { transform: translateX(0); }
.site-menu a { font-size: 22px; font-weight: 850; text-transform: uppercase; }
.menu-scrim { background: rgba(0,0,0,.28); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .3s ease; z-index: 28; }
.menu-scrim.is-open { opacity: 1; pointer-events: auto; }
.section-count { color: var(--muted); font-size: 11px; font-weight: 700; position: fixed; right: clamp(18px,3vw,42px); top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right center; z-index: 25; }

.panel { min-height: 100vh; padding: clamp(86px,9vw,126px) clamp(22px,5vw,72px) clamp(36px,5vw,68px); scroll-snap-align: start; }
.hero-panel { display: grid; grid-template-columns: .82fr 1.18fr; padding: 0; position: relative; }
.hero-image { grid-column: 2; height: 100vh; object-fit: cover; object-position: center; width: 100%; }
.hero-copy { align-self: end; display: grid; gap: 16px; grid-column: 1; grid-row: 1; padding: clamp(110px,12vw,160px) clamp(22px,5vw,72px) clamp(74px,8vw,112px); }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 800; margin: 0; text-transform: uppercase; }
.hero-copy h1, .split-title h2, .section-heading h2, .case-copy h2, .giant-wordmark { font-weight: 900; letter-spacing: 0; line-height: .9; margin: 0; text-transform: uppercase; }
.hero-copy h1 { font-size: clamp(54px,7.5vw,118px); max-width: 760px; overflow-wrap: break-word; }
.hero-copy h1::after { background: var(--accent); content: ""; display: block; height: 8px; margin-top: 16px; width: 44%; }
.hero-copy > span, .case-copy > span { color: var(--muted); display: block; font-size: clamp(17px,1.5vw,22px); font-weight: 520; line-height: 1.45; max-width: 560px; }
.hero-links { display: flex; gap: 18px; margin-top: 18px; }
.text-link, .campaign-form button { background: transparent; border: 0; border-bottom: 2px solid var(--ink); cursor: pointer; font-size: 12px; font-weight: 850; padding: 0 0 5px; text-transform: uppercase; }
.scroll-note { bottom: 22px; color: var(--muted); font-size: 11px; font-weight: 700; left: 50%; position: absolute; text-transform: uppercase; transform: translateX(-50%); }

.business-panel { display: grid; gap: clamp(36px,6vw,80px); grid-template-columns: .9fr 1.1fr; }
.split-title { align-self: center; display: grid; gap: 20px; }
.split-title h2, .section-heading h2, .case-copy h2 { font-size: clamp(42px,5.4vw,84px); }
.service-list { align-self: center; border-top: 1px solid var(--line); }
.service-list article { border-bottom: 1px solid var(--line); display: grid; gap: 10px; padding: clamp(20px,3vw,30px) 0; }
.service-list h3, .footer-top h3 { font-size: 13px; font-weight: 850; margin: 0; text-transform: uppercase; }
.service-list p, .case-card small, .footer-top a, .campaign-form small, .footer-bottom { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0; }

.brands-panel { display: grid; gap: clamp(30px,5vw,62px); }
.section-heading { align-self: end; display: grid; gap: 18px; max-width: 960px; }
.brand-marquee { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); overflow: hidden; padding: 24px 0; white-space: nowrap; }
.brand-marquee div { animation: marquee 34s linear infinite; display: inline-flex; gap: 64px; }
.brand-marquee span { color: var(--muted); font-size: clamp(28px,4vw,58px); font-weight: 850; text-transform: uppercase; }
.case-teaser { align-self: end; border-left: 6px solid var(--accent); display: grid; gap: 18px; justify-self: end; max-width: 520px; padding-left: 24px; }
.case-teaser small { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.case-teaser strong { font-size: clamp(24px,3vw,42px); line-height: 1.02; text-transform: uppercase; }

.case-panel { display: grid; gap: clamp(28px,4vw,54px); min-height: auto; }
.case-copy { align-items: end; display: grid; gap: 22px; grid-template-columns: .9fr 1fr; }
.case-copy span { align-self: end; }
.case-grid { display: grid; gap: 14px; grid-template-columns: repeat(6,minmax(0,1fr)); }
.case-card { background: #fff; border: 1px solid var(--line); display: grid; gap: clamp(28px,4vw,54px); grid-column: span 2; min-height: 330px; padding: clamp(18px,2.6vw,30px); position: relative; }
.case-card:nth-child(4), .case-card:nth-child(5) { grid-column: span 3; }
.case-card::before { background: var(--accent); content: ""; height: 8px; left: 0; position: absolute; right: 0; top: 0; }
.case-card.blue::before { background: var(--cyan); }
.case-card.black { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.case-card.black small, .case-card.black .case-card-top { color: rgba(248,248,245,.68); }
.case-card.black::before { background: var(--accent); }
.case-card.coral::before { background: var(--coral); }
.case-card.mint::before { background: var(--mint); }
.case-card-top, .case-card-bottom { display: flex; gap: 14px; justify-content: space-between; }
.case-card-top { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.case-card p { color: var(--muted); font-size: 12px; font-weight: 900; margin: 0 0 14px; text-transform: uppercase; }
.case-card.black p { color: var(--accent); }
.case-card h3 { font-size: clamp(25px,3vw,42px); font-weight: 900; letter-spacing: 0; line-height: .98; margin: 0; max-width: 720px; text-transform: uppercase; }
.case-card-bottom { align-items: end; border-top: 1px solid currentColor; padding-top: 16px; }
.case-card-bottom small { max-width: 360px; }
.case-card-bottom strong { font-size: clamp(18px,2vw,28px); line-height: 1.05; max-width: 300px; text-align: right; }

.footer-panel { display: grid; grid-template-rows: 1fr auto auto; overflow: hidden; padding-bottom: 18px; }
.footer-top { align-items: start; display: grid; gap: 34px; grid-template-columns: 1.45fr repeat(4,minmax(0,1fr)); }
.campaign-form { display: grid; gap: 18px; max-width: 360px; }
.campaign-form label { display: grid; gap: 8px; }
.campaign-form label span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.campaign-form input, .campaign-form textarea { background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; min-height: 38px; outline: 0; resize: vertical; width: 100%; }
.campaign-form textarea { min-height: 72px; }
.form-status { border-left: 4px solid var(--accent); font-size: 13px; margin: 0; padding-left: 12px; }
.form-status.error { border-color: var(--coral); }
.footer-top nav { display: grid; gap: 12px; }
.giant-wordmark { font-size: clamp(52px,9.2vw,150px); margin: 36px 0 -.17em; white-space: nowrap; }
.giant-wordmark::after { background: var(--accent); content: ""; display: block; height: 10px; margin-left: 18%; margin-top: -.18em; width: 42%; }
.footer-bottom { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding-top: 14px; }

.content-page { margin: 0 auto; max-width: 920px; min-height: 75vh; padding: 140px 24px 80px; }
.content-page h1 { font-size: clamp(42px,7vw,86px); line-height: .94; text-transform: uppercase; }
.content-page .entry-content { font-size: 18px; line-height: 1.65; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 901px) { html { scroll-snap-type: y proximity; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none; } .brand-marquee div { animation: none; } }
@media (max-width: 900px) {
  body.admin-bar .topbar { top: 46px; }
  .topbar { grid-template-columns: auto 1fr auto; padding: 12px 16px; }
  .center-logo { justify-self: center; width: min(188px,44vw); }
  .topbar button, .topbar a { font-size: 10px; }
  .site-menu { min-width: min(86vw,360px); padding: 90px 28px 40px; }
  .section-count { display: none; }
  .panel { min-height: auto; padding: 92px 20px 52px; }
  .hero-panel, .business-panel, .case-copy, .footer-top { grid-template-columns: 1fr; }
  .hero-panel { padding: 0; }
  .hero-copy { padding: 110px 20px 42px; }
  .hero-copy h1 { font-size: clamp(36px,11vw,48px); }
  .hero-image { grid-column: 1; height: 58vh; }
  .scroll-note { display: none; }
  .split-title h2, .section-heading h2, .case-copy h2 { font-size: clamp(38px,11vw,58px); }
  .case-teaser { justify-self: start; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card, .case-card:nth-child(4), .case-card:nth-child(5) { grid-column: span 1; min-height: auto; }
  .case-card-bottom { align-items: start; flex-direction: column; }
  .case-card-bottom strong { text-align: left; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .giant-wordmark { font-size: clamp(34px,11.5vw,64px); }
}