/* ==========================================================================
   GROUPE BAGHERI — Design system
   Neutral parent identity; each division carries its own accent.
   ========================================================================== */

:root{
  --ink:      #0A0A0C;
  --ink-2:    #121216;
  --ink-3:    #1B1B21;
  --bone:     #F4F1EA;
  --bone-2:   #E7E2D8;
  --mute:     #8C8A85;
  --hair:     rgba(244,241,234,.14);
  --hair-d:   rgba(10,10,12,.14);

  /* Division accents */
  --construction: #F3E12E;   /* Mormont */
  --design:       #C08A5E;   /* clay */
  --dev:          #6E9E96;   /* slate green */

  --display: "Instrument Serif", "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --shell: 1280px;
  --gutter: clamp(22px, 5vw, 72px);
  --sec: clamp(88px, 11vw, 176px);
  --ease: cubic-bezier(.19,.7,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
[id]{ scroll-margin-top:90px; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; background:var(--ink-3); }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:400; line-height:1.02; letter-spacing:-.015em; }

:focus-visible{ outline:2px solid var(--bone); outline-offset:4px; }
.skip{ position:absolute; left:-9999px; background:var(--bone); color:var(--ink); padding:12px 20px; z-index:200; }
.skip:focus{ left:14px; top:14px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Type ---------- */
.d-xl{ font-size:clamp(2.9rem, 9vw, 7.4rem); line-height:.9; letter-spacing:-.03em; }
.d-l{ font-size:clamp(2.3rem, 5.6vw, 4.6rem); line-height:1.02; letter-spacing:-.02em; }
.d-m{ font-size:clamp(1.6rem, 2.9vw, 2.4rem); }
.lede{ font-size:clamp(1.02rem,1.25vw,1.16rem); color:rgba(244,241,234,.66); max-width:58ch; }
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--mute); display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; opacity:.6; }
em.it{ font-style:italic; opacity:.9; }

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100; transition:background .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{ background:rgba(10,10,12,.86); backdrop-filter:blur(16px); border-bottom-color:var(--hair); }
.hdr-in{ display:flex; align-items:center; height:82px; gap:clamp(12px,3vw,44px); }
.brand{ display:flex; flex-direction:column; line-height:1; flex:none; }
.brand b{ font-family:var(--display); font-weight:400; font-size:1.42rem; letter-spacing:.01em; }
.brand span{ font-family:var(--mono); font-size:.55rem; letter-spacing:.42em; color:var(--mute); margin-top:5px; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(12px,2vw,30px); }
.nav a{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,241,234,.72); position:relative; padding:6px 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--bone); transition:width .35s var(--ease); }
.nav a:hover{ color:var(--bone); } .nav a:hover::after{ width:100%; }
@media(max-width:1000px){ .nav a.nlink{ display:none; } }

.lang{ display:flex; align-items:center; gap:2px; font-family:var(--mono); font-size:.72rem; }
.lang button{ background:none; border:0; padding:6px 7px; cursor:pointer; color:rgba(244,241,234,.45); letter-spacing:.1em; transition:color .2s; }
.lang button[aria-pressed="true"]{ color:var(--bone); }
.lang button:hover{ color:var(--bone); }
.lang i{ color:rgba(244,241,234,.25); font-style:normal; }

.burger{ display:flex; flex-direction:column; gap:5px; width:44px; height:44px; justify-content:center; align-items:flex-end; background:none; border:0; cursor:pointer; }
.burger span{ height:1px; width:24px; background:var(--bone); transition:transform .35s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media(min-width:1001px){ .burger{ display:none; } .drawer{ display:none; } }

.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink); padding:110px var(--gutter) 48px;
  transform:translateY(-101%); transition:transform .6s var(--ease); display:flex; flex-direction:column; overflow-y:auto;
}
.drawer[data-open="true"]{ transform:none; }
.drawer a{ font-family:var(--display); font-size:clamp(2rem,9vw,3rem); padding:16px 0; border-bottom:1px solid var(--hair); display:flex; align-items:baseline; gap:16px; }
.drawer a i{ font-family:var(--mono); font-size:.66rem; font-style:normal; color:var(--mute); }
.drawer .foot{ margin-top:auto; padding-top:34px; font-family:var(--mono); font-size:.78rem; color:var(--mute); }
.drawer .foot a{ font-family:var(--mono); font-size:.9rem; border:0; padding:4px 0; display:inline; color:var(--bone); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em; padding:15px 26px; border:1px solid var(--hair);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn .a{ transition:transform .35s var(--ease); }
.btn:hover .a{ transform:translate(4px,-4px); }
.btn:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn-solid{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn-solid:hover{ background:transparent; color:var(--bone); border-color:var(--bone); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,12,.82),rgba(10,10,12,.28) 45%,rgba(10,10,12,.96)); }
.hero-in{ position:relative; z-index:2; width:100%; padding:132px 0 34px; }
.hero h1{ margin-top:24px; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln b{ display:block; font-weight:400; transform:translateY(102%); animation:up 1.05s var(--ease) forwards; }
.hero h1 .ln:nth-child(2) b{ animation-delay:.1s } .hero h1 .ln:nth-child(3) b{ animation-delay:.2s }
@keyframes up{ to{ transform:none; } }
.hero .lede{ margin-top:26px; opacity:0; animation:fade .9s var(--ease) .45s forwards; }
.hero .cta{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation:fade .9s var(--ease) .6s forwards; }
@keyframes fade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.index{ margin-top:clamp(34px,4.4vw,58px); border-top:1px solid var(--hair); display:grid; }
@media(min-width:820px){ .index{ grid-template-columns:repeat(3,1fr); } }
.index a{ padding:18px 0; border-bottom:1px solid var(--hair); display:flex; align-items:baseline; gap:14px; transition:padding-left .4s var(--ease); }
@media(min-width:820px){ .index a{ border-bottom:0; padding-right:20px; } }
.index a:hover{ padding-left:10px; }
.index i{ font-family:var(--mono); font-size:.66rem; font-style:normal; color:var(--mute); }
.index b{ font-family:var(--display); font-weight:400; font-size:1.35rem; }
.index .dot{ width:7px; height:7px; border-radius:50%; margin-left:12px; flex:none; align-self:center; }

/* ---------- Sections ---------- */
.sec{ padding-block:var(--sec); }
.sec-head{ display:grid; gap:28px; margin-bottom:clamp(44px,6vw,80px); }
@media(min-width:900px){ .sec-head{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:end; } }
.sec-head h2{ margin-top:22px; }

/* Group statement */
.statement{ font-family:var(--display); font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.16; letter-spacing:-.015em; max-width:22ch; }
.statement span{ color:var(--mute); }

.facts{ display:grid; gap:1px; background:var(--hair); margin-top:clamp(44px,6vw,72px); }
@media(min-width:720px){ .facts{ grid-template-columns:repeat(3,1fr); } }
.fact{ background:var(--ink); padding:34px 30px 40px; }
.fact h3{ font-size:1.3rem; margin:14px 0 10px; }
.fact p{ font-size:.95rem; color:rgba(244,241,234,.58); }
.fact i{ font-family:var(--mono); font-size:.66rem; font-style:normal; letter-spacing:.24em; color:var(--mute); }

/* ---------- Divisions ---------- */
.div-sec{ border-top:1px solid var(--hair); padding-block:clamp(72px,9vw,140px); position:relative; }
.div-grid{ display:grid; gap:clamp(34px,5vw,72px); align-items:center; }
@media(min-width:960px){
  .div-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
  .div-sec.flip .div-media{ order:-1; }
}
.div-num{ font-family:var(--mono); font-size:.72rem; letter-spacing:.3em; color:var(--mute); }
.div-name{ display:flex; align-items:center; gap:14px; margin:20px 0 6px; }
.div-name .bar{ width:30px; height:3px; flex:none; }
.div-sec h2{ font-size:clamp(2rem,4.4vw,3.5rem); }
.div-kicker{ font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; margin-top:14px; }
.div-sec .lede{ margin-top:22px; }
.div-list{ margin-top:30px; display:grid; gap:10px; }
.div-list li{ font-size:.96rem; color:rgba(244,241,234,.7); padding-left:20px; position:relative; }
.div-list li::before{ content:""; position:absolute; left:0; top:.78em; width:9px; height:1px; background:currentColor; opacity:.6; }
.div-cta{ margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; }
.div-media{ position:relative; }
.div-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(.92) contrast(1.04); }
@media(max-width:959px){ .div-media img{ aspect-ratio:4/3; } }
.div-media .tagline{
  position:absolute; left:0; bottom:0; padding:16px 20px; background:var(--ink); font-family:var(--mono);
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
}

/* ---------- Approach ---------- */
.steps{ display:grid; gap:1px; background:var(--hair); }
@media(min-width:680px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--ink); padding:34px 28px 42px; }
.step i{ font-family:var(--mono); font-size:.66rem; font-style:normal; letter-spacing:.26em; color:var(--mute); }
.step h3{ font-size:1.25rem; margin:16px 0 10px; }
.step p{ font-size:.93rem; color:rgba(244,241,234,.58); }

/* ---------- Territory ---------- */
.terr{ display:grid; gap:clamp(30px,4vw,60px); }
@media(min-width:940px){ .terr{ grid-template-columns:1fr 1fr; align-items:start; } }
.terr-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
@media(min-width:540px){ .terr-list{ grid-template-columns:repeat(3,1fr); } }
.terr-list li{ background:var(--ink); padding:16px 14px; font-size:.92rem; color:rgba(244,241,234,.78); }
.map{ border:1px solid var(--hair); aspect-ratio:1/1; }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.9); }

/* ---------- Contact ---------- */
.contact{ display:grid; gap:clamp(34px,5vw,70px); }
@media(min-width:900px){ .contact{ grid-template-columns:1.05fr 1fr; } }
.cline{ display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--hair); }
.cline .k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); min-width:104px; padding-top:5px; }
.cline a:hover{ text-decoration:underline; text-underline-offset:4px; }
.contact-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }

/* ---------- Footer ---------- */
.ftr{ border-top:1px solid var(--hair); padding-top:clamp(56px,7vw,92px); }
.ftr-grid{ display:grid; gap:40px; padding-bottom:54px; }
@media(min-width:780px){ .ftr-grid{ grid-template-columns:1.5fr 1fr 1fr; } }
.ftr h4{ font-family:var(--mono); font-size:.66rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); margin-bottom:20px; }
.ftr li{ margin-bottom:11px; }
.ftr a{ color:rgba(244,241,234,.74); font-size:.95rem; }
.ftr a:hover{ color:var(--bone); }
.ftr-bot{
  border-top:1px solid var(--hair); padding:22px 0 34px; display:flex; flex-wrap:wrap; gap:14px;
  justify-content:space-between; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--mute);
}

/* ---------- Reveal ---------- */
.rev{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rev.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rev{ opacity:1; transform:none; }
  .hero h1 .ln b{ transform:none; } .hero .lede,.hero .cta{ opacity:1; }
}

/* ==========================================================================
   v2 — 3D division chooser + division pages
   ========================================================================== */

/* ---------- Hub hero ---------- */
.hub{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:110px 0 40px; }
#frame{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hub::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(70% 55% at 50% 42%, rgba(244,241,234,.07), transparent 70%);
}
.hub-in{ position:relative; z-index:2; width:100%; }
.hub h1{ margin-top:22px; }
.hub h1 .ln{ display:block; overflow:hidden; }
.hub h1 .ln b{ display:block; font-weight:400; transform:translateY(102%); animation:up 1s var(--ease) forwards; }
.hub h1 .ln:nth-child(2) b{ animation-delay:.09s } .hub h1 .ln:nth-child(3) b{ animation-delay:.18s }
.hub .lede{ margin-top:24px; opacity:0; animation:fade .9s var(--ease) .4s forwards; }

.pick-label{
  margin-top:clamp(34px,4.5vw,54px); font-family:var(--mono); font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--mute); opacity:0; animation:fade .9s var(--ease) .55s forwards;
}

/* ---------- 3D doors ---------- */
.stage{ perspective:1400px; margin-top:18px; opacity:0; animation:fade 1s var(--ease) .62s forwards; }
.doors{
  display:grid; gap:12px; transform-style:preserve-3d; transition:transform .5s var(--ease);
  will-change:transform;
}
@media(min-width:860px){ .doors{ grid-template-columns:repeat(3,1fr); gap:16px; } }

.door{
  position:relative; display:flex; align-items:flex-end; min-height:clamp(190px,25vh,300px);
  padding:22px; overflow:hidden; border:1px solid var(--hair); background:var(--ink-2);
  transform-style:preserve-3d; transition:transform .55s var(--ease), border-color .45s, box-shadow .55s var(--ease);
}
.door-img{ position:absolute; inset:0; }
.door-img img{ width:100%; height:100%; object-fit:cover; opacity:.30; transition:opacity .7s var(--ease), transform 1.4s var(--ease); transform:scale(1.05); }
.door::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,12,.22),rgba(10,10,12,.9)); }
.door-body{ position:relative; z-index:2; display:flex; flex-direction:column; width:100%; }
.door-n{ font-family:var(--mono); font-size:.64rem; letter-spacing:.28em; color:var(--acc); }
.door-t{ font-family:var(--display); font-size:clamp(1.7rem,2.6vw,2.4rem); line-height:1.04; margin-top:10px; }
.door-name{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,241,234,.5); margin-top:8px; }
.door-go{
  margin-top:18px; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc); display:inline-flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.door-go em{ font-style:normal; transition:transform .4s var(--ease); }
.door::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--acc); z-index:3;
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.door:hover, .door:focus-visible{ transform:translateZ(46px) translateY(-6px); border-color:transparent; box-shadow:0 30px 70px rgba(0,0,0,.55); }
.door:hover .door-img img, .door:focus-visible .door-img img{ opacity:.52; transform:scale(1); }
.door:hover .door-go, .door:focus-visible .door-go{ opacity:1; transform:none; }
.door:hover .door-go em{ transform:translate(3px,-3px); }
.door:hover::before, .door:focus-visible::before{ transform:scaleX(1); }

.hub-foot{
  margin-top:clamp(26px,3.4vw,40px); display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
  opacity:0; animation:fade .9s var(--ease) .8s forwards;
}
.hub-foot a{ color:var(--bone); }
.hub-foot a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- Division page ---------- */
.p-hero{ position:relative; min-height:78svh; display:flex; align-items:flex-end; overflow:hidden; }
.p-hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.36; }
.p-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,12,.8),rgba(10,10,12,.3) 45%,rgba(10,10,12,.97)); }
.p-hero-in{ position:relative; z-index:2; width:100%; padding:150px 0 50px; }
.p-badge{ display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--acc); }
.p-badge::before{ content:""; width:26px; height:2px; background:var(--acc); }
.p-hero h1{ font-size:clamp(3rem,9vw,7rem); margin:20px 0 0; }
.p-hero .kick{ font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acc); margin-top:16px; }
.p-hero .lede{ margin-top:24px; }
.p-name{ margin-top:30px; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,241,234,.55); }

.intro-block{ max-width:74ch; font-size:clamp(1.12rem,1.7vw,1.5rem); line-height:1.6; color:rgba(244,241,234,.86); font-family:var(--display); }

.svc-grid{ display:grid; gap:1px; background:var(--hair); }
@media(min-width:660px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc{ background:var(--ink); padding:34px 28px 40px; transition:background .4s var(--ease); }
.svc:hover{ background:var(--ink-2); }
.svc i{ font-family:var(--mono); font-size:.66rem; font-style:normal; letter-spacing:.26em; color:var(--acc); }
.svc h3{ font-size:1.32rem; margin:16px 0 10px; }
.svc p{ font-size:.94rem; color:rgba(244,241,234,.6); }

.shots{ display:grid; gap:14px; }
@media(min-width:600px){ .shots{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .shots{ grid-template-columns:repeat(4,1fr); } }
.shot{ margin:0; overflow:hidden; }
.shot img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform 1.1s var(--ease), opacity .5s; opacity:.9; }
.shot:hover img{ transform:scale(1.05); opacity:1; }

.others{ display:grid; gap:14px; }
@media(min-width:760px){ .others{ grid-template-columns:repeat(2,1fr); } }
.other{ position:relative; display:flex; align-items:center; gap:20px; padding:18px; border:1px solid var(--hair); overflow:hidden; transition:border-color .4s, background .4s; }
.other:hover{ border-color:var(--acc2); background:var(--ink-2); }
.other-img{ width:96px; height:96px; flex:none; overflow:hidden; }
.other-img img{ width:100%; height:100%; object-fit:cover; opacity:.6; transition:opacity .5s, transform 1s var(--ease); }
.other:hover .other-img img{ opacity:1; transform:scale(1.06); }
.other-body{ display:flex; flex-direction:column; gap:5px; }
.other-body i{ font-family:var(--mono); font-size:.62rem; font-style:normal; letter-spacing:.26em; color:var(--acc2); }
.other-body b{ font-family:var(--display); font-weight:400; font-size:1.5rem; }
.other-body span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,241,234,.5); }
.other-go{ margin-left:auto; font-size:1rem; color:var(--acc2); transition:transform .4s var(--ease); }
.other:hover .other-go{ transform:translate(4px,-4px); }

.cta-band{ border:1px solid var(--hair); padding:clamp(34px,5vw,64px); background:var(--ink-2); }
.cta-band h2{ font-size:clamp(1.9rem,4vw,3rem); }
.cta-band .row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

@media (prefers-reduced-motion: reduce){
  .hub h1 .ln b{ transform:none; }
  .hub .lede,.pick-label,.stage,.hub-foot{ opacity:1; animation:none; }
  .door:hover,.door:focus-visible{ transform:none; }
}

/* Hub fit: keep the chooser above the fold on laptop heights */
.hub h1.d-xl{ font-size:clamp(2.6rem, 6.4vw, 5.4rem); }
.hub .lede{ margin-top:18px; }
.hub .pick-label{ margin-top:clamp(22px,3vw,34px); }
.door{ min-height:clamp(168px,21vh,236px); padding:20px; }
.hub{ padding:104px 0 30px; }
.hub-foot{ margin-top:clamp(18px,2.4vw,28px); }
@media(max-height:760px){
  .hub h1.d-xl{ font-size:clamp(2.2rem,5vw,3.9rem); }
  .door{ min-height:150px; }
}

/* ==========================================================================
   v3 — scroll scene, pinned showcase, page transitions
   ========================================================================== */

/* Page transition curtain */
.curtain{
  position:fixed; inset:0; z-index:300; background:var(--ink); pointer-events:none;
  opacity:1; transition:opacity .55s var(--ease);
}
body.ready .curtain{ opacity:0; }
body.leaving .curtain{ opacity:1; transition-duration:.34s; }
.curtain-mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--display); font-size:1.5rem; letter-spacing:.02em; color:var(--bone);
  opacity:.9; transition:opacity .4s var(--ease);
}
body.ready .curtain-mark{ opacity:0; }

/* Header auto-hide */
.hdr{ transform:translateY(0); transition:background .4s var(--ease), border-color .4s, transform .45s var(--ease); }
.hdr.hide{ transform:translateY(-100%); }

/* ---------- Scroll scene ---------- */
.scene{ position:relative; height:240vh; }
@media(max-width:900px){ .scene{ height:200vh; } }
.scene-pin{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; padding:96px 0 34px;
}
#frame{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.scene-pin::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(64% 52% at 46% 44%, rgba(244,241,234,.075), transparent 72%);
}
.scene-in{ position:relative; z-index:2; width:100%; }

.scene-title{ will-change:transform, opacity; }
.scene-title h1{ margin-top:20px; }
.scene-title h1 .ln{ display:block; overflow:hidden; }
.scene-title h1 .ln b{ display:block; font-weight:400; transform:translateY(102%); animation:up 1s var(--ease) forwards; }
.scene-title h1 .ln:nth-child(2) b{ animation-delay:.08s } .scene-title h1 .ln:nth-child(3) b{ animation-delay:.16s }
.scene-title .lede{ margin-top:18px; opacity:0; animation:fade .9s var(--ease) .4s forwards; }

.pick-label{
  margin-top:clamp(20px,2.6vw,30px); font-family:var(--mono); font-size:.64rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--mute); will-change:opacity, transform;
}
.stage{ perspective:1500px; margin-top:16px; will-change:transform, opacity; }
.doors{ display:grid; gap:12px; transform-style:preserve-3d; transition:transform .5s var(--ease); }
@media(min-width:860px){ .doors{ grid-template-columns:repeat(3,1fr); gap:16px; } }

.scene-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mute);
  display:flex; flex-direction:column; align-items:center; gap:10px; transition:opacity .4s var(--ease);
}
.scene-cue span{ display:block; width:1px; height:40px; background:linear-gradient(var(--mute),transparent); }

/* ---------- Pinned showcase ---------- */
.showcase{ position:relative; }
.showcase-grid{ display:grid; gap:0; }
@media(min-width:980px){ .showcase-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(40px,5vw,90px); } }

.show-media{ display:none; }
@media(min-width:980px){
  .show-media{
    display:block; position:sticky; top:0; height:100svh; align-self:start;
    display:flex; align-items:center;
  }
}
.show-stack{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; }
.show-stack img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity .9s var(--ease), transform 1.4s var(--ease);
}
.show-stack img.on{ opacity:1; transform:scale(1); }
.show-stack .cap{
  position:absolute; left:0; bottom:0; padding:14px 18px; background:var(--ink);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
}

.show-panel{ padding-block:clamp(70px,13vh,150px); border-top:1px solid var(--hair); }
.show-panel:first-child{ border-top:0; }
.show-panel .mobile-img{ margin-bottom:26px; }
.show-panel .mobile-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media(min-width:980px){ .show-panel .mobile-img{ display:none; } }
.show-panel h2{ font-size:clamp(2rem,4vw,3.2rem); }
.show-panel .num{ font-family:var(--mono); font-size:.68rem; letter-spacing:.28em; color:var(--mute); }
.show-panel .brandline{ display:flex; align-items:center; gap:12px; margin:18px 0 8px; }
.show-panel .brandline .bar{ width:26px; height:3px; }
.show-panel .brandline span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
.show-panel .kick{ font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; margin-top:12px; }
.show-panel .lede{ margin-top:20px; }
.show-panel ul{ margin-top:24px; display:grid; gap:9px; }
.show-panel li{ font-size:.95rem; color:rgba(244,241,234,.66); padding-left:20px; position:relative; }
.show-panel li::before{ content:""; position:absolute; left:0; top:.78em; width:9px; height:1px; background:currentColor; opacity:.6; }
.show-panel .go{ margin-top:30px; display:inline-flex; }

/* Refined link underline for buttons */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:""; position:absolute; inset:0; background:var(--bone); transform:translateY(101%);
  transition:transform .45s var(--ease); z-index:-1;
}
.btn:hover::after{ transform:translateY(0); }

/* Gallery stagger */
.shot{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.shots.in .shot{ opacity:1; transform:none; }
.shots.in .shot:nth-child(2){ transition-delay:.08s }
.shots.in .shot:nth-child(3){ transition-delay:.16s }
.shots.in .shot:nth-child(4){ transition-delay:.24s }

/* Division hero parallax */
.p-hero img.bg{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .scene{ height:auto; }
  .scene-pin{ position:relative; height:auto; min-height:auto; }
  .scene-title h1 .ln b{ transform:none; }
  .scene-title .lede,.pick-label,.stage{ opacity:1; animation:none; transform:none; }
  .show-media{ position:relative; height:auto; }
  .shot{ opacity:1; transform:none; }
  .curtain{ display:none; }
}

.scene-title h1.d-xl{ font-size:clamp(2.6rem, 6.4vw, 5.4rem); }
@media(max-height:780px){ .scene-title h1.d-xl{ font-size:clamp(2.2rem,5vw,4rem); } .door{ min-height:152px; } }

/* JS drives the scene; kill the legacy entrance animations so inline styles win */
.stage, .pick-label{ animation:none !important; opacity:0; }
@media (prefers-reduced-motion: reduce){ .stage, .pick-label{ opacity:1 !important; } }

/* Mobile scene fit */
@media(max-width:900px){
  .scene-pin{ justify-content:flex-start; padding:104px 0 28px; }
  .scene-title h1.d-xl{ font-size:clamp(2rem,7.6vw,2.9rem); }
  .scene-title .lede{ font-size:.98rem; margin-top:14px; }
  .door{ min-height:120px; padding:16px; }
  .door-t{ font-size:1.5rem; }
  .doors{ gap:10px; }
  .scene-cue{ display:none; }
}

@media(max-width:900px) and (max-height:760px){
  .scene-pin{ padding:92px 0 22px; }
  .scene-title h1.d-xl{ font-size:1.95rem; }
  .scene-title .lede{ font-size:.9rem; margin-top:12px; }
  .pick-label{ margin-top:16px; }
  .door{ min-height:96px; padding:14px; }
  .door-t{ font-size:1.28rem; }
  .door-name{ font-size:.56rem; }
}

/* ==========================================================================
   v4 — centered scene + richer entrance motion
   ========================================================================== */
.scene-in{ text-align:center; }
.scene-in .eyebrow{ justify-content:center; }
.scene-in .eyebrow::before{ width:clamp(24px,4vw,46px); }
.scene-in .lede{ margin-left:auto; margin-right:auto; max-width:46ch; }
.scene-title h1{ margin-inline:auto; }

/* line reveal with blur settle */
.scene-title h1 .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.scene-title h1 .ln b{
  display:block; font-weight:400; opacity:0;
  transform:translateY(104%) scale(1.04); filter:blur(14px);
  animation:lineIn 1.25s var(--ease) forwards;
}
.scene-title h1 .ln:nth-child(1) b{ animation-delay:.12s; }
.scene-title h1 .ln:nth-child(2) b{ animation-delay:.26s; }
.scene-title h1 .ln:nth-child(3) b{ animation-delay:.40s; }
@keyframes lineIn{
  0%   { opacity:0; transform:translateY(104%) scale(1.04); filter:blur(14px); }
  55%  { opacity:1; filter:blur(2px); }
  100% { opacity:1; transform:none; filter:blur(0); }
}

/* eyebrow settles its tracking */
.scene-in .eyebrow{ opacity:0; animation:eyeIn 1.1s var(--ease) .05s forwards; }
@keyframes eyeIn{
  from{ opacity:0; letter-spacing:.62em; transform:translateY(8px); }
  to  { opacity:1; letter-spacing:.3em; transform:none; }
}

.scene-title .lede{ opacity:0; transform:translateY(16px); animation:ledeIn 1s var(--ease) .72s forwards; }
@keyframes ledeIn{ to{ opacity:1; transform:none; } }

/* doors animate individually (JS drives opacity/offset) */
.door{ will-change:transform, opacity; }

/* centered label + cue */
.pick-label{ text-align:center; }

@media (prefers-reduced-motion: reduce){
  .scene-title h1 .ln b{ opacity:1; transform:none; filter:none; animation:none; }
  .scene-in .eyebrow, .scene-title .lede{ opacity:1; animation:none; transform:none; }
}

/* centered door content to match the centered scene */
.scene-in .door{ align-items:center; justify-content:center; text-align:center; }
.scene-in .door-body{ align-items:center; }
.scene-in .door-go{ justify-content:center; }

/* eyebrow removed from the scene: rebalance the stack */
.scene-title h1{ margin-top:0; }

/* ==========================================================================
   v5 — architectural backdrop, tighter rhythm, cleaner map
   ========================================================================== */
.scene-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.scene-bg img{
  width:100%; height:100%; object-fit:cover; opacity:.20;
  transform:scale(1.08); animation:bgDrift 26s ease-in-out infinite alternate;
  filter:grayscale(.3) contrast(1.05);
}
@keyframes bgDrift{ from{ transform:scale(1.08) translate3d(0,0,0); } to{ transform:scale(1.16) translate3d(-1.5%,-1.5%,0); } }
.scene-pin::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(62% 52% at 50% 46%, rgba(10,10,12,.28), rgba(10,10,12,.86) 78%),
    linear-gradient(180deg, rgba(10,10,12,.88), rgba(10,10,12,.35) 40%, rgba(10,10,12,.96));
}
#frame{ z-index:1; opacity:.9; }

/* Vertical rhythm */
:root{ --sec: clamp(72px, 8vw, 128px); }
.sec--tight-bottom{ padding-bottom:0; }
.sec--tight-bottom .sec-head{ margin-bottom:0; }
.showcase .show-panel:first-child{ padding-top:clamp(54px,7vh,92px); }
.facts{ margin-top:clamp(36px,4.4vw,56px); }

/* Map: proper proportion, calm treatment, no inverted mush */
.terr{ align-items:stretch; }
.map{ border:1px solid var(--hair); aspect-ratio:4/3; position:relative; overflow:hidden; }
@media(min-width:940px){ .map{ aspect-ratio:auto; height:100%; min-height:380px; } }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) brightness(.88) contrast(1.05); }
.map::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 70px rgba(10,10,12,.7);
}
.map-note{
  margin-top:10px; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute);
}
.terr-list li{ padding:15px 14px; }

/* layer order: photo, vignette, wireframe, content */
.scene-bg{ z-index:0; }
.scene-pin::after{ z-index:1; }
#frame{ z-index:2; opacity:1; }
.scene-in{ z-index:3; }
.scene-cue{ z-index:4; }

/* Crew strip — real Mormont team photography */
.crew{ margin-top:clamp(34px,4.5vw,58px); }
.crew-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:720px){ .crew-row{ grid-template-columns:repeat(4,1fr); gap:14px; } }
.crew-img{ margin:0; overflow:hidden; background:var(--ink-2); }
.crew-img img{
  width:100%; aspect-ratio:1; object-fit:cover; object-position:center top;
  filter:grayscale(1) contrast(1.05) brightness(.95);
  transition:filter .6s var(--ease), transform 1s var(--ease);
}
.crew-img:hover img{ filter:grayscale(0) contrast(1) brightness(1); transform:scale(1.03); }
.crew-cap{
  margin-top:14px; font-family:var(--mono); font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mute);
}

/* real photography is landscape: stop over-cropping it */
.shot img{ aspect-ratio:4/3; }
.show-stack{ aspect-ratio:4/3; }
@media(min-width:980px){ .show-stack{ aspect-ratio:4/3; } }

/* RBQ licence badge */
.rbq{ display:inline-flex; align-items:stretch; margin-top:22px; border:1px solid var(--hair); }
.rbq-k{
  padding:8px 11px; font-family:var(--mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute); border-right:1px solid var(--hair);
}
.rbq-n{ padding:8px 12px; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--bone); }
.rbq-note{ margin-top:10px; font-size:.78rem; line-height:1.5; color:rgba(244,241,234,.48); max-width:42ch; }

/* Stills from the company's own reels are portrait */
.shot img{ aspect-ratio:4/5; }

/* Client reels (official Instagram embeds) */
.reels{ display:grid; gap:18px; }
@media(min-width:760px){ .reels{ grid-template-columns:repeat(3,1fr); } }
.reel{ margin:0; border:1px solid var(--hair); background:var(--ink-2); padding:10px; }
.reel .instagram-media{ background:#000 !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }
.reel figcaption{ padding:12px 6px 4px; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }

/* ==========================================================================
   v6 — clear hero. Photo, headline, three divisions. No gating, no WebGL.
   ========================================================================== */
.hero2{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero2-bg{ position:absolute; inset:0; z-index:0; }
.hero2-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; opacity:.62; transform:scale(1.02); animation:heroDrift 24s ease-in-out infinite alternate; }
@keyframes heroDrift{ to{ transform:scale(1.08); } }
.hero2::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.72) 42%, rgba(10,10,12,.28) 100%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 30%, rgba(10,10,12,.92) 100%);
}
.hero2-in{ position:relative; z-index:2; width:100%; padding:150px 0 40px; display:grid; gap:clamp(36px,5vw,64px); }
.hero2-copy{ max-width:640px; }
.hero2 h1{ font-size:clamp(3rem,7vw,6rem); line-height:.96; letter-spacing:-.025em; margin-top:22px; }
.hero2 h1 .ln{ display:block; overflow:hidden; }
.hero2 h1 .ln b{ display:block; font-weight:400; transform:translateY(102%); animation:up .95s var(--ease) forwards; }
.hero2 h1 .ln:nth-child(2) b{ animation-delay:.08s } .hero2 h1 .ln:nth-child(3) b{ animation-delay:.16s }
.hero2 .lede{ margin-top:22px; max-width:50ch; opacity:0; animation:fade .8s var(--ease) .35s forwards; }
.hero2-cta{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation:fade .8s var(--ease) .48s forwards; }
.hero2 .eyebrow{ opacity:0; animation:fade .8s var(--ease) .1s forwards; }

.hero2-doors{ opacity:0; animation:fade 1s var(--ease) .6s forwards; }
.pick-label2{
  margin-bottom:12px; font-family:var(--mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mute);
}
.hero2 .doors{ display:grid; gap:12px; transform:none !important; }
@media(min-width:860px){ .hero2 .doors{ grid-template-columns:repeat(3,1fr); gap:14px; } }
.hero2 .door{
  opacity:1 !important; transform:none; min-height:168px; padding:20px; align-items:flex-end; text-align:left;
  background:rgba(18,18,22,.72); border:1px solid rgba(244,241,234,.16); backdrop-filter:blur(6px);
  transition:transform .45s var(--ease), border-color .35s, background .35s;
}
.hero2 .door-body{ align-items:flex-start; }
.hero2 .door-go{ justify-content:flex-start; }
.hero2 .door-img img{ opacity:.38; }
.hero2 .door::after{ background:linear-gradient(180deg,rgba(10,10,12,.15),rgba(10,10,12,.85)); }
.hero2 .door:hover, .hero2 .door:focus-visible{ transform:translateY(-6px); border-color:var(--acc); background:rgba(18,18,22,.55); box-shadow:0 24px 50px rgba(0,0,0,.45); }
.hero2 .door:hover .door-img img{ opacity:.62; }
.hero2 .door-t{ font-size:clamp(1.5rem,2.2vw,2rem); }
.hero2 .door-go{ margin-top:14px; }

@media(max-width:860px){
  .hero2-in{ padding:118px 0 30px; }
  .hero2 h1{ font-size:clamp(2.5rem,11vw,3.6rem); }
  .hero2 .door{ min-height:126px; }
  .hero2-bg img{ object-position:60% center; }
}
@media(max-width:860px) and (max-height:760px){
  .hero2 .lede{ display:none; }
  .hero2 .door{ min-height:104px; padding:14px; }
  .hero2 .door-t{ font-size:1.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .hero2 h1 .ln b{ transform:none; animation:none; }
  .hero2 .lede,.hero2-cta,.hero2 .eyebrow,.hero2-doors{ opacity:1; animation:none; }
  .hero2-bg img{ animation:none; }
}
.hero2-in{ padding:136px 0 34px; gap:clamp(28px,4vw,48px); }
.hero2 h1{ font-size:clamp(2.8rem,6.4vw,5.4rem); }
.hero2 .door{ min-height:150px; }
@media(max-height:820px){ .hero2 h1{ font-size:clamp(2.6rem,5.6vw,4.6rem); } .hero2 .lede{ margin-top:16px; } .hero2-cta{ margin-top:22px; } .hero2 .door{ min-height:132px; } }

/* ==========================================================================
   v7 — centered, cinematic hero
   ========================================================================== */
.hero2{ align-items:center; }
.hero2-in{ text-align:center; padding:132px 0 30px; gap:clamp(30px,4.5vw,56px); }
.hero2-copy{ max-width:980px; margin:0 auto; }
.hero2 .eyebrow{ justify-content:center; }
.hero2 .lede{ margin-left:auto; margin-right:auto; max-width:56ch; }
.hero2-cta{ justify-content:center; }

/* one line of type on wide screens, stacked below */
.hero2 h1{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 .28em; font-size:clamp(2.7rem,6.2vw,5.6rem); line-height:1; margin-top:22px; }
.hero2 h1 .w{ display:block; overflow:hidden; }
.hero2 h1 .w b{ display:block; font-weight:400; transform:translateY(105%); animation:up 1s var(--ease) forwards; }
.hero2 h1 .w:nth-child(2) b{ animation-delay:.1s } .hero2 h1 .w:nth-child(3) b{ animation-delay:.2s }
.hero2 h1 .it b{ font-style:italic; color:rgba(244,241,234,.78); }
@media(max-width:1100px){ .hero2 h1{ flex-direction:column; gap:0; } }

/* moving light + film grain over the photo */
.hero2-light{
  position:absolute; inset:-20%; z-index:1; pointer-events:none;
  background:radial-gradient(38% 34% at 50% 40%, rgba(244,241,234,.14), transparent 70%);
  animation:lightDrift 18s ease-in-out infinite alternate; filter:blur(40px);
}
@keyframes lightDrift{ from{ transform:translate(-6%, -3%); } to{ transform:translate(6%, 4%); } }
.hero2-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero2::after{
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(10,10,12,.35), rgba(10,10,12,.86) 75%),
    linear-gradient(180deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,.12) 35%, rgba(10,10,12,.94) 100%);
}
.hero2-bg img{ opacity:.7; object-position:center 45%; }
.hero2-in{ z-index:3; }

/* cards: bigger photo presence, accent glow */
.pick-label2{ text-align:center; margin-bottom:14px; }
.hero2 .door{
  min-height:176px; padding:22px; background:rgba(14,14,18,.55); border-color:rgba(244,241,234,.14);
  position:relative; isolation:isolate;
}
.hero2 .door-img img{ opacity:.5; transform:scale(1.04); transition:opacity .6s var(--ease), transform 1.6s var(--ease); }
.hero2 .door::after{ background:linear-gradient(180deg,rgba(10,10,12,.05) 0%,rgba(10,10,12,.55) 55%,rgba(10,10,12,.92) 100%); }
.hero2 .door::before{ height:3px; box-shadow:0 0 24px var(--acc); }
.hero2 .door:hover, .hero2 .door:focus-visible{ transform:translateY(-8px); border-color:rgba(244,241,234,.28); box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 0 1px var(--acc) inset; }
.hero2 .door:hover .door-img img{ opacity:.78; transform:scale(1); }
.hero2 .door-n{ font-size:.66rem; }
.hero2 .door-t{ font-size:clamp(1.6rem,2.4vw,2.2rem); margin-top:8px; }
.hero2 .door-name{ color:rgba(244,241,234,.6); }

@media(max-height:820px){
  .hero2-in{ padding:118px 0 26px; }
  .hero2 h1{ font-size:clamp(2.4rem,5.2vw,4.6rem); }
  .hero2 .door{ min-height:150px; }
}
@media(max-width:860px){
  .hero2-in{ padding:110px 0 28px; }
  .hero2 h1{ font-size:clamp(2.4rem,10.5vw,3.4rem); }
  .hero2 .door{ min-height:118px; padding:16px; }
  .hero2 .door-t{ font-size:1.45rem; }
}
@media (prefers-reduced-motion: reduce){
  .hero2 h1 .w b{ transform:none; animation:none; }
  .hero2-light{ animation:none; }
}
@media(min-height:821px){ .hero2 h1{ font-size:clamp(3rem,7vw,6.4rem); } .hero2 .door{ min-height:192px; } .hero2-in{ gap:clamp(34px,5vw,64px); } }

/* v8 — neater hero: no eyebrow, one weight, tighter stack */
.hero2 h1{ margin-top:0; gap:0 .3em; }
.hero2 h1 .it b{ font-style:normal; color:inherit; }
.hero2 .lede{ margin-top:26px; font-size:clamp(1rem,1.2vw,1.12rem); color:rgba(244,241,234,.66); }
.hero2-cta{ margin-top:32px; }

/* ==========================================================================
   v9 — triptych hero: three video columns, one per division
   ========================================================================== */
.tri{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:var(--ink); }
.tri-cols{ position:absolute; inset:0; display:flex; }
.tri-col{
  position:relative; flex:1 1 0; min-width:0; display:flex; align-items:flex-end; overflow:hidden;
  border-right:1px solid rgba(244,241,234,.12); transition:flex-grow .8s var(--ease);
  opacity:0; transform:translateY(24px); animation:colIn 1.1s var(--ease) forwards; animation-delay:calc(.12s * var(--i));
}
.tri-col:last-child{ border-right:0; }
@keyframes colIn{ to{ opacity:1; transform:none; } }
.tri-media{ position:absolute; inset:0; }
.tri-media video, .tri-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.9) contrast(1.04) brightness(.72); transform:scale(1.04);
  transition:filter .7s var(--ease), transform 1.6s var(--ease);
}
.tri-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.05) 40%, rgba(10,10,12,.35) 70%, rgba(10,10,12,.96) 100%);
  transition:opacity .6s var(--ease);
}
.tri-body{ position:relative; z-index:2; padding:0 clamp(20px,2.6vw,40px) clamp(28px,4vh,44px); display:flex; flex-direction:column; width:100%; }
.tri-n{ font-family:var(--mono); font-size:.66rem; letter-spacing:.3em; color:var(--acc); }
.tri-t{ font-family:var(--display); font-size:clamp(1.9rem,3.2vw,3rem); line-height:1; margin-top:10px; color:var(--bone); }
.tri-name{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,241,234,.6); margin-top:9px; }
.tri-go{
  margin-top:16px; font-family:var(--mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acc);
  display:inline-flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.tri-go em{ font-style:normal; }
.tri-col::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--acc); z-index:3;
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); box-shadow:0 0 30px var(--acc);
}
.tri-cols:hover .tri-col{ flex-grow:.82; }
.tri-cols .tri-col:hover, .tri-cols .tri-col:focus-visible{ flex-grow:1.5; }
.tri-col:hover .tri-media video, .tri-col:hover .tri-media img, .tri-col:focus-visible .tri-media video{ filter:saturate(1) contrast(1.04) brightness(.95); transform:scale(1); }
.tri-col:hover .tri-shade{ opacity:.8; }
.tri-col:hover .tri-go, .tri-col:focus-visible .tri-go{ opacity:1; transform:none; }
.tri-col:hover::before, .tri-col:focus-visible::before{ transform:scaleX(1); }

/* dark veil so the headline reads over any footage */
.tri-veil{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(52% 40% at 50% 42%, rgba(10,10,12,.62), rgba(10,10,12,0) 100%);
}

/* headline block sits over the columns, doesn't block hover on the columns below it */
.tri-copy{
  position:absolute; left:0; right:0; top:44%; transform:translateY(-50%); z-index:4; pointer-events:none;
  text-align:center; padding:0 var(--gutter);
}
.tri-copy h1{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 .3em; font-size:clamp(2.6rem,6.6vw,6.2rem); line-height:1; letter-spacing:-.02em; text-shadow:0 2px 40px rgba(0,0,0,.55); }
.tri-copy h1 .w{ display:block; overflow:hidden; }
.tri-copy h1 .w b{ display:block; font-weight:400; transform:translateY(105%); animation:up 1.05s var(--ease) forwards; animation-delay:.35s; }
.tri-copy h1 .w:nth-child(2) b{ animation-delay:.45s } .tri-copy h1 .w:nth-child(3) b{ animation-delay:.55s }
.tri-copy .lede{ margin:20px auto 0; max-width:54ch; color:rgba(244,241,234,.8); text-shadow:0 1px 20px rgba(0,0,0,.6); opacity:0; animation:fade .9s var(--ease) .8s forwards; }
.tri-cta{ margin-top:26px; display:flex; justify-content:center; pointer-events:auto; opacity:0; animation:fade .9s var(--ease) .95s forwards; }
.tri-cta .btn{ box-shadow:0 10px 30px rgba(0,0,0,.4); }

.tri-hint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:4; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(244,241,234,.55);
  opacity:0; animation:fade 1s var(--ease) 1.3s forwards;
}
.tri-hint i{ width:1px; height:26px; background:linear-gradient(var(--bone), transparent); display:block; }

@media(max-width:860px){
  .tri{ min-height:100svh; height:auto; }
  .tri-cols{ position:relative; flex-direction:column; min-height:100svh; }
  .tri-col{ min-height:33.4svh; border-right:0; border-bottom:1px solid rgba(244,241,234,.12); }
  .tri-cols:hover .tri-col, .tri-cols .tri-col:hover{ flex-grow:1; }
  .tri-copy{ top:auto; bottom:auto; position:absolute; top:50%; }
  .tri-copy h1{ flex-direction:column; gap:0; font-size:clamp(2.2rem,10vw,3.2rem); }
  .tri-copy .lede{ display:none; }
  .tri-t{ font-size:1.5rem; }
  .tri-body{ padding:0 18px 18px; }
  .tri-hint{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .tri-col{ opacity:1; transform:none; animation:none; }
  .tri-copy h1 .w b{ transform:none; animation:none; }
  .tri-copy .lede, .tri-cta, .tri-hint{ opacity:1; animation:none; }
}

/* v9.1 — mobile hero: headline gets its own band above the three columns */
@media(max-width:860px){
  .tri{ display:flex; flex-direction:column; height:auto; min-height:100svh; }
  .tri-copy{ position:static; transform:none; padding:104px var(--gutter) 22px; }
  .tri-copy h1{ font-size:clamp(2.2rem,9.6vw,3rem); }
  .tri-cta{ margin-top:18px; }
  .tri-veil{ display:none; }
  .tri-cols{ position:relative; flex:1; min-height:0; }
  .tri-col{ min-height:148px; flex:1 1 0; }
  .tri-body{ padding:0 18px 16px; }
  .tri-t{ font-size:1.45rem; }
  .tri-go{ display:none; }
}
@media(max-width:860px){ .tri-copy{ order:-1; } .tri-col{ min-height:138px; } }

/* ==========================================================================
   v10 — clipping fix + warm palette + unified cinematic grade
   ========================================================================== */

/* 1. reveal mask no longer clips accents or descenders */
.tri-copy h1 .w, .hero2 h1 .w, .hero2 h1 .ln, .scene-title h1 .ln{
  padding:.08em .02em .2em; margin:-.08em -.02em -.2em;
}

/* 2. warm palette: charcoal instead of flat black, brass as the group colour */
:root{
  --ink:   #0D0C0B;
  --ink-2: #151412;
  --ink-3: #1E1C19;
  --bone:  #F2ECE2;
  --mute:  #948C80;
  --hair:  rgba(242,236,226,.13);
  --brass: #C9A46B;
  --brass-2: #E3C891;
  --construction: #E8CF3F;
  --design:       #C98A5E;
  --dev:          #86AFA3;
}
body{ background:var(--ink); color:var(--bone); }
::selection{ background:var(--brass); color:var(--ink); }

/* group accent on the shared details */
.eyebrow{ color:var(--brass); }
.eyebrow::before{ background:var(--brass); opacity:.7; }
.btn-solid{ background:linear-gradient(135deg,var(--brass-2),var(--brass)); border-color:var(--brass); color:#15120D; }
.btn-solid:hover{ background:transparent; color:var(--brass-2); border-color:var(--brass); }
.btn::after{ background:var(--brass); }
.nav a::after{ background:var(--brass); }
.lang button[aria-pressed="true"]{ color:var(--brass-2); }
.brand span{ color:var(--brass); opacity:.85; }
.fact i, .step i, .svc i{ color:var(--brass); }
.ftr h4{ color:var(--brass); }
.rbq{ border-color:rgba(201,164,107,.35); }
.rbq-k{ color:var(--brass); border-right-color:rgba(201,164,107,.35); }
.statement span{ color:rgba(242,236,226,.42); }
.cta-band{ background:linear-gradient(135deg, var(--ink-2), #1a1712); border-color:rgba(201,164,107,.22); }

/* 3. hero headline: warm metallic light across the type */
.tri-copy h1 .w b{
  background:linear-gradient(180deg, #FBF6EC 0%, #F2ECE2 45%, #D9C29A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 30px rgba(0,0,0,.55));
}
.tri-copy h1{ text-shadow:none; }
.tri-rule{ display:block; width:64px; height:1px; margin:24px auto 0; background:linear-gradient(90deg,transparent,var(--brass),transparent); opacity:0; animation:fade .9s var(--ease) .75s forwards; }

/* 4. one cinematic grade across three differently-lit clips */
.tri-media video, .tri-media img{ filter:saturate(.78) contrast(1.08) brightness(.66) sepia(.16); }
.tri-media::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:linear-gradient(180deg, rgba(201,164,107,.28), rgba(13,12,11,.2) 55%, rgba(13,12,11,.5));
}
.tri-col:hover .tri-media video, .tri-col:hover .tri-media img{ filter:saturate(1) contrast(1.05) brightness(.9) sepia(.04); }

/* per-division colour rising from the bottom of its column */
.tri-shade{
  background:
    linear-gradient(180deg, rgba(13,12,11,.6) 0%, rgba(13,12,11,.05) 38%, rgba(13,12,11,.3) 68%, rgba(13,12,11,.96) 100%);
}
.tri-col::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:55%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, color-mix(in srgb, var(--acc) 22%, transparent), transparent);
  opacity:.35; transition:opacity .7s var(--ease);
}
.tri-col:hover::after{ opacity:.9; }

/* big outlined numeral as texture behind each label */
.tri-body{ position:relative; }
.tri-body::before{
  content:attr(data-n); position:absolute; right:clamp(16px,2.2vw,34px); bottom:clamp(14px,3vh,34px);
  font-family:var(--display); font-size:clamp(4.5rem,9vw,8.5rem); line-height:.8; color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb, var(--acc) 55%, transparent); opacity:.35;
  transition:opacity .6s var(--ease), transform .8s var(--ease); pointer-events:none;
}
.tri-col:hover .tri-body::before{ opacity:.8; transform:translateY(-6px); }

/* dividers between columns pick up the brass */
.tri-col{ border-right-color:rgba(201,164,107,.18); }

/* 5. film grain across the whole hero for texture */
.tri::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media(max-width:860px){
  .tri-copy{ background:linear-gradient(180deg, var(--ink) 60%, #13110E); }
  .tri-body::before{ font-size:4.2rem; bottom:12px; }
}
@media (prefers-reduced-motion: reduce){ .tri-rule{ opacity:1; animation:none; } }

/* v10.1 — descender headroom for both the reveal mask and the gradient paint box */
.tri-copy h1 .w{ padding:.12em .04em .34em; margin:-.12em -.04em -.34em; }
.tri-copy h1 .w b{ padding:.12em 0 .3em; margin:-.12em 0 -.3em; }