/* ============================================================
   Shop Group — Extensions stylesheet
   ============================================================ */

/* ---------- Page transition: shopping-bag ---------- */
#bagFx{position:fixed;width:100px;height:100px;top:0;left:0;pointer-events:none;z-index:150;color:var(--accent);opacity:0}
#bagCover{position:fixed;width:100px;height:100px;top:0;left:0;border-radius:50%;background:var(--ink);pointer-events:none;z-index:149;opacity:0}

/* ---------- Intro / Loading screen ---------- */
.intro{position:fixed;inset:0;z-index:200;background:#111110;color:#F4F1EC;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px}
.intro .mark{width:56px;height:56px;border-radius:50%;background:#F4F1EC;position:relative;transform:scale(0)}
.intro .mark::after{content:"";position:absolute;inset:14px;border-radius:50%;background:#111110}
.intro .wm{font-family:var(--ff-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;opacity:0;color:#F4F1EC99}
.intro .count{position:absolute;bottom:40px;right:40px;font-family:var(--ff-mono);font-size:11px;letter-spacing:0.12em;color:#F4F1EC88}
.intro .brands{font-family:var(--ff-display);font-size:clamp(32px,5vw,72px);letter-spacing:-0.02em;line-height:1;overflow:hidden;height:1.1em;opacity:0}
.intro-done .intro{pointer-events:none}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;background:transparent;z-index:81;pointer-events:none}
.scroll-progress::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--accent);transition:width .08s linear}

/* ---------- Active nav dot (works on any bg, independent of mix-blend) ---------- */
.nav-links button{position:relative}
.nav-links button::before{content:"";position:absolute;left:50%;top:-10px;transform:translateX(-50%) scale(0);width:5px;height:5px;border-radius:50%;background:var(--accent);transition:transform .35s cubic-bezier(.76,0,.24,1)}
.nav-links button[aria-current="true"]::before{transform:translateX(-50%) scale(1)}
.nav-links button::after{display:none !important}

/* ---------- Mobile nav ----------
   The burger doubles as the close button. When the overlay is open we:
     - elevate the whole nav above the overlay (z-index 90 > 85)
     - drop mix-blend-mode so iOS Safari hit-tests the burger cleanly
     - fatten the bars and widen them into an obvious X
   Keeping a single element for open AND close sidesteps every iOS Safari
   quirk (hit-testing across transforms, synthetic click suppression, the
   pointerdown→click chain re-triggering an underlying element). */
.burger{display:none;width:28px;height:28px;position:relative;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:inherit}
.burger span{position:absolute;left:4px;right:4px;height:1px;background:currentColor;transition:transform .35s,top .35s,left .35s,right .35s,height .2s,opacity .2s}
.burger span:nth-child(1){top:9px}
.burger span:nth-child(2){top:14px}
.burger span:nth-child(3){top:19px}

/* When the overlay is open the burger becomes a bold X. We force an explicit
   color (not inherited), make the bars fill the button, and thicken them so
   it reads as an X even on small viewports. The middle bar fades out. */
.burger.on{color:#F4F1EC !important}
.burger.on span{left:0;right:0;height:2px;background:#F4F1EC !important}
.burger.on span:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){top:calc(50% - 1px);transform:rotate(-45deg)}

body.menu-open .nav{z-index:90;mix-blend-mode:normal;color:#F4F1EC}
body.menu-open .nav .brand,
body.menu-open .nav-right > *:not(.burger){opacity:0;pointer-events:none;transition:opacity .2s ease}

.mobile-nav{position:fixed;inset:0;z-index:85;background:#111110;color:#F4F1EC;display:flex;flex-direction:column;padding:100px 28px 40px;transform:translateY(-100%);transition:transform .6s cubic-bezier(.76,0,.24,1);pointer-events:none}
.mobile-nav.on{transform:translateY(0);pointer-events:auto}
.mobile-nav button.mlink{font-family:var(--ff-display);font-size:48px;line-height:1.1;text-align:left;padding:14px 0;border-bottom:1px solid #F4F1EC22;color:inherit;cursor:pointer}
.mobile-nav .foot{margin-top:auto;display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:11px;letter-spacing:0.1em;color:#F4F1EC88}
.mobile-nav .lang{border-color:#F4F1EC55;color:#F4F1EC}

@media (max-width: 820px){
  .nav-links{display:none}
  .burger{display:inline-block}
}

/* ---------- Page transition cover ---------- */
.page-cover{position:fixed;inset:0;z-index:150;background:var(--ink);pointer-events:none;transform:translateY(100%);display:flex;align-items:center;justify-content:center;color:#F4F1EC;font-family:var(--ff-display);font-size:clamp(40px,8vw,120px);letter-spacing:-0.02em}
.page-cover .lbl{opacity:0}

/* ---------- Cursor label (follows on special hover zones) ---------- */
.cursor-label{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;background:var(--accent);color:#111110;padding:8px 14px;border-radius:999px;font-family:var(--ff-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;transform:translate(-50%,-50%) scale(0.6);opacity:0;transition:opacity .25s,transform .3s cubic-bezier(.76,0,.24,1);white-space:nowrap}
.cursor-label.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- HOME additions ---------- */
/* Press strip */
.press-strip{padding:120px 28px;background:var(--bg)}
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:40px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.press-item{background:var(--bg);padding:40px 28px;display:flex;flex-direction:column;gap:14px;min-height:240px;cursor:pointer;transition:background .3s}
.press-item:hover{background:var(--bg-2)}
.press-item .date{font-family:var(--ff-mono);font-size:11px;letter-spacing:0.1em;color:var(--mute);text-transform:uppercase}
.press-item .src{font-family:var(--ff-mono);font-size:11px;letter-spacing:0.1em;color:var(--accent);text-transform:uppercase}
.press-item h4{font-family:var(--ff-display);font-size:28px;line-height:1.1;margin:0 0 auto}
.press-item .arr{font-family:var(--ff-display);font-size:24px}
@media (max-width: 820px){.press-grid{grid-template-columns:1fr}}

/* ---------- ABOUT additions ---------- */
.leadership{padding:160px 28px;background:var(--bg)}
.leadership .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px}
.leader{display:flex;flex-direction:column;gap:14px}
.leader .portrait{aspect-ratio:3/4;background:
  radial-gradient(100% 80% at 50% 30%, #d4c9b8 0%, #b6a991 100%),
  repeating-linear-gradient(45deg,#d4c9b8 0 6px,#c9bda7 6px 12px);
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-start}
.leader .portrait::after{content:attr(data-ph);position:absolute;bottom:12px;left:12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:0.1em;color:#3a342a;opacity:0.6}
.leader .name{font-family:var(--ff-display);font-size:28px;line-height:1.05;letter-spacing:-0.01em}
.leader .role{font-family:var(--ff-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute)}
@media (max-width: 900px){.leadership .grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- JOBS additions — Life gallery ---------- */
.life{padding:160px 28px;background:var(--bg-2)}
.life-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:140px;gap:12px;margin-top:60px}
.life-tile{background:
  repeating-linear-gradient(45deg,#d4c9b8 0 8px,#c9bda7 8px 16px);
  position:relative;overflow:hidden;border-radius:2px}
.life-tile::after{content:attr(data-ph);position:absolute;bottom:10px;left:12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:0.08em;color:#3a342a;opacity:0.7;text-transform:uppercase}
.life-tile.t-tall{grid-row:span 2}
.life-tile.t-wide{grid-column:span 2}
.life-tile.t-xl{grid-row:span 2;grid-column:span 2}
@media (max-width: 820px){.life-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}.life-tile.t-wide,.life-tile.t-xl{grid-column:span 2}.life-tile.t-tall{grid-row:span 1}}

/* ---------- BRANDS additions — visit CTA ---------- */
.visit-cta{margin-top:24px;display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid currentColor;border-radius:999px;font-family:var(--ff-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;transition:all .3s;cursor:pointer}
.visit-cta:hover{background:var(--accent);border-color:var(--accent);color:#111110}
.brand-block.dark .visit-cta:hover{color:#111110}

/* ---------- Logo download pack (Press section on About) ---------- */
.presskit{padding:160px 28px;background:var(--ink);color:var(--bg)}
.presskit .row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.presskit h2{color:#F4F1EC;margin:0}
.presskit p{color:#F4F1ECaa;font-size:16px;line-height:1.55;max-width:44ch}
.download-list{display:flex;flex-direction:column;border-top:1px solid #F4F1EC22;margin-top:40px}
.dl-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid #F4F1EC22;cursor:pointer;transition:padding-left .25s}
.dl-row:hover{padding-left:14px}
.dl-row:hover .arr{color:var(--accent);transform:translate(6px,-6px)}
.dl-row .ic{width:40px;height:40px;border:1px solid #F4F1EC44;display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:10px;letter-spacing:0.08em;color:#F4F1ECcc}
.dl-row .t{font-family:var(--ff-display);font-size:26px;line-height:1.05}
.dl-row .sz{font-family:var(--ff-mono);font-size:11px;color:#F4F1EC77}
.dl-row .arr{font-family:var(--ff-display);font-size:28px;color:#F4F1ECcc;transition:transform .35s,color .35s}
@media (max-width: 820px){.presskit .row{grid-template-columns:1fr}}

/* Reel card hover effect (cursor-driven) */
.reel-card{transition:background .3s}
.reel-card.is-hover{background:#1c1c19}
.reel-card .swatch{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.reel-card.is-hover .swatch{transform:scale(1.04)}

/* ============================================================
   MOBILE POLISH — 820px / 640px / 380px breakpoints
   Also: prefers-reduced-motion, touch targets, safe areas.
   ============================================================ */

/* ----- Tablet / small laptop (≤820px) ----- */
@media (max-width: 820px){
  /* Brand reel: turn off horizontal pin — stack cards vertically.
     Inline JS also skips the horizontal ScrollTrigger on mobile. */
  .reel-head{padding:80px 24px 40px;grid-template-columns:1fr;gap:20px}
  .reel-head p{max-width:none}
  .reel-track-wrap{height:auto;overflow:visible;position:relative}
  .reel-track{flex-direction:column;padding-right:0;transform:none !important;height:auto}
  .reel-card{flex:0 0 auto !important;height:auto !important;min-height:440px;padding:64px 28px 32px !important;border-right:0 !important;border-bottom:1px solid #F4F1EC1f;width:100%}
  .reel-card:last-of-type{border-bottom:0}
  .reel-card h3{font-size:clamp(44px,9vw,88px);max-width:none}
  .reel-card .swatch{position:relative !important;inset:auto !important;width:100% !important;height:220px !important;margin:28px 0 20px;transform:none !important;will-change:auto}
  .reel-card .tag,.reel-card .idx{position:static;display:inline-block}
  .reel-card .idx{float:right}
  .reel-progress{display:none}

  /* Footer columns — 2x2 already set; tighten padding */
  .foot-cols{gap:32px 24px}

  /* Press kit row spacing */
  .presskit .row{gap:32px}
}

/* ----- Phone (≤640px) ----- */
@media (max-width: 640px){
  /* ---------- Global padding + typography ---------- */
  section{padding:72px 20px}
  .manifesto{padding:96px 20px 100px}
  .markets-wrap{padding:96px 20px !important}
  .mega-cta{padding:96px 20px}
  .pg-head{padding:140px 20px 40px;grid-template-columns:1fr;gap:20px;align-items:start}
  .pg-head p{font-size:16px}
  .about-mission{padding:48px 20px 80px}
  .about-numbers{padding:96px 20px}
  .timeline{padding:96px 20px}
  .structure{padding:96px 20px}
  .leadership{padding:96px 20px}
  .presskit{padding:96px 20px}
  .brands-intro{padding:140px 20px 40px}
  .brand-block{padding:72px 20px}
  .jobs-hero{padding:140px 20px 48px}
  .jobs-featured{padding:40px 20px}
  .jobs-list{padding:40px 20px 80px}
  .culture{padding:96px 20px}
  .life{padding:96px 20px}
  .unsolicited{padding:96px 20px}

  h1.display{font-size:clamp(44px,13vw,80px)}
  h2.display{font-size:clamp(36px,10vw,64px)}
  h3.display{font-size:clamp(28px,7vw,48px)}
  p.lede{font-size:16px}
  .label{font-size:11px}

  /* ---------- NAV ---------- */
  .nav{padding:14px 18px;gap:12px}
  .nav .brand{gap:8px;font-size:11px}
  .nav .brand-mark{width:18px;height:18px}
  .nav .brand span:last-child{display:none}
  .nav-right{gap:10px}
  /* Lang pill: bit more breathing room on mobile so DA/EN/NO/NL read clearly
     and don't feel glued to the burger. */
  .lang{padding:3px;gap:1px}
  .lang button{padding:4px 9px;font-size:10px;letter-spacing:0.06em}

  /* ---------- MOBILE NAV OVERLAY ---------- */
  .mobile-nav{padding:88px 24px 32px}
  .mobile-nav button.mlink{font-size:40px}
  .mobile-nav .foot{font-size:10px;gap:16px;flex-direction:column;align-items:flex-start}
  .mobile-nav .foot .lang{align-self:flex-start}

  /* ---------- HERO ----------
     On mobile we pull hero-top out of its absolute position and let it flow
     above the headline as a compact intro strip. Less empty space between
     the nav and the h1, and the intro actually gets read. */
  .hero{height:auto;min-height:88vh;min-height:88dvh;display:flex;flex-direction:column}
  .hero-top{position:static;top:auto;left:auto;right:auto;padding:64px 20px 0;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:14px;z-index:3}
  .hero-top .col{font-size:10px;line-height:1.5;max-width:28ch}
  .hero-top .col[style*="text-align:right"]{max-width:14ch;opacity:.7}
  .hero-inner{padding:20px 20px 32px;justify-content:flex-start;flex:1 1 auto;min-height:auto}
  .hero h1{font-size:clamp(44px,11.5vw,76px);max-width:14ch;margin-top:28px}
  .hero-sub{flex-direction:column;gap:14px;margin-top:20px;align-items:flex-start}
  .hero-sub p{font-size:15px;max-width:40ch}
  .hero-sub > div{gap:20px !important;font-size:11px;flex-wrap:wrap}
  .scroll-hint{display:none}

  /* ---------- TICKER ---------- */
  .ticker{font-size:28px;padding:14px 0}
  .ticker-track{gap:28px;padding-left:28px}
  .ticker .dot{padding:0 10px}

  /* ---------- MANIFESTO ---------- */
  .manifesto .lines{font-size:clamp(34px,9vw,56px);max-width:none}
  .manifesto-foot{grid-template-columns:1fr;gap:24px;margin-top:56px;padding-top:24px}
  .manifesto-foot .k{font-size:48px}
  .manifesto-foot .k sup{font-size:16px}

  /* ---------- BRAND REEL CARDS ---------- */
  .reel-card{min-height:0;padding:56px 24px 28px !important}
  .reel-card h3{font-size:clamp(40px,11vw,64px)}
  .reel-card .swatch{height:180px !important}
  .reel-card .meta{padding-top:20px;gap:16px}
  .reel-card .meta p{font-size:14px}
  .reel-card .meta .badges{align-items:flex-end;font-size:10px}

  /* ---------- MARKETS ---------- */
  .markets{grid-template-columns:1fr;gap:40px}
  .markets h2{max-width:none}
  .markets .map{aspect-ratio:3/2}
  .market-row{grid-template-columns:40px 1fr;grid-template-rows:auto auto;gap:6px 10px;padding:16px 0;align-items:center}
  .market-row .flag{font-size:26px;grid-row:1 / span 2}
  .market-row .name{font-size:24px;grid-column:2;grid-row:1}
  .market-row .val{grid-column:2;grid-row:2;font-size:11px}

  /* ---------- MEGA CTA ---------- */
  .mega-cta .grid{grid-template-columns:1fr;gap:1px;margin-top:40px}
  .mega-cta .cell{padding:36px 24px;min-height:220px}
  .mega-cta .cell h3{font-size:40px}
  .mega-cta .cell p{font-size:14px}
  .mega-cta .cell .arrow{font-size:44px}

  /* ---------- ABOUT ---------- */
  .about-mission .big{font-size:clamp(32px,9vw,56px)}
  .about-mission .split{grid-template-columns:1fr;gap:24px;margin-top:48px}
  .about-mission .split p{font-size:15px}
  .about-numbers .grid{grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:40px}
  .about-numbers .k{font-size:clamp(44px,12vw,72px)}
  .about-numbers .kl{font-size:10px}
  .timeline .row{grid-template-columns:72px 1fr;grid-template-rows:auto auto;gap:8px 16px;padding:20px 0;align-items:baseline}
  .timeline .yr{font-size:28px;grid-row:1 / span 2}
  .timeline .tl{font-size:18px;grid-column:2;grid-row:1;line-height:1.2}
  .timeline .dc{grid-column:2;grid-row:2;font-size:13px}
  .structure .chart{gap:0;margin-top:56px}
  .structure .row{gap:8px}
  .structure .node{min-width:0;flex:1 1 calc(50% - 8px);font-size:10px;padding:12px 10px}
  .structure .node.hq{font-size:11px;padding:16px 24px;flex:0 0 auto}

  /* ---------- LEADERSHIP ---------- */
  .leadership .grid{grid-template-columns:1fr 1fr;gap:16px}
  .leader .name{font-size:18px}
  .leader .role{font-size:10px}

  /* ---------- PRESS KIT ---------- */
  .presskit .row{grid-template-columns:1fr;gap:32px}
  .presskit p{max-width:none}
  .dl-row{grid-template-columns:auto 1fr auto;gap:14px;padding:18px 0}
  .dl-row .ic{width:34px;height:34px;font-size:9px}
  .dl-row .t{font-size:18px}
  .dl-row .sz{font-size:10px}
  .dl-row .arr{font-size:22px}

  /* ---------- BRANDS PAGE ---------- */
  .brand-block .bbhead{grid-template-columns:1fr;gap:4px;margin-bottom:32px}
  .brand-block .no{font-size:10px}
  .brand-block .bname{font-size:clamp(44px,12vw,80px);line-height:0.95}
  .brand-block .bmeta{text-align:left;font-size:10px}
  .brand-block .bbody{grid-template-columns:1fr;gap:32px}
  .brand-block .bbody p{font-size:15px}
  .brand-block .shot{aspect-ratio:4/3}
  .visit-cta{padding:12px 16px;font-size:10px;gap:10px;width:100%;justify-content:center}

  /* ---------- JOBS ---------- */
  .jobs-featured .grid{grid-template-columns:1fr;gap:16px}
  .job-card{padding:28px 24px;min-height:220px}
  .job-card .role{font-size:26px}
  .job-card .desc{font-size:13px}
  .filters{gap:6px;margin-bottom:16px}
  .filters button{padding:7px 12px;font-size:10px}
  .jobrow{padding:22px 0 22px 0 !important;background:none !important}
  .jobrow:hover{padding-left:0 !important;background:none !important}
  .jobrow .n{font-size:10px}
  .jobrow .t{font-size:20px}
  .jobrow .t span{display:block;margin-top:2px}

  .culture .grid3{grid-template-columns:1fr;gap:1px;margin-top:48px}
  .culture .cc{padding:28px 24px 36px;min-height:0}
  .culture .cc .ph{aspect-ratio:16/10;margin-bottom:12px}
  .culture .cc h4{font-size:22px}
  .culture .cc p{font-size:13px}

  .life-grid{grid-template-columns:1fr 1fr;grid-auto-rows:100px;gap:8px;margin-top:40px}
  .life-tile.t-xl{grid-row:span 2;grid-column:span 2}
  .life-tile.t-wide{grid-column:span 2;grid-row:span 1}
  .life-tile.t-tall{grid-row:span 2;grid-column:span 1}

  .unsolicited .btn{padding:14px 20px;font-size:10px;gap:10px}
  .unsolicited .btn .arr{font-size:18px}

  /* ---------- CONTACT ---------- */
  .contact-wrap{grid-template-columns:1fr;margin-top:56px;min-height:0}
  .contact-l,.contact-r{padding:56px 20px 40px}
  .contact-l{border-right:0;border-bottom:1px solid var(--line)}
  .contact-l h1{font-size:clamp(48px,14vw,88px)}
  .contact-l .addr{margin-top:40px;font-size:12px}
  .contact-l .minimap{max-width:100%;margin-top:32px}
  .form .row{grid-template-columns:1fr;gap:20px}
  /* prevent iOS Safari from zooming on input focus */
  .form input,.form textarea,.form select{font-size:16px}
  .form .submit{padding:18px 24px;font-size:11px;width:100%;text-align:center;justify-content:center}

  /* ---------- FOOTER ---------- */
  footer{padding:56px 20px 20px}
  .foot-huge{font-size:clamp(60px,17vw,120px);margin:16px 0 48px;letter-spacing:-0.025em}
  .foot-cols{grid-template-columns:1fr 1fr;gap:24px;padding-top:24px}
  .foot-cols h4{font-size:10px;margin-bottom:12px}
  .foot-cols p,.foot-cols a,.foot-cols li{font-size:13px;line-height:1.5}
  .foot-bot{flex-direction:column;gap:8px;margin-top:32px;padding-top:16px;font-size:10px}

  /* ---------- INTRO ---------- */
  .intro .mark{width:48px;height:48px}
  .intro .mark::after{inset:12px}
  .intro .brands{font-size:clamp(28px,9vw,56px)}
  .intro .wm{font-size:10px}
  .intro .count{bottom:28px;right:24px;font-size:10px}
}

/* ----- Tiny phone (≤380px) ----- */
@media (max-width: 380px){
  .nav .lang button{padding:2px 6px;font-size:9px}
  .foot-cols{grid-template-columns:1fr;gap:20px}
  .manifesto-foot .k,.about-numbers .k{font-size:44px}
  .hero h1{font-size:clamp(40px,13vw,64px)}
  .about-numbers .grid{grid-template-columns:1fr 1fr}
}

/* ---------- Touch-specific (no hover available) ---------- */
@media (hover: none){
  /* Disable hover-only visual states that would feel sticky on touch */
  .job-card:hover{background:var(--paper);color:var(--ink);border-color:var(--line)}
  .job-card:hover .desc{color:var(--ink-2)}
  .job-card:hover .meta{color:var(--mute)}
  .jobrow:hover{padding-left:0;background:none}
  .mega-cta .cell:hover{background:var(--bg-2);color:var(--ink)}
  .mega-cta .cell:hover .arrow{color:inherit}
  .visit-cta:hover{background:transparent;color:inherit;border-color:currentColor}
  .unsolicited .btn:hover{background:transparent;color:var(--ink)}
  /* Ensure touch-friendly hit targets */
  .filters button,.lang button,.dl-row,.nav-links button{min-height:36px}
  .burger{width:40px;height:30px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .ticker-track{animation:none}
  .scroll-hint::before{animation:none}
  .cursor-dot,.cursor-ring{display:none}
}

/* ---------- Safe area insets (notched phones) ---------- */
@supports (padding: env(safe-area-inset-left)){
  @media (max-width: 820px){
    .nav{padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right))}
    .mobile-nav{padding-left:max(24px, env(safe-area-inset-left));padding-right:max(24px, env(safe-area-inset-right));padding-bottom:max(32px, env(safe-area-inset-bottom))}
  }
}

/* ============================================================
   DESCENDER FIX for reveal animations
   ------------------------------------------------------------
   Display headlines use line-height:0.92 and GSAP SplitText wraps
   each line in a span with overflow:hidden for the mask reveal.
   The tight line-height means descenders (g j y p q) extend below
   the mask and get clipped. Adding padding-bottom extends the mask
   downward; a matching negative margin-bottom keeps vertical
   rhythm exactly as designed.
   ============================================================ */
.split-line,
.reveal-lines > span{
  padding-bottom:0.4em;
  margin-bottom:-0.4em;
}
.hero h1 .line{
  padding-bottom:0.4em;
  margin-bottom:-0.2em;
}
/* After the reveal completes, inline JS adds this class to make the
   mask box let descenders render outside the original clip region. */
.split-line.is-revealed,
.reveal-lines > span.is-revealed,
.hero h1 .line.is-revealed{
  overflow:visible;
}

/* When SplitText hasn't wrapped yet (before JS runs or if it errors),
   reserve descender room on the headings themselves so nothing clips
   on slow connections / JS-disabled contexts. */
h1.display,
h2.display,
h3.display,
.manifesto .lines,
.about-mission .big,
.culture .big{
  padding-bottom:0.1em;
}

/* ============================================================
   Mobile typography relaxation
   ------------------------------------------------------------
   Display headlines use letter-spacing:-0.02em and line-height:0.92
   on desktop. At small font sizes with Instrument Serif's already
   narrow forms, that tracking visually smashes adjacent words
   ("Kom og byg" → "Komogbyg"). Loosen on mobile.
   ============================================================ */
@media (max-width: 820px){
  h1.display,
  h2.display,
  h3.display,
  .hero h1,
  .brand-block .bname,
  .manifesto .lines,
  .about-mission .big,
  .culture .big{
    letter-spacing:-0.005em;
    word-spacing:0.04em;
    line-height:1;
  }
  .foot-huge{letter-spacing:-0.015em;line-height:0.95}
}
@media (max-width: 640px){
  h1.display,
  h2.display,
  h3.display,
  .hero h1,
  .brand-block .bname{
    letter-spacing:0;
    word-spacing:0.08em;
    line-height:1.02;
  }
  .manifesto .lines,
  .about-mission .big,
  .culture .big{
    letter-spacing:0;
    word-spacing:0.06em;
    line-height:1.05;
  }
}