:root {
    --night:#070b0e; --night-2:#0d1418; --night-line:rgba(255,255,255,.12);
    --paper:#f4f2ed; --paper-2:#e9e6de; --card:#fbfaf7; --line:#dad6cc;
    --ink:#15181b; --ink-2:#4e5359; --ink-3:#83878c;
    --sea:#0e6e66; --sea-glow:#43c2b2; --amber:#d9a43c;
    --head:'Schibsted Grotesk', system-ui, sans-serif;
    --body:Geist, system-ui, sans-serif;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; overflow-x:clip; }
  body { margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font:17px/1.55 var(--body); -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }
  img { display:block; max-width:100%; }
  .wrap { max-width:1240px; margin:0 auto; padding:0 28px; }

  /* ---------- header (Maersk-style) ---------- */
  .top { position:fixed; inset:0 0 auto; z-index:20; color:#fff; transition:background .4s, color .4s, box-shadow .4s; }
  .top.solid { background:rgba(7,11,14,.86); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 var(--night-line); }
  .top .in { max-width:1240px; margin:0 auto; padding:0 28px; height:72px; display:flex; align-items:center; gap:34px; }
  .brand { display:flex; align-items:center; gap:10px; font:800 19px/1 var(--head); letter-spacing:.06em; text-transform:uppercase; }
  .brand svg { width:28px; height:28px; }
  .menu { display:flex; gap:26px; font:500 15px var(--body); color:rgba(255,255,255,.82); }
  .menu a:hover { color:#fff; }
  .top .right { margin-left:auto; display:flex; gap:10px; align-items:center; }
  .b { display:inline-flex; align-items:center; gap:8px; font:600 15px var(--body); padding:10px 18px; border-radius:6px; white-space:nowrap; transition:background .2s, color .2s, border-color .2s; }
  .b.line { border:1px solid rgba(255,255,255,.55); color:#fff; }
  .b.line:hover { background:#fff; color:var(--night); }
  .b.fill { background:#fff; color:var(--night); }
  .b.fill:hover { background:var(--sea-glow); }
  .b.sea { background:var(--sea); color:#fff; }
  .b.sea:hover { background:#0b5a53; }
  .b.ink { border:1px solid var(--ink); color:var(--ink); }
  .b.ink:hover { background:var(--ink); color:#fff; }
  .burger { display:none; }
  .top .right .b { padding:6px 14px; font-size:14px; min-width:156px; justify-content:center; border:1px solid transparent; }
  .top .right .b.line { border-color:rgba(255,255,255,.55); }

  /* ---------- hero ---------- */
  .hero { position:relative; height:100vh; min-height:680px; max-height:1000px; color:#fff; overflow:hidden; background:var(--night); }
  .hero .bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.03); transition:opacity .3s ease, transform 1.2s ease-out; }
  .hero .bg.on { opacity:1; transform:scale(1); }
  .hero::after { content:""; position:absolute; inset:0; background:
      linear-gradient(90deg, rgba(7,11,14,.88) 0%, rgba(7,11,14,.55) 45%, rgba(7,11,14,.1) 80%),
      linear-gradient(0deg, rgba(7,11,14,.95) 0%, rgba(7,11,14,0) 38%),
      linear-gradient(180deg, rgba(7,11,14,.6) 0%, rgba(7,11,14,0) 20%); }
  .hero .copy { position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 28px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:210px; }
  .kicker { font:600 13px var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--sea-glow); margin-bottom:18px; display:flex; gap:10px; align-items:center; }
  .kicker::before { content:""; width:28px; height:1px; background:currentColor; }
  .hero h1 { font:700 clamp(30px,3.4vw,48px)/1.08 var(--head); letter-spacing:-.02em; margin:0 0 18px; max-width:24ch; }
  .hero .sub { font-size:clamp(16px,1.3vw,18px); color:rgba(255,255,255,.78); max-width:46ch; margin:0 0 30px; }
  .hero .acts { display:flex; gap:12px; flex-wrap:wrap; }
  .swap { transition:opacity .15s ease, transform .15s ease; }
  .swap.out { opacity:0; transform:translateY(8px); }

  /* the three doors */
  .doors { position:absolute; z-index:3; left:0; right:0; bottom:0; border-top:1px solid var(--night-line); background:rgba(7,11,14,.45); backdrop-filter:blur(10px); }
  .doors .in { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); }
  .door { all:unset; cursor:pointer; text-align:center; padding:22px 28px 24px; border-left:1px solid var(--night-line); position:relative; color:rgba(255,255,255,.62); transition:color .3s, background .3s; }
  .door:first-child { border-left:0; }
  .door:hover { color:#fff; background:rgba(255,255,255,.04); }
  .door[aria-selected="true"] { color:#fff; }
  .door::before { content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--sea-glow); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }
  .door[aria-selected="true"]::before { transform:scaleX(1); }
  .door .who { font:500 14px var(--body); display:block; margin-bottom:6px; }
  .door .name { font:700 20px/1.1 var(--head); display:flex; align-items:center; justify-content:center; gap:10px; }
  .door .name::after { content:"→"; font-weight:400; opacity:0; transform:translateX(-6px); transition:.3s; }
  .door[aria-selected="true"] .name::after, .door:hover .name::after { opacity:1; transform:none; }
  .door:focus-visible { outline:2px solid var(--sea-glow); outline-offset:-2px; }

  /* ---------- showcase stage ---------- */
  .stage { position:relative; background:var(--night); color:#fff; padding:56px 0 0; overflow:hidden; }
  .stage .bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.9; }
  .stage .streaks { position:absolute; inset:0; background:
      linear-gradient(90deg, transparent 8%, rgba(14,110,102,.0) 10%, rgba(14,110,102,.55) 13%, rgba(14,110,102,0) 17%, transparent 30%,
        rgba(217,164,60,0) 70%, rgba(217,164,60,.35) 76%, rgba(217,164,60,0) 80%, transparent 86%, rgba(67,194,178,.25) 90%, transparent 93%);
      filter:blur(18px); opacity:.9; }
  .stage.has-img .streaks { display:none; }
  .stage .head { position:relative; text-align:center; max-width:760px; margin:0 auto 26px; padding:0 28px; }
  .stage h2 { font:700 clamp(28px,2.9vw,40px)/1.1 var(--head); letter-spacing:-.02em; margin:0 0 14px; }
  .stage .head p { color:rgba(255,255,255,.7); font-size:17px; margin:0; }
  .tabs { position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:24px auto 0; max-width:900px; padding:0 18px; }
  .tabs button { all:unset; cursor:pointer; font:600 14px var(--body); padding:9px 16px; border-radius:999px; color:rgba(255,255,255,.7); border:1px solid var(--night-line); }
  .tabs button[aria-selected="true"] { background:#fff; color:var(--night); border-color:#fff; }
  .rig { position:relative; height:590px; margin-top:28px; perspective:2200px; }
  .laptop { position:absolute; left:50%; top:10px; width:880px; margin-left:-470px; transform:rotateX(8deg) rotateY(14deg) rotateZ(-1deg); transform-style:preserve-3d; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .laptop .lid { background:#1b1f23; border-radius:18px 18px 6px 6px; padding:16px 16px 22px; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 60px 120px -30px rgba(0,0,0,.9); }
  .laptop .base { height:16px; margin:0 -46px; background:linear-gradient(180deg,#3a3f44,#15181b); border-radius:0 0 18px 18px; }
  .screen { position:relative; overflow:hidden; background:#f7f6f2; border-radius:6px; aspect-ratio:16/10; }
  .screen iframe { position:absolute; left:0; top:0; border:0; transform-origin:0 0; pointer-events:auto; background:#fff; }
  .screen img.fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left; }
  .phone { position:absolute; left:50%; top:120px; margin-left:300px; width:250px; transform:rotateY(-12deg) rotateX(6deg); transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .phone .body { background:#0f1215; border-radius:40px; padding:11px; box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 50px 100px -20px rgba(0,0,0,.95); }
  .phone .screen { aspect-ratio:390/844; border-radius:30px; }
  .rig .reflect { -webkit-box-reflect:below 14px linear-gradient(transparent 62%, rgba(255,255,255,.14)); }
  .pop { position:absolute; z-index:4; background:rgba(255,255,255,.96); color:var(--ink); border-radius:12px; padding:13px 16px; min-width:230px; box-shadow:0 24px 50px -16px rgba(0,0,0,.7); font-size:14px; line-height:1.35; opacity:0; transform:translateY(20px) scale(.96); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .pop.in { opacity:1; transform:none; }
  .pop small { display:block; font:600 11px var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
  .pop b { display:block; font:700 16px var(--head); }
  .pop .st { display:inline-block; margin-top:6px; font-weight:600; font-size:12.5px; padding:3px 8px; border-radius:4px; }
  .st.red { background:#f6e1de; color:#9b3027; } .st.amber { background:#f6ecd6; color:#7d5a12; } .st.green { background:#dcefe9; color:#0b5a53; }
  .pop .bar { height:6px; background:#e7e4dc; border-radius:3px; margin-top:8px; overflow:hidden; }
  .pop .bar i { display:block; height:100%; width:78%; background:var(--sea); }
  .stage .foot { position:relative; text-align:center; padding:6px 28px 44px; color:rgba(255,255,255,.55); font-size:13px; }
  .stage .foot a { color:#fff; border-bottom:1px solid rgba(255,255,255,.35); }

  /* ---------- dark -> light hand-off ---------- */
  .handoff { height:70px; background:linear-gradient(180deg, var(--night) 0%, var(--paper) 100%); }

  /* ---------- the supply line (sticky, crossfading images) ---------- */
  .line { position:relative; }
  .line .intro { padding:28px 0 36px; }
  .eyebrow { font:600 13px var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--sea); margin-bottom:14px; }
  h2.big { font:700 clamp(28px,3vw,42px)/1.1 var(--head); letter-spacing:-.025em; margin:0 0 16px; max-width:16ch; }
  .lead { font-size:18px; color:var(--ink-2); max-width:48ch; margin:0; }
  .scrolly { display:grid; grid-template-columns:1.15fr 1fr; gap:56px; }
  .scrolly .pics { position:sticky; top:96px; height:min(64vh,560px); border-radius:18px; overflow:hidden; background:var(--paper-2); }
  .scrolly .pics div { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.06); transition:opacity 1s ease, transform 2.4s ease; }
  .scrolly .pics div.on { opacity:1; transform:scale(1); }
  .scrolly .pics .who-tag { position:absolute; left:18px; bottom:18px; z-index:2; background:rgba(7,11,14,.72); color:#fff; font:600 13px var(--body); padding:7px 12px; border-radius:6px; backdrop-filter:blur(6px); }
  .steps { padding:4vh 0 8vh; }
  .step { min-height:34vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; transition:opacity .5s; }
  .step.on { opacity:1; }
  .step .n { font:600 13px var(--body); color:var(--sea); letter-spacing:.14em; margin-bottom:10px; }
  .step h3 { font:700 clamp(22px,2.1vw,30px)/1.15 var(--head); letter-spacing:-.02em; margin:0 0 12px; }
  .step p { color:var(--ink-2); font-size:17px; margin:0 0 14px; max-width:36ch; }
  .step .by { font:600 14px var(--body); display:inline-flex; gap:8px; align-items:center; }
  .step .by i { width:10px; height:10px; border-radius:2px; background:var(--sea); }
  .step .by.k i { background:var(--ink); } .step .by.kp i { background:var(--amber); }

  /* ---------- products (light, full-bleed bands) ---------- */
  .products { padding:24px 0 8px; }
  .band { position:relative; margin:0 0 18px; border-radius:22px; overflow:hidden; min-height:440px; display:grid; grid-template-columns:1fr 1fr; background:var(--card); }
  .band .pic { position:relative; background-size:cover; background-position:center; min-height:420px; }
  .band .txt { padding:44px 46px; display:flex; flex-direction:column; justify-content:center; }
  .band.rev .pic { order:2; }
  .band .tag { font:600 13px var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--sea); margin-bottom:12px; }
  .band h3 { font:700 clamp(24px,2.4vw,34px)/1.12 var(--head); letter-spacing:-.02em; margin:0 0 14px; }
  .band p { color:var(--ink-2); font-size:17px; margin:0 0 20px; max-width:38ch; }
  .band ul { list-style:none; padding:0; margin:0 0 22px; }
  .band li { padding:11px 0; border-top:1px solid var(--line); font-size:16px; }
  .band .acts { display:flex; gap:10px; flex-wrap:wrap; }
  .band .mini { position:absolute; right:28px; bottom:28px; width:46%; border-radius:10px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
  .band.rev .mini { right:auto; left:28px; }

  /* ---------- rule + close ---------- */
  .rule { padding:56px 0 64px; }
  .rule p { font:600 clamp(18px,1.6vw,23px)/1.4 var(--head); letter-spacing:-.02em; max-width:none; margin:0; }
  .rule p { text-align:center; }
  .rule p span { color:var(--ink-3); display:block; margin-top:4px; }
  .close { background:var(--night); color:#fff; padding:80px 0; text-align:center; position:relative; overflow:hidden; }
  .close .bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.35; }
  .close .in { position:relative; }
  .close h2 { font:700 clamp(28px,3.2vw,44px)/1.1 var(--head); letter-spacing:-.025em; margin:0 auto 18px; max-width:16ch; }
  .close p { color:rgba(255,255,255,.75); font-size:18px; margin:0 auto 32px; max-width:42ch; }
  .close .acts { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  footer { background:var(--night); color:rgba(255,255,255,.55); font-size:14px; border-top:1px solid var(--night-line); }
  footer .wrap { display:flex; gap:28px; flex-wrap:wrap; padding-top:34px; padding-bottom:44px; }
  footer .brand { color:#fff; font-size:17px; margin-right:auto; }


  /* ---------- the catch board (what Kedge found) ---------- */
  .caught { background:var(--night); color:#fff; padding:64px 0 20px; }
  .caught .top-line { display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
  .caught h2 { font:700 clamp(26px,2.8vw,38px)/1.1 var(--head); letter-spacing:-.02em; margin:0; }
  .caught .samp { font:600 12px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(217,164,60,.5); padding:5px 9px; border-radius:4px; }
  .rows { border-top:1px solid var(--night-line); }
  .row { display:grid; grid-template-columns:190px 1fr 180px 220px; gap:24px; align-items:center; padding:20px 0; border-bottom:1px solid var(--night-line); }
  .row .fig { font:700 clamp(26px,2.6vw,36px)/1 var(--head); letter-spacing:-.02em; color:#fff; }
  .row .fig small { display:block; font:500 12px var(--body); letter-spacing:.06em; color:rgba(255,255,255,.55); margin-top:6px; text-transform:uppercase; }
  .row .what b { display:block; font:600 18px var(--head); margin-bottom:3px; }
  .row .what span { color:rgba(255,255,255,.66); font-size:15px; }
  .row .who { font:600 14px var(--body); color:var(--sea-glow); }
  .row .who small { display:block; color:rgba(255,255,255,.5); font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
  .row .src { font-size:13.5px; color:rgba(255,255,255,.6); border-left:1px solid var(--night-line); padding-left:16px; }
  .row .src small { display:block; color:rgba(255,255,255,.45); font:600 11px var(--body); letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px; }
  .row.red .fig { color:#ff8a7a; } .row.amber .fig { color:#f0c46a; }
  .caught .tail { color:rgba(255,255,255,.55); font-size:14px; margin:16px 0 0; }

  /* ---------- sound familiar (light) ---------- */
  .familiar { padding:40px 0 30px; }
  .pairs { margin-top:26px; border-top:1px solid var(--line); }
  .pair { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline; }
  .pair .was { font:600 clamp(18px,1.7vw,22px)/1.3 var(--head); color:var(--ink-3); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.25); }
  .pair .now { font-size:17px; color:var(--ink); }
  .pair .now b { color:var(--sea); font-weight:600; }

  /* ---------- four steps ---------- */
  .fourstep { margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--card); }
  .fourstep div { padding:20px 22px 22px; border-left:1px solid var(--line); }
  .fourstep div:first-child { border-left:0; }
  .fourstep div:last-child { background:#e3f0ec; }
  .fourstep small { display:block; font:600 11px var(--body); letter-spacing:.12em; color:var(--sea); margin-bottom:6px; }
  .fourstep b { font:600 17px var(--head); display:block; margin-bottom:4px; }
  .fourstep span { color:var(--ink-2); font-size:15px; }

  @media (max-width:900px) {
    .caught { padding:40px 0 10px; }
    .row { grid-template-columns:1fr; gap:6px; padding:16px 0; }
    .row .src { border-left:0; padding-left:0; }
    .pair { grid-template-columns:1fr; gap:4px; }
    .fourstep { grid-template-columns:1fr; }
    .fourstep div { border-left:0; border-top:1px solid var(--line); }
    .fourstep div:first-child { border-top:0; }
  }


  /* ---------- who it is for ---------- */
  .forwho { background:var(--night); color:rgba(255,255,255,.8); padding:18px 0 34px; }
  .forwho .in { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; font:600 13px var(--body); letter-spacing:.14em; text-transform:uppercase; }
  .forwho span { display:inline-flex; align-items:center; gap:10px; }
  .forwho span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--sea-glow); }
  .familiar .tagline { font:600 clamp(18px,1.6vw,22px)/1.3 var(--head); color:var(--sea); margin:6px 0 0; }


  /* ---------- compact catch tiles with a screen crop ---------- */
  .caught { padding:44px 0 14px; }
  .caught h2 { font-size:clamp(22px,2.2vw,30px); }
  .caught .rows { border-top:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .tile { background:rgba(255,255,255,.04); border:1px solid var(--night-line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
  .tile .shot { aspect-ratio:16/8; background-color:#f4f2ed; background-repeat:no-repeat; border-bottom:1px solid var(--night-line); }
  .tile .body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
  .tile .fig { font:700 24px/1 var(--head); letter-spacing:-.01em; }
  .tile.red .fig { color:#ff8a7a; } .tile.amber .fig { color:#f0c46a; } .tile.green .fig { color:#7fd4b8; }
  .tile .prod { font:600 11px var(--body); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); }
  .tile b { font:600 15px/1.3 var(--head); color:#fff; }
  .tile .meta { margin-top:auto; padding-top:8px; font-size:12.5px; color:rgba(255,255,255,.55); }
  .tile .meta em { font-style:normal; color:var(--sea-glow); font-weight:600; }

  /* ---------- roles (light) ---------- */
  .roles { padding:30px 0 20px; }
  .roles .grid { margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .role { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
  .role .shot { aspect-ratio:16/8; background-color:#f4f2ed; background-repeat:no-repeat; border-bottom:1px solid var(--line); }
  .role .body { padding:16px 18px 18px; }
  .role small { display:block; font:600 11px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--sea); margin-bottom:5px; }
  .role b { display:block; font:600 18px/1.25 var(--head); margin-bottom:5px; }
  .role span { color:var(--ink-2); font-size:15px; }

  @media (max-width:1000px) { .caught .rows { grid-template-columns:repeat(2,1fr); } .roles .grid { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px) { .caught .rows, .roles .grid { grid-template-columns:1fr; } }

  /* reveal */
  .rv { opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
  .rv.in { opacity:1; transform:none; }

  .sketchnote { position:fixed; right:14px; bottom:14px; z-index:30; background:var(--amber); color:#1a1405; font:600 12px var(--body); padding:8px 12px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.25); max-width:260px; }

  @media (prefers-reduced-motion:reduce) {
    .rv, .pop, .swap, .hero .bg, .scrolly .pics div { transition:none !important; transform:none !important; }
    .rv, .pop { opacity:1; }
  }

  /* ---------- phone ---------- */
  @media (max-width:900px) {
    .menu, .top .right .b.line { display:none; }
    .top .in { height:62px; gap:12px; padding:0 18px; }
    .burger { display:block; all:unset; color:#fff; font:600 14px var(--body); padding:8px 4px; }
    .top .right .b.fill { padding:6px 12px; font-size:14px; min-width:0; }
    .hero { height:auto; min-height:100svh; max-height:none; }
    .hero .copy { padding:120px 18px 20px; justify-content:flex-end; min-height:62svh; }
    .hero h1 { font-size:28px; }
    .hero .sub { font-size:16px; margin-bottom:22px; }
    .doors { position:relative; }
    .doors .in { grid-template-columns:1fr; }
    .door { border-left:0; border-top:1px solid var(--night-line); padding:16px 18px; }
    .door .name { font-size:18px; }
    .stage { padding-top:40px; }
    .rig { height:560px; perspective:none; }
    .laptop { width:560px; margin-left:-330px; transform:none; top:0; }
    .phone { width:170px; margin-left:20px; top:190px; transform:none; }
    .pop { min-width:0; width:200px; font-size:13px; }
    .pop[data-at="a"] { left:14px !important; top:auto !important; bottom:40px; }
    .pop[data-at="b"], .pop[data-at="c"] { display:none; }
    .wrap { padding:0 18px; }
    .scrolly { grid-template-columns:1fr; gap:0; }
    .scrolly .pics { position:sticky; top:62px; height:42vh; border-radius:12px; z-index:2; }
    .steps { padding:4vh 0 10vh; }
    .step { min-height:36vh; }
    .band, .band.rev { grid-template-columns:1fr; min-height:0; }
    .band.rev .pic { order:0; }
    .band .txt { padding:34px 22px 38px; }
    .band .pic { min-height:300px; }
    .band .mini { width:60%; right:16px; bottom:16px; }
    .rule { padding:44px 0; }
    .close { padding:60px 0; }
  }

  /* ---------- catch tiles: light, quiet colour (replaces the dark red/amber version) ---------- */
  .caught { background:var(--paper); color:var(--ink); padding:40px 0 18px; }
  .caught h2 { color:var(--ink); }
  .caught .samp { color:var(--ink-3); border-color:var(--line); }
  .tile { background:var(--card); border:1px solid var(--line); border-top:3px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.03); }
  .tile.red { border-top-color:#b0453c; } .tile.amber { border-top-color:#a8791f; } .tile.green { border-top-color:var(--sea); }
  .tile .shot { border-bottom:1px solid var(--line); }
  .tile .prod { color:var(--ink-3); }
  .tile .fig, .tile.red .fig, .tile.amber .fig, .tile.green .fig { color:var(--ink); }
  .tile b { color:var(--ink); }
  .tile .meta { color:var(--ink-3); }
  .tile .meta em { color:var(--sea); }
  .caught .tail { color:var(--ink-3); }

  /* ================= compact pass (26 Sep): smaller type, smaller pictures, tighter rhythm ================= */
  body { font-size:16px; }
  .hero h1 { font-size:clamp(28px,3vw,42px); max-width:26ch; }
  .hero .sub { font-size:clamp(15px,1.15vw,17px); max-width:52ch; }
  .hero .copy { padding-bottom:180px; }
  .door { padding:16px 24px 18px; }
  .door .name { font-size:17px; }
  .door .who { font-size:13px; }
  .eyebrow { font-size:12px; margin-bottom:10px; }
  h2.big { font-size:clamp(22px,2.1vw,30px); line-height:1.15; max-width:30ch; margin-bottom:10px; }
  .lead { font-size:16px; max-width:60ch; }
  .familiar { padding:28px 0 18px; }
  .familiar .tagline { font-size:16px; margin-top:2px; }
  .pairs { margin-top:18px; }
  .pair { padding:11px 0; gap:32px; }
  .pair .was { font-size:16px; }
  .pair .now { font-size:15px; }
  .caught { padding:30px 0 12px; }
  .caught h2 { font-size:clamp(20px,1.8vw,26px); }
  .tile .fig { font-size:20px; }
  .tile b { font-size:14px; }
  .tile .body { padding:12px 14px 14px; }
  .forwho { padding:14px 0 22px; }
  .forwho .in { font-size:12px; }
  .stage { padding-top:40px; }
  .stage h2 { font-size:clamp(22px,2.2vw,30px); }
  .stage .head p { font-size:15px; }
  .rig { height:500px; margin-top:22px; }
  .laptop { width:760px; margin-left:-410px; }
  .phone { width:210px; margin-left:250px; top:100px; }
  .pop { font-size:13px; min-width:200px; padding:11px 14px; }
  .pop b { font-size:15px; }
  .stage .foot { padding-bottom:34px; }
  .handoff { height:48px; }
  .line .intro { padding:20px 0 24px; }
  .scrolly { grid-template-columns:1fr 1fr; gap:48px; }
  .scrolly .pics { top:88px; height:min(44vh,380px); border-radius:14px; }
  .steps { padding:2vh 0 6vh; }
  .step { min-height:26vh; }
  .step h3 { font-size:clamp(19px,1.6vw,23px); margin-bottom:8px; }
  .step p { font-size:15px; margin-bottom:10px; }
  .step .n { font-size:12px; margin-bottom:6px; }
  .step .by { font-size:13px; }
  .products { padding:12px 0 4px; }
  .band { min-height:340px; margin-bottom:14px; border-radius:16px; }
  .band .txt { padding:30px 34px; }
  .band .tag { font-size:12px; margin-bottom:8px; }
  .band h3 { font-size:clamp(20px,1.8vw,25px); margin-bottom:10px; }
  .band p { font-size:15px; margin-bottom:14px; }
  .band li { font-size:14.5px; padding:8px 0; }
  .band ul { margin-bottom:10px; }
  .band .pic { min-height:300px; }
  .rule { padding:36px 0 40px; }
  .rule p { font-size:clamp(16px,1.35vw,19px); }
  .close { padding:56px 0; }
  .close h2 { font-size:clamp(24px,2.4vw,34px); }
  .close p { font-size:16px; margin-bottom:22px; }
  footer .wrap { padding-top:24px; padding-bottom:30px; }
  @media (max-width:900px) {
    .hero h1 { font-size:26px; }
    .hero .copy { padding-bottom:16px; }
    .rig { height:460px; }
    .laptop { width:520px; margin-left:-300px; }
    .phone { width:150px; margin-left:30px; top:180px; }
    .scrolly .pics { height:34vh; }
    .step { min-height:30vh; }
    .band .pic { min-height:220px; }
    .band .txt { padding:24px 20px 26px; }
  }