:root{
    --green:#28f76d;
    --green-tint:#E7F8EE;
    --text-green:#28f76d;
    --dark-bg:#07160F;
    --paper:#FFFFFF;
    --line: rgba(40,247,109,0.32);
    --line-soft: rgba(40,247,109,0.15);
    --maxw: 1320px;
    --gap: 24px;
    --star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M12 2 L14.59 8.36 L21.51 8.99 L16.26 13.97 L17.77 20.78 L12 17.27 L6.23 20.78 L7.74 13.97 L2.49 8.99 L9.41 8.36 Z'/%3E%3C/svg%3E");
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--text-green);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:15px;
    line-height:1.55;
    overflow-x:hidden;
  }
  h1,h3,.upp{
    font-family:'Inter',sans-serif;
    font-weight:800;
    text-transform:lowercase;
    letter-spacing:-0.01em;
    line-height:1.04;
    margin:0;
    color:var(--text-green);
  }
  h2{
    font-family:'Inter',sans-serif;
    font-weight:700;
    text-transform:lowercase;
    letter-spacing:0.01em;
    line-height:1.15;
    margin:0;
    color:var(--text-green);
    font-size:clamp(28px,4.2vw,48px);
  }
  a{color:inherit;}
  ul{margin:0;padding:0;list-style:none;}
  p{margin:0 0 12px 0;}
  section{position:relative;}
  .container{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  .full-bleed{width:100vw !important; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}

  /* decorative green grid background, fixed */
  .grid-overlay{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 90%);
  }

  /* header / nav: transparent, sits directly over whatever scrolls beneath it */
  header.site-nav{
    position:sticky; top:0; z-index:50;
  }
  .nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:22px 32px;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
  }
  .logo{
    font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:20px; letter-spacing:0;
    text-decoration:none; color:var(--green); text-transform:lowercase;
  }
  .logo span{color:var(--green);}
  nav.links{display:flex; gap:24px; flex-wrap:wrap; flex:1; justify-content:center;}
  nav.links a{
    text-decoration:none; font-size:13px; font-weight:600; text-transform:lowercase;
    letter-spacing:0.01em; color:var(--text-green); opacity:1;
    padding:6px 2px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
  }
  nav.links a:hover, nav.links a.active{color:var(--green); border-color:var(--green);}
  .nav-toggle{display:none; background:none; border:none; color:var(--text-green); padding:8px 0; font-weight:700; letter-spacing:.02em; text-transform:lowercase; font-size:13px;}
  .btn-contact{
    text-decoration:none; color:var(--green); font-size:13px; font-weight:600;
    text-transform:lowercase; letter-spacing:.01em; padding:6px 0;
    border-bottom:2px solid var(--green); white-space:nowrap;
    transition:opacity .2s ease;
  }
  .btn-contact:hover{opacity:.6;}
  .hero-contact-btn{
    display:inline-block; margin-top:26px; text-decoration:none; background:var(--green); color:#fff;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:500; text-transform:lowercase; letter-spacing:.01em;
    padding:13px 22px; position:relative; z-index:2; transition:opacity .2s ease;
  }
  .hero-contact-btn:hover{opacity:.75;}

  /* sits under the about intro, above the service bullets */
  .contact-cta-btn{
    margin-top:6px;
    display:inline-block; text-decoration:none; background:var(--green); color:#fff;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:500;
    text-transform:lowercase; letter-spacing:.01em; padding:15px 34px;
    transition:opacity .2s ease;
  }
  .contact-cta-btn:hover{opacity:.75;}

  main{position:relative; z-index:1;}

  /* HERO - quiet, lots of negative space, wordmark + bullets left, description boxed right.
     pinned via sticky inside .hero-track: holds in place while the scrim darkens, and
     only resumes scrolling once that finishes - see initHeroPin(). */
  .hero-track{position:relative; width:100%;}
  .hero{min-height:calc(100vh - var(--header-h, 78px)); display:flex; align-items:center; padding-top:40px; padding-bottom:60px; position:sticky; top:var(--header-h, 78px);}
  .hero-inner{
    position:relative; width:100%; display:flex; flex-direction:column;
    align-items:stretch; gap:24px;
  }
  .hero-left{flex:0 1 auto; margin-top:16px;}
  .hero h1{
    font-family:Arial, Helvetica, sans-serif; font-weight:700; text-transform:lowercase;
    font-size:clamp(38px,6vw,72px); position:relative; z-index:2; letter-spacing:-0.01em;
  }
  .hero-left ul.services{margin-top:16px; display:flex; flex-direction:column; gap:6px;}
  .hero-left ul.services li{font-size:12.5px; font-weight:600; padding-left:20px; position:relative;}
  .hero-left ul.services li::before{content:""; position:absolute; left:0; top:0.28em; width:11px; height:11px; background-color:var(--green); -webkit-mask:var(--star-svg) no-repeat center/contain; mask:var(--star-svg) no-repeat center/contain;}

  .hero-right{
    position:relative; align-self:flex-end; width:100%; max-width:460px; min-height:180px;
    display:flex; align-items:center; justify-content:flex-end;
  }
  .hero-product-shot{
    position:absolute; left:54%; top:57%; width:min(320px,30vw); z-index:1;
    transform:translate(-50%, calc(-50% + var(--py, 0px))); will-change:transform, opacity;
  }
  .hero-product-shot.is-pinned{
    position:fixed; left:54%; top:58%; right:auto; transform:translate(-50%, -50%);
  }
  .hero-description{
    position:relative; width:100%; max-width:280px; z-index:2; padding-top:0;
    pointer-events:none;
  }
  .hero-description .tagline{
    font-size:13.5px; line-height:1.65;
  }
  .scroll-cue{
    position:fixed; bottom:28px; right:28px; z-index:40; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:lowercase; color:var(--text-green);
    opacity:.85; animation:scrollCueBounce 1.8s ease-in-out infinite;
    transition:opacity .3s ease;
  }
  .scroll-cue.is-hidden{opacity:0;}
  .scroll-cue svg{width:22px; height:22px; display:block;}
  @keyframes scrollCueBounce{
    0%, 100%{transform:translateY(0);}
    50%{transform:translateY(10px);}
  }

  /* generic section heading - small type, lots of air */
  .section{padding:48px 0 40px;}
  .section.alt{background:var(--paper);}

  /* scroll-linked scrim: starts invisible (white shows through) and darkens as
     you scroll through the section - see initSectionScrim(). sits behind the
     section's own normal-flow content via negative z-index, above its white
     background, so nothing else needs restacking. */
  .section-scrim{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:var(--dark-bg); opacity:0; will-change:opacity;
  }
  /* flush seams: design -> production -> campaigns run straight into each other */
  #design{padding-bottom:0;}
  #production{padding-top:0; padding-bottom:0;}
  #production .prod-zoom-track{margin-top:0; margin-bottom:0;}
  #campaigns{padding-top:0;}
  /* same decorative grid as the hero, so it reads as one continuous backdrop */
  #production{
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 64px 64px;
  }
  .kicker{display:none;}
  .section h2{margin-bottom:26px;}
  .section .lede{max-width:480px; font-size:14px; margin-bottom:56px; opacity:.9;}
  .section .lede b{color:var(--green); font-weight:700;}

  /* icon defs are visually hidden */
  .icon-defs{position:absolute; width:0; height:0; overflow:hidden;}


  .design-explore-cta{display:flex; justify-content:center; margin-top:48px;}
  .design-explore-btn{
    display:inline-block; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; text-transform:lowercase;
    letter-spacing:.02em; color:var(--green); background:transparent; border:1.5px solid var(--green);
    border-radius:0; padding:14px 30px; cursor:pointer; text-decoration:none;
    transition:background .2s ease, color .2s ease;
  }
  .design-explore-btn:hover{background:var(--green); color:var(--dark-bg);}

  /* PRODUCTION - dense flood, straight photos, no boxes, varied sizes */
  .flood{
    display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:90px; grid-auto-flow:dense; gap:16px;
  }
  .flood .tile{
    position:relative; overflow:hidden;
    display:flex; align-items:flex-end; background:var(--green-tint); color:var(--text-green);
  }
  .flood .tile.big{grid-column:span 3; grid-row:span 4;}
  .flood .tile.med{grid-column:span 2; grid-row:span 2;}
  .flood .tile.sml{grid-column:span 1; grid-row:span 1;}
  .flood .tile img{display:block; width:100%; height:100%; object-fit:cover;}
  .flood .tile .cap{
    position:relative; z-index:2; width:100%; padding:8px 10px; font-size:11px; font-weight:700;
    text-transform:lowercase; letter-spacing:.01em; background:linear-gradient(transparent, rgba(255,255,255,.92));
  }
  .flood .tile .ico{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.5;}
  .flood .tile .ico svg{width:32%; height:32%;}
  .flood .tile.photo .cap{background:linear-gradient(transparent, rgba(0,0,0,.55)); color:#fff;}

  /* PRODUCTION ZOOM - pinned scroll-linked zoom-out canvas, transparent cutouts.
     100vh sticky + 36vh for the zoom itself + 16vh keeping the box pinned (full
     screen, not yet exiting) to fade the scrim all the way in before the section
     is allowed to start scrolling away - see updateZoom() / SCRIM_VH. */
  .prod-zoom-track{
    position:relative; height:152vh; margin-top:24px;
  }
  .prod-zoom-sticky{
    position:sticky; top:0; height:100vh; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .prod-zoom-canvas{
    position:absolute; left:50%; top:50%; will-change:transform;
  }
  /* covers the full sticky box (not just an edge) once fully zoomed out and
     still scrolling - see updateZoom(). sits above the product grid, below
     the text, and never goes fully opaque */
  .prod-zoom-scrim{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    background:rgba(7,22,15,.85); opacity:0;
  }
  .prod-text-overlay{
    position:absolute; top:92px; left:0; right:0; z-index:5;
    padding:0 32px; pointer-events:none; max-width:520px;
  }
  .zoom-tile{
    position:absolute; display:flex; align-items:center; justify-content:center; padding:10px;
  }
  .zoom-tile img{
    max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  }

  /* POP UPS - editorial spread. copy is stepped in on the left, the hero poster runs
     off the right edge of the screen, and the supporting shots sit along the bottom,
     spilling over the hero's lower-left corner so the two blocks interlock. */
  .popup-spread{
    display:grid;
    grid-template-columns:minmax(0, 46fr) minmax(0, 54fr);
    grid-template-rows:auto auto;
    align-items:start;
    /* left edge lines up with .container's text column; right side runs to the viewport */
    padding-left:max(32px, calc((100% - var(--maxw)) / 2 + 32px));
    margin-bottom:96px;
  }
  .popup-copy{grid-column:1; grid-row:1; padding-right:48px; max-width:660px;}
  .popup-copy h3{font-size:19px; margin:0 0 14px 40px; text-transform:lowercase;}
  .popup-copy h2{margin-bottom:56px;}
  .popup-copy ul{display:flex; flex-direction:column; gap:8px; margin-left:76px;}
  .popup-copy ul li{font-size:13.5px; color:var(--text-green); padding-left:20px; position:relative;}
  .popup-copy ul li::before{
    content:""; position:absolute; left:0; top:0.25em; width:11px; height:11px;
    background-color:var(--green); -webkit-mask:var(--star-svg) no-repeat center/contain; mask:var(--star-svg) no-repeat center/contain;
  }
  .popup-hero{grid-column:2; grid-row:1 / span 2; z-index:1;}
  .popup-hero img{display:block; width:100%; height:auto;}
  .popup-support{
    grid-column:1; grid-row:2; position:relative; z-index:2;
    display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;
    margin-top:56px; width:116%;
  }
  .popup-shot{flex:1 1 190px; min-width:0;}
  .popup-shot img{display:block; width:100%; height:auto;}

  /* PARTNERSHIPS - editorial spreads after the book references: pieces sit off-grid at
     mixed scale with a lot of air around them, flat green accents as compositional
     blocks, and small green captions set beside each piece. percentage-based canvas so
     every position scales together; images keep their own ratio and are never cropped. */
  .partner-canvas{position:relative; width:100%; margin-bottom:56px; padding-bottom:var(--pb);}
  .partner-piece{position:absolute; z-index:2; left:var(--l); top:var(--t); width:var(--w);}
  .partner-piece img, .partner-piece video{display:block; width:100%; height:auto;}
  .partner-cap{
    position:absolute; z-index:4; left:var(--l); top:var(--t); width:var(--w);
    font-size:11.5px; font-weight:600; line-height:1.35; letter-spacing:.01em;
    color:var(--text-green);
  }

  /* COLLAGE - shared scattered-masonry system for campaigns, activations, partnerships */
  .collage-group{margin-bottom:90px;}
  .collage-group-head{max-width:640px; margin-bottom:32px;}
  .collage-group-head h3{font-size:19px; margin-bottom:14px; text-transform:lowercase;}
  .collage-group-head ul{display:flex; flex-direction:column; gap:8px;}
  .collage-group-head ul li{font-size:13.5px; color:var(--text-green); padding-left:20px; position:relative;}
  .collage-group-head ul li::before{
    content:""; position:absolute; left:0; top:0.25em; width:11px; height:11px;
    background-color:var(--green); -webkit-mask:var(--star-svg) no-repeat center/contain; mask:var(--star-svg) no-repeat center/contain;
  }
  .collage-masonry{column-count:4; column-gap:28px;}
  .collage-item{break-inside:avoid; margin-bottom:28px;}
  .collage-item img, .collage-item video{display:block; width:100%; height:auto;}
  .collage-item.featured{column-span:all; max-width:66%; margin:6px auto 34px;}
  .collage-label{
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:90px; padding:20px 10px;
  }
  .collage-label span{
    font-size:15px; font-weight:800; text-transform:lowercase; letter-spacing:.01em; color:var(--green);
  }

  .skip-btn{
    position:fixed; bottom:32px; right:32px; z-index:40;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700; text-transform:lowercase;
    color:var(--green); background:none; text-decoration:none;
    display:flex; align-items:center; gap:8px; padding:0;
    box-shadow:none; transition:opacity .2s ease;
  }
  .skip-btn:hover{opacity:.7;}
  .skip-btn.hidden{display:none;}
  .skip-arrow-down{display:inline-block; font-size:14px;}

  /* MOSAIC - dense tiled collage, clean edges, no overlap/shadow */
  .design-mosaic{position:relative; width:100%; padding-bottom:108%; margin-bottom:64px; overflow:hidden;}
  .mosaic-tile{position:absolute; overflow:hidden; will-change:transform;}
  .mosaic-tile img, .mosaic-tile video{display:block; width:100%; height:100%; object-fit:contain;}
  .mosaic-tile.bg-cover{left:0; top:0; width:100%; height:100%;}
  .mosaic-tile.bg-cover img, .mosaic-tile.bg-cover video{object-fit:cover;}
  .design-text-overlay{overflow:visible !important; padding:0;}
  /* thin green rule around the copy, no fill - the frame sits over whatever is behind it */
  .framed-copy{border:1px solid var(--green); padding:18px 20px; background:none;}
  .framed-copy .lede{margin:0 0 14px;}
  .framed-copy .lede:last-child{margin-bottom:0;}
  .design-text-overlay .lede{color:var(--green); margin-bottom:14px;}
  .design-text-overlay .lede:last-child{margin-bottom:0;}

  /* DESIGN SCROLL - background photo pinned via sticky, items animate over it as the track scrolls */
  .design-scroll-track{position:relative; width:100vw; margin-left:calc(50% - 50vw); height:320vh;}
  .design-scroll-sticky{position:sticky; top:0; width:100%; height:100vh; overflow:hidden;}
  /* natural size at full width (never cropped/scaled) - taller than the sticky viewport,
     so JS pans it upward as the track scrolls, ending on the image's bottom edge */
  /* --pan is driven by JS; keeping it a variable lets mobile add its own centring translate */
  .design-bg-image{
    position:absolute; top:0; left:0; width:100%; height:auto; z-index:1; display:block;
    transform:translateY(var(--pan, 0px)); will-change:transform;
  }
  /* dark scrim at the bottom of the design photo so the lede copy stays readable
     once the track scrolls it down over a busy part of the image. invisible at
     first - JS fades it in as the last couple of shirts settle into place, via
     --grad-opacity, so it isn't there before it's needed */
  #designScrollSticky::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
    background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.96));
    opacity:var(--grad-opacity, 0);
    pointer-events:none; z-index:3;
  }
  /* sized a little taller than the sticky box so it has room to drift behind the overlays */
  .campaigns-bg-video{
    position:absolute; top:0; left:0; width:100%; height:112%; object-fit:cover; z-index:1; display:block;
    transform:translateY(var(--pan, 0px)); will-change:transform;
  }
  .design-scroll-item{position:absolute; will-change:transform;}
  .design-scroll-item img, .design-scroll-item video{display:block; width:100%; height:auto;}
  /* static - no transform applied by JS, so it simply holds its spot once the sticky
     box has pinned, reading as "stuck to the screen" until a faster item's z-index covers it */
  .design-scroll-title{
    position:absolute; font-family:Arial, Helvetica, sans-serif; font-weight:700; text-transform:lowercase;
    font-size:clamp(28px,4vw,48px); letter-spacing:-0.01em; color:var(--green); margin:0;
  }

  /* SPREADS - layered collage: one background media with smaller media pinned on top */
  /* boxes are sized to each asset's own natural proportions, no crop, no letterboxing */
  .spread{position:relative; width:100%; margin-bottom:64px;}
  .spread-bg{position:relative; width:100%; overflow:hidden;}
  .spread-bg img, .spread-bg video{display:block; width:100%; height:auto;}
  .spread-overlay{
    position:absolute; overflow:hidden; z-index:2;
  }
  .spread-overlay img, .spread-overlay video{display:block; width:100%; height:auto;}
  .ov-tl{top:4%; left:4%; width:27%; z-index:3;}
  .ov-tr{top:5%; right:5%; width:24%; z-index:3;}
  .ov-bl{bottom:6%; left:6%; width:23%; z-index:3;}
  .ov-br{bottom:5%; right:6%; width:29%; z-index:3;}
  .ov-mc{top:32%; left:34%; width:27%; z-index:4;}
  .ov-ml{top:42%; left:1%; width:20%; z-index:3;}
  .ov-mr{top:38%; right:2%; width:23%; z-index:3;}
  .ov-bc{bottom:4%; left:38%; width:24%; z-index:3;}

  /* video: hidden native controls until hover */
  .spread video, .collage-item video{outline:none;}

  /* CLIENTS */
  .clients-title{
    font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:lowercase;
    color:var(--text-green); margin-top:56px; margin-bottom:20px;
  }
  /* edge-to-edge strip: logos spread the full viewport width, one line on desktop */
  .clients-strip{
    width:100%; padding:26px 0 34px;
    border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  }
  .clients-strip .clients-title{margin:0 0 18px; padding:0 clamp(16px,3vw,40px);}
  .clients-row{
    display:flex; flex-wrap:nowrap; align-items:flex-end;
    justify-content:space-between; gap:clamp(12px,2.5vw,48px);
    width:100%; padding:0 clamp(16px,3vw,40px);
  }
  .clients-row .client-card{flex:1 1 0; min-width:0;}
  .client-card{
    text-decoration:none; color:var(--text-green);
    display:flex; flex-direction:column; gap:10px;
  }
  .client-card img, .client-card svg{
    height:clamp(44px,6.4vw,88px); width:100%; max-width:100%;
    object-fit:contain; object-position:center; color:var(--text-green);
  }
  .client-card:hover svg{color:var(--green);}
  .client-card-static{cursor:default;}
  .client-card small{color:var(--text-green); opacity:.7; font-weight:700; letter-spacing:.01em; text-transform:lowercase; font-size:11px;}

  /* ABOUT / BIO */
  .bio-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start;}
  /* two of the logos have their own white backing baked into the image, so
     rather than editing them, this strip stays a plain white band, exempt
     from the section's own darkening scrim */
  .bio-wrap .clients-strip{
    grid-column:1 / -1; position:relative; z-index:1; background:var(--paper);
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
  .bio-groups{display:grid; grid-template-columns:1fr 1fr; gap:26px 34px;}
  .bio-group h4{font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:lowercase; color:var(--text-green); margin-bottom:8px;}
  .bio-group ul li{font-size:13px; margin-bottom:5px; padding-left:18px; position:relative;}
  .bio-group ul li::before{
    content:""; position:absolute; left:0; top:0.2em; width:10px; height:10px;
    background-color:var(--green); -webkit-mask:var(--star-svg) no-repeat center/contain; mask:var(--star-svg) no-repeat center/contain;
  }

  /* NEWSLETTER - floating, no box */
  .form-note{font-size:12px; opacity:.65; margin-top:10px;}
  .form-note:empty{display:none;}
  .form-note.is-ok{opacity:1; font-weight:600;}
  .form-note.is-error{opacity:1; font-weight:600;}
  /* honeypot - hidden from people, still filled in by most bots */
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .contact-line{margin-top:28px; font-size:14px;}
  .contact-line a{color:var(--green); font-weight:700; text-decoration:underline;}

  /* CONTACT PAGE */
  .contact-hero{padding:150px 0 60px;}
  .contact-hero h1{font-size:clamp(34px,5vw,58px); margin-bottom:18px; text-transform:lowercase;}
  .contact-hero .lede{max-width:480px; font-size:14px;}
  .contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; padding-bottom:130px;}
  .contact-form-card{padding:0;}
  form.contact-form{display:flex; flex-direction:column; gap:20px;}
  form.contact-form label{font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:lowercase; color:var(--text-green); margin-bottom:6px; display:block;}
  form.contact-form input, form.contact-form textarea{
    width:100%; font-family:inherit; font-size:14px; padding:10px 2px; background:transparent;
    border:none; border-bottom:1px solid var(--text-green); resize:vertical; color:var(--text-green);
  }
  form.contact-form input::placeholder, form.contact-form textarea::placeholder{color:var(--text-green); opacity:.5;}
  form.contact-form textarea{min-height:120px;}
  form.contact-form button{
    align-self:flex-start; font-family:'Inter',sans-serif; font-weight:500; font-size:13px; letter-spacing:.01em; text-transform:lowercase; color:#fff;
    background:var(--green); border:none; padding:15px 28px; cursor:pointer; transition:opacity .2s ease;
  }
  form.contact-form button:hover{opacity:.75;}
  .contact-side h3{font-size:12px; letter-spacing:.02em; text-transform:lowercase; color:var(--text-green); margin-bottom:10px;}
  .contact-side p{font-size:14px;}
  .contact-side a{color:var(--green); font-weight:700; text-decoration:underline;}
  .contact-side .block{margin-bottom:32px;}

  footer{
    padding:34px 0; font-size:12px; text-transform:lowercase;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    background:var(--dark-bg);
  }
  footer > span{opacity:.7;}

  @media (max-width: 900px){
    nav.links{display:none;}
    /* the takeover is position:fixed - without their own stacking context these
       two (being plain static, unpositioned elements) would paint underneath it
       even though its z-index is lower, since positioned always beats static */
    .logo, .btn-contact{position:relative; z-index:50;}
    nav.links.nav-open{
      display:flex; flex-direction:column; justify-content:center; gap:22px;
      position:fixed; inset:0; z-index:45;
      background:var(--dark-bg); padding:0 32px;
    }
    nav.links.nav-open a{
      font-family:Arial, Helvetica, sans-serif; font-weight:700; text-transform:lowercase;
      letter-spacing:-0.01em; font-size:clamp(32px,9vw,52px); padding:0; border-bottom:none;
    }
    .nav-toggle{display:inline-block; position:relative; z-index:50;}
    .section{padding:70px 0 60px;}
    .hero{flex-direction:column; align-items:stretch; padding-top:24px; padding-bottom:32px;}
    .hero-right{position:static; max-width:100%; margin-top:32px; justify-content:center;}
    .hero-product-shot{
      position:absolute; top:-30px; right:0; left:auto; width:190px;
      transform:translateY(var(--py, 0px));
    }
    .hero-product-shot.is-pinned{
      position:fixed; top:90px; right:14px; left:auto; width:130px; transform:none;
    }
    .hero-description{max-width:100%; text-align:right;}
    /* pop-ups: same composition as desktop, re-staged narrow. copy stepped in, hero
       still running off the right edge, support shots cascading at uneven widths and
       offsets rather than sitting in a tidy row */
    .popup-spread{
      display:block; padding-left:0; margin-bottom:46px;
    }
    .popup-copy{padding:0 20px; max-width:none;}
    .popup-copy h2{margin-bottom:22px;}
    .popup-copy h3{margin-left:16px;}
    .popup-copy ul{margin-left:34px;}
    .popup-hero{position:relative; z-index:1;}
    .popup-shot{width:auto !important; margin:0 !important;}

    /* HEADACHE: flyer stays put. the two shots pull up to sit just below
       where the flyer's own text block ends (one line-height of gap),
       covering the empty black space beneath it. no cropping - both
       shots are scaled to the same height with their proportions intact */
    .popup-spread--headache .popup-hero{width:78%; margin:26px 4% 10px auto; position:relative; z-index:1;}
    .popup-spread--headache .popup-support{
      display:flex; gap:6px; width:auto; margin:-44% 0 0 4%;
      align-items:flex-start; position:relative; z-index:2;
    }
    .popup-spread--headache .popup-shot{width:auto !important; margin:0 !important; flex:0 0 auto !important;}
    .popup-spread--headache .popup-shot img{height:188px; width:auto; object-fit:contain;}

    /* BICEP: hero bigger still and bled flush to the right edge of the
       screen. grid pulled up to overlap the hero's bottom. bullets back
       on the right hand side, also pulled up so they sit on top of the
       hero image instead of in the empty space below it. */
    .popup-spread--bicep{
      display:grid; grid-template-columns:1.5fr 1fr; column-gap:12px; row-gap:8px;
      padding:0 12px; align-items:start; margin-bottom:-100px;
    }
    .popup-spread--bicep .popup-copy{display:contents;}
    .popup-spread--bicep .popup-copy h3{grid-column:1 / -1; grid-row:1; margin:0 0 24px;}
    .popup-spread--bicep .popup-hero{
      grid-column:1 / -1; grid-row:2; width:76%; margin:0 -12px 26px auto;
    }
    .popup-spread--bicep .popup-support{
      grid-column:1; grid-row:3; margin-top:-115%; position:relative; z-index:1;
      display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto; gap:10px;
    }
    .popup-spread--bicep .popup-shot{width:auto !important; margin:0 !important;}
    .popup-spread--bicep .popup-copy ul{
      grid-column:2; grid-row:3; align-self:start; margin-top:-30%;
      padding:10px; position:relative; z-index:3;
      background:none; will-change:transform;
    }
    .popup-spread--bicep .popup-copy ul li{font-size:12px; margin-bottom:16px;}
    .popup-spread--bicep .popup-copy ul li:last-child{margin-bottom:0;}
    /* partnerships: keep the canvas, swap in each piece's own mobile position so the
       spread is re-composed for a narrow screen instead of collapsing to a stack */
    #partnerships .lede{margin-bottom:24px;}
    .partner-canvas{padding-bottom:var(--mpb); margin-bottom:34px;}
    .partner-piece, .partner-cap{
      left:var(--ml); top:var(--mt); width:var(--mw);
    }
    .partner-cap{font-size:11px;}
    /* clients: two rows of three, still edge to edge */
    .clients-strip{padding:20px 0 24px;}
    .clients-strip .clients-title{padding:0 16px; margin-bottom:14px;}
    .clients-row{
      flex-wrap:wrap; justify-content:flex-start;
      row-gap:22px; column-gap:0; padding:0 16px;
    }
    .clients-row .client-card{flex:0 0 33.333%; align-items:center; text-align:center;}
    .client-card img, .client-card svg{height:clamp(40px,13vw,68px);}
    .collage-masonry{column-count:2;}
    .collage-item.featured{max-width:100%;}
    .bio-wrap{grid-template-columns:1fr;}
    .bio-groups{grid-template-columns:1fr;}
      .contact-wrap{grid-template-columns:1fr;}
    .spread{display:flex; flex-direction:column; gap:16px;}
    .spread-overlay{
      position:static !important; width:60% !important;
      margin-left:auto; margin-right:auto;
    }
    .design-mosaic{padding-bottom:0 !important; height:auto !important; margin-bottom:24px; display:flex; flex-direction:column; overflow:visible; padding-top:10px;}
    .mosaic-tile.bg-cover{position:static !important; width:100% !important; height:auto !important;}
    .mosaic-tile.bg-cover img{object-fit:contain;}
    /* SCROLL SECTIONS ON MOBILE - same pinned mechanics as desktop, just reframed:
       the background crops to the sides instead of fitting the full width, and each
       item picks up its own data-m-* position (applied by JS) so it reads when narrow */
    .design-scroll-track{height:260vh !important; margin-bottom:0;}
    .design-scroll-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:block;}
    /* screen-width box, but taller than the viewport: object-fit:cover trims the sides
       (the crop) while the extra height is the room the JS pan drifts through */
    .design-bg-image,
    .campaigns-bg-video{
      position:absolute; top:0; left:0; width:100%; height:118%; max-width:none;
      object-fit:cover; transform:translateY(var(--pan, 0px));
    }
    /* no !important on box properties here - JS writes top/left/right/width inline */
    .design-scroll-item{position:absolute; margin:0;}
    .design-scroll-item.design-text-overlay .lede{color:var(--green); font-size:13px;}
    /* the title keeps a fixed inline top, so this one does need to win */
    .design-scroll-title{
      position:absolute; margin:0; top:84px !important; max-width:80%;
      font-size:clamp(21px, 6.6vw, 34px);
    }
    .mosaic-tile{
      position:static !important; height:auto !important; transform:none !important;
      width:82% !important; margin:-22px auto 0 !important;
    }
    .mosaic-tile:first-child{margin-top:0 !important;}
    .mosaic-tile img, .mosaic-tile video{height:auto;}
    .mosaic-tile[data-size="lg"]{width:96% !important; margin-left:auto !important; margin-right:auto !important;}
    .mosaic-tile[data-size="md"]{width:70% !important;}
    .mosaic-tile[data-size="sm"]{width:52% !important;}
    .mosaic-tile[data-align="l"]{margin-left:2% !important; margin-right:auto !important;}
    .mosaic-tile[data-align="r"]{margin-left:auto !important; margin-right:2% !important;}
    .mosaic-tile[data-size="md"]:not([data-align]), .mosaic-tile[data-size="sm"]:not([data-align]){margin-left:6% !important; margin-right:auto !important;}
    .mosaic-compact .mosaic-tile{margin-top:-38px !important;}
    .mosaic-compact .mosaic-tile[data-size="lg"]{width:56% !important;}
    .mosaic-compact .mosaic-tile[data-size="md"]{width:40% !important;}
    .mosaic-compact .mosaic-tile[data-size="sm"]{width:30% !important;}
    .skip-btn{left:20px; right:auto; bottom:20px;}
  }
  @media (max-width: 560px){
    .collage-masonry{column-count:1;}
    .spread-overlay{width:85% !important;}
  }