/* Helvetica Neue — self-hosted (woff2). One family, four weights. */
@font-face{font-family:'HN';src:url(/assets/fonts/hn-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'HN';src:url(/assets/fonts/hn-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'HN';src:url(/assets/fonts/hn-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'HN';src:url(/assets/fonts/hn-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* =========================================================
   LITTLE EAGLES — Home
   Calibrated on HOMEPAGE.svg (1440 frame) + Francesco's specs.
   Global tracking -4%. Ink #0D0E12. 16px side margins.
   40px yellow footer bar. One type scale, one spacing scale.
   ========================================================= */

:root{
  --ink:#0D0E12;                        /* page bg + dark text on yellow */
  --yellow:#FFE602;                     /* brand yellow */
  --white:#FFFFFF;

  --m:16px;                             /* side margin L & R */

  --t-hero:clamp(48px, 15vw, 180px);    /* hero motto — Light */
  --t-reel:clamp(28px, 5.6vw, 80px);    /* 80 Medium display: CTA (+ V1.0 reel titles) */
  --t-band:clamp(30px, 6.2vw, 90px);    /* FEATURED ON / IN C/O WITH */
  --t-nav:clamp(13px, 1.15vw, 16px);
  --t-meta:12px;
  --t-foot:16px;
  --t-talk:clamp(20px, 2.6vw, 32px);
  --t-title:clamp(44px,5.6vw,80px);     /* section-page titles + big display list (desktop) */
  --t-title-m:clamp(28px,7.8vw,42px);   /* section-page titles (mobile) */
}

/* ---- NO cross-document view transitions. The at-rule was tried on
   2026-08-01 and REVERTED the same day: it makes the browser freeze a snapshot of the OUTGOING
   page while the new one (200-700KB of inlined assets) parses and paints, so the fixed yellow
   footer stayed stuck low on screen instead of riding up. The site's own motion is smoother
   without it. Do not reintroduce. ---- */

/* ---- reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overscroll-behavior:none;background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* site base background stays ink; text-size-adjust:100% stops mobile Safari auto-inflating long lines (e.g. the Vision running sentence) */
/* body clips horizontal overflow with `clip` (NOT `hidden`): clip doesn't create a
   scroll container, so vertical page scroll always works in Safari */
body{max-width:100%;overflow-x:clip;overscroll-behavior:none}
body{
  color:var(--yellow);
  font-family:'HN',"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.04em;                /* global tracking, -4% everywhere */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* forced line breaks in the shrinking page titles are per-breakpoint: desktop shows
   .br-d, mobile shows .br-m. Locking the breaks stops the title re-wrapping while it
   scales on scroll (that re-wrap was the mobile stutter). */
/* 760.02 e non 761: fra 760 e 761 c'era un BUCO. Le larghezze non sono sempre intere
   (zoom del browser, densita' schermo Android non intere, split view iPad): a 760.5px
   ne' (min-width:761px) ne' (max-width:760px) si applicavano, quindi .br-m e .br-d
   comparivano INSIEME = doppio a capo nei titoli. I browser arrotondano a 1/64 px
   (0.015625), quindi fra 760 e 760.02 non esiste nessuna larghezza reale: il buco e'
   chiuso e a ogni larghezza intera il comportamento e' identico a prima. */
@media (min-width:760.02px){.br-m{display:none}}

.hairline{height:1px;background:var(--yellow);margin:0 var(--m)}

/* =========================================================
   HEADER (fixed)
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--m) 12px;
  background:transparent;          /* transparent menu: logo + nav are PNG/text floating over the page, no black box (Francesco) */
}
.site-header__brand{display:inline-flex;align-items:center;padding:10px 6px;margin:-10px -6px;cursor:pointer}   /* -> index.html; roomy click target */
.site-header__brand img{height:19px;width:auto}
.brand-txt{display:none}   /* text-only wordmark: shown only on mobile (single mark in the header) */
/* transparent hit-rectangle over the logo -> home (bulletproof: always on top, can't be blocked) */
.brand-hit{position:absolute;top:0;left:0;height:100%;width:220px;z-index:210;display:block}
.nav-toggle{display:none;background:none;border:0;padding:4px;margin:-4px;cursor:pointer;line-height:0}
.nav-toggle img{height:22px;width:auto}
.site-nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);white-space:nowrap}
.site-nav a{color:var(--yellow);font-weight:500;font-size:var(--t-nav);text-decoration:none;text-underline-offset:3px}
.site-nav a:hover,.site-nav a[aria-current="page"]{text-decoration:underline}   /* underline on hover; stays underlined on the current page */
/* while the window is actively being resized, freeze the mobile-nav slide so the
   full-screen menu can't flash in/out when crossing the 760px breakpoint (script.js
   adds .is-resizing to <html> during a resize, removes it 250ms after it settles) */
.is-resizing .site-nav{transition:none !important}

/* Contrast blend REMOVED per client: menu + titles stay flat yellow on every page/section. */

/* =========================================================
   HERO (Light, 180, uppercase, flush left)
   ========================================================= */
.hero{position:relative;padding:clamp(66px,9.5vh,108px) var(--m) clamp(74px,12vh,150px)}
.hero__type-link{display:block}
.hero__type{
  font-weight:300;   /* Light — the homepage claim stays Light (Francesco: exception to the "uppercase = 500" rule) */
  text-transform:uppercase;
  line-height:.8;
  font-size:var(--t-hero);
  color:var(--yellow);
}
.hero__type span{display:block;white-space:nowrap}
.hero__mark{position:absolute;right:var(--m);bottom:clamp(18px,4vh,44px);width:clamp(30px,2.6vw,38px);height:auto}

/* =========================================================
   META (12 Bold, sentence case, Est. centred on the page)
   ========================================================= */
.meta{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:8px var(--m) 9px;
  font-size:var(--t-meta);font-weight:700;color:var(--yellow);
}
.meta span{white-space:nowrap}
.meta__l{justify-self:start}
.meta__c{justify-self:center;text-align:center}
.meta__r{justify-self:end;text-align:right}

/* =========================================================
   LOGO BANDS (perpetual marquees)
   ========================================================= */
.band{display:flex;align-items:flex-start;gap:clamp(16px,3vw,48px);padding:clamp(20px,3.2vw,42px) var(--m);overflow:hidden}
.band--right,.band--left{justify-content:space-between}
.band--press{padding-bottom:8px}       /* 8 + 8 = 16px between the two bands */
.band--clients{padding-top:8px;padding-bottom:16px}   /* 16px from "In C/O with" down to the first project */
.band__label{flex:0 0 auto;display:flex;flex-direction:column;gap:16px;font-weight:500;text-transform:uppercase;line-height:.75;font-size:var(--t-band);color:var(--yellow)}
.band--right .band__label{text-align:right}
.band__marquee{
  flex:1 1 auto;min-width:0;overflow:hidden;margin-top:clamp(14px,1.4vw,20px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.track{display:flex;align-items:center;width:max-content;will-change:transform}
/* spacing as trailing margin (not flex-gap) so one copy is an EXACT period -> -50% loops seamlessly */
.track img{width:auto;flex:0 0 auto;margin-right:clamp(34px,5vw,80px)}
.band--press   .track img{height:clamp(24px,2.8vw,40px)}
.band--clients .track img{height:clamp(26px,3.2vw,46px)}
/* direction is set by JS (rAF engine drives translateX); the .track--rtl / .track--ltr
   classes only tag intent + a static start position. With JS off the track just sits
   still (content stays visible) — no animated fallback is wired up. */
.track--rtl{transform:translateX(0)}
.track--ltr{transform:translateX(-50%)}

/* =========================================================
   WORKS (6 portrait cards on a 12-col grid; 12px titles)
   6 equal columns + 8px gutters + 16px side margins => 228px cards @1440
   (each card = 2 of the 12 base columns)
   ========================================================= */
.works{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0 var(--m)}
.work{min-width:0}
.work__media{aspect-ratio:228/600;background:var(--ink);overflow:hidden}
.work__media video{width:100%;height:100%;display:block;object-fit:cover;object-position:center}   /* fill box top-to-bottom, centred, sides cropped */
.work__title{
  display:block;color:var(--white);   /* eagle cursor shows over the title too (cursor:none via .works) */
  font-weight:500;text-transform:uppercase;
  font-size:12px;line-height:12px;            /* 12 / 12, tracking -4% (global) */
  padding-top:8px;
  text-box-trim:trim-both;text-box-edge:cap alphabetic;   /* box hugs the glyphs */
  transition:color .2s ease;
}
@supports not (text-box-trim: trim-both){
  .work__title::before{content:"";display:block;height:0;margin-bottom:-.126em}
}
/* hovering anywhere on a card (image OR title) turns that title yellow; same on keyboard focus */
.work:focus-visible .work__title{color:var(--yellow)}
@media (hover:hover){.work:hover .work__title{color:var(--yellow)}}   /* :hover gated to real pointers so a TAP on mobile doesn't fire a hover state (which needed a 2nd tap to enter) */

/* =========================================================
   BRAND MARQUEE (large LITTLE EAGLES logo scroll; last block before footer)
   ========================================================= */
.brand-marquee{overflow:hidden;padding:16px 0}   /* 16px above (from CTA) and below (to footer) */
.brand-marquee .track img{height:clamp(44px,6.2vw,90px)}

/* =========================================================
   CTA "What we can do for you" (80 Medium yellow; above the logo marquee;
   arrow rests at 45deg, points right on hover)
   ========================================================= */
.cta{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px var(--m) 0}   /* 24px below the works, then the logo marquee */
.cta__text{font-weight:500;text-transform:uppercase;line-height:.94;font-size:var(--t-reel);color:var(--yellow)}
.cta__arrow-wrap{flex:0 0 auto;display:block;line-height:0}   /* the reveal fades THIS wrapper (opacity + rise); the arrow keeps its own rotate transform -> hover rotation survives, exactly like the footer Let's Talk arrow */
.cta__arrow{height:var(--t-reel);width:auto;transform:rotate(-45deg);transition:transform .35s ease}
.cta:hover .cta__arrow{transform:rotate(0deg)}

/* =========================================================
   FOOTER (40px yellow bar; 16 Bold, line-height 16; mark right)
   ========================================================= */
.footer{
  display:grid;grid-template-columns:repeat(12,1fr);align-items:center;
  column-gap:clamp(6px,0.8vw,12px);
  min-height:40px;padding:4px var(--m);
  background:var(--yellow);color:var(--ink);
  font-size:var(--t-foot);font-weight:700;line-height:16px;
  overflow:clip;                      /* the rotated Let's Talk arrow must not add page overflow below the bar */
}
.footer__col{grid-column:span 2;display:flex;flex-direction:column;min-width:0}
.footer a{color:var(--ink)}
.mail-cta{display:none}   /* "Send Email" label: hidden on desktop (shows the address), shown on mobile */
.footer a:not(.footer__home):hover{text-decoration:underline;text-underline-offset:2px}   /* clickable text underlines on hover (no opacity change) */
.footer__col--addr{cursor:pointer}                                                          /* whole address is one link -> one hover */
.footer__talk{grid-column:span 2;font-weight:500;text-transform:uppercase;font-size:var(--t-talk);white-space:nowrap;color:var(--ink)}   /* was 700 — unified to the 500 uppercase weight */
.footer__home{grid-column:span 2;justify-self:end;display:inline-flex;align-items:center;line-height:0}   /* logomark on the far right -> home */
.footer__mark{height:24px;width:auto}
.footer__talk-arrow{height:.875em;width:auto;display:inline-block;vertical-align:-.05em;margin-left:.3em;transform:rotate(-45deg);transition:transform .35s ease}
.footer__talk:hover .footer__talk-arrow{transform:rotate(0deg)}
.footer__info,.footer__cta{display:contents}   /* wrappers are transparent on the desktop grid (mobile turns them into the two footer zones) */
.footer__talk-arrow--light,.footer__mark--light{display:none}   /* yellow-on-ink variants: mobile only */

/* =========================================================
   SERVICES — natural page scroll; the 80pt right-hand list RISES and passes
   UNDER the fixed layout, staying VISIBLE the whole way up.
   The list is ONE tall normal-flow block (.svc__stage) that scrolls with the
   page. The menu bar, the title/hairline/meta frame and the footer are FIXED
   overlays that sit ON TOP of it. Only the OPAQUE menu bar (top) and the yellow
   title glyphs cover the list; everywhere else — the empty right-hand columns
   beside/above the title — the list shows through as it climbs, then slides
   cleanly under the bar. No clip window, no hard edge, no black rectangle.
   Grid: title cols 1-6, mark col 1, intro cols 2-3, list cols 5-12.
   --svc-top (frame height) / --svc-bot (footer + 16px) measured in JS.
   ========================================================= */
body.services{background:var(--ink)}

/* THE LIST — a normal-flow block that scrolls with the page and slides behind
   the fixed frame. It starts below the meta (svc-top) and its last line stops
   16px above the footer (svc-bot = footer height + 16). */
.svc__stage{padding-top:var(--svc-top,252px);padding-bottom:var(--svc-bot,86px)}
.svc__gridrow{display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px;padding:0 var(--m)}
/* the third intro line now LEADS the scrolling column, above the service titles:
   non-caps body voice, a touch bigger, top-aligned with the fixed intro on the left */
.svc__lead{grid-column:5 / 10;grid-row:1;margin-top:2px;margin-bottom:clamp(34px,7vh,84px);font-weight:500;font-size:clamp(20px,2.15vw,30px);line-height:1.12;color:var(--white)}   /* one column narrower (5/10), raised 8px */
.svc__list{grid-column:5 / 13;grid-row:2}
.svc__item{display:block;font-weight:500;text-transform:uppercase;letter-spacing:-.04em;font-size:var(--t-title);line-height:.86;color:var(--white)}
.svc__item + .svc__item{margin-top:.18em}

/* FIXED FRAME — the menu bar is OPAQUE ink so the list disappears cleanly under
   it; the title/hairline/meta are just text ON TOP of the list (z-layered), so
   the list stays visible rising through the empty right columns and only hides
   where the yellow title glyphs actually are. */
.svc__head{position:fixed;top:0;left:0;right:0;z-index:100}
.services .site-header{position:relative;background:transparent}   /* opaque bar: the list slides cleanly UNDER the menu */
.svc__title{
  position:relative;z-index:1;                                    /* title glyphs sit over the list; empty columns stay clear */
  font-weight:500;text-transform:uppercase;letter-spacing:-.04em; /* true -4% at this size (body's -.04em computes small + inherits fixed) */
  font-size:var(--t-title);line-height:.9;color:var(--yellow);
  padding:clamp(14px,2.4vh,30px) var(--m) clamp(12px,1.8vh,20px);
}

/* fixed left column — eagle mark + intro copy (sits 10px lower per request);
   cols 2-3, so it never overlaps the list (cols 5-12) */
.svc__aside{
  position:fixed;top:var(--svc-top,252px);left:0;right:0;z-index:100;pointer-events:none;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px;padding:0 var(--m);
}
.svc__mark{grid-column:1;justify-self:end;align-self:start;margin-top:10px;height:18px;width:auto;max-width:none;display:block}   /* down 10px, pushed to the right of col 1 (near the intro) */
.svc__intro{grid-column:2 / 4;margin-top:10px;display:flex;flex-direction:column;gap:1.1em}   /* +10px per request */
.svc__intro p{font-size:var(--t-meta);font-weight:500;text-transform:uppercase;line-height:1.16;color:var(--white)}   /* was 700 — unified to the 500 uppercase weight */

/* fixed footer pinned to the floor (the list slides under it) */
.services .footer{position:fixed;left:0;right:0;bottom:0;z-index:120}

/* custom eagle cursor over the works grid — white oval mark, colour-contrast via mix-blend */
.eagle-cur{position:fixed;top:50%;left:50%;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);width:max-content;opacity:0;transition:opacity .12s ease;mix-blend-mode:difference}   /* parked on-screen (centre) so its -50% transform never adds page overflow before the first mousemove */
.eagle-cur img{height:18px;width:auto;max-width:none;display:block}   /* 18px like the menu oval; max-width:none + max-content wrapper => never squishes at the screen edge */
body.eagle-on .eagle-cur{opacity:1}
body.eagle-on .works,body.eagle-on .works *{cursor:none}   /* hide system cursor everywhere over the grid — images, gaps AND titles — so only the eagle shows */
@media (hover:none){.eagle-cur{display:none}}   /* touch devices: no eagle cursor at all (it was the first-tap-shows-logo, second-tap-enters bug on mobile Work) */

/* =========================================================
   WORK page ("Latest Work") — fixed opaque header, then the title,
   the 6-card works grid, the brand marquee and the footer.
   Title uses the same scale + offset as Services/Vision.
   ========================================================= */
/* WORK — natural page scroll with the fixed LAYERED head (menu + title + hairline +
   meta), same model as Services/Vision: the works grid + brand marquee scroll UNDER
   it; only the opaque menu bar + yellow title glyphs cover the content. Footer static
   (sits at the end, like Vision). --wk-top (head height) measured in JS. */
body.work-page{background:var(--ink)}
.wk-stage{padding-top:var(--wk-top,252px)}
.wk-head{position:fixed;top:0;left:0;right:0;z-index:100}
.work-page .site-header{position:relative;background:transparent}   /* opaque bar: content slides cleanly under the menu */
.wk-title{
  position:relative;z-index:1;
  font-weight:500;text-transform:uppercase;letter-spacing:-.04em;
  font-size:var(--t-title);line-height:.9;color:var(--yellow);
  padding:clamp(14px,2.4vh,30px) var(--m) clamp(12px,1.8vh,20px);   /* same offset as .svc__title (menu is in-flow above it) */
}
.work-page .works{padding-top:clamp(16px,2.6vh,26px);padding-bottom:clamp(20px,3vw,42px)}
.work-page .brand-marquee{padding:16px 0 20px}
.work-page .footer{position:static}   /* static, at the end (not sticky) */

/* =========================================================
   PROJECT (work-detail) pages — the work-card idea inverted: TITLE first, then the
   VIDEO (kept at its native proportions), then the DESCRIPTION (Vision v-body style).
   Desktop has two variants driven by the video orientation:
   • .pj--h  HORIZONTAL video (e.g. World Skate Games): full-width video on top; below,
     small caps title on cols 3-4 and the bigger lowercase description alongside.
   • .pj--v  VERTICAL reel: tall video on the LEFT (viewport height minus 10px); on the
     right half, small caps title (2 cols) on top and the description (5 cols) below.
   Mobile collapses both to: title -> video -> description (native proportions).
   ========================================================= */
body.project-page{background:var(--ink)}
.project-page .site-header{background:transparent}
.pj{display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px}
.pj__title{font-weight:500;text-transform:uppercase;letter-spacing:-.04em;font-size:13px;line-height:1.28;color:var(--white)}
.pj__back{font-weight:500;text-transform:uppercase;letter-spacing:-.04em;font-size:13px;line-height:1.28;color:var(--white);opacity:.3;text-decoration:none;white-space:nowrap;transition:opacity .2s ease}   /* same style as the project title, 30% opacity; -> Work */
.pj__back:hover{text-decoration:underline}   /* stays grey (30%), just underlines on hover */
.pj__video{align-self:start;background:var(--ink);overflow:hidden;position:relative}
.pj__video video{display:block;width:100%;height:100%;object-fit:contain}   /* full ORIGINAL frame, never cropped (contain, not cover) */
.pj__desc{font-weight:500;font-size:clamp(20px,2.35vw,32px);line-height:1.04;color:var(--white)}   /* base = mobile voice; desktop overridden to the footer style below */
.pj__desc p+p{margin-top:1em}   /* blank line between paragraphs — only F1 has two (after "...other international artists.") */
@media (min-width:760.02px){.pj__desc{font-size:var(--t-foot);font-weight:700;line-height:16px}}   /* DESKTOP: description takes the FOOTER text style (size + spacing); the reveal animation is untouched. 760.02: stesso buco di breakpoint chiuso sopra */
/* prev / next arrows — small, white */
.pj__arrow{font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1;color:var(--white);transition:opacity .2s ease}
.pj__arrow:hover{opacity:.55}

/* --- HORIZONTAL: full-width video on top; below, small title (cols 3-4) + bigger
       lowercase description alongside; prev/next arrows top of the text row, far L/R --- */
.pj--h{row-gap:clamp(22px,3vw,40px);padding:calc(var(--hh,50px) + clamp(16px,2.6vh,30px)) var(--m) clamp(46px,9vh,110px)}
.pj--h .pj__text,.pj--h .pj__nav{display:contents}   /* let title/desc/arrows place directly on the grid */
.pj--h .pj__video{grid-column:1 / -1;grid-row:1;aspect-ratio:1920/700}   /* full width within the 16px page margins */
.pj--h .pj__head{grid-column:3 / 11;grid-row:2;display:flex;justify-content:space-between;align-items:baseline;gap:24px;align-self:start}   /* title LEFT, "Back" RIGHT on the SAME row (like the vertical projects), not stacked */
.pj--h .pj__desc{grid-column:3 / 11;grid-row:3;margin-top:clamp(14px,1.8vw,26px)}   /* description on the row BELOW the title/back */
.pj--h .pj__arrow--prev{grid-column:1;grid-row:2 / 4;align-self:center;justify-self:start}
.pj--h .pj__arrow--next{grid-column:12;grid-row:2 / 4;align-self:center;justify-self:end}

/* --- VERTICAL reel: video fills the LEFT half (cols 1-6) and is tall -> the PAGE
       scrolls it; the text block sits on the RIGHT half and is STICKY (stays put while
       the video scrolls, Olivetti-style); prev/next arrows FIXED at the bottom of the
       right half (extreme left of the right half + extreme right) --- */
.pj--v{align-items:start;align-content:start;padding:calc(var(--hh,50px) + clamp(16px,2.6vh,30px)) var(--m) 16px}   /* bottom 16px -> the tall video ends 16px above the footer */
.pj--v .pj__nav{display:contents}
.pj--v .pj__video{grid-column:7 / 13;grid-row:1;width:100%;aspect-ratio:640/1080}   /* DESKTOP: video on the RIGHT half. 640/1080 = the REAL pixel size of every project reel, so the box and the frame coincide exactly: no letterbox band above/below, and the space is reserved from the first paint (zero layout shift). If a reel is ever replaced with different proportions, script.js rewrites this aspect-ratio from the file's own metadata. Mobile keeps its own stacked order */
/* the sticky text block is itself a 6-col grid (the right half) so the title keeps 2
   columns and the description 5 columns, per spec */
.pj--v .pj__text{grid-column:1 / 7;grid-row:1;align-self:start;position:sticky;top:calc(var(--hh,50px) + clamp(16px,2.6vh,30px));
  display:grid;grid-template-columns:repeat(6,1fr);column-gap:8px}   /* DESKTOP: text block moved to the LEFT half (video is now on the right) */
.pj--v .pj__head{display:contents}   /* title + back place directly on the sticky 6-col grid */
.pj--v .pj__title{grid-column:1 / 3;grid-row:1}                                     /* title STAYS on 2 columns */
.pj--v .pj__back{grid-column:4 / 7;grid-row:1;justify-self:end;align-self:start}    /* "Back to Work" far right at the 16px margin, same row as the title */
.pj--v .pj__desc{grid-column:1 / 6;margin-top:clamp(16px,2.4vh,28px)}  /* 5 columns */
.pj--v .pj__arrow{position:fixed;bottom:16px;z-index:50}   /* rest 16px from the viewport bottom; JS lifts them to sit 16px above the footer as it scrolls in */
.pj--v .pj__arrow--prev{left:var(--m)}                        /* arrows follow the text to the LEFT half now */
.pj--v .pj__arrow--next{left:auto;right:calc(50% + 4px)}

/* =========================================================
   LEGAL pages (Privacy Policy) — fixed header + static footer; the legal copy sits in a
   single readable column on the ink field, using the shared type system (body copy set
   smaller than the display scale for comfortable long-form reading). Neutral on-brand
   DRAFT layout — global -4% tracking inherited; adjust in Figma as wanted.
   ========================================================= */
body.legal-page{background:var(--ink)}
.legal-page .site-header{background:transparent}
.legal-stage{padding:calc(var(--hh,50px) + clamp(24px,5vh,64px)) var(--m) clamp(40px,8vh,96px);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px}
.legal-title{grid-column:1 / -1;color:var(--yellow);font-weight:500;text-transform:uppercase;
  line-height:.98;font-size:clamp(34px,7vw,72px);margin-bottom:clamp(10px,1.6vh,18px)}
.legal-sub{grid-column:1 / -1;color:var(--white);font-weight:400;font-size:13px;opacity:.7;
  margin-bottom:clamp(28px,5vh,56px)}
.legal{grid-column:1 / 9;color:var(--white)}                 /* readable measure: 8 of 12 cols */
.legal > * + *{margin-top:clamp(10px,1.5vh,16px)}
.legal h2{font-weight:500;text-transform:uppercase;font-size:15px;color:var(--yellow);margin-top:clamp(26px,4vh,40px)}
.legal h2:first-of-type{margin-top:0}
.legal p{font-weight:400;font-size:clamp(14px,1.05vw,15px);line-height:1.55}
.legal a{color:var(--yellow);text-underline-offset:3px}
.legal a:hover{text-decoration:underline}
.legal strong{font-weight:700}
.legal-note{grid-column:1 / 9;color:var(--white);font-size:12px;line-height:1.5;opacity:.55;margin-top:clamp(28px,5vh,52px)}
@media (max-width:760px){
  .legal,.legal-note{grid-column:1 / -1}
  .legal-title{font-size:clamp(30px,10vw,46px)}
}

/* =========================================================
   CONTACT page — SAME fixed-frame model as Services / Work: the header + title +
   hairline + meta are a FIXED frame; the contact list is a normal-flow block that
   scrolls UP behind it, and the title shrinks on scroll like every other page.
   When the page fits one screen the list stays vertically centred in the gap
   between the frame and the fixed footer (so it looks unchanged); when it overflows
   it scrolls and the title collapses. Payoff yellow, list white.
   --ct-top (frame height) / --ct-bot (footer + 16) are measured in JS.
   ========================================================= */
body.contact-page{background:var(--ink)}
.ct-head{position:fixed;top:0;left:0;right:0;z-index:100}
.contact-page .site-header{position:relative;background:transparent}   /* opaque bar: the list slides cleanly UNDER the menu */
.ct-title{
  position:relative;z-index:1;
  font-weight:500;text-transform:uppercase;letter-spacing:-.04em;
  font-size:var(--t-title);line-height:.9;color:var(--yellow);
  padding:clamp(14px,2.4vh,30px) var(--m) clamp(12px,1.8vh,20px);   /* same offset as .svc__title (menu is in-flow above it) */
}
.ct-stage{
  min-height:100vh;min-height:100dvh;
  display:grid;align-content:center;                                 /* centre the list in the gap; it still scrolls when it overflows */
  padding-top:var(--ct-top,252px);padding-bottom:var(--ct-bot,120px);
}
.ct-list{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px;
  padding:0 var(--m);
}
.ct-item{
  grid-column:2 / 13;display:flex;align-items:baseline;gap:.36em;width:max-content;max-width:100%;
  font-weight:500;text-transform:uppercase;letter-spacing:-.04em;
  font-size:var(--t-title);line-height:1.04;color:var(--white);
}
.contact-page .footer{position:fixed;left:0;right:0;bottom:0;z-index:120}   /* pinned to the floor; the list slides under it */
/* PER-CHARACTER hover: hovering a single glyph lifts it 16px, fluid up on hover and
   back down on leave; it stays up while the mouse rests on it. Chars are wrapped in
   .ct-char spans (+ the .ct-mark arrow/plus) by script.js. */
.ct-label{display:inline-block}   /* wrapper: the chars flow inline INSIDE it, not as flex items of .ct-item */
.ct-char,.ct-mark{display:inline-block;transition:transform .32s cubic-bezier(.2,.75,.25,1)}
.ct-char:hover,.ct-mark:hover{transform:translateY(-16px)}
.ct-mark{flex:0 0 auto;color:inherit}

/* =========================================================
   VISION page (reuses the home system + these additions)
   12-col grid: 16px margins, 8px gutters.
   ========================================================= */
/* Vision — SAME model as Services: natural page scroll; the copy is one tall block
   that rises and passes UNDER the fixed layout, staying VISIBLE. Only the OPAQUE menu
   bar (top) and the yellow motto glyphs cover the copy; the hairline + meta are text
   z-layered ON TOP of the copy, so it shows through the empty columns as it climbs,
   then slides under the bar. --v-top/--v-bot measured in JS. */
body.vision{background:var(--ink)}
.v-stage{
  padding-top:var(--v-top,240px);            /* head is fixed; only the top clearance is needed */
  background:var(--ink);                      /* ink backdrop so the 3D logo's screen-blend still drops the black */
}
.v-head{position:fixed;top:0;left:0;right:0;z-index:100}
.vision .site-header{position:relative;background:transparent}   /* opaque bar: the copy slides cleanly UNDER the menu */
.vision .footer{position:static}   /* NOT sticky: the footer sits at the bottom in normal flow, like the homepage */

/* motto is the fixed title (text ON TOP of the copy): same offset & scale as .svc__title */
.v-hero{position:relative;z-index:1;padding:clamp(14px,2.4vh,30px) var(--m) clamp(12px,1.8vh,20px)}
.v-hero__type{font-weight:500;text-transform:uppercase;letter-spacing:-.04em;font-size:var(--t-title);line-height:.9;color:var(--yellow)}   /* same scale + leading + tracking as .svc__title (the -.04em was missing -> Vision motto read looser than the sibling titles) */

.v-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px;padding:clamp(18px,2.6vw,34px) var(--m) clamp(44px,7.5vh,80px);align-items:start;margin-top:150px}   /* 150px above the first Vision block; bottom pad = old wordmark-row gap before the running sentence */
.v-small{font-size:var(--t-meta);font-weight:500;text-transform:uppercase;line-height:1.16;color:var(--white)}   /* was 700 — unified to the 500 uppercase weight */
.v-body{font-weight:500;font-size:clamp(20px,2.35vw,32px);line-height:1;color:var(--white)}   /* 32 / 32 lh */
.v-intro__small{grid-column:3 / 5;grid-row:1;align-self:start}   /* moved ONE column right (was 2/4) */
.v-intro__body{grid-column:7 / 11;grid-row:1;margin-top:-10px}   /* same columns as the lower "born with the aim" paragraph */

/* the wordmark now lives INSIDE .v-row (col 3 — one column right, left-aligned) and is
   pinned to the BOTTOM of the intro row so its baseline lines up with the END of the
   right-hand paragraph ("Our organization's primary objective...") */
.v-arrow__logo{grid-column:3;grid-row:1;align-self:end;justify-self:start;height:18px;width:auto;max-width:none;display:block;filter:brightness(0) invert(1)}

/* scrolling sentence — reads left at reading pace (JS sets px/s) */
.v-scroll{overflow:hidden;padding:clamp(14px,2vh,26px) 0 0}
.v-scroll__unit{display:inline-block;padding-right:clamp(48px,7vw,140px);font-weight:500;text-transform:uppercase;font-size:var(--t-title);line-height:1;color:var(--white);white-space:nowrap}   /* same scale as the page titles at full size (t-title, max 80) */

.v-quote{text-align:center;font-weight:500;text-transform:uppercase;letter-spacing:-.04em;font-size:var(--t-title);line-height:.9;color:var(--white);padding:0 var(--m) 0;margin-top:-6px}   /* same size + style as the page titles (t-title / .9 / -.04em), just white; margin-top:-6px keeps the gap to the scrolling line unchanged */

/* 3D rotating logo — screen blend drops the black, leaving the yellow mark on ink */
.v-logo{display:block;margin:clamp(16px,3vh,40px) auto;width:clamp(150px,14.5vw,210px);aspect-ratio:300/226;height:auto;mix-blend-mode:screen}

.v-lower{display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px;row-gap:clamp(18px,3vh,34px);padding:clamp(30px,5vh,60px) var(--m) clamp(46px,8vh,96px)}
.v-lower__lead{grid-column:3 / 7;grid-row:1}
.v-lower__mark{grid-column:3 / 4;grid-row:2;justify-self:start;align-self:start;height:18px;width:auto;display:block;position:relative;top:-63px}   /* raised via position (NOT transform): the reveal owns transform, so keep the raise on top so it survives the fade-in. -63px == the note's offset -> tops aligned */
.v-lower__note{grid-column:4 / 5;grid-row:2;position:relative;top:-63px}   /* raised via position (NOT transform): transform is owned by the .v-small reveal, which would reset it to none and drop the note ~63px below the mark. top:-63px aligns the note's top with the eagle mark. */
.v-lower__body{grid-column:7 / 11;grid-row:1 / 3;display:flex;flex-direction:column;gap:1.1em}   /* 4 columns */

/* =========================================================
   MOBILE  (≤760px) — calibrated on the 375 mobile SVGs.
   One column; display type full-bleed flush-left; running copy inset 54px;
   every desktop pixel-nudge (−10 / −6 / −60) is reset so nothing overlaps.
   ========================================================= */
@media (max-width:760px){
  /* =====================================================================
     MOBILE SYSTEM — rebuilt 2026-07-19 (my call, per Francesco).
     12-col grid, 16px margins. TWO clear type roles:
       • UPPERCASE display (hero, page titles, service list, CTA, band labels,
         quote) sits in a TIGHTER measure — capped so it occupies FEWER columns
         and leaves a deliberate right margin (no more full-bleed shouting).
       • lowercase reading copy runs BIGGER and the FULL width, so it reads
         generously. Every arbitrary desktop inset (54px / −60px) is removed.
     Vertical rhythm is normalized; each page unstacks to one clean scroll.
     ===================================================================== */

  /* ---------- header + full-screen nav (eagle → X while open) ---------- */
  /* the wordmark + toggle sit ABOVE the full-screen nav overlay (z190) so the
     logo stays top-left and the X stays top-right while the menu is open */
  .site-header__brand{position:relative;z-index:200}
  .nav-toggle{display:block;position:relative;z-index:200;width:28px;height:28px;padding:0;margin:0}
  .nav-toggle img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:26px;width:auto}   /* mobile pictogram scaled ~120% (was 22px) */
  .brand-full{display:none}
  .brand-txt{display:block;height:19px;width:auto}
  .site-nav{
    position:fixed;inset:0;z-index:190;background:var(--ink);   /* full-screen OPEN menu keeps a solid bg: nav items are yellow and page content is also yellow, so a transparent overlay is unreadable. The persistent header BAR is transparent (above). */
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:4px;padding:0 var(--m);
    transform:translateY(-101%);
  }
  body.nav-anim .site-nav{transition:transform .34s ease}   /* slide ONLY on a real toggle -> never flashes when the window crosses the breakpoint */
  body.nav-open{overflow:hidden}
  body.nav-open .site-nav{transform:translateY(0)}
  .site-nav a{font-size:clamp(36px,10vw,54px);font-weight:500;line-height:1.12}
  /* the eagle toggle becomes a yellow X while the menu is open (top-right close) */
  body.nav-open .nav-toggle img{display:none}
  body.nav-open .nav-toggle::before,
  body.nav-open .nav-toggle::after{content:"";position:absolute;top:50%;left:50%;width:27px;height:2px;background:var(--yellow)}
  body.nav-open .nav-toggle::before{transform:translate(-50%,-50%) rotate(45deg)}
  body.nav-open .nav-toggle::after{transform:translate(-50%,-50%) rotate(-45deg)}
  /* the full-screen nav overlay is nested INSIDE the fixed frame (z-100); on Services/Contact
     the fixed footer (z-120) + the aside were painting THROUGH it. While the menu is open,
     lift the frame above them so the solid black overlay covers everything. */
  body.nav-open .svc__head,body.nav-open .v-head,body.nav-open .ct-head,body.nav-open .wk-head{z-index:300}

  /* ---------- type roles ---------- */
  /* UPPERCASE display -> tighter measure (fewer columns / right margin). The home hero
     + band labels are capped directly; page titles keep their intended <br> breaks and
     are simply SIZED (below) so the longest line already leaves a right margin. */
  .hero__type{max-width:84%}
  .band__label{max-width:90%}
  /* small UPPERCASE captions -> readable, left-aligned at the margin */
  .svc__intro p,.v-small{font-size:13px;line-height:1.3;max-width:92%}
  /* lowercase reading copy -> BIGGER + full width */
  .v-body{font-size:clamp(22px,6vw,27px);line-height:1.18;max-width:100%}

  /* ---------- meta (two items pinned to the margins) ---------- */
  .meta{display:flex;justify-content:space-between;gap:12px}
  .meta__c{display:none}

  /* ---------- hero (home) ---------- */
  .hero{padding:clamp(40px,7vh,72px) var(--m) clamp(40px,7vh,78px)}
  .hero__type{font-size:clamp(40px,12.5vw,60px);line-height:.92}
  .hero__mark{display:none}

  /* ---------- press / client bands ---------- */
  .band{flex-direction:column;align-items:stretch;gap:12px}
  .band--right{flex-direction:column-reverse}
  .band__label{font-size:clamp(30px,10vw,56px);flex-direction:row;flex-wrap:wrap;gap:.24em;line-height:.85}   /* one line: "FEATURED ON" / "IN C/O WITH" (no forced break) */
  .band--right .band__label{justify-content:flex-start;text-align:left}   /* mobile: "FEATURED ON" flush LEFT (no big left gap) */
  .band__marquee{width:100%;margin-top:0}

  /* ---------- works grid (two portrait reels per row) ---------- */
  .works{grid-template-columns:repeat(2,1fr);gap:8px}

  /* ---------- footer: ONE yellow block (like desktop), no dark band ----------
     Static-footer pages (home / vision / work / project / privacy) get a TALL yellow
     tail so the page ENDS in yellow and stays yellow behind Safari's bottom toolbar
     (no black strip). The text stays at the TOP; the extra height is empty yellow
     below (~2.5x the old bar). Fixed-footer pages (services / contact) keep it
     compact — their footer is pinned to the viewport bottom already. */
  .footer{display:flex;flex-direction:column;align-items:stretch;background:var(--yellow);min-height:clamp(240px,46vh,300px);padding:0 0 clamp(60px,11vh,92px)}   /* ONE tall yellow block: contact + Let's Talk in ALTO, poi giallo vuoto fino in fondo. La min-height alta e' una scelta di progetto (compito #127) e NON un residuo del menu in footer, che e' arrivato dopo ed e' stato tolto su richiesta: serve perche' la pagina FINISCA in giallo anche dietro la barra inferiore di Safari. align-items:stretch OVERRIDES the desktop grid's align-items:center so the rows fill full width (else they shrink-wrap + centre). */
  .footer__info{display:flex;justify-content:space-between;gap:10px;background:transparent;color:var(--ink);padding:12px var(--m)}
  .footer__info .footer__col{grid-column:auto;min-width:0;font-size:10px;line-height:1.05;font-weight:700}   /* interlinea matched to the desktop footer (tight) */
  .footer__col--social{display:none}                 /* SVG mobile footer is 3 columns */
  /* mobile: the col-2 email shows a compact "Send Email" CTA instead of the raw address */
  .footer__info .mail-addr{display:none}
  .footer__info .mail-cta{display:inline}
  .footer__cta{display:flex;align-items:center;justify-content:space-between;padding:14px var(--m)}
  .footer__cta .footer__talk{grid-column:auto;display:inline-flex;align-items:center;color:var(--ink);font-size:24px;font-weight:500}   /* dark on yellow (matches desktop) */
  .footer__talk-arrow--dark{display:inline-block}
  .footer__talk-arrow--light{display:none}
  .footer__mark{grid-column:auto}
  .footer__mark--light{display:none}
  .footer__mark--dark{display:block;height:26px;width:auto}
  /* MOBILE: the footer is END-OF-PAGE (static) on EVERY page — Services/Contact are pinned
     ONLY on desktop. Contact flows naturally after its content; Services is a flex column so
     its footer is pushed last (order:3, below). Both then use the tall block + centered menu. */
  .contact-page .footer{position:static}

  /* ---------- CONTACT (desktop fixed+shrink model, mobile sizes) ---------- */
  .ct-title{font-size:var(--t-title-m);line-height:.96;padding:clamp(14px,2.4vh,30px) var(--m) 12px}
  .ct-list{grid-template-columns:1fr;padding:0 var(--m)}   /* single column; centring + head/footer clearance come from the desktop .ct-stage */
  .ct-item{grid-column:auto;font-size:clamp(34px,9.5vw,52px);line-height:1.02}
  .ct-item + .ct-item{margin-top:.14em}
  .ct-stage{padding-bottom:0}   /* footer is static at the end now (mobile); drop the fixed-footer clearance */

  /* ---------- VISION (desktop fixed+shrink model, mobile sizes) ---------- */
  .v-hero{padding:clamp(14px,2.4vh,30px) var(--m) 6px}
  .v-hero__type{font-size:var(--t-title-m);line-height:.96}
  .br-d{display:none}   /* mobile: hide the desktop breaks; the locked .br-m breaks show instead, so each title keeps its wrapping while it shrinks (no re-wrap stutter) */
  .v-intro__body,.v-lower__lead,.v-lower__body,.v-arrow__logo{grid-column:1 / -1}
  .v-intro__small,.v-intro__body,.v-arrow__logo{grid-row:auto;align-self:start}   /* reset the desktop grid-row:1 bottom-align so they stack cleanly on mobile */
  .v-row{row-gap:14px;padding:clamp(20px,5vh,34px) var(--m) clamp(24px,6vh,42px);margin-top:0}   /* 150px desktop spacing neutralized on mobile; small gap before the running sentence */
  .v-intro__small{grid-column:7 / -1;padding-left:0}   /* small caps -> RIGHT half, top-aligned (same heading as on the left) */
  .v-intro__body{margin-top:0;padding-left:0}
  .v-arrow__logo{justify-self:start;margin-top:clamp(14px,3.5vh,24px)}   /* wordmark full-width, left, small gap above */
  .v-scroll,.v-scroll__unit{-webkit-text-size-adjust:none;text-size-adjust:none}   /* iOS WebKit was auto-inflating this ultra-wide nowrap line (text autosizing), making it read BIGGER than the motto even though the CSS size is identical; 'none' forces WebKit to leave it at its declared size. Only this decorative running line is affected. */
  .v-scroll__unit{font-size:var(--t-title-m);letter-spacing:-.04em}    /* same scale AND tracking as the motto/titles: was inheriting the body -.04em computed at 16px (-0.64px, looser) which read slightly bigger; now -.04em at its own size like .v-quote */
  .v-quote{font-size:var(--t-title-m);margin-top:-2px;padding-top:0}   /* gap to the running marquee = the motto's own interline rhythm (baseline-to-baseline ~= one line-height); -8px was too tight (attaccato) on iOS */
  .v-logo{width:clamp(130px,34vw,168px)}
  .v-lower{row-gap:12px;padding-top:clamp(26px,6vh,46px)}
  .v-lower__lead{grid-row:1;padding-left:0}
  .v-lower__mark{grid-row:2;grid-column:1;justify-self:start;align-self:start;margin:0;top:auto}   /* white eagle -> far LEFT, same row as the note (reset desktop top:-60px). transform is left to the reveal (fade), no longer reset here */
  .v-lower__note{grid-row:2;grid-column:7 / -1;padding-left:0;top:auto}                     /* note -> RIGHT half, same height (reset desktop top:-63px) */
  .v-lower__body{grid-row:3;gap:.7em;margin-top:36px}                                      /* 4x gap (12 row-gap + 36) down to "Our organization..." */
  .v-lower__body .v-body{padding-left:0}

  /* ---------- SERVICES (desktop fixed+shrink model, mobile sizes; VERTICAL list) ---------- */
  body.services{display:flex;flex-direction:column;padding-top:var(--svc-top,168px);padding-bottom:0}   /* content flows below the fixed head; footer is static at the end now (mobile), no bottom clearance */
  .svc__title{font-size:var(--t-title-m);line-height:.96;padding:clamp(14px,2.4vh,30px) var(--m) 12px}   /* shrinks on scroll like desktop */
  .svc__aside{order:1;position:static;top:auto;display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px;padding:0 var(--m) clamp(22px,4.5vh,36px)}
  .svc__mark{grid-column:1;grid-row:1;justify-self:start;align-self:start;margin:0}   /* white logomark -> far LEFT */
  .svc__intro{grid-column:7 / -1;grid-row:1;margin:0;gap:.9em}                         /* small caps -> RIGHT half */
  .svc__stage{order:2;position:static;display:block;padding:0 0 clamp(48px,9vh,80px)}   /* bottom gap so the last list item ("Music Festival") isn't glued to the yellow footer on mobile */
  .svc__gridrow{display:block;padding:0 var(--m)}
  .svc__lead{grid-column:auto;margin:0 0 clamp(26px,5.5vh,48px);font-size:clamp(18px,4.8vw,24px);line-height:1.22}
  .svc__list{grid-column:auto;display:block;width:100%}                                /* VERTICAL list (no marquee) */
  .svc__item{display:block;font-size:clamp(34px,9.5vw,52px);line-height:.92;white-space:normal}
  .svc__item + .svc__item{margin-top:clamp(16px,3.4vh,30px)}                            /* UNIFORM gap between the titles */
  .services .footer{position:static;order:3}   /* mobile: static at the END of the flex column (after aside order:1 + list order:2) */

  /* ---------- WORK (desktop fixed+shrink model, mobile sizes) ---------- */
  .wk-title{font-size:var(--t-title-m);line-height:.96;padding:clamp(14px,2.4vh,30px) var(--m) 12px}
  .work-page .works{padding-top:clamp(14px,3vh,22px)}

  /* ---------- PROJECT pages (title -> video -> description; video keeps native proportions) ---------- */
  .pj{display:flex;flex-direction:column;gap:clamp(14px,3vh,22px);padding:clamp(60px,9vh,78px) var(--m) clamp(34px,7vh,54px)}
  .pj__text,.pj--v .pj__text{display:contents}   /* title + desc flow directly so they order around the video (beats the desktop .pj--v grid) */
  .pj--v .pj__head,.pj--h .pj__head{order:1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:8px;align-items:baseline}
  .pj--v .pj__title,.pj--h .pj__title{grid-column:1 / 7;grid-row:1;font-size:13px;line-height:1.3}      /* title -> ONLY the 6 left columns (2-class specificity beats desktop .pj--v .pj__title) */
  .pj--v .pj__back{grid-column:7 / 13;grid-row:1;justify-self:end;align-self:baseline}                  /* vertical: far right, same row */
  .pj--h .pj__back{grid-column:7 / 13;grid-row:1;justify-self:end;align-self:baseline}                  /* horizontal: far right, same row as the title — IDENTICO al verticale sopra. Richiesta esplicita: "back to work lo mettiamo alla destra del titolo del progetto, non sotto come lo vedo adesso (va messo come per i contenuti verticali)". Il desktop era gia' stato corretto (.pj--h .pj__head flex space-between), il mobile era rimasto indietro. */
  .pj__video{order:2;width:100%}
  .pj--v .pj__video{height:auto;width:100%}   /* full width within margins, native portrait aspect */
  .pj__desc{order:3;font-size:clamp(22px,6vw,27px);line-height:1.18}
  .pj--v .pj__nav,.pj--h .pj__nav{order:4;display:flex;justify-content:space-between;width:100%;margin-top:clamp(4px,1.4vh,12px)}   /* beats the desktop display:contents */
  .pj__nav .pj__arrow{position:static;font-size:26px}   /* arrows in-flow at the bottom on mobile (beats .pj--v .pj__arrow) */
}



/* ===== v2.0 MOTION — movement layer ===== */
.mo :is(.works .work,.footer__info,.footer__cta,.band,.brand-marquee,.svc__intro p,.svc__lead,.svc__item,.svc__mark,.v-small,.v-body,.v-quote,.v-logo,.v-arrow__logo,.v-lower__mark,.ct-item,.cta__text,.cta__arrow-wrap,.hero__mark,.pj__title,.pj__back,.pj__desc p,.pj__video){opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.mo :is(.works .work,.footer__info,.footer__cta,.band,.brand-marquee,.svc__intro p,.svc__lead,.svc__item,.svc__mark,.v-small,.v-body,.v-quote,.v-logo,.v-arrow__logo,.v-lower__mark,.ct-item,.cta__text,.cta__arrow-wrap,.hero__mark,.pj__title,.pj__back,.pj__desc p,.pj__video).is-in{opacity:1;transform:none}
.mo .v-stage .v-logo{transform:none}   /* the 3D logo fades in with OPACITY ONLY (2-class specificity to beat the reveal's :is() weight): a transform on a mix-blend-mode video destabilises Safari's compositing and flashes the black background on resize. At rest (opacity:1, no transform) its blend is identical to before, so no resize regression. */
.mo .pt-curtain{position:fixed;inset:0;z-index:9999;background:var(--yellow);pointer-events:none;will-change:transform;animation:pt-lift .7s cubic-bezier(.7,0,.3,1) .25s both}   /* gated on .mo: with JS off the curtain never covers. The lift is a CSS ANIMATION, not JS: it starts at the FIRST PAINT of this div (first element in <body>) and always clears at ~950ms, whatever the page weighs and however slow the line. Nothing can leave it down. */
@keyframes pt-lift{from{transform:translateY(0)}to{transform:translateY(-100%)}}
/* A tendina alzata la si toglie DAVVERO di mezzo. Con animation-fill-mode:both il
   div restava li' fisso a tutto schermo, sopra ogni cosa (z-index 9999) e con
   will-change:transform, cioe' un livello grafico da 390x844 a densita' 3 (circa
   12MB di texture) tenuto vivo dalla GPU per sempre, su OGNI pagina, sopra
   l'header fisso che contiene i titoli. Ora appena l'alzata finisce il livello
   viene rilasciato. Al click la classe viene tolta e la tendina torna disponibile
   per la risalita in uscita. Nessun cambiamento visivo: era gia' fuori schermo. */
.mo .pt-curtain.pt-off{will-change:auto;visibility:hidden}
.hero__type>span{overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
/* line-mask reveal (bodies + big display text, all pages) — each visual line rises from its own mask, like the homepage payoff */
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln__i{display:inline-block;will-change:transform}
@media (prefers-reduced-motion:reduce){.mo :is(.works .work,.footer__info,.footer__cta,.band,.brand-marquee,.svc__intro p,.svc__lead,.svc__item,.svc__mark,.v-small,.v-body,.v-quote,.v-logo,.v-arrow__logo,.v-lower__mark,.ct-item,.cta__text,.cta__arrow-wrap,.hero__mark,.pj__title,.pj__back,.pj__desc p,.pj__video){opacity:1;transform:none;transition:none}.pt-curtain{display:none}.hero__type>span>span{transform:none!important}}