/* =========================================================
   Monumental Events — main stylesheet
   Swiss / Scandinavian grid system: bold grotesque type, sharp
   geometry, mono index labels, flat color, strict rules. Navy
   is the one accent — used as solid blocks, not a tint.
   ========================================================= */

:root{
  --ink:        #101014;
  --ink-2:      #17181f;
  --ink-3:      #202230;
  --line:       rgba(255,255,255,0.16);
  --line-soft:  rgba(255,255,255,0.10);
  --line-on-light: rgba(16,16,20,0.14);

  /* brand accent — navy, used flat and bold, not tinted */
  --gold:       #29397a;
  --gold-light: #3d4f9e;
  --gold-deep:  #171f42;
  --ember:      #29397a;

  --paper:      #f7f6f1;
  --paper-2:    #edece3;
  --ink-text:   #101014;
  --muted:      #55565f;
  --muted-on-dark: #a9abb8;
  --cream:      #efede3;

  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --script:  var(--sans);
  --serif:   var(--display);

  --container: 1280px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0 0 .4em; letter-spacing:-0.01em; text-wrap:balance; line-height:1.05; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }

/* ---------- utility ---------- */
.section{ padding:130px 0; position:relative; }
.section--tight{ padding:80px 0; }
.section--dark{ background:var(--ink); color:#eceada; }
.section--panel{ background:var(--ink-2); color:#eceada; }
.section--cream{ background:var(--cream); }
.section--paper{ background:var(--paper); }

/* eyebrow — mono index label, tracked caps, a short tick mark, not a flourish */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px; font-weight:500;
}
.eyebrow::before{ content:"—"; opacity:.7; }
.eyebrow.on-light{ color:var(--gold); }
.section--dark .eyebrow, .section--panel .eyebrow{ color:#8b9cff; }

.heading-row{ max-width:760px; margin:0 0 60px; }
.heading-row.center{ margin-left:auto; margin-right:auto; text-align:center; }
.heading-row.center .eyebrow{ justify-content:center; }
.heading-row h2{ font-size:clamp(32px,4.4vw,54px); line-height:1.05; font-weight:600; }
.heading-row .lede{ color:var(--muted); font-size:18px; max-width:600px; font-weight:400; line-height:1.6; }
.section--dark .heading-row .lede, .section--panel .heading-row .lede{ color:var(--muted-on-dark); }

/* rule — a plain, confident bar. no ornament. */
.rule{ width:56px; height:3px; background:var(--gold); margin:0 auto; }
.heading-row:not(.center) .rule{ margin-left:0; }
.heading-row .rule{ margin-top:22px; margin-bottom:0; }

.gold{ color:var(--gold); }
.ember{ color:var(--gold); }
.serif-italic{ font-family:var(--sans); font-style:normal; font-weight:700; }
.script{ font-family:var(--sans); font-weight:700; font-style:normal; }

/* buttons — flat, sharp, no gradients, no shouting */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:16px 32px; border-radius:0; border:1px solid transparent;
  transition:all .3s var(--ease);
  white-space:nowrap;
}
.btn-gold{ background:var(--gold); color:#fff; }
.btn-gold:hover{ background:var(--gold-deep); transform:translateY(-2px); }
.btn-outline{ border-color:currentColor; color:inherit; }
.btn-outline:hover{ background:var(--ink-text); color:var(--paper); border-color:var(--ink-text); }
.section--dark .btn-outline:hover, .section--panel .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-line{ border-bottom:1px solid currentColor; padding:4px 0; font-family:var(--sans); font-weight:600; font-size:15px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- mono numbered list (replaces starred/ornamented bullet lists) ---------- */
.mono-list{ display:flex; flex-direction:column; margin-top:8px; }
.mono-list li{ display:grid; grid-template-columns:50px 1fr; gap:16px; padding:20px 0; border-top:1px solid var(--line-on-light); align-items:baseline; }
.mono-list li:last-child{ border-bottom:1px solid var(--line-on-light); }
.section--dark .mono-list li, .section--panel .mono-list li{ border-color:var(--line); }
.mono-list-idx{ font-family:var(--mono); font-size:13px; color:var(--gold); }
.mono-list li strong{ font-weight:700; }

/* ---------- top bar ---------- */
.topbar{
  background:var(--ink); color:var(--muted-on-dark); font-size:13px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:40px; }
.topbar a{ color:var(--muted-on-dark); }
.topbar-contacts{ display:flex; gap:24px; align-items:center; }
.topbar-contacts a:hover{ color:#fff; }
.topbar-social{ display:flex; gap:16px; }
.topbar-social a{ color:var(--muted-on-dark); font-size:12px; letter-spacing:.05em; }
.topbar-social a:hover{ color:#fff; }
@media (max-width:780px){ .topbar-social{ display:none; } .topbar-contacts{ gap:14px; font-size:11.5px; } }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  border-bottom:1px solid var(--line-soft);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(16,16,20,.92); backdrop-filter:blur(10px) saturate(140%);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand-icon{ height:34px; width:auto; }
.brand-word{
  font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.01em;
  color:#f4f3ee; white-space:nowrap;
}
.brand-word .dot{ color:var(--gold-light); }
.brand-footer{ margin-bottom:20px; }
.brand-footer .brand-icon{ height:38px; }
.brand-footer .brand-word{ font-size:19px; }

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:block; padding:14px 15px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:#dad8ce; transition:color .2s;
}
.main-nav > ul > li:hover > a, .main-nav > ul > li.current > a{ color:var(--gold-light); }
.main-nav .caret{ font-size:9px; margin-left:5px; opacity:.7; }

.has-dropdown .dropdown{
  position:absolute; top:100%; left:0; min-width:260px;
  background:var(--ink-2); border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .2s var(--ease); box-shadow:0 24px 48px rgba(0,0,0,.4);
}
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown li a{ display:block; padding:13px 16px; font-family:var(--sans); font-weight:500; font-size:15px; color:#dcdad1; }
.dropdown li a:hover{ background:rgba(255,255,255,.05); color:var(--gold-light); padding-left:20px; }

.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-cta .btn{ padding:11px 22px; font-size:13.5px; }
.nav-cta .btn-outline{ color:#fff; border-color:rgba(255,255,255,.4); }
.nav-cta .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.burger{ display:none; width:24px; height:16px; position:relative; background:none; border:0; }
.burger span{ position:absolute; left:0; right:0; height:2px; background:var(--gold-light); transition:all .3s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ top:14px; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1080px){
  .main-nav{ position:fixed; top:84px; right:0; left:0; height:calc(100vh - 84px); background:var(--ink); flex-direction:column; align-items:stretch;
    padding:20px; transform:translateX(100%); transition:transform .4s var(--ease); overflow-y:auto; }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; }
  .main-nav > ul > li > a{ padding:18px 6px; border-bottom:1px solid var(--line-soft); }
  .has-dropdown .dropdown{ position:static; opacity:1; visibility:visible; transform:none; display:none; border:0; background:transparent; box-shadow:none; padding:0 0 0 16px; }
  .has-dropdown.is-open .dropdown{ display:block; }
  .nav-cta .btn-outline{ display:none; }
  .burger{ display:block; }
}

/* ---------- hero — asymmetric, left-set, grid-referenced, real parallax ---------- */
.hero{
  position:relative; min-height:96vh; display:flex; align-items:flex-end;
  background:var(--ink); color:#f4f3ee; overflow:hidden;
}
.hero-stage{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-stage img{ width:100%; height:128%; object-fit:cover; object-position:center 25%; }
.hero-stage::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,16,20,.95) 0%, rgba(16,16,20,.78) 42%, rgba(16,16,20,.52) 100%);
}
.hero-tag{
  position:absolute; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:#eceada; border:1px solid var(--line); background:rgba(16,16,20,.4); backdrop-filter:blur(6px);
  padding:9px 15px; white-space:nowrap;
}
.hero-tag--a{ top:130px; right:5%; transform:rotate(3deg); }
.hero-tag--b{ top:210px; right:5%; transform:rotate(-2deg); color:var(--gold-light); border-color:rgba(61,79,158,.55); }
@media (max-width:900px){ .hero-tag{ display:none; } }
.hero-inner{ position:relative; z-index:2; padding:170px 0 0; text-align:left; width:100%; }
.hero-mark{ display:none; }
.hero .sub{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:22px; display:flex; align-items:center; gap:12px;
}
.hero-stack{ display:flex; flex-direction:column; margin:0 0 34px; }
.hero-line{ display:block; line-height:.92; letter-spacing:-.02em; font-weight:700; }
.hero-line--sm{ font-size:clamp(24px,3.4vw,42px); color:#f4f3ee; }
.hero-line--lg{ font-size:clamp(64px,12vw,176px); margin:2px 0; }
.hero-bottom{ padding-bottom:90px; }
@media (max-width:560px){ .hero-bottom{ padding-bottom:150px; } }
.hero p.desc{ max-width:520px; margin:0 0 40px; color:#c9c6ba; font-size:18px; font-weight:400; padding-top:20px; border-top:1px solid var(--line-soft); }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:560px){ .hero-ctas{ flex-direction:column; align-items:stretch; } .hero-ctas .btn{ justify-content:center; } }
.hero-scroll{ position:absolute; right:32px; bottom:28px; z-index:2; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-on-dark); display:flex; flex-direction:row-reverse; align-items:center; gap:12px; }
.hero-scroll::after{ content:""; width:40px; height:1px; background:linear-gradient(90deg,var(--gold-light),transparent); }
@media (max-width:700px){ .hero-scroll{ display:none; } }

/* ---------- kinetic strip — infinite marquee, service categories ---------- */
.kinetic-strip{
  background:var(--gold); color:#fff; overflow:hidden; position:relative; z-index:5;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.kinetic-track{ display:flex; align-items:center; width:max-content; padding:15px 0; animation:kinetic-scroll 28s linear infinite; }
.kinetic-track span{ font-family:var(--mono); font-size:13px; letter-spacing:.07em; text-transform:uppercase; padding:0 28px; white-space:nowrap; font-weight:500; }
.kinetic-track i{ width:6px; height:6px; background:#fff; display:inline-block; flex-shrink:0; }
.kinetic-strip:hover .kinetic-track{ animation-play-state:paused; }
@keyframes kinetic-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .kinetic-track{ animation:none; } }

/* page hero (inner pages) */
.page-hero{
  position:relative; padding:180px 0 80px; text-align:left;
  background:linear-gradient(100deg, rgba(16,16,20,.92), rgba(16,16,20,.6)), var(--ink);
  background-size:cover; background-position:center; color:#f4f3ee;
}
.page-hero h1{ font-size:clamp(34px,5.6vw,62px); max-width:20ch; }
.page-hero .crumb{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--muted-on-dark); text-transform:uppercase; margin-bottom:18px; display:block; }
.page-hero .crumb a:hover{ color:var(--gold-light); }
.page-hero .crumb .sep{ margin:0 8px; opacity:.5; }

/* ---------- two-col feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ width:100%; display:block; border-radius:0; }
.split-media .frame{ position:absolute; inset:16px -16px -16px 16px; border:1px solid var(--gold); z-index:-1; border-radius:0; }
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:20px; border-top:1px solid var(--line-on-light); }
.section--dark .pillars, .section--panel .pillars{ border-color:var(--line); }
.pillar{ padding:22px 24px 22px 0; border-bottom:1px solid var(--line-on-light); }
.section--dark .pillar, .section--panel .pillar{ border-color:var(--line); }
.pillar:nth-child(odd){ border-right:1px solid var(--line-on-light); padding-right:24px; }
.section--dark .pillar:nth-child(odd), .section--panel .pillar:nth-child(odd){ border-color:var(--line); }
.pillar h3{ color:var(--ink-text); font-size:17px; margin-bottom:10px; font-weight:700; }
.section--dark .pillar h3, .section--panel .pillar h3{ color:#f4f3ee; }
.pillar p{ font-size:14.5px; color:var(--muted-on-dark); margin:0; }
.section--paper .pillar p, .section--cream .pillar p{ color:var(--muted); }

@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:40px; }
  .split.reverse .split-media{ order:0; }
  .pillars{ grid-template-columns:1fr; }
  .pillar:nth-child(odd){ border-right:0; padding-right:0; }
}

/* ---------- stat strip — strict grid, huge flat numerals, left-set ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--ink); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.stat{ padding:52px 30px; border-left:1px solid var(--line-soft); text-align:left; }
.stat:first-child{ border-left:0; }
.stat .num{ font-family:var(--display); font-size:clamp(34px,4.2vw,50px); color:#fff; line-height:1; margin-bottom:12px; font-weight:700; letter-spacing:-.02em; }
.stat .lbl{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted-on-dark); text-transform:uppercase; }
@media (max-width:780px){ .stats{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(3){ border-left:0; } .stat:nth-child(3), .stat:nth-child(4){ border-top:1px solid var(--line-soft); } }

/* ---------- differentiators — a real numbered grid, ruled both ways ---------- */
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.diff-card{ position:relative; padding:30px 24px; text-align:left; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.diff-num{ font-family:var(--mono); font-size:13px; color:var(--gold-light); margin-bottom:18px; display:block; }
.diff-card h3{ font-size:18px; margin-bottom:10px; font-weight:700; }
.diff-card p{ font-size:14px; color:var(--muted-on-dark); margin:0; }
.section--paper .diff-card p, .section--cream .diff-card p{ color:var(--muted); }
.section--paper .grid-5, .section--cream .grid-5{ border-color:var(--line-on-light); }
.section--paper .diff-card, .section--cream .diff-card{ border-color:var(--line-on-light); }
@media (max-width:1080px){ .grid-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .grid-5{ grid-template-columns:repeat(2,1fr); } }

/* ---------- services grid ---------- */
.grid-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-on-light); }
.svc-card{ position:relative; overflow:hidden; border-radius:0; aspect-ratio:4/3; background:var(--ink); }
.svc-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc-card:hover img{ transform:scale(1.06); }
.svc-card .overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,16,20,0) 40%,rgba(16,16,20,.92) 100%); display:flex; align-items:flex-end; padding:22px; }
.svc-card h3{ color:#fff; font-size:19px; margin:0; font-weight:700; }
.svc-card .tag{ position:absolute; top:0; left:0; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--gold); padding:7px 12px; }
@media (max-width:960px){ .grid-services{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-services{ grid-template-columns:1fr; } }

/* small service list rows (services overview page) */
.svc-list{ display:flex; flex-direction:column; border-top:1px solid var(--line-on-light); }
.svc-row{ display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:30px; padding:30px 0; border-bottom:1px solid var(--line-on-light); }
.svc-row .thumb{ aspect-ratio:4/3; overflow:hidden; border-radius:0; }
.svc-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.svc-row h3{ font-size:21px; margin-bottom:6px; font-weight:700; }
.svc-row p{ color:var(--muted-on-dark); font-size:14.5px; margin:0; max-width:520px; }
.section--paper .svc-row p, .section--cream .svc-row p{ color:var(--muted); }
.svc-row .arrow{ font-family:var(--mono); font-size:22px; color:var(--gold); transition:transform .3s; }
.svc-row:hover .arrow{ transform:translateX(8px); }
@media (max-width:760px){ .svc-row{ grid-template-columns:1fr; gap:14px; } .svc-row .arrow{ display:none; } }

/* ---------- process — flowing numbered method, mono index ---------- */
.process{ display:flex; flex-direction:column; max-width:780px; margin:0 auto; border-top:1px solid var(--line-on-light); }
.section--dark .process, .section--panel .process{ border-color:var(--line); }
.p-step{ display:grid; grid-template-columns:70px 1fr; gap:26px; padding:32px 0; border-bottom:1px solid var(--line-on-light); text-align:left; }
.section--dark .p-step, .section--panel .p-step{ border-color:var(--line); }
.p-step .dot{ display:none; }
.p-step .idx{ grid-column:1; grid-row:1 / span 2; font-family:var(--mono); color:var(--gold); font-size:15px; }
.p-step h3{ grid-column:2; grid-row:1; font-size:21px; margin-bottom:0; font-weight:700; }
.p-step p{ grid-column:2; grid-row:2; font-size:15px; color:var(--muted-on-dark); margin:0; margin-top:8px; }
.section--paper .p-step p, .section--cream .p-step p{ color:var(--muted); }
@media (max-width:600px){ .p-step{ grid-template-columns:40px 1fr; gap:16px; } }

/* ---------- gallery ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:4px 28px; justify-content:center; margin-bottom:56px; }
.filter-btn{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; padding:8px 2px; border:0; border-bottom:2px solid transparent; color:var(--muted-on-dark); transition:all .2s; background:none; }
.section--paper .filter-btn, .section--cream .filter-btn{ color:var(--muted); }
.filter-btn:hover{ color:var(--gold); }
.filter-btn.is-active{ color:var(--gold); border-bottom-color:var(--gold); }

.masonry{ column-count:3; column-gap:2px; }
.masonry .g-item{ break-inside:avoid; margin-bottom:2px; position:relative; overflow:hidden; border-radius:0; cursor:pointer; }
.masonry .g-item img{ width:100%; display:block; transition:transform .6s var(--ease); }
.masonry .g-item:hover img{ transform:scale(1.05); }
.masonry .g-item .cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(transparent,rgba(0,0,0,.85)); color:#fff; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; opacity:0; transition:opacity .3s; }
.masonry .g-item:hover .cap{ opacity:1; }
.g-item.is-hidden{ display:none; }
@media (max-width:900px){ .masonry{ column-count:2; } }
@media (max-width:560px){ .masonry{ column-count:1; } }

/* ---------- team ---------- */
.grid-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-on-light); }
.section--dark .grid-team, .section--panel .grid-team{ background:var(--line); }
.team-card{ text-align:left; background:var(--ink); padding:34px; }
.section--paper .team-card, .section--cream .team-card{ background:var(--paper); }
.team-photo{ width:64px; height:64px; border-radius:0; margin:0 0 22px; border:1px solid var(--gold); display:flex; align-items:center; justify-content:center; background:var(--ink-2); font-family:var(--mono); font-size:22px; color:var(--gold-light); }
.section--paper .team-photo, .section--cream .team-photo{ background:var(--paper-2); }
.team-card h3{ font-size:20px; margin-bottom:4px; font-weight:700; }
.team-card .role{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-light); margin-bottom:16px; display:block; }
.section--paper .team-card .role, .section--cream .team-card .role{ color:var(--gold); }
.team-card p{ font-size:14px; color:var(--muted-on-dark); text-align:left; }
.section--paper .team-card p, .section--cream .team-card p{ color:var(--muted); }
@media (max-width:860px){ .grid-team{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }

/* ---------- clients strip ---------- */
.clients-strip{ display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap; }
.clients-strip img{ height:32px; width:auto; opacity:.7; transition:opacity .3s; filter:none; }
.clients-strip img:hover{ opacity:1; }
@media (max-width:700px){ .clients-strip{ gap:32px 40px; } .clients-strip img{ height:26px; } }

/* ---------- quote band — plain, confident, no ornament ---------- */
.quote-band{ text-align:left; max-width:780px; margin:0; padding-left:24px; border-left:3px solid var(--gold); }
.quote-band blockquote{ font-family:var(--display); font-size:clamp(22px,3vw,32px); font-weight:600; font-style:normal; line-height:1.3; margin:0 0 20px; letter-spacing:-.01em; }
.quote-band cite{ font-family:var(--mono); font-style:normal; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold); }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(30px,4.2vw,46px); margin-bottom:18px; }
.cta-band p{ color:var(--muted-on-dark); max-width:560px; margin:0 auto 34px; font-size:17px; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; }
.contact-info-card{ border-top:1px solid var(--line); padding-top:0; }
.contact-info-card .row{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line-soft); }
.contact-info-card .row:first-child{ border-top:1px solid var(--line-soft); }
.contact-info-card .ic{ color:var(--gold-light); font-size:18px; width:22px; text-align:center; flex-shrink:0; }
.contact-info-card h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-light); margin-bottom:6px; font-weight:500; }
.contact-info-card a:hover{ color:var(--gold-light); }
.social-row{ display:flex; gap:12px; margin-top:26px; }
.social-row a{ width:38px; height:38px; border:1px solid var(--line); border-radius:0; display:flex; align-items:center; justify-content:center; transition:all .2s; font-family:var(--mono); font-size:12px; }
.social-row a:hover{ border-color:var(--gold-light); color:var(--gold-light); }

.form-field{ margin-bottom:22px; }
.form-field label{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-light); margin-bottom:9px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:0; color:inherit;
  padding:13px 14px; font-family:var(--sans); font-size:15.5px; transition:border-color .2s;
}
.section--paper .form-field input, .section--paper .form-field select, .section--paper .form-field textarea,
.section--cream .form-field input, .section--cream .form-field select, .section--cream .form-field textarea{
  background:#fff; border-color:var(--line-on-light); color:var(--ink-text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold); }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-row-2{ grid-template-columns:1fr; } }
.form-note{ font-family:var(--mono); font-size:12px; color:var(--muted-on-dark); margin-top:14px; }
.section--paper .form-note, .section--cream .form-note{ color:var(--muted); }
#form-status{ margin-top:16px; font-size:14px; }
.map-wrap{ margin-top:44px; border:1px solid var(--line); }
.map-wrap iframe{ width:100%; height:380px; border:0; display:block; filter:grayscale(.3) contrast(1.05); }
@media (max-width:960px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }

.whatsapp-fab{
  position:fixed; right:26px; bottom:26px; z-index:150; width:56px; height:56px; border-radius:0;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .3s;
}
.whatsapp-fab:hover{ transform:scale(1.06); }
.whatsapp-fab svg{ width:28px; height:28px; }

/* ---------- footer ---------- */
.site-footer{ background:#0c0d11; color:var(--muted-on-dark); padding-top:80px; border-top:1px solid var(--line-soft); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:60px; }
.footer-grid p{ font-size:13.5px; line-height:1.8; }
.footer-col h4{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#eceada; margin-bottom:22px; font-weight:500; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-bottom{ border-top:1px solid var(--line-soft); padding:24px 0; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11.5px; flex-wrap:wrap; gap:10px; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:34px; height:34px; border:1px solid var(--line-soft); border-radius:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; }
.footer-social a:hover{ border-color:var(--gold-light); color:var(--gold-light); }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; text-align:center; } }

/* ---------- misc ---------- */
.divider-gold{ width:56px; height:3px; background:var(--gold); margin:0 auto; }
::selection{ background:var(--gold); color:#fff; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--gold); color:#fff; padding:10px 16px; z-index:999; }
.skip-link:focus{ left:10px; top:10px; }

/* =========================================================
   MONU / EXPERIMENTAL SPATIAL SYSTEM
   G2-continuous silhouettes, controlled collision, liquid
   apertures and kinetic editorial composition.
   ========================================================= */
:root{
  --electric:#596dff;
  --navy:#142961;
  --acid:#d8ff52;
  --milk:#f2f0e8;
  --night:#090b16;
  --g2:clamp(32px,5vw,82px);
}
body{ background:var(--night); }
.section{ overflow:hidden; }
.section--paper,.section--cream{ background:var(--milk); }
.section--dark{ background:var(--night); }
.section--panel{ background:#12152a; }

/* tactile controls */
.btn{
  min-height:58px; padding:16px 25px; border-radius:999px;
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  justify-content:space-between; transition:transform .35s var(--ease),background .35s,color .35s;
}
.btn b{ font-size:18px; font-weight:400; margin-left:22px; }
.btn:hover{ transform:scale(.975); }
.btn-gold{ background:var(--acid); color:var(--night); }
.btn-gold:hover{ background:#fff; color:var(--night); }
.btn-outline{ border-color:rgba(255,255,255,.45); }

/* header floats like an instrument panel */
.topbar{ display:none; }
.site-header{ position:fixed; top:18px; left:18px; right:18px; border:0; border-radius:999px; overflow:visible; }
.site-header::before{ border-radius:999px; background:rgba(9,11,22,.62); backdrop-filter:blur(22px) saturate(160%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.nav-row{ height:66px; padding:0 22px; }
.brand-icon{ height:29px; }
.main-nav > ul > li > a{ font-size:10.5px; padding:12px 13px; }
.nav-cta .btn{ min-height:40px; padding:8px 18px; }

/* hero as a piece of event scenography */
.hero.hero--experience{
  --mx:0; --my:0;
  min-height:100svh; display:block; isolation:isolate;
  background:
    radial-gradient(circle at calc(72% + var(--mx)*3%) calc(32% + var(--my)*3%),rgba(89,109,255,.52),transparent 24%),
    radial-gradient(circle at 12% 88%,rgba(216,255,82,.12),transparent 27%),
    var(--night);
}
.hero.hero--experience::before{
  opacity:.17; background:none;
  background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:8.333vw 8.333vw;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}
.hero-aurora{
  position:absolute; z-index:-1; width:70vw; height:70vw; right:-33vw; top:-34vw;
  border:1px solid rgba(255,255,255,.2); border-radius:42% 58% 70% 30% / 35% 39% 61% 65%;
  box-shadow:0 0 100px rgba(89,109,255,.16),inset 0 0 100px rgba(89,109,255,.1);
  animation:morph 14s ease-in-out infinite alternate;
}
@keyframes morph{
  to{ transform:rotate(17deg) scale(.92); border-radius:65% 35% 38% 62% / 52% 66% 34% 48%; }
}
.hero-stage{
  position:absolute; z-index:0; width:min(42vw,650px); height:min(70vh,760px);
  right:4.5vw; top:14vh; overflow:hidden;
  border-radius:
    calc(48% - var(--hero-exit,0)*14%) calc(52% - var(--hero-exit,0)*14%)
    calc(46% - var(--hero-exit,0)*10%) calc(54% - var(--hero-exit,0)*10%) /
    calc(18% + var(--hero-exit,0)*12%) calc(22% + var(--hero-exit,0)*8%)
    calc(78% - var(--hero-exit,0)*30%) calc(82% - var(--hero-exit,0)*30%);
  transform:translate(calc(var(--mx)*-10px),calc(var(--my)*-10px + var(--hero-exit,0)*34px)) rotate(calc(2deg - var(--hero-exit,0)*4deg)) scale(calc(1 - var(--hero-exit,0)*.06));
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 40px 140px rgba(0,0,0,.5);
}
.hero-stage img{ position:absolute; inset:0; width:112%; height:112%; object-fit:cover; object-position:center 48%; filter:saturate(.9) contrast(1.1); transform:translate(-5%,-5%) scale(1.08); }
.hero-world{
  opacity:0; clip-path:circle(0 at 82% 18%);
  transition:opacity .75s var(--ease),clip-path 1.25s cubic-bezier(.16,.84,.22,1),transform 1.6s var(--ease);
}
.hero-world.is-active{ opacity:1; clip-path:circle(145% at 50% 50%); transform:translate(-5%,-5%) scale(1.02); }
.hero-worlds{
  position:absolute; z-index:5; right:4vw; top:17%; display:flex; gap:5px; padding:5px;
  border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(4,8,20,.42); backdrop-filter:blur(15px);
  transform:rotate(4deg);
}
.hero-worlds button{
  padding:9px 13px; border:0; border-radius:999px; background:transparent; color:#c6c8d2;
  font:500 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; transition:background .35s,color .35s,transform .35s;
}
.hero-worlds button:hover{ color:#fff; }
.hero-worlds button.is-active{ color:var(--navy); background:var(--acid); transform:rotate(-4deg); }
.hero[data-active-world="ceremony"]{ background:radial-gradient(circle at 75% 35%,rgba(233,237,231,.16),transparent 24%),var(--night); }
.hero[data-active-world="live"]{ background:radial-gradient(circle at 74% 34%,rgba(42,82,195,.48),transparent 28%),var(--night); }
.hero-stage::after{ content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(89,109,255,.15),transparent 40%,rgba(9,11,22,.45)); mix-blend-mode:screen; }
.hero-stage-glass{
  position:absolute; width:52%; aspect-ratio:1; right:-8%; bottom:7%; z-index:2;
  border-radius:46% 54% 58% 42% / 49% 35% 65% 51%;
  border:1px solid rgba(255,255,255,.38); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 0 50px rgba(255,255,255,.08);
}
.hero-inner{ padding:168px 32px 72px; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; }
.hero-index{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--acid); }
.hero.hero--experience h1{
  position:relative; z-index:3; margin:5vh 0 4vh; max-width:none;
  font-size:clamp(54px,8.9vw,142px); line-height:.78; letter-spacing:-.075em;
  font-weight:600; color:var(--milk); text-transform:uppercase;
}
.hero.hero--experience h1 span{ display:block; width:max-content; max-width:100%; }
.hero.hero--experience h1 span:nth-child(2){ margin-left:7.5vw; }
.hero.hero--experience h1 .hero-punch{
  color:var(--acid); margin-left:1.5vw; font-size:.72em; font-weight:500;
  transform:rotate(-2deg); transform-origin:left center;
}
.hero-bottom{ position:relative; z-index:4; display:grid; grid-template-columns:minmax(260px,440px) 1fr; gap:7vw; align-items:end; }
.hero.hero--experience p.desc{ border:0; padding:0; margin:0; color:#d1d1d7; font-size:15px; line-height:1.45; max-width:42ch; }
.hero-ctas{ justify-content:flex-start; align-items:center; }
.hero-orbit{
  position:absolute; z-index:4; font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:#fff;
  padding:12px 16px; border:1px solid rgba(255,255,255,.3); border-radius:999px; backdrop-filter:blur(10px);
}
.hero-orbit--one{ right:34vw; top:20%; transform:rotate(8deg); }
.hero-orbit--two{ right:3vw; bottom:12%; transform:rotate(-5deg); color:var(--acid); }

.kinetic-strip{ background:var(--acid); color:var(--navy); overflow:hidden; transform:rotate(-1deg) scale(1.02); position:relative; z-index:5; }
.kinetic-track{ display:flex; width:max-content; align-items:center; gap:26px; padding:13px 0; animation:ticker 30s linear infinite; font-family:var(--mono); font-size:11px; letter-spacing:.1em; }
.kinetic-track i{ width:10px; height:10px; background:var(--navy); border-radius:42% 58% 65% 35% / 45% 30% 70% 55%; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* every section becomes a shaped scene, not a stack of rectangles */
.stats{ background:var(--night); border:0; padding:70px 3vw; gap:12px; }
.stat{
  min-height:210px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;
  background:#171a31; border:1px solid rgba(255,255,255,.1)!important;
  border-radius:var(--g2); text-align:left;
}
.stat:nth-child(2){ background:var(--electric); transform:translateY(20px) rotate(1deg); }
.stat:nth-child(3){ border-radius:45% 45% var(--g2) var(--g2); }
.stat .num{ font-size:clamp(45px,5vw,76px); letter-spacing:-.07em; }
.stat .lbl{ font-family:var(--mono); max-width:18ch; text-transform:uppercase; font-size:10px; letter-spacing:.06em; }

.split-media img{ border-radius:48% 52% var(--g2) var(--g2) / 36% 35% var(--g2) var(--g2); aspect-ratio:4/5; object-fit:cover; }
.split-media .frame{ display:none; }
.section h2{ letter-spacing:-.055em; }
.heading-row.center{ text-align:left; margin-left:0; max-width:950px; }
.heading-row.center .eyebrow{ justify-content:flex-start; }
.heading-row.center .rule{ margin-left:0; }
.heading-row h2{ font-size:clamp(48px,7vw,98px); line-height:.88; }

.grid-5{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.diff-card{
  grid-column:span 2; min-height:310px; padding:28px!important; border:0!important;
  background:#171a31; border-radius:var(--g2); display:flex; flex-direction:column;
}
.diff-card:nth-child(1),.diff-card:nth-child(5){ grid-column:span 3; background:var(--electric); }
.diff-card:nth-child(2){ border-radius:50% 50% var(--g2) var(--g2); }
.diff-card h3{ margin-top:auto; font-size:clamp(24px,2.4vw,38px); letter-spacing:-.04em; }
.diff-num{ font-family:var(--mono); color:var(--acid)!important; }

.grid-services{ gap:12px; }
.svc-card{ border-radius:var(--g2); overflow:hidden; min-height:520px; }
.svc-card:nth-child(3n+2){ border-radius:48% 48% var(--g2) var(--g2) / 28% 28% var(--g2) var(--g2); }
.svc-card img{ transition:transform 1.1s var(--ease),filter .7s; filter:saturate(.8); }
.svc-card:hover img{ transform:scale(1.08) rotate(-1deg); filter:saturate(1.1); }
.svc-card .tag{ border-radius:999px!important; background:rgba(9,11,22,.55)!important; backdrop-filter:blur(12px); }

.process{ gap:10px; }
.p-step{ min-height:330px; border:0!important; border-radius:var(--g2); background:#fff; padding:28px!important; }
.p-step:nth-child(even){ background:var(--acid); transform:translateY(28px); }
.masonry{ gap:10px; }
.g-item{ border-radius:var(--g2); overflow:hidden; }
.g-item:nth-child(4n+1){ border-radius:48% 48% var(--g2) var(--g2) / 32% 32% var(--g2) var(--g2); }
.g-item img{ transition:transform 1s var(--ease); }
.g-item:hover img{ transform:scale(1.06); }
.clients-strip{ background:var(--milk); padding:45px; border-radius:999px; }
.quote-band{ border:0; max-width:1100px; padding:8vw; background:var(--electric); color:#fff; border-radius:48% 52% var(--g2) var(--g2) / 28% 25% var(--g2) var(--g2); }
.quote-band blockquote{ font-size:clamp(34px,5vw,72px); line-height:.96; letter-spacing:-.05em; }
.cta-band{ padding:9vw 5vw; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.cta-band h2{ font-size:clamp(50px,8vw,110px); line-height:.83; letter-spacing:-.07em; }
.whatsapp-fab{ border-radius:50%; right:20px; bottom:20px; }
.site-footer{ border-radius:var(--g2) var(--g2) 0 0; }

@media(max-width:900px){
  .site-header{ top:10px;left:10px;right:10px; }
  .hero-stage{ width:63vw; height:52vh; right:-14vw; top:20vh; opacity:.78; }
  .hero.hero--experience h1{ font-size:clamp(52px,13vw,100px); line-height:.82; }
  .hero.hero--experience h1 span:nth-child(2){ margin-left:0; }
  .hero-bottom{ grid-template-columns:1fr; gap:22px; width:75%; }
  .hero-orbit--one{ right:3vw;top:16%; }
  .grid-5{ grid-template-columns:1fr 1fr; }
  .diff-card,.diff-card:nth-child(1),.diff-card:nth-child(5){ grid-column:span 1; }
}
@media(max-width:600px){
  :root{ --g2:34px; }
  .container{ padding-left:18px; padding-right:18px; }
  .hero-inner{ padding:125px 18px 105px; }
  .hero-stage{ width:88vw; right:-27vw; top:21vh; height:48vh; }
  .hero.hero--experience h1{ margin-top:7vh; font-size:clamp(47px,15.2vw,76px); letter-spacing:-.065em; }
  .hero.hero--experience h1 .hero-punch{ margin:10px 0 0; font-size:.64em; }
  .hero-bottom{ width:100%; }
  .hero.hero--experience p.desc{ max-width:75%; }
  .hero-ctas{ flex-direction:row; align-items:center; }
  .hero-ctas .btn{ width:auto; }
  .hero-ctas .btn-outline{ display:none; }
  .hero-orbit--two{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; padding:45px 12px; }
  .stat{ min-height:170px; }
  .stat:nth-child(2){ transform:translateY(10px); }
  .grid-5{ grid-template-columns:1fr; }
  .diff-card{ min-height:260px; }
  .svc-card{ min-height:440px; }
  .clients-strip{ border-radius:var(--g2); padding:35px 24px; }
}

/* ---------- home / cinematic chapter system ---------- */
.exp-kicker{
  display:flex; gap:22px; align-items:center; font:500 10px/1 var(--mono);
  letter-spacing:.13em; text-transform:uppercase;
}
.exp-kicker span{ display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; }
.exp-intro{
  position:relative; isolation:isolate; padding:14vw 0 12vw; background:var(--milk); color:var(--night); overflow:hidden;
}
.exp-intro .exp-kicker{ margin-bottom:9vw; }
.exp-manifesto{
  position:relative; z-index:2; max-width:13ch; margin:0;
  font:600 clamp(52px,8.8vw,138px)/.84 var(--display); letter-spacing:-.075em; text-transform:uppercase;
}
.exp-manifesto em{ color:var(--electric); font-style:normal; }
.exp-intro-foot{ position:relative; z-index:2; margin-top:9vw; display:flex; justify-content:flex-end; align-items:flex-end; gap:9vw; }
.exp-intro-foot p{ max-width:430px; font-size:18px; line-height:1.35; margin:0; }
.exp-coordinate{ font:10px/1.7 var(--mono); letter-spacing:.1em; }
.exp-lens{ position:absolute; z-index:1; border:1px solid rgba(9,11,22,.16); backdrop-filter:blur(16px); }
.exp-lens--a{ width:33vw; aspect-ratio:1; right:-5vw; top:4vw; border-radius:40% 60% 70% 30% / 44% 34% 66% 56%; background:rgba(20,41,97,.13); transform:rotate(23deg); }
.exp-lens--b{ width:18vw; aspect-ratio:1.35; right:20vw; bottom:7vw; border-radius:999px; background:rgba(216,255,82,.25); transform:rotate(-14deg); }

.exp-reel{ padding:10vw 0 13vw; background:var(--night); color:var(--milk); overflow:hidden; }
.exp-reel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5vw; }
.exp-reel-head > p{ margin:0; font:12px var(--mono); color:#aeb1c0; }
.exp-reel-grid{
  width:min(1500px,calc(100% - 36px)); margin:auto; display:grid;
  grid-template-columns:1.35fr .72fr .8fr; grid-template-rows:min(48vw,650px) min(24vw,340px); gap:12px;
}
.exp-shot{ position:relative; display:block; overflow:hidden; background:#171a31; }
.exp-shot--hero{ grid-row:1/3; border-radius:44% 10% 10% 10% / 25% 10% 10% 10%; }
.exp-shot--round{ border-radius:50% 50% 10% 10%; }
.exp-shot--tall{ border-radius:10% 48% 10% 10% / 10% 34% 10% 10%; }
.exp-shot img{ width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.06); transition:transform 1.2s var(--ease),filter .8s; }
.exp-shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 52%,rgba(5,6,12,.72)); }
.exp-shot:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.exp-shot-index,.exp-shot-title,.exp-shot b{ position:absolute; z-index:2; bottom:22px; }
.exp-shot-index{ left:22px; font:10px var(--mono); color:var(--acid); }
.exp-shot-title{ left:70px; font:500 clamp(18px,2vw,30px) var(--display); }
.exp-shot b{ right:22px; font-size:24px; font-weight:400; }
.exp-reel-statement{
  grid-column:2/4; padding:3vw; align-self:stretch; border-radius:var(--g2);
  background:var(--acid); color:var(--night); font:600 clamp(48px,6.5vw,96px)/.76 var(--display); letter-spacing:-.07em; text-transform:uppercase;
}
.exp-reel-statement i{ color:var(--electric); font-style:normal; }

.exp-services{ position:relative; padding:11vw 0; background:var(--milk); color:var(--night); }
.exp-services-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:7vw; }
.exp-services-top > p{ max-width:280px; margin:0; font-size:16px; }
.exp-service{ position:relative; display:grid; grid-template-columns:70px 1fr 70px; align-items:center; min-height:145px; border-top:1px solid rgba(9,11,22,.22); isolation:isolate; }
.exp-service:last-child{ border-bottom:1px solid rgba(9,11,22,.22); }
.exp-service-num{ font:11px var(--mono); }
.exp-service h2{ position:relative; z-index:2; font-size:clamp(43px,7vw,100px); line-height:.85; letter-spacing:-.07em; margin:0; text-transform:uppercase; transition:transform .45s var(--ease),color .35s; }
.exp-service h2 i{ color:var(--electric); font-style:normal; }
.exp-service-go{ justify-self:end; display:grid; place-items:center; width:52px; height:52px; border:1px solid; border-radius:50%; font-size:21px; transition:transform .45s,background .35s; }
.exp-service img{
  pointer-events:none; position:absolute; z-index:1; right:13%; width:270px; height:180px; object-fit:cover;
  border-radius:48% 52% 46% 54% / 35% 44% 56% 65%; opacity:0; transform:scale(.72) rotate(8deg);
  transition:opacity .4s,transform .55s var(--ease);
}
.exp-service:hover h2{ transform:translateX(2vw); color:var(--electric); }
.exp-service:hover img{ opacity:1; transform:scale(1) rotate(-4deg); }
.exp-service:hover .exp-service-go{ background:var(--acid); transform:rotate(45deg); }

.exp-machine{ padding:12vw 0; background:var(--navy); color:#fff; overflow:hidden; }
.exp-machine-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; }
.exp-machine-copy h2{ margin:6vw 0 3vw; font-size:clamp(56px,7.5vw,112px); line-height:.82; letter-spacing:-.075em; text-transform:uppercase; }
.exp-machine-copy h2 i{ color:var(--acid); font-style:normal; }
.exp-machine-copy > p{ max-width:470px; margin-bottom:35px; font-size:17px; line-height:1.45; }
.exp-machine-object{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
.exp-machine-core{
  position:relative; z-index:3; width:45%; aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--acid); color:var(--night);
  box-shadow:0 0 90px rgba(216,255,82,.28);
}
.exp-machine-core strong{ font:600 clamp(52px,7vw,100px)/.8 var(--display); letter-spacing:-.08em; }
.exp-machine-core span{ margin-top:18px; font:10px/1.3 var(--mono); letter-spacing:.1em; text-align:center; }
.exp-ring{ position:absolute; inset:10%; border:1px solid rgba(255,255,255,.38); border-radius:42% 58% 61% 39% / 35% 42% 58% 65%; animation:ringTurn 18s linear infinite; }
.exp-ring--2{ inset:2%; border-radius:62% 38% 34% 66% / 55% 30% 70% 45%; animation-direction:reverse; animation-duration:24s; }
.exp-ring--3{ inset:22%; border-color:var(--acid); border-radius:48% 52% 68% 32% / 33% 63% 37% 67%; animation-duration:13s; }
@keyframes ringTurn{ to{ transform:rotate(360deg); } }

.exp-process{ padding:11vw 0 13vw; background:var(--night); color:var(--milk); }
.exp-process .exp-kicker{ margin-bottom:7vw; }
.exp-process-line{ display:grid; grid-template-columns:repeat(4,1fr); }
.exp-process-line > div{ position:relative; min-height:330px; padding:28px; border:1px solid rgba(255,255,255,.18); border-right:0; display:flex; flex-direction:column; }
.exp-process-line > div:first-child{ border-radius:var(--g2) 0 0 var(--g2); }
.exp-process-line > div:last-child{ border-right:1px solid rgba(255,255,255,.18); border-radius:0 var(--g2) var(--g2) 0; }
.exp-process-line > div:nth-child(3){ background:var(--acid); color:var(--night); border-radius:50% 50% 0 0; transform:translateY(-30px); }
.exp-process-line span{ font:10px var(--mono); color:var(--electric); }
.exp-process-line h3{ margin:auto 0 14px; font-size:clamp(30px,3vw,48px); letter-spacing:-.05em; }
.exp-process-line p{ margin:0; max-width:20ch; color:#aeb1c0; font-size:13px; }
.exp-process-line > div:nth-child(3) p{ color:var(--night); }

.exp-trust{ background:var(--navy); color:#fff; padding:12vw 0 8vw; }
.exp-trust-copy{ position:relative; padding:9vw 5vw 8vw; background:#284492; color:white; border-radius:48% 52% var(--g2) var(--g2) / 22% 27% var(--g2) var(--g2); }
.exp-quote-mark{ position:absolute; top:1vw; left:4vw; font:200 14vw/1 var(--display); color:var(--acid); }
.exp-trust blockquote{ position:relative; margin:0; font:600 clamp(52px,8.5vw,128px)/.82 var(--display); letter-spacing:-.075em; text-transform:uppercase; }
.exp-trust blockquote i{ color:var(--acid); font-style:normal; }
.exp-trust cite{ display:block; margin-top:4vw; font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.exp-clients{ display:grid; grid-template-columns:200px 1fr; align-items:center; gap:40px; margin-top:5vw; padding:4vw; border:1px solid rgba(255,255,255,.18); border-radius:var(--g2); background:rgba(3,10,30,.3); }
.exp-clients > span{ font:10px var(--mono); letter-spacing:.1em; }
.exp-clients > div{ display:flex; align-items:center; justify-content:space-around; gap:45px; }
.exp-clients img{ max-height:42px; width:auto; max-width:150px; filter:none; opacity:1; }

.exp-final{ position:relative; isolation:isolate; min-height:90svh; padding:11vw 0 8vw; display:flex; align-items:center; overflow:hidden; background:var(--night); color:var(--milk); }
.exp-final .container{ width:100%; }
.exp-final-small{ display:block; margin-bottom:7vw; font:10px var(--mono); letter-spacing:.12em; color:var(--acid); }
.exp-final h2{ position:relative; z-index:2; max-width:12ch; font-size:clamp(66px,11vw,170px); line-height:.77; letter-spacing:-.085em; text-transform:uppercase; }
.exp-final h2 > span{ display:block; }
.exp-final h2 .orb-ink{ position:relative; color:var(--electric); }
.exp-final h2 .orb-ink::after{
  content:attr(data-text); position:absolute; inset:0; color:#fff;
  clip-path:circle(0% at 108% 50%);
  animation:orbInk 9s ease-in-out infinite alternate;
}
.exp-final-link{ position:relative; z-index:3; margin:5vw 0 0 auto; width:220px; aspect-ratio:1; border-radius:50%; background:var(--acid); color:var(--night); display:flex; flex-direction:column; justify-content:space-between; padding:30px; font:11px var(--mono); transition:transform .5s var(--ease); }
.exp-final-link b{ align-self:flex-end; font-size:32px; font-weight:400; }
.exp-final-link:hover{ transform:rotate(8deg) scale(.95); }
.exp-final-orb{ position:absolute; z-index:-1; width:55vw; aspect-ratio:1; right:-12vw; top:8%; border-radius:43% 57% 34% 66% / 56% 31% 69% 44%; background:radial-gradient(circle at 30% 28%,#3153ad,var(--navy) 48%,#07132f 78%); filter:blur(.2px); animation:finalOrb 9s ease-in-out infinite alternate; }
@keyframes finalOrb{
  from{ transform:translateX(8vw) rotate(-7deg); border-radius:43% 57% 34% 66% / 56% 31% 69% 44%; }
  to{ transform:translateX(-8vw) rotate(8deg); border-radius:62% 38% 54% 46% / 38% 56% 44% 62%; }
}
@keyframes orbInk{
  from{ clip-path:circle(0% at 108% 50%); }
  to{ clip-path:circle(34% at 77% 50%); }
}

@media(max-width:800px){
  .exp-intro{ padding:120px 0 100px; }
  .exp-intro-foot{ justify-content:flex-start; flex-direction:column; align-items:flex-start; }
  .exp-reel{ padding:100px 0; }
  .exp-reel-grid{ grid-template-columns:1fr 1fr; grid-template-rows:125vw 70vw 68vw; }
  .exp-shot--hero{ grid-column:1/3; grid-row:auto; }
  .exp-shot--round,.exp-shot--tall{ grid-row:2; }
  .exp-reel-statement{ grid-column:1/3; grid-row:3; padding:35px; }
  .exp-services{ padding:100px 0; }
  .exp-service{ grid-template-columns:38px 1fr 46px; min-height:112px; }
  .exp-service img{ display:none; }
  .exp-machine{ padding:110px 0; }
  .exp-machine-grid{ grid-template-columns:1fr; }
  .exp-machine-object{ margin-top:30px; }
  .exp-process{ padding:100px 0; }
  .exp-process-line{ grid-template-columns:1fr 1fr; }
  .exp-process-line > div{ min-height:230px; border:1px solid rgba(255,255,255,.18); border-radius:var(--g2)!important; }
  .exp-process-line > div:nth-child(3){ transform:none; border-radius:50% 50% var(--g2) var(--g2)!important; }
  .exp-trust{ padding:100px 0 70px; }
  .exp-clients{ grid-template-columns:1fr; }
  .exp-clients > div{ flex-wrap:wrap; justify-content:flex-start; }
  .exp-final{ min-height:80svh; padding:100px 0 70px; }
}
@media(max-width:520px){
  .exp-manifesto{ font-size:14.5vw; }
  .exp-lens--a{ width:65vw; right:-25vw; }
  .exp-reel-head{ align-items:flex-start; flex-direction:column; gap:24px; }
  .exp-shot-index{ left:14px;bottom:14px; }
  .exp-shot-title{ left:55px;bottom:14px;font-size:15px; }
  .exp-shot b{ right:14px;bottom:14px; }
  .exp-services-top{ flex-direction:column; align-items:flex-start; gap:25px; }
  .exp-service h2{ font-size:10.7vw; }
  .exp-machine-copy h2{ font-size:14vw; }
  .exp-process-line{ gap:8px; }
  .exp-process-line > div{ padding:20px; min-height:210px; }
  .exp-process-line h3{ font-size:28px; }
  .exp-trust-copy{ padding:85px 25px 45px; border-radius:90px 90px var(--g2) var(--g2); }
  .exp-trust blockquote{ font-size:13.5vw; }
  .exp-final h2{ font-size:16vw; }
  .exp-final-link{ width:160px; padding:22px; }
}

/* ---------- inner pages / same universe, quieter tempo ---------- */
.page-hero{
  min-height:76svh; padding:180px 0 70px; display:flex; align-items:flex-end; isolation:isolate;
  border-radius:0 0 48% 8% / 0 0 18% 4%; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; z-index:-1; width:42vw; aspect-ratio:1; right:-8vw; bottom:-20vw;
  border-radius:43% 57% 34% 66% / 56% 31% 69% 44%; border:1px solid rgba(216,255,82,.7);
  box-shadow:0 0 100px rgba(89,109,255,.32),inset 0 0 80px rgba(89,109,255,.2);
}
.page-hero .container{ width:100%; }
.page-hero h1{ max-width:13ch; margin:0; font-size:clamp(62px,10vw,150px); line-height:.8; letter-spacing:-.08em; text-transform:uppercase; }
.page-hero .crumb{ display:flex; align-items:center; gap:8px; color:var(--acid); margin-bottom:5vw; }
.page-hero .crumb::before{ content:""; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; }

/* the services page becomes an editorial index */
.svc-list{ counter-reset:service; border-top:1px solid rgba(9,11,22,.22); }
.svc-row{
  counter-increment:service; position:relative; min-height:145px; display:grid;
  grid-template-columns:65px 1fr 70px; gap:0; align-items:center; padding:0;
  border-bottom:1px solid rgba(9,11,22,.22); overflow:visible; isolation:isolate;
}
.svc-row::before{ content:counter(service,decimal-leading-zero); font:10px var(--mono); }
.svc-row .thumb{
  pointer-events:none; position:absolute; z-index:1; width:280px; height:185px; right:13%;
  border-radius:45% 55% 61% 39% / 35% 42% 58% 65%; overflow:hidden;
  opacity:0; transform:scale(.7) rotate(8deg); transition:opacity .35s,transform .55s var(--ease);
}
.svc-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.svc-row > div:nth-child(2){ position:relative; z-index:2; }
.svc-row h3{ margin:0; font-size:clamp(34px,5vw,70px); line-height:.9; letter-spacing:-.065em; text-transform:uppercase; transition:transform .45s,color .35s; }
.svc-row p{ max-width:580px; margin:12px 0 0; font-size:13px; line-height:1.35; color:var(--muted); opacity:0; position:absolute; transition:opacity .35s; }
.svc-row .arrow{ justify-self:end; display:grid; place-items:center; width:50px; height:50px; border:1px solid; border-radius:50%; font-size:0; transition:transform .45s,background .35s; }
.svc-row .arrow::after{ content:"↗"; font-size:18px; }
.svc-row:hover .thumb{ opacity:1; transform:scale(1) rotate(-4deg); }
.svc-row:hover h3{ color:var(--electric); transform:translateX(15px); }
.svc-row:hover p{ opacity:1; }
.svc-row:hover .arrow{ background:var(--acid); transform:rotate(45deg); }

/* contact becomes a designed briefing surface */
.contact-grid{ gap:8vw; }
.contact-grid > div:first-child h2{ max-width:8ch; font-size:clamp(54px,7vw,94px); line-height:.84; letter-spacing:-.07em; text-transform:uppercase; }
.contact-info-card{ margin-top:45px; }
.contact-info-card .row{ padding:28px 0; }
#monu-contact-form{
  padding:clamp(28px,4vw,60px); border-radius:var(--g2);
  background:var(--electric); color:#fff; transform:rotate(1deg);
  box-shadow:0 40px 100px rgba(0,0,0,.28);
}
#monu-contact-form .form-field label{ color:var(--acid); }
#monu-contact-form .form-field input,
#monu-contact-form .form-field select,
#monu-contact-form .form-field textarea{
  border:0; border-bottom:1px solid rgba(255,255,255,.45); background:transparent; padding:15px 2px; border-radius:0;
}
#monu-contact-form select option{ color:var(--night); }
#monu-contact-form .btn{ width:100%; margin-top:8px; }
.map-wrap{ border-radius:var(--g2); overflow:hidden; border:1px solid rgba(255,255,255,.15); }

/* about/team: less corporate profile, more creative collective */
.grid-team{ gap:10px; }
.team-card{ border:0!important; border-radius:var(--g2); padding:34px!important; background:#171a31; }
.team-card:nth-child(2){ background:var(--electric); transform:translateY(35px); }
.team-photo{ border-radius:50%!important; background:var(--acid)!important; color:var(--night)!important; }

@media(max-width:700px){
  .page-hero{ min-height:62svh; border-radius:0 0 80px 20px; }
  .page-hero h1{ font-size:15vw; }
  .svc-row{ grid-template-columns:35px 1fr 44px; min-height:105px; }
  .svc-row h3{ font-size:9.3vw; }
  .svc-row p,.svc-row .thumb{ display:none; }
  .svc-row .arrow{ width:38px; height:38px; }
  #monu-contact-form{ transform:none; }
  .team-card:nth-child(2){ transform:none; }
}

/* ---------- chromatic type / every accent is dimensional ---------- */
:root{
  --type-gradient:linear-gradient(112deg,#142961 0%,#284ba8 36%,#765cff 68%,#b8e94b 100%);
  --type-gradient-bright:linear-gradient(112deg,#d8ff52 0%,#77d8ff 34%,#8a72ff 67%,#f4f2ff 100%);
}
.gold,
.ember,
.hero .sub,
.hero-index,
.hero-punch,
.eyebrow,
.mono-list-idx,
.diff-num,
.quote-band cite,
.contact-info-card h4,
.form-field label,
.exp-manifesto em,
.exp-reel-statement i,
.exp-service h2 i,
.exp-machine-copy h2 i,
.exp-trust blockquote i,
.exp-final-small,
.page-hero .crumb,
.svc-row:hover h3{
  color:transparent!important;
  background-image:var(--type-gradient);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section--dark .eyebrow,
.section--panel .eyebrow,
.hero .sub,
.hero-index,
.exp-final-small,
.contact-grid .eyebrow,
.contact-info-card h4,
#monu-contact-form .form-field label{
  background-image:var(--type-gradient-bright);
}
.exp-machine .exp-kicker,
.exp-process .exp-kicker{
  color:var(--acid);
  background:none;
  -webkit-text-fill-color:currentColor;
}
.hero-punch,
.exp-machine-copy h2 i,
.exp-trust blockquote i{
  background-image:var(--type-gradient-bright);
}
.kinetic-track span{
  color:transparent;
  background-image:linear-gradient(90deg,var(--navy),#3153ad 45%,#7554cc 78%,var(--navy));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.exp-final h2 .orb-ink{
  color:transparent;
  background-image:var(--type-gradient-bright);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.exp-final h2 .orb-ink::after{
  background:none;
  color:#fff;
  -webkit-text-fill-color:#fff;
}

/* ---------- event pulse / one continuous journey ---------- */
.event-pulse{
  position:fixed; z-index:1001; left:0; right:0; top:0; height:3px;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.event-pulse span{
  display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--acid),#77d8ff 38%,#8769ff 70%,var(--acid));
  box-shadow:0 0 18px rgba(119,216,255,.55); will-change:transform;
}

/* richer depth without sacrificing the graphic silhouette */
.hero-stage::before{
  content:""; position:absolute; z-index:3; inset:-20%; pointer-events:none;
  background:radial-gradient(circle at calc(50% + var(--mx)*18%) calc(50% + var(--my)*18%),rgba(255,255,255,.18),transparent 24%);
  mix-blend-mode:soft-light;
}
.hero.hero--experience p.desc{
  padding:15px 17px; margin-left:-17px;
  background:rgba(6,9,20,.44); border:1px solid rgba(255,255,255,.13);
  border-radius:24px; backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 18px 55px rgba(0,0,0,.16);
}
.exp-shot::before{
  content:""; position:absolute; z-index:3; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(125deg,rgba(216,255,82,.28),transparent 30%,rgba(89,109,255,.3));
  transition:opacity .6s var(--ease);
  mix-blend-mode:color;
}
.exp-shot:hover::before{ opacity:1; }
@media(max-width:600px){
  .hero.hero--experience p.desc{ max-width:82%; margin-left:0; padding:13px 14px; font-size:14px; }
  .hero-worlds{ right:14px; top:14%; max-width:calc(100% - 28px); transform:none; }
  .hero-worlds button{ padding:8px 9px; font-size:7.5px; }
}

/* ---------- opening choreography ---------- */
.hero-stage{ clip-path:inset(48% 48% 48% 48% round 50%); }
.hero.hero--experience h1 span,
.hero-index,
.hero-bottom{ opacity:0; transform:translateY(34px); }
body.is-ready .hero-stage{
  clip-path:inset(0 0 0 0 round 0);
  transition:clip-path 1.35s cubic-bezier(.16,.84,.22,1),transform .9s cubic-bezier(.2,.8,.2,1),border-radius .5s linear;
}
body.is-ready .hero.hero--experience h1 span,
body.is-ready .hero-index,
body.is-ready .hero-bottom{ opacity:1; transform:none; transition:opacity .75s var(--ease),transform .95s var(--ease); }
body.is-ready .hero-index{ transition-delay:.28s; }
body.is-ready .hero.hero--experience h1 span:nth-child(1){ transition-delay:.38s; }
body.is-ready .hero.hero--experience h1 span:nth-child(2){ transition-delay:.48s; }
body.is-ready .hero.hero--experience h1 span:nth-child(3){ transition-delay:.58s; }
body.is-ready .hero-bottom{ transition-delay:.7s; }

/* ---------- live chapter rail ---------- */
.scene-rail{
  --scene:0; position:fixed; z-index:180; right:17px; top:50%; transform:translateY(-50%);
  display:grid; justify-items:center; gap:8px; color:rgba(255,255,255,.72);
  font:500 9px/1 var(--mono); letter-spacing:.08em; mix-blend-mode:difference;
}
.scene-rail i{ position:relative; width:1px; height:86px; background:rgba(255,255,255,.28); }
.scene-rail i::after{
  content:""; position:absolute; left:-1px; top:0; width:3px; height:100%; background:#fff;
  transform:scaleY(var(--scene)); transform-origin:top; transition:transform .65s var(--ease);
}
.scene-rail b{
  position:absolute; right:20px; top:50%; width:max-content; transform:translateY(-50%) rotate(-90deg);
  transform-origin:right center; font:inherit; text-transform:uppercase; color:#fff;
}
.scene-now{ color:var(--acid); }
@media(max-width:800px){ .scene-rail{ display:none; } }
@media(prefers-reduced-motion:reduce){
  .hero-stage{ clip-path:none; }
  .hero.hero--experience h1 span,.hero-index,.hero-bottom{ opacity:1; transform:none; }
}

/* ---------- project portal / enquiry becomes an experience ---------- */
body.portal-open{ overflow:hidden; }
.project-portal{
  position:fixed; z-index:900; inset:0; display:grid; grid-template-rows:auto 1fr;
  padding:26px clamp(24px,5vw,80px) 42px; color:#fff; background:var(--navy);
  opacity:0; visibility:hidden; clip-path:circle(0 at calc(100% - 7vw) calc(100% - 8vw));
  transition:opacity .25s,visibility .25s,clip-path 1s cubic-bezier(.16,.84,.22,1);
}
.project-portal::before{
  content:""; position:absolute; width:64vw; aspect-ratio:1; right:-20vw; bottom:-32vw;
  border-radius:43% 57% 34% 66% / 56% 31% 69% 44%;
  background:radial-gradient(circle at 30% 28%,#4764c5,#071b4b 58%,#03091b 78%); opacity:.8;
  animation:morph 11s ease-in-out infinite alternate;
}
.project-portal.is-open{ opacity:1; visibility:visible; clip-path:circle(150% at calc(100% - 7vw) calc(100% - 8vw)); }
.portal-close{
  position:absolute; z-index:5; right:25px; top:22px; width:52px; height:52px; border:1px solid rgba(255,255,255,.35);
  border-radius:50%; background:transparent; color:#fff; font:300 31px/1 var(--sans); transition:transform .35s,background .3s;
}
.portal-close:hover{ transform:rotate(90deg); background:#fff; color:var(--navy); }
.portal-meter{ position:absolute; left:0; right:0; top:0; height:4px; background:rgba(255,255,255,.1); }
.portal-meter span{ display:block; width:100%; height:100%; transform:scaleX(.333); transform-origin:left; background:linear-gradient(90deg,var(--acid),#77d8ff,#9279ff); transition:transform .65s var(--ease); }
.portal-meta{ position:relative; z-index:2; display:flex; justify-content:space-between; padding-right:75px; font:10px/1 var(--mono); letter-spacing:.11em; color:#b9c2dc; }
.portal-meta b{ font-weight:400; }.portal-meta i{ color:var(--acid); font-style:normal; }
#monu-project-form{ position:relative; z-index:2; min-height:0; }
.portal-step{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; max-width:1250px; margin:auto;
  opacity:0; visibility:hidden; transform:translateY(45px) scale(.985); transition:opacity .45s,transform .7s var(--ease),visibility .45s;
}
.portal-step.is-active{ opacity:1; visibility:visible; transform:none; }
.portal-kicker{ margin-bottom:3vh; font:10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--acid); }
.portal-step h2{ max-width:12ch; margin:0 0 5vh; font-size:clamp(54px,9vw,135px); line-height:.78; letter-spacing:-.08em; text-transform:uppercase; }
.portal-step h2 em{ color:var(--acid); font-style:normal; }
.portal-choices{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.portal-choices button{
  min-height:125px; padding:20px; border:1px solid rgba(255,255,255,.24); border-radius:var(--g2); color:#fff; background:rgba(255,255,255,.025);
  font:500 clamp(13px,1.35vw,19px)/1.15 var(--display); text-align:left; transition:background .35s,color .35s,transform .35s,border-radius .45s;
}
.portal-choices button:hover,.portal-choices button.is-selected{ background:var(--acid); color:var(--navy); transform:translateY(-8px); border-radius:50% 50% var(--g2) var(--g2); }
.portal-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.portal-fields--2{ grid-template-columns:1fr 1fr; max-width:750px; }
.portal-step label{ display:block; }
.portal-step label > span{ display:block; margin-bottom:8px; font:9px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:#b9c2dc; }
.portal-step input,.portal-step textarea{
  width:100%; padding:14px 2px; border:0; border-bottom:1px solid rgba(255,255,255,.4); border-radius:0;
  color:#fff; background:transparent; font:500 clamp(18px,2vw,27px)/1.2 var(--display); outline:none;
}
.portal-step input:focus,.portal-step textarea:focus{ border-color:var(--acid); }
.portal-step input[type=date]{ color-scheme:dark; }
.portal-wide{ max-width:900px; margin-top:4vh; }
.portal-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:5vh; }
.portal-actions button{ padding:16px 25px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:transparent; color:#fff; font:500 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.portal-actions button:last-child{ background:var(--acid); color:var(--navy); border-color:var(--acid); }
.portal-status{ margin-top:18px; color:var(--acid); font:11px/1.4 var(--mono); }
.project-portal.is-sent .portal-step h2{ opacity:.25; }
@media(max-width:760px){
  .project-portal{ padding:22px 18px 25px; }
  .portal-meta{ padding-right:60px; }
  .portal-step{ justify-content:flex-start; padding-top:13vh; overflow-y:auto; }
  .portal-step h2{ font-size:13.5vw; margin-bottom:4vh; }
  .portal-choices{ grid-template-columns:1fr 1fr; }
  .portal-choices button{ min-height:85px; padding:15px; }
  .portal-choices button:last-child{ grid-column:1/3; }
  .portal-fields,.portal-fields--2{ grid-template-columns:1fr; gap:18px; }
  .portal-wide{ margin-top:25px; }
  .portal-actions{ padding-bottom:24px; }
}

/* ---------- contextual studio cursor ---------- */
@media(pointer:fine){
  .monu-cursor{
    position:fixed; left:0; top:0; z-index:1000; pointer-events:none;
    width:18px; height:18px; border-radius:46% 54% 58% 42% / 52% 42% 58% 48%;
    background:var(--acid); opacity:0; display:grid; place-items:center;
    transition:width .38s var(--ease),height .38s var(--ease),opacity .2s,background .3s,border-radius .4s;
    mix-blend-mode:difference; will-change:transform;
  }
  .monu-cursor.is-seen{ opacity:1; }
  .monu-cursor span{ opacity:0; color:#07132f; font:500 9px/1 var(--mono); letter-spacing:.08em; transition:opacity .2s; }
  .monu-cursor.is-active{
    width:76px; height:76px; background:#fff;
    border-radius:42% 58% 65% 35% / 38% 46% 54% 62%;
  }
  .monu-cursor.is-active span{ opacity:1; }
  body:has(.monu-cursor.is-seen) .exp-shot,
  body:has(.monu-cursor.is-seen) .exp-service,
  body:has(.monu-cursor.is-seen) .exp-final-link,
  body:has(.monu-cursor.is-seen) .btn{ cursor:none; }
}