/* ══════════════════════════════════════════════════════════════════════════
   RESONANT STARK — Design System
   Extreme negative space. High-contrast typography. Sparse terracotta accent.
   Scroll-triggered fade-ins. No ornamentation. Content breathes.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:      #111;
  --charcoal:   #2a2a2a;
  --gray:       #777;
  --rule:       #ddd;
  --bg:         #fafaf8;
  --white:      #fff;
  --accent:     #c4703f;
  --accent-dk:  #a25a30;
  --serif:      'DM Serif Display', Georgia, serif;
  --sans:       'DM Sans', -apple-system, sans-serif;
  --max-w:      1100px;
  --nav-h:      56px;
  --sub-nav-h:  44px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }

body {
  font-family: var(--sans); font-size: 1rem; line-height: 1.75;
  color: var(--charcoal); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-dk); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }

/* ── Scroll-triggered animation ── */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1; transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(2) { transition-delay: .1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: .2s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: .25s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: .3s; }

/* ══════════════════════════════════════════════════════════════════════════
   HEADER — fixed, minimal
   ══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h); background: var(--bg);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.site-name {
  font-family: var(--serif); font-size: 1.15rem; color: var(--black);
  letter-spacing: .01em;
}
.nav-links { display: flex; gap: 1.75rem; list-style: none; }
.nav-links a {
  font-size: .72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gray); padding: 4px 0;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--accent); transition: width .3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--black); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* Mobile hamburger */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 28px; height: 20px; position: relative;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  display: block; height: 2px; background: var(--black);
  position: absolute; left: 0; right: 0; transition: .3s;
}
.nav-toggle::before { content: ''; top: 0; }
.nav-toggle span { top: 9px; }
.nav-toggle::after { content: ''; bottom: 0; }
.nav-toggle.is-open::before { transform: rotate(45deg); top: 9px; }
.nav-toggle.is-open span { opacity: 0; }
.nav-toggle.is-open::after { transform: rotate(-45deg); bottom: 9px; }

@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; flex-direction: column; position: absolute;
    top: var(--nav-h); left: 0; right: 0; background: var(--bg);
    border-bottom: 1px solid var(--rule); padding: 1.5rem 2rem; gap: 1rem;
  }
  .nav-links.is-open { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STICKY SUB-NAV (Film & Strategy sections)
   ══════════════════════════════════════════════════════════════════════════ */
.sub-nav {
  position: sticky; top: var(--nav-h); z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  height: var(--sub-nav-h); display: flex; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sub-nav ul {
  display: flex; gap: 2rem; list-style: none; white-space: nowrap;
}
.sub-nav a {
  font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gray); padding: 4px 0;
  position: relative;
}
.sub-nav a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--accent); transition: width .25s;
}
.sub-nav a:hover, .sub-nav a.active { color: var(--black); }
.sub-nav a:hover::after, .sub-nav a.active::after { width: 100%; }

/* Offset scroll target so sticky navs don't cover content */
.scroll-target { scroll-margin-top: calc(var(--nav-h) + var(--sub-nav-h) + 16px); }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION HERO — large type, extreme whitespace
   ══════════════════════════════════════════════════════════════════════════ */
.section-hero {
  padding: 10rem 0 6rem;
}
.section-hero h1, .section-hero .hero-text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.18;
  color: var(--black); max-width: 18ch;
}
.section-hero .hero-text { max-width: 22ch; }
.accent { color: var(--accent); font-style: italic; }

.hero-sub {
  margin-top: 2rem; font-size: 1.05rem; color: var(--gray);
  max-width: 52ch; line-height: 1.8;
}

/* ── Section spacing ── */
.section { padding: 6rem 0; }
.section--tight { padding: 4rem 0; }
.section + .section { border-top: 1px solid var(--rule); }

.section-label {
  font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent); margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════════ */
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.25;
  color: var(--black); margin-bottom: 2rem;
}
h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.25rem; line-height: 1.35; color: var(--black);
  margin-bottom: .75rem;
}
h4 {
  font-family: var(--sans); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray); margin-bottom: .5rem;
}
p + p { margin-top: 1.25rem; }
.text-gray { color: var(--gray); }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .8rem; }
.text-serif { font-family: var(--serif); }
.mt-lg { margin-top: 4rem; }
.mt-md { margin-top: 2rem; }
.mt-sm { margin-top: 1rem; }
.mb-md { margin-bottom: 2rem; }
.max-prose { max-width: 62ch; }

/* ── Blockquote / Pull quote ── */
blockquote {
  font-family: var(--serif); font-size: 1.15rem; font-style: italic;
  line-height: 1.7; color: var(--charcoal);
  border-left: 2px solid var(--accent); padding-left: 1.5rem;
  margin: 3rem 0; max-width: 55ch;
}
blockquote cite {
  display: block; margin-top: .75rem;
  font-family: var(--sans); font-style: normal;
  font-size: .8rem; color: var(--gray);
}

/* ══════════════════════════════════════════════════════════════════════════
   WORK PANELS — 3-column grid
   ══════════════════════════════════════════════════════════════════════════ */
.panels-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  border: 1px solid var(--rule);
}
.panel {
  padding: 3rem 2rem; border-right: 1px solid var(--rule);
  transition: background .3s;
}
.panel:last-child { border-right: none; }
.panel:hover { background: var(--white); }
.panel h3 { margin-bottom: .75rem; }
.panel p { font-size: .9rem; color: var(--gray); margin-bottom: 1.25rem; }
.panel-link {
  font-size: .75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .05em; color: var(--accent);
  display: inline-flex; align-items: center; gap: .5ch;
}
.panel-link span {
  display: inline-block; transition: transform .2s;
}
.panel:hover .panel-link span { transform: translateX(4px); }

/* ── Hardcoded image slots — placeholder bg until files are dropped in ── */
.img-slot {
  display: block; width: 100%; object-fit: cover;
  background: var(--rule); border: none;
}
.img-slot--landscape { aspect-ratio: 3/2; }
.img-slot--portrait  { aspect-ratio: 4/5; }
.img-slot--accent    { aspect-ratio: 3/4; }
.panel .img-slot { margin-bottom: 2rem; }

/* ── Hero image grid (per-section heroes) ── */
.hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 4rem; align-items: center;
}
.hero-images { position: relative; justify-self: end; width: 100%; max-width: 460px; }
.hero-img-primary {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--rule);
  display: block;
}
.hero-img-accent {
  position: absolute; width: 45%; aspect-ratio: 3/4; object-fit: cover;
  background: var(--rule);
  border: 3px solid var(--accent); box-shadow: 0 12px 40px rgba(0,0,0,.08);
  bottom: -8%; left: -8%; z-index: 2;
}
/* Per-section accent positions */
.hero--about .hero-img-accent  { bottom:auto; left:auto; top:-6%; right:-6%; }
.hero--film .hero-img-accent   { bottom:-8%; left:auto; right:-6%; }
.hero--strategy .hero-grid     { grid-template-columns: .9fr 1.1fr; }
.hero--strategy .hero-images   { justify-self: start; order: -1; }
.hero--strategy .hero-img-accent { bottom:auto; left:-6%; top:-6%; }
.hero--speaking .hero-img-accent { bottom:10%; left:auto; right:-10%; transform:rotate(2deg); }
.hero--impact .hero-img-accent { bottom:auto; left:-8%; top:-6%; }
.hero--connect .hero-img-accent { display: none; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-images { justify-self: center; max-width: 340px; order: -1; }
  .hero--strategy .hero-grid { grid-template-columns: 1fr; }
  .hero--strategy .hero-images { order: -1; }
}

@media (max-width: 700px) {
  .panels-grid { grid-template-columns: 1fr; }
  .panel { border-right: none; border-bottom: 1px solid var(--rule); }
  .panel:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGO LIST (As Seen In / Trusted By) — PNG logos
   ══════════════════════════════════════════════════════════════════════════ */
.logo-list {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  list-style: none; align-items: center;
}
.logo-list li {
  display: flex; align-items: center;
}
.logo-list img {
  display: block; height: 28px; width: auto;
  filter: grayscale(100%) opacity(.55);
  transition: filter .3s ease;
}
.logo-list img:hover {
  filter: grayscale(0%) opacity(1);
}
/* Trusted By — slightly smaller */
.logo-list--sm img { height: 22px; }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .75rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .9rem 2.2rem; transition: all .25s; cursor: pointer;
}
.btn--primary {
  background: var(--black); color: var(--white); border: 1px solid var(--black);
}
.btn--primary:hover {
  background: var(--accent); border-color: var(--accent); color: var(--white);
}
.btn--outline {
  background: transparent; color: var(--black); border: 1px solid var(--black);
}
.btn--outline:hover { background: var(--black); color: var(--white); }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   CASE STUDY / PROJECT CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.project {
  padding: 3rem 0; border-bottom: 1px solid var(--rule);
}
.project:last-child { border-bottom: none; }
.project h3 { margin-bottom: .25rem; }
.project-meta {
  font-size: .8rem; color: var(--gray); font-style: italic; margin-bottom: 1rem;
}
.project p { max-width: 62ch; }
.project-role {
  margin-top: 1rem; font-size: .8rem; color: var(--gray); font-style: italic;
}
.project-links {
  margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.project-links a {
  font-size: .75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   SERVICES LIST
   ══════════════════════════════════════════════════════════════════════════ */
.services-list { list-style: none; }
.services-list li {
  padding: 1.25rem 0; border-bottom: 1px solid var(--rule);
  display: flex; gap: 1rem; align-items: baseline;
}
.services-list li:last-child { border-bottom: none; }
.service-name {
  font-family: var(--serif); font-size: 1.05rem; color: var(--black);
  min-width: 260px; flex-shrink: 0;
}
.service-desc { font-size: .875rem; color: var(--gray); }

@media (max-width: 700px) {
  .services-list li { flex-direction: column; gap: .25rem; }
  .service-name { min-width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPEAKING TOPICS
   ══════════════════════════════════════════════════════════════════════════ */
.talk {
  padding: 2rem 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background .2s;
}
.talk:hover { background: var(--white); padding-left: 1.5rem; padding-right: 1.5rem; margin-left: -1.5rem; margin-right: -1.5rem; }
.talk:last-child { border-bottom: none; }
.talk-format {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); margin-bottom: .5rem;
}
.talk h3 { margin-bottom: .25rem; }
.talk-venue { font-size: .8rem; color: var(--gray); margin-bottom: .5rem; }
.talk-hook { font-size: .9rem; color: var(--charcoal); font-style: italic; }
.talk-expand {
  max-height: 0; overflow: hidden; transition: max-height .4s ease, margin .3s;
}
.talk.is-open .talk-expand { max-height: 600px; margin-top: 1rem; }
.talk-expand-inner { font-size: .875rem; color: var(--gray); max-width: 62ch; line-height: 1.7; }
.talk-toggle {
  font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .05em; color: var(--accent); margin-top: .75rem;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRESS / ARTICLE LINKS
   ══════════════════════════════════════════════════════════════════════════ */
.press-item {
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
}
.press-item:last-child { border-bottom: none; }
.press-outlet {
  font-family: var(--serif); font-size: .95rem; color: var(--black);
  min-width: 180px; flex-shrink: 0;
}
.press-title { font-size: .875rem; color: var(--gray); flex: 1; }
.press-title a { color: var(--gray); }
.press-title a:hover { color: var(--accent); }

@media (max-width: 700px) {
  .press-item { flex-direction: column; gap: .25rem; }
  .press-outlet { min-width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AWARDS
   ══════════════════════════════════════════════════════════════════════════ */
.awards-list { list-style: none; }
.awards-list li {
  padding: 1.25rem 0; border-bottom: 1px solid var(--rule);
  display: flex; gap: 1.5rem; align-items: baseline;
}
.awards-list li:last-child { border-bottom: none; }
.award-year { font-size: .8rem; color: var(--gray); min-width: 40px; }
.award-text { font-family: var(--serif); font-size: 1rem; color: var(--black); }
.award-org { font-family: var(--sans); font-size: .8rem; color: var(--gray); }

/* ══════════════════════════════════════════════════════════════════════════
   ENGAGEMENT LIST (In the Room)
   ══════════════════════════════════════════════════════════════════════════ */
.engage-list { list-style: none; }
.engage-list li {
  padding: .6rem 0; font-size: .875rem; color: var(--charcoal);
  border-bottom: 1px solid transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--rule); padding: 4rem 0 2rem;
  font-size: .8rem; color: var(--gray);
}
.footer-inner {
  display: flex; justify-content: space-between; align-items: start;
  flex-wrap: wrap; gap: 2rem;
}
.footer-social { display: flex; gap: 1.5rem; list-style: none; }
.footer-social a { color: var(--gray); font-weight: 500; }
.footer-social a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   SPACER (extra breathing room between major sections)
   ══════════════════════════════════════════════════════════════════════════ */
.spacer { height: 6rem; }
.spacer--lg { height: 10rem; }