/* PITCH BLACK INDUSTRIES - ENTERPRISE PROFILE - pitch.black.gallery
   House DNA: Hedi Slimane Dior Homme / SL Paris. One family. Monochrome.
   REBUILD 2: no gradients, film grain, per-script type, CSS scroll-driven motion. */

:root{
  --ink:#FBF9F1;
  --ink-mid:#9a978f;
  --ink-dim:rgba(251,249,241,.62);
  --ink-faint:rgba(251,249,241,.34);
  --paper:#0a0a0a;
  --paper-2:#111110;
  --hair:rgba(251,249,241,.16);
  --hair-soft:rgba(251,249,241,.08);
  --sans:"Neue Haas Grotesk Display Pro","Helvetica Now Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;border-radius:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;filter:grayscale(1) contrast(1.05)}

/* film grain - the tactile layer that separates intentional minimal from AI-flat */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---------- TYPE ---------- */
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-dim)}
.eyebrow .dot{display:inline-block;width:5px;height:5px;background:var(--ink);margin-inline-end:12px;vertical-align:middle}
.display{font-weight:100;letter-spacing:.02em;line-height:.95;text-transform:uppercase}
.d-hero{font-size:clamp(52px,10.5vw,168px)}
.d-1{font-size:clamp(44px,6.5vw,104px)}
.d-2{font-size:clamp(34px,4.6vw,72px)}
.d-3{font-size:clamp(24px,3vw,44px);font-weight:200}
.body{max-width:64ch;color:var(--ink-dim)}
.body strong,.body b{font-weight:500;color:var(--ink)}
em,i{font-style:normal;font-weight:500;color:var(--ink)}
.num{font-weight:300;font-feature-settings:"tnum" 1;letter-spacing:-.01em}

/* per-script overrides - design brief section 4 */
html[lang="ja"] body,html[lang="zh"] body,html[lang="ko"] body{line-height:1.75}
html[lang="ja"] .display,html[lang="zh"] .display,html[lang="ko"] .display{letter-spacing:0}
html[lang="ja"] .eyebrow,html[lang="zh"] .eyebrow,html[lang="ko"] .eyebrow,
html[lang="ja"] .tag,html[lang="zh"] .tag,html[lang="ko"] .tag,
html[lang="ja"] .no,html[lang="zh"] .no,html[lang="ko"] .no,
html[lang="ja"] .class-line,html[lang="zh"] .class-line,html[lang="ko"] .class-line,
html[lang="ja"] .kv,html[lang="zh"] .kv,html[lang="ko"] .kv,
html[lang="ja"] .lbl,html[lang="zh"] .lbl,html[lang="ko"] .lbl,
html[lang="ja"] .k,html[lang="zh"] .k,html[lang="ko"] .k{letter-spacing:.06em}
html[lang="ru"] .display{letter-spacing:.01em}
html[lang="ar"] body{line-height:1.85;font-size:17.5px}
html[lang="ar"] .display{letter-spacing:0;font-weight:200}
html[lang="ar"] .eyebrow,html[lang="ar"] .tag,html[lang="ar"] .no,
html[lang="ar"] .class-line,html[lang="ar"] .kv,html[lang="ar"] .lbl,html[lang="ar"] .k{letter-spacing:0}
html[lang="ja"] .num,html[lang="zh"] .num,html[lang="ko"] .num,html[lang="ar"] .num,
html[lang="ru"] .num{font-family:var(--sans)}

/* ---------- BARS ---------- */
#bar{
  position:fixed;inset-inline:0;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,3.4vw,56px);height:64px;
  background:rgba(10,10,10,.62);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-soft);
}
#bar .wordmark{font-size:12px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
#bar .wordmark span{color:var(--ink-dim)}
#bar nav{display:flex;gap:clamp(14px,2vw,32px)}
#bar nav a{font-size:10px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);transition:color .4s var(--ease)}
#bar nav a:hover{color:var(--ink)}
#progress{position:fixed;top:0;inset-inline-start:0;height:1px;background:var(--ink);width:0;z-index:101}

/* language */
.lang{position:relative}
.lang>button{
  background:none;border:1px solid var(--hair);color:var(--ink-dim);
  font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  padding:9px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .4s var(--ease);
}
.lang>button:hover{color:var(--ink);border-color:var(--ink-dim)}
.lang>button .code{color:var(--ink)}
.lang-menu{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:190px;
  background:#0d0d0c;border:1px solid var(--hair);padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .35s var(--ease);
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu button{
  display:flex;width:100%;justify-content:space-between;align-items:center;
  background:none;border:none;color:var(--ink-dim);cursor:pointer;
  font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 18px;transition:color .25s,background .25s;
}
.lang-menu button:hover{color:var(--ink);background:rgba(251,249,241,.04)}
.lang-menu button[aria-current="true"]{color:var(--ink)}
.lang-menu button[aria-current="true"]::after{content:"";width:4px;height:4px;background:var(--ink)}
html[lang="ar"] .lang-menu{inset-inline-end:auto;inset-inline-start:0}

/* ---------- LAYOUT ---------- */
main{display:block}
section{position:relative;padding:clamp(96px,14vh,200px) clamp(20px,3.4vw,56px)}
.wrap{max-width:1440px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px)}
.rule{height:1px;background:var(--hair);border:0}
.pad-t{padding-top:clamp(48px,8vh,110px)}

/* cover */
#cover{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:0}
#cover .hero-stack{padding-bottom:clamp(40px,7vh,90px)}
#cover .hero-stack .display{margin:18px 0 0}
#cover .hero-sub{margin-top:clamp(28px,4vh,48px);display:flex;flex-wrap:wrap;gap:16px 40px;align-items:baseline}
#cover .hero-sub .tag{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);font-weight:400}
#cover .meta-row{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 32px;
  border-top:1px solid var(--hair);padding:22px 0 26px;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);font-weight:400;
}
#cover .scroll-cue{position:absolute;bottom:110px;inset-inline-end:clamp(20px,3.4vw,56px);writing-mode:vertical-rl;
  font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-faint)}
.cover-photo{position:absolute;inset:0;z-index:-1;opacity:.26;
  background-size:cover;background-position:center;filter:grayscale(1) contrast(1.1) brightness(.8)}
.cover-mask{position:absolute;inset:0;z-index:-1;background:rgba(10,10,10,.62)}

/* section headers */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,6vh,72px)}
.sec-no{font-size:10px;font-weight:400;letter-spacing:.34em;color:var(--ink-faint);text-transform:uppercase;white-space:nowrap}

/* numbers wall */
.numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--hair-soft);
  border:1px solid var(--hair-soft)}
.numbers .cell{background:var(--paper);padding:clamp(28px,3.4vw,52px) clamp(20px,2.4vw,40px)}
.numbers .val{font-size:clamp(40px,4.6vw,72px);font-weight:100;line-height:1;letter-spacing:-.01em}
.numbers .val sup{font-size:.42em;font-weight:200;vertical-align:super}
.numbers .lbl{margin-top:14px;font-size:9.5px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}

/* trinity / clusters */
.trinity{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--hair-soft)}
.trinity .t{background:var(--paper);padding:clamp(32px,4vw,64px) clamp(24px,3vw,48px)}
.trinity .t .idx{font-size:10px;letter-spacing:.34em;color:var(--ink-faint)}
.trinity .t h3{font-size:clamp(20px,2.2vw,30px);font-weight:200;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 12px}
.trinity .t p{color:var(--ink-dim)}
.trinity .t .cl{color:var(--ink-faint);font-size:10px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:10px}

/* arm plates */
.plates{padding-top:clamp(48px,8vh,110px)}
.plate{border-top:1px solid var(--hair);padding-top:clamp(40px,7vh,96px);margin-top:clamp(40px,7vh,96px)}
.plate:first-of-type{border-top:0;margin-top:0;padding-top:0}
.plate .no{font-size:10px;letter-spacing:.34em;color:var(--ink-faint);text-transform:uppercase;font-weight:400}
.plate-head{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);align-items:end;margin:20px 0 clamp(28px,5vh,56px)}
.plate-head .left{grid-column:1/span 8}
.plate-head .right{grid-column:9/span 4;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.class-line{font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.kv b{font-weight:400;color:var(--ink)}
.plate .body{margin-top:clamp(20px,3vh,36px)}
.plate-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--hair-soft);margin-top:clamp(32px,5vh,60px)}
.plate-figs .fig{background:var(--paper);padding:24px 22px}
.plate-figs .fig .v{font-size:clamp(26px,2.6vw,40px);font-weight:100}
.plate-figs .fig .k{margin-top:8px;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim)}
.plate-link{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(26px,4vh,44px);
  font-size:10px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);
  border-bottom:1px solid var(--hair);padding-bottom:8px;transition:color .4s var(--ease)}
.plate-link:hover{color:var(--ink)}
.plate-photo{margin-top:clamp(32px,5vh,64px);aspect-ratio:21/9;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.08)}

/* ask */
#invite .display{margin-bottom:clamp(28px,5vh,56px)}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--hair-soft);margin-top:clamp(36px,6vh,64px)}
.terms .cell{background:var(--paper);padding:28px 24px}
.terms .cell .v{font-size:clamp(30px,3vw,46px);font-weight:100}
.terms .cell .k{margin-top:8px;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim)}

/* footer */
footer{padding:clamp(64px,10vh,120px) clamp(20px,3.4vw,56px) clamp(36px,6vh,64px);border-top:1px solid var(--hair)}
footer .grid{align-items:start}
footer .fine{margin-top:clamp(40px,7vh,80px);padding-top:24px;border-top:1px solid var(--hair-soft);
  font-size:10.5px;line-height:1.9;color:var(--ink-faint);max-width:100ch}

/* ---------- MOTION ---------- */
/* CSS scroll-driven reveals (design brief #12). JS IntersectionObserver fallback
   lives in i18n.js and only fires when this block is unsupported. */
@supports (animation-timeline: view()) {
  .rv{opacity:0;transform:translateY(26px);
    animation:reveal-up linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 32%;
  }
  @keyframes reveal-up{
    from{opacity:0;transform:translateY(26px)}
    to{opacity:1;transform:none}
  }
  .rv-d1{animation-range:entry 2% cover 34%}
  .rv-d2{animation-range:entry 4% cover 36%}
  .rv-d3{animation-range:entry 6% cover 38%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none;animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* responsive */
@media (max-width:880px){
  #bar nav{display:none}
  .plate-head .left,.plate-head .right{grid-column:1/-1}
  #cover .scroll-cue{display:none}
  .cover-photo{opacity:.18}
}

/* print - the booklet becomes paper */
@media print{
  body{background:#FBF9F1;color:#0a0a0a}
  body::after{display:none}
  #bar,#progress,.lang,.scroll-cue{display:none!important}
  section{padding:24px 8px;page-break-inside:avoid}
  .plate{page-break-before:always}
  .body,.numbers .lbl,.plate-figs .fig .k{color:rgba(10,10,10,.75)}
  .numbers .cell,.plate-figs .fig,.trinity .t,.terms .cell{background:#FBF9F1}
  .numbers,.plate-figs,.trinity,.terms{background:rgba(10,10,10,.18)}
  .cover-photo{opacity:.12}
  .rv{opacity:1;transform:none}
}

/* ─── V3: THE MAP + LANES ─── */
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft)}
.map-card{background:var(--paper);padding:32px 26px;display:flex;flex-direction:column;gap:12px;transition:background .6s}
.map-card:hover{background:#131312}
.map-card .idx{font-size:10px;letter-spacing:.34em;color:var(--ink-faint)}
.map-card h3{font-size:15px;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.map-card .cl{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
.map-card p{font-size:11px;line-height:1.8;color:var(--ink-dim);letter-spacing:.04em;margin-top:auto}
.lane-list{display:flex;flex-direction:column}
.lane-item{border-top:1px solid var(--hair);padding:clamp(36px,6vh,72px) 0}
.lane-item:first-of-type{border-top:0}
.lane-no{font-size:10px;letter-spacing:.34em;color:var(--ink-faint);margin-bottom:18px}
.lane-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.lane-head .left{grid-column:1/span 8}
.lane-head .right{grid-column:9/span 4}
.lane-domain{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-top:10px}
.lane-item .body{margin-top:20px}
.lane-item .plate-link{margin-top:26px}
.lane-item .plate-figs{margin-top:32px}
@media (max-width:880px){.lane-head .left,.lane-head .right{grid-column:1/-1}}

/* ─── THE UPLOAD ─── */
.up-block{max-width:76ch;margin-top:clamp(36px,5vh,60px);padding-top:clamp(30px,4vh,48px);border-top:1px solid var(--hair-soft)}
.up-label{font-size:10px;font-weight:400;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
.up-text{color:var(--ink-dim);font-size:15px;line-height:1.9;letter-spacing:.02em}
.quote-block{max-width:68ch;margin:clamp(44px,7vh,80px) 0 0 clamp(0px,6vw,120px);padding:clamp(24px,3vw,36px) 0 0 clamp(24px,3vw,40px);
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.quote-text{font-family:var(--serif,Georgia),serif;font-style:italic;font-size:clamp(18px,2.2vw,27px);line-height:1.65;color:var(--ink)}
.quote-sig{font-size:10px;letter-spacing:.4em;color:var(--ink-faint);margin-top:18px}
.pull-line{max-width:60ch;margin:clamp(40px,6vh,64px) 0 0 auto;text-align:right;font-size:clamp(15px,1.6vw,20px);
  font-style:italic;letter-spacing:.05em;color:var(--ink)}
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft)}
.agent{background:var(--paper);padding:26px 22px 22px;min-height:130px}
.agent-no{font-size:9px;letter-spacing:.3em;color:var(--ink-faint)}
.agent-name{display:block;font-size:13px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);margin:10px 0 10px}
.agent-desc{font-size:11px;line-height:1.8;color:var(--ink-dim);letter-spacing:.02em}
.closer{max-width:76ch;margin-top:clamp(56px,9vh,110px);padding-top:clamp(32px,5vh,56px);border-top:1px solid var(--hair)}
.closer p{font-family:var(--serif,Georgia),serif;font-size:clamp(19px,2.4vw,30px);line-height:1.7;color:var(--ink)}