/* ============================================================
   Influencer Advisory - motion homepage
   Plain static site. Fonts self-hosted (Google Fonts, free).
   ============================================================ */

/* ---- fonts ---- */
@font-face{font-family:'Vina Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/vinasans-normal-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/instrumentserif-normal-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/instrumentserif-italic-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/archivo-normal-100_900.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibmplexmono-normal-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/ibmplexmono-normal-700.woff2') format('woff2');}

/* ---- tokens ---- */
:root{
  --ink:#0a0a0a;
  --black:#000;
  --paper:#f2f2f2;
  --paper-ink:#111;
  --gray-body:#565656;
  --gray-unfilled:#c9c9c6;
  /* theme tokens - every accent color on the page routes through these;
     palettes below override them via html[data-palette] */
  --grad-lo:#ffbaba;
  --grad-hi:#ffffff;
  --glow-rgb:122 16 20;        /* main colored glow, used as rgb(var(--glow-rgb) / a) */
  --glow-deep-rgb:74 10 14;    /* darker companion glow */
  --accent:#e0201c;            /* About italic accent + selection */
  --font-display:'Vina Sans', Impact, 'Arial Narrow', sans-serif;
  --font-serif:'Instrument Serif', Georgia, serif;
  --font-body:'Archivo', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  --radius:24px;
  --inset:8px;          /* card inset from viewport edge */
  --gutter:24px;
  --grad-display:linear-gradient(0deg, var(--grad-lo) 0%, var(--grad-hi) 75%);
}

/* ---- palettes (preview with /?palette, deep-link /?palette=<key>, bake in by changing DEFAULT_PALETTE in main.js) ---- */
/* blue family: each retints --black so the dark cards go deep blue too */
html[data-palette="navy"]{
  --black:#060d1f;--ink:#060d1f;
  --grad-lo:#a9c6f2;--grad-hi:#f4f8ff;
  --glow-rgb:36 74 156;--glow-deep-rgb:14 32 78;
  --accent:#2f5fd0;
}
html[data-palette="deeppro"]{
  --black:#030a16;--ink:#030a16;
  --grad-lo:#4f79cf;--grad-hi:#c4d8ff;
  --glow-rgb:10 30 86;--glow-deep-rgb:5 13 42;
  --accent:#153a80;
}
html[data-palette="midnight"]{
  --black:#03081a;--ink:#03081a;
  --grad-lo:#7d9fd4;--grad-hi:#e8f0ff;
  --glow-rgb:22 42 104;--glow-deep-rgb:8 18 52;
  --accent:#20408f;
}
html[data-palette="royal"]{
  --black:#071233;--ink:#071233;
  --grad-lo:#9db8ff;--grad-hi:#f0f4ff;
  --glow-rgb:44 78 200;--glow-deep-rgb:18 34 104;
  --accent:#2f55d4;
}
html[data-palette="cobalt"]{
  --black:#050c26;--ink:#050c26;
  --grad-lo:#6f8fe8;--grad-hi:#dbe6ff;
  --glow-rgb:30 58 170;--glow-deep-rgb:12 26 88;
  --accent:#2244cc;
}
html[data-palette="electric"]{
  --black:#041420;--ink:#041420;
  --grad-lo:#7fd4ff;--grad-hi:#f0fbff;
  --glow-rgb:0 116 200;--glow-deep-rgb:0 54 100;
  --accent:#00a6ff;
}
html[data-palette="ice"]{
  --black:#0a1526;--ink:#0a1526;
  --grad-lo:#cfe4ff;--grad-hi:#ffffff;
  --glow-rgb:88 128 190;--glow-deep-rgb:40 62 100;
  --accent:#6ea8e8;
}
html[data-palette="steel"]{
  --black:#0b141e;--ink:#0b141e;
  --grad-lo:#a9bccf;--grad-hi:#f2f6fa;
  --glow-rgb:62 84 112;--glow-deep-rgb:28 40 56;
  --accent:#5b7a99;
}
html[data-palette="champagne"]{--grad-lo:#f1dfae;--grad-hi:#fffdf6;--glow-rgb:120 94 22;--glow-deep-rgb:66 52 12;--accent:#b08a2e;}
html[data-palette="classic24k"]{--grad-lo:#f0d06b;--grad-hi:#fffaf0;--glow-rgb:133 102 15;--glow-deep-rgb:74 57 8;--accent:#d4af37;}
html[data-palette="satin"]{--grad-lo:#e8ce8c;--grad-hi:#ffffff;--glow-rgb:115 90 30;--glow-deep-rgb:64 50 17;--accent:#a9852b;}
html[data-palette="amber"]{--grad-lo:#efc15a;--grad-hi:#fff6e3;--glow-rgb:140 96 10;--glow-deep-rgb:78 53 6;--accent:#c68e17;}
html[data-palette="deepgold"]{--grad-lo:#a87e22;--grad-hi:#ecdcb0;--glow-rgb:86 60 10;--glow-deep-rgb:44 30 5;--accent:#8f6914;}
html[data-palette="antique"]{--grad-lo:#d9b968;--grad-hi:#f7eedc;--glow-rgb:105 82 20;--glow-deep-rgb:58 45 11;--accent:#8c6d1f;}
html[data-palette="bronze"]{--grad-lo:#d9a94f;--grad-hi:#fff3de;--glow-rgb:120 85 15;--glow-deep-rgb:66 47 8;--accent:#9c7a17;}
html[data-palette="bright"]{--grad-lo:#ffd700;--grad-hi:#fffff0;--glow-rgb:160 120 0;--glow-deep-rgb:88 66 0;--accent:#e6c200;}

/* ---- base ---- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--paper-ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--grad-lo);color:var(--ink);}
img,video,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;}
main{position:relative;}

/* ---- film grain, two layers ----
   .grain      = fixed full-viewport noise at 5% (matches live site's grain_overlay)
   .film-grain = per-media overlay at 14% + soft-light, for footage cards.
   NOTE for future footage: keep .film-grain on the wrapper of every real <video>,
   it recreates the grainy film treatment the reference footage has. */
.grain,
.film-grain::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:300px 300px;
}
.grain{
  position:fixed;inset:-100px;z-index:2147483000;pointer-events:none;
  opacity:.05;
  animation:grain-shift 900ms steps(4) infinite;
}
@keyframes grain-shift{
  0%{transform:translate(0,0);}
  25%{transform:translate(-34px,22px);}
  50%{transform:translate(18px,-40px);}
  75%{transform:translate(-26px,-14px);}
  100%{transform:translate(0,0);}
}
.film-grain{position:relative;}
.film-grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.14;mix-blend-mode:soft-light;border-radius:inherit;
}

/* ---- loading screen ---- */
.loading-screen{
  position:fixed;inset:0;z-index:2000;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.loader-mark{
  position:relative;
  font-family:var(--font-display);font-size:clamp(120px, 16vw, 230px);line-height:1;
  user-select:none;
}
.loader-mark span{display:block;}
.loader-mark-base{color:rgba(0,0,0,.1);}
.loader-mark-fill{position:absolute;inset:0;color:#0a0a0a;clip-path:inset(100% 0 0 0);}
.loader-counter{
  position:absolute;left:40px;bottom:26px;
  display:flex;height:1em;overflow:hidden;
  font-family:var(--font-display);font-size:clamp(56px, 7vw, 104px);line-height:1;color:#0a0a0a;
  user-select:none;
}
.digit-col{display:block;}
.digit-col span{display:block;height:1em;}

/* ---- crosshair cursor ---- */
.cursor{position:fixed;inset:0;z-index:2147482000;pointer-events:none;}
.cursor-x,.cursor-y,.cursor-dot{position:fixed;background:#fff;mix-blend-mode:exclusion;}
.cursor-x{left:0;top:0;width:100vw;height:1px;opacity:.12;}
.cursor-y{left:0;top:0;width:1px;height:100vh;opacity:.12;}
/* the reference cursor centerpiece is a 12px square, not a dot */
.cursor-dot{left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;opacity:.95;}
@media (pointer:coarse){.cursor{display:none;}}

/* ---- mono bracket labels ---- */
.mono-label{
  font-family:var(--font-mono);font-weight:700;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.5;
  display:inline-block;
}
a.mono-label,button.mono-label{transition:opacity .25s ease;}
a.mono-label:hover,button.mono-label:hover{opacity:.55;}

/* ---- header ---- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 32px;
  color:#fff;
  mix-blend-mode:difference;   /* stays readable over dark and light cards */
}
.brand{
  font-family:var(--font-display);font-size:40px;line-height:.9;letter-spacing:.01em;
}
.header-right{display:flex;gap:28px;}

/* ---- menu overlay ---- */
.menu-root{position:fixed;inset:0;z-index:1000;}
.menu-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.35);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;
}
.menu-panel{
  position:absolute;top:12px;right:12px;bottom:12px;
  width:min(620px, 92vw);
  background:var(--paper);border-radius:var(--radius);
  padding:120px 64px 48px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateX(108%);
}
.menu-nav{display:flex;flex-direction:column;gap:8px;}
.menu-nav a{
  font-family:var(--font-display);font-size:clamp(44px,6vw,76px);
  line-height:1.02;color:var(--paper-ink);
  transition:opacity .25s ease;
}
.menu-nav a:hover{opacity:.45;}
.menu-foot{color:#8a8a8a;font-size:12px;}

/* ---- section notch tabs ----
   Dark sections are rounded cards; each dark/light boundary carries a black
   chamfered "viewfinder tab" that pokes into the light section. The tabs live
   INSIDE the light sections (which never clip), one at the top edge pointing
   down and one at the bottom edge pointing up. */
.notch{
  position:absolute;left:22%;width:56%;height:32px;z-index:6;
  background:var(--black);
}
.notch-down{top:0;clip-path:polygon(0 0, 100% 0, calc(100% - 30px) 100%, 30px 100%);}
.notch-up{bottom:0;clip-path:polygon(30px 0, calc(100% - 30px) 0, 100% 100%, 0 100%);}

/* ---- HERO ---- */
.hero{
  position:relative;
  /* short enough that the CAMPAIGN ANALYSIS title clears the fold on a
     normal laptop screen. max() guards short viewports. */
  min-height:max(78vh, 620px);
  background:var(--black);
  border-radius:0 0 var(--radius) var(--radius);
  margin:0 var(--inset);
  overflow:hidden;
  color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-bg{position:absolute;inset:0;overflow:hidden;}
.bg-drift{
  position:absolute;inset:-30%;
  background:
    radial-gradient(42% 34% at 68% 28%, rgb(var(--glow-rgb) / .55) 0%, rgb(var(--glow-rgb) / 0) 100%),
    radial-gradient(50% 42% at 22% 78%, rgb(var(--glow-deep-rgb) / .5) 0%, rgb(var(--glow-deep-rgb) / 0) 100%);
  filter:blur(40px);
  animation:drift-a 38s ease-in-out infinite alternate;
}
.bg-drift-2{
  background:
    radial-gradient(36% 30% at 30% 22%, rgb(var(--glow-deep-rgb) / .6) 0%, rgb(var(--glow-deep-rgb) / 0) 100%),
    radial-gradient(44% 40% at 80% 70%, rgb(var(--glow-rgb) / .35) 0%, rgb(var(--glow-rgb) / 0) 100%);
  animation:drift-b 47s ease-in-out infinite alternate;
}
@keyframes drift-a{from{transform:translate(-3%,-2%) rotate(0deg);}to{transform:translate(3%,3%) rotate(6deg);}}
@keyframes drift-b{from{transform:translate(3%,2%) rotate(0deg);}to{transform:translate(-3%,-3%) rotate(-5deg);}}

.hero-helix{
  position:absolute;top:12%;right:-2%;width:38%;height:96%;
  pointer-events:none;
}
/* canvas takes pointer events so you can grab + spin the shape;
   touch-action:pan-y keeps vertical page scroll working on touch */
.hero-helix canvas{width:100%;height:100%;pointer-events:auto;touch-action:pan-y;cursor:grab;}
.hero-helix canvas:active{cursor:grabbing;}
.helix-fallback{display:none;}
.hero.no-webgl .helix-fallback{
  display:block;position:absolute;top:20%;right:8%;width:380px;height:520px;
  background:radial-gradient(60% 45% at 50% 40%, rgb(var(--glow-rgb) / .8), rgb(var(--glow-deep-rgb) / .4) 60%, transparent 75%);
  filter:blur(6px);
  border-radius:46% 54% 60% 40% / 40% 50% 50% 60%;
  animation:blob-morph 14s ease-in-out infinite alternate;
}
@keyframes blob-morph{
  from{border-radius:46% 54% 60% 40% / 40% 50% 50% 60%;transform:rotate(-4deg) scale(1);}
  to{border-radius:58% 42% 44% 56% / 56% 42% 58% 44%;transform:rotate(5deg) scale(1.06);}
}

.hero-inner{
  position:relative;z-index:2;
  /* top padding keeps the headline clear of the fixed header on short viewports */
  padding:112px 40px 24px;
}
.hero-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(56px, 10.2vw, 168px);
  line-height:.98;letter-spacing:0;
  white-space:nowrap;
}
/* gradient lives on the animated span itself so background-clip survives transforms */
.hero-title .line{
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-sub{
  margin-top:28px;
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(26px, 3vw, 44px);
  line-height:1.12;color:#efefef;
}
.hero-sub em{font-style:italic;}
.hero-links{display:flex;gap:36px;margin:40px 0 56px;}
.hero-links .mono-label{color:#fff;}

/* line reveal masks */
.line-mask{display:block;overflow:hidden;}
.line{display:block;transform:translateY(110%);}

.marquee{
  position:relative;z-index:2;
  overflow:hidden;padding:26px 0 34px;
  /* faded client-logo strip: soft edge fade only (no dark scrim - that read as
     a black band and hid the names) */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.marquee-track{display:flex;gap:96px;width:max-content;will-change:transform;}
/* client logos: force every mark to a solid white silhouette so mixed
   brand colors read as one muted strip on the dark hero */
.marquee-item{
  height:34px;width:auto;max-width:190px;object-fit:contain;
  flex:0 0 auto;display:block;
  filter:brightness(0) invert(1);opacity:.55;
}

/* ---- INTRO (fill text) ---- */
.intro{
  position:relative;
  background:var(--paper);
  padding:88px 40px 84px;
}
.fill-text{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px, 8vw, 118px);line-height:.9;letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--gray-unfilled);
  max-width:100%;
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
/* SplitText word wrappers: keep a word's letters on one line */
.fill-text .fill-word{display:inline-block;white-space:nowrap;}
.fill-text .char{color:inherit;}
.intro-copy{
  margin-top:60px;max-width:660px;
  display:flex;flex-direction:column;gap:36px;
}
.intro-copy p{
  font-size:clamp(19px, 1.85vw, 27px);line-height:1.42;color:var(--gray-body);font-weight:500;
}

/* ---- WORK ---- */
.work{
  position:relative;
  background:var(--black);
  border-radius:var(--radius);
  margin:0 var(--inset);
  padding:54px 24px 96px;
  color:#fff;
}
.work-title,
.process-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(40px, 4.2vw, 62px);line-height:1;
  text-align:center;letter-spacing:.01em;
  margin-bottom:40px;
}
.work-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:28px;
}

/* real film cards: creator clip loops behind a white wordmark under a dark haze */
.work-media{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/9;background:#000;
}
.work-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .work-video{transform:scale(1.06);}
.work-haze{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.14) 42%, rgba(0,0,0,.62) 100%);
}
.work-tag{
  position:absolute;left:22px;top:20px;z-index:2;
  font-family:var(--font-mono, monospace);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
.work-name{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:0 24px;text-align:center;
  font-family:var(--font-display);font-weight:400;line-height:.95;
  font-size:clamp(30px, 3.6vw, 58px);letter-spacing:-.01em;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.work-cta{
  position:absolute;left:22px;bottom:20px;z-index:2;
  font-family:var(--font-mono, monospace);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);
  transition:color .3s ease;
}
.work-card:hover .work-cta{color:#fff;}
.media-ph{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/9;
  background:
    radial-gradient(80% 90% at 20% 15%, #262626 0%, #121212 55%, #0b0b0b 100%);
  display:flex;align-items:center;justify-content:center;
}
.media-ph::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.05) 46%, transparent 60%);
  background-size:240% 100%;
  animation:ph-shimmer 4.5s ease-in-out infinite;
}
@keyframes ph-shimmer{0%{background-position:130% 0;}60%{background-position:-60% 0;}100%{background-position:-60% 0;}}
.media-ph .mono-label{color:rgba(255,255,255,.34);font-size:12px;}
/* real footage inside a placeholder frame: fill + kill the shimmer */
.media-ph.has-media::before{animation:none;background:none;}
.media-ph video,
.media-ph img.clip-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* team quadrant: four members in one frame */
.team-grid{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;
  border-radius:var(--radius);overflow:hidden;
}
.team-grid img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;min-height:0;}
.work-card{display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.work-card:hover{transform:scale(.975);}
.see-all{
  display:block;margin-top:80px;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(56px, 8vw, 118px);line-height:1;color:#fff;
  transition:opacity .3s ease;padding-left:16px;
}
.see-all:hover{opacity:.5;}

/* ---- PROCESS ---- */
.process{
  position:relative;
  background:var(--paper);
  padding:140px 40px 120px;
}
.process-title{color:var(--paper-ink);}
.process-wrap{
  display:grid;grid-template-columns:46% 1fr;gap:64px;align-items:start;
}
.process-media{
  position:sticky;top:12vh;
  height:76vh;
}
.process-media .media-ph{
  position:absolute;inset:0;aspect-ratio:auto;height:100%;
  opacity:0;transition:opacity .55s ease;
  background:radial-gradient(80% 90% at 25% 15%, #3a3a3a 0%, #1c1c1c 60%, #101010 100%);
}
.process-media .media-ph.is-active{opacity:1;}
.process-steps{display:flex;flex-direction:column;gap:34vh;padding:10vh 0 16vh;}
.step-label{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(28px, 2.9vw, 42px);letter-spacing:-.02em;
  color:var(--paper-ink);margin-bottom:26px;
}
.step-text{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(34px, 3.7vw, 54px);line-height:1.04;letter-spacing:-.025em;
  color:var(--gray-unfilled);
}
.step-text em{font-style:italic;}

/* ---- SYSTEM (pinned swap) ---- */
.system{
  position:relative;
  background:var(--black);
  border-radius:var(--radius);
  margin:0 var(--inset);
  color:#fff;
  overflow:hidden;
}
.system::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 46% at 78% 22%, rgb(var(--glow-rgb) / .5) 0%, transparent 70%),
    radial-gradient(40% 42% at 16% 80%, rgb(var(--glow-deep-rgb) / .45) 0%, transparent 70%);
}
.system-pin{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 24px;
}
.system-phrase{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);}
.system-kicker{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(34px, 4vw, 58px);color:#c9c9c6;
  margin-bottom:10px;
}
.system-line{
  font-family:var(--font-display);font-weight:400;
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  line-height:1;letter-spacing:0;
}
.system-a .system-line{font-size:clamp(40px, 6.4vw, 106px);}
.system-b .system-line{font-size:clamp(80px, 12vw, 200px);}
.system-b{opacity:0;}
.system-b sup{font-size:.28em;vertical-align:.9em;-webkit-text-fill-color:#fff;}
.system-cta{position:absolute;bottom:16vh;left:50%;transform:translateX(-50%);color:#fff;}

/* ---- ABOUT ---- */
.about{
  position:relative;
  background:var(--paper);
  padding:160px 24px 120px;
  text-align:center;overflow:hidden;
}
.about-watermark{
  position:absolute;top:40px;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:44vw;line-height:1;
  color:rgba(10,10,10,.05);pointer-events:none;user-select:none;
}
.about-label{
  font-family:var(--font-serif);font-size:clamp(24px, 2.4vw, 36px);
  color:var(--paper-ink);margin-bottom:70px;
}
.about-title{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(40px, 4.8vw, 72px);letter-spacing:-.02em;line-height:1.05;
  margin-bottom:44px;color:var(--paper-ink);
}
.about-title em{color:var(--accent);font-style:italic;}
.about-copy{
  max-width:820px;margin:0 auto 40px;
  font-size:clamp(19px, 1.9vw, 27px);line-height:1.5;color:var(--gray-body);font-weight:500;
}
.about-link{
  font-size:clamp(17px, 1.6vw, 24px);color:var(--gray-body);margin-bottom:56px;font-weight:500;
}
.about-link b{color:var(--paper-ink);}
.about-link a{border-bottom:2px solid rgba(10,10,10,.7);transition:opacity .25s ease;}
.about-link a:hover{opacity:.55;}
.about-media{
  max-width:1080px;margin:0 auto 90px;aspect-ratio:16/9.4;
  background:radial-gradient(80% 90% at 30% 20%, #d9d9d6 0%, #bdbdb9 60%, #a8a8a4 100%);
}
.about-media .mono-label{color:rgba(0,0,0,.35);}

/* ---- PROJECT PAGE ---- */
.project-hero{
  position:relative;
  background:var(--black);
  border-radius:0 0 var(--radius) var(--radius);
  margin:0 var(--inset);
  color:#fff;overflow:hidden;
  padding:190px 40px 56px;
}
.project-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 46% at 80% 30%, rgb(var(--glow-rgb) / .5) 0%, transparent 70%),
    radial-gradient(40% 42% at 12% 85%, rgb(var(--glow-deep-rgb) / .45) 0%, transparent 70%);
}
.project-label{
  position:relative;
  font-family:var(--font-serif);font-size:clamp(26px, 2.6vw, 40px);
  margin-bottom:6px;color:#efefef;
}
.project-title-wrap{
  position:relative;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(64px, 10.5vw, 172px);line-height:.98;
}
.project-title{
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.project-hero-media{
  position:relative;margin-top:52px;aspect-ratio:16/8;
}
.case{
  position:relative;
  background:var(--paper);
  padding:150px 24px 130px;
}
.case-inner{max-width:880px;margin:0 auto;}
.case h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(40px, 4.6vw, 64px);letter-spacing:-.02em;line-height:1.05;
  color:var(--paper-ink);margin:96px 0 30px;
}
.case h2:first-child{margin-top:0;}
.case h3{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(30px, 3.2vw, 46px);letter-spacing:-.015em;
  color:var(--paper-ink);margin:80px 0 24px;
}
.case p{
  font-size:clamp(18px, 1.8vw, 26px);line-height:1.5;
  color:var(--gray-body);font-weight:500;margin-bottom:26px;
}
.case p em{font-family:var(--font-serif);font-style:italic;color:#2e2e2e;}
.case ul{margin:6px 0 34px 24px;display:flex;flex-direction:column;gap:13px;}
.case li{font-size:clamp(17px, 1.7vw, 24px);line-height:1.4;color:var(--gray-body);font-weight:500;}
.case .media-ph{margin:44px 0 14px;}
.other{
  position:relative;
  background:var(--black);
  border-radius:var(--radius);
  margin:0 var(--inset);
  padding:110px 24px 90px;
  color:#fff;
}
.other-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;}
@media (max-width: 900px){
  .other-grid{grid-template-columns:1fr;}
  .project-hero{padding:150px 24px 44px;}
}

/* ---- PREFOOTER + FOOTER ---- */
.prefooter{
  position:relative;
  background:var(--black);
  border-radius:var(--radius) var(--radius) 0 0;
  margin:0 var(--inset);
  color:#fff;text-align:center;
  padding:210px 24px 170px;
  overflow:hidden;
}
.prefooter::before,
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 40% at 82% 18%, rgb(var(--glow-rgb) / .5) 0%, transparent 72%),
    radial-gradient(42% 44% at 12% 86%, rgb(var(--glow-deep-rgb) / .4) 0%, transparent 70%);
}
.prefooter-title{
  position:relative;
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(38px, 4.6vw, 68px);line-height:1.08;letter-spacing:-.015em;
  margin-bottom:60px;
}
.prefooter-title em{font-style:italic;color:#d8d8d4;}
.prefooter-cta{position:relative;color:#fff;}

.site-footer{
  position:relative;
  background:var(--black);
  margin:0 var(--inset);
  color:#fff;
  padding:110px 48px 36px;
  overflow:hidden;
}
.footer-grid{
  position:relative;
  display:grid;grid-template-columns:auto 1fr auto;gap:64px;align-items:start;
}
.brand-footer{font-size:64px;}
.footer-nav{display:flex;flex-direction:column;gap:20px;margin-left:8%;}
.footer-nav .mono-label{color:#fff;}
.footer-address{
  font-style:normal;font-size:19px;line-height:1.65;color:#bdbdbd;text-align:right;
}
.footer-small{
  position:relative;margin-top:90px;
  font-size:13px;color:#7d7d7d;font-family:var(--font-mono);letter-spacing:.08em;
}

/* ---- palette preview bar (only rendered when the URL has ?palette) ---- */
.palette-bar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:1500;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  background:rgba(10,10,10,.94);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:10px 14px;max-width:min(96vw, 1100px);
}
.palette-bar .palette-readout{
  font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin-right:10px;white-space:nowrap;
}
.palette-bar button{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-weight:500;font-size:11.5px;letter-spacing:.05em;
  color:#cfcfcf;padding:7px 10px;border-radius:9px;border:1px solid transparent;
  transition:all .2s ease;white-space:nowrap;
}
.palette-bar button:hover{color:#fff;background:rgba(255,255,255,.08);}
.palette-bar button.is-active{color:#111;background:#f2f2f2;border-color:#fff;}
.palette-bar button i{
  width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.25);
}

/* ---- generic reveal ---- */
[data-reveal]{opacity:0;transform:translateY(34px);}
body.no-motion [data-reveal]{opacity:1;transform:none;}

/* ---- responsive ---- */
@media (max-width: 900px){
  .hero-title{white-space:normal;font-size:clamp(52px, 15.4vw, 120px);line-height:.92;}
  .work-grid{grid-template-columns:1fr;}
  .process-wrap{grid-template-columns:1fr;}
  .process-media{position:relative;top:0;height:52vw;}
  .process-steps{gap:18vh;padding-top:6vh;}
  .footer-grid{grid-template-columns:1fr;gap:44px;}
  .footer-address{text-align:left;}
  .footer-nav{margin-left:0;}
  .menu-panel{padding:110px 36px 40px;}
  .hero-helix{width:70%;opacity:.8;}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .grain,.bg-drift,.media-ph::before,.helix-fallback{animation:none !important;}
  .line{transform:none !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .cursor{display:none;}
}