/* ============================================================
   SITE STYLES — shared foundation for all pages (index + project pages)
   Edit here once; every page updates. Tokens, nav, contact, footer,
   reveal, cursor, + all section styles live in this single file.
   ============================================================ */

/* ============================================================
     DESIGN TOKENS  —  change these to re-skin the whole site
     ============================================================ */
  :root{
    --bone:        #F2EEE6;   /* canvas */
    --bone-2:      #EAE5DA;   /* slightly deeper panels */
    --ink:         #16140F;   /* near-black text */
    --ink-soft:    #6B675E;   /* muted text */
    --hair:        #D9D3C6;   /* hairline rules */
    --accent:      #FF4222;   /* the bold accent */
    --accent-ink:  #FFFFFF;   /* text on accent */

    --maxw: 1240px;
    --pad: clamp(20px, 5vw, 64px);

    --font-display: "DM Sans", sans-serif;
    --font-body:    "DM Sans", sans-serif;
    --font-mono:    "JetBrains Mono", monospace;
    --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif; /* EXPERIMENT: section titles */

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; width:100%; }

  /* Discourage casual saving of media: no drag, no long-press "Save Image" callout. */
  img, video{ -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none; -webkit-touch-callout:none; }

  body{
    background:var(--bone);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:clamp(16px,1.05vw,18px);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  /* subtle paper grain for texture */
  ::selection{ background:var(--accent); color:var(--accent-ink); }

  a{ color:inherit; text-decoration:none; }

  .wrap{ max-width:none; width:100%; margin:0; padding-inline:var(--pad); }

  .label{
    font-family:var(--font-mono);
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .label .dot{ display:none; }
  /* Green availability status dot */
  .status-dot{
    display:inline-block; width:9px; height:9px; border-radius:50%;
    background:#22C55E; margin-right:9px; vertical-align:middle; position:relative; top:-1px;
    box-shadow:0 0 0 0 rgba(34,197,94,.55);
    animation:statusPulse 2.4s ease-out infinite;
  }
  @keyframes statusPulse{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); }
    70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
  }
  @media (prefers-reduced-motion:reduce){ .status-dot{ animation:none; } }
  .status-link{ transition:color .3s var(--ease); }
  .status-link:hover{ color:var(--ink); }

  /* ============================================================
     NAV
     ============================================================ */
  header.nav{
    position:sticky; top:0; z-index:100;
    background:color-mix(in srgb, var(--bone) 86%, transparent);
    backdrop-filter:blur(10px);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .brand{
    font-family:var(--font-display);
    font-weight:800; font-size:18px; letter-spacing:-.01em;
    display:flex; align-items:center; gap:9px;
  }
  .nav-links{ display:flex; gap:28px; }
  .nav-links a{
    font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
    position:relative; padding:4px 0;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
    background:var(--accent); transition:width .35s var(--ease);
  }
  .nav-links a:hover::after{ width:100%; }
  @media (max-width:640px){ .brand{ font-size:16px; } .nav-links{ gap:16px; } .nav-links a{ font-size:12px; } }
  /* Smart nav — flips to white over dark backgrounds (sections marked [data-nav-invert]) */
  .nav{ transition:background-color .35s var(--ease), backdrop-filter .35s var(--ease); }
  .nav .brand, .nav .nav-links a{ color:var(--ink); transition:color .35s var(--ease); }
  .nav.nav-light{ background:transparent; backdrop-filter:none; }
  .nav.nav-light .brand, .nav.nav-light .nav-links a{ color:var(--bone); }
  /* Brand name hover — fills to the accent color, like the other hovers */
  .nav .brand:hover, .nav.nav-light .brand:hover{ color:var(--accent); }

  /* ============================================================
     HERO
     ============================================================ */
  .hero{ padding-top:clamp(38px,7vw,88px); padding-bottom:clamp(28px,5vw,56px); }
  .hero .meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:clamp(16px,2.4vw,27px); }

  .display{
    font-family:var(--font-display);
    font-weight:800;
    line-height:.86;
    letter-spacing:-.03em;
    font-size:clamp(58px, 16vw, 220px);
    text-transform:uppercase;
  }
  .display .line{ display:block; overflow:hidden; }
  .display .line > span{ display:block; transform:translateY(105%); }
  .display em{ color:var(--accent); font-style:normal; }

  .hero-sub{
    margin-top:clamp(20px,3.5vw,36px);
    display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,60px); align-items:flex-end;
  }
  .hero-sub p{ max-width:46ch; font-size:clamp(17px,1.4vw,21px); color:var(--ink); }

  /* ===================== SKY HERO (sizzle reel over clouds) ===================== */
  /* Full-bleed sky band; the reel sits centered on top. Restrained, with sky showing
     around it. The stage sits outside .wrap so the clouds run edge to edge. */
  .hero-sky-stage{
    position:relative; width:100%; overflow:hidden; background:var(--ink);
    margin-top:clamp(18px,2.6vw,30px);
    padding:clamp(40px,6vw,96px) var(--pad);
    display:grid; place-items:center;
  }
  /* Separate sky layer, overscanned so the parallax shift never reveals an edge. */
  .hero-sky-bg{
    position:absolute; left:0; right:0; top:-15%; height:130%; z-index:0;
    background:var(--ink) center/cover no-repeat;
    background-image:url("assets/images/hero-sky.jpg");
    will-change:transform;
  }
  @supports (background-image: image-set(url("x.webp") type("image/webp"))){
    .hero-sky-bg{ background-image:image-set(url("assets/images/hero-sky.webp") type("image/webp"), url("assets/images/hero-sky.jpg") type("image/jpeg")); }
  }
  .hero-reel{
    position:relative; z-index:1;
    display:block; width:min(72%,1120px); aspect-ratio:16/9; object-fit:cover;
    background:#000; will-change:transform;
  }
  @media (max-width:760px){
    .hero-sky-stage{ padding:clamp(26px,9vw,48px) var(--pad); }
    .hero-reel{ width:100%; }
  }

  /* SR-ONLY (visible to screen readers / search engines, hidden visually) */
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

  /* Project-to-project navigation (type only, sits above the contact block) */
  .proj-nav{ }
  .proj-nav-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-block:clamp(16px,2vw,28px); }
  .proj-nav-link{ display:flex; flex-direction:column; gap:7px; }
  .proj-nav-prev{ align-items:flex-start; text-align:left; }
  .proj-nav-next{ align-items:flex-end; text-align:right; }
  .proj-nav-kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
  .proj-nav-name{
    font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
    font-size:clamp(16px,1.5vw,21px); line-height:1.1; color:var(--ink);
    display:inline-flex; align-items:center; gap:9px; transition:color .3s var(--ease);
  }
  .proj-nav-link:hover .proj-nav-name{ color:var(--accent); }
  .proj-nav-arrow{ display:inline-flex; align-items:center; transition:transform .3s var(--ease); }
  .proj-nav-arrow svg{ width:16px; height:16px; display:block; }
  .proj-nav-arrow-m{ display:none; }
  .proj-nav-arrow-m svg{ width:15px; height:15px; display:block; }
  .proj-nav-next:hover .proj-nav-arrow{ transform:translateX(4px); }
  .proj-nav-prev:hover .proj-nav-arrow{ transform:translateX(-4px); }
  /* Tap/press state: fill to the accent color (JS adds .is-tapped on touch; :active covers mouse) */
  .proj-nav-link:active .proj-nav-name,
  .proj-nav-link:active .proj-nav-kicker,
  .proj-nav-link.is-tapped .proj-nav-name,
  .proj-nav-link.is-tapped .proj-nav-kicker{ color:var(--accent); }
  /* Mobile: project titles would collide, so show just the direction labels with arrows. */
  @media (max-width:600px){
    .proj-nav-inner{ gap:14px; align-items:center; padding-block:clamp(16px,5vw,24px); }
    .proj-nav-name{ display:none; }
    .proj-nav-kicker{ font-size:13px; letter-spacing:.06em; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
    .proj-nav-arrow-m{ display:inline-flex; align-items:center; }
  }

  /* REEL */
  .reel{
    position:relative; width:100%; aspect-ratio:16/9; cursor:pointer;
    background:var(--ink); overflow:hidden;
    margin-top:clamp(8px,1.6vw,18px);
  }
  .reel::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0) 38%);
    opacity:0; transition:opacity .4s var(--ease);
  }
  .reel:hover::after{ opacity:1; }
  .reel-video{
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .reel-img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
  .reel.is-image{ cursor:default; }
  .reel.is-image::after{ content:none; }
  .reel-fallback{
    position:absolute; inset:0; z-index:0;
    display:grid; place-items:center; text-align:center;
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    letter-spacing:.01em; font-size:clamp(26px,6vw,72px); color:var(--bone);
  }
  .reel-sound{
    position:absolute; right:16px; bottom:16px; z-index:2;
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    background:color-mix(in srgb, var(--ink) 55%, transparent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    color:var(--bone); border:1px solid rgba(242,238,230,.35);
    font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    padding:9px 15px; border-radius:40px;
    transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  }
  .reel-sound:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translateY(-1px); }
  .reel-sound.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .reel-expand{
    position:absolute; left:16px; bottom:16px; z-index:2;
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    background:color-mix(in srgb, var(--ink) 55%, transparent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    color:var(--bone); border:1px solid rgba(242,238,230,.35);
    font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    padding:9px 15px; border-radius:40px;
    opacity:0; transform:translateY(6px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  }
  .reel-expand-icon{ font-size:14px; line-height:1; }
  .reel:hover .reel-expand{ opacity:1; transform:none; }
  .reel-expand:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

  /* ============================================================
     SECTION HEADERS
     ============================================================ */
  section{ padding-block:clamp(56px,9vw,128px); }
  .sec-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:16px; margin-bottom:clamp(28px,4vw,56px);
    border-bottom:1px solid var(--hair); padding-bottom:18px;
  }
  .sec-head h2{
    font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
    font-size:clamp(30px,5vw,64px); text-transform:uppercase; line-height:.95;
  }
  /* ===== EXPERIMENT: Instrument Serif italic section titles =====
     To revert: delete this block, remove the --font-serif var,
     and remove &family=Instrument+Serif... from the font <link>. ===== */
  .sec-head h2{
    font-family:var(--font-serif);
    font-style:italic;
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
    line-height:1;
  }
  /* ===== END EXPERIMENT ===== */

  /* ============================================================
     WORK
     ============================================================ */
  .work-list{ display:flex; flex-direction:column; gap:clamp(15px,2.25vw,33px); }
  #work .sec-head{ border-bottom:none; padding-bottom:0; margin-bottom:clamp(20px,2.9vw,40px); }
  #experience .sec-head{ border-bottom:none; padding-bottom:0; margin-bottom:clamp(14px,2vw,24px); }

  /* TESTIMONIALS */
  /* tightened section junctions: about -> experience -> testimonials -> faq */
  #work{ padding-bottom:clamp(24px,3.5vw,48px); }
  #about{ padding-block:clamp(24px,3.5vw,48px); }
  #experience{ padding-block:clamp(24px,3.5vw,48px); }
  #testimonials{ padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(24px,3.5vw,48px); }
  .tstm{ max-width:1080px; margin-inline:auto; }
  .tstm-quote{ display:block; font-family:var(--font-serif); font-style:italic; font-weight:400; line-height:.7; color:var(--hair); user-select:none; }
  .tstm-quote.open{ font-size:clamp(72px,11vw,140px); margin-bottom:clamp(-6px,-1vw,-18px); }
  .tstm-quote.close{ font-size:clamp(72px,11vw,140px); text-align:right; margin-top:clamp(-14px,-2vw,-34px); }
  .tstm-viewport{ position:relative; transition:height .5s cubic-bezier(.16,1,.3,1); }
  .tstm-slide{ position:absolute; top:0; left:0; width:100%; opacity:0; visibility:hidden; transition:opacity .45s ease; pointer-events:none; }
  .tstm-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
  .tstm-text{
    font-family:var(--font-display); font-weight:500; color:var(--ink);
    font-size:clamp(18px,1.95vw,28px); line-height:1.45; letter-spacing:-.01em;
    margin:0 0 .7em;
  }
  .tstm-text:last-of-type{ margin-bottom:0; }
  .tstm-cite{ margin-top:clamp(24px,3vw,40px); text-align:center; }
  .tstm-name{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(15px,1.2vw,18px); color:var(--ink); letter-spacing:-.01em; }
  .tstm-co{ display:block; margin-top:5px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
  .tstm-dots{ display:flex; justify-content:center; gap:11px; margin-top:clamp(26px,3.4vw,44px); }
  .tstm-dot{ width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer; background:var(--hair); transition:background-color .3s var(--ease), transform .3s var(--ease); }
  .tstm-dot:hover{ background:var(--ink-soft); }
  .tstm-dot.is-active{ background:var(--accent); transform:scale(1.25); }
  @media (prefers-reduced-motion:reduce){
    .tstm-viewport, .tstm-slide, .tstm-dot{ transition:none; }
  }

  /* FAQ */
  #faq{ padding-top:clamp(24px,3.5vw,48px); }
  #faq .sec-head{ border-bottom:none; padding-bottom:0; margin-bottom:clamp(14px,2vw,24px); }
  .faq-list{ display:flex; flex-direction:column; }
  .faq-item{ border-top:1px solid var(--hair); }
  .faq-item:last-child{ border-bottom:1px solid var(--hair); }
  .faq-q{
    width:100%; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:clamp(20px,2.4vw,30px) 0; text-align:left;
    font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
    font-size:clamp(18px,2vw,26px); color:var(--ink);
    transition:color .3s var(--ease);
  }
  @media (hover:hover){ .faq-q:hover{ color:var(--accent); } }
  .faq-q[aria-expanded="true"]{ color:var(--accent); }  /* accent marks the open drawer; clears on close */
  .faq-icon{ position:relative; width:20px; height:20px; flex:none; }
  .faq-icon::before, .faq-icon::after{
    content:""; position:absolute; top:50%; left:50%; background:currentColor;
    transition:transform .35s var(--ease);
  }
  .faq-icon::before{ width:16px; height:2px; transform:translate(-50%,-50%); }
  .faq-icon::after{ width:2px; height:16px; transform:translate(-50%,-50%); }
  .faq-q[aria-expanded="true"] .faq-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
  .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
  .faq-a-inner{ overflow:hidden; }
  .faq-q[aria-expanded="true"] + .faq-a{ grid-template-rows:1fr; }
  .faq-a p{ color:var(--ink-soft); max-width:64ch; font-size:clamp(15px,1.05vw,17px); padding:0 0 clamp(20px,2.4vw,30px); }
  @media (prefers-reduced-motion:reduce){ .faq-a, .faq-icon::before, .faq-icon::after{ transition:none; } }

  .project{
    display:grid; grid-template-columns:minmax(0,1.35fr) 1fr; gap:clamp(24px,4vw,64px);
    align-items:stretch;
  }
  .project-media{
    position:relative; aspect-ratio:16/9; background:var(--ink); overflow:hidden;
    align-self:start; min-width:0;
  }
  .project-media img, .project-media video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .6s var(--ease);
  }
  .project:has(a:hover) .project-media img, .project:has(a:hover) .project-media video{ transform:scale(1.04); }
  .project-media-fallback{
    position:absolute; inset:0; display:grid; place-items:center;
    font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    color:rgba(242,238,230,.45);
  }
  /* Dream Small card: image is the poster, click-to-play the film with sound + native controls */
  .project-media-video{ cursor:pointer; }
  .pm-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:clamp(62px,7vw,88px); height:clamp(62px,7vw,88px); border-radius:50%;
    border:1px solid rgba(242,238,230,.5); background:rgba(0,0,0,.42); color:var(--bone);
    display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(2px);
    transition:background .3s var(--ease), transform .4s var(--ease), opacity .3s var(--ease);
  }
  .pm-play:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translate(-50%,-50%) scale(1.06); }
  .pm-play svg{ width:34%; height:34%; fill:currentColor; }
  .project-media-video.is-playing{ cursor:default; }
  .project-media-video.is-playing .pm-play{ opacity:0; pointer-events:none; }
  .project-info{ display:flex; flex-direction:column; justify-content:space-between; padding:2px 0; }
  .project-tags{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
  .project-title{
    font-family:var(--font-display); font-weight:700; letter-spacing:-.05em;
    font-size:clamp(28px,3.4vw,52px); line-height:1; margin:12px 0; transition:color .3s var(--ease);
  }
  .project-desc{ color:var(--ink-soft); max-width:44ch; font-size:clamp(15px,1.05vw,17px); }
  .project-go{
    align-self:flex-end; margin-top:24px;
    width:48px; height:48px; border:1px solid var(--ink); border-radius:50%;
    display:grid; place-items:center; flex:none;
    transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
  }
  /* Non-clickable "coming soon" label in place of the arrow, in the serif used for section titles */
  .project-soon{
    align-self:flex-start; margin-top:24px;
    font-family:var(--font-serif); font-style:italic; font-weight:400;
    font-size:clamp(17px,1.4vw,21px); line-height:1; color:var(--ink-soft);
  }
  .project-title a{ color:inherit; transition:color .3s var(--ease); }
  .project-title a:hover{ color:var(--accent); }
  .project-go:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:rotate(45deg); }
  .project:has(a:hover) .project-title a{ color:var(--accent); }
  .project:has(a:hover) .project-go{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:rotate(45deg); }
  @media (max-width:760px){
    .project{ grid-template-columns:1fr; gap:18px; }
    /* More breathing room between a card's CTA and the next card's thumbnail (mobile only) */
    .work-list{ gap:clamp(30px,8vw,42px); }
    .project-title{ font-size:clamp(26px,7vw,40px); }
  }

  /* ============================================================
     ABOUT
     ============================================================ */
  .about-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(28px,5vw,72px); }
  /* Section title, styled like the other section headings (Instrument Serif italic) */
  .about-title{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(30px,5vw,64px); line-height:1; letter-spacing:0; color:var(--ink); }
  .about-body .lede{ margin-bottom:clamp(18px,2.4vw,30px); }
  /* Left column holds the lede at top and the quote pushed to the bottom (base-aligns with the stats row) */
  /* Logo garden — 4 columns, optically balanced (per-logo max-height set inline) */
  /* Full-width hairline between stats and garden (edge-to-edge with the stats) */
  .exp-rule{ border-top:1px solid var(--hair); margin-top:clamp(40px,5.5vw,72px); }
  .logo-garden{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:clamp(34px,5vw,64px) clamp(20px,3vw,44px); margin-top:clamp(40px,5.5vw,72px); }
  .logo{ display:flex; align-items:center; justify-content:center; min-height:48px; }
  .logo img{ display:block; width:auto; height:auto; max-width:100%; }

  /* Featured testimonial — company logo + arrows (left), quote (right) */
  .tstm2{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(28px,5vw,72px); margin-top:clamp(56px,8vw,112px); }
  .tstm2-left{ display:flex; flex-direction:column; }
  .tstm2-progress{ position:relative; width:100%; height:1px; background:var(--hair); overflow:hidden; }
  .tstm2-progress-fill{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--accent); }
  .tstm2-nav{ display:flex; gap:20px; align-self:flex-end; margin-top:22px; }
  .tstm2-arrow{ background:none; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; color:var(--ink); transition:color .3s var(--ease); }
  .tstm2-arrow svg{ width:24px; height:24px; display:block; }
  @media (hover:hover){ .tstm2-arrow:hover{ color:var(--accent); } }
  .tstm2-arrow.is-tapped{ color:var(--accent); }  /* momentary tap feedback, clears on release */
  .tstm2-logo{ margin:auto; align-self:center; }
  .tstm2-logo img{ height:clamp(30px,3vw,40px); width:auto; display:block; }
  .tstm2-slides{ display:grid; margin-top:-5px; }
  .tstm2-slide{ grid-area:1/1; align-self:start; margin:0; opacity:0; transition:opacity .5s var(--ease); pointer-events:none; }
  .tstm2-slide.active{ opacity:1; pointer-events:auto; }
  .tstm2-quote{ margin:0; max-width:46ch; }
  .tstm2-quote p{ font-family:var(--font-display); font-weight:400; font-size:15px; line-height:1.6; color:var(--ink-soft); }
  .tstm2-quote p + p{ margin-top:.8em; }
  .tstm2-cite{ margin-top:16px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-soft); }
  .tstm2-cite::before{ content:"\2014  "; }
  @media (max-width:760px){ .logo-garden{ grid-template-columns:repeat(2,1fr); } .tstm2{ grid-template-columns:1fr; } }
  .about-grid .lede{ font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3.2vw,42px); line-height:1.12; letter-spacing:-.05em; color:var(--ink); }
  .about-body p{ color:var(--ink-soft); margin-bottom:16px; }
  .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); margin-top:clamp(48px,7vw,96px); }
  .stat{ text-align:center; }
  .stat .n{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4vw,52px); letter-spacing:-.02em; }
  .stat .k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
  @media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }

  /* ============================================================
     EXPERIENCE
     ============================================================ */
  .exp-row{
    display:grid; grid-template-columns:1fr 1fr 120px; gap:16px; align-items:baseline;
    padding:22px 0; border-top:1px solid var(--hair);
  }
  .exp-row:last-child{ border-bottom:1px solid var(--hair); }
  .exp-row .role{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2vw,26px); letter-spacing:-.01em; }
  .exp-row .co{ color:var(--ink-soft); }
  .exp-row .yr{ font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); white-space:nowrap; text-align:right; }
  @media (max-width:680px){
    .exp-row{ grid-template-columns:1fr auto; gap:4px 16px; }
    .exp-row .co{ grid-column:1 / -1; font-size:15px; }
  }

  /* ============================================================
     CONTACT
     ============================================================ */
  .contact{ background:#000; color:var(--bone); padding-block:clamp(40px,5vw,64px); }
  .contact .sec-head{ border-color:rgba(255,255,255,.16); }
  .contact .sec-head h2{ color:var(--bone); }
  .contact .label{ color:rgba(242,238,230,.6); }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start; }
  .contact .big{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(40px,6vw,88px); line-height:1; letter-spacing:0; color:var(--bone); text-align:left; }
  .contact .mail{ display:inline-block; margin-top:24px; font-family:var(--font-mono); font-size:clamp(15px,1.6vw,19px); border-bottom:2px solid var(--accent); padding-bottom:3px; }
  .socials{ display:flex; gap:22px; margin-top:30px; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
  .socials a{ position:relative; }
  .socials a:hover{ color:var(--accent); }

  form{ display:flex; flex-direction:column; gap:18px; }
  .field label{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(242,238,230,.6); margin-bottom:8px; }
  .field input, .field textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid rgba(242,238,230,.28);
    color:var(--bone); font-family:var(--font-body); font-size:17px; padding:8px 0; resize:vertical;
  }
  .field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(242,238,230,.35); }
  button.send{
    align-self:flex-start; margin-top:16px;
    background:none; border:none; padding:0; cursor:pointer;
    font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2vw,22px); letter-spacing:-.01em;
    color:var(--bone); transition:color .3s var(--ease);
  }
  button.send:hover{ color:var(--accent); }
  button.send svg{ width:1em; height:1em; display:inline-block; vertical-align:-.12em; }
  .form-sent{ font-family:var(--font-display); font-weight:500; font-size:clamp(18px,2vw,24px); color:var(--bone); line-height:1.4; }
  .form-note{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--accent); margin-top:14px; }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

  /* ============================================================
     FOOTER
     ============================================================ */
  footer{ background:#000; color:rgba(242,238,230,.55); border-top:1px solid rgba(255,255,255,.12); }
  .foot-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-block:34px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; }
  .foot-inner .top{ color:var(--bone); }
  .foot-inner a:hover{ color:var(--accent); }
  .foot-social{ display:inline-flex; align-items:center; color:#fff; }
  .foot-social svg{ width:18px; height:18px; display:block; }
  .foot-social:hover{ color:var(--accent); }

  /* ============================================================
     MOBILE REFINEMENTS
     ============================================================ */
  @media (max-width:640px){
    .hero{ padding-top:30px; }
    .display{ font-size:clamp(44px,13.5vw,94px); line-height:.94; letter-spacing:-.02em; }
    .hero .meta{ flex-direction:column; align-items:flex-start; gap:7px; margin-bottom:18px; }
    .meta-tagline{ display:none; }  /* too cramped on phones — drop "Brand · Design · Campaigns" */
    .hero-sub{ flex-direction:column; align-items:stretch; gap:20px; width:100%; }
    .hero-sub p{ font-size:18px; max-width:none; width:100%; }
    .sec-head{ flex-direction:column; align-items:flex-start; gap:6px; }
    .about-grid .lede{ font-size:clamp(24px,7vw,34px); }
    .stats{ grid-template-columns:1fr 1fr; gap:22px 16px; }
    .contact .big{ font-size:clamp(40px,12vw,60px); }
    /* Footer: LinkedIn on its own row, then copyright (left) and Back to top (right), baseline-aligned */
    .foot-inner{ flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:16px 10px; }
    .foot-social{ flex-basis:100%; }
  }
  @media (max-width:480px){
    .brand{ font-size:15px; }
    .nav-links{ gap:14px; }
    .nav-links a{ font-size:11px; }
  }

  /* ============================================================
     SCROLL REVEAL
     ============================================================ */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

  /* HERO load animation */
  .loaded .display .line > span{ transform:translateY(0); transition:transform 1s var(--ease); }
  .loaded .display .line:nth-child(2) > span{ transition-delay:.08s; }
  .loaded .display .line:nth-child(3) > span{ transition-delay:.16s; }
  .hero .fade-up{ opacity:0; transform:translateY(16px); }
  .loaded .hero .fade-up{ opacity:1; transform:none; transition:opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s; }
  /* ============================================================
     CUSTOM CURSOR — small accent dot (mouse/fine-pointer only)
     ============================================================ */
  html.has-custom-cursor, html.has-custom-cursor *{ cursor:none !important; }
  html.has-custom-cursor input, html.has-custom-cursor textarea{ cursor:text !important; }
  .cursor-dot{
    position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
    width:10px; height:10px; border-radius:50%; background:var(--accent);
    opacity:0; will-change:transform;
    transition:width .25s var(--ease), height .25s var(--ease),
               background-color .25s var(--ease), border-color .25s var(--ease), opacity .2s linear;
  }
  .cursor-dot.is-hover{ width:38px; height:38px; background:transparent; border:1.5px solid var(--accent); }
  @media (prefers-reduced-motion:reduce){ .cursor-dot{ transition:opacity .2s linear; } }


  /* ============================================================
     PROJECT PAGES (hero + metadata) — used by project pages
     ============================================================ */

  /* ---- FULL-BLEED HERO (nav overlays the image) — opt-in: <body class="has-full-hero"> ---- */
  /* Nav sits over the image and scrolls away with the page (not sticky) */
  body.has-full-hero header.nav{
    position:absolute; left:0; right:0; top:0;
    background:transparent; backdrop-filter:none;
  }
  .ph-hero-full{ width:100%; background:var(--ink); }
  .ph-hero-full picture{ display:block; width:100%; }
  /* Full bleed edge to edge, uncropped — the image keeps its own proportions */
  .ph-hero-full img{ width:100%; height:auto; display:block; }

  /* ---- Intro row: title (left) · description (right), top-aligned ---- */
  .proj-intro{ padding-top:clamp(16px,1.8vw,26px); padding-bottom:clamp(48px,7vw,96px); }
  .pi-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
  .pi-left .ph-title{ font-size:clamp(30px,3.6vw,52px); line-height:1.04; letter-spacing:-.05em; margin-bottom:0; }
  /* Company / Project type / My role — body size, muted so focus stays on the content */
  .pi-meta{ margin-top:clamp(22px,2.8vw,36px); display:flex; flex-direction:column; gap:clamp(12px,1.4vw,18px); }
  .pi-meta-label{ display:block; font-family:var(--font-display); font-size:16px; line-height:1.35; color:var(--ink-soft); opacity:.6; }
  .pi-meta-value{ display:block; font-family:var(--font-display); font-size:16px; line-height:1.35; color:var(--ink-soft); }
  /* Team credits — quiet supporting block under the meta */
  .pi-credits{ margin-top:clamp(24px,3vw,42px); display:flex; flex-direction:column; gap:4px; max-width:30ch; }
  /* Separate multiple role groups (Brand/Research/Product) while keeping the title tight to the names. */
  .pi-credit-group + .pi-credit-group{ margin-top:clamp(12px,1.5vw,18px); }
  .pi-credits-title{ font-family:var(--font-display); font-size:16px; line-height:1.35; color:var(--ink-soft); opacity:.6; }
  .pi-credit-role{ display:block; font-family:var(--font-display); font-size:16px; line-height:1.35; color:var(--ink-soft); opacity:.6; margin-bottom:3px; }
  .pi-credit-names{ display:block; font-family:var(--font-display); font-size:16px; line-height:1.5; color:var(--ink-soft); }
  .pi-body{ max-width:52ch; margin-left:auto; /* flush right — aligns with the nav's right edge */ }
  .pi-body p{ font-family:var(--font-display); font-weight:400; font-size:16px; line-height:1.5; letter-spacing:0; color:var(--ink); }
  .pi-body p + p{ margin-top:1em; }
  .pi-list{ list-style:none; margin:1em 0 0; padding:0; display:flex; flex-direction:column; gap:.55em; }
  .pi-list li{ position:relative; padding-left:1.15em; font-family:var(--font-display); font-weight:400; font-size:16px; line-height:1.5; color:var(--ink); }
  .pi-list li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--accent); }
  .pi-list li strong{ font-weight:600; }
  @media (max-width:760px){ .pi-row{ grid-template-columns:1fr; gap:clamp(24px,5vw,34px); } .pi-body{ margin-left:0; } }

  /* ---- Project body: images sit within the same gutters as the type (via .wrap) ---- */
  .proj-body{ padding-bottom:clamp(56px,8vw,110px); }
  .pb-figure{ margin:0; }
  .pb-figure + .pb-figure{ margin-top:clamp(16px,2.2vw,32px); }
  .pb-figure img{ width:100%; height:auto; display:block; }
  .pb-video{ width:100%; height:auto; display:block; background:var(--ink); }
  .pb-film{ width:100%; height:auto; display:block; background:#000; }

  /* ---- Matted video card: a video centered on a black mat, sitting on the bone canvas (per-project: add class pb-card to the figure) ---- */
  /* Card-to-card spacing inherits the global .pb-figure + .pb-figure rule above. */
  .pb-card{ background:#000; padding-block:clamp(28px,4vw,64px); }
  .pb-card > .pb-film,
  .pb-card > .pb-film-wrap{ width:84%; margin-inline:auto; }

  /* Click-to-play film: poster + centered play button; clicking plays with sound + native controls. */
  .pb-film-wrap{ position:relative; display:block; cursor:pointer; }
  .pb-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:clamp(62px,6vw,84px); height:clamp(62px,6vw,84px); border-radius:50%;
    border:1px solid rgba(242,238,230,.55); background:rgba(0,0,0,.42); color:var(--bone);
    display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(2px);
    transition:background .3s var(--ease), transform .4s var(--ease), opacity .3s var(--ease);
  }
  .pb-play:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translate(-50%,-50%) scale(1.06); }
  .pb-play svg{ width:34%; height:34%; fill:currentColor; }
  .pb-film-wrap.is-playing{ cursor:default; }
  .pb-film-wrap.is-playing .pb-play{ opacity:0; pointer-events:none; }
  /* 3-up row of clips inside a black card (stacks on small screens) */
  .pb-3up{ width:84%; margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px); }
  .pb-3up video{ width:100%; height:auto; display:block; background:#000; }
  @media (max-width:640px){ .pb-3up{ grid-template-columns:1fr; gap:clamp(12px,3vw,18px); } }
  /* Each clip autoplays muted; a play button restarts it with sound and reveals controls */
  .pb-ad{ position:relative; }
  .pb-ad-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:clamp(46px,4.6vw,66px); aspect-ratio:1; border:0; border-radius:50%;
    background:rgba(0,0,0,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    display:grid; place-items:center; cursor:pointer; color:#fff;
    transition:background .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease); }
  .pb-ad-play:hover{ background:rgba(0,0,0,.62); transform:translate(-50%,-50%) scale(1.06); }
  .pb-ad-play svg{ width:38%; height:38%; fill:currentColor; margin-left:6%; }
  .pb-ad.is-watching .pb-ad-play{ opacity:0; pointer-events:none; }

  /* ============================================================
     PROJECT HERO (stacked variant — title above image; used by project-template.html)
     ============================================================ */
  .proj-hero{ padding-top:clamp(38px,7vw,88px); padding-bottom:clamp(48px,7vw,96px); }
  @media (max-width:640px){ .proj-hero{ padding-top:30px; } }

  /* Hero cover image (top) */
  .ph-cover{
    aspect-ratio:16/9; background:var(--ink);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .ph-cover picture{ display:block; width:100%; height:100%; }
  .ph-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ph-cover-label{ font-family:var(--font-mono); font-size:clamp(11px,1vw,13px); letter-spacing:.08em; text-transform:uppercase; color:rgba(242,238,230,.4); }

  /* Title */
  /* Eyebrow (category) — above the hero image, consistent with the homepage work-card eyebrow */
  .ph-eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);
    margin-top:0; margin-bottom:clamp(14px,1.8vw,22px);
  }

  /* Scroll-tied fade container for the hero eyebrow + title (opt-in: wrap them in .ph-fade) */
  .ph-fade{ will-change:opacity; }

  .ph-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(40px,7vw,96px); line-height:.95; letter-spacing:-.03em; color:var(--ink);
    margin-top:0; margin-bottom:clamp(24px,3vw,44px);
  }

  /* Meta (left) + blurb (right) */
  .ph-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:start; margin-top:clamp(12px,1.4vw,18px); }
  .ph-meta{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,28px); }
  .ph-meta-label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); opacity:.6; margin-bottom:7px; }
  /* Category — consistent with the work-card eyebrow */
  .ph-meta-value{ display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(13px,1vw,15px); letter-spacing:0; color:var(--ink-soft); }
  .ph-meta-value + .ph-meta-value{ margin-top:4px; }
  .ph-blurb{ max-width:48ch; justify-self:end; }
  .ph-blurb p{ font-family:var(--font-display); font-weight:400; font-size:clamp(16px,1.35vw,20px); line-height:1.5; color:var(--ink-soft); }
  .ph-blurb p + p{ margin-top:1em; }
  @media (max-width:760px){ .ph-row{ grid-template-columns:1fr; gap:clamp(26px,6vw,38px); } .ph-blurb{ justify-self:start; } }