/* Design tokens — mirror Figma variables (fileKey HoWWipovaXoZz9SRDXv87z) */
:root {
  --brand-dark-blue:        #2b3784;
  --brand-muted-dark-blue:  #2a346e;
  --brand-light-gold:       #fdefbb;
  --brand-rich-gold:        #ffe170;
  --brand-off-white:        #fffbed;
  --brand-flower-magenta:   #894789;
  --brand-divider-warm-gray:#696969;
  --brand-text-dark-gold:   #6e6a5c;
  --brand-light-sky-blue:   #d4eefd;
  --brand-black:            #000000;
  --brand-white:            #ffffff;

  --ff-head: "Cormorant Garamond", Georgia, serif;
  --ff-body: "Inter", system-ui, sans-serif;

  /* Desktop (1440) type scale — tablet/mobile modes land with their breakpoints */
  --hero-eyebrow-size:     32px;
  --hero-bigtitle-size:    84px;
  --body-base-size:        24px;
  --section-subhead-size:  48px;
  --section-title-size:    64px;
  --sayhello-bigtitle-size:128px;

  --nav-height: 105px;
  --ease: cubic-bezier(.25,.46,.45,.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--brand-off-white);
  color: var(--brand-black);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
section { scroll-margin-top: var(--nav-height); }
.container { max-width: 1440px; margin: 0 auto; padding: 0 80px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-light-gold); color: var(--brand-flower-magenta);
  border: 4px solid var(--brand-flower-magenta); border-radius: 42px;
  padding: 12px 24px;
  font-family: var(--ff-head); font-weight: 700; font-size: 24px;
  white-space: nowrap; transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn .arrow { font-size: 30px; line-height: 0; }

/* ── NAV ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-height);
  background: var(--brand-dark-blue);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 80px;
}
.nav-logo {
  font-family: var(--ff-head); font-size: 24px; font-weight: 700;
  color: var(--brand-light-gold);
}
.nav-logo span { color: var(--brand-rich-gold); }
.site-nav a { font-family: var(--ff-head); font-size: 24px; font-weight: 700; color: var(--brand-light-gold); transition: opacity .2s; }
.site-nav a:hover { opacity: .75; }

/* ── HERO ── */
#hero {
  position: relative; overflow: hidden;
  aspect-ratio: 1440 / 860; margin-top: var(--nav-height);
  background: var(--brand-dark-blue);
  box-shadow: 0 -2px 0 0 var(--brand-dark-blue);
}
.hero-anim-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--brand-dark-blue); }
.hero-anim-bg iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: none;
  pointer-events: none;
}
.hero-content {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-text {
  padding: 48px 240px 0 80px;
  text-shadow: 0 2px 4px var(--brand-dark-blue);
}
.hero-eyebrow { font-family: var(--ff-head); font-weight: 700; font-size: var(--hero-eyebrow-size); color: var(--brand-light-gold); }
.hero-name { font-family: var(--ff-head); font-weight: 700; font-size: var(--hero-bigtitle-size); color: var(--brand-rich-gold); margin-top: 8px; line-height: 1; }
.hero-bio { font-family: var(--ff-head); font-weight: 700; font-size: var(--body-base-size); line-height: 1.65; color: var(--brand-off-white); max-width: 700px; margin-top: 16px; }
.hero-buttons { display: flex; align-items: center; gap: 62px; padding: 0 80px 20px; }
.hero-headshot { width: 170px; height: 170px; border-radius: 50%; overflow: hidden; margin-left: auto; }
.hero-headshot img { width: 100%; height: 100%; object-fit: cover; }

/* ── CLIENTS / CREDENTIALS ── */
#credentials { background: var(--brand-off-white); padding: 40px 0; }
.stats-row {
  display: flex; padding: 0 80px;
  font-family: var(--ff-head); font-weight: 700; color: var(--brand-divider-warm-gray); text-align: center;
}
.stat { flex: 1; }
.stat-num { font-size: var(--section-subhead-size); }
.stat-label { font-size: var(--body-base-size); }
.brands {
  text-align: center; padding: 27px 80px 0;
  font-family: var(--ff-head); font-weight: 700; color: var(--brand-divider-warm-gray);
}
.brands-label { font-size: var(--body-base-size); margin-bottom: 27px; }
.brands-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 1000px; margin: 0 auto; row-gap: 16px; font-size: 24px;
}
.divider { border: none; border-top: 1px solid rgba(105,105,105,.25); margin-top: 27px; }

/* ── WORK / CASE STUDIES ── */
#work { background: var(--brand-off-white); padding: 58px 80px 100px; }
.work-header { margin-bottom: 33px; }
.work-tag { font-family: var(--ff-head); font-weight: 700; font-size: var(--body-base-size); color: var(--brand-dark-blue); margin-bottom: 19px; }
.work-title { font-family: var(--ff-head); font-weight: 700; font-size: var(--section-title-size); line-height: .9; color: var(--brand-divider-warm-gray); }
.work-title em { color: var(--brand-dark-blue); font-style: italic; }
.work-subtitle { font-family: var(--ff-head); font-weight: 700; font-size: var(--body-base-size); color: var(--brand-text-dark-gold); margin-top: 19px; }

.cards-row { display: flex; flex-wrap: wrap; gap: 24px 146px; margin-bottom: 24px; justify-content: center; }
.cards-row:last-child { margin-bottom: 0; }
.card {
  background: var(--brand-white); border: 1.8px solid var(--brand-light-sky-blue); border-radius: 16px;
  overflow: hidden; flex: 1 0 0; min-width: 337px;
}
.card.wide { max-width: 615px; }
.card.narrow { max-width: 518px; }
.card.wide-alt { max-width: 625px; }
.card-img { width: 100%; }
.card-img.ratio-short { aspect-ratio: 551 / 347; }
.card-img.ratio-tall { aspect-ratio: 518 / 395; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img.contain img { object-fit: contain; object-position: center; background: var(--brand-white); }
.card-body { padding: 23px 80px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 20px 38px; margin-bottom: 15px; }
.pill {
  background: var(--brand-light-sky-blue); color: var(--brand-dark-blue);
  font-family: var(--ff-body); font-size: 16px; padding: 8px 11px; border-radius: 24px;
}
.card-title { font-family: var(--ff-head); font-weight: 700; font-style: italic; font-size: var(--section-subhead-size); color: var(--brand-black); margin-bottom: 15px; }
.card-desc { font-family: var(--ff-body); font-size: 14px; color: var(--brand-black); line-height: 1.5; margin-bottom: 15px; }
.card-link { font-family: var(--ff-body); font-size: 20px; color: var(--brand-black); display: inline-flex; align-items: center; gap: 4px; }

/* ── ABOUT ── */
.about-header { background: var(--brand-dark-blue); padding: 40px 80px; }
.about-eyebrow { font-family: var(--ff-head); font-weight: 700; font-size: var(--body-base-size); color: var(--brand-off-white); margin-bottom: 17px; }
.about-title { font-family: var(--ff-head); font-weight: 700; font-size: var(--section-title-size); line-height: 1.1; color: var(--brand-off-white); }
.about-title em { font-style: italic; color: var(--brand-light-sky-blue); }

#about-me { background: var(--brand-light-sky-blue); padding: 40px 80px 0; }
.about-hero-img { display: block; width: 100%; border: 1px solid var(--brand-off-white); border-radius: 24px; overflow: hidden; aspect-ratio: 1280 / 660; }
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.about-body {
  padding: 20px; color: var(--brand-dark-blue);
  font-family: var(--ff-body); font-weight: 500; font-size: var(--body-base-size); line-height: 1.65;
}
.about-body p + p { margin-top: 24px; }

.skills-bar { background: var(--brand-dark-blue); padding: 20px 80px; text-align: center; }
.skills-bar p { color: var(--brand-light-sky-blue); font-family: var(--ff-body); font-weight: 500; font-size: var(--body-base-size); line-height: 1.65; }

/* ── HOW I SEE IT ── */
#philosophy { background: var(--brand-off-white); padding: 52px 80px 0; }
.philosophy-title { font-family: var(--ff-head); font-weight: 700; font-size: var(--section-title-size); color: var(--brand-dark-blue); margin-bottom: 24px; }
.philosophy-copy { font-family: var(--ff-body); font-weight: 500; font-size: var(--body-base-size); line-height: 1.65; color: var(--brand-muted-dark-blue); max-width: 1280px; }
.philosophy-copy p { margin-bottom: 24px; }
.philosophy-edges p { margin: 0; }
.diagram-wrap { display: flex; justify-content: center; padding: 60px 80px 100px; }
.diagram-svg { width: 100%; max-width: 677px; }

/* ── RESUME ── */
#resume { background: var(--brand-dark-blue); padding: 58px 80px 100px; }
.resume-header { margin-bottom: 43px; }
.resume-eyebrow { font-family: var(--ff-head); font-weight: 700; font-size: var(--body-base-size); color: var(--brand-off-white); margin-bottom: 12px; }
.resume-title { font-family: var(--ff-head); font-weight: 700; font-size: var(--section-title-size); line-height: 1.1; }
.resume-title .line1 { color: var(--brand-off-white); }
.resume-title .line2 { color: var(--brand-light-sky-blue); }
.resume-lede { font-family: var(--ff-body); font-weight: 500; font-size: var(--body-base-size); line-height: 1.65; color: var(--brand-off-white); margin-top: 20px; max-width: 900px; }
.resume-header .btn { margin-top: 24px; }

.resume-columns { display: flex; flex-wrap: wrap; gap: 25px; max-width: 1061px; margin: 0 auto; }
.resume-col { flex: 1 1 400px; min-width: 280px; }
.job-entry { margin-bottom: 32px; }
.job-entry:last-child { margin-bottom: 0; }
.job-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.job-title { font-family: var(--ff-body); font-weight: 700; font-size: 24px; color: var(--brand-light-gold); }
.job-date { font-family: var(--ff-body); font-weight: 500; font-size: 16px; color: var(--brand-white); white-space: nowrap; }
.job-employer { font-family: var(--ff-body); font-weight: 500; font-size: 24px; color: var(--brand-rich-gold); margin-top: 2px; }
.job-body { font-family: var(--ff-body); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--brand-white); margin-top: 11px; }

.resume-group { margin-bottom: 32px; }
.resume-group:last-child { margin-bottom: 0; }
.resume-group-label {
  font-family: var(--ff-body); font-weight: 700; font-size: 16px; letter-spacing: 5.44px;
  color: var(--brand-white); border-top: 1px solid rgba(255,255,255,.3); padding-top: 12px; margin-bottom: 11px;
}

/* ── CONTACT ── */
#contact { background: var(--brand-off-white); padding-bottom: 65px; }
.contact-image { display: block; width: 100%; aspect-ratio: 1440 / 960; overflow: hidden; }
.contact-image img { width: 100%; height: 100%; object-fit: cover; }
.contact-header { padding: 65px 80px 0; text-align: center; color: var(--brand-dark-blue); }
.contact-tag { font-family: var(--ff-head); font-weight: 700; font-size: var(--body-base-size); }
.contact-title { font-family: var(--ff-head); font-weight: 300; font-size: var(--sayhello-bigtitle-size); line-height: 124px; margin-top: 17px; }
.contact-sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--section-subhead-size); margin-top: 17px; }
.contact-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px 149px; padding: 65px 80px 0; }
.social-links { display: flex; justify-content: center; gap: 80px; padding: 40px 0 0; }
.social-links a { font-family: var(--ff-head); font-weight: 700; font-size: var(--body-base-size); color: var(--brand-dark-blue); opacity: .7; transition: opacity .2s; }
.social-links a:hover { opacity: 1; }

/* ── FOOTER ── */
.site-footer {
  background: var(--brand-dark-blue); color: var(--brand-white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 40px 80px; font-family: var(--ff-body); font-size: 16px;
}

/* ── CASE STUDY ── */
.cs-hero { width: 100%; aspect-ratio: 1440 / 871; overflow: hidden; background: var(--brand-dark-blue); }
/* <picture> defaults to display:inline; make it fill the hero box so the img's
   height:100% resolves identically across browsers, not just Chromium. */
.cs-hero picture { display: block; width: 100%; height: 100%; }
.cs-hero img { width: 100%; height: 100%; object-fit: cover; }

.cs-content { background: var(--brand-white); padding: 20px 80px; }
.cs-title { font-family: var(--ff-head); font-weight: 700; font-style: italic; font-size: var(--section-subhead-size); color: var(--brand-dark-blue); margin-bottom: 9px; }
.cs-meta { font-family: var(--ff-body); font-size: 14px; color: var(--brand-dark-blue); }

.cs-work { background: var(--brand-dark-blue); display: flex; flex-direction: column; gap: 33px; padding: 63px 80px; }
.cs-block { display: flex; flex-direction: column; gap: 12px; }
.cs-section-title { font-family: var(--ff-head); font-weight: 700; font-style: italic; font-size: var(--section-subhead-size); color: var(--brand-off-white); }
.cs-body { font-family: var(--ff-body); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--brand-off-white); }
.cs-body p + p { margin-top: 1em; }
.cs-outcome { font-family: var(--ff-body); font-weight: 700; font-size: 16px; color: var(--brand-rich-gold); }

.cs-diagram-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 33px; }
.cs-diagram-img { flex: 0 0 202px; width: 202px; height: 202px; }
.cs-diagram-img img { width: 100%; height: 100%; }
.cs-diagram-text { flex: 1 1 260px; min-width: 260px; display: flex; flex-direction: column; gap: 15px; }
.cs-diagram-title { font-family: var(--ff-head); font-weight: 700; font-size: var(--body-base-size); line-height: 1.65; color: var(--brand-off-white); }
.cs-diagram-list { font-family: var(--ff-body); font-weight: 500; font-size: 16px; color: var(--brand-off-white); list-style: disc; padding-left: 24px; display: flex; flex-direction: column; gap: 15px; }

.cs-images-row { display: flex; flex-wrap: wrap; gap: 23px; justify-content: center; }
.cs-image {
  flex: 1 1 0; min-width: 337px; height: 425px;
  border: 1px solid var(--brand-text-dark-gold); border-radius: 24px;
  background: var(--brand-black); overflow: hidden;
}
.cs-image.short { max-width: 515px; }
.cs-image.long { max-width: 738px; }
.cs-image img { width: 100%; height: 100%; object-fit: contain; }
.cs-images-row.tall .cs-image { height: 582px; }

.cs-cta { background: var(--brand-white); display: flex; justify-content: center; padding: 56px 80px; }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }

/* ── TABLET (≤1100, covers 834 frame) ── */
@media (max-width: 1100px) {
  :root {
    --hero-eyebrow-size:     28px;
    --hero-bigtitle-size:    64px;
    --body-base-size:        20px;
    --section-subhead-size:  40px;
    --section-title-size:    52px;
    --sayhello-bigtitle-size:88px;
  }

  /* Case cards share one width once they stack single-column (674px content at 834) */
  .card, .card.wide, .card.narrow, .card.wide-alt { max-width: 615px; width: 100%; }

  /* Contact buttons were stranded far apart at the desktop 149px gap */
  .contact-buttons { gap: 24px 40px; }

  /* Fallback only — main.js sets this inline, live, to match whichever composition is loaded */
  #hero { aspect-ratio: 834 / 877; }

  .about-hero-img { aspect-ratio: 674 / 659; }
  .contact-image { aspect-ratio: 1678 / 1920; }
}

/* ── MOBILE (≤768, covers 390 frame) ── */
@media (max-width: 768px) {
  :root {
    --hero-eyebrow-size:     24px;
    --hero-bigtitle-size:    44px;
    --body-base-size:        18px;
    --section-subhead-size:  32px;
    --section-title-size:    36px;
    --sayhello-bigtitle-size:52px;
    --nav-height: 130px; /* approximate two-row height, for anchor scroll-offset only */
  }

  .container { padding: 0 20px; }

  /* Nav rebuilt as a two-row layout: logo takes its own row, links wrap below it.
     Sticky (not fixed) so the hero never has to guess the nav's real height. */
  .site-nav {
    position: sticky; height: auto;
    flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
    gap: 10px 24px; padding: 16px 20px;
  }
  .nav-logo { flex-basis: 100%; }
  #hero { margin-top: 0; aspect-ratio: 390 / 991; }

  .hero-text { padding: 24px 20px 0; }
  .hero-bio { max-width: none; }
  /* Keep the button and headshot side by side on phones. At 24px type the button
     is a fixed 250px and the headshot 130px — 396px inside a 350px space at 390px
     wide, which is why this stacked. Both scale with viewport instead, hitting
     their full desktop size by ~500px and never overflowing at 320. */
  .hero-buttons {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 20px 24px; flex-wrap: nowrap;
  }
  .hero-buttons .btn {
    font-size: clamp(15px, 4.4vw, 24px);
    padding: 10px clamp(12px, 4vw, 24px);
    border-width: 3px;
    flex: 0 1 auto;
  }
  .hero-buttons .btn .arrow { font-size: 1.15em; }
  .hero-headshot {
    width: clamp(88px, 27vw, 130px); height: clamp(88px, 27vw, 130px);
    margin-left: auto; flex: 0 0 auto;
  }

  #credentials { padding: 32px 0; }
  .stats-row { flex-direction: column; gap: 16px; padding: 0 20px; }
  .brands { padding: 20px 20px 0; }
  .brands-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }

  #work { padding: 40px 20px 60px; }
  .card-body { padding: 20px 24px; }

  .about-header { padding: 24px 20px; }
  #about-me { padding: 24px 20px 0; }
  .about-hero-img { display: none; } /* cut on mobile — length decision */
  .about-body { padding: 0; }
  .skills-bar { padding: 16px 20px; }

  #philosophy { padding: 32px 20px 0; }
  .diagram-wrap { padding: 32px 20px 60px; }

  #resume { padding: 40px 20px 60px; }
  .resume-columns { gap: 32px; }

  #contact { padding-bottom: 40px; }
  .contact-image { aspect-ratio: 390 / 844; }
  .contact-header { padding: 40px 20px 0; }
  .contact-buttons { padding: 40px 20px 0; gap: 16px; flex-direction: column; align-items: center; }
  .social-links { gap: 40px; }

  .cs-content { padding: 20px; }
  .cs-work { padding: 40px 20px; gap: 24px; }
  .cs-cta { padding: 40px 20px; }

  /* The case-study CTA button is white-space:nowrap at 24px, so the longer labels
     ("View Guitar Center Case Study") measured 439px inside a 350px content box and
     pushed the whole page into horizontal scroll. Let it wrap and shrink slightly. */
  .cs-cta .btn {
    white-space: normal; text-align: center;
    max-width: 100%; font-size: 20px; line-height: 1.3;
    padding: 14px 22px;
  }
  .cs-cta .btn .arrow { font-size: 24px; line-height: 1; }

  /* Fixed 425px (582px tall) letterboxes the object-contain screenshots at mobile width — let each image set its own height instead */
  /* min-width:337px was forcing horizontal scroll below 337px wide. Removing it
     alone let the images squeeze side-by-side instead of stacking, so stack the
     row explicitly and then allow the shrink. */
  /* flex-basis:100% makes each item claim a full line, so flex-wrap stacks them
     one per row. Keeping flex-direction:row is deliberate — switching to column
     would make the `flex: 1 1 0` basis apply to HEIGHT and collapse them. */
  .cs-image, .cs-images-row.tall .cs-image {
    flex-basis: 100%; min-width: 0; width: 100%; height: auto;
  }
  .cs-image img { width: 100%; height: auto; display: block; }

  /* Same story on the work cards: the 337px floor is what made them wrap one
     per row. Stack the row explicitly, then allow the shrink. */
  /* Same technique as .cs-image above: full-line basis, row direction preserved. */
  .cards-row { gap: 24px; }
  .card, .card.wide, .card.narrow, .card.wide-alt {
    flex-basis: 100%; min-width: 0; width: 100%;
  }

  .site-footer { flex-direction: column; gap: 8px; text-align: center; padding: 24px 20px; }
}

/* ── ACCESSIBILITY ──────────────────────────────────────────────
   WCAG 2.1 SC 2.4.1 (Bypass Blocks). Off-screen until focused, so
   a keyboard or screen-reader user can jump the nav on every page. */
.skip-link {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 0; left: 0; z-index: 1000;
  width: auto; height: auto; margin: 0;
  clip: auto; clip-path: none; overflow: visible;
  padding: 12px 20px;
  background: var(--brand-rich-gold); color: var(--brand-dark-blue);
  font-family: var(--ff-body); font-weight: 700; font-size: 16px;
  text-decoration: none; border-radius: 0 0 6px 0;
}

/* Visible focus ring for keyboard users, suppressed for mouse clicks. */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--brand-rich-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}