:root {
  --ink: #171714;
  --paper: #f3efe5;
  --paper-2: #e7e0d3;
  --papaya: #db5656;
  --lime: #d9ff4b;
  --violet: #b8a6ff;
  --blue: #79bfff;
  --coral: #ff9f83;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 99; background: var(--ink); color: white; padding: 12px 18px; }
.skip-link:focus { top: 16px; }

.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 23px 4vw; border-bottom: 1px solid rgba(23,23,20,.2); }
.wordmark { font-size: 1.28rem; font-weight: 800; letter-spacing: -.06em; }
.wordmark span { color: var(--papaya); }
nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); font-size: .71rem; text-transform: uppercase; letter-spacing: .1em; }
nav a { padding: 7px 0 4px; border-bottom: 1px solid transparent; }
nav a:hover, nav a:focus-visible { border-color: currentColor; }
.nav-cta { border: 1px solid var(--ink) !important; padding: 10px 13px !important; }

.hero { min-height: 72vh; display: flex; align-items: center; padding: clamp(48px, 6vw, 88px) 4vw; }
.hero-copy { width: min(100%, 1120px); }
.hero-heading { width: min(100%, 1080px); display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 5vw, 80px); }
.kicker, .section-label { margin: 0 0 28px; color: var(--papaya); font-family: "Courier New", monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; font-size: .78rem; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; font-size: clamp(4.2rem, 9.4vw, 10rem); line-height: .81; letter-spacing: -.085em; font-weight: 750; }
h1 em, .contact h2 em { color: var(--papaya); font-family: Georgia, serif; font-weight: 400; }
.intro { max-width: 660px; margin: 42px 0 0; font-size: clamp(1.05rem, 1.45vw, 1.34rem); line-height: 1.55; }
.hero-actions, .contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 15px 18px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; transition: background .2s, color .2s; }
.button-dark { color: var(--paper); background: var(--ink); }
.button-dark:hover, .button-dark:focus-visible { background: var(--papaya); }
.text-link, .contact-actions > a:not(.button) { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid; padding-bottom: 4px; }
.portrait { width: clamp(140px, 17vw, 230px); flex: 0 0 auto; margin: 0; }
.portrait-frame { aspect-ratio: 1; overflow: hidden; background: var(--paper-2); border: 1px solid rgba(23,23,20,.15); border-radius: 50%; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; filter: saturate(.72) contrast(1.04); }
.portrait figcaption { display: none; }

.brand-strip { padding: 32px 4vw 38px; border-top: 1px solid rgba(23,23,20,.2); border-bottom: 1px solid rgba(23,23,20,.2); }
.brand-strip > p { margin: 0 0 25px; color: var(--papaya); font: 700 .75rem "Courier New", monospace; text-transform: uppercase; letter-spacing: .1em; }
.brand-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: stretch; }
.brand-logo-tile { min-width: 0; min-height: 86px; display: grid; place-items: center; padding: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(23,23,20,.12); }
.brand-logo-tile img { width: 100%; height: 52px; object-fit: contain; }
.brand-logo-tile .brand-allwyn { height: 48px; }
.brand-logo-tile .brand-post-office, .brand-logo-tile .brand-todaytix { height: 58px; }
.brand-logo-tile .brand-motorsport { height: 38px; }
.brand-logo-tile .brand-autosport, .brand-logo-tile .brand-wos { height: 54px; }

.proof { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: var(--paper); border-bottom: 1px solid rgba(255,255,255,.16); }
.proof div { min-height: 175px; display: flex; flex-direction: column; justify-content: space-between; padding: 27px 3vw; border-right: 1px solid rgba(255,255,255,.16); }
.proof div:last-child { border: 0; }
.proof strong { font-size: clamp(2.4rem, 4.5vw, 5rem); letter-spacing: -.06em; }
.proof span { max-width: 190px; font-size: .72rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .07em; }

.work-head { display: grid; grid-template-columns: .6fr 1.4fr; gap: 8vw; padding: 120px 4vw 60px; background: var(--ink); color: var(--paper); }
.work-head h2, .case-intro h2, .long-form h2, .about h2, .contact h2 { margin: 0; font-size: clamp(3.7rem, 7.8vw, 8.4rem); line-height: .86; letter-spacing: -.075em; }
.work-head div > p { max-width: 470px; font-size: 1rem; line-height: 1.55; }
.social-stage { padding: 0 0 120px; background: var(--ink); color: var(--paper); overflow: hidden; }
.stage-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 4vw 22px; font: 700 .76rem "Courier New", monospace; text-transform: uppercase; letter-spacing: .08em; }
.stage-controls > p { color: var(--papaya); }
.stage-controls div { display: flex; gap: 8px; }
.rail-button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: white; cursor: pointer; }
.rail-button:hover, .rail-button:focus-visible { background: var(--paper); color: var(--ink); }
.social-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 31vw); gap: 18px; padding: 0 4vw 22px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: var(--papaya) transparent; scrollbar-width: thin; }
.social-card { min-height: 760px; display: flex; flex-direction: column; color: var(--ink); padding: 18px; scroll-snap-align: start; background: var(--papaya); }
.papaya { background: var(--papaya); }
.lime { background: var(--lime); }
.violet { background: var(--violet); }
.blue { background: var(--blue); }
.coral { background: var(--coral); }
.card-meta { display: flex; justify-content: space-between; margin-bottom: 18px; font: .64rem "Courier New", monospace; text-transform: uppercase; letter-spacing: .08em; }
.embed-shell { position: relative; aspect-ratio: 9 / 13.6; background: rgba(255,255,255,.35); overflow: hidden; }
.embed-shell iframe { width: 100%; height: 100%; border: 0; background: white; }
.embed-shell.youtube { aspect-ratio: 9 / 13.6; background: #0d0d0d; display: grid; align-items: center; }
.embed-shell.youtube iframe { aspect-ratio: 16 / 9; height: auto; }
.poster { position: relative; aspect-ratio: 9 / 11.8; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 24px; background: var(--ink); color: var(--paper); }
.poster::before, .poster::after { content: ""; position: absolute; pointer-events: none; }
.poster::before { width: 75%; aspect-ratio: 1; right: -22%; top: 9%; border: 1px solid rgba(243,239,229,.35); border-radius: 50%; }
.poster::after { width: 42%; height: 4px; left: 24px; bottom: 61px; background: var(--papaya); }
.poster > span { position: relative; z-index: 1; margin-top: auto; margin-bottom: 74px; font-size: clamp(3rem, 4.2vw, 5rem); font-weight: 800; line-height: .82; letter-spacing: -.08em; }
.poster > b { position: relative; z-index: 1; font: .67rem "Courier New", monospace; text-transform: uppercase; letter-spacing: .08em; }
.poster:hover > b, .poster:focus-visible > b { text-decoration: underline; }
.poster-miami { background: linear-gradient(145deg, #171714 0 58%, #f3efe5 58%); color: var(--paper); }
.poster-miami > b { color: var(--ink); }
.poster-creator { background: radial-gradient(circle at 70% 24%, var(--papaya) 0 17%, transparent 17.3%), var(--ink); }
.poster-athens { background: linear-gradient(25deg, var(--papaya) 0 28%, var(--ink) 28%); }
.poster-communitea { background: var(--paper); color: var(--ink); }
.poster-communitea::before { border-color: rgba(23,23,20,.32); }
.poster-communitea > span { font-size: clamp(2.25rem, 3.2vw, 3.7rem); }
.poster-communitea > b { padding: 13px 15px; background: var(--ink); color: var(--paper); }
.poster-postmaster { background: linear-gradient(90deg, var(--ink) 0 68%, var(--paper) 68%); }
.poster-editorial { background: linear-gradient(155deg, var(--ink) 0 62%, var(--paper) 62%); }
.poster-editorial > b { color: var(--ink); }
.poster-london-theatre { background: linear-gradient(180deg, var(--ink) 0 72%, #255c9b 72%); }
.poster-image { padding: 0; background: var(--ink); }
.poster-image::before, .poster-image::after { display: none; }
.poster-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.04); transition: transform .25s ease; }
.poster-scratch-photo img { object-position: 58% center; }
.poster-miami-photo img { object-position: 54% center; }
.poster-creator-photo img { object-position: center; }
.poster-athens-photo img { object-position: center; }
.poster-image:hover img, .poster-image:focus-visible img { transform: scale(1.02); }
.poster-image > b { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 13px 15px; background: var(--paper); color: var(--ink); }
.card-copy { display: flex; flex-direction: column; flex: 1; padding-top: 20px; }
.card-copy h3 { margin: 0; font-size: clamp(2rem, 2.8vw, 3.25rem); line-height: .91; letter-spacing: -.06em; }
.card-copy p { margin: 16px 0 0; font: .84rem/1.5 Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: 0; }
.card-copy strong { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(23,23,20,.35); font-size: .75rem; line-height: 1.35; }
.card-copy .card-link { margin-top: 12px; align-self: flex-start; padding-bottom: 3px; border-bottom: 1px solid; font: .67rem "Courier New", monospace; text-transform: uppercase; letter-spacing: .07em; }
.card-copy a:hover, .card-copy a:focus-visible { text-decoration: underline; }

.toolkit-head { display: grid; grid-template-columns: .6fr 1.4fr; gap: 8vw; margin-bottom: 70px; }
.toolkit-head h2 { margin: 0; font-size: clamp(3.7rem, 7.8vw, 8.4rem); line-height: .86; letter-spacing: -.075em; }

.toolkit { padding: 120px 4vw; background: var(--ink); color: var(--paper); }
.toolkit-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 8vw; }
.toolkit-grid h3 { margin: 0 0 28px; font-size: 1.5rem; }
.chip-list, .skill-list { list-style: none; padding: 0; margin: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-list li { padding: 10px 13px; border: 1px solid rgba(243,239,229,.42); font: .7rem "Courier New", monospace; text-transform: uppercase; }
.skill-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.skill-list li { padding: 12px 0; border-bottom: 1px solid rgba(243,239,229,.22); font-size: .85rem; }

.case-studies { padding: 120px 4vw; }
.case-intro { display: grid; grid-template-columns: .6fr 1.4fr; gap: 8vw; margin-bottom: 80px; }
.case-row { display: grid; grid-template-columns: .2fr 1.1fr 1fr .55fr; gap: 3vw; align-items: start; padding: 34px 0 48px; border-top: 1px solid rgba(23,23,20,.28); }
.case-number { font: .8rem "Courier New", monospace; }
.eyebrow { margin: 0 0 14px; font: .66rem "Courier New", monospace; text-transform: uppercase; letter-spacing: .08em; }
.case-row h3 { max-width: 550px; margin: 0; font-size: clamp(1.8rem, 3vw, 3.4rem); line-height: .98; letter-spacing: -.045em; }
.case-row > p { max-width: 510px; margin: 0; line-height: 1.58; font-size: .95rem; }
.case-row > a { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid; padding-bottom: 5px; justify-self: start; }

.long-form { background: var(--paper-2); padding: 120px 4vw; }
.long-form-head { display: grid; grid-template-columns: .45fr 1fr .7fr; gap: 4vw; align-items: end; margin-bottom: 70px; }
.long-form-head > p:last-child { line-height: 1.58; margin: 0; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.video-grid article { background: var(--ink); color: var(--paper); }
.video-frame { aspect-ratio: 16 / 9; background: #0e0e0e; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-grid article > div:last-child { display: grid; grid-template-columns: .4fr 1fr auto; gap: 20px; align-items: end; padding: 24px; }
.video-grid span { font: .64rem "Courier New", monospace; text-transform: uppercase; }
.video-grid h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 2.7rem); letter-spacing: -.04em; }
.video-grid a { font-size: .7rem; text-transform: uppercase; border-bottom: 1px solid; }

.about { padding: 120px 4vw; }
.about-lead { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7vw; align-items: end; }
.about-lead > p { max-width: 620px; margin: 0; font-size: 1.08rem; line-height: 1.65; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6vw; margin-top: 90px; padding-top: 38px; border-top: 1px solid rgba(23,23,20,.28); }
.about-grid h3 { margin: 0 0 25px; font-size: 1.35rem; }
.about-grid ul { padding: 0; margin: 0; list-style: none; }
.about-grid li { padding: 9px 0; border-bottom: 1px solid rgba(23,23,20,.15); font-size: .88rem; line-height: 1.35; }
.about-grid li strong { font-weight: 800; }
.education-line { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 54px 0 0; padding-top: 22px; border-top: 1px solid rgba(23,23,20,.28); font-size: .8rem; }
.education-line strong { text-transform: uppercase; letter-spacing: .07em; }

.contact { padding: 120px 4vw; background: var(--papaya); }
.contact .section-label { color: var(--ink); }
.contact h2 { max-width: 1100px; }
.contact h2 em { color: var(--paper); }
.contact .contact-actions { margin-top: 48px; }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover, .button-light:focus-visible { background: var(--ink); color: var(--paper); }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 4vw; background: var(--ink); color: var(--paper); font: .65rem "Courier New", monospace; text-transform: uppercase; }

@media (max-width: 900px) {
  .portrait { width: clamp(120px, 20vw, 170px); }
  .brand-logos { grid-template-columns: repeat(3, 1fr); }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof div:nth-child(2) { border-right: 0; }
  .work-head, .case-intro, .toolkit-head { grid-template-columns: 1fr; gap: 20px; }
  .social-rail { grid-auto-columns: minmax(330px, 76vw); }
  .toolkit-grid { grid-template-columns: 1fr; }
  .case-row { grid-template-columns: .12fr 1fr; }
  .case-row > p, .case-row > a { grid-column: 2; }
  .long-form-head { grid-template-columns: 1fr; align-items: start; }
  .video-grid { grid-template-columns: 1fr; }
  .about-lead { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  .site-header { padding: 18px 5vw; }
  nav a:not(.nav-cta) { display: none; }
  .hero { min-height: auto; padding: 56px 5vw 64px; }
  .hero-heading { gap: 12px; align-items: center; }
  h1 { font-size: clamp(3.7rem, 16vw, 6.6rem); }
  .intro { margin-top: 34px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .portrait { width: clamp(76px, 23vw, 104px); }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof div { min-height: 150px; padding: 22px 5vw; }
  .proof strong { font-size: 2.7rem; }
  .brand-strip { padding: 26px 5vw 30px; }
  .brand-logos { grid-template-columns: 1fr 1fr; }
  .work-head, .case-studies, .long-form, .toolkit, .about, .contact { padding: 82px 5vw; }
  .work-head { padding-bottom: 44px; }
  .social-stage { padding-bottom: 80px; }
  .stage-controls { padding-inline: 5vw; }
  .social-rail { grid-auto-columns: 88vw; padding-inline: 5vw; }
  .social-card { min-height: 700px; }
  .skill-list { grid-template-columns: 1fr; }
  .case-row { grid-template-columns: 1fr; gap: 18px; }
  .case-row > p, .case-row > a { grid-column: 1; }
  .video-grid article > div:last-child { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 46px; margin-top: 65px; }
  footer { align-items: flex-start; flex-direction: column; padding: 30px 5vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}