*{margin:0;padding:0;box-sizing:border-box}
:root{
  --k:#060606;--k2:#0a0a0a;--y:#F5FF00;--w:#F5F0E8;
  --mu:rgba(245,240,232,0.5);--mu2:rgba(245,240,232,0.62);--mu3:rgba(245,240,232,0.50);
  --bd:rgba(245,255,0,0.12);--bd2:rgba(245,240,232,0.08)
}
html{scroll-behavior:smooth}
body{background:var(--k);color:var(--w);font-family:'DM Sans',sans-serif;line-height:1.5;overflow:hidden;height:100vh}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:700}
a{color:inherit;text-decoration:none}

/* CHROME */
.chrome-top{position:fixed;top:0;left:0;right:0;padding:1.4rem 2rem;display:flex;justify-content:space-between;align-items:center;z-index:50;pointer-events:none}
.chrome-top > *{pointer-events:auto}
.logo{font-family:'Cormorant Garamond',serif;font-size:clamp(0.72rem,2.4vw,0.95rem);flex-shrink:1;min-width:0;white-space:nowrap;font-weight:700;letter-spacing:0.38em;text-transform:uppercase;color:var(--y)}
.nav-links{display:flex;gap:1.8rem;list-style:none;font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase}
.nav-links a{color:rgba(245,240,232,0.7);transition:color 0.3s;cursor:pointer}
.nav-links a:hover{color:var(--y)}
.nav-cta{padding:0.55rem 1.3rem;border:1px solid var(--y);color:var(--y);font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;transition:color 0.35s;background:rgba(6,6,6,0.5);backdrop-filter:blur(10px)}
.nav-cta::before{content:'';position:absolute;inset:0;background:var(--y);transform:translateX(-101%);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);z-index:-1}
.nav-cta:hover{color:var(--k)}
.nav-cta:hover::before{transform:translateX(0)}

.chrome-bot{position:fixed;bottom:0;left:0;right:0;padding:1.6rem 2rem;display:flex;justify-content:space-between;align-items:flex-end;z-index:50;pointer-events:none;font-size:0.55rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--mu)}
.chrome-bot > *{pointer-events:auto}
.scroll-hint{display:flex;align-items:center;gap:0.6rem;color:var(--y);font-weight:500}
.scroll-hint::before{content:'';width:24px;height:1px;background:var(--y);animation:nudge 2.5s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.panel-counter{font-family:'Cormorant Garamond',serif;font-size:0.85rem;font-style:italic;color:var(--y);letter-spacing:0.05em;text-transform:none}
.panel-counter .total{color:var(--mu2)}
.progress-bar{position:fixed;bottom:0;left:0;right:0;height:2px;background:var(--bd2);z-index:49}
.progress-fill{position:absolute;top:0;left:0;height:100%;background:var(--y);width:0%;transition:width 0.1s linear;box-shadow:0 0 12px rgba(245,255,0,0.6)}

/* CANVAS */
.canvas-track{display:flex;height:100vh;width:max-content;will-change:transform}
.panel{width:100vw;height:100vh;flex-shrink:0;position:relative;display:flex;align-items:center;padding:0 8vw;overflow:hidden}

/* ─── BACKGROUND VIDEO LAYER ───────────────────────────────────── */
.bg-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.bg-video-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,0.03) 0%,rgba(6,6,6,0.065) 100%);
}

/* ─── VISIBLE PHOTO PLACEHOLDERS ───────────────────────────────── */
/* When the actual photo file doesn't exist, the placeholder shows through */
.media-slot{
  position:relative;
  background:var(--k2);
  overflow:hidden;
  border:1px dashed rgba(245,255,0,0.18);
  display:flex;align-items:center;justify-content:center;
}
.media-slot-bg{
  position:absolute;inset:0;
  background-position:center;background-size:cover;
  z-index:1;
}
.media-slot-prompt{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.2rem;
  text-align:center;
  pointer-events:none;
}
.media-slot-icon{
  font-size:0.6rem;letter-spacing:0.42em;text-transform:uppercase;
  color:var(--y);margin-bottom:0.7rem;font-weight:500;
  display:flex;align-items:center;gap:0.4rem;
}
.media-slot-icon::before{
  content:'⌖';font-size:1rem;color:var(--y);
}
.media-slot-prompt p{
  font-size:0.65rem;line-height:1.65;color:rgba(245,240,232,0.55);
  font-weight:300;font-style:italic;
  font-family:'Cormorant Garamond',serif;
  max-width:280px;
}
.media-slot-meta{
  position:absolute;bottom:0.7rem;left:0.7rem;
  font-size:0.45rem;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--mu2);font-weight:500;z-index:3;
}

/* ─── PANEL 01 · OPENING ───────────────────────────────────────── */
.p-open-content{position:relative;z-index:3}
.p-open-eye{font-size:0.6rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--y);margin-bottom:2rem;display:flex;align-items:center;gap:0.7rem;font-weight:500}
.p-open-eye::before{content:'';width:24px;height:1px;background:var(--y)}
.p-open h1{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,9vw,8rem);font-weight:700;line-height:0.92;letter-spacing:-0.025em;margin-bottom:2rem;max-width:1100px;text-shadow:0 4px 40px rgba(0,0,0,0.75),0 2px 8px rgba(0,0,0,0.5)}
.p-open h1 .it{font-style:italic;font-weight:400;color:var(--y);display:block}
.p-open-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(1rem,1.4vw,1.4rem);color:rgba(245,240,232,0.95);max-width:600px;line-height:1.5;margin-bottom:2.5rem;text-shadow:0 2px 25px rgba(0,0,0,0.85),0 1px 4px rgba(0,0,0,0.6)}
.p-open-pulse{display:flex;align-items:center;gap:0.5rem;font-size:0.55rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--y);font-weight:500}
.p-open-pulse::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--y);animation:pulse 2s ease-in-out infinite;box-shadow:0 0 10px rgba(245,255,0,0.6)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}

/* ─── PANEL 02 · MANIFESTO (letters fly in from the 4th wall) ──── */
.p-quote{justify-content:center;overflow:hidden;background:#050505;padding:0 6vw;perspective:1100px}
/* drifting ambient light */
.q-aura{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(90px);opacity:0.58;
  background:
    radial-gradient(38% 46% at 18% 40%,rgba(245,255,0,0.24),transparent 70%),
    radial-gradient(32% 40% at 82% 70%,rgba(150,120,255,0.12),transparent 72%);
  animation:qAura 20s ease-in-out infinite alternate}
@keyframes qAura{0%{transform:translate(-3%,-2%) scale(1.04)}100%{transform:translate(5%,4%) scale(1.16)}}
.q-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 90% 80% at 45% 50%,rgba(5,5,5,0.18),rgba(5,5,5,0.72) 82%,rgba(5,5,5,0.92) 100%)}
.q-stage{position:relative;z-index:2;max-width:1500px;transform-style:preserve-3d}
.p-quote-stag{font-size:0.55rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--y);margin-bottom:2.2rem;display:flex;align-items:center;gap:0.7rem;font-weight:500}
.p-quote-stag::before{content:'';width:22px;height:1px;background:var(--y)}
.q-line{display:block;font-family:'Cormorant Garamond',serif;letter-spacing:-0.025em}
.q-sm{font-size:clamp(1.3rem,2.9vw,2.5rem);font-style:italic;font-weight:300;color:rgba(245,240,232,0.5);line-height:1.5}
.q-big{font-size:clamp(2.8rem,8.6vw,8rem);font-weight:600;font-style:normal;line-height:0.98;color:var(--w);white-space:nowrap;text-shadow:0 6px 50px rgba(0,0,0,0.6)}
/* per-letter fly-in */
.ltr{display:inline-block;opacity:0;will-change:transform,opacity,filter;transform-style:preserve-3d}
.ltr.glow{color:var(--y);text-shadow:0 0 34px rgba(245,255,0,0.5)}
/* soft elements (eyebrow, small lines, attribution) fade up */
.q-soft{opacity:0;transform:translateY(22px);transition:opacity 0.7s ease,transform 0.7s cubic-bezier(0.16,1,0.3,1)}
/* TRIGGERED ON ARRIVAL — set by the scroll engine */
.p-quote.is-live .ltr{animation:fly4w 0.85s cubic-bezier(0.16,1,0.3,1) both;animation-delay:calc(var(--i)*0.019s)}
.p-quote.is-live .q-soft{opacity:1;transform:none}
.p-quote.is-live .q-soft.s2{transition-delay:0.5s}
.p-quote.is-live .q-soft.s3{transition-delay:1.7s}
@keyframes fly4w{
  0%{opacity:0;transform:translate3d(var(--dx,0),var(--dy,0),760px) rotate(var(--rz,0deg)) scale(1.9);filter:blur(13px)}
  55%{opacity:1;filter:blur(1.5px)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1);filter:blur(0)}
}
.p-quote-attr{margin-top:2.4rem;font-size:0.6rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--mu2);font-weight:500}
@media (prefers-reduced-motion:reduce){
  .ltr{opacity:1 !important;animation:none !important}
  .q-soft{opacity:1 !important;transform:none !important}
}

/* ─── PANEL 03 · PILLARS ───────────────────────────────────────── */
.p-pillars{padding:0 6vw;align-items:flex-end;padding-bottom:4vh}
.p-pillars-top{position:absolute;top:6vh;left:8vw;right:8vw}
.p-pillars-eye{font-size:0.55rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--y);font-weight:500;display:flex;align-items:center;gap:0.7rem;margin-bottom:1.2rem}
.p-pillars-eye::before{content:'';width:22px;height:1px;background:var(--y)}
.p-pillars-h{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:700;color:var(--w);line-height:1;letter-spacing:-0.015em}
.p-pillars-h .acc{color:var(--y)}
.p-pillars-grid{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:0.8rem;width:100%;max-width:1500px}
.pillar{border-top:2px solid var(--y);padding:0;background:rgba(245,255,0,0.015);height:288px;display:flex;flex-direction:column;cursor:pointer;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden}
.pillar:hover{transform:translateY(-4px)}
.pillar-photo{height:80px;position:relative;background:var(--k2);overflow:hidden;border-bottom:1px solid var(--bd2)}
.pillar-photo .media-slot-bg{position:absolute;inset:0}
.pillar-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,0.01) 0%,rgba(6,6,6,0.05) 100%);z-index:2}
.pillar-photo-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0.4rem 0.7rem;text-align:center;z-index:1;overflow:hidden}
.pillar-photo-fallback p{font-size:0.48rem;color:rgba(245,255,0,0.4);font-style:italic;font-family:'Cormorant Garamond',serif;line-height:1.35;font-weight:300}
.pillar-photo-fallback::before{content:'⌖';font-size:1.2rem;color:rgba(245,255,0,0.4);position:absolute;top:0.6rem;left:0.7rem}
.pillar-content{padding:0.95rem 1.15rem 1.1rem;display:flex;flex-direction:column;flex-grow:1;position:relative;z-index:3}
.pillar-n{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;color:var(--y);margin-bottom:0.25rem;letter-spacing:0.02em}
.pillar-t{font-family:'Cormorant Garamond',serif;font-size:1.18rem;font-weight:600;color:var(--w);margin-bottom:0.35rem;line-height:1.04}
.pillar-prop{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:0.78rem;color:var(--y);line-height:1.35;margin-bottom:0.6rem}
.pillar-list{list-style:none;flex-grow:1;font-size:0.62rem;line-height:1.6;color:var(--mu);font-weight:300}
.pillar-list li{padding:0.28rem 0;border-bottom:1px solid var(--bd2);display:flex;justify-content:space-between;align-items:center}
.pillar-list li::after{content:'→';color:var(--mu3);font-size:0.6rem}
.pillar-list li:last-child{border-bottom:none}
.pillar-arr{margin-top:0.6rem;font-size:0.5rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--y);display:inline-flex;align-items:center;gap:0.5rem;transition:gap 0.3s;font-weight:500}
.pillar:hover .pillar-arr{gap:0.9rem}

/* ─── PANEL 04 · CASE STUDIES ──────────────────────────────────── */
.p-cases{padding:0 6vw;align-items:flex-end;padding-bottom:8vh}
.p-cases-top{position:absolute;top:14vh;left:8vw;right:8vw}
.p-cases-eye{font-size:0.55rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--y);font-weight:500;display:flex;align-items:center;gap:0.7rem;margin-bottom:1.2rem}
.p-cases-eye::before{content:'';width:22px;height:1px;background:var(--y)}
.p-cases-h{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-0.02em}
.p-cases-h .acc{color:var(--y)}
.cases-row{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:1.2rem;width:100%;max-width:1400px}
.case{display:flex;flex-direction:column;cursor:pointer;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1)}
.case:hover{transform:translateY(-3px)}
.case-img{aspect-ratio:4/3;margin-bottom:1.2rem}
.case-stat-overlay{position:absolute;bottom:1rem;right:1rem;z-index:4;font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:700;color:var(--y);line-height:1;letter-spacing:-0.02em;text-shadow:0 4px 20px rgba(0,0,0,0.7)}
.case-tag{position:absolute;top:0.8rem;left:0.8rem;z-index:4;font-size:0.5rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--y);background:rgba(6,6,6,0.7);padding:0.3rem 0.6rem;border:1px solid var(--bd);font-weight:500;backdrop-filter:blur(4px)}
.case-name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;color:var(--w);margin-bottom:0.4rem;line-height:1.15}
.case-out{font-size:0.78rem;line-height:1.7;color:var(--mu);font-weight:300}

/* ─── PANEL 05 · MULTINATIONAL ─────────────────────────────────── */
.p-multi{background:radial-gradient(ellipse at 70% 50%,rgba(245,255,0,0.05),transparent 60%);padding:0 8vw}
.p-multi-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;width:100%;max-width:1400px}
.multi-text-eye{font-size:0.55rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--y);margin-bottom:2rem;display:flex;align-items:center;gap:0.7rem;font-weight:500}
.multi-text-eye::before{content:'';width:22px;height:1px;background:var(--y)}
.p-multi h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.6rem,5.5vw,4.6rem);font-weight:700;line-height:0.96;letter-spacing:-0.02em;margin-bottom:2.5rem}
.p-multi h2 .it{font-style:italic;font-weight:400;color:var(--y)}
.multi-stats{display:flex;gap:3rem;flex-wrap:wrap;margin-bottom:2.5rem}
.multi-stat-n{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:700;color:var(--y);line-height:1;letter-spacing:-0.02em}
.multi-stat-l{font-size:0.55rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--mu2);margin-top:0.5rem;font-weight:500}
.multi-link{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.6rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--y);border-bottom:1px solid var(--bd);padding-bottom:0.5rem;width:fit-content;font-weight:500;transition:gap 0.3s;cursor:pointer}
.multi-link:hover{gap:0.9rem}
.multi-photo{aspect-ratio:4/5}

/* ─── PANEL 06 · THE CAPABILITY WALL (kinetic marquee) ─────────── */
.p-caps{padding:0;background:var(--k);align-items:center;justify-content:center;overflow:hidden}
/* moving wall of disciplines */
.caps-wall{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;gap:0.2rem;width:100%}
.caps-row{display:flex;flex-wrap:nowrap;white-space:nowrap;width:max-content;will-change:transform}
.caps-row.r-left{animation:capsL var(--dur,42s) linear infinite}
.caps-row.r-right{animation:capsR var(--dur,42s) linear infinite}
.caps-wall:hover .caps-row{animation-play-state:paused}
@keyframes capsL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes capsR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.caps-row span{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.16;letter-spacing:-0.015em;color:rgba(245,240,232,0.15);display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem}
.caps-row span::after{content:'\2726';font-size:0.32em;color:var(--y);opacity:0.55;transform:translateY(-0.1em)}
.caps-row span.acc{color:var(--y);opacity:0.92}
.caps-row span.out{color:transparent;-webkit-text-stroke:1px rgba(245,240,232,0.28)}
/* legibility veil + headline */
.caps-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 70% 64% at 50% 50%,rgba(6,6,6,0.88) 0%,rgba(6,6,6,0.62) 45%,rgba(6,6,6,0.30) 100%)}
.caps-overlay{position:relative;z-index:2;text-align:center;max-width:980px;padding:0 6vw}
.p-caps-eye{font-size:0.55rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--y);font-weight:500;display:inline-flex;align-items:center;gap:0.7rem;margin-bottom:1.4rem;justify-content:center}
.p-caps-eye::before{content:'';width:22px;height:1px;background:var(--y)}
.p-caps-h{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,5vw,4.2rem);font-weight:700;line-height:1.02;letter-spacing:-0.025em;color:var(--w);text-shadow:0 4px 40px rgba(6,6,6,0.9)}
.p-caps-h .acc{color:var(--y)}
.caps-sub{margin-top:1.6rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1rem,1.8vw,1.4rem);color:rgba(245,240,232,0.66);letter-spacing:0.01em}
.caps-cta{margin-top:2.2rem;display:inline-flex;align-items:center;gap:0.6rem;font-size:0.62rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--k);font-weight:600;background:var(--y);padding:0.95rem 1.8rem;transition:gap 0.3s,transform 0.3s}
.caps-cta:hover{gap:1.1rem;transform:translateY(-2px)}

/* ─── PANEL 07 · CINEMATIC TESTIMONIAL (animated aurora) ───────── */
.p-test{justify-content:center;overflow:hidden;background:#050505}
.test-aurora{position:absolute;inset:-25%;z-index:0;filter:blur(72px);opacity:0.78;
  background:
    radial-gradient(44% 54% at 22% 32%,rgba(245,255,0,0.42),transparent 68%),
    radial-gradient(40% 48% at 78% 66%,rgba(245,255,0,0.26),transparent 70%),
    radial-gradient(36% 44% at 64% 20%,rgba(150,120,255,0.18),transparent 70%),
    radial-gradient(42% 52% at 44% 84%,rgba(245,255,0,0.16),transparent 72%);
  animation:auroraDrift 22s ease-in-out infinite alternate}
@keyframes auroraDrift{
  0%{transform:translate(-5%,-4%) scale(1.05) rotate(0deg)}
  50%{transform:translate(6%,5%) scale(1.22) rotate(7deg)}
  100%{transform:translate(-3%,6%) scale(1.10) rotate(-6deg)}}
.test-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 86% 80% at 50% 50%,rgba(5,5,5,0.14) 0%,rgba(5,5,5,0.72) 76%,rgba(5,5,5,0.95) 100%)}
.test-mark{position:absolute;top:5vh;left:4vw;z-index:1;font-family:'Cormorant Garamond',serif;font-size:clamp(9rem,24vw,20rem);line-height:0.7;color:transparent;-webkit-text-stroke:2px rgba(245,255,0,0.30);pointer-events:none;user-select:none}
.p-test-content{position:relative;z-index:3;max-width:1180px}
.p-test-eye{font-size:0.55rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--y);margin-bottom:2.4rem;display:flex;align-items:center;gap:0.7rem;font-weight:500}
.p-test-eye::before{content:'';width:22px;height:1px;background:var(--y)}
.p-test-q{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3.8vw,3.1rem);font-weight:300;font-style:italic;line-height:1.34;color:var(--w);margin-bottom:2.6rem;text-shadow:0 2px 30px rgba(0,0,0,0.7)}
.p-test-q .acc{color:var(--y);font-style:normal;font-weight:500;text-shadow:0 0 34px rgba(245,255,0,0.45)}
.p-test-attr{display:flex;align-items:center;gap:1rem}
.p-test-av{width:54px;height:54px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;color:var(--k);font-weight:700;font-size:1.3rem;flex-shrink:0;box-shadow:0 0 32px rgba(245,255,0,0.42)}
.p-test-meta-n{font-size:0.92rem;font-weight:500;color:var(--w)}
.p-test-meta-r{font-size:0.65rem;color:rgba(245,240,232,0.65);letter-spacing:0.18em;margin-top:0.18rem}

/* ─── PANEL 08 · CLOSING CTA ───────────────────────────────────── */
.p-cta{justify-content:center;text-align:center;overflow:hidden;background:#050505}
/* rising solar glow — a dawn the client moves toward, slowly breathing */
.cta-sun{position:absolute;left:50%;bottom:-42%;transform:translateX(-50%);width:135vh;height:135vh;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(245,255,0,0.30) 0%,rgba(245,255,0,0.14) 28%,rgba(245,255,0,0.05) 48%,transparent 66%);
  filter:blur(14px);animation:ctaBreathe 7.5s ease-in-out infinite}
@keyframes ctaBreathe{0%,100%{opacity:0.72;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
/* twin drifting accent glows top corners for depth (distinct from p07 aurora) */
.cta-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 40% at 16% 18%,rgba(245,255,0,0.10),transparent 70%),
    radial-gradient(30% 38% at 84% 22%,rgba(150,120,255,0.09),transparent 70%);
  animation:ctaGlowDrift 18s ease-in-out infinite alternate}
@keyframes ctaGlowDrift{0%{transform:translate(-2%,-2%)}100%{transform:translate(3%,2%)}}
.cta-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 92% 74% at 50% 42%,transparent 0%,rgba(5,5,5,0.50) 78%,rgba(5,5,5,0.88) 100%)}
.p-cta-in{position:relative;z-index:2;max-width:1040px;margin:0 auto}
.p-cta-eye{font-size:0.55rem;letter-spacing:0.55em;text-transform:uppercase;color:var(--y);margin-bottom:2.4rem;font-weight:500}
.p-cta h2{font-family:'Cormorant Garamond',serif;font-size:clamp(3.2rem,8.4vw,7.2rem);font-weight:700;line-height:0.95;margin-bottom:2rem;letter-spacing:-0.03em;text-shadow:0 6px 50px rgba(0,0,0,0.6)}
.p-cta h2 .acc{color:var(--y)}
.p-cta h2 .it{font-style:italic;font-weight:400;color:var(--y);text-shadow:0 0 50px rgba(245,255,0,0.4)}
.p-cta-b{font-size:1rem;line-height:1.75;color:rgba(245,240,232,0.66);font-weight:300;margin:0 auto 2.8rem;max-width:600px}
.p-cta-pair{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center}
/* beacon CTA — glowing, with a pulsing halo ring that visibly calls */
.cta-primary{position:relative;display:inline-flex;align-items:center;gap:0.6rem;padding:1.15rem 2.8rem;background:var(--y);color:var(--k);font-size:0.66rem;letter-spacing:0.32em;text-transform:uppercase;font-weight:600;border-radius:999px;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s;box-shadow:0 0 44px rgba(245,255,0,0.45);overflow:visible;z-index:1}
.cta-primary::before{content:'';position:absolute;inset:0;border-radius:999px;border:1.5px solid var(--y);z-index:-1;animation:ctaBeacon 2.6s cubic-bezier(0.16,1,0.3,1) infinite}
@keyframes ctaBeacon{0%{transform:scale(1);opacity:0.7}100%{transform:scale(1.7);opacity:0}}
.cta-primary:hover{transform:translateY(-3px);box-shadow:0 0 64px rgba(245,255,0,0.7)}
.cta-secondary{display:inline-flex;align-items:center;padding:1.15rem 2.6rem;border:1px solid rgba(245,240,232,0.45);color:var(--w);font-size:0.66rem;letter-spacing:0.32em;text-transform:uppercase;font-weight:500;border-radius:999px;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(4px)}
.cta-secondary:hover{background:var(--w);color:var(--k);border-color:var(--w)}
.p-cta-foot{position:absolute;bottom:6vh;left:8vw;right:8vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;font-size:0.55rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--mu2)}
.p-cta-foot a{color:var(--mu2);transition:color 0.3s;cursor:pointer}
.p-cta-foot a:hover{color:var(--y)}
.p-cta-foot .l{color:var(--y);font-weight:500}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FALLBACK · ≤900px
   Forces vertical stack, resets horizontal-canvas defaults, fixes nav
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:900px){.logo{letter-spacing:0.2em}.burger{flex-shrink:0}
  /* Reset body to allow vertical scrolling */
  html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-y:auto !important;overflow-x:hidden !important;height:auto !important}
  
  /* Force the horizontal-canvas track to behave as vertical column */
  .canvas-track{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:auto !important;
    transform:none !important;
    will-change:auto !important;
  }
  
  /* Force panels to stack vertically · reset flex-shrink so they collapse */
  .panel{
    width:100% !important;
    max-width:100vw !important;
    height:auto !important;
    min-height:auto !important;
    flex-shrink:1 !important;
    flex-grow:0 !important;
    flex-basis:auto !important;
    padding:5rem 1.5rem !important;
    align-items:flex-start !important;
    overflow:visible !important;
  }
  
  /* Hide desktop-only chrome */
  .nav-links,.scroll-hint,.panel-counter,.progress-bar{display:none !important}
  
  /* Compress nav and shrink wordmark · fixes "REVOLUTIONIZE" overflow */
  .chrome-top{
    padding:0.9rem 1.2rem !important;
    background:rgba(6,6,6,0.92) !important;
    backdrop-filter:blur(10px) !important;
    border-bottom:1px solid var(--bd) !important;
    align-items:center !important;
  }
  
  .nav-cta{
    padding:0.5rem 0.9rem !important;
    font-size:0.5rem !important;
    letter-spacing:0.18em !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    backdrop-filter:none !important;
  }
  
  /* Add padding-top to the first panel so it doesn't sit under the nav */
  .canvas-track > .panel:first-child{padding-top:7rem !important}
  
  /* Reset all the absolute-positioned panel internals to flow normally */
  .p-pillars-top,.p-cases-top,.p-caps-top,.p-multi-eye{
    position:static !important;
    margin-bottom:2rem !important;
    transform:none !important;
  }
  
  /* Pillar grid · single column */
  .p-pillars-grid{grid-template-columns:1fr !important;gap:1.5rem !important;width:100% !important}
  .pillar{height:auto !important;min-height:auto !important}
  
  /* Case study grid · single column */
  .cases-row{grid-template-columns:1fr !important;gap:1.5rem !important;width:100% !important}
  .case{min-height:auto !important}
  
  /* Multi-market panel · single column */
  .p-multi-grid{grid-template-columns:1fr !important;gap:2rem !important;width:100% !important}
  .p-multi-stats{grid-template-columns:1fr !important;gap:2rem !important}
  
  /* Capabilities · single column */
  .caps-grid{grid-template-columns:1fr !important;grid-template-rows:auto !important;gap:1rem !important;width:100% !important}
  .cap{padding:1.5rem !important}
  
  /* CTA panel footer · stack column */
  .p-cta-foot{
    position:static !important;
    margin-top:3rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0.8rem !important;
    width:100% !important;
  }
  
  /* Headline sizing · prevent giant H1 from breaking layout */
  .p-open h1,.p-quote-text,.p-pillars-h,.p-cases-h,.p-multi-h,.p-caps-h,.p-cta-h{
    font-size:clamp(2rem,8vw,3.5rem) !important;
    line-height:1.05 !important;
  }
  
  /* Background videos · constrain to panel */
  .bg-video{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important}
  
  /* Photo placeholders · prevent overflow */
  .photo-card,.case-photo{width:100% !important;aspect-ratio:4/3 !important;height:auto !important}
}

/* Extra-narrow phones · ≤480px */
@media (max-width:480px){
  .panel{padding:4rem 1rem !important}
  .canvas-track > .panel:first-child{padding-top:6rem !important}
  
  .nav-cta{padding:0.45rem 0.7rem !important;font-size:0.45rem !important;letter-spacing:0.15em !important}
  .p-open h1,.p-quote-text,.p-pillars-h,.p-cases-h,.p-multi-h,.p-caps-h,.p-cta-h{
    font-size:clamp(1.7rem,7vw,2.6rem) !important;
  }
}

/* ─── DROPDOWN NAV · canonical ───────────────────────────── */
.nav-item{position:relative}
.nav-item > a{display:block;padding:0.4rem 0}
.nav-item.has-dd:hover > a{color:var(--y)}
.dd{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--k);border:1px solid var(--bd);width:780px;padding:1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s;margin-top:0.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.5);z-index:200}
.nav-item:hover .dd,.nav-item:focus-within .dd{opacity:1;visibility:visible}
.dd > div{min-width:0}
.dd h4,.dd .dd-h{font-family:'Cormorant Garamond',serif;font-size:0.85rem;font-weight:600;color:var(--y);margin-bottom:0.7rem;padding-bottom:0.4rem;border-bottom:1px solid var(--bd);letter-spacing:0.02em;text-transform:none}
.dd ul{list-style:none;padding:0;margin:0}
.dd a{color:var(--mu);text-decoration:none;display:block;transition:color 0.25s,padding 0.25s;font-size:0.65rem;letter-spacing:0.05em;text-transform:none}
.dd li{font-size:0.65rem;padding:0.25rem 0;letter-spacing:0.05em;font-family:'DM Sans',sans-serif;line-height:1.4;text-transform:none}
.dd li a:hover{color:var(--y);padding-left:0.4rem}
.dd li.active a{color:var(--y)}
.dd li.dd-all{margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--bd)}
.dd li.dd-all a{color:var(--y);font-weight:500}
.dd li.dd-all a:hover{padding-left:0.4rem}
@media (max-width:900px){.dd{display:none !important}.nav-item.has-dd:hover > a{color:inherit}}

/* ─── MOBILE SAFETY · new panels 06 (wall) + 07 (aurora) ──────── */
@media (max-width:900px){
  .p-caps{min-height:80vh !important;align-items:center !important;justify-content:center !important;padding:5rem 1.2rem !important}
  .caps-wall{gap:0.1rem !important}
  .caps-row span{font-size:clamp(1.4rem,9vw,2.6rem) !important;gap:1rem !important;padding-right:1rem !important}
  .caps-overlay{padding:0 0.5rem !important;max-width:100% !important}
  .caps-cta{margin-top:1.6rem !important}
  .p-test{min-height:82vh !important;align-items:center !important;justify-content:center !important}
  .test-mark{font-size:7rem !important;top:3vh !important;left:5vw !important}
  .p-cta{min-height:88vh !important;align-items:center !important;justify-content:center !important;text-align:center !important}
  .cta-sun{width:120vh !important;height:120vh !important}
  .p-cta-pair{justify-content:center !important}
  /* Manifesto · contain + scale down on mobile (JS off → show static) */
  .p-quote{min-height:80vh !important;align-items:center !important;padding:5rem 1.5rem !important}
  .q-big{white-space:normal !important;font-size:clamp(2.2rem,11vw,3.4rem) !important;line-height:1.02 !important}
  .p-quote .ltr{opacity:0}.p-quote.is-live .ltr{animation:ltrUpM 0.55s cubic-bezier(0.16,1,0.3,1) both;animation-delay:calc(var(--i)*0.012s)}
  .q-soft{opacity:1 !important;transform:none !important}
}

/* ═══════════════ MOBILE HAMBURGER MENU ═══════════════ */
.burger{display:none;position:relative;width:30px;height:20px;background:none;border:none;cursor:pointer;z-index:1002;padding:0;pointer-events:auto}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--y);border-radius:2px;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .25s}
.burger span:nth-child(1){top:calc(50% - 9px);transform:translateY(-50%)}
.burger span:nth-child(2){top:50%;transform:translateY(-50%)}
.burger span:nth-child(3){bottom:auto;top:calc(50% + 9px);transform:translateY(-50%)}
body.menu-open .burger span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:1001;background:#060606;display:flex;flex-direction:column;padding:5.5rem 1.8rem 2rem;opacity:0;visibility:hidden;transform:translateX(6%);transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1),visibility .4s;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none}
.mm-aura{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(58% 46% at 82% 14%,rgba(245,255,0,.13),transparent 70%),radial-gradient(50% 40% at 6% 92%,rgba(245,255,0,.08),transparent 72%)}
.mm-inner{position:relative;z-index:1;display:flex;flex-direction:column;flex:1}
.mm-item{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1)}
body.menu-open .mm-item{opacity:1;transform:none}
body.menu-open .mm-item:nth-child(1){transition-delay:.10s}
body.menu-open .mm-item:nth-child(2){transition-delay:.16s}
body.menu-open .mm-item:nth-child(3){transition-delay:.22s}
body.menu-open .mm-item:nth-child(4){transition-delay:.28s}
body.menu-open .mm-item:nth-child(5){transition-delay:.34s}
.mm-link{font-family:'Cormorant Garamond',serif;font-size:2.3rem;font-weight:600;color:var(--w);padding:.55rem 0;letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between;width:100%;border:none;border-bottom:1px solid rgba(245,240,232,.08);background:none;text-align:left;cursor:pointer;line-height:1.05}
.mm-link:active,.mm-link:hover{color:var(--y)}
.mm-chevron{font-family:'DM Sans',sans-serif;font-size:1.6rem;font-weight:300;color:var(--y);transition:transform .4s cubic-bezier(.16,1,.3,1);line-height:1}
.mm-acc.open .mm-chevron{transform:rotate(45deg)}
.mm-sub{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.mm-acc.open .mm-sub{max-height:520px}
.mm-sub a{font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:300;color:var(--mu);padding:.62rem 0;letter-spacing:.01em;border-bottom:1px solid rgba(245,240,232,.05)}
.mm-sub a:active,.mm-sub a:hover{color:var(--y)}
.mm-sub a.mm-all{grid-column:1 / -1;color:var(--y);letter-spacing:.04em}
.mm-foot{position:relative;z-index:1;padding-top:1.6rem;display:flex;flex-direction:column;gap:1.1rem}
.mm-cta{background:var(--y);color:var(--k);text-align:center;padding:1.1rem;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;border-radius:999px}
.mm-meta{display:flex;justify-content:space-between;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mu2)}
.mm-meta a{color:var(--mu2)}
@media (max-width:900px){
  .burger{display:block}
  .nav-cta{display:none !important}
}
@media (min-width:901px){ .mobile-menu{display:none !important} }

/* ============================================================
   LIVE FIXES (homepage panels) — May 2026
   ============================================================ */
@media (min-width:901px){
  /* Panel 3 — fit all 10 pillars in one viewport, clear of the nav */
  .p-pillars{flex-direction:column;align-items:stretch;justify-content:center;padding:11vh 5vw 5vh;gap:1.5rem}
  .p-pillars-top{position:static;left:auto;right:auto;top:auto}
  .p-pillars-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:0.7rem;max-width:100%}
  .p-pillars .pillar{height:auto;min-height:250px}
  .p-pillars .pillar-photo{height:64px}
}
/* Panel 8 — stop the beacon ring from overlapping the second button */
.p-cta-pair{gap:2.6rem}
@keyframes ctaBeacon{0%{transform:scale(1);opacity:0.55}100%{transform:scale(1.35);opacity:0}}


/* ---- footer 3-col alignment (EN/FR centered) ---- */
.p-cta-foot>div:nth-child(1){justify-self:start}
.p-cta-foot>div:nth-child(2){justify-self:center}
.p-cta-foot>div:nth-child(3){justify-self:end}
@media (max-width:900px){.p-cta-foot{position:static;display:flex;flex-direction:column;gap:0.7rem;text-align:center;left:auto;right:auto;bottom:auto;margin-top:2rem}}
/* ---- clickable scroll hint ---- */
.scroll-hint{cursor:pointer}
/* ---- custom directional nav cursor ---- */
#navCursor{position:fixed;top:0;left:0;z-index:99999;width:60px;height:60px;margin:-30px 0 0 -30px;border:1.5px solid rgba(245,255,0,0.55);border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;background:rgba(245,255,0,0.04);transition:opacity .3s,width .22s,height .22s,margin .22s,background .22s,border-color .22s}
#navCursor.on{opacity:1}
#navCursor .nc-arrow{width:24px;height:24px;stroke:var(--y);stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s,opacity .18s}
#navCursor.nav-left .nc-arrow{transform:rotate(180deg)}
#navCursor.nav-dot{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--y);border-color:transparent}
#navCursor.nav-dot .nc-arrow{opacity:0}
html.hero-nav,html.hero-nav *{cursor:none !important}
@media (hover:none),(pointer:coarse){#navCursor{display:none !important}}


/* ---- MOBILE hero (panel 1): fill the screen, clear the nav, center ---- */
@media (max-width:900px){
  .p-open{min-height:100vh !important;min-height:100svh !important;height:auto !important;
          padding:84px 1.5rem 3rem !important;align-items:center !important;justify-content:center !important}
  .p-open .bg-video,.p-open .bg-video-overlay{position:absolute !important;inset:0 !important;height:100% !important}
  .p-open h1{font-size:clamp(2.4rem,12vw,3.6rem) !important;margin-bottom:1.4rem !important}
}

@keyframes ltrUpM{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}

/* ---- MOBILE section-jump arrows ---- */
#mNav{display:none}
@media (max-width:900px){
  #mNav{display:flex;flex-direction:column;gap:9px;position:fixed;right:14px;bottom:20px;z-index:9000}
  #mNav button{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(245,255,0,0.55);
    background:rgba(6,6,6,0.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
    box-shadow:0 4px 18px rgba(0,0,0,0.4);transition:opacity .25s,transform .12s,background .2s}
  #mNav button:active{transform:scale(0.9);background:rgba(245,255,0,0.18)}
  #mNav svg{width:20px;height:20px;stroke:var(--y);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #mNav button[disabled]{opacity:0.22;pointer-events:none}
}


/* ---- homepage image slots: load real files, keep placeholder until present ---- */
.pillar-photo[data-img],.case-img[data-img],.multi-photo[data-img]{background-size:cover;background-position:center}
.pillar-photo.has-img .pillar-photo-fallback{display:none}
.case-img.has-img .media-slot-prompt,.case-img.has-img .media-slot-meta,.multi-photo.has-img .media-slot-prompt,.multi-photo.has-img .media-slot-meta{display:none}


/* ── V2 accessibility layer ───────────────────────────── */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--y,#F5FF00);color:#060606;padding:.75rem 1.25rem;font:600 .9rem/1 'DM Sans',system-ui,sans-serif;text-decoration:none;border-radius:0 0 4px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--y,#F5FF00);outline-offset:3px}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--y,#F5FF00);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .marq-track,.marq2-track,.ticker-track{animation:none !important;transform:none !important}
  video{display:none}
}

/* ── V4 · image slots ───────────────────────────────────────────
   The production prompt and the filename caption are SIBLINGS of the
   element that carries the background image, not descendants — which is
   why the V3 descendant-only rule hid nothing. Both relationships are
   covered here, and the loader also marks the parent. */
.has-img .photo-prompt,.has-img .media-slot-prompt,.has-img .photo-meta,.has-img .media-slot-meta,
.has-img .hero-ph,.has-img .ai-ph,.has-img .imgph-brief,.has-img .imgph,
.has-img ~ .photo-prompt,.has-img ~ .media-slot-prompt,.has-img ~ .photo-meta,.has-img ~ .media-slot-meta,
.has-img ~ .hero-ph,.has-img ~ .ai-ph,.has-img ~ .imgph-brief,.has-img ~ .imgph,
.hasimg .photo-prompt,.hasimg .photo-meta,.hasimg ~ .photo-prompt,.hasimg ~ .photo-meta{display:none !important}
.has-img{background-size:cover;background-position:center}

/* Target size (V4) — the burger was 30x20 CSS px; WCAG 2.2 target minimum is
   24x24. Padding enlarges the hit area without changing the drawn icon. */
@media (max-width:900px){#burgerBtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* background-attachment:fixed is expensive and behaves badly on iOS —
   disabled below the desktop breakpoint. */
@media (max-width: 900px){
  [style*="background-attachment"],.s-hero-photo,.hero-bg,.parallax{background-attachment:scroll !important}
}

/* Hero video (V5) — a dark field behind the clip, so the panel is never blank
   while the remote file is still arriving or if it is blocked. */
.p-open{background-color:#060606}
@media (prefers-reduced-motion: reduce){ .bg-video{display:none} }

/* ── V5 · mobile menu: closing it ──────────────────────────────
   The burger lives inside .chrome-top, which is position:fixed with
   z-index:50 — that creates a stacking context, so the burger's own
   z-index:1002 was trapped inside it and the menu (z-index:1001)
   painted over it. The CSS that turns the burger into an X on open
   was therefore drawn underneath the panel and unreachable: once the
   menu was open the only way out was to follow a link.
   Lifting the bar above the menu while the menu is open fixes it. */
body.menu-open .chrome-top{z-index:1002} /* v5 */
body.menu-open .burger{pointer-events:auto}
/* The logo must not sit on top of the panel content while open. */
body.menu-open .chrome-top > *:not(.burger){opacity:0;pointer-events:none;transition:opacity .2s}

.mm-close{position:absolute;top:1.1rem;right:1.4rem;z-index:3;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  color:var(--y,#F5FF00);font-size:2rem;line-height:1;cursor:pointer;padding:0}
.mm-close:focus-visible{outline:2px solid var(--y,#F5FF00);outline-offset:3px}
@media(min-width:901px){.mm-close{display:none}}

/* ── V6 · mobile menu stacking (site-wide) ─────────────────────
   .chrome-top is position:fixed with z-index:50 and creates a stacking
   context, so the burger's z-index:1002 was trapped under the menu
   overlay (1001). In V5 the lift rule was appended only to the home
   stylesheet; every other page still hid the burger-X. Site-wide now. */
body.menu-open .chrome-top{z-index:1002}
body.menu-open .burger{pointer-events:auto}
body.menu-open .chrome-top > *:not(.burger){opacity:0;pointer-events:none;transition:opacity .2s}

/* ── V6 · no-JavaScript fallbacks ──────────────────────────────
   Without JS: FAQ answers must be readable, all three contact panels
   must be in normal flow, and the mobile menu must exist as a plain
   list instead of an unopenable overlay. */
html:not(.js) .faq-i .faq-a{visibility:visible;max-height:none !important;opacity:1;display:block}
html:not(.js) .faq-i .faq-toggle{display:none}
html:not(.js) [role="tabpanel"]{display:block !important;position:static;opacity:1;visibility:visible}
html:not(.js) .tabs{display:none}
@media (max-width:900px){
  html:not(.js) .burger{display:none}
  html:not(.js) .mobile-menu{position:static;opacity:1;visibility:visible;transform:none;height:auto;padding:1rem 1.8rem;display:block}
  html:not(.js) .mobile-menu .mm-sub{max-height:none;overflow:visible}
  html:not(.js) .mobile-menu .mm-sub a{visibility:visible}
  html:not(.js) .mm-close{display:none}
}

/* V6 — the 780px mega menu could overflow the viewport just above the
   900px breakpoint and get clipped by body overflow-x:hidden. */
.nav-item .dd{max-width:calc(100vw - 2rem)}

/* ── V6.1 · no-JS menu: the children too ───────────────────────
   V6 made the .mobile-menu container static without JS, but .mm-item
   still started at opacity:0 waiting for body.menu-open — which cannot
   exist without JavaScript. 2,280 primary links were invisible yet
   focusable. The reset below is what was missing. */
html:not(.js) .mm-item{opacity:1 !important;transform:none !important}

html:not(.js) #mNav,html:not(.js) .m-nav{display:none !important}

/* ── V7 · no-JS Services: honest semantics ─────────────────────
   In V6.1 the toggle stayed a focusable <button aria-expanded="false">
   while the submenu was visibly open — a dead control announcing a
   false state. Without JS the button is now hidden entirely and a
   plain text label takes its place; with JS the label is hidden. */
.mm-static{display:none}
html:not(.js) .mm-toggle{display:none !important}
html:not(.js) .mm-static{display:block}
.dd .dd-h{margin:0}

/* ── V7.2 · global motion control (WCAG 2.2.2) ─────────────────
   Auto-moving, auto-updating content that runs longer than five seconds
   needs a user-facing pause, independent of OS-level reduced-motion. */
.motion-toggle{position:fixed;bottom:1rem;left:1rem;z-index:900;background:#060606;color:var(--y,#F5FF00);
  border:1px solid var(--y,#F5FF00);padding:0.45rem 0.9rem;font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;cursor:pointer}
.motion-toggle:focus-visible{outline:2px solid var(--y,#F5FF00);outline-offset:3px}
html.motion-paused .marq-track,html.motion-paused .caps-row{animation-play-state:paused !important}
html.motion-paused *{scroll-behavior:auto !important}
@media print{.motion-toggle{display:none}}

/* ── V8 · language switcher in the chrome ──────────────────────
   EN·FR must be instantly visible to every visitor, not buried in
   the footer. Footer links stay; these are the loud ones. */
.lang-switch{display:flex;align-items:center;gap:0.4rem;margin-left:0.9rem;flex-shrink:0}
.lang-switch .ls-cur{color:#060606;background:var(--y,#F5FF00);padding:0.3rem 0.6rem;
  font-size:0.68rem;font-weight:700;letter-spacing:0.16em}
.lang-switch .ls-fr{color:var(--y,#F5FF00);border:1px solid var(--y,#F5FF00);
  padding:calc(0.3rem - 1px) 0.6rem;font-size:0.68rem;font-weight:700;
  letter-spacing:0.16em;text-decoration:none;transition:background .15s,color .15s}
.lang-switch .ls-fr:hover,.lang-switch .ls-fr:focus-visible{background:var(--y,#F5FF00);color:#060606}
.lang-switch .ls-fr:focus-visible{outline:2px solid var(--y,#F5FF00);outline-offset:2px}
@media (max-width:900px){
  .lang-switch{margin-left:auto;margin-right:0.8rem}
  .lang-switch .ls-cur,.lang-switch .ls-fr{font-size:0.62rem;padding:0.26rem 0.5rem}
  .lang-switch .ls-fr{padding:calc(0.26rem - 1px) 0.5rem}
}

/* ── V30 · tetto di composizione ───────────────────────────────
   Below 1800px nothing changes at all: laptops and ordinary monitors
   keep their existing gutters. Past that width the side padding grows
   so the CONTENT settles into a 1700px column, while backgrounds —
   hero, bands, navigation bar, footer — still run edge to edge.
   The threshold is chosen so the gutter at the switch (50px) matches
   the natural one (48px): no visible jump. */
@media (min-width:1800px){
  nav,
  .breadcrumb,
  main > section,
  main > header,
  main > div,
  footer,
  .hero,
  .band,
  .cta-block{
    padding-left:calc((100vw - 1700px) / 2)  !important;
    padding-right:calc((100vw - 1700px) / 2) !important;
  }
  .s-cover .cover-photo{margin-right:calc((100vw - 1700px) / -2)}
}

/* ── V32 · la cover rientra nel tetto ──────────────────────────
   V30 told the cover photograph to bleed by half the gutter so it
   would touch the page edge. On a wide screen that gutter is huge,
   so the picture shot past the shell and dwarfed the page. Inside
   the shell it now stays put: no bleed, even columns. */
@media (min-width:1800px){
  .s-cover .cover-photo{margin-right:0 !important}
  .s-cover{grid-template-columns:6fr 5fr !important}
}

/* ── V33 · tablet in landscape ─────────────────────────────────
   The horizontal storytelling arms only for fine pointers; touch
   devices of any width now receive the stacked mobile layout the
   phones already use. Same rules, wider gate. */
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){.logo{letter-spacing:0.2em}.burger{flex-shrink:0}
  /* Reset body to allow vertical scrolling */
  html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-y:auto !important;overflow-x:hidden !important;height:auto !important}
  
  /* Force the horizontal-canvas track to behave as vertical column */
  .canvas-track{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:auto !important;
    transform:none !important;
    will-change:auto !important;
  }
  
  /* Force panels to stack vertically · reset flex-shrink so they collapse */
  .panel{
    width:100% !important;
    max-width:100vw !important;
    height:auto !important;
    min-height:auto !important;
    flex-shrink:1 !important;
    flex-grow:0 !important;
    flex-basis:auto !important;
    padding:5rem 1.5rem !important;
    align-items:flex-start !important;
    overflow:visible !important;
  }
  
  /* Hide desktop-only chrome */
  .nav-links,.scroll-hint,.panel-counter,.progress-bar{display:none !important}
  
  /* Compress nav and shrink wordmark · fixes "REVOLUTIONIZE" overflow */
  .chrome-top{
    padding:0.9rem 1.2rem !important;
    background:rgba(6,6,6,0.92) !important;
    backdrop-filter:blur(10px) !important;
    border-bottom:1px solid var(--bd) !important;
    align-items:center !important;
  }
  
  .nav-cta{
    padding:0.5rem 0.9rem !important;
    font-size:0.5rem !important;
    letter-spacing:0.18em !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    backdrop-filter:none !important;
  }
  
  /* Add padding-top to the first panel so it doesn't sit under the nav */
  .canvas-track > .panel:first-child{padding-top:7rem !important}
  
  /* Reset all the absolute-positioned panel internals to flow normally */
  .p-pillars-top,.p-cases-top,.p-caps-top,.p-multi-eye{
    position:static !important;
    margin-bottom:2rem !important;
    transform:none !important;
  }
  
  /* Pillar grid · single column */
  .p-pillars-grid{grid-template-columns:1fr !important;gap:1.5rem !important;width:100% !important}
  .pillar{height:auto !important;min-height:auto !important}
  
  /* Case study grid · single column */
  .cases-row{grid-template-columns:1fr !important;gap:1.5rem !important;width:100% !important}
  .case{min-height:auto !important}
  
  /* Multi-market panel · single column */
  .p-multi-grid{grid-template-columns:1fr !important;gap:2rem !important;width:100% !important}
  .p-multi-stats{grid-template-columns:1fr !important;gap:2rem !important}
  
  /* Capabilities · single column */
  .caps-grid{grid-template-columns:1fr !important;grid-template-rows:auto !important;gap:1rem !important;width:100% !important}
  .cap{padding:1.5rem !important}
  
  /* CTA panel footer · stack column */
  .p-cta-foot{
    position:static !important;
    margin-top:3rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0.8rem !important;
    width:100% !important;
  }
  
  /* Headline sizing · prevent giant H1 from breaking layout */
  .p-open h1,.p-quote-text,.p-pillars-h,.p-cases-h,.p-multi-h,.p-caps-h,.p-cta-h{
    font-size:clamp(2rem,8vw,3.5rem) !important;
    line-height:1.05 !important;
  }
  
  /* Background videos · constrain to panel */
  .bg-video{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important}
  
  /* Photo placeholders · prevent overflow */
  .photo-card,.case-photo{width:100% !important;aspect-ratio:4/3 !important;height:auto !important}
}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){.dd{display:none !important}.nav-item.has-dd:hover > a{color:inherit}}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  .p-caps{min-height:80vh !important;align-items:center !important;justify-content:center !important;padding:5rem 1.2rem !important}
  .caps-wall{gap:0.1rem !important}
  .caps-row span{font-size:clamp(1.4rem,9vw,2.6rem) !important;gap:1rem !important;padding-right:1rem !important}
  .caps-overlay{padding:0 0.5rem !important;max-width:100% !important}
  .caps-cta{margin-top:1.6rem !important}
  .p-test{min-height:82vh !important;align-items:center !important;justify-content:center !important}
  .test-mark{font-size:7rem !important;top:3vh !important;left:5vw !important}
  .p-cta{min-height:88vh !important;align-items:center !important;justify-content:center !important;text-align:center !important}
  .cta-sun{width:120vh !important;height:120vh !important}
  .p-cta-pair{justify-content:center !important}
  /* Manifesto · contain + scale down on mobile (JS off → show static) */
  .p-quote{min-height:80vh !important;align-items:center !important;padding:5rem 1.5rem !important}
  .q-big{white-space:normal !important;font-size:clamp(2.2rem,11vw,3.4rem) !important;line-height:1.02 !important}
  .p-quote .ltr{opacity:0}.p-quote.is-live .ltr{animation:ltrUpM 0.55s cubic-bezier(0.16,1,0.3,1) both;animation-delay:calc(var(--i)*0.012s)}
  .q-soft{opacity:1 !important;transform:none !important}
}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  .burger{display:block}
  .nav-cta{display:none !important}
}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){.p-cta-foot{position:static;display:flex;flex-direction:column;gap:0.7rem;text-align:center;left:auto;right:auto;bottom:auto;margin-top:2rem}}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  .p-open{min-height:100vh !important;min-height:100svh !important;height:auto !important;
          padding:84px 1.5rem 3rem !important;align-items:center !important;justify-content:center !important}
  .p-open .bg-video,.p-open .bg-video-overlay{position:absolute !important;inset:0 !important;height:100% !important}
  .p-open h1{font-size:clamp(2.4rem,12vw,3.6rem) !important;margin-bottom:1.4rem !important}
}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  #mNav{display:flex;flex-direction:column;gap:9px;position:fixed;right:14px;bottom:20px;z-index:9000}
  #mNav button{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(245,255,0,0.55);
    background:rgba(6,6,6,0.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
    box-shadow:0 4px 18px rgba(0,0,0,0.4);transition:opacity .25s,transform .12s,background .2s}
  #mNav button:active{transform:scale(0.9);background:rgba(245,255,0,0.18)}
  #mNav svg{width:20px;height:20px;stroke:var(--y);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #mNav button[disabled]{opacity:0.22;pointer-events:none}
}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){#burgerBtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  html:not(.js) .burger{display:none}
  html:not(.js) .mobile-menu{position:static;opacity:1;visibility:visible;transform:none;height:auto;padding:1rem 1.8rem;display:block}
  html:not(.js) .mobile-menu .mm-sub{max-height:none;overflow:visible}
  html:not(.js) .mobile-menu .mm-sub a{visibility:visible}
  html:not(.js) .mm-close{display:none}
}
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  .lang-switch{margin-left:auto;margin-right:0.8rem}
  .lang-switch .ls-cur,.lang-switch .ls-fr{font-size:0.62rem;padding:0.26rem 0.5rem}
  .lang-switch .ls-fr{padding:calc(0.26rem - 1px) 0.5rem}
}

/* ── V34 · briglie tablet ──────────────────────────────────────
   Two leftovers on coarse pointers above phone width: an element
   wider than the screen dragged the page sideways, and strip images
   kept phone heights at tablet widths, smearing. Sideways scroll is
   forbidden and images inside panels keep their own proportions. */
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  html,body{overflow-x:hidden !important;max-width:100vw}
  .panel{max-width:100vw !important}
  .panel img{width:100% !important;height:auto !important}
}

/* ── V35 · tablet, consegna consolidata ────────────────────────
   1 · The pillar photo ribbon was 80px tall by design: fine on a
       350px phone card, a razor-slice smear on a 1500px single
       column. On coarse pointers it becomes a real 16:6 band.
   2 · The caps marquee, frozen by the mobile rules, remained a
       train of copies several screens wide: its own carriage now
       clips, belt to the V34 braces. */
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  .pillar-photo{height:auto !important;aspect-ratio:16/6}
  .caps-row,.ticker,.p-caps{overflow:hidden !important;max-width:100vw}
}

/* ── V38 · menu touch 901-1799 (rilievo V37-009) ───────────────
   The desktop rule .mobile-menu{display:none!important} at 901px+
   outranked the duplicated mobile rules: burger visible, menu
   unopenable. On coarse pointers the flex display wins again; the
   existing opacity/visibility machinery handles open and close. */
@media (pointer:coarse) and (max-width:1799px) and (min-width:901px){
  .mobile-menu{display:flex !important}
}
/* ── V38 · pausa movimento davvero globale (V37-013) ───────────
   The pause control now stops every CSS animation and transition,
   not only the marquees. Canvas engines remain a staging item. */
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{
  animation-play-state:paused !important;
}

/* V38 · hero chips off in production (V37-016) */
.hero-ph{display:none !important}

/* ── V44 · consent banner (PECR/ICO) ────────────────────────────
   Refusal is one click, same weight as acceptance. Sits above the
   motion toggle, never traps focus, disappears on choice. */
#rvz-cc{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:rgba(6,6,6,.97);border-top:1px solid var(--bd,#2a2a24);transform:translateY(102%);transition:transform .26s ease;padding:1.15rem 1.3rem;backdrop-filter:blur(6px)}
#rvz-cc.on{transform:none}
#rvz-cc .cc-in{max-width:1100px;margin:0 auto;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
#rvz-cc .cc-t{font-family:'Cormorant Garamond',serif;font-size:1.12rem;color:var(--w,#f2efe8);margin:0 0 .2rem;flex:1 1 100%}
#rvz-cc .cc-b{font-size:.8rem;line-height:1.6;color:var(--mu,#a8a49a);margin:0;flex:1 1 380px}
#rvz-cc .cc-b a{color:var(--y,#e8ff00)}
#rvz-cc .cc-r{display:flex;gap:.7rem;flex:0 0 auto}
#rvz-cc button{font-family:inherit;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:.78rem 1.25rem;cursor:pointer;border:1px solid var(--bd,#2a2a24);background:transparent;color:var(--w,#f2efe8);min-height:44px}
#rvz-cc .cc-yes{background:var(--y,#e8ff00);color:#060606;border-color:var(--y,#e8ff00);font-weight:600}
#rvz-cc button:focus-visible{outline:2px solid var(--y,#e8ff00);outline-offset:2px}
@media (max-width:640px){#rvz-cc .cc-r{flex:1 1 100%}#rvz-cc button{flex:1}}
/* ── V44 · leggibilità: nessun testo funzionale sotto 11px ─────── */
.crumb,.hero-eye,.case-eye,.cs-eye,.split-eye,.stat-l,.cs-stat-l,.off-tz,.off-tag,.struct-tag,.mi,.stag,.s-case-eye,.case-marker-meta{font-size:0.7rem !important;letter-spacing:.24em}