/* hover motion, glow and accent come from the card contract in pxl-core.css */
/* ============ HERO ============ */
/* compact hero (was 100vh) so the cropped video band + content sit higher, closer to the menu */
.hero{position:relative;min-height:86vh;min-height:86dvh;margin-top:62px;display:flex;align-items:center;overflow:hidden;background:#0B0B0B}
/* video fills the hero, iframe is CENTER-anchored and zoomed (scale) so ~10% of the video is
   cropped off the TOP and ~10% off the BOTTOM; the mask then feathers those cropped edges to
   transparent into the #0B0B0B background — a true blend, not a dark overlay. */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,
    #000 0%,#000 66%,rgba(0,0,0,.82) 76%,rgba(0,0,0,.45) 84%,rgba(0,0,0,.12) 92%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,
    #000 0%,#000 66%,rgba(0,0,0,.82) 76%,rgba(0,0,0,.45) 84%,rgba(0,0,0,.12) 92%,rgba(0,0,0,0) 100%);}
.hero-video iframe{
  position:absolute;top:50%;left:50%;
  width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;
  transform:translate(-50%,-50%) scale(1.18);border:0;pointer-events:none;
}
/* legibility ONLY (the mask handles the top/bottom blend). Left-weighted darkening behind
   the copy; very light at the top/bottom edges so it does not re-create a dark band. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 105% at 20% 52%, rgba(11,11,11,.62) 0%, rgba(11,11,11,.34) 46%, rgba(11,11,11,0) 74%),
    linear-gradient(180deg, rgba(11,11,11,.22) 0%, rgba(11,11,11,.10) 22%, rgba(11,11,11,.10) 72%, rgba(11,11,11,.4) 100%);
}
.hero-grain{position:absolute;inset:0;z-index:2;opacity:.5;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}
.hero-inner{position:relative;z-index:3;width:100%;padding-top:90px;padding-bottom:60px}
.hero h1{
  font-size:clamp(3rem,8.2vw,6.6rem);font-weight:800;letter-spacing:-.04em;
  margin:26px 0 0;max-width:16ch;
  /* Drop shadow — 135deg angle, 20px distance, 50px blur */
  text-shadow:14px 14px 25px rgba(0,0,0,.6);
}
.hero p.sub{margin:30px 0 0;font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--ink-dim);max-width:60ch;line-height:1.6}
.hero p.sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px}
.hero-scrollhint{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-scrollhint .line{width:1px;height:36px;background:linear-gradient(var(--gold),transparent);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ REFRAME (living diptych, calm integrated background) ============ */
.reframe{position:relative;overflow:hidden;text-align:center;padding:150px 0;
  background:
    radial-gradient(66% 46% at 50% 44%,rgba(215,0,90,.11),transparent 70%),
    linear-gradient(180deg,#0B0B0B 0%,#131117 22%,#131117 55%,#0B0B0B 90%,#0B0B0B 100%)}
/* explicit bottom fade so the section blends cleanly into the next one (matches the top blend) */
.reframe::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,#0B0B0B 0%,rgba(11,11,11,.6) 40%,transparent 100%)}
.reframe-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.reframe-aurora span{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen}
.reframe-aurora .a1{width:64vw;height:64vw;left:18vw;top:2vw;background:radial-gradient(circle,rgba(215,0,90,.13),transparent 68%);animation:aur1 34s ease-in-out infinite}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,3vw) scale(1.08)}}
.reframe::before{content:"";position:absolute;inset:0;z-index:0;opacity:.16;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.reframe .inner{position:relative;z-index:2}
.reframe h2{font-size:clamp(2rem,5vw,3.7rem);letter-spacing:-.035em;max-width:18ch;margin:24px auto 0}
.contrast-frame{position:relative;max-width:940px;margin:56px auto 0;padding:16px}
.contrast-frame .brackets span{width:22px;height:22px;opacity:.6}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:2px;position:relative;border-radius:20px}
.contrast::after{content:"";position:absolute;top:14%;bottom:14%;left:50%;width:1px;transform:translateX(-.5px);z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(215,0,90,.65),rgba(255,165,0,.5),transparent);box-shadow:0 0 14px rgba(215,0,90,.45)}
.panel{padding:40px 38px;text-align:left;position:relative;
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);/* No transition here. This family is in the ONE card contract in pxl-core.css
     and the contract already declares transform, border-color, box-shadow and
     background at .35s on the house ease. A local transition in a PAGE sheet
     loads after pxl-core and silently wins, which is what made these hover
     differently from every other card: .program-row listed only border-color
     and background, so its lift and glow had NO transition at all and snapped.
     Cris, 2026-08-28: "the animation of the mentorship lessons card is still
     not working." Removed 2026-08-28. Do not reintroduce one here. */
}
.panel-left{background:rgba(255,255,255,.02);filter:saturate(.8);border:1px solid var(--hair);border-radius:20px 0 0 20px}
.panel-right{background:linear-gradient(180deg,rgba(215,0,90,.07),rgba(255,165,0,.035));border:1px solid rgba(215,0,90,.24);border-radius:0 20px 20px 0;box-shadow:inset 0 0 24px -10px rgba(215,0,90,.35)}
.panel-right:hover{transform:translateY(-4px);border-color:rgba(255,165,0,.5);box-shadow:inset 0 0 26px -8px rgba(255,165,0,.35),0 24px 56px -24px rgba(215,0,90,.55)}
.panel .tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.panel .tag.bad{color:var(--ink-dim)}
.panel .tag.good{color:var(--gold)}
.panel h3{font-size:1.35rem;margin:16px 0 10px;letter-spacing:-.02em}
.panel p{color:var(--ink-dim);font-size:15.5px}

/* ============ ON AI ============ */
#ai .ai-pull{max-width:900px;margin:0 auto 8px;text-align:center;font-family:'Sora',sans-serif;
  font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.34;letter-spacing:-.01em;color:var(--ink);font-weight:600}
#ai .ai-pull b{color:var(--magenta);font-weight:700}
#ai .ai-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
#ai .ai-pillar{background:rgba(255,255,255,.025);border:1px solid var(--hair);border-radius:16px;padding:26px 24px;
 background:rgba(255,255,255,.025);border:1px solid var(--hair);border-radius:16px;padding:26px 24px;/* No transition here. This family is in the ONE card contract in pxl-core.css
     and the contract already declares transform, border-color, box-shadow and
     background at .35s on the house ease. A local transition in a PAGE sheet
     loads after pxl-core and silently wins, which is what made these hover
     differently from every other card: .program-row listed only border-color
     and background, so its lift and glow had NO transition at all and snapped.
     Cris, 2026-08-28: "the animation of the mentorship lessons card is still
     not working." Removed 2026-08-28. Do not reintroduce one here. */
form:uppercase;
  color:var(--gold);display:block;margin-bottom:12px}
#ai .ai-pillar p{color:var(--ink-dim);font-size:15px;line-height:1.62;margin:0}
#ai .ai-closer{max-width:760px;margin:46px auto 0;text-align:center;color:var(--ink-dim);font-size:17px;line-height:1.62}
#ai .ai-closer a{color:var(--gold);font-weight:600}
@media(max-width:820px){#ai .ai-pillars{grid-template-columns:1fr;gap:16px}}

/* ============ WHO ============ */
.who-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center}
.who-visual{position:relative;display:flex;justify-content:center}
.portrait-frame{
  position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  background:rgba(11,11,11,.38);backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15);
  box-shadow:var(--shadow);aspect-ratio:1/1.05;
  width:100%;max-width:430px;margin:0 auto;
  /* hover lift, glow and colour now come from the card contract in pxl-core. */
}
.portrait-link{position:absolute;inset:0;z-index:1}
.portrait-ves{position:absolute;top:14px;right:16px;z-index:3;display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;
  font-family:'Space Mono',monospace;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:color .2s}
.portrait-ves:hover{color:#fff}
.portrait-ves img{height:30px;width:auto;opacity:.92;transition:opacity .2s;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.portrait-ves:hover img{opacity:1}
/* fixed VES credential badge, bottom-right of the screen */
.ves-badge{position:absolute;right:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;
  background:rgba(11,11,11,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--hair);border-radius:100px;padding:5px 11px 5px 10px;transition:color .2s,border-color .2s}
.ves-badge:hover{color:#fff;border-color:rgba(255,165,0,.45)}
.ves-badge img{height:18px;width:auto;opacity:.9}
/* Mouse aura + cursor ring now live once in pxl-core.css, accent-driven. */
/* Photo fills by width (cover) then scaled 20% smaller + shifted 10% lower. Card bg = near-black
   so the reveal blends seamlessly (no visible crop line). */
.portrait-frame>img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;
  transform:translateY(10%) scale(.88);transform-origin:50% 0%;filter:grayscale(1) contrast(1.05)}
.portrait-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,11,11,.55))}
.portrait-cap{position:absolute;left:22px;bottom:20px;z-index:2}
.portrait-cap .n{font-family:'Sora',sans-serif;font-weight:700;font-size:1.15rem}
.portrait-cap .r{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.who-body h2{font-size:clamp(1.9rem,4vw,3rem);margin:22px 0 22px;max-width:16ch}
.who-body .lead{margin-bottom:18px}
.who-body .honest{border-left:2px solid var(--gold);padding-left:18px;color:var(--ink-dim);font-size:16px;margin:26px 0 0}
/* studio + client logo groups */
.studios{margin-top:90px;padding-top:46px;display:flex;flex-direction:column;gap:56px}
.logo-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);opacity:.85;text-align:center;margin-bottom:28px}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:56px}
.logo-row img{width:auto;opacity:.85;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.logo-row img:hover{opacity:1;transform:translateY(-2px)}
.g-clients .logo-row{gap:clamp(2.5rem,6vw,5.5rem)}
.g-clients .logo-row img{height:clamp(90px,11vw,150px);opacity:1}
.g-clients .logo-row img:hover{transform:scale(1.04)}
.g-studios .logo-row{gap:clamp(1.4rem,3vw,2.6rem)}
.g-studios .logo-row img{height:clamp(18px,2.1vw,28px);opacity:.85}
.g-partners .logo-row{gap:clamp(1.6rem,3.2vw,2.8rem)}
.g-partners .logo-row img{height:clamp(40px,4.4vw,56px);opacity:.85}
.g-partners .logo-row img:hover{opacity:1;transform:translateY(-2px)}

/* ============ WHO — SELECTED WORK SHOWCASE (bg carousel) ============ */
/* ============================================================
   WHO SECTION — BACKGROUND IMAGE CONTROLS  (edit these 4 values)
     --who-crop    : crop top & bottom to make the SECTION SHORTER (.1 = 10% each)
     --who-opacity : image opacity / darkness (1 = full, lower = darker, fades toward black)
     --who-fade    : black gradient veil over the TOP & BOTTOM edges only (each)
     --who-sat     : image colour (1 = full colour, 0 = greyscale)
   ============================================================ */
#who{overflow:hidden;
  --who-crop:.1;    /* CROP: cuts top & bottom to make the section SHORTER. .1 = 10% off each, 0 = no crop, .25 = 25% */
  --who-opacity:.35;/* IMAGE OPACITY (darkness): 1 = fully visible, lower = darker (image fades toward black) */
  --who-fade:35%;   /* EDGE GRADIENT: black veil over the TOP & BOTTOM (each); fully black at the very edge */
  --who-sat:1;      /* COLOUR: 1 = full colour, 0 = greyscale */
}
#who>.wrap{position:relative;z-index:1}
/* carousel is scoped to ONLY the portrait+bio block (.who-feature) — the Clients/Studios
   logo rows below stay clean (no cover). .who-feature keeps the grid in its column; the
   showcase alone breaks out full-bleed width but stays height-bound to the grid.
   #who{overflow:hidden} clips the 100vw so there is no horizontal scroll. */
.who-feature{position:relative;padding-bottom:88px;min-height:calc(56.25vw * (1 - 2 * var(--who-crop)));display:flex;align-items:center}
.who-feature .who-grid{position:relative;z-index:1;width:100%}
.who-showcase{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  z-index:0;overflow:hidden;background:var(--bg-0)}
.who-showcase .ws-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);will-change:opacity}
.who-showcase .ws-slide.active{opacity:1;z-index:1}
.who-showcase .ws-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:var(--who-opacity);will-change:auto;
  filter:saturate(var(--who-sat));
}
/* scrim lightened ~15% in the image-reveal zone (right/centre) so the covers read clearly;
   the LEFT edge (where the bio text sits) stays dark to keep text contrast >=4.5:1 */
.who-showcase .ws-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#0B0B0B 0%,rgba(11,11,11,0) var(--who-fade),rgba(11,11,11,0) calc(100% - var(--who-fade)),#0B0B0B 100%);
}
.ws-label{
  position:absolute;bottom:22px;left:24px;z-index:3;display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border:1px solid var(--hair);border-radius:100px;
  background:rgba(11,11,11,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);opacity:.92;pointer-events:none;
}
.ws-label .ws-dot{width:6px;height:6px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 3px var(--magenta-soft);flex:none}
.ws-label .ws-tt{color:var(--ink-dim);font-weight:400}
@media(max-width:820px){
  .ws-label{top:auto;bottom:12px;left:12px;right:auto;font-size:9.5px;padding:8px 14px}
}
@media(prefers-reduced-motion:reduce){
  .who-showcase .ws-slide{transition:none}
  .who-showcase .ws-slide img{transition:none;transform:scale(1) !important}
}

/* ============ PATHS ============ */
.section-head{text-align:center;max-width:720px;margin:0 auto 64px}
.section-head h2{font-size:clamp(2rem,4.6vw,3.3rem);margin:20px 0 18px}
.section-head p{color:var(--ink-dim);font-size:18px;margin:0 auto}
/* Four across on one line, per Cris 2026-08-25: 1-to-1, group, courses, store.
   minmax(0,1fr) not 1fr, or a long word in one card refuses to shrink and
   pushes the row wider than the wrap. Gap tightened to buy card width. */
.paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:1180px){.paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:640px){.paths{grid-template-columns:minmax(0,1fr)}}
.glass{
  position:relative;background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid var(--hair);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow);
}
.path-card{overflow:hidden;display:flex;flex-direction:column;position:relative}
/* The Courses card is gold wherever it appears: the accent follows the
   subject, not the page. Hover values now come from the card contract. */
.path-card.gold-accent{--accent:var(--gold);--accent-rgb:255,165,0;--accent-bright:var(--gold-bright)}
.path-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.path-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);filter:none}
/* Scrim removed, Cris 2026-08-25: "remove the gradient screen on the images
   so we do not have any problem with the quality and the darkness". The
   covers now read at full brightness; the title sits BELOW the media, not
   over it, so nothing depended on this for contrast. */
.path-tag{position:absolute;top:16px;left:16px;z-index:2;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:rgba(11,11,11,.5);border:1px solid var(--hair);padding:7px 12px;border-radius:100px;backdrop-filter:blur(6px)}
.path-body{padding:22px 20px 24px;display:flex;flex-direction:column;flex:1}
.path-body h3{font-size:1.28rem;letter-spacing:-.02em}
.path-body .one{color:var(--ink-dim);font-size:14.5px;margin:12px 0 20px;flex:1}
.path-body ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px}
.path-body ul li{font-size:13.2px;color:var(--ink-dim);display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.path-body ul li svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:2px}
/* Real bullets, per Cris 2026-08-25: the rows read as plain lines once the
   browser's default 40px ul indent was removed. The marker is a dot drawn as
   a flex item, so the list still starts flush with the paragraph above it
   instead of being pushed in - he asked for bullets, not an indent. */
.path-body ul li::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-top:.52em;
}
/* the check icon and a bullet on the same row would be two markers */
.path-body ul li:has(svg)::before{display:none}
.path-cta{display:inline-flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;font-weight:600;font-size:15px;color:var(--accent);transition:color .25s}
.path-cta.accent{color:var(--accent)}
.path-cta.gold{color:var(--accent)}
.path-cta.gold:hover{color:var(--accent-bright,var(--accent))}
.path-cta svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.path-card:hover .path-cta svg{transform:translateX(4px)}
.paths-note{text-align:center;max-width:640px;margin:44px auto 0;color:var(--ink-faint);font-size:14.5px;line-height:1.6}

/* ============ HOW IT WORKS (steps open a modal) ============ */
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;align-items:stretch}
.how-steps::before{content:"";position:absolute;top:52px;left:12%;right:12%;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(215,0,90,.55),rgba(215,0,90,.55),transparent)}
.step-card{position:relative;z-index:1;padding:28px 24px 26px;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.step-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.step-num{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;letter-spacing:.18em;color:var(--gold);display:inline-flex;align-items:center;gap:12px}
.step-num .dot{width:9px;height:9px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 4px var(--magenta-soft);flex:none}
.step-card h3{font-size:1.22rem;letter-spacing:-.02em}
.step-card>p{color:var(--ink-dim);font-size:15px;line-height:1.55}
.step-foot{margin-top:auto;display:flex;flex-direction:column;padding-top:22px}
.step-toggle{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:none;border:0;cursor:pointer;padding:0;align-self:flex-start;transition:color .25s}
.step-card:hover .step-toggle{color:var(--gold-bright)}
.step-toggle .chev{width:12px;height:12px;transition:transform .35s var(--ease)}
.step-card:hover .step-toggle .chev{transform:translateX(3px)}
.step-detail{display:none}
.how-cta{text-align:center;margin-top:56px}

/* ============ HOW-IT-WORKS MODAL ============ */
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;
  visibility:hidden;transition:visibility 0s linear .5s}
.modal.open{visibility:visible;transition:visibility 0s}
/* fluid blur: the backdrop-filter value itself ramps 0 -> 12px (no two-step pop) */
.modal-backdrop{position:absolute;inset:0;background:rgba(6,6,7,0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),-webkit-backdrop-filter .5s var(--ease)}
.modal.open .modal-backdrop{background:rgba(6,6,7,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.modal-panel{position:relative;z-index:1;width:100%;max-width:720px;border-radius:24px;overflow:hidden;
  display:grid;grid-template-columns:0.92fr 1.08fr;
  background:rgba(20,20,22,.82);
  backdrop-filter:blur(26px) saturate(1.25);-webkit-backdrop-filter:blur(26px) saturate(1.25);
  border:1px solid rgba(215,0,90,.3);
  box-shadow:0 44px 130px -30px rgba(0,0,0,.92),inset 0 0 0 1px rgba(255,165,0,.05),0 0 60px -18px rgba(215,0,90,.4);
  opacity:0;transform:translateY(20px) scale(.9);
  transition:opacity .42s var(--ease),transform .55s cubic-bezier(.16,.9,.28,1.06)}
.modal.open .modal-panel{opacity:1;transform:translateY(0) scale(1)}
.modal-graphic{position:relative;display:flex;align-items:center;justify-content:center;padding:34px;
  background:radial-gradient(120% 100% at 30% 20%,rgba(215,0,90,.14),transparent 62%),rgba(255,255,255,.015);
  border-right:1px solid var(--hair)}
.modal-graphic svg{width:100%;max-width:220px;height:auto;display:block}
.modal-body{padding:42px 40px 44px}
.modal-num{font-family:'Space Mono',monospace;font-weight:700;font-size:15px;letter-spacing:.2em;color:var(--gold);display:inline-flex;align-items:center;gap:11px}
.modal-num::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}
.modal-title{font-family:'Sora',sans-serif;font-weight:700;font-size:1.6rem;letter-spacing:-.02em;margin:14px 0 16px}
.modal-detail{color:var(--ink-dim);font-size:15.5px;line-height:1.68}
.modal-detail p{margin-bottom:14px}
.modal-detail p:last-child{margin-bottom:0}
.modal-detail strong{color:var(--ink);font-weight:600}
.modal-close{position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hair);background:rgba(11,11,11,.5);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.modal-close:hover{background:var(--magenta);border-color:var(--magenta);color:#fff;transform:rotate(90deg)}
.modal-close svg{width:18px;height:18px}

/* ============ TESTIMONIALS (carousel, uniform card) ============ */
.testi-carousel{position:relative;max-width:840px;margin:0 auto}
.testi-card{position:relative;min-height:400px;max-height:400px;overflow:hidden;padding:44px 48px 34px;display:flex;flex-direction:column;
  transition:opacity .32s var(--ease),max-height .5s var(--ease)}
.testi-card.expanded{max-height:1600px}
.testi-card::before{content:"\201C";position:absolute;top:10px;left:20px;font-family:'Sora',sans-serif;font-weight:700;font-size:4.4rem;line-height:1;color:var(--magenta);opacity:.14;pointer-events:none}
.testi-card::after{content:"\201D";position:absolute;bottom:2px;right:22px;font-family:'Sora',sans-serif;font-weight:700;font-size:4.4rem;line-height:1;color:var(--gold);opacity:.13;pointer-events:none}
.testi-card .stars{color:var(--gold);font-size:15px;letter-spacing:3px;margin-bottom:16px;flex:none;position:relative;z-index:1}
.testi-quote-wrap{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:center;z-index:1}
.testi-card.clamped .testi-quote-wrap{justify-content:flex-start}
.testi-card.expanded .testi-quote-wrap{overflow:visible;justify-content:flex-start}
.testi-quote{font-family:'Inter',sans-serif;font-size:clamp(.98rem,1.35vw,1.1rem);line-height:1.7;color:var(--ink);letter-spacing:-.005em}
.testi-quote p{margin-bottom:14px}
.testi-quote p:last-child{margin-bottom:0}
.testi-fade{position:absolute;left:0;right:0;bottom:0;height:66px;opacity:0;pointer-events:none;transition:opacity .3s;
  background:linear-gradient(transparent,rgba(15,15,15,.92))}
.testi-card.clamped .testi-fade{opacity:1}
.testi-card.expanded .testi-fade{opacity:0}
.testi-readmore{flex:none;align-self:flex-start;margin:8px 0 2px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:none;border:0;cursor:pointer;padding:4px 0;position:relative;z-index:2}
.testi-readmore:hover{color:var(--gold-bright)}
.testi-person{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:22px;border-top:1px solid var(--hair-2);flex:none;position:relative;z-index:1}
.testi-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;border:1px solid var(--hair);background:var(--glass-2);display:grid;place-items:center}
.testi-avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.testi-avatar .mono{font-family:'Space Mono',monospace;font-weight:700;font-size:18px;color:var(--gold);letter-spacing:.05em}
.testi-name{font-family:'Sora',sans-serif;font-weight:600;font-size:16px}
.testi-role{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.testi-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:34px}
.testi-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair);background:var(--glass);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s}
.testi-arrow:hover{background:var(--magenta);border-color:var(--magenta);color:#fff;transform:translateY(-2px)}
.testi-arrow svg{width:18px;height:18px}
.testi-dots{display:flex;gap:9px;align-items:center}
.testi-dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--hair);cursor:pointer;padding:0;transition:background .25s,transform .25s}
.testi-dots button:hover{background:var(--ink-faint)}
.testi-dots button.active{background:var(--magenta);transform:scale(1.35)}
.testi-counter{text-align:center;margin-top:18px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--ink-faint)}

/* ============ FAQ ============ */
.faq-wrap{max-width:900px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--hair-2)}
.faq-q{width:100%;background:none;border:0;color:var(--ink);font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(1.02rem,2vw,1.22rem);letter-spacing:-.01em;text-align:left;padding:26px 44px 26px 0;cursor:pointer;position:relative;display:flex;transition:color .25s}
.faq-q:hover{color:var(--gold)}
.faq-q .ic{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:20px;height:20px;flex:none}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--magenta);border-radius:2px;transition:transform .35s var(--ease),opacity .35s}
.faq-q .ic::before{top:9px;left:0;width:20px;height:2px}
.faq-q .ic::after{top:0;left:9px;width:2px;height:20px}
.faq-item.open .faq-q .ic::after{transform:scaleY(0)}
.faq-item.open .faq-q{color:var(--gold)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{color:var(--ink-dim);font-size:16px;line-height:1.7;padding:0 60px 28px 0}

/* ============ FINAL CTA ============ */
.final{position:relative;overflow:hidden;text-align:center;padding:150px 0;
  background:radial-gradient(120% 100% at 50% 115%,rgba(215,0,90,.12),transparent 55%),linear-gradient(180deg,var(--bg-0),var(--bg-1))}
.final::before{content:"";position:absolute;inset:0;z-index:0;opacity:.32;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.final::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(80% 80% at 50% 45%,rgba(215,0,90,.16),rgba(11,11,11,.85) 65%),linear-gradient(180deg,rgba(11,11,11,.5),rgba(11,11,11,.88))}
.final .inner{position:relative;z-index:2}
.final h2{font-size:clamp(2.2rem,5.5vw,4.2rem);letter-spacing:-.04em;max-width:16ch;margin:22px auto 22px}
.final p{color:var(--ink-dim);max-width:56ch;margin:0 auto 40px;font-size:18px}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--hair-2);padding:70px 0 40px;background:var(--bg-0)}
.footer-inner{width:100%;padding:0 clamp(20px,3vw,40px)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,3vw,3rem);align-items:end}
.footer-brand{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:16px}
.footer-brand>a{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.footer-brand img{display:block}
.footer-sep{color:var(--ink-faint);opacity:.5;font-size:.95rem;line-height:1}
.footer-byline{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);white-space:nowrap;text-decoration:none;transition:color .2s}
.footer-byline:hover{color:#fff}
.footer-name{font-family:'Sora',sans-serif;font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.footer-tag{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)}
.footer-logo{display:inline-block;text-decoration:none}
.footer-logo img{height:46px;width:auto;display:block;margin-bottom:14px}
.footer-contact-socials{justify-content:flex-end;margin-top:20px}
.footer .socials a{color:var(--magenta)}
.footer-socials-row{margin-top:28px}
.footer-block .footer-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.footer-block .footer-val{font-size:14.5px;color:var(--ink-dim);line-height:1.85}
.footer-block .footer-val a{transition:color .2s}
.footer-block .footer-val a:hover{color:var(--gold)}
.footer-contact{text-align:right}
.footer-contact .footer-label{text-align:right}
.footer-bottom{margin-top:44px;padding-top:26px;border-top:1px solid var(--hair-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-bottom span{color:var(--ink-faint);font-size:13px;font-family:'Space Mono',monospace;letter-spacing:.06em}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .footer-contact{text-align:left}
  .footer-contact .footer-label{text-align:left}
}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(34px)}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .how-steps{grid-template-columns:repeat(2,1fr)}
  .how-steps::before{display:none}
}
@media(max-width:900px){
  .who-grid{grid-template-columns:1fr;gap:48px}
  .portrait-frame{margin-top:24px}
  .paths{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .contrast{grid-template-columns:1fr}
  .panel-left{border-radius:20px 20px 0 0}
  .panel-right{border-radius:0 0 20px 20px}
  .contrast::after{display:none}
  .nav-menu,.nav-right .btn-primary{display:none}
  .nav-toggle{display:inline-flex}
  .section{padding:88px 0}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .section{padding:72px 0}
  .hero h1{font-size:clamp(2.6rem,12vw,4rem)}
  .portrait-frame{margin-top:16px;max-width:300px}
  .how-steps{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .testi-card{min-height:440px;max-height:440px;padding:32px 24px 30px}

  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .socials{display:none}
  .reframe,.final{padding:96px 0}
  .modal-panel{grid-template-columns:1fr;max-width:420px}
  .modal-graphic{border-right:0;border-bottom:1px solid var(--hair);padding:26px}
  .modal-graphic svg{max-width:150px}
  .modal-body{padding:28px 26px 32px}
  .modal-title{font-size:1.4rem}
}

/* ============ MOBILE MENU ============ */
.mobile-menu{position:fixed;inset:0;z-index:200;background:rgba(11,11,11,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transform:translateY(-100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;padding:28px}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu .mm-top{display:flex;align-items:center;gap:9px}
.mobile-menu .mm-close{margin-left:auto}
.mobile-menu .mm-close{background:none;border:0;color:var(--ink);cursor:pointer}
.mobile-menu .mm-close svg{width:28px;height:28px}
.mobile-menu nav{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:6px}
.mobile-menu nav a{font-family:'Sora',sans-serif;font-weight:700;font-size:2rem;letter-spacing:-.03em;color:var(--ink);padding:10px 0}
.mobile-menu nav a.sub{font-size:1.15rem;font-weight:500;color:var(--ink-dim);padding:6px 0 6px 18px}
.mobile-menu .mm-foot{display:flex;flex-direction:column;gap:16px}
/* 2026-08-10: `.mobile-menu .mm-foot .socials{display:flex}` REMOVED here.
   It sat outside any media query and re-showed the drawer icons at every width,
   overriding the shared rule in pxl-core.css (same specificity, later file).
   Cris asked for the header socials on desktop only. The shared PXL-NAV SOCIALS
   block now owns this; do not reinstate a display:flex for .mm-foot .socials. */

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .reframe-aurora{opacity:.6}
  .modal-panel,.modal.open .modal-panel{transform:none}
}

/* ===PXL-TUNE 2026-07-24=== */
/* Hero: sit higher + inset from left; equal top & left distance */
.hero{align-items:flex-start}
.hero .hero-inner{max-width:none;margin:0;padding-top:clamp(56px,11vw,170px);padding-left:clamp(48px,11vw,170px);padding-right:32px;padding-bottom:60px}
/* AI pillars: match the width of the two contrast panels above (940px) so they align */
#ai .ai-pillars{max-width:940px;margin-left:auto;margin-right:auto}
/* Mentorship path cards: fixed 350px each, 3-up centered (fits within 1080p) */
/* Four across on one line. Was repeat(3,350px), which is what kept forcing the
   fourth card onto a second row no matter what the base rule said.
   1fr not a fixed width: 4x350 + gaps overflows the 1240px wrap, and Cris said
   slightly smaller cards are fine to get all four on one line. */
@media(min-width:1120px){.paths{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:center;max-width:none;gap:18px}}
/* How-it-works: narrow the row so the 4 cards match the mentorship card width */
.how-steps{max-width:1000px;margin-left:auto;margin-right:auto}

/* ---- Mobile: stop the portrait badge sitting on the role caption -------------
   Cris, 2026-08-26 (found by the repaired mobile gate, on BOTH properties).
   `.portrait-cap` is pinned bottom-LEFT and `.ves-badge` bottom-RIGHT of the same
   `.portrait-frame`. That is fine while the frame is wide. Once it narrows the role
   line runs under the badge, and because the badge carries a 50% black fill it does
   not merely touch the text, it covers it: at 390px the caption read
   "VFX & CG SUPER" with the rest behind the pill. Measured overlap 50x14px on the
   home page and 32x14px on courses, at 360, 390 and 430 alike.
   The badge moves to the TOP of the frame rather than shrinking or truncating,
   because the upper half of the portrait is empty space and the badge already
   carries its own background, border and blur, so it reads on the photo unaided. */
@media (max-width: 600px) {
  .ves-badge { top: 14px; bottom: auto; }
}

/* ---- Mobile: the scroll hint stops landing on the hero buttons --------------
   Cris, 2026-08-26 (found by the repaired mobile gate).
   `.hero-scrollhint` is absolutely pinned to the hero's bottom centre. On a phone the
   headline and sub wrap to far more lines, so the CTA row grows down into that exact
   spot and "Scroll" printed straight through "See how it works", 57x16px at 360, 390
   and 430. It is decorative, and a scroll hint is telling a touch user something their
   thumb already knows, so it is dropped at phone widths rather than shoved somewhere
   else that would collide at the next breakpoint. Unchanged from 601px up. */
@media (max-width: 600px) {
  .hero-scrollhint { display: none; }
}

/* ── Price line on the four path cards ────────────────────────────────────
   Cris, 2026-08-28: put prices on the cards so people see the shape of the
   offer immediately, and drop the "no prices on purpose" note underneath.
   Store card carries no price by his instruction: it is not framed as free,
   people just go and look. Numbers use the house number style (Space Mono,
   gold) already used by .step-num and .pxl-stat-num. */
.path-price{
  margin:14px 0 0;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-family:'Space Mono',monospace;
}
.path-price b{
  font-size:1.3rem;font-weight:700;
  color:var(--gold);letter-spacing:-.01em;line-height:1;
}
.path-price s{
  color:var(--ink-faint);font-size:.95rem;
  text-decoration-thickness:1px;
}
.path-price small{
  font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);
}
@media (max-width:520px){
  .path-price b{font-size:1.18rem}
  .path-price small{letter-spacing:.12em}
}

/* ── Path card: bullets sit directly under the paragraph ──────────────────
   Cris, 2026-08-28: the bullet lists were floating away from the paragraph on
   the Courses and Store cards. Cause was p.one carrying flex-grow:1, so the
   PARAGRAPH absorbed all the leftover column space and pushed the list down.
   Measured: text 87px on every card, element 93 / 93 / 143 / 178. Adding the
   price lines made it worse by changing how much slack was left.
   Fix: the paragraph sizes to its content, and the LIST holds the slack via
   margin-bottom:auto, so price and CTA still sit on the bottom line and the
   cards stay aligned across the row. */
.path-body p.one{flex:0 0 auto}
.path-body ul{margin-top:0;margin-bottom:auto}