/* ═══ SELF-HOSTED FONTS ═══════════════════════════════════
     All font files are served from this site's own /fonts/
     directory. No requests are made to fonts.googleapis.com,
     fonts.gstatic.com, or any other third-party font CDN
     during page load — every @font-face below references a
     local /fonts/*.woff2 file only.
     If you need to add a new weight, drop the .woff2 file
     into /fonts/ and add a matching @font-face block here.
     Do not link to Google Fonts.
  ══════════════════════════════════════════════════════════ */
  @font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hanuman-700.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/hanuman-900.woff2') format('woff2');
  }
  @font-face {
    font-family: 'PT Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/pt-mono-700.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/golos-text-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/golos-text-500.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/golos-text-700.woff2') format('woff2');
  }

  /* Disable synthetic bold/italic site-wide. If a weight or style
     isn't actually loaded as a real woff2 above, we'd rather fall
     back to the closest real face than have the browser smear the
     regular weight or slant a roman face. Every font-weight /
     font-style declaration in this file has been audited against
     the @font-face set above. */
  * { font-synthesis: none; -webkit-font-synthesis: none; }

  /* ═══ RESET ══════════════════════════════════════════════ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  :root {
    --bg:        #14110e;
    --yellow:    #f8d142;
    --teal:      #19b9db;
    --white:     #ffffff;
    --label-bg:  #1e1e1e;
  }

  body {
    background: var(--bg);
    color: var(--white);
    font-family: 'Golos Text', sans-serif;
    overflow-x: hidden;
  }

  /* ═══ SPECTACLES ══════════════════════════════════════════
     PNG ellipse images — position:fixed with mix-blend-mode:screen.
     The black backgrounds in the PNGs disappear via screen blend,
     leaving only the teal/gold light halos floating over the page.
     pointer-events:none keeps all content fully interactive.
  ══════════════════════════════════════════════════════════ */
  .spec {
    position: fixed;
    pointer-events: none;
    will-change: transform;
    z-index: 200;
    mix-blend-mode: screen;
    display: block;
  }

  /* ═══ HEADER ══════════════════════════════════════════════
     The scrolled darkening is painted via a ::before pseudo
     that extends ~30px below the header and fades to transparent
     at the bottom, instead of a hard-edged solid rectangle on
     #hdr itself. The pseudo sits at z-index:-1 within the
     header's own stacking context (created by position:fixed +
     z-index:100), so logo / nav / portrait / viz sit above it
     without needing their own z-index. pointer-events:none keeps
     the gradient from blocking clicks on header content. */
  #hdr {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 60px;
    background: transparent;
  }
  #hdr::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: -30px;
    z-index: -1;
    pointer-events: none;
    /* True top→bottom fade across the WHOLE painted area
       (header height + 30px continuation). Opaque at the very
       top edge of the bar, fully transparent at the bottom of
       the continuation, so the darkening reads as a gradient
       across the entire sticky bar — not just a fade tacked
       onto the bottom. */
    background: linear-gradient(
      to bottom,
      rgba(20, 17, 14, 0.95) 0%,
      rgba(20, 17, 14, 0)  100%
    );
    opacity: 0;
    /* will-change pre-promotes the pseudo onto its own
       compositing layer so the opacity transition does not
       cause a paint flash on the first scrolled toggle. */
    will-change: opacity;
    transition: opacity 0.5s ease;
  }
  #hdr.scrolled::before { opacity: 1; }

  /* Anchor scroll offset — when an in-page link targets a section
     we want the section's first content (badge / title) to land
     fully BELOW the sticky header instead of being tucked behind
     it. `scroll-margin-top` is what the browser uses as the top
     edge of the target during native scrollIntoView, so the same
     value works for clicks, browser back/forward hash restores
     and hash-on-load. Per-breakpoint values match the rendered
     header height + a small safety gap. */
  #top, #about, #work, #testimonials, #writing, #beats, #contact {
    scroll-margin-top: 50px;
  }
  #logo { height: 44px; width: auto; display: block; }
  #nav ul { list-style: none; display: flex; gap: 44px; }
  #nav a {
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--white);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s, font-weight .2s;
  }
  #nav a:hover { color: var(--yellow); }
  #nav a.active {
    font-weight: 700;
    border-bottom-color: var(--yellow);
  }
  /* "Let's Talk" CTA in the nav — yellow pill instead of a text link */
  #nav a.nav-cta {
    font-weight: 700;
    color: var(--bg);
    background: var(--yellow);
    padding: 8px 18px;
    border-radius: 8px;
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    transition: background .2s, color .2s, transform .15s;
  }
  #nav a.nav-cta:hover {
    color: var(--bg);
    background: var(--white);
    transform: translateY(-1px);
  }
  /* Active state shouldn't add an underline to the button */
  #nav a.nav-cta.active { border-bottom: none; }

  /* Nav-bar Beats visualizer — small audio-reactive strip that hangs
     just under the "Beats" nav item while music is playing. Reuses the
     existing player AnalyserNode (see window.__beatsViz). */
  #nav li { position: relative; }
  #nav-beats-viz {
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    width: 100%;
    height: 10px;
    display: block;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity .25s ease;
    background: transparent;
  }
  body.beats-playing #nav-beats-viz {
    opacity: 1;
    pointer-events: auto;
  }
  /* While music is playing, the audio-reactive strip *replaces* the
     yellow active-section underline under the Beats nav item. The
     underline reappears as soon as the player is paused/ended. */
  body.beats-playing #nav a[href="#beats"].active {
    border-bottom-color: transparent;
  }

  /* ═══ HERO ════════════════════════════════════════════════ */
  #hero {
    position: relative;
    height: 719px;
    overflow: hidden;
  }
  #hero video, #hero .hero-poster {
    position: absolute;
    inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  #hero .hero-poster {
    transition: opacity 0.6s ease;
  }
  #hero .hero-poster.hidden {
    opacity: 0;
    pointer-events: none;
  }
  /* 100px gradient at very bottom fading to background */
  #hero-grad {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
    z-index: 2; pointer-events: none;
  }
  /* Hero content layer – matches Figma absolute layout exactly */
  #hero-layer {
    position: absolute;
    inset: 0; z-index: 3;
  }
  #hq  { /* opening quote mark */
    position: absolute;
    left: 159px; top: 216px;
    width: 40px;
  }
  #hh  { /* main headline */
    position: absolute;
    left: 192px; top: 231px;
    font-family: 'Hanuman', serif;
    font-weight: 900;
    font-size: clamp(34px, 6.2vw, 80px); line-height: 1.1;
    color: var(--yellow);
    text-transform: uppercase;
    width: clamp(500px,58vw,853px);
  }
  #hn  { /* "Hi, I'm Ozan" */
    position: absolute;
    left: 192px; top: 463px;
    font-family: 'Hanuman', serif;
    font-weight: 900; font-size: clamp(20px, 2.6vw, 30px);
    color: var(--white); text-transform: uppercase;
  }
  #hr2 { /* role */
    position: absolute;
    left: 192px; top: 507px;
    font-family: 'Hanuman', serif;
    font-weight: 900; font-size: clamp(16px, 1.8vw, 20px);
    color: var(--white);
  }
  #hdesc { /* short description */
    position: absolute;
    left: 192px; top: 546px;
    font-size: 16px; line-height: 1.33;
    color: var(--white); width: 336px;
  }
  #hcta { /* "Let's Talk" CTA button */
    position: absolute;
    left: 192px; top: 624px;
    display: inline-block;
    padding: 12px 28px;
    background: var(--yellow);
    color: var(--bg);
    font-family: 'Golos Text', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 8px;
    transition: background .2s, color .2s, transform .15s;
  }
  #hcta:hover {
    background: var(--white);
    transform: translateY(-2px);
  }
  #hphoto { /* circular profile photo */
    position: absolute;
    right: max(24px, calc(50% - 450px)); top: 315px;
    width: clamp(180px, 14vw, 260px); height: clamp(180px, 14vw, 260px);
    border-radius: 50%; overflow: hidden;
    border: clamp(4px, 0.31vw, 6px) solid var(--yellow);
    background: var(--yellow);
  }
  .hphoto-frame {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.25s ease;
  }
  /* Outgoing frame: stays fully opaque with no transition so the
     background never shows through during the crossfade. */
  .hphoto-frame.hphoto-prev   { opacity: 1; z-index: 1; transition: none; }
  /* Incoming frame: fades in on top of the prev frame. */
  .hphoto-frame.hphoto-active { opacity: 1; z-index: 2; }


  /* ═══ CENTERED BROKEN GRID ════════════════════════════════
     Content column: ~900px centred, creating ~190px margins
     at 1280px viewport — matches Figma's broken-grid feel.
  ══════════════════════════════════════════════════════════ */
  .g {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 0;
  }

  /* ═══ SHARED TOKENS ═══════════════════════════════════════ */
  .badge {
    display: inline-block;
    padding: 5px 10px;
    background: var(--teal);
    font-family: 'PT Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--label-bg); text-transform: uppercase;
  }
  .badge-y { background: var(--yellow); }

  .title {
    font-family: 'Hanuman', serif;
    font-weight: 900;
    font-size: clamp(32px, 4.2vw, 50px);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--white);
  }
  .testi-inner .badge {
    margin-top: 0;
  }
  .testi-inner .title {
    margin-top: 60px;
    font-size: clamp(22px, 2.4vw, 30px);
  }
  .body-text { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.33; color: var(--white); }
  .ybar { height: 5px; background: var(--yellow); }

  /* ═══ SECTION SPACING ══════════════════════════════════ */
  .section { padding: 90px 0; }

  /* ═══ ABOUT + IMPACT — broken-grid combined block ════════ */
  #about {
    position: relative;
  }
  /* Tall vertical palm photo — absolutely positioned on left */
  .aib-photo {
    position: absolute;
    left: calc(50% - 456px);
    top: 440px;
    width: 575px;
    z-index: 0;
  }
  .aib-photo img {
    width: 100%; height: auto;
    display: block;
  }
  /* Centered content column — sits above the photo */
  .aib-content {
    position: relative; z-index: 2;
    max-width: 900px; margin: 0 auto;
    padding: 150px 0 100px;
  }
  /* About top grid: years counter column (left) + text column (right) */
  .aib-about {
    display: grid;
    grid-template-columns: 399px 1fr;
    padding-bottom: 150px;
  }
  .aib-years {
    padding-left: 226px;
    text-align: center;
  }
  .aib-years span:first-child {
    display: block;
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: clamp(46px, 6vw, 80px); line-height: 1; color: var(--yellow);
  }
  .aib-years span:last-child {
    display: block;
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: 20px; color: var(--white);
  }
  .aib-about-r { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
  .aib-about-r > .aib-body-wrap,
  .aib-about-r > .ybar,
  .aib-about-r > .skills-cols { width: 100%; }
  .aib-body-wrap { display: flex; flex-direction: column; gap: 40px; }
  .skills-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  }
  .skill {
    font-family: 'Golos Text', sans-serif;
    font-weight: 500; font-size: 16px; color: var(--white);
    line-height: 1.33;
    list-style: disc; margin-left: 24px;
    margin-bottom: 15px;
  }
  .skill:last-child { margin-bottom: 0; }
  /* Impact sub-section — indented to align with years counter */
  .aib-impact {
    padding-left: 226px;
    display: flex; flex-direction: column; gap: 20px;
    align-items: flex-start;
  }
  .aib-impact > .title,
  .aib-impact > .body-text,
  .aib-impact > .stats-row { width: 100%; }
  .aib-impact > .stats-row { margin-top: 40px; }
  /* Stats row */
  .stats-row { display: flex; gap: 55px; justify-content: center; white-space: nowrap; }
  .stat { flex: 1; text-align: center; }
  .stat b {
    display: block;
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: clamp(32px, 4vw, 50px); color: var(--yellow);
  }
  .stat em {
    display: block; font-style: normal;
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: 20px; color: var(--white);
  }
  .stat small {
    display: block;
    font-family: 'PT Mono', monospace; font-weight: 700;
    font-size: 16px; color: var(--white);
  }
  /* ═══ CASE STUDIES ════════════════════════════════════════ */
  #work { padding-top: 200px; }
  .work-hdr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    align-items: start;
    margin-bottom: 50px;
  }
  .work-hdr .badge {
    grid-column: 1;
    justify-self: end;
    margin-bottom: 8px;
  }
  .work-hdr-row {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 40px; align-items: end;
  }
  .work-hdr .title {
    margin: 0;
    text-align: right;
    justify-self: end;
  }
  .work-hdr-row .body-text {
    padding-bottom: 15px;
  }

  .cards-wrap { display: flex; flex-direction: column; gap: 60px; }
  .cards-lg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 30px; }
  .cards-sm { display: grid; grid-template-columns: repeat(3,1fr); column-gap: 20px; row-gap: 30px; }

  .cc {
    display: flex; flex-direction: column; gap: 14px;
    cursor: pointer; transition: transform .2s ease;
  }
  .cc:hover { transform: translateY(-2px); }
  /* .ci-wrap is the positioned containing block for the absolutely
     positioned .ci-inner overlay. On mobile we set display:contents
     so .ci and .ci-inner promote into flex children of .cc, making
     the badge + title sit BELOW the image (Figma 167:1406). */
  .ci-wrap { position: relative; display: block; }
  .ci {
    position: relative; background: #111; overflow: hidden;
    flex-shrink: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    aspect-ratio: 16 / 9; height: auto;
  }
  .ci-inner {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 14px 18px 16px;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  }
  /* Card category badge — uses the canonical .badge token so ALL
     labels (teal or yellow) share identical font / weight / size /
     padding everywhere on the site. Only differences are bg color
     (yellow) and being inline-block inside the card stack. */
  .cc-cat {
    display: inline-block; padding: 5px 10px;
    background: var(--yellow);
    font-family: 'PT Mono', monospace; font-weight: 700;
    font-size: 14px; line-height: 1.2;
    color: var(--label-bg); text-transform: uppercase;
  }
  .cc-title {
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: 16px; color: var(--white); line-height: 1.1;
  }
  .cc.lg .cc-title { font-size: 26px; }
  .cc-desc {
    padding: 0 18px; margin: 0;
    font-family: 'Golos Text', sans-serif;
    font-size: 14px; line-height: 1.35; color: var(--white);
  }
  .cc-link {
    display: flex; align-items: center; gap: 8px;
    padding: 0 18px 2px;
    font-family: 'Golos Text', sans-serif; font-weight: 500;
    font-size: 12px; line-height: 1.2; color: var(--yellow); text-decoration: none;
    text-transform: uppercase; cursor: pointer; width: fit-content;
  }
  .cc-link svg { width: 18px; height: 18px; }
  .cc:hover .cc-link { opacity: .75; }

  /* ═══ CASE STUDY MODAL ════════════════════════════════════════ */
  #cs-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.85);
    display: none; padding: 5vh 20px;
    overflow-y: auto;
  }
  #cs-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
  #cs-modal-panel {
    display: flex; flex-direction: column;
    width: 100%; max-width: 900px; height: 90vh;
    background: var(--bg); border-radius: 4px; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,.5);
  }
  #cs-modal-hdr {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 30px;
    background: #1e1e1e; border-bottom: 1px solid #2a2a2a;
  }
  #cs-modal-title {
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: 24px; line-height: 1.2; color: var(--white);
    margin: 0; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #cs-modal-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  #cs-modal-dl {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; background: var(--yellow); color: var(--label-bg);
    font-family: 'PT Mono', monospace; font-weight: 700;
    font-size: 14px; text-transform: uppercase; text-decoration: none;
    border: none; cursor: pointer; border-radius: 2px;
  }
  #cs-modal-dl[aria-disabled="true"] { opacity: .35; pointer-events: none; }
  #cs-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--white); font-size: 28px; line-height: 1;
    padding: 4px 10px; font-family: 'Golos Text', sans-serif;
  }
  #cs-modal-close:hover { opacity: .7; }
  #cs-modal-body {
    flex: 1; overflow-y: auto; background: #0a0a0a;
    display: flex; flex-direction: column;
  }
  #cs-modal-frame {
    flex: 1; width: 100%; min-height: 600px; border: none;
    background: #fff;
  }
  #cs-modal-empty {
    display: none;
    padding: 60px 30px; text-align: center;
    font-family: 'Golos Text', sans-serif; font-size: 16px; line-height: 1.5;
    color: rgba(255,255,255,.6);
  }
  body.cs-modal-open { overflow: hidden; }

  /* ═══ LEGAL MODAL (Impressum / Datenschutz) ════════════════ */
  #legal-modal {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(0,0,0,.85);
    display: none; padding: 5vh 20px;
    overflow-y: auto;
  }
  #legal-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
  body.legal-modal-open { overflow: hidden; }
  #legal-modal-panel {
    display: flex; flex-direction: column;
    width: 100%; max-width: 720px; max-height: 90vh;
    background: var(--bg); border-radius: 4px; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,.5);
  }
  #legal-modal-hdr {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 30px;
    background: #1e1e1e; border-bottom: 1px solid #2a2a2a;
  }
  #legal-modal-title {
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: 22px; line-height: 1.2; color: var(--white); margin: 0;
  }
  #legal-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--white); font-size: 28px; line-height: 1;
    padding: 4px 10px; font-family: 'Golos Text', sans-serif;
    flex-shrink: 0;
  }
  #legal-modal-close:hover { opacity: .7; }
  #legal-modal-body {
    flex: 1; overflow-y: auto;
    padding: 36px 40px;
  }
  .legal-content h2 {
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: 22px; color: var(--yellow);
    margin: 0 0 6px;
  }
  .legal-content h3 {
    font-family: 'Golos Text', sans-serif; font-weight: 700;
    font-size: 13px; color: var(--white);
    margin: 28px 0 8px; text-transform: uppercase; letter-spacing: .07em;
  }
  .legal-content p, .legal-content li {
    font-family: 'Golos Text', sans-serif; font-size: 14px;
    line-height: 1.75; color: rgba(255,255,255,.65);
    margin-bottom: 8px;
  }
  .legal-content ul { padding-left: 20px; margin-bottom: 10px; }
  .legal-content address { font-style: normal; }
  .legal-note {
    margin-top: 32px; padding: 14px 18px;
    background: rgba(248,209,66,.07);
    border-left: 3px solid var(--yellow);
    border-radius: 2px;
    font-family: 'Golos Text', sans-serif;
    font-size: 13px; color: rgba(255,255,255,.4);
    line-height: 1.6;
  }

  /* ═══ TESTIMONIALS ════════════════════════════════════════ */
  #testimonials { margin-top: 30px; }
  #testi {
    position: relative;
    overflow: hidden;
    background-color: var(--bg);
    background-image: image-set(url('/figmaAssets/palms-grid-breaker-2.webp') type('image/webp'), url('/figmaAssets/palms-grid-breaker-2.jpg') type('image/jpeg'));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1680px 480px;
    padding: 20px 0 110px;
  }
  .testi-inner {
    position: relative; z-index: 2;
    max-width: 900px; margin: 0 auto 60px;
  }
  .testi-inner .badge { margin-top: 10px; }
  .testi-inner .title { margin-top: 60px; }
  #testimonials .testi-inner + #testi-carousel { margin-top: 50px; }
  #testi-carousel {
    position: relative; z-index: 2;
    width: 100%; max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  #testi-track {
    display: flex; gap: 40px;
    will-change: transform;
    transition: transform .85s cubic-bezier(.6,.05,.4,1);
  }
  #testi-track.no-anim { transition: none; }
  .tcard {
    flex: 0 0 567px;
    display: flex; flex-direction: column; gap: 20px;
    opacity: .5;
    transition: opacity .6s ease;
  }
  .tcard.is-active { opacity: 1; }
  .tc-q {
    font-family: 'Hanuman', serif; font-weight: 700;
    font-size: 20px; line-height: 1.4; color: var(--white);
    margin: 0;
  }
  .tc-auth { display: flex; align-items: center; gap: 16px; }
  .tc-ava {
    width: 60px; height: 60px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
  }
  .tc-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
  .tc-nm  {
    font-family: 'Golos Text', sans-serif; font-weight: 700;
    font-size: 16px; color: var(--yellow);
  }
  .tc-ttl {
    font-family: 'Golos Text', sans-serif; font-weight: 400;
    font-size: 16px; color: var(--yellow);
  }
  /* ═══ THOUGHT LEADERSHIP (Figma frame 62:53) ═══════════ */
  #thought {
    position: relative; overflow: hidden;
    background: #14110e;
    padding: 120px 0 160px;
  }
  #thought-bg-r {
    position: absolute;
    width: 1098px;
    height: 1120px;
    left: 50%;
    top: 122px;
    transform: translateX(-50%);
    opacity: 1;
    z-index: 0;
  }
  .bokeh-1 {
    position: absolute; border-radius: 50%; pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(253,68,191,.13) 0%, transparent 70%);
    width: 500px; height: 500px; top: 25%; left: 0;
  }
  .bokeh-2 {
    position: absolute; border-radius: 50%; pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(25,185,219,.2) 0%, transparent 70%);
    width: 380px; height: 380px; top: 0; right: 4%;
  }
  .bokeh-label {
    position: absolute;
    z-index: 20;
    font-family: 'PT Mono', monospace;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }
  .bokeh-label.bokeh-label-1 { top: 50%; left: 250px; }
  .bokeh-label.bokeh-label-2 { top: 50%; right: 190px; transform: translate(50%, -50%); }

  .thought-inner {
    position: relative; z-index: 5;
    width: min(1018px, calc(100% - 48px));
    margin: 0 auto;
    height: 920px;
  }
  /* display:contents on desktop (cards anchor to .thought-inner);
     turns into a real 2-column grid in the mobile media query below. */
  .th-cards-mobile { display: contents; }
  .th-card {
    position: absolute;
    display: block;
    text-decoration: none;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .th-card img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
  }
  .th-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(0,0,0,.55);
    filter: brightness(1.05);
  }
  .th-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(0,0,0,.55);
    filter: brightness(1.05);
    outline: 3px solid var(--yellow);
    outline-offset: 3px;
  }
  .th-card-1 { left: 121px; top: 452px; width: 271px; height: 361px; }
  .th-card-2 { left: 409px; top: 617px; width: 147px; height: 196px; }
  .th-card-3 { left: 573px; top: 615px; width: 147px; height: 196px; }
  .th-card-4 { left: 737px; top: 612px; width: 147px; height: 196px; }

  .th-text {
    position: absolute;
    left: 442px; top: 272px; width: 442px;
    color: var(--white);
    display: flex; flex-direction: column; gap: 25px;
    align-items: flex-start;
  }
  .th-text .badge { margin: 0; }
  .th-text .title {
    margin: 0;
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: 50px; line-height: 1.33; text-transform: uppercase;
    color: var(--white);
  }
  .th-text .body-text {
    margin: 0;
    font-family: 'Golos Text', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 1.33; color: var(--white);
  }

  .th-more {
    position: absolute;
    left: 442px; top: 893px;
    display: inline-flex; flex-direction: column; gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .th-more:hover {
    opacity: .85; transform: translateY(-1px);
  }
  .th-more:focus-visible {
    opacity: .85; transform: translateY(-1px);
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
    border-radius: 2px;
  }
  .th-more-label {
    font-family: 'Golos Text', sans-serif; font-weight: 500;
    font-size: 16px; line-height: 1.33;
    color: var(--yellow);
  }
  .th-more-logo {
    display: block;
    height: 15px;
    width: auto;
    max-width: none;
    max-height: none;
    image-rendering: auto;
    object-fit: contain;
  }

  /* ═══ BEATS ═══════════════════════════════════════════════ */
  #beats {
    position: relative; overflow: hidden;
    padding: 80px 0 100px;
  }
  #beats-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    filter: blur(6px) brightness(.4); transform: scale(1.08);
  }
  #beats-grad {
    position: absolute; inset: 0;
    background:
      linear-gradient(to bottom, var(--bg) 0%, transparent 18%),
      linear-gradient(to top,    var(--bg) 0%, transparent 25%);
  }
  .beats-inner {
    position: relative; z-index: 5;
    max-width: 1100px; margin: 0 auto;
    padding: 0 60px;
  }

  /* ─── MP3 PLAYER ─────────────────────────────────── */
  #player {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    width: 100%;
    margin-top: 80px;
  }
  #player-left {
    flex: 0 0 auto;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0;
  }
  #player-left .title { margin-top: 20px; margin-bottom: 20px; text-align: right; }
  #player-desc {
    margin-bottom: 40px;
    text-align: right;
    color: rgba(255,255,255,0.75);
    font-family: 'Golos Text', sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
  #player-controls {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  #player-controls button {
    background: var(--yellow);
    border: none;
    cursor: pointer;
    color: var(--bg);
    width: 31px; height: 31px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 2px;
    transition: background .15s;
  }
  #player-controls button:hover { background: var(--white); }
  #player-controls button svg { width: 18px; height: 18px; display: block; }
  #btn-play svg { width: 18px; height: 18px; }
  #player-title {
    margin-top: 16px;
    font-family: 'Hanuman', serif; font-weight: 900;
    font-size: 20px;
    color: var(--yellow);
    line-height: 1.15;
    text-transform: uppercase;
    text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }
  #player-more {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  #player-more-label {
    font-family: 'Golos Text', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--yellow);
  }
  #player-more-links {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  #player-more-links a {
    display: flex;
    align-items: center;
    opacity: 0.75;
    transition: opacity .15s;
  }
  #player-more-links a:hover { opacity: 1; }
  #player-more-links img { display: block; height: 10px; width: auto; }
  #player-right {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
  }
  #tilt-zone {
    position: relative;
    display: flex;
    align-items: center;
    will-change: transform;
    transform-style: preserve-3d;
  }
  #player-vinyl {
    position: absolute;
    left: 77px;
    top: 50%;
    transform: translateY(-50%);
    width: 340px; height: 340px;
    border-radius: 50%;
    z-index: 1;
    display: block;
    pointer-events: none;
  }
  #player-cover-stack {
    position: relative;
    width: 340px; height: 340px;
    flex-shrink: 0;
    z-index: 2;
    overflow: hidden;
  }
  #player-cover {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    background: #1a1510;
  }
  #player-visualizer {
    position: absolute;
    bottom: 45px; left: 20px; right: 20px;
    width: calc(100% - 40px);
    height: 80px;
    pointer-events: none;
    display: block;
  }
  #player-progress-bar {
    position: absolute;
    bottom: 20px; left: 20px; right: 20px;
    width: calc(100% - 40px); height: 5px;
    background: rgba(255,255,255,.25);
    cursor: pointer;
    z-index: 3;
  }
  #player-progress-fill {
    height: 100%;
    background: var(--yellow);
    width: 0%;
    pointer-events: none;
  }
  #player-error {
    margin-top: 40px; padding: 30px; text-align: center;
    color: rgba(255,255,255,.5);
    font-family: 'Golos Text', sans-serif; font-size: 16px;
  }


  /* ═══ CONTACT ════════════════════════════════════════════ */
  @keyframes contact-pulse {
    0%   { box-shadow: inset 0 0 0 0 rgba(25,185,219,0); }
    25%  { box-shadow: inset 0 0 0 3px rgba(25,185,219,.55); }
    70%  { box-shadow: inset 0 0 0 3px rgba(25,185,219,.25); }
    100% { box-shadow: inset 0 0 0 0 rgba(25,185,219,0); }
  }
  #contact {
    padding: 100px 0 90px;
    text-align: center;
  }
  #contact.cta-highlight {
    animation: contact-pulse 1.2s ease-out forwards;
  }
  #contact .badge { margin-bottom: 22px; }
  #contact .title { margin-bottom: 20px; }
  #contact .body-text { max-width: 520px; margin: 0 auto 44px; opacity: .8; }
  .cta-row {
    display: flex; justify-content: center; align-items: center;
    gap: 20px; flex-wrap: wrap;
  }
  .btn-cta {
    display: inline-block;
    padding: 16px 40px;
    background: var(--yellow);
    font-family: 'Golos Text', sans-serif; font-weight: 700;
    font-size: 16px; color: var(--label-bg);
    text-decoration: none; text-transform: uppercase;
    letter-spacing: .04em;
    transition: opacity .2s, transform .15s;
  }
  .btn-cta:hover { opacity: .85; transform: translateY(-2px); }
  .btn-cta-ghost {
    display: inline-block;
    padding: 14px 38px;
    border: 2px solid var(--teal);
    font-family: 'Golos Text', sans-serif; font-weight: 700;
    font-size: 16px; color: var(--teal);
    text-decoration: none; text-transform: uppercase;
    letter-spacing: .04em;
    transition: opacity .2s, transform .15s;
  }
  .btn-cta-ghost:hover { opacity: .75; transform: translateY(-2px); }

  /* ═══ FOOTER ══════════════════════════════════════════════ */
  #footer {
    max-width: 900px; margin: 0 auto;
    padding: 44px 0 36px;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  #footer img,
  #footer .footer-logo { height: 28px; width: auto; opacity: .45; flex-shrink: 0; }
  #footer p   { font-size: 13px; color: rgba(255,255,255,.3); }
  #footer-right {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 8px;
  }
  #footer-legal {
    display: flex; align-items: center; gap: 12px;
  }
  #footer-legal span {
    font-size: 13px; color: rgba(255,255,255,.2);
    line-height: 1; user-select: none;
  }
  .legal-link {
    background: none; border: none; cursor: pointer;
    font-family: 'Golos Text', sans-serif; font-size: 13px;
    color: rgba(255,255,255,.35); padding: 0;
    text-decoration: none; text-underline-offset: 3px;
    transition: color .2s;
  }
  .legal-link:hover, .legal-link:focus-visible {
    color: rgba(255,255,255,.75);
    text-decoration: underline;
  }

  /* ─── Mobile-only CTA pill in header ────────────────────── */
  #hdr-cta-mobile {
    display: none; /* hidden on desktop; shown via 980px media query */
    font-family: 'Golos Text', sans-serif;
    font-weight: 700;
    color: var(--bg);
    background: var(--yellow);
    padding: 8px 16px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, background .2s;
  }
  #hdr-cta-mobile:hover { background: var(--white); }
  #hdr.scrolled #hdr-cta-mobile {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* ─── Phone-only header cluster (base, hidden) ──────────────
     The portrait button + mini-strip canvas exist in the markup at
     all viewport sizes so the JS doesn't have to mount/unmount them
     on resize, but they are display:none above 640px. The matching
     "shown" rules live inside the @media (max-width: 640px) block
     further below. */
  #hdr-portrait-btn {
    display: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  #hdr-portrait-btn picture,
  #hdr-portrait-btn img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    border-radius: inherit;
  }
  #hdr-beats-viz {
    display: none;
    width: 60px; height: 14px;
    cursor: pointer;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  body.beats-playing #hdr-beats-viz {
    opacity: 1;
    pointer-events: auto;
  }

  /* ─── Mobile menu overlay (base, hidden) ────────────────────
     Built into the DOM at all sizes; the @media (max-width: 640px)
     block below switches it on. The .is-open class is applied by
     JS to fade in the backdrop and slide the panel down. */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  #mobile-menu { display: none; }
  body.menu-open { overflow: hidden; }

  /* ─── Slider dot indicators (base styles; rendered always but
         hidden by display:none off-mobile via the slider container).
         Placed BELOW each slider by JS as a sibling element. */
  .slider-dots {
    display: none; /* turned on inside ≤640 block */
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  .slider-dots button {
    width: 8px; height: 8px; border-radius: 50%;
    border: 0; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, .25);
    transition: background .2s ease, transform .2s ease, width .2s ease;
  }
  .slider-dots button.is-active {
    background: var(--yellow);
    width: 22px;
    border-radius: 4px;
  }

  /* ─── Slider prev/next arrow buttons ────────────────────
     The JS slider IIFE wraps each scroller in `.slider-wrap`
     and injects two floating arrow buttons inside it. Hidden
     above the phone breakpoint; shown ≤640px for one-handed
     navigation. Native <button> = keyboard-focusable, Enter/
     Space activate them automatically. */
  .slider-wrap { position: relative; }
  .slider-arrow {
    display: none; /* turned on inside ≤640 block */
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 17, 14, 0.7);
    color: #fff;
    cursor: pointer;
    z-index: 5;
    transition: background .2s ease, opacity .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .slider-arrow svg { width: 20px; height: 20px; display: block; }
  .slider-arrow-prev { left: 4px; }
  .slider-arrow-next { right: 4px; }
  .slider-arrow:hover { background: rgba(20, 17, 14, 0.9); }
  .slider-arrow:active { transform: translateY(-50%) scale(0.94); }
  .slider-arrow:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
  }
  .slider-arrow[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  /* ─── Tablet breakpoint: hero stacks, type shrinks ──────── */
  @media (max-width: 1180px) and (min-width: 981px) {
    #hero { height: auto; }
    #hero-layer {
      position: relative; inset: auto;
      padding: 100px 60px 70px;
      display: flex; flex-direction: column;
    }
    #hq, #hh, #hn, #hr2, #hdesc, #hcta {
      position: relative; left: auto; top: auto; right: auto; width: auto;
    }
    #hphoto {
      position: absolute;
      right: 60px; top: 100px;
      width: clamp(120px, 12vw, 160px);
      height: clamp(120px, 12vw, 160px);
    }
    #hq { width: 28px; margin-bottom: -8px; }
    #hh {
      font-size: clamp(48px, 5.8vw, 68px);
      line-height: 1.1;
      margin: 4px 0 22px;
      width: calc(100% - clamp(150px, 16vw, 210px));
    }
    #hn  { font-size: clamp(20px, 2.8vw, 26px); }
    #hr2 { font-size: 17px; margin: 6px 0; }
    #hdesc { font-size: 15px; width: auto; max-width: 380px; margin-top: 8px; }
    #hcta {
      position: relative;
      left: auto;
      top: auto;
      margin-top: 22px;
      display: inline-block;
      padding: 12px 28px;
      width: auto;
      min-width: 0;
      white-space: nowrap;
      align-self: flex-start;
    }
    .cards-lg { grid-template-columns: 1fr; }
    .cards-sm { grid-template-columns: 1fr 1fr; }
  }

  /* ═══════════════════════════════════════════════════════════
     MOBILE — ≤980px
     Single consolidated block. Desktop rules are untouched above.
     Every rule here is scoped inside this query; nothing bleeds up.
  ══════════════════════════════════════════════════════════ */
  @media (max-width: 980px) {

    /* ── Header ─────────────────────────────────────────── */
    /* Fixed bar on mobile; nav hidden; CTA pill fades in on scroll */
    #hdr {
      position: fixed;
      top: 0; left: 0; right: 0;
      padding: 12px 20px;
      background: transparent;
      transition: background 0.4s;
    }
    #hdr-cta-mobile { display: block; padding: 8px 16px; font-size: 13px; }
    #nav { display: none; }

    /* ── Hero ────────────────────────────────────────────── */
    /* All hero elements become relative flow inside a flex column */
    #hero { height: auto; }
    #hero-layer {
      position: relative; inset: auto;
      padding: 100px 24px 60px;
      display: flex; flex-direction: column;
    }
    #hq, #hh, #hn, #hr2, #hdesc, #hcta, #hphoto {
      position: relative; left: auto; top: auto; right: auto; width: auto;
    }
    #hq   { width: 28px; margin-bottom: 6px; }
    #hh   { font-size: clamp(34px, 8.5vw, 58px); line-height: 1.08; margin: 0 0 20px; }
    #hn   { font-size: clamp(17px, 4.5vw, 24px); }
    #hr2  { font-size: 15px; margin: 6px 0; }
    #hdesc{ font-size: 15px; width: auto; margin-top: 10px; max-width: 380px; }
    #hcta {
      margin-top: 28px;
      display: inline-block;
      padding: 12px 28px;
      font-size: 15px;
      width: auto; min-width: 0;
      white-space: nowrap;
      align-self: flex-start;
    }
    #hphoto { display: none; }
    video, .hero-poster { opacity: .5; }

    /* ── Section containers — uniform side padding ───────── */
    .g, .testi-inner, .thought-inner, .beats-inner { padding-left: 22px; padding-right: 22px; }

    /* ── About + Impact (tablet 641-980px) ───────────────────
       Phone layout below (≤640) overrides everything in this
       block; rules here apply only in the 641-980 range. */
    .aib-photo   { display: none; }
    .aib-content { padding: 60px 22px; }
    .aib-about   { grid-template-columns: 1fr; padding-bottom: 50px; }
    .aib-years   { padding-left: 0; text-align: left; display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
    .aib-impact  { padding-left: 0; }
    .skills-cols { grid-template-columns: 1fr; }

    /* ── Stats (tablet) ───────────────────────────────────── */
    .stats-row { flex-direction: column; gap: 20px; justify-content: flex-start; align-items: flex-start; }
    .stat { text-align: left; }

    /* ── Case Studies ────────────────────────────────────── */
    #work { padding-top: 80px; }
    .work-hdr-row { grid-template-columns: 1fr; gap: 20px; }
    .work-hdr .badge { align-self: flex-start; justify-self: start; }
    .work-hdr .title { text-align: left; justify-self: start; }
    .work-hdr-row .body-text { padding-bottom: 0; }
    .cards-lg { grid-template-columns: 1fr; }
    .cards-sm { grid-template-columns: 1fr 1fr; }

    /* ── Testimonials ────────────────────────────────────────
       Per Figma 168:1648 the section begins with a ~80px dark
       band that holds only the badge; the turquoise/palms
       transition sits BETWEEN badge and title. So pull the
       section's top padding way down and zero the badge's own
       top margin so the label sits firmly inside the dark
       band and never bleeds into the turquoise. */
    #testi { padding: 24px 0 80px; }
    .testi-inner { margin-bottom: 40px; padding: 0 24px; }
    .testi-inner .badge { margin-top: 0; }
    /* +30px on top of the previous 40px gap so the H2 sits well
       below the dark→turquoise colour transition (70px total). */
    .testi-inner .title { margin-top: 70px; }
    .tcard { flex-basis: min(86vw, 480px); }
    .tc-q { font-size: 17px; }
    #testi-track { gap: 28px; }
    .testi-grid { grid-template-columns: 1fr; }
    .tc.dim { display: none; }

    /* ── Thought Leadership ──────────────────────────────── */
    #thought { padding: 70px 0 90px; }
    #thought-bg-r {
      width: 100%; height: 100%;
      left: 0; top: 0;
      transform: none;
      object-fit: cover; object-position: left top;
      opacity: .45;
    }
    .thought-inner { width: calc(100% - 44px); height: auto; grid-template-columns: 1fr; }
    .th-text { position: relative; left: auto; top: auto; width: 100%; gap: 18px; margin-bottom: 40px; padding-top: 0; }
    .th-card,
    .th-card-1, .th-card-2, .th-card-3, .th-card-4 { position: relative; left: auto; top: auto; }
    .th-cards-mobile {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px; margin-bottom: 32px;
    }
    .th-card-1 { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 271 / 361; }
    .th-card-2, .th-card-3, .th-card-4 { width: 100%; height: auto; aspect-ratio: 147 / 196; }
    .th-card-4 { grid-column: 1 / -1; max-width: 50%; justify-self: start; }
    .th-more { position: relative; left: auto; top: auto; }

    /* ── Writing / art row ───────────────────────────────── */
    .art-lg  { width: 100%; }
    .art-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    .art-sm  { flex: 0 0 clamp(120px, 38vw, 180px); min-width: 0; }

    /* ── Beats player ────────────────────────────────────── */
    /* Stack column; flip right-aligned desktop text to left-aligned */
    #player             { flex-direction: column; gap: 32px; align-items: flex-start; }
    #player-left        { max-width: 100%; align-items: flex-start; }
    #player-left .title { text-align: left; margin-top: 12px; margin-bottom: 12px; }
    #player-desc        { text-align: left; margin-bottom: 20px; }
    #player-controls    { justify-content: flex-start; }
    #player-title       { text-align: left; white-space: normal; }
    #player-more        { align-items: flex-start; margin-top: 32px; }
    #player-right       { width: 100%; justify-content: flex-start; }
    #player-vinyl       { display: none; }
    #player-cover-stack { width: min(280px, 80vw); height: min(280px, 80vw); }

    /* ── Contact ─────────────────────────────────────────── */
    #contact { padding: 70px 22px 70px; }
    #contact .body-text { max-width: 100%; }
    .cta-row { flex-direction: column; gap: 14px; }
    .btn-cta, .btn-cta-ghost { width: 100%; text-align: center; }

    /* ── Footer ──────────────────────────────────────────── */
    #footer {
      flex-direction: column;
      gap: 16px;
      text-align: center;
      padding: 36px 22px;
    }
    #footer-right { align-items: center; }
    #footer-legal { justify-content: center; }

    /* ── Spectacles ──────────────────────────────────────── */
    .spec { display: block; opacity: 0.525; }
  }

  /* ═══════════════════════════════════════════════════════════
     PHONE PASS — ≤640px (Figma frame 139:138)
     New mobile-specific design: portrait-as-menu-trigger header,
     header mini-visualizer, full-screen menu overlay, snap sliders
     for case studies and Medium cards, tighter typography. Comes
     AFTER the 980 block so all overrides win on cascade order.
  ══════════════════════════════════════════════════════════ */
  @media (max-width: 640px) {

    /* ── Header: transparent over the hero, portrait+viz on the
       right. The header never paints its own dark background on
       phone — the hero artwork shows through. The global
       #hdr.scrolled rule (defined above) still adds a subtle dark
       wash once the user scrolls past the hero, so wordmark + viz
       stay legible against light page sections. */
    /* 20px side gutters; 30px top so the logo / portrait sit
       30px below the top edge of the viewport. The .scrolled
       gradient appears almost immediately (threshold = 30px of
       scroll, see js/main.js#updateHeader) so the bar reads as
       sticky from the very first scroll, with this exact 30px
       breathing room above the content. */
    #hdr {
      justify-content: flex-start;
      gap: 8px;
      padding: 30px 20px 0;
      background: transparent;
      border-bottom: 0;
    }
    /* Restore full hero artwork vibrancy on phones — the parent
       @media (max-width: 980px) block dims hero poster/video to
       opacity:.5 for tablet readability, but on phones the
       header is now transparent and we want the full palm-tree
       photo to show through behind the wordmark + portrait
       (matching the Figma mock for ≤640px). */
    #hero video,
    #hero .hero-poster { opacity: 1; }
    /* Logo height per spec: 40px */
    #logo { height: 40px; }
    /* Old "Let's Talk" pill replaced by portrait button on phones */
    #hdr-cta-mobile { display: none; }
    /* Portrait button per spec: 55x55 (overrides the 36x36 base) */
    #hdr-portrait-btn { display: block; width: 55px; height: 55px; }
    #hdr-beats-viz {
      display: block;
      /* margin-left: auto pushes the viz + portrait pair to the
         right edge. The mobile #hdr uses `gap: 8px`, which still
         applies between flex items even when one has an auto
         margin, so the visible viz→portrait separation is
         (gap 8px) + (margin-right 12px) = 20px per the user spec. */
      margin-left: auto;
      margin-right: 12px;
    }
    /* Anchor scroll offset on phones — header is 30px top
       padding + 40px logo = 70px tall; add a 20px safety so
       section badges sit clearly below the sticky bar. */
    #top, #about, #work, #testimonials, #writing, #beats, #contact {
      scroll-margin-top: 60px;
    }

    /* ── Mobile menu overlay ─────────────────────────────────
       Open: backdrop fades in, panel slides down from the top
       edge (-28px → 0) with a soft easing, then nav links reveal
       in a quick staggered cascade. Total open feel ≈420ms.
       Close: everything snaps back together in 180ms with no
       per-link stagger so dismiss feels instant. The
       prefers-reduced-motion block at the bottom of this media
       query removes all transitions/animations entirely.
    ──────────────────────────────────────────────────────── */
    #mobile-menu {
      display: block;
      position: fixed; inset: 0;
      z-index: 1100;
      background: rgba(20, 17, 14, 0);
      pointer-events: none;
      transition: background .18s ease;
    }
    #mobile-menu.is-open {
      background: rgba(20, 17, 14, 0.985);
      pointer-events: auto;
      transition: background .28s ease;
    }
    #mobile-menu-panel {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      padding: 84px 28px 40px;
      transform: translateY(-28px);
      opacity: 0;
      transition: transform .18s ease-in, opacity .18s ease-in;
    }
    #mobile-menu.is-open #mobile-menu-panel {
      transform: translateY(0);
      opacity: 1;
      /* Friendlier overshoot easing on open; snappy linear-ish on close */
      transition: transform .38s cubic-bezier(.2, .9, .25, 1.15),
                  opacity   .26s ease-out;
    }
    #mobile-menu-close {
      position: absolute; top: 14px; right: 18px;
      background: none; border: 0; cursor: pointer;
      color: var(--white);
      font-family: 'Golos Text', sans-serif;
      font-size: 28px; line-height: 1;
      padding: 8px 12px;
    }
    #mobile-menu-close:hover { color: var(--yellow); }
    #mobile-menu nav ul {
      list-style: none;
      display: flex; flex-direction: column; gap: 22px;
      margin-top: 20px;
      padding: 0;
    }
    #mobile-menu nav a {
      display: inline-block;
      font-family: 'Hanuman', serif; font-weight: 900;
      font-size: 26px; line-height: 1.15;
      color: var(--white);
      text-decoration: none;
      text-transform: uppercase;
      padding-bottom: 4px;
      border-bottom: 2px solid transparent;
      /* Closed/closing state: snap together, no per-link stagger */
      opacity: 0;
      transform: translateY(10px);
      transition: color .2s ease,
                  border-color .2s ease,
                  opacity .14s ease-in,
                  transform .14s ease-in;
    }
    /* Open state: staggered cascade reveal. Each link waits a
       little longer than the one above it. The panel itself takes
       ~120ms to settle, so links start arriving around 140ms. */
    #mobile-menu.is-open nav a {
      opacity: 1;
      transform: translateY(0);
      transition: color .2s ease,
                  border-color .2s ease,
                  opacity .32s ease-out,
                  transform .42s cubic-bezier(.2, .9, .25, 1.1);
    }
    #mobile-menu.is-open nav li:nth-child(1) a { transition-delay: 0s, 0s, .10s, .10s; }
    #mobile-menu.is-open nav li:nth-child(2) a { transition-delay: 0s, 0s, .14s, .14s; }
    #mobile-menu.is-open nav li:nth-child(3) a { transition-delay: 0s, 0s, .18s, .18s; }
    #mobile-menu.is-open nav li:nth-child(4) a { transition-delay: 0s, 0s, .22s, .22s; }
    #mobile-menu.is-open nav li:nth-child(5) a { transition-delay: 0s, 0s, .26s, .26s; }
    #mobile-menu nav a:hover,
    #mobile-menu nav a:focus-visible {
      color: var(--yellow);
      border-bottom-color: var(--yellow);
      outline: none;
    }

    /* Reduced-motion: snap open/close, drop all transitions and
       per-link stagger delays so nothing animates. */
    @media (prefers-reduced-motion: reduce) {
      #mobile-menu,
      #mobile-menu.is-open,
      #mobile-menu-panel,
      #mobile-menu.is-open #mobile-menu-panel,
      #mobile-menu nav a,
      #mobile-menu.is-open nav a {
        transition: none !important;
        transition-delay: 0s !important;
      }
      #mobile-menu-panel { transform: none; }
      #mobile-menu nav a { transform: none; }
    }

    /* ── Hero: phone type & rhythm per user-supplied Figma spec ──
       Spec sheet:
         • Background image height: 580px
         • Side margins: 20px to viewport edge
         • Header logo at 50px from top, 0px gap to hero text
         • Headline "GREAT UX, GREAT GROWTH": 40px
         • Headline → name gap: 20px
         • "Hi, I'm Ozan" (H2): 20px
         • "Product Design Leader & Consultant" subtitle: 15px / 900
         • Body description: 15px
       Header (#hdr) above gives 50px top + 40px logo = 90px.
       Hero-layer top padding = 90px (to clear the header) + 70px
       (the user-requested gap from the logo down to the quote
       mark) = 160px. */
    #hero { height: 580px; }
    /* Strengthen the bottom-of-hero fade so the palm-tree bg
       blends seamlessly into the dark page background — the
       base 100px / single-stop gradient leaves a faintly
       visible bg image edge on the shorter 580px mobile hero. */
    #hero-grad {
      height: 220px;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(20,17,14,0.55) 55%,
        var(--bg) 100%
      );
    }
    #hero-layer { padding: 160px 20px 56px; }
    #hq   { width: 28px; height: auto; margin-bottom: 10px; }
    #hh   { font-size: 40px; line-height: 1.08; margin-bottom: 20px; }
    #hn   { font-size: 20px; line-height: 1.1; }
    #hr2  { font-size: 15px; font-weight: 900; line-height: 1.2; margin: 0; }
    #hdesc{ font-size: 15px; line-height: 1.45; margin-top: 14px; }
    #hcta { font-size: 15px; padding: 13px 28px; margin-top: 28px; }

    /* ── Section content padding ────────────────────────── */
    .g, .testi-inner, .thought-inner, .beats-inner { padding-left: 22px; padding-right: 22px; }

    /* ═══ ABOUT + IMPACT — phone (≤640) per Figma 156:1164 ═══
       Single-column phone layout with full-section palm
       silhouette behind ALL content (no overlay bands).
       .aib-about is rebuilt as a 5-row grid:
         row 1:  ".      badge"     (001 / About pill)
         row 2:  "years  title"     (20+ Years | EMPOWERING TEAMS)
         row 3:  ".      body"
         row 4:  ".      ybar"      (yellow divider)
         row 5:  ".      skills"    (single-column skills list)
       .aib-about-r becomes display:contents so its children
       participate in the parent grid via grid-area names. The
       Impact subsection mirrors badge/title/body then renders a
       horizontal 3-column stats row. Type scale (Figma 156:1164):
       title 30px, body 15px, stat value 30px yellow, stat label
       16px Hanuman 900 white, badge 16px. Section-scoped
       overrides (.aib-about-r > .badge etc.) leave the bare
       .title / .body-text / .badge tokens free for other
       sections (Case Studies, Beats, etc.) that still use the
       generic phone clamp.
    ══════════════════════════════════════════════════════════ */
    #about { overflow-x: hidden; }

    /* ── Palm silhouette: covers full section, left-anchored ──
       The densest fronds sit on the left side of the source
       image, so we anchor object-position there. */
    .aib-photo {
      display: block;
      position: absolute;
      left: 0; top: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      opacity: 0.55;
      pointer-events: none;
      overflow: hidden;
    }
    .aib-photo picture { display: block; width: 100%; height: 100%; }
    .aib-photo img {
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: left center;
      margin: 0;
    }

    /* ── Section padding ─────────────────────────────────── */
    .aib-content { padding: 60px 20px 80px; }

    /* ── About grid: badge / years+title / body / ybar / skills ── */
    .aib-about {
      display: grid;
      grid-template-columns: 84px 1fr;
      grid-template-areas:
        ".      badge"
        "years  title"
        ".      body"
        ".      ybar"
        ".      skills";
      column-gap: 16px;
      row-gap: 22px;
      padding-bottom: 70px;
    }
    /* Promote .aib-about-r's children into the parent grid */
    .aib-about-r { display: contents; }
    .aib-about-r > .badge         { grid-area: badge; }
    .aib-about-r > .title         { grid-area: title; }
    .aib-about-r > .aib-body-wrap { grid-area: body; }
    .aib-about-r > .ybar          { grid-area: ybar; }
    .aib-about-r > .skills-cols   { grid-area: skills; }
    .aib-body-wrap { gap: 20px; }

    /* ── Years counter (left column of row 2) ────────────── */
    .aib-years {
      grid-area: years;
      padding-left: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      margin-bottom: 0;
      align-self: start;
    }
    .aib-years span:first-child {
      color: var(--yellow-primary, #F8D142);
      font-family: Hanuman, serif;
      font-size: 30px;
      font-style: normal;
      font-weight: 900;
      line-height: 133%; /* 39.9px */
      text-transform: uppercase;
    }
    .aib-years span:last-child {
      color: #fff;
      font-family: Hanuman, serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 900;
      line-height: 133%; /* 21.28px */
      margin-top: 4px;
    }

    /* ── Impact subsection ───────────────────────────────── */
    .aib-impact { gap: 18px; }
    .aib-impact > .stats-row { margin-top: 28px; }

    /* ── Stats row: 3 columns horizontal at phone ────────── */
    .stats-row {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 12px;
      justify-content: space-between;
      align-items: flex-start;
      white-space: normal;
    }
    .stat { flex: 1 1 0; min-width: 0; text-align: center; }

    /* ── Type tokens — phone scale ───────────────────────── */
    /* Badges are NOT shrunk on phones — per the design rule, every
       label (.badge teal, .badge-y / .cc-cat yellow) is always the
       same font, weight, size, and padding. Canonical style lives
       on .badge in the desktop block above (PT Mono 700 14px,
       padding 5px 10px). About + Impact badges still need their
       grid alignment overrides on phones. */
    .aib-about-r > .badge,
    .aib-impact > .badge {
      align-self: start;
      justify-self: start;
    }
    /* All H2 section titles share one phone size: 30px / 1.15.
       Per-section overrides below were collapsed into this single
       rule so About, Impact, Case Studies, Testimonials, Thought
       Leadership, Beats and Contact titles stay visually identical.
       The .testi-inner / .th-text selectors are listed explicitly
       to outrank the desktop rules
         `.testi-inner .title { clamp(22px,2.4vw,30px) }`
         `.th-text   .title { 50px }`
       which would otherwise win on specificity inside this query. */
    .title,
    .testi-inner .title,
    .th-text .title { font-size: 30px; line-height: 1.15; }
    /* Body text on mobile: 15px / 133%. Color (white), font-family
       (Golos Text), weight (400), and style (normal) inherit from
       body / base .body-text — no need to redeclare. */
    .body-text { font-size: 15px; line-height: 1.33; }
    .skill { font-size: 15px; line-height: 1.5; margin-bottom: 10px; }
    .stat b { font-size: 30px; line-height: 1.1; }
    /* Stat labels match the "Years" label: Hanuman 900 / 16px /
       133% / white. */
    .stat em {
      color: #fff;
      font-family: Hanuman, serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 900;
      line-height: 133%; /* 21.28px */
    }

    /* ── Case Studies layout ────────────────────────────── */
    /* The 2 large cards stay STACKED vertically — they are the
       hero case studies and need full visual weight on phone.
       Only the 6 small cards become a horizontal scroll-snap
       slider with dot indicators. Negative inline margin lets
       the slider bleed to the screen edge while internal
       padding keeps cards visually centered. */
    /* Spacing per Figma 167:1406 phone spec:
       - 50px between the two stacked big cards (.cards-lg row-gap)
       - 80px between the big-card stack and the small-card
         carousel (.cards-wrap gap). */
    .cards-wrap { gap: 80px; }
    .cards-lg {
      grid-template-columns: 1fr;
      row-gap: 50px;
    }
    /* Carousel: cards start at the section's content edge (same
       left position as the big cards above), so no negative
       margin / edge bleed. Right padding equals the card peek
       so the next card hint shows without exposing dead space. */
    .cards-sm {
      display: flex;
      grid-template-columns: none;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 4px 0 8px;
      margin: 0;
      scrollbar-width: none;
    }
    .cards-sm::-webkit-scrollbar { display: none; }
    .cards-sm > .cc {
      flex: 0 0 78%;
      max-width: 78%;
      scroll-snap-align: start;
    }

    /* ── Case Studies header ─────────────────────────────
       Header alignment goes left via the ≤980 cascade
       (.work-hdr-row 1-col, .work-hdr .title text-align:left,
        justify-self:start). Badge stays the canonical teal. */
    /* 50px below header to match the gap above the first big card. */
    .work-hdr { margin-bottom: 50px; }

    /* ── Card layout (Figma 167:1406, image_1777790854439) ─
       Per the Figma reference, badge + title remain OVERLAID
       on the bottom of the image (.ci-inner is absolutely
       positioned over .ci — same pattern as desktop). The
       description and "VIEW CASE STUDY" link sit BELOW the
       image on the dark card area. The .ci-wrap base styles
       (position:relative; display:block) already provide the
       positioned containing block, so no structural override
       is needed.

       Figma inspector for .ci-inner on phone: padding 15px 30px,
       gap 10px, flex column flex-start. Description and link
       align to the same 30px left edge. */
    /* Image height: Figma frame 137 measures 353×235 for the
       large-card image, so its aspect ratio is taller than the
       desktop 16/9. Override on phones for the lg variant. */
    .cc.lg .ci { aspect-ratio: 353 / 235; }
    .ci-inner {
      padding: 15px 30px;
      gap: 10px;
    }
    /* All card titles (large + small) are 20px on phone.
       Both selectors are listed so this rule matches the
       specificity of the desktop `.cc.lg .cc-title { 26px }`
       rule and actually wins inside the media query. */
    .cc.lg .cc-title,
    .cc .cc-title { font-size: 20px; line-height: 1.15; }
    .cc-desc {
      font-size: 16px; line-height: 1.4;
      padding: 0 30px;
    }
    /* "VIEW CASE STUDY" link per Figma spec on phone:
       Golos Text 500 / 15px / 133% line-height / yellow. */
    .cc-link {
      padding: 0 30px 2px;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.33;
    }

    /* ── Slider dots only on phone ─ arrows are hidden because
       horizontal swipe is the natural mobile interaction. */
    .slider-dots { display: flex; }
    .slider-arrow { display: none; }
    /* `.cards-wrap` flex column has an 80px gap (used for spacing
       above the carousel). The dots paginator should sit only 30px
       below the carousel, so a negative margin-top trims 80→30. */
    .cards-wrap > .slider-dots { margin-top: -50px; }

    /* ── Thought Leadership ─────────────────────────────── */
    /* Night-sky mobile bg fills the section instead of being a
       small centered art block. Subtle dark tint pulls the text
       forward without darkening the artwork too much. */
    #thought {
      margin-top: 30px;
      padding: 80px 0 0;
      background:
        linear-gradient(to bottom, rgba(20,17,14,0.55) 0%, rgba(20,17,14,0.35) 50%, rgba(20,17,14,0.85) 100%),
        #14110e;
    }
    #thought-bg-r {
      position: absolute;
      width: 100%; height: 100%;
      left: 0; top: 0;
      transform: none;
      object-fit: cover; object-position: center;
      opacity: .9;
      z-index: 0;
    }
    .thought-inner {
      width: 100%;
      max-width: none;
      height: auto;
      grid-template-columns: 1fr;
      padding: 0;
    }
    .th-text {
      position: relative; left: auto; top: auto;
      width: 100%;
      gap: 16px;
      margin-bottom: 28px;
      padding: 0 22px;
    }
    /* .th-text .title sizing now inherits the unified 30px mobile
       .title rule above; keep this slot for any future overrides. */
    /* .th-text .body-text inherits the global mobile token (15/1.33). */

    /* Override the 980 block's 2-col grid → horizontal slider.
       Left gutter matches .th-text's 22px so the first card aligns
       with the title/body. 30px between cards. No negative margin
       (no edge bleed). scroll-padding-left keeps snap respecting
       the gutter. */
    .th-cards-mobile {
      display: flex;
      grid-template-columns: none;
      gap: 30px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 22px;
      -webkit-overflow-scrolling: touch;
      padding: 4px 22px 8px;
      margin: 0;
      scrollbar-width: none;
    }
    .th-cards-mobile::-webkit-scrollbar { display: none; }
    /* Per Figma 175:2279 every card is a fixed 200×267 portrait;
       remaining cards peek in as a swipe affordance. */
    .th-card,
    .th-card-1,
    .th-card-2,
    .th-card-3,
    .th-card-4 {
      position: relative;
      left: auto; top: auto;
      flex: 0 0 200px;
      width: 200px;
      max-width: none;
      height: auto;
      aspect-ratio: 200 / 267;
      grid-column: auto;
      justify-self: auto;
      scroll-snap-align: start;
    }
    /* "MORE ON Medium" footer on phone: centered horizontally,
       80px breathing room above and below per Figma 175:2279. */
    .th-more {
      position: relative; left: auto; top: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin: 80px auto;
    }

    /* ── Beats player (Figma 174:2137) ─────────────────────
       Mobile reflow: flatten #player-left with display:contents
       so badge/title/desc/controls/song-title/more all become
       direct flex children of #player. We then use `order:` to
       slot the album cover (#player-right) between the desc and
       the controls. The DOM stays untouched — only CSS reorders.

       Intro text block (badge, title, desc) is right-aligned;
       cover, controls, song title and "MORE ON" footer are all
       centered horizontally. Vertical rhythm is handled with
       per-item margins (gap: 0) so each gap can be tuned. */
    #beats { padding: 60px 0 80px; }
    .beats-inner { padding: 0 22px; }
    #player {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    #player-left { display: contents; }

    /* Right-aligned intro */
    #player-left > .badge {
      order: 1;
      align-self: flex-end;
      margin: 0;
    }
    #player-left > .title {
      order: 2;
      text-align: right;
      margin: 16px 0 12px;
    }
    #player-desc {
      order: 3;
      text-align: right;
      font-size: 14px;
      margin: 0 0 32px;
    }

    /* Centered album cover (vinyl already display:none on mobile) */
    #player-right {
      order: 4;
      width: auto;
      align-self: center;
      justify-content: center;
    }
    #player-cover-stack { width: min(280px, 78vw); height: min(280px, 78vw); }

    /* Centered control buttons below the cover */
    #player-controls {
      order: 5;
      align-self: center;
      justify-content: center;
      margin-top: 24px;
    }

    /* Centered song title */
    #player-title {
      order: 6;
      align-self: center;
      text-align: center;
      white-space: normal;
      font-size: 18px;
      margin-top: 16px;
      max-width: 100%;
    }

    /* Centered "MORE ON" footer with extra breathing room */
    #player-more {
      order: 7;
      align-self: center;
      align-items: center;
      text-align: center;
      margin-top: 60px;
    }

    /* ── Contact ─────────────────────────────────────────── */
    #contact { padding: 56px 22px 60px; }
    /* #contact .title now inherits unified 30px mobile .title. */
    .btn-cta, .btn-cta-ghost { font-size: 14px; padding: 14px 28px; }

    /* ── Footer ──────────────────────────────────────────── */
    #footer { padding: 32px 22px; }
    #footer p { font-size: 12px; }
  }

  /* ═══════════════════════════════════════════════════════════
     SMALL PHONES — ≤480px
     Now only carries hero/art-row tweaks; case-study cards-sm
     handled by the slider above and no longer needs a 1-col grid.
  ══════════════════════════════════════════════════════════ */
  @media (max-width: 480px) {
    /* #hh sizing now handled by the ≤640px Figma 153:919 block above. */
    .art-sm { flex: 0 0 clamp(110px, 42vw, 160px); }
    /* About + Impact stack rule removed — with the title at
       30px (Figma 156:1164) "EMPOWERING" fits in the 1fr
       title column even at 320px, so the 2-col "years | title"
       layout from the ≤640 block is correct at every phone
       width. */
  }

  /* ═══ SCROLL REVEAL ═══════════════════════════════════════ */
  .section, #about, #testimonials, #writing, #beats, #contact {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .section.is-visible,
  #about.is-visible,
  #testimonials.is-visible,
  #writing.is-visible,
  #beats.is-visible,
  #contact.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .section, #about, #testimonials, #writing, #beats, #contact {
      opacity: 1;
      transform: none;
      transition: none;
    }
    #contact.cta-highlight { animation: none; }
  }