:root{
    --paper:#f4efe6;      /* warm packing paper */
    --kraft:#d9c39c;      /* cardboard */
    --kraft-deep:#c4a878; /* box edge */
    --ink:#191713;        /* marker-pen black */
    --tape:#2b46ff;       /* parcel strapping blue — the accent */
    --stamp:#c8372d;      /* rubber-stamp red, used tiny */
    --maxw:1160px;
    /* ==== FEEDBACK TILE TONES — change these three lines to recolour the whole wall ==== */
    --tone-1:#ffffff;   /* white */
    --tone-2:#ece0c8;   /* light sand */
    --tone-3:#d9c39c;   /* kraft brown */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  section{padding:100px 0}

  .mono{font-family:'IBM Plex Mono',monospace}
  .label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6d6558}
  h2{font-family:'Anton',sans-serif;font-size:clamp(38px,5.4vw,66px);line-height:1;text-transform:uppercase;letter-spacing:.01em;margin:12px 0 20px}
  h2 .mk{font-family:'Permanent Marker',cursive;text-transform:none;color:var(--tape);font-size:.92em}

  .btn{display:inline-block;background:var(--ink);color:var(--paper);font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:16px 30px;border:2px solid var(--ink);cursor:pointer;transition:all .15s}
  .btn:hover{background:var(--tape);border-color:var(--tape);color:#fff}
  .btn.ghost{background:transparent;color:var(--ink)}
  .btn.ghost:hover{background:var(--ink);color:var(--paper)}

  /* tape strips — torn ends, plastic sheen, slight see-through: buff-brown packing tape */
  .tape{position:absolute;height:28px;width:120px;
    background:linear-gradient(100deg,rgba(172,124,70,.72) 0%,rgba(198,154,100,.82) 45%,rgba(166,118,66,.7) 100%);
    box-shadow:0 2px 5px rgba(0,0,0,.2);
    clip-path:polygon(1.5% 0,98% 3%,100% 26%,97.5% 52%,100% 74%,98.5% 100%,2.5% 97%,0 72%,2% 48%,.5% 22%);
  }
  .tape::before{content:"";position:absolute;inset:0;
    background:
      linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 48%,rgba(255,255,255,.08) 54%,transparent 62%),
      repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.07) 9px 10px);
  }

  .barcode{height:34px;width:130px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 14px)}

  /* ---------- PRELOADER : 404 / NOT FOUND → unboxed ---------- */
  .preloader{display:none}
  body.preloading{overflow:hidden}
  .preloading .preloader{display:flex;position:fixed;inset:0;z-index:100;background:var(--paper);flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:translate .38s cubic-bezier(.7,0,.3,1)}
  .preloader.up{translate:0 -100%}
  .pre-digits{font-family:'Anton',sans-serif;font-size:clamp(96px,16vw,180px);line-height:1;color:var(--ink);display:flex}
  .pre-digits span{width:.62em;text-align:center}
  .pre-flip{perspective:600px}
  .pre-flip-inner{position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1)}
  .pre-flip.flip .pre-flip-inner{transform:rotateX(180deg)}
  .pre-face{display:flex;align-items:center;justify-content:center;padding:9px 20px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .pre-front{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.22em;border:2px solid var(--ink);color:var(--ink)}
  .pre-back{position:absolute;inset:0;transform:rotateX(180deg);font-family:'Permanent Marker',cursive;font-size:44px;color:var(--tape)}
  /* hold the load-in animations (hero beats, tape slap, nav handwrite) until the wipe finishes */
  .preloading .hero-content>*,.preloading .hero-sub em::before,.preloading nav .brand-sub{animation-play-state:paused}

  /* ---------- NAV : styled as the top of a shipping label ---------- */
  nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--ink)}
  .nav-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
  .brand{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
  .brand .brand-word{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.02em;color:var(--ink)}
  .brand .brand-sub{font-family:'Permanent Marker',cursive;font-size:13px;color:var(--tape);margin-top:3px}
  .brand-sm .brand-word{font-size:18px}
  .brand-sm .brand-sub{font-size:11px}
  /* "UGC with Jay" writes itself on load — word-by-word wipe, like the pen laying it down */
  nav .brand-sub{animation:handwrite 1.2s linear .4s both}
  @keyframes handwrite{
    0%{clip-path:inset(-10% 102% -10% -2%)}
    32%{clip-path:inset(-10% 64% -10% -2%)}   /* "UGC" */
    44%{clip-path:inset(-10% 64% -10% -2%)}   /* pen lifts */
    66%{clip-path:inset(-10% 32% -10% -2%)}   /* "with" */
    76%{clip-path:inset(-10% 32% -10% -2%)}   /* pen lifts */
    100%{clip-path:inset(-10% -2% -10% -2%)}  /* "Jay" */
  }
  /* centred absolutely so the links line up with the middle video panel (true page centre) */
  .nav-links{display:flex;gap:26px;position:absolute;left:50%;top:50%;translate:-50% -50%}
  .nav-links a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
  .nav-links a:hover{color:var(--tape)}
  .nav-cta{font-size:11px;padding:11px 18px;white-space:nowrap}
  .nav-right{display:flex;align-items:center;gap:18px}
  @media(max-width:520px){
    .nav-inner{padding:12px 16px;gap:12px}
    .nav-right{gap:12px}
    .nav-cta{font-size:10px;padding:10px 12px}
  }
  .nav-ico{display:flex;align-items:center;justify-content:center;color:var(--ink);transition:opacity .15s}
  .nav-ico:hover{opacity:.6}
  .nav-ico svg{width:20px;height:20px;display:block}
  @media(max-width:960px){.nav-links{display:none}}

  /* ---------- HERO : your triple-video background, kept — but bright, with poster type over it ---------- */
  .hero{position:relative;min-height:94vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:0 0 84px;text-align:center}
  .hero-panels{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;background:var(--ink)}
  .panel{position:relative;background:linear-gradient(160deg,#3a3f4a 0%,#23262d 55%,#15161a 100%);overflow:hidden}
  .panel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
  /* kill Safari's "tap to play" overlay button on autoplay-blocked video */
  .panel-video::-webkit-media-controls{display:none!important}
  .panel-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
  /* targeted scrim: dark only behind the copy column, full video strength at the outer edges —
     contrast where the text needs it, zero cost everywhere else */
  .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse 50% 60% at 50% 72%,rgba(8,7,6,.82) 0%,rgba(8,7,6,.65) 72%,rgba(8,7,6,0) 105%);
  }
  .hero::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,rgba(20,18,14,.55) 55%,rgba(20,18,14,.72));z-index:1}
  /* the hand-off: page fades from video straight into packing paper */
  .hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:12px;background:var(--paper);z-index:2}
  .tc{position:absolute;top:18px;left:18px;font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.18em;color:rgba(244,239,230,.85);display:flex;align-items:center;gap:8px;z-index:2}
  .tc i{width:7px;height:7px;border-radius:50%;background:var(--stamp);animation:pulse 1.4s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  .hero-content{position:relative;z-index:3;max-width:900px;padding:0 24px}
  .hero-kicker{display:inline-flex;align-items:center;gap:12px;border:2px solid var(--paper);padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:rgba(20,18,14,.35);backdrop-filter:blur(4px)}
  .hero-kicker b{color:#ffb3ad}
  h1{font-family:'Anton',sans-serif;font-size:clamp(64px,11vw,150px);line-height:.92;text-transform:uppercase;color:var(--paper);margin:22px 0 18px}
  .hero-sub{font-family:'Permanent Marker',cursive;font-size:clamp(20px,2.6vw,30px);color:var(--paper);transform:rotate(-1.5deg)}
  .hero-sub em{font-style:normal;position:relative;display:inline-block;background:var(--kraft);color:var(--ink);border:2px solid var(--ink);padding:4px 20px 6px;margin:0 6px;transform:rotate(-2deg);box-shadow:5px 5px 0 rgba(0,0,0,.4)}
  /* full blue tape strip sealing the label to the "box" — overhangs both sides, torn ends, plastic sheen */
  .hero-sub em::before{content:"";position:absolute;top:-12px;left:-14%;width:128%;height:22px;transform:rotate(-3.5deg);pointer-events:none;
    background:
      linear-gradient(105deg,transparent 36%,rgba(255,255,255,.32) 46%,rgba(255,255,255,.1) 53%,transparent 62%),
      repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.08) 10px 11px),
      linear-gradient(100deg,rgba(172,124,70,.78) 0%,rgba(198,154,100,.88) 45%,rgba(166,118,66,.76) 100%);
    box-shadow:0 2px 5px rgba(0,0,0,.26);
    clip-path:polygon(1.5% 0,98% 4%,100% 26%,97.5% 52%,100% 76%,98.5% 100%,2.5% 96%,0 70%,2% 46%,.5% 20%);
  }
  .hero-ctas{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .hero .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  .hero .btn:hover{background:var(--tape);border-color:var(--tape);color:#fff}
  .hero .btn.ghost{background:transparent;color:var(--paper)}
  .hero .btn.ghost:hover{background:var(--paper);color:var(--ink)}
  @media(max-width:700px){.hero-panels{grid-template-columns:1fr}.panel:not(.mid-p){display:none}}

  /* parcel styling kept for the About section photo */
  .parcel{position:relative;background:var(--kraft);border:2px solid var(--ink);padding:18px;transform:rotate(1.5deg);box-shadow:8px 8px 0 var(--ink)}
  .parcel .video{aspect-ratio:9/16;background:#141414;display:flex;align-items:center;justify-content:center;color:#8a857b;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center;line-height:2}
  .parcel .tape{top:-13px;left:50%;transform:translateX(-50%) rotate(-3deg)}
  .parcel .slip{margin-top:14px;background:#fff;border:1.5px solid var(--ink);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
  .parcel .slip .label{color:var(--ink)}

  /* ---------- TRUSTED BY : full-bleed logo marquee ---------- */
  .shipped{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:#fff;padding:50px 0 52px}
  /* deliberately NO marker/blue here — this is a credibility bar, not a content heading,
     and the marker script was starting to repeat across every section (Jay, 2026-07-26).
     Small quiet monospace label (not the bulky Anton headline) — Jay's call, 2026-07-25 */
  .shipped-title{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
    font-size:clamp(11px,1.15vw,13px);line-height:1.4;text-transform:uppercase;
    letter-spacing:.24em;text-align:center;color:#9a938a;font-weight:500;margin:0}
  /* ONE full-bleed row, edges softly faded. Sits outside .wrap so it runs edge-to-edge. */
  .logo-scroller{overflow:hidden;margin-top:30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  /* track = the set twice; translateX(-50%) swaps set-2 into set-1's place → seamless loop */
  .logo-track{display:flex;width:max-content;animation:logoDrift 60s linear infinite}
  .logo-set{display:flex;align-items:center}
  /* optical sizing is baked into the files (all 150px-tall canvases, content centred), so a
     single display height keeps them balanced AND baseline-aligned. Roomy: 46px each side. */
  .logo{padding:0 46px;display:flex;align-items:center}
  .logo img{height:50px;width:auto;display:block}
  @keyframes logoDrift{to{transform:translateX(-50%)}}

  /* ---------- FEATURED : packing slips ---------- */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
  .case{background:#fff;border:2px solid var(--ink);position:relative;transition:transform .15s}
  .case:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
  .case .tape{top:-13px;left:22px;transform:rotate(-2deg);width:96px}
  .case-video{aspect-ratio:9/12;background:#141414;display:flex;align-items:center;justify-content:center;color:#8a857b;font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
  .case-body{padding:20px 22px 24px}
  .case-tag{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tape);font-weight:600}
  .case-title{font-family:'Anton';font-size:21px;text-transform:uppercase;margin:8px 0}
  .case-body p{font-size:14.5px;color:#3c372e}
  @media(max-width:880px){.cases{grid-template-columns:1fr}}

  /* ---------- PORTFOLIO ---------- */
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
  .chip{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:9px 18px;border:2px solid var(--ink);cursor:pointer;background:transparent;color:var(--ink);transition:all .12s}
  .chip.on,.chip:hover{background:var(--ink);color:var(--paper)}
  /* the work section gets a wider container than the rest of the page — a 1160px cap made
     9:16 tiles tiny on laptops/monitors (Jay, 2026-07-26). Heading + filters widen with it
     so everything stays aligned. */
  #work .wrap{max-width:min(1560px,94vw)}
  .grid{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .tile[hidden]{display:none}
  .tile{position:relative}
  .tile .vid{aspect-ratio:9/16;background:#141414;border:2px solid var(--ink);overflow:hidden;position:relative}
  .tile .vid video{width:100%;height:100%;object-fit:cover;display:block}
  /* play badge over the poster; fades once the clip is running (hover on desktop, tap on mobile) */
  .tile .vid .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:48px;height:48px;
    border-radius:50%;background:rgba(20,20,20,.55);border:2px solid #fff;backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;transition:opacity .25s ease;pointer-events:none}
  .tile .vid .play::before{content:"";border-left:13px solid #fff;border-top:8px solid transparent;
    border-bottom:8px solid transparent;margin-left:3px}
  .tile.playing .vid .play{opacity:0}
  /* mute toggle, bottom-right; only visible while a clip is playing */
  .tile .vid .mute{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
    background:rgba(20,20,20,.55);border:1.5px solid rgba(255,255,255,.85);backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;
    opacity:0;pointer-events:none;transition:opacity .25s ease}
  .tile.playing .vid .mute{opacity:1;pointer-events:auto}
  .tile .vid .mute svg{width:17px;height:17px;display:block}
  .tile .vid .mute .spk{fill:#fff}
  .tile .vid .mute .waves{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
  .tile .vid .mute .slash{stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:0}
  .tile .vid .mute.muted .waves{opacity:0}
  .tile .vid .mute.muted .slash{opacity:1}
  .tile .tag{position:absolute;left:-8px;bottom:16px;background:#fff;border:1.5px solid var(--ink);padding:8px 12px;transform:rotate(-2deg);max-width:88%}
  .tile .tag b{display:block;font-family:'Anton';font-size:13px;text-transform:uppercase;letter-spacing:.03em}
  .tile .tag small{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6d6558}
  /* step down 4 → 3 → 2 columns. Jumping straight to 2 made tiles balloon on tablets. */
  @media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}}

  /* ---------- WHAT I DO : arrow-navigated card carousel (Jay, 2026-07-26) ---------- */
  .wd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .wd-head h2{margin:0}
  .wd-nav{display:flex;align-items:center;gap:14px}
  .progress{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.2em;color:#5c4d33}
  .progress b{color:var(--ink)}
  .wd-arrow{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:26px;line-height:0;padding-bottom:4px;color:var(--ink);background:var(--paper);border:2px solid var(--ink);cursor:pointer;transition:all .15s}
  .wd-arrow:hover:not(:disabled){background:var(--ink);color:var(--paper)}
  .wd-arrow:disabled{opacity:.32;cursor:default}
  /* the carousel: full-bleed viewport, track transform-centred on the active card */
  .wd-viewport{margin-top:30px;overflow:hidden;padding:14px 0 26px}
  /* infinite carousel: the whole flex strip slides as one piece (smooth); JS clones a set on
     each side and silently rebases into the middle so it loops with no teleport. */
  .track{position:relative;display:flex;gap:26px;width:max-content;
    transition:transform .55s cubic-bezier(.3,.8,.3,1);will-change:transform}
  .card{flex:0 0 min(760px,84vw);background:var(--paper);border:2px solid var(--ink);box-shadow:9px 9px 0 rgba(25,23,19,.85);padding:40px 42px 44px;
    opacity:.3;transition:opacity .45s ease}
  .card.is-active{opacity:1}
  /* during the silent rebase: freeze transform AND opacity so the snap is truly invisible (no flash) */
  .track.no-anim,.track.no-anim .card{transition:none!important}
  /* rotations repeat every 3 so each logical card keeps its tilt across the cloned sets */
  .card:nth-child(3n+1){rotate:-.5deg}
  .card:nth-child(3n+2){rotate:.6deg}
  .card:nth-child(3n+3){rotate:-.4deg}
  .card .n{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tape);font-weight:600}
  .card h3{font-family:'Anton';font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;margin:8px 0 16px;line-height:1}
  .card p{font-size:16.5px;line-height:1.75;color:#33302a}
  .card p + p{margin-top:14px}
  .card b{font-weight:700;color:var(--ink)}
  .card .mkline{font-family:'Permanent Marker';color:var(--tape);font-size:1.02em}
  @media(max-width:700px){
    .card{flex-basis:88vw;padding:30px 26px 34px}
    .wd-head{align-items:flex-start}
  }

  /* ---------- FEEDBACK : corner-stats mosaic (ported from reference) ---------- */
  #feedback{padding-top:44px}  /* tight handoff from the walk band above */
  .mosaic-lead{font-size:15.5px;color:#4c463a;max-width:520px;margin-top:4px}
  .mosaic{margin-top:40px;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(128px,auto);gap:18px}
  .mtile{border:2px solid var(--ink);padding:26px;position:relative;display:flex;flex-direction:column;justify-content:space-between}
  .tone1{background:var(--tone-1)}
  .tone2{background:var(--tone-2)}
  .tone3{background:var(--tone-3)}
  /* placement — fills a complete rectangle, tones never repeat side by side */
  .t-vitacoco {grid-column:1 / 4; grid-row:1 / 3}
  .t-larq     {grid-column:4 / 7; grid-row:1}
  .t-notedaromas{grid-column:4 / 7; grid-row:2}
  .t-ordo     {grid-column:1 / 3; grid-row:3}
  .t-deliveroo{grid-column:3 / 5; grid-row:3}
  .t-fca      {grid-column:5 / 7; grid-row:3}
  .said{font-size:15.5px;line-height:1.62}
  .t-vitacoco .said{font-size:clamp(17px,1.9vw,22px);line-height:1.5}
  /* stat-only boxes (Deliveroo, FCA): big number top, brand line bottom */
  .stat .statnum{font-family:'Anton',sans-serif;color:var(--ink);line-height:.88}
  .stat .statnum .num{font-size:clamp(38px,5.4vw,62px);display:block}
  .stat .statnum .statlbl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#6d6558;margin-top:8px;display:block}
  .tfoot{margin-top:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
  .mosaic .n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6d6558;line-height:1.7;font-weight:400}
  .mosaic .n b{display:block;color:var(--ink);font-size:11.5px}
  /* the corner stat — no box, no border */
  .corner{text-align:right;line-height:1}
  .corner .num{font-family:'Anton',sans-serif;font-size:clamp(22px,2.4vw,30px);line-height:.95;display:block}
  .corner .cap{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#6d6558;margin-top:6px;display:block}
  .t-vitacoco .corner .num{font-size:clamp(26px,3vw,38px)}
  /* packing tape — feature tile only (site tape, repositioned) */
  .mosaic .tape{top:-11px;left:22px;width:90px;height:21px;transform:rotate(-2deg);z-index:2}
  @media(max-width:920px){
    .mosaic{grid-template-columns:1fr}
    .mtile{grid-column:1;grid-row:auto}
  }

  /* MOBILE spacing tweaks (phones only — landscape/desktop untouched), Jay 2026-08-01:
     titles sit closer to the top, and the feedback wall is trimmed to 4 tiles +
     tighter spacing so it isn't such a long scroll on a phone. */
  @media(max-width:700px){
    #work{padding-top:52px}
    #what-i-do{padding-top:52px}
    #contact{padding-top:52px}
    #feedback{padding-bottom:60px}
    .mosaic{margin-top:24px;gap:12px}
    .mtile{padding:22px}
    .stat .n{margin-top:26px}   /* breathing room between the big number and the brand line */
    .t-ordo,.t-fca{display:none}   /* keep the 4 strongest: Noted Aromas, LARQ, Vita Coco, Deliveroo */
    /* logo band: cap each logo's WIDTH (wide wordmarks were hogging the row) + tighter
       spacing + faster drift, so 3–4 brands show per glance instead of 2 */
    .logo{padding:0 16px}
    .logo img{height:auto;max-height:30px;max-width:84px;width:auto}
    .logo-track{animation-duration:42s}
  }

  /* ---------- ABOUT ---------- */
  .kraft-section{background:var(--kraft);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .about{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:center}
  .about .parcel{transform:rotate(-1.5deg)}
  .about .parcel .video{aspect-ratio:3/4;position:relative;overflow:hidden}
  /* jay.jpg is pre-cropped to exactly 3:4 and centred on him, so plain centre is correct */
  .about .parcel .video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:1}
  .about .parcel .video .ph{position:relative;z-index:0}
  .about p{font-size:16.5px;color:#3c372e;max-width:560px}
  .about p+p{margin-top:16px}
  .about b{color:var(--ink)}
  @media(max-width:880px){
    .about{grid-template-columns:1fr}
    .about .parcel{max-width:250px;margin-left:auto;margin-right:auto}  /* smaller, centred on phones */
  }

  /* ---------- CONTACT ---------- */
  .contact{display:grid;grid-template-columns:1fr 1fr;gap:70px}
  .contact .lead{font-size:16.5px;color:#3c372e;max-width:440px}
  .contact .email{display:inline-block;margin-top:26px;font-family:'IBM Plex Mono';font-weight:600;font-size:17px;border-bottom:3px solid var(--tape);padding-bottom:2px}
  /* contact form submit status (Web3Forms) */
  .contact .form-status{font-family:'IBM Plex Mono';font-size:13px;line-height:1.55;margin:14px 0 0}
  .contact .form-status:empty{margin:0}
  .contact .form-status.ok{color:#1f7a3d;font-weight:600}
  .contact .form-status.err{color:var(--stamp);font-weight:600}
  /* RECENTLY SHIPPED TO — cycling client logos, left column only */
  .shipped-to{margin-top:44px}
  .shipped-to .micro-label{display:block;font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#6d6558;margin-bottom:16px}
  .stage{position:relative;height:64px;overflow:hidden}
  .stage .item{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;
    filter:grayscale(1) brightness(0) opacity(.62);
    transform:translateY(105%);opacity:0;
    transition:transform .55s cubic-bezier(.3,.8,.25,1), opacity .35s ease}
  .stage .item.on{transform:translateY(0);opacity:1}
  .stage .item.out{transform:translateY(-105%);opacity:0}
  .stage .item img{max-height:30px;width:auto;display:block}
  /* stacked/badge marks (e.g. Vita Coco) read small at 30px — give them more height to match the wordmarks */
  .stage .item img.badge{max-height:46px}
  /* reduced motion: no roll — show all as a static 3-col grid */
  @media(prefers-reduced-motion:reduce){
    .stage{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .stage .item{position:static;transform:none;opacity:1}
  }
  form{display:grid;gap:16px;background:#fff;border:2px solid var(--ink);padding:30px;position:relative}
  form .tape{top:-13px;left:50%;transform:translateX(-50%)}
  label{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6d6558}
  input,textarea,select{width:100%;background:var(--paper);border:2px solid var(--ink);padding:13px 15px;font-family:'Inter';font-size:15px;margin-top:6px;color:var(--ink)}
  input:focus,textarea:focus,select:focus{outline:3px solid var(--tape);outline-offset:-1px}
  @media(max-width:880px){.contact{grid-template-columns:1fr}}

  footer{border-top:2px solid var(--ink);padding:32px 0;background:#fff}
  /* 1fr auto 1fr keeps the copyright line at true page centre, aligned with the nav links */
  .foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
  .foot .brand{justify-self:start}
  .foot .label{color:var(--ink);justify-self:center;text-align:center}
  .foot .barcode{justify-self:end}
  @media(max-width:700px){.foot{grid-template-columns:1fr;justify-items:center;gap:12px}.foot .brand{justify-self:center}}

  /* ---------- SCROLL ANIMATION SYSTEM ---------- */
  /* uses translate/scale properties (not transform) so per-element rotations are never clobbered */
  .rv{opacity:0;translate:0 30px;transition:opacity .65s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;translate:0 0}
  /* phones: reveals a touch quicker than desktop, but still clearly visible as they scroll in */
  @media(max-width:700px){
    .rv{translate:0 24px;transition:opacity .5s ease,translate .55s cubic-bezier(.2,.7,.2,1)}
  }

  /* hero tape gets rolled on left-to-right (like a strip being pressed down) via an animated mask */
  @keyframes tapeRoll{to{-webkit-mask-size:100% 100%;mask-size:100% 100%}}

  /* SOME OF MY WORK: tiles surface row by row, quickly (delays set per-row in JS) */
  .grid .tile.rv{translate:0 14px;transition:opacity .4s ease,translate .45s cubic-bezier(.2,.7,.2,1)}
  .grid .tile.rv.in{translate:0 0}
  .grid .tile.rv .tag{opacity:0;transition:opacity .35s ease .15s}
  .grid .tile.rv.in .tag{opacity:1}

  /* FEEDBACK: tiles assemble in a diagonal cascade; corner stats count up as tiles land */
  .mtile{opacity:0;translate:0 16px;scale:.985;
    transition:opacity .5s ease, translate .55s cubic-bezier(.2,.8,.25,1), scale .55s cubic-bezier(.2,.8,.25,1)}
  .mosaic.in .mtile{opacity:1;translate:0 0;scale:1}
  .mosaic.in .t-vitacoco {transition-delay:0s}
  .mosaic.in .t-larq     {transition-delay:.08s}
  .mosaic.in .t-notedaromas{transition-delay:.16s}
  .mosaic.in .t-ordo     {transition-delay:.24s}
  .mosaic.in .t-deliveroo{transition-delay:.32s}
  .mosaic.in .t-fca      {transition-delay:.4s}



  /* hero: four beats — kicker, name, tagline, buttons */
  .hero-content>*{opacity:0;translate:0 26px;animation:rise .75s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-content>*:nth-child(1){animation-delay:.1s}
  .hero-content>*:nth-child(2){animation-delay:.24s}
  .hero-content>*:nth-child(3){animation-delay:.38s}
  .hero-content>*:nth-child(4){animation-delay:.52s}
  @keyframes rise{to{opacity:1;translate:0 0}}
  /* hero tape rolls on left-to-right just after the tagline lands */
  .hero-sub em::before{
    -webkit-mask:linear-gradient(90deg,#000,#000) left/0% 100% no-repeat;
    mask:linear-gradient(90deg,#000,#000) left/0% 100% no-repeat;
    animation:tapeRoll .6s cubic-bezier(.45,.55,.35,1) 1.1s both}
  /* signature move #5: red scanline sweeps each barcode once */
  .barcode{position:relative;overflow:hidden}
  .barcode.in::after{content:"";position:absolute;top:-10%;bottom:-10%;width:3px;background:var(--stamp);box-shadow:0 0 9px rgba(200,55,45,.85);animation:scan 1.1s ease-in-out .4s both}
  @keyframes scan{from{left:-4%}to{left:102%}}


  @media(prefers-reduced-motion:reduce){
    .rv,.hero-content>*{opacity:1;translate:none;transition:none;animation:none}
    .hero-sub em::before{opacity:1;animation:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
    .barcode.in::after{animation:none}
    /* logo marquee: stop, show ONE set wrapped onto centred lines */
    .logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;max-width:var(--maxw);margin:0 auto;padding:0 20px;transform:none!important}
    .logo-set{flex-wrap:wrap;justify-content:center}
    .logo-set[aria-hidden]{display:none}   /* hide the seamless-loop duplicate */
    .logo-scroller{overflow:visible;mask-image:none;-webkit-mask-image:none}
    .grid .tile.rv .tag{opacity:1;transition:none}
    nav .brand-sub{animation:none;clip-path:none}
    .preloader{display:none!important}
    /* feedback mosaic: static, final numbers filled by the pre-return JS */
    .mtile{opacity:1;translate:none;scale:1;transition:none}
    /* what-i-do carousel: reduced motion → plain vertical stack, all cards shown */
    .wd-viewport{overflow:visible;padding:0}
    .track{flex-direction:column;gap:26px;width:auto;transform:none!important;transition:none;
      max-width:var(--maxw);margin:0 auto;padding:0 28px}
    .card{flex:none;width:auto;opacity:1!important;transition:none}
    .wd-arrow,.progress{display:none}
  }