/* =========================================================================
   MBC — styles.css
   A premium black / white / gold design system shared across all pages.
   Mobile-first. Custom properties, grid/flex, sharp corners, editorial light
   body against a dark signature hero.
   ========================================================================= */

/* ----------------------------------------------------------------- TOKENS */
:root {
  /* Palette */
  --night:        #08080A;   /* hero sky top / deepest black */
  --night-2:      #101016;   /* slate, lower sky / dark sections */
  --night-3:      #17171f;
  --ink:          #1a180f;   /* primary text on light (warm near-black) */
  --ink-soft:     #5b5547;   /* muted secondary text (>=4.5:1 on paper) */
  --ink-faint:    #8c8472;   /* hairline labels, captions (use large only) */
  --bg:           #ece3cf;   /* PAGE background — warm beige-white ("toilet paper") */
  --paper:        #faf6ec;   /* card / surface — warm white that lifts off the cream */
  --paper-2:      #e3d8bf;   /* alternating section — deeper warm band */
  --paper-3:      #f1e8d4;   /* warm panel */
  --gold:         #c9a24b;   /* signature gold — accents, dividers, on dark */
  --gold-hi:      #e6c87f;   /* lighter gold highlight */
  --gold-deep:    #a8842f;   /* deeper gold for borders */
  --gold-text:    #715c10;   /* accessible gold for small TEXT on warm light (>=4.5:1 on cream) */
  --line:         rgba(20,20,15,.12);   /* hairline on light */
  --line-strong:  rgba(20,20,15,.22);
  --line-gold:    rgba(201,162,75,.45);
  --line-dark:    rgba(255,255,255,.14); /* hairline on dark */

  /* Type */
  --serif: "Playfair Display", "Georgia", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.6rem, 6.2vw, 5rem);
  --fs-h1:      clamp(2.2rem, 5vw, 3.6rem);
  --fs-h2:      clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3:      clamp(1.3rem, 2vw, 1.65rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:    1.0625rem;     /* 17px */
  --fs-small:   0.9375rem;
  --fs-label:   0.75rem;

  /* Spacing & layout */
  --container: 1180px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --r:    4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(20,20,15,.05), 0 2px 8px rgba(20,20,15,.05);
  --shadow-md: 0 6px 18px rgba(20,20,15,.07), 0 18px 48px rgba(20,20,15,.08);
  --shadow-gold: 0 10px 40px rgba(201,162,75,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .35s var(--ease);

  --nav-h: 76px;
}

/* ------------------------------------------------------------------ RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select, button { font: inherit; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: rgba(201,162,75,.28); color: var(--ink); }

/* ----------------------------------------------------------- TYPOGRAPHY */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p  { max-width: 68ch; }

.display { font-family: var(--serif); font-size: var(--fs-display); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.6; }

/* small uppercase eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-deep);
  display: inline-block;
}
.eyebrow--center { justify-content: center; }
.eyebrow--ondark { color: var(--gold-hi); }
.eyebrow--ondark::before { background: var(--gold); }

.gold-word { color: var(--gold-text); }
.on-dark .gold-word, .gold-word--bright { color: var(--gold); }

/* --------------------------------------------------------------- LAYOUT */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); position: relative; }
:where(section[id], [id].anchor) { scroll-margin-top: calc(var(--nav-h) + 14px); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--night-2); color: #f4f2ec; }
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 1.1rem; }
.section-head h2 { margin-top: 1rem; }

.hairline { height: 1px; background: var(--line); border: 0; }
.hairline--gold { background: linear-gradient(90deg, transparent, var(--line-gold) 18%, var(--line-gold) 82%, transparent); }

/* skip link */
.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r);
  z-index: 2000; transition: top .2s var(--ease); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------- BRAND */
.brand { display: inline-flex; flex-direction: column; line-height: 1; gap: .18rem; }
.brand__mark {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: .02em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand__sub {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-left: .12em;
}
.on-dark .brand__sub, .brand--ondark .brand__sub { color: var(--gold-hi); opacity: .85; }

/* --------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  padding: .9rem 1.6rem; border-radius: var(--r);
  transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
  will-change: transform; text-align: center; cursor: pointer;
  border: 1px solid transparent;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
  color: #1d1606;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { box-shadow: var(--shadow-gold); transform: translateY(-2px); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-2px); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--ghost-light { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color:#fff; }

.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--gold-text);
  border-bottom: 1px solid var(--line-gold); padding-bottom: 2px; width: fit-content;
  transition: gap var(--t), color var(--t), border-color var(--t);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t); }
.link-arrow:hover { gap: .75rem; color: var(--gold-deep); border-color: var(--gold-deep); }
.link-arrow:hover svg { transform: translateX(3px); }
.on-dark .link-arrow { color: var(--gold-hi); border-color: var(--line-gold); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .32rem .6rem; border-radius: var(--r-pill);
  background: rgba(201,162,75,.14); color: var(--gold-text); border: 1px solid var(--line-gold);
}
.badge--soft { background: rgba(20,20,15,.05); color: var(--ink-soft); border-color: var(--line); }
.on-dark .badge { color: var(--gold-hi); background: rgba(201,162,75,.16); }

/* =======================================================================
   NAVBAR
   ======================================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--t), box-shadow var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}
.nav__inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* transparent over hero */
.nav--transparent .brand__mark { filter: drop-shadow(0 1px 8px rgba(0,0,0,.5)); }
.nav--transparent .nav__link,
.nav--transparent .lang-toggle { color: #f3f1ea; }
.nav--transparent .nav__link::after { background: var(--gold-hi); }

/* solid (scrolled or inner pages) */
.nav--solid {
  background: rgba(247,242,231,.85);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(20,20,15,.06);
  border-bottom-color: var(--line);
}
.nav--solid .nav__link, .nav--solid .lang-toggle { color: var(--ink); }

.nav__links { display: none; align-items: center; gap: 1.9rem; }
.nav__link {
  position: relative; font-size: .95rem; font-weight: 500; letter-spacing: .01em;
  padding: .4rem 0; color: var(--ink); transition: color var(--t);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--gold-deep); transition: width var(--t);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

.nav__right { display: flex; align-items: center; gap: .9rem; }
.nav__cta { display: none; }

/* language switcher */
.lang {
  position: relative;
}
.lang-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  padding: .5rem .6rem; border-radius: var(--r); color: var(--ink);
  transition: background var(--t), color var(--t);
}
.lang-toggle svg { width: 16px; height: 16px; opacity: .8; }
.lang-toggle .lang-caret { width: 12px; height: 12px; transition: transform var(--t); }
.lang[data-open="true"] .lang-caret { transform: rotate(180deg); }
.nav--transparent .lang-toggle:hover { background: rgba(255,255,255,.14); }
.nav--solid .lang-toggle:hover { background: rgba(20,20,15,.05); }

.lang-menu {
  position: absolute; right: 0; top: calc(100% + .5rem);
  min-width: 168px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: .35rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--t); z-index: 1200;
}
.lang[data-open="true"] .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
  padding: .6rem .7rem; border-radius: var(--r); font-size: .9rem; color: var(--ink);
  transition: background var(--t);
}
.lang-menu button:hover { background: var(--paper-2); }
.lang-menu button[aria-current="true"] { color: var(--gold-text); font-weight: 600; }
.lang-menu button[aria-current="true"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.lang-menu .check { width: 7px; height: 7px; }

/* mobile menu toggle */
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r); color: inherit;
}
.nav__toggle svg { width: 24px; height: 24px; }
.nav__toggle .icon-close { display: none; }
body.menu-open .nav__toggle .icon-open { display: none; }
body.menu-open .nav__toggle .icon-close { display: block; }

/* mobile drawer */
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 999;
  background: rgba(8,8,10,.97);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2rem var(--gutter) 2.5rem;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .45s var(--ease), opacity .35s var(--ease), visibility .35s;
}
body.menu-open .mobile-menu { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu__links { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; }
.mobile-menu__links a {
  font-family: var(--serif); font-size: 1.8rem; color: #f4f2ec; padding: .6rem 0;
  border-bottom: 1px solid var(--line-dark); transition: color var(--t), padding-left var(--t);
}
.mobile-menu__links a:hover { color: var(--gold-hi); padding-left: .5rem; }
.mobile-menu__links a[aria-current="page"] { color: var(--gold-hi); }
.mobile-menu__foot { display: flex; flex-direction: column; gap: 1.25rem; }
.mobile-menu .btn { width: 100%; }

/* =======================================================================
   HERO — night skyline
   ======================================================================= */
.hero {
  position: relative; min-height: 100svh; min-height: 100vh;
  display: flex; align-items: center;
  background: var(--night);
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero__sky {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(201,162,75,.30), rgba(201,162,75,.06) 40%, transparent 62%),
    linear-gradient(180deg, #05050a 0%, #08080f 42%, #11101a 74%, #1b1626 100%);
}
.hero__stars { position: absolute; inset: 0; z-index: -3; opacity: .9; }
.hero__skyline { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -2; width: 100%; height: auto; }
.hero__skyline svg { width: 100%; height: auto; display: block; }
.hero__glow {
  position: absolute; left: 50%; bottom: 0; translate: -50% 30%;
  width: 90vw; height: 38vh; z-index: -2;
  background: radial-gradient(ellipse at center, rgba(201,162,75,.34), transparent 68%);
  filter: blur(8px); pointer-events: none;
}
/* fade from skyline into the light body below */
.hero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(11,10,18,.0) 30%, rgba(8,8,12,.0));
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; padding-top: var(--nav-h); width: 100%; }
.hero__content { max-width: 760px; }
.hero h1 {
  font-size: var(--fs-display); font-weight: 800; line-height: 1.06; letter-spacing: -0.025em;
  margin: 1.25rem 0 0;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero h1 .skyline-word {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin-top: 1.5rem; max-width: 60ch;
  font-size: var(--fs-lead); line-height: 1.6; color: rgba(244,242,236,.9);
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0; z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.hero__scroll .mouse {
  width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 12px;
  position: relative;
}
.hero__scroll .mouse::after {
  content: ""; position: absolute; left: 50%; top: 7px; translate: -50% 0;
  width: 3px; height: 7px; border-radius: 2px; background: var(--gold-hi);
  animation: scrollwheel 1.8s var(--ease) infinite;
}
@keyframes scrollwheel { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* parallax layers get their own compositor layer for smooth transforms */
.hero .sky-layer { will-change: transform; }

/* twinkle */
.win { transition: opacity .9s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .hero__scroll .mouse::after { animation: none; opacity: .8; top: 12px; }
  .hero .sky-layer { will-change: auto; }
  .win { transition: none; }
}

/* =======================================================================
   WHAT MBC IS
   ======================================================================= */
.about__grid { display: grid; gap: clamp(1.5rem,4vw,3rem); align-items: end; }
.about__statement {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.28; letter-spacing: -0.01em; max-width: 20ch;
}
.about__statement .em { color: var(--gold-text); }
.about__body { color: var(--ink-soft); font-size: var(--fs-lead); }
@media (min-width: 880px) {
  .about__grid { grid-template-columns: 1.2fr 1fr; }
}

/* =======================================================================
   SERVICES
   ======================================================================= */
.services__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
.svc-card {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.1rem);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  overflow: hidden;
}
.svc-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transition: width var(--t);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.svc-card:hover::before { width: 100%; }
.svc-card__icon {
  width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(201,162,75,.16), rgba(201,162,75,.06));
  border: 1px solid var(--line-gold); color: var(--gold-deep); margin-bottom: 1.2rem;
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card h3 { margin-bottom: .55rem; }
.svc-card p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.6; max-width: 42ch; }
.svc-card__no { position: absolute; right: 1.1rem; top: .9rem; font-family: var(--serif); font-size: .9rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
@media (min-width: 620px)  { .services__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .services__grid { grid-template-columns: repeat(3,1fr); } }

/* =======================================================================
   WHY MBC  (dark band)
   ======================================================================= */
.why { background: var(--night-2); color: #f4f2ec; position: relative; overflow: hidden; }
.why::after {
  content:""; position:absolute; right:-10%; top:-20%; width:50%; height:140%;
  background: radial-gradient(circle at center, rgba(201,162,75,.12), transparent 65%); pointer-events:none;
}
.why__grid { display: grid; gap: clamp(2rem,5vw,3.5rem); position: relative; z-index:1; }
.why__lead h2 { color:#fff; }
.why__body { color: rgba(244,242,236,.82); font-size: var(--fs-lead); margin-top: 1.2rem; }
.why__quiet {
  margin-top: 1.5rem; padding-left: 1.1rem; border-left: 2px solid var(--gold);
  color: var(--gold-hi); font-style: italic; font-family: var(--serif); font-size: 1.15rem; line-height: 1.5;
  max-width: 52ch;
}
.why__points { display: grid; gap: 1rem; }
.why-point {
  display: flex; gap: 1rem; padding: 1.3rem; border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  background: rgba(255,255,255,.02); transition: border-color var(--t), background var(--t);
}
.why-point:hover { border-color: var(--line-gold); background: rgba(201,162,75,.05); }
.why-point__num { font-family: var(--serif); color: var(--gold-hi); font-size: 1.4rem; line-height:1; font-variant-numeric: tabular-nums; }
.why-point h3 { font-size: 1.1rem; color:#fff; margin-bottom:.3rem; }
.why-point p { color: rgba(244,242,236,.72); font-size: var(--fs-small); }
@media (min-width: 920px) { .why__grid { grid-template-columns: 1.05fr .95fr; align-items: center; } }

/* =======================================================================
   WHAT WE BUILD — sample concept mockups
   ======================================================================= */
.work__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .work__grid { grid-template-columns: repeat(2,1fr); } }

.mock {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.mock:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.mock__frame {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.mock__bar {
  position: absolute; inset: 0 0 auto 0; height: 30px; background: #ece8e0; z-index: 3;
  display: flex; align-items: center; gap: 6px; padding-inline: 12px; border-bottom: 1px solid var(--line);
}
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfc8ba; display: inline-block; }
.mock__bar span { margin-left:auto; font-size:.62rem; letter-spacing:.05em; color:#9a9384; font-family: var(--sans); }
.mock__art { position: absolute; inset: 30px 0 0 0; }
.mock__tag {
  position: absolute; left: 12px; top: 40px; z-index: 4;
}
.mock__body { padding: 1.3rem clamp(1.1rem,2.5vw,1.6rem) 1.5rem; }
.mock__body h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.mock__body p { color: var(--ink-soft); font-size: var(--fs-small); max-width: 46ch; }
.work__disclaimer {
  margin-top: 1.75rem; display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; color: var(--ink-soft);
}
.work__disclaimer svg { width: 16px; height: 16px; color: var(--gold-deep); flex: none; }

/* =======================================================================
   BRANCHES & COLLABORATIONS
   ======================================================================= */
.branches__group + .branches__group { margin-top: clamp(2.5rem,5vw,3.5rem); }
.group-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.group-head h3 { font-size: clamp(1.4rem,2.4vw,1.9rem); }
.group-head p { color: var(--ink-soft); font-size: var(--fs-small); }
.branch-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .branch-grid { grid-template-columns: repeat(2,1fr); } }

.branch-card {
  display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1.4rem,3vw,2rem); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); position: relative; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.branch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.branch-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.branch-card__logo {
  width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center;
  border: 1px solid var(--line-gold); background: var(--paper-2); color: var(--gold-deep); flex: none;
}
.branch-card__logo svg { width: 24px; height: 24px; }
.branch-card h4 { font-family: var(--serif); font-size: 1.3rem; }
.branch-card p { color: var(--ink-soft); font-size: var(--fs-small); }
.branch-card--soon { background: var(--paper-2); }
.branch-card--soon .branch-card__logo { opacity: .7; }

/* =======================================================================
   PROCESS
   ======================================================================= */
.process__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 680px) { .process__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px){ .process__grid { grid-template-columns: repeat(4,1fr); } }
.step {
  position: relative; padding: 1.6rem 1.4rem; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--paper);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.step:hover { transform: translateY(-4px); border-color: var(--line-gold); box-shadow: var(--shadow-sm); }
.step__no {
  font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums; opacity: .85;
}
.step h3 { margin: .75rem 0 .45rem; font-size: 1.2rem; }
.step p { color: var(--ink-soft); font-size: var(--fs-small); }
.step__line { position:absolute; top: 2.6rem; right:-.7rem; width:1.4rem; height:1px; background: var(--line-gold); display:none; }
@media (min-width:1040px){ .process__grid .step:not(:last-child) .step__line { display:block; } }
.process__note { margin-top: 1.75rem; font-size: .85rem; color: var(--ink-soft); display:inline-flex; gap:.5rem; align-items:center; }
.process__note svg { width:16px; height:16px; color: var(--gold-deep); }

/* =======================================================================
   CONTACT
   ======================================================================= */
.contact { background: var(--night); color: #f4f2ec; position: relative; overflow: hidden; }
.contact__bg { position:absolute; inset:0; z-index:0; opacity:.5;
  background: radial-gradient(80% 60% at 100% 0%, rgba(201,162,75,.16), transparent 55%),
              radial-gradient(70% 60% at 0% 100%, rgba(201,162,75,.10), transparent 55%); }
.contact__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem,5vw,4rem); }
@media (min-width: 920px) { .contact__grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.contact__intro h2 { color:#fff; }
.contact__intro .lead { color: rgba(244,242,236,.82); }
.contact__points { margin-top: 2rem; display:grid; gap:1rem; }
.contact__point { display:flex; gap:.8rem; align-items:flex-start; color: rgba(244,242,236,.85); font-size: var(--fs-small); }
.contact__point svg { width:20px; height:20px; color: var(--gold-hi); flex:none; margin-top:2px; }

.form { background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2.2rem); }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.field label { font-size: .82rem; font-weight: 600; letter-spacing: .03em; color: rgba(244,242,236,.92); display:flex; gap:.4rem; align-items:baseline; }
.field label .opt { font-weight: 400; font-size: .72rem; color: rgba(244,242,236,.8); letter-spacing:.02em; }
.field input, .field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r);
  background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); color: #fff;
  transition: border-color var(--t), background var(--t), box-shadow var(--t); font-size: 1rem;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(244,242,236,.66); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(201,162,75,.3); }
.field input:user-invalid, .field textarea:user-invalid,
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #e0816f; }
.field__err { font-size: .78rem; color: #f0a596; min-height: 0; opacity: 0; transition: opacity var(--t); }
.field__err.show { opacity: 1; }

/* intl-tel-input on dark */
.iti { width: 100%; }
.iti__tel-input, .iti input { width: 100%; }
.iti--allow-dropdown .iti__country-container { background: rgba(255,255,255,.05); }
.iti__dropdown-content { color: var(--ink); }
.iti__search-input { color: var(--ink); }

.form__submit { margin-top: .5rem; }
.form__status { margin-top: 1rem; font-size: .9rem; }
.form__status.is-success { color: #bfe6b6; }
.form__status.is-error { color: #f0a596; }
.form__privacy { margin-top: .9rem; font-size: .78rem; color: rgba(244,242,236,.82); display:flex; gap:.5rem; align-items:center; }
.form__privacy svg { width:15px; height:15px; color: var(--gold-hi); flex:none; }

/* =======================================================================
   FOOTER
   ======================================================================= */
.footer { background: var(--night-2); color: #cfcdc6; padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer a { color: #cfcdc6; transition: color var(--t); }
.footer a:hover { color: var(--gold-hi); }
.footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.footer__brand .brand__mark { font-size: 1.9rem; }
.footer__blurb { margin-top: 1rem; max-width: 34ch; font-size: var(--fs-small); color: #a9a79f; }
.footer__tag { margin-top: 1.1rem; font-size: .82rem; letter-spacing: .04em; color: var(--gold-hi); display:flex; align-items:center; gap:.5rem; }
.footer__tag svg { width:16px; height:16px; }
.footer__col h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #8a887f; margin-bottom: 1rem; font-weight:700; }
.footer__col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer__col a { font-size: .92rem; }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: .8rem; color: #8a887f;
}
.footer__bottom .made { color:#8a887f; }
.footer__langwrap { display:flex; align-items:center; gap:.5rem; }
.footer .lang-menu { top: auto; bottom: calc(100% + .5rem); }
.footer .lang-toggle { color: #cfcdc6; border: 1px solid var(--line-dark); }
.footer .lang-toggle:hover { background: rgba(255,255,255,.06); color: var(--gold-hi); }

/* =======================================================================
   PAGE HEADER (inner pages: team / join)
   ======================================================================= */
.page-hero {
  position: relative; background: var(--night); color: #fff; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3rem,7vw,6rem));
  padding-bottom: clamp(3rem,7vw,5.5rem);
}
.page-hero__bg { position:absolute; inset:0; z-index:0;
  background:
   radial-gradient(90% 70% at 80% -10%, rgba(201,162,75,.22), transparent 55%),
   radial-gradient(70% 60% at 0% 120%, rgba(201,162,75,.12), transparent 55%),
   linear-gradient(180deg, #06060c, #11101a);
}
.page-hero__skyline { position:absolute; left:0; right:0; bottom:-1px; z-index:0; opacity:.5; }
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero h1 { font-size: var(--fs-h1); margin-top: 1.1rem; }
.page-hero .lead { color: rgba(244,242,236,.85); margin-top: 1.2rem; }

/* =======================================================================
   TEAM
   ======================================================================= */
.team-group + .team-group { margin-top: clamp(2.5rem,5vw,4rem); }
.team-group__head { display:flex; align-items:baseline; gap:1rem; margin-bottom:1.5rem; }
.team-group__head h2 { font-size: clamp(1.5rem,2.6vw,2rem); }
.team-group__head .count { font-size:.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.team-grid { display:grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width:640px){ .team-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1000px){ .team-grid { grid-template-columns: repeat(3,1fr); } }
.person {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,1.9rem);
  background: var(--paper); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column; gap: 1rem; height: 100%;
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.person__avatar {
  width: 60px; height: 60px; border-radius: 50%; display:grid; place-items:center;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--gold-deep);
  background: linear-gradient(180deg, rgba(201,162,75,.18), rgba(201,162,75,.05));
  border: 1px solid var(--line-gold); letter-spacing: .02em;
}
.person__name { font-family: var(--serif); font-size: 1.35rem; }
.person__attrs { display:flex; flex-direction:column; gap:.55rem; margin-top:.2rem; }
.attr { display:flex; flex-direction:column; gap:.1rem; }
.attr__label { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft); font-weight:700; }
.attr__value { font-size:.96rem; font-weight:600; color: var(--ink); }
.attr__value--rank { color: var(--gold-text); }
.person__focus { color: var(--ink-soft); font-size: var(--fs-small); margin-top:auto; padding-top:.6rem; border-top:1px solid var(--line); }

/* =======================================================================
   JOIN — ladder
   ======================================================================= */
.values-grid { display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:760px){ .values-grid { grid-template-columns: repeat(3,1fr); } }
.value-card { padding: clamp(1.4rem,3vw,1.9rem); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); }
.value-card__icon { width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;background:linear-gradient(180deg,rgba(201,162,75,.16),rgba(201,162,75,.05));border:1px solid var(--line-gold);color:var(--gold-deep);margin-bottom:1rem; }
.value-card__icon svg{width:22px;height:22px;}
.value-card h3 { font-size:1.15rem; margin-bottom:.4rem; }
.value-card p { color:var(--ink-soft); font-size:var(--fs-small); }

.ladder { position: relative; margin-top: 1rem; display: grid; gap: 0; }
.rung {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.rung:first-child { border-top: 1px solid var(--line); }
.rung__index {
  display:grid; place-items:center; width: 48px; height: 48px; flex:none;
  border-radius: 50%; border:1px solid var(--line-gold);
  font-family: var(--serif); font-weight:700; font-variant-numeric: tabular-nums;
  color: var(--gold-deep); background: var(--paper-2);
  transition: background var(--t), color var(--t), transform var(--t);
}
.rung__main h3 { font-size: 1.25rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.rung__main p { color: var(--ink-soft); font-size: var(--fs-small); margin-top:.35rem; }
.rung__rank-en { font-size:.72rem; color: var(--ink-faint); font-weight:500; letter-spacing:.02em; }
.rung:hover .rung__index { background: var(--gold); color:#1d1606; transform: scale(1.05); }
.rung--top { background: linear-gradient(90deg, rgba(201,162,75,.07), transparent); }
.rung--top .rung__index { background: linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); color:#1d1606; border-color:var(--gold); }

.cta-band {
  background: var(--night-2); color:#f4f2ec; border-radius: var(--r-lg);
  padding: clamp(2rem,5vw,3.5rem); text-align:center; position:relative; overflow:hidden;
}
.cta-band::after{ content:""; position:absolute; inset:0; background: radial-gradient(60% 100% at 50% 0%, rgba(201,162,75,.16), transparent 60%); pointer-events:none; }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; }
.cta-band p { color: rgba(244,242,236,.82); margin: 1rem auto 1.8rem; max-width: 52ch; }

/* generic CTA prompt under team */
.inline-note { margin-top:2rem; font-size:.92rem; color:var(--ink-soft); }
.inline-note a { color: var(--gold-text); border-bottom:1px solid var(--line-gold); font-weight:600; }
.inline-note a:hover { color: var(--gold-deep); }

/* =======================================================================
   REVEAL ANIMATIONS  (progressive enhancement)
   Elements are visible by default; only hidden once JS marks gsap-ready.
   ======================================================================= */
.gsap-ready [data-reveal] { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) {
  .gsap-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* back to top */
.to-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%; display:grid; place-items:center;
  background: var(--ink); color:#fff; box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all var(--t);
}
.to-top.show { opacity:1; visibility:visible; transform: translateY(0); }
.to-top:hover { background:#000; }
.to-top svg { width:20px; height:20px; }

/* helpers */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.mt-cta { margin-top: clamp(2rem,4vw,3rem); }
.center { text-align:center; }

/* desktop nav reveal */
@media (min-width: 980px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none; }
}

/* Screenshot/verification helper (only active with ?noanim) — caps the 100vh
   hero so a single tall-viewport capture can show the whole page. */
html.shot .hero { min-height: 720px; height: 720px; }
html.shot .hero__scroll { display: none; }

/* =======================================================================
   MOTION & 3D DEPTH  (enhanced per ui-ux-pro-max: tasteful, GPU, a11y)
   ======================================================================= */

/* 3D pointer tilt on cards */
[data-tilt] {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* will-change only while actively tilting — avoids ~20 permanent GPU layers at idle */
[data-tilt].is-tilting { transition: box-shadow .3s var(--ease); will-change: transform; }
[data-tilt] .tilt-inner { transform: translateZ(0.01px); }
/* cursor-following sheen */
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), rgba(255,255,255,0) 42%);
  mix-blend-mode: soft-light;
}
[data-tilt].is-tilting .tilt-glare { opacity: .9; }
.on-dark [data-tilt] .tilt-glare,
.why-point .tilt-glare {
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(230,200,127,.4), rgba(230,200,127,0) 45%);
  mix-blend-mode: screen;
}

/* scroll parallax helpers */
[data-parallax] { will-change: transform; }

/* magnetic buttons */
[data-magnetic] { will-change: transform; }

/* marquee band */
.marquee {
  overflow: hidden; background: var(--paper-3);
  border-block: 1px solid var(--line-gold);
  padding-block: 1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee--dark { background: var(--night-2); border-color: var(--line-dark); }
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 2rem; padding-inline: 1.5rem;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem); color: var(--ink); white-space: nowrap;
}
.marquee--dark .marquee__item { color: #f1ecdf; }
.marquee__item::before { content: "✦"; font-style: normal; color: var(--gold-deep); font-size: .62em; margin-right: 2rem; }
.marquee--dark .marquee__item::before { color: var(--gold); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* depth: richer multi-layer shadow on hover for the premium 3D feel */
.svc-card:hover, .mock:hover, .branch-card:hover, .person:hover, .value-card:hover {
  box-shadow: 0 2px 6px rgba(26,24,15,.06), 0 12px 24px rgba(26,24,15,.08), 0 28px 60px rgba(26,24,15,.10);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: none; }
  [data-tilt] { transform: none !important; }
  .tilt-glare { display: none; }
}

/* coarse pointers (touch): no tilt jitter */
@media (pointer: coarse) {
  [data-tilt] { transform: none !important; }
  .tilt-glare { display: none; }
}

/* floating gold depth orbs (decorative, parallax on scroll) */
.section > .container, .why .container, .contact .container { position: relative; z-index: 1; }
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(46px); opacity: .55;
  background: radial-gradient(circle, rgba(201,162,75,.55), rgba(201,162,75,0) 70%);
  will-change: transform;
}
.orb--sm { width: 220px; height: 220px; }
.orb--lg { width: 420px; height: 420px; opacity: .4; }
.on-dark .orb { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .orb { display: none; } }

/* =======================================================================
   V2 — CINEMATIC LAYER (3D hero canvas, smooth-scroll progress, signature
   draw-ons, line-by-line headline masks, pinned process, form underline)
   ======================================================================= */

/* WebGL hero canvas — sits above the static SVG fallback, fades in when ready */
.hero__canvas { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.1s var(--ease); pointer-events: none; }
.hero__canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.hero--3d .hero__canvas { opacity: 1; }

/* gold scroll-progress hairline */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 1600; will-change: transform;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-hi));
}

/* signature gold draw-on hairline under section heads */
.draw-rule {
  display: block; width: 84px; height: 2px; margin-top: 1.5rem; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-deep), rgba(201,162,75,0));
}
.page-hero__inner .draw-rule, .on-dark .draw-rule { background: linear-gradient(90deg, var(--gold-hi), rgba(230,200,127,0)); }

/* line-by-line headline reveal masks */
.rv-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.rv-line-inner { display: block; will-change: transform; }

/* nav active section */
.nav__link.is-active::after { width: 100%; }

/* pinned process — highlight the active step */
#process .step { transition: transform var(--t), border-color var(--t), box-shadow var(--t), opacity var(--t); }
#process .step.is-active { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-6px); }
#process .step.is-active .step__no { color: var(--gold-deep); }

/* contact — gold underline that grows on focus */
.field input, .field textarea {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: border-color var(--t), background var(--t), box-shadow var(--t), background-size .45s var(--ease);
}
.field input:focus, .field textarea:focus { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .draw-rule { transform: scaleX(1); }
  .hero__canvas { display: none; }
  .rv-line-inner { transform: none !important; }
}

/* =======================================================================
   V3 — SIGNATURE GOLD CURSOR
   ======================================================================= */

html.mbc-cursor-on input, html.mbc-cursor-on textarea,
html.mbc-cursor-on select, html.mbc-cursor-on [contenteditable="true"] { cursor: text !important; }

.mbc-spark-canvas { position: fixed; inset: 0; z-index: 99997; pointer-events: none; }
.mbc-gem { position: fixed; left: 0; top: 0; z-index: 99999; pointer-events: none; transition: opacity .2s var(--ease); }
.mbc-gem::before {  /* the faceted gold gem */
  content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px;
  border-radius: 3px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff6da 0%, #e4b04a 45%, #a8842f 100%);
  box-shadow: 0 0 10px 2px rgba(201,162,75,.55), inset 0 0 3px rgba(255,255,255,.7);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.mbc-gem::after {  /* soft glow */
  content: ""; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,75,.35), rgba(201,162,75,0) 70%);
}
.mbc-gem--interactive::before { transform: rotate(45deg) scale(.62); background: linear-gradient(135deg, #ffffff, #e6c87f); }
.mbc-gem--crosshair::before { width: 2px; height: 20px; left: -1px; top: -10px; border-radius: 1px; transform: none; background: var(--gold-hi); box-shadow: 0 0 6px rgba(230,200,127,.8); }
.mbc-gem--crosshair::after { width: 20px; height: 2px; left: -10px; top: -1px; border-radius: 1px; background: var(--gold-hi); box-shadow: 0 0 6px rgba(230,200,127,.8); }
.mbc-gem--hidden, .mbc-gem--out { opacity: 0; }

.mbc-viewfinder { position: fixed; left: 0; top: 0; z-index: 99998; pointer-events: none; opacity: 0; transition: opacity .22s var(--ease); }
.mbc-viewfinder i { position: absolute; width: 11px; height: 11px; }
.mbc-viewfinder i:nth-child(1) { left: 0; top: 0; border-left: 1.5px solid var(--gold); border-top: 1.5px solid var(--gold); }
.mbc-viewfinder i:nth-child(2) { right: 0; top: 0; border-right: 1.5px solid var(--gold); border-top: 1.5px solid var(--gold); }
.mbc-viewfinder i:nth-child(3) { left: 0; bottom: 0; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); }
.mbc-viewfinder i:nth-child(4) { right: 0; bottom: 0; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); }

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .mbc-gem, .mbc-spark-canvas, .mbc-viewfinder { display: none !important; }
  html.mbc-cursor-on, html.mbc-cursor-on * { cursor: auto !important; }
}

/* =======================================================================
   V3 — COOKIE CONSENT
   ======================================================================= */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2200; padding: clamp(1rem,3vw,1.6rem); display: flex; pointer-events: none; }
.consent[hidden] { display: none; }
.consent__card {
  pointer-events: auto; width: 100%; max-width: 430px; background: var(--night-2); color: #f1ecdf;
  border: 1px solid var(--line-dark); border-top: 2px solid var(--gold); border-radius: var(--r-lg);
  padding: clamp(1.1rem,2.5vw,1.5rem); box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform: translateY(22px); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.consent.is-open .consent__card { transform: none; opacity: 1; }
.consent__title { font-family: var(--serif); font-size: 1.2rem; color: #fff; margin-bottom: .4rem; }
.consent__msg { font-size: .88rem; color: rgba(241,236,223,.82); line-height: 1.55; }
.consent__policy { margin-top: .8rem; font-size: .8rem; color: var(--gold-hi); border-color: var(--line-gold); }
.consent__prefs { margin-top: 1rem; display: flex; flex-direction: column; gap: .9rem; border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.consent__opt { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.consent__opt-t { font-weight: 600; font-size: .9rem; color: #fff; }
.consent__opt-d { font-size: .78rem; color: rgba(241,236,223,.72); margin-top: .15rem; line-height: 1.5; }
.consent__always { font-size: .72rem; color: var(--gold-hi); white-space: nowrap; padding-top: .2rem; }
.consent__switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.consent__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.consent__switch span { position: absolute; inset: 0; background: rgba(255,255,255,.16); border-radius: 999px; transition: background var(--t); }
.consent__switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--t); }
.consent__switch input:checked + span { background: var(--gold); }
.consent__switch input:checked + span::after { transform: translateX(20px); }
.consent__switch input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.consent__actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.consent__actions .btn { padding: .62rem 1rem; font-size: .85rem; flex: 1 1 auto; }
/* Reject/Preferences get a visible filled look = equal weight to Accept (GDPR: refusing must be as easy as accepting) */
.consent__actions .btn--ghost { border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.10); color: #f6f2e8; }
.consent__actions .btn--ghost:hover { background: rgba(255,255,255,.18); border-color: var(--gold); color: #fff; }
@media (prefers-reduced-motion: reduce) { .consent__card { transition: opacity .2s linear; transform: none; } }

/* footer: legal links + cookie-settings control */
.footer .footerlink { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.footer .footerlink:hover { color: var(--gold-hi); }

/* =======================================================================
   V3 — LEGAL PAGES (privacy / terms / cookies)
   ======================================================================= */
.legal { padding-top: calc(var(--nav-h) + clamp(2rem,5vw,3.5rem)); padding-bottom: clamp(3rem,7vw,6rem); }
.legal__back { margin-bottom: 1.6rem; }
.legal h1 { font-size: var(--fs-h1); margin: .8rem 0 .6rem; }
.legal__updated { color: var(--ink-soft); font-size: .9rem; }
.legal-notice {
  display: flex; gap: .7rem; align-items: flex-start; margin: 1.6rem 0 2.4rem;
  background: rgba(201,162,75,.1); border: 1px solid var(--line-gold); border-left: 3px solid var(--gold);
  border-radius: var(--r); padding: 1rem 1.1rem; font-size: .9rem; color: var(--ink); line-height: 1.55;
}
.legal-notice svg { width: 20px; height: 20px; color: var(--gold-deep); flex: none; margin-top: 1px; }
.legal-body { max-width: 72ch; }
.legal-body h2 { font-size: 1.3rem; margin: 2.2rem 0 .7rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 1rem; line-height: 1.7; color: var(--ink); max-width: 72ch; }
.legal-body p { margin-bottom: 1rem; }
.legal-body ul { margin: 0 0 1.2rem; padding-left: 0; display: flex; flex-direction: column; gap: .5rem; }
.legal-body li { position: relative; padding-left: 1.3rem; }
.legal-body li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.legal-body strong { color: var(--ink); font-weight: 700; }
.legal-body a { color: var(--gold-text); border-bottom: 1px solid var(--line-gold); }

/* =======================================================================
   V3 — 404
   ======================================================================= */
.nf { position: relative; min-height: 100svh; min-height: 100vh; display: grid; place-items: center; text-align: center;
  background: radial-gradient(120% 80% at 50% 120%, rgba(201,162,75,.28), transparent 60%), linear-gradient(180deg,#06060c,#11101a); color: #fff; overflow: hidden; }
.nf__inner { position: relative; z-index: 2; max-width: 560px; padding: var(--gutter); }
.nf h1 { font-size: clamp(2rem,5vw,3.4rem); margin: 1rem 0; color: #fff; }
.nf p { color: rgba(244,242,236,.82); margin: 0 auto 2rem; max-width: 48ch; }
.nf .eyebrow { justify-content: center; }
.nf__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.nf__sky { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; opacity: .5; }

/* =======================================================================
   HERO SKYLINE — living night animation (CSS, GPU-friendly, a11y-guarded)
   ======================================================================= */
@keyframes win-twinkle { 0%, 100% { opacity: .9; } 48% { opacity: .12; } }
.hero__skyline .win--tw { animation: win-twinkle 3.4s ease-in-out infinite; }

@keyframes aviation { 0%, 42%, 100% { opacity: 1; } 50%, 92% { opacity: .12; } }
.hero__skyline .beacon { animation: aviation 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes star-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }
.hero__skyline .star { animation: star-twinkle 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes moon-glow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.hero__skyline .sky-celestial > circle:first-child { animation: moon-glow 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero__skyline .win--tw,
  .hero__skyline .beacon,
  .hero__skyline .star,
  .hero__skyline .sky-celestial > circle:first-child { animation: none !important; }
}

/* =======================================================================
   HERO — photographic background (real NYC skyline) + readability scrim
   ======================================================================= */
.hero__photo {
  position: absolute; inset: 0; z-index: -3;
  background: #08080a url("hero-nyc.jpg") center 38% / cover no-repeat;
  transform: scale(1.06); transform-origin: 55% 45%;
  animation: hero-ken 32s ease-in-out infinite alternate; will-change: transform;
}
@keyframes hero-ken {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.4%, -1%); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6,6,11,.86) 0%, rgba(6,6,11,.5) 38%, rgba(6,6,11,.12) 66%, rgba(6,6,11,.32) 100%),
    linear-gradient(180deg, rgba(6,6,11,.5) 0%, rgba(6,6,11,0) 26%, rgba(6,6,11,0) 50%, rgba(8,8,12,.5) 80%, var(--bg) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero__photo { animation: none; transform: scale(1.04); } }

/* =======================================================================
   HERO — looping video (crossfade between two stacked videos, trimmed loop)
   ======================================================================= */
.hero__video { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  opacity: 0; transition: opacity 1.4s linear; will-change: opacity;
}
.hero__vid.is-active { opacity: 1; }
.hero__scrim { z-index: -1; }   /* sit the readability scrim above the video */
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } } /* photo fallback */

/* =======================================================================
   FAQ — accordion
   ======================================================================= */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { margin: 0; }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; text-align: left; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.08rem, 2vw, 1.32rem); color: var(--ink); cursor: pointer; transition: color var(--t);
}
.faq__btn:hover { color: var(--gold-text); }
.faq__icon { width: 22px; height: 22px; color: var(--gold-deep); flex: none; transition: transform var(--t); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }   /* + becomes × */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a p { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; max-width: 64ch; padding-bottom: 1.4rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq__a, .faq__icon { transition: none; } }

/* =======================================================================
   MOTION FX  —  audit fixes + curated original animations
   Reveal effects hide only under `.mfx` (added by motion-fx.js) so the page
   is fully visible if JS/motion is off. GPU-friendly: transform/opacity/clip.
   ======================================================================= */

/* ---------- audit fixes (cascade overrides) ---------- */
:root { --gold-text: #6a520f; --ease-back: cubic-bezier(.34,1.56,.64,1); }
.field input:focus, .field textarea:focus {            /* stronger ring on dark + gold seam */
  box-shadow: 0 0 0 3px rgba(201,162,75,.5), inset 0 -2px 0 0 var(--gold-hi);
}
.step__no { line-height: 1.06; }
.mock__bar { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.why-point:hover { box-shadow: var(--shadow-md); }
.to-top { transition: background var(--t), transform var(--t), box-shadow var(--t), opacity var(--t), visibility var(--t); }
.to-top:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.faq__item.is-open .faq__icon { color: var(--gold); }
.field__err { transition: opacity var(--t), transform .3s var(--ease); }

/* ---------- 1. Hero searchlight beam (load) ---------- */
.hero__beam { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__beam::before {
  content: ""; position: absolute; top: -25%; left: 0; width: 38%; height: 150%;
  background: linear-gradient(102deg, transparent, rgba(230,200,127,.10) 44%, rgba(255,243,205,.20) 50%, rgba(230,200,127,.10) 56%, transparent);
  filter: blur(7px); transform: translateX(-160%) rotate(7deg); opacity: 0;
  animation: hero-beam 3.1s .55s cubic-bezier(.22,.61,.36,1) 1 both;
}
@keyframes hero-beam {
  0% { opacity: 0; transform: translateX(-160%) rotate(7deg); }
  16% { opacity: 1; } 84% { opacity: 1; }
  100% { opacity: 0; transform: translateX(360%) rotate(7deg); }
}

/* ---------- 2. Wordmark bloom (load, nav only) ---------- */
.nav__inner .brand__mark { position: relative; animation: wordmark-bloom .9s .1s var(--ease) 1 both; }
.nav__inner .brand__mark::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; height: 1px; width: 0;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  transform: translateX(-50%); animation: wordmark-line 1.15s .25s var(--ease) 1 both;
}
@keyframes wordmark-bloom { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes wordmark-line { 0% { width: 0; opacity: 0; } 55% { opacity: 1; } 100% { width: 120%; opacity: 0; } }

/* ---------- 27. Gold filament breathing + 11. eyebrow hairline slide-expand (in-view) ---------- */
.mfx .eyebrow::before { transform-origin: left center; transform: scaleX(0); transition: transform .7s var(--ease) .05s; }
.mfx .eyebrow.fx-seen::before { transform: scaleX(1); animation: filament 6.5s ease-in-out 1.1s infinite; }
@keyframes filament { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }

/* ---------- 5. Service number dial-settle (in-view) ---------- */
.mfx .svc-card__no { opacity: 0; transform: rotate(-95deg) scale(.72); transition: opacity .5s var(--ease), transform .75s var(--ease-back); }
.mfx .svc-card__no.fx-seen { opacity: .85; transform: none; }

/* ---------- 6. Service-card blueprint frame (in-view) ---------- */
.svc-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-gold); opacity: 0;
}
.mfx .svc-card.fx-seen::after { animation: blueprint 1.1s var(--ease) .05s 1 both; }
@keyframes blueprint { 0% { opacity: 0; transform: scale(1.025); } 42% { opacity: .9; } 100% { opacity: 0; transform: scale(1); } }

/* ---------- 7. Molten-gold pour on primary buttons (in-view) ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(118deg, transparent 36%, rgba(255,245,210,.5) 50%, transparent 64%);
}
.mfx .btn--primary.fx-seen::after { animation: pour .95s var(--ease) .15s 1 both; }
@keyframes pour { to { transform: translateX(120%); } }

/* ---------- 8. Work-mockup surveyor brackets (in-view) ---------- */
.mock { position: relative; }
.mock::before, .mock::after {
  content: ""; position: absolute; width: 17px; height: 17px; z-index: 3; opacity: 0; pointer-events: none;
  border: 2px solid var(--gold);
}
.mock::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.mock::after  { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
.mfx .mock::before, .mfx .mock::after { transform: translate(6px, 6px); }
.mfx .mock.fx-seen::before { animation: bracket-in .7s var(--ease) .05s forwards; }
.mfx .mock.fx-seen::after  { animation: bracket-in .7s var(--ease) .17s forwards; }
@keyframes bracket-in { to { opacity: .9; transform: translate(0, 0); } }

/* ---------- 9. Mockup "wake-up" flicker (in-view) ---------- */
.mfx .mock.fx-seen .mock__bar { animation: wake .55s var(--ease) .22s 1 both; }
@keyframes wake { 0% { opacity: .35; } 22% { opacity: .75; } 38% { opacity: .42; } 64% { opacity: .9; } 100% { opacity: 1; } }

/* ---------- 10. Branch-icon aperture reveal (in-view) ---------- */
.mfx .branch-card__logo { clip-path: circle(0% at 50% 50%); transition: clip-path .7s var(--ease); }
.mfx .branch-card__logo.fx-seen { clip-path: circle(78% at 50% 50%); }

/* ---------- 11/17. Process step checklist flourish (in-view) ---------- */
.mfx .step__no { opacity: 0; transform: scale(.6) rotate(-10deg); transition: opacity .45s var(--ease), transform .6s var(--ease-back); }
.mfx .step__no.fx-seen { opacity: 1; transform: none; }

/* ---------- 12. Process connector light-flow (in-view) ---------- */
.step__line { position: relative; overflow: hidden; }
.step__line::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
}
.mfx .step.fx-seen .step__line::after { animation: flow 1.25s var(--ease) .25s 1 both; }
@keyframes flow { to { transform: translateX(100%); } }

/* ---------- 13. Why-point border light-up wave (in-view) ---------- */
.why-point { transition: border-color .6s var(--ease), background .6s var(--ease), box-shadow .3s var(--ease); }
.mfx .why-point { border-color: var(--line); }
.mfx .why-point.fx-seen { border-color: var(--line-gold); }

/* ---------- 15/17. Gilded edge + truth bloom (hover, pointer-tracked) ---------- */
.branch-card, .why-point { position: relative; --mx: 50%; --my: 50%; }
.branch-card::after, .why-point::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(190px circle at var(--mx) var(--my), rgba(201,162,75,.18), transparent 68%);
}
.branch-card:hover::after, .why-point:hover::after, .why-point:focus-within::after { opacity: 1; }

/* ---------- 16. Compass-arrow pivot (hover) ---------- */
.link-arrow:not(.legal__back):hover svg { transform: rotate(45deg) scale(1.06); }

/* ---------- 18. Marquee spotlight scan (hover) ---------- */
.marquee__item { transition: color .3s var(--ease); }
.marquee__item:hover { color: var(--gold-deep); }
.marquee--dark .marquee__item:hover { color: var(--gold-hi); }

/* ---------- 19. Contact label elevate (focus) ---------- */
.field label { transition: transform .25s var(--ease), color .25s var(--ease); }
.field:focus-within label { transform: translateY(-1px); color: var(--gold-hi); }

/* ---------- 22. Lang caret spring-snap (open) ---------- */
.lang[data-open="true"] .lang-caret { animation: caret-snap .42s var(--ease-back) 1; }
@keyframes caret-snap { 0% { transform: rotate(110deg); } 62% { transform: rotate(196deg); } 100% { transform: rotate(180deg); } }

/* ---------- 23. Language menu gold-seam unfold (open) ---------- */
.lang-menu { border-top: 1px solid transparent; }
.lang[data-open="true"] .lang-menu { border-top-color: var(--line-gold); animation: menu-unfold .36s var(--ease) 1; }
@keyframes menu-unfold { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }

/* ---------- 24. FAQ reveal choreography (open) ---------- */
.faq__a-inner { position: relative; }
.faq__a-inner::before {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--gold), transparent); transition: width .5s var(--ease) .1s;
}
.faq__item.is-open .faq__a-inner::before { width: 42%; }
.faq__a p { transform: translateY(8px); opacity: 0; transition: transform .45s var(--ease) .08s, opacity .45s var(--ease) .08s; }
.faq__item.is-open .faq__a p { transform: none; opacity: 1; }

/* ---------- 25. Nav active-anchor beacon flash ---------- */
.nav__link.is-active::after { animation: nav-beacon .8s var(--ease) 1; }
@keyframes nav-beacon { 0% { box-shadow: 0 0 0 0 rgba(201,162,75,.6); } 100% { box-shadow: 0 0 9px 1px rgba(201,162,75,0); } }

/* ---------- 26. Scroll-progress beacon trail ---------- */
.scroll-progress { box-shadow: 0 0 10px rgba(201,162,75,.55), 0 0 2px rgba(230,200,127,.8); }

/* ---------- 28. Page grain / linen warmth (idle) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-breathe 8s ease-in-out infinite;
}
@keyframes grain-breathe { 0%, 100% { opacity: .018; } 50% { opacity: .036; } }

/* ---------- 29. Footer wordmark catch-the-light (idle) ---------- */
.footer__brand .brand__mark { animation: brand-glow 7.5s ease-in-out infinite; }
@keyframes brand-glow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 14px rgba(201,162,75,.35); } }

/* ---------- reduced-motion: neutralise everything above ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__beam::before, .nav__inner .brand__mark, .nav__inner .brand__mark::after,
  .footer__brand .brand__mark, body::after,
  .lang[data-open="true"] .lang-caret, .lang[data-open="true"] .lang-menu,
  .nav__link.is-active::after, .marquee__item { animation: none !important; }
  .mfx .eyebrow::before, .mfx .svc-card__no, .mfx .branch-card__logo, .mfx .step__no, .mfx .why-point {
    transition: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important;
  }
  .mfx .svc-card.fx-seen::after, .mfx .mock.fx-seen::before, .mfx .mock.fx-seen::after,
  .mfx .mock.fx-seen .mock__bar, .mfx .btn--primary.fx-seen::after,
  .mfx .step.fx-seen .step__line::after { animation: none !important; }
  .mock::before, .mock::after, .btn--primary::after, .step__line::after { opacity: 0 !important; }
  .faq__a p { transform: none !important; opacity: 1 !important; transition: none !important; }
  .field label, .field input:focus, .field textarea:focus, .link-arrow:hover svg { transition: none !important; }
}

/* =======================================================================
   MOTION FX — batch 2  (scroll-reactive hero, ambient drift, form/menu polish)
   ======================================================================= */

/* ---------- 4 + 53. Hero scrim deepen + scroll-cue ascend (scroll; --hs from motion-fx.js) ---------- */
.hero__scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #06060b; opacity: calc(var(--hs, 0) * .32); }
.hero__scroll { opacity: calc(1 - var(--hs, 0) * 2.4); transform: translateY(calc(var(--hs, 0) * -18px)); }

/* ---------- 42. Contact ambient glow drift (idle) ---------- */
.contact__bg { animation: contact-drift 18s ease-in-out infinite alternate; }
@keyframes contact-drift {   /* transform-only — composited, no per-frame repaint */
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(1.4%, 1%); }
}

/* ---------- 38. On-dark heading warmth drift (idle) ---------- */
.on-dark .section-head h2, .contact__intro h2, .why h2 { animation: ondark-warmth 9s ease-in-out infinite; }
@keyframes ondark-warmth { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 18px rgba(230,200,127,.16); } }

/* ---------- 43. Draw-rule travelling glint (in-view) ---------- */
.draw-rule { position: relative; overflow: hidden; }
.draw-rule::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 45%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,245,210,.95), transparent); transform: translateX(-160%);
}
.mfx .draw-rule.fx-seen::after { animation: rule-glint 2.2s var(--ease) .55s 1 both; }
@keyframes rule-glint { to { transform: translateX(260%); } }

/* ---------- 50. Mobile menu staggered band reveal (open) ---------- */
.mobile-menu__links a { transition: color var(--t), padding-left var(--t), transform .5s var(--ease), opacity .5s var(--ease); }
.mfx .mobile-menu__links a { opacity: 0; transform: translateY(14px); }
.mfx body.menu-open .mobile-menu__links a { opacity: 1; transform: none; }
.mfx body.menu-open .mobile-menu__links a:nth-child(1) { transition-delay: .06s; }
.mfx body.menu-open .mobile-menu__links a:nth-child(2) { transition-delay: .12s; }
.mfx body.menu-open .mobile-menu__links a:nth-child(3) { transition-delay: .18s; }
.mfx body.menu-open .mobile-menu__links a:nth-child(4) { transition-delay: .24s; }
.mfx body.menu-open .mobile-menu__links a:nth-child(5) { transition-delay: .30s; }

/* ---------- 51. Form-error gold beacon flash (validation) ---------- */
.field:has(.field__err.show) input, .field:has(.field__err.show) textarea { animation: err-beacon .9s var(--ease) 1; }
@keyframes err-beacon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,129,111,0); }
  25% { box-shadow: 0 0 0 3px rgba(224,129,111,.5); }
  50% { box-shadow: 0 0 0 3px rgba(201,162,75,.5); }
  75% { box-shadow: 0 0 0 3px rgba(224,129,111,.4); }
}

/* ---------- 26. Rung-index ghost ascend (hover, join) ---------- */
.rung__index { position: relative; }
.rung__index::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none;
}
.rung:hover .rung__index::after { animation: rung-ghost 1.15s var(--ease) infinite; }
@keyframes rung-ghost { 0% { opacity: .5; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-13px) scale(1.06); } }

/* ---------- batch-2 reduced-motion guards ---------- */
@media (prefers-reduced-motion: reduce) {
  .contact__bg, .on-dark .section-head h2, .contact__intro h2, .why h2,
  .mfx .draw-rule.fx-seen::after, .rung:hover .rung__index::after,
  .field:has(.field__err.show) input, .field:has(.field__err.show) textarea { animation: none !important; }
  .hero__scrim::after { opacity: 0 !important; }
  .hero__scroll { opacity: 1 !important; transform: none !important; }
  .draw-rule::after { opacity: 0 !important; }
  .mfx .mobile-menu__links a { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =======================================================================
   MOTION FX — batch 3  (refined hover / load / idle micro-interactions)
   ======================================================================= */

/* ---------- nav links staggered load cascade ---------- */
.nav__links .nav__link { animation: nav-in .55s var(--ease) both; }
.nav__links .nav__link:nth-child(1) { animation-delay: .15s; }
.nav__links .nav__link:nth-child(2) { animation-delay: .22s; }
.nav__links .nav__link:nth-child(3) { animation-delay: .29s; }
.nav__links .nav__link:nth-child(4) { animation-delay: .36s; }
.nav__links .nav__link:nth-child(5) { animation-delay: .43s; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

/* ---------- language menu items stagger in (open) ---------- */
.lang-menu button { transition: background var(--t), color var(--t), opacity .3s var(--ease), transform .3s var(--ease); }
.mfx .lang-menu button { opacity: 0; transform: translateY(6px); }
.mfx .lang[data-open="true"] .lang-menu button { opacity: 1; transform: none; }
.mfx .lang[data-open="true"] .lang-menu button:nth-child(1) { transition-delay: .04s; }
.mfx .lang[data-open="true"] .lang-menu button:nth-child(2) { transition-delay: .09s; }
.mfx .lang[data-open="true"] .lang-menu button:nth-child(3) { transition-delay: .14s; }
.mfx .lang[data-open="true"] .lang-menu button:nth-child(4) { transition-delay: .19s; }

/* ---------- global button press feedback ---------- */
.btn:active { transform: translateY(1px) scale(.985); }

/* ---------- service icon kinetic on card hover ---------- */
.svc-card__icon { transition: transform .4s var(--ease-back), background .4s var(--ease); }
.svc-card:hover .svc-card__icon { transform: translateY(-3px) rotate(-5deg) scale(1.07); }

/* ---------- back-to-top arrow bob (hover) ---------- */
.to-top svg { transition: transform var(--t); }
.to-top:hover svg { animation: totop-bob .9s ease-in-out infinite; }
@keyframes totop-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- footer link gold-hairline lead (hover) ---------- */
.footer__col a { position: relative; transition: color var(--t), padding-left var(--t); }
.footer__col a::before {
  content: ""; position: absolute; left: -2px; top: 50%; width: 0; height: 1px; background: var(--gold); transition: width var(--t);
}
.footer__col a:hover { color: var(--gold-hi); padding-left: 14px; }
.footer__col a:hover::before { width: 9px; }

/* ---------- brand wordmark re-bloom (hover) ---------- */
.nav__inner .brand:hover .brand__mark::after { animation: wordmark-line 1s var(--ease); }

/* ---------- why-point number gold-glow on reveal (opacity/transform are owned by GSAP) ---------- */
.mfx .why-point.fx-seen .why-point__num { animation: num-glow 1.1s var(--ease) 1; }
@keyframes num-glow { 0% { text-shadow: 0 0 0 transparent; } 40% { text-shadow: 0 0 16px rgba(230,200,127,.7); } 100% { text-shadow: 0 0 0 transparent; } }

/* ---------- hero landmark glow pulse over the photo (idle) ---------- */
.hero__beam::after {
  content: ""; position: absolute; left: 52%; top: 50%; width: 42%; height: 46%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(230,200,127,.16), transparent 66%); filter: blur(8px);
  animation: landmark-glow 7.5s ease-in-out infinite;
}
@keyframes landmark-glow { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .8; transform: translate(-50%, -50%) scale(1.12); } }

/* ---------- coming-soon branch breathing (idle) ---------- */
.branch-card--soon .branch-card__logo { animation: soon-breathe 3.4s ease-in-out infinite; }
@keyframes soon-breathe { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }

/* ---------- nav CTA continuous shimmer (hover) ---------- */
.nav__cta:hover::after { animation: pour 1.3s var(--ease) infinite; }

/* ---------- team avatar gold ring (hover) ---------- */
.person__avatar { transition: box-shadow var(--t), transform var(--t); }
.person:hover .person__avatar { box-shadow: 0 0 0 2px var(--line-gold), 0 8px 22px rgba(20,20,15,.12); transform: scale(1.04); }

/* ---------- process step hover lift ---------- */
.step { transition: transform var(--t); }
.step:hover { transform: translateY(-2px); }

/* ---------- contact point icons gentle pulse (idle) ---------- */
.contact__point svg { animation: cpoint-pulse 4.5s ease-in-out infinite; transform-origin: center; }
.contact__point:nth-child(2) svg { animation-delay: .9s; }
.contact__point:nth-child(3) svg { animation-delay: 1.8s; }
@keyframes cpoint-pulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

/* ---------- ghost-light button gold sheen (hover) ---------- */
.btn--ghost-light:hover { box-shadow: inset 0 0 0 1px var(--gold-hi); border-color: var(--gold-hi); }

/* ---------- marquee star twinkle (idle) ---------- */
.marquee__item::before { animation: star-twinkle 3.2s ease-in-out infinite; }
.marquee__item:nth-child(even)::before { animation-delay: 1.1s; }
.marquee__item:nth-child(3n)::before { animation-delay: 1.9s; }
@keyframes star-twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- batch-3 reduced-motion guards ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav__links .nav__link, .to-top:hover svg, .hero__beam::after, .branch-card--soon .branch-card__logo,
  .nav__cta:hover::after, .contact__point svg, .marquee__item::before,
  .nav__inner .brand:hover .brand__mark::after, .mfx .why-point.fx-seen .why-point__num { animation: none !important; }
  .mfx .lang-menu button { opacity: 1 !important; transform: none !important; transition: none !important; }
  .svc-card__icon, .person__avatar, .step, .footer__col a, .btn { transition: none !important; }
  .btn:active, .svc-card:hover .svc-card__icon, .person:hover .person__avatar, .step:hover { transform: none !important; }
}

/* =======================================================================
   PRINCIPLES section  (honest positioning / non-negotiables)
   ======================================================================= */
.principles__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 640px) { .principles__grid { grid-template-columns: 1fr 1fr; } }
.principle {
  position: relative; padding: clamp(1.4rem, 2.4vw, 1.9rem); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.principle:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.principle__num {
  display: block; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--gold-deep); font-variant-numeric: tabular-nums; margin-bottom: .9rem;
}
.principle h3 { font-size: 1.16rem; line-height: 1.25; margin-bottom: .5rem; }
.principle p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.62; }
.principles__firm {
  display: flex; gap: .75rem; align-items: flex-start; max-width: 70ch;
  margin-top: clamp(1.8rem, 3.5vw, 2.4rem); padding: 1.1rem 1.3rem;
  background: var(--paper-3); border: 1px solid var(--line-gold); border-radius: var(--r-lg);
  color: var(--ink); font-size: var(--fs-small); line-height: 1.55;
}
.principles__firm svg { width: 22px; height: 22px; color: var(--gold-deep); flex: none; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) {
  .principle { transition: none !important; }
  .principle:hover { transform: none !important; }
}

/* =======================================================================
   MOTION FX — batch 4
   ~50 more effects. EVERY rule here is hover / focus / click / in-view-once.
   NO new always-on loops → zero idle cost → no lag.
   GPU-only props (transform / opacity / clip-path / color / stroke).
   ======================================================================= */

/* ---- SVG icon "draw-on" when its card scrolls in (one-shot) ---- */
.mfx .svc-card__icon svg *, .mfx .branch-card__logo svg * { stroke-dasharray: 400; stroke-dashoffset: 400; }
.mfx .svc-card.fx-seen .svc-card__icon svg *,
.mfx .branch-card__logo.fx-seen svg * { animation: icon-draw 1.1s var(--ease) .15s forwards; }
@keyframes icon-draw { to { stroke-dashoffset: 0; } }

/* ---- Service cards ---- */
.svc-card h3, .svc-card__no { transition: color var(--t), transform var(--t); }
.svc-card:hover h3 { color: var(--gold-deep); transform: translateX(3px); }
.svc-card:hover .svc-card__no { color: var(--gold); }

/* ---- Work mockups: zoom the concept art, light the chrome ---- */
.mock__art { overflow: hidden; }
.mock__art svg { transition: transform .6s var(--ease); transform-origin: center; }
.mock:hover .mock__art svg { transform: scale(1.05); }
.mock h3 { transition: color var(--t); }
.mock:hover h3 { color: var(--gold-deep); }
.mock__bar i { transition: background var(--t); }
.mock:hover .mock__bar i { background: var(--gold-deep); }

/* ---- Branch cards ---- */
.branch-card h3 { transition: color var(--t); }
.branch-card:hover h3 { color: var(--gold-deep); }
.branch-card__logo { transition: clip-path .7s var(--ease), transform .4s var(--ease-back); }
.branch-card:hover .branch-card__logo { transform: rotate(-5deg) scale(1.06); }

/* ---- Principle cards ---- */
.principle h3, .principle__num { transition: color var(--t), transform var(--t); }
.principle:hover h3 { color: var(--gold-deep); }
.principle:hover .principle__num { color: var(--gold); transform: translateY(-2px); }

/* ---- Why points ---- */
.why-point h3, .why-point__num { transition: color var(--t), transform var(--t); }
.why-point:hover h3 { color: var(--gold-hi); }
.why-point:hover .why-point__num { transform: scale(1.12); }

/* ---- Process steps ---- */
.step h3, .step__no { transition: color var(--t); }
.step:hover h3 { color: var(--gold-deep); }
.step:hover .step__no { color: var(--gold); }

/* ---- FAQ rows (closed-state hover hint) ---- */
.faq__btn > span { transition: color var(--t), transform var(--t); }
.faq__btn:hover > span:first-child { color: var(--gold-deep); transform: translateX(3px); }
.faq__item:not(.is-open) .faq__btn:hover .faq__icon { transform: rotate(90deg); color: var(--gold); }

/* ---- Contact points ---- */
.contact__point { transition: color var(--t); }
.contact__point:hover { color: #fff; }

/* ---- Team & Join cards ---- */
.person__name { transition: color var(--t); }
.person:hover .person__name { color: var(--gold-deep); }
.person__avatar span, .person__avatar { transition: color var(--t), box-shadow var(--t), transform var(--t); }
.person:hover .person__avatar span { color: var(--gold-deep); }
.value-card { transition: border-color var(--t), box-shadow var(--t); }
.value-card:hover { border-color: var(--line-gold); box-shadow: var(--shadow-md); }
.value-card__icon svg { transition: transform .4s var(--ease-back); }
.value-card:hover .value-card__icon svg { transform: scale(1.12) rotate(-5deg); }
.rung__main h3 { transition: color var(--t); }
.rung:hover .rung__main h3 { color: var(--gold-deep); }

/* ---- Nav / brand / language ---- */
.nav__link { transition: color var(--t), transform var(--t); }
.nav__link:hover { transform: translateY(-1px); }
.nav__link:focus-visible::after { width: 100%; }
.nav__cta { transition: transform var(--t), box-shadow var(--t); }
.nav__cta:hover { transform: translateY(-1px) scale(1.015); }
.nav__inner .brand { transition: transform var(--t); }
.nav__inner .brand:hover { transform: scale(1.03); }
.lang-toggle > svg:first-of-type { transition: transform .5s var(--ease); }
.lang-toggle:hover > svg:first-of-type { transform: rotate(18deg); }
.lang-menu button { transition: background var(--t), color var(--t), padding-left var(--t), opacity .3s var(--ease), transform .3s var(--ease); }
.lang-menu button:hover { padding-left: 1.1rem; }

/* ---- Buttons ---- */
.btn--primary { transition: transform var(--t), box-shadow var(--t); }
.btn--primary:hover { box-shadow: 0 8px 26px rgba(168,132,47,.32); }
.btn--ghost svg, .btn--primary svg, .btn--ghost-light svg { transition: transform var(--t); }
.btn:hover svg:last-child { transform: translateX(3px); }

/* ---- Footer ---- */
.footer__col a:focus-visible { color: var(--gold-hi); padding-left: 14px; outline: none; }
.footer__col a:focus-visible::before { width: 9px; }
.footer__brand .brand:hover { filter: drop-shadow(0 0 10px rgba(201,162,75,.4)); }
.footer__tag svg { transition: transform var(--t); }
.footer__tag:hover svg { transform: scale(1.15) translateY(-1px); }

/* ---- Badges / tags ---- */
.badge { transition: transform var(--t), border-color var(--t); }
.mock:hover .badge { transform: translateY(-1px) scale(1.03); border-color: var(--line-gold); }

/* ---- Active / press feedback on non-tilt cards ---- */
.principle:active { transform: scale(.99); }
.faq__btn:active .faq__icon { transform: scale(.88); }

/* ---- reduced-motion: neutralise batch-4 ---- */
@media (prefers-reduced-motion: reduce) {
  .mfx .svc-card__icon svg *, .mfx .branch-card__logo svg *, .mfx .value-card__icon svg * { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .svc-card h3, .svc-card__no, .mock__art svg, .mock h3, .mock__bar i, .branch-card h3, .branch-card__logo,
  .principle h3, .principle__num, .why-point h3, .why-point__num, .step h3, .step__no, .faq__btn > span, .faq__icon,
  .contact__point, .person__name, .person__avatar, .person__avatar span, .value-card, .value-card__icon svg, .rung__main h3,
  .nav__link, .nav__cta, .nav__inner .brand, .lang-toggle > svg:first-of-type, .lang-menu button,
  .btn--primary, .btn svg, .footer__col a, .footer__brand .brand, .footer__tag svg, .badge { transition: none !important; }
  .svc-card:hover h3, .nav__link:hover, .nav__cta:hover, .nav__inner .brand:hover, .branch-card:hover .branch-card__logo,
  .why-point:hover .why-point__num, .principle:hover .principle__num, .value-card:hover .value-card__icon svg,
  .lang-toggle:hover > svg:first-of-type, .faq__item:not(.is-open) .faq__btn:hover .faq__icon, .mock:hover .mock__art svg,
  .btn:hover svg:last-child, .faq__btn:hover > span:first-child, .principle:active, .faq__btn:active .faq__icon { transform: none !important; }
}

/* =======================================================================
   DECORATIONS + MOTION FX — batch 5  (editorial polish)
   Static texture or one-shot reveals / event hovers → no idle lag added.
   ======================================================================= */

/* ---- Editorial auto-numbered watermark behind each section heading ---- */
#main { counter-reset: sec; }
#main .section .section-head { counter-increment: sec; position: relative; }
#main .section .section-head > * { position: relative; z-index: 1; }
#main .section .section-head::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute; top: -.58em; right: 0; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-weight: 800; line-height: 1;
  font-size: clamp(4.5rem, 11vw, 9.5rem); letter-spacing: -.03em;
  color: var(--gold); opacity: .07;
}
.on-dark .section-head::before { color: var(--gold-hi); opacity: .1; }
.mfx #main .section .section-head::before { opacity: 0; transform: translateY(16px) scale(1.05); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.mfx #main .section .section-head.fx-seen::before { opacity: .07; transform: none; }
.mfx .on-dark .section-head.fx-seen::before { opacity: .1; }

/* ---- Hero gold viewfinder frame (draws in on load) ---- */
.hero__frame {
  position: absolute; inset: clamp(13px, 2.4vw, 26px); z-index: 2; pointer-events: none;
  border: 1px solid rgba(230,200,127,.20); border-radius: 2px;
  animation: hero-frame-in 1.5s var(--ease) .35s both;
}
.hero__frame::before, .hero__frame::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid var(--gold-hi); }
.hero__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero__frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
@keyframes hero-frame-in { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }

/* ---- Blueprint dot-grid texture on the dark sections (static) ---- */
.why::before, .contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image: radial-gradient(rgba(201,162,75,.11) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}

/* ---- Oversized quotation mark behind the "why" statement (static) ---- */
.why__lead { position: relative; }
.why__lead::before {
  content: "\201C"; position: absolute; top: -.46em; left: -.06em; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-weight: 700; font-size: 6.5rem; line-height: 1;
  color: var(--gold-hi); opacity: .12;
}
.why__lead > * { position: relative; z-index: 1; }

/* ---- Giant ghosted "MBC" watermark in the footer (static) ---- */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: "MBC"; position: absolute; right: -.03em; bottom: -.22em; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-weight: 900; line-height: .8; letter-spacing: -.03em;
  font-size: clamp(7rem, 24vw, 20rem); color: #fff; opacity: .028;
}
.footer .container { position: relative; z-index: 1; }

/* ---- Refined card hover: a quiet gold inner edge on lift ---- */
.svc-card:hover, .mock:hover, .branch-card:hover, .principle:hover, .value-card:hover, .person:hover {
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(201,162,75,.18);
}

/* ---- Decorative gold corner ticks that grow from card corners on hover ---- */
.svc-card, .mock, .branch-card, .principle { --tick: 0px; }
.svc-card .tilt-glare { } /* (left intact) */
.principle::after, .branch-card::before {
  content: ""; position: absolute; top: 8px; right: 8px; width: 0; height: 0; pointer-events: none;
  border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); opacity: 0;
  transition: width .35s var(--ease), height .35s var(--ease), opacity .35s var(--ease);
}
.principle:hover::after, .branch-card:hover::before { width: 13px; height: 13px; opacity: .85; }

/* ---- Eyebrow: a small gold pip that appears before the hairline on reveal ---- */
.section-head .eyebrow { position: relative; }

/* ---- Button focus-visible: branded offset ring (a11y polish) ---- */
.btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.btn--primary:focus-visible { outline-color: var(--gold-hi); }

/* ---- Language current label gilds with the globe ---- */
.lang-toggle .lang-current { transition: color var(--t); }
.lang-toggle:hover .lang-current { color: var(--gold-deep); }
.nav--transparent .lang-toggle:hover .lang-current, .on-dark .lang-toggle:hover .lang-current { color: var(--gold-hi); }

/* ---- Footer legal / bottom links gild on hover ---- */
.footer__bottom a, .footer__legal a, .footer a[data-cookie-settings] { transition: color var(--t); }
.footer__bottom a:hover, .footer__legal a:hover, .footer a[data-cookie-settings]:hover { color: var(--gold-hi); }

/* ---- Contact intro: the lead text warms slightly when the form is focused ---- */
.contact:focus-within .contact__intro h2 { color: var(--gold-hi); transition: color .4s var(--ease); }

/* ---- Mock tag (sample concept) gilds on card hover ---- */
.mock__tag { transition: color var(--t), border-color var(--t); }
.mock:hover .mock__tag { border-color: var(--line-gold); }

/* ---- Process step number: subtle gold ring badge on hover ---- */
.step__no { border-radius: 4px; }

/* ---- reduced-motion guards (batch 5) ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__frame { animation: none !important; }
  .mfx #main .section .section-head::before { transition: none !important; transform: none !important; opacity: .07 !important; }
  .mfx .on-dark .section-head::before { opacity: .1 !important; }
  .principle::after, .branch-card::before, .principle:hover::after, .branch-card:hover::before { transition: none !important; }
  .svc-card:hover, .mock:hover, .branch-card:hover, .principle:hover, .value-card:hover, .person:hover,
  .lang-toggle .lang-current, .footer__bottom a, .footer__legal a, .mock__tag { transition: none !important; }
}

/* =======================================================================
   SCROLL-DRIVEN MOTION LAYER — batch 6  (cinematic scroll choreography)
   Uses CSS scroll-driven animations (animation-timeline: view()/scroll()),
   which run on the COMPOSITOR thread — no JS scroll handlers, no main-thread
   cost, no jank. Gated by @supports + prefers-reduced-motion so unsupported
   browsers / reduced-motion fall back to the existing reveals & final state.
   ======================================================================= */

/* shared keyframes (inert unless referenced inside the @supports block) */
@keyframes sv-rise   { from { opacity: 0; transform: translateY(32px); }            to { opacity: 1; transform: none; } }
@keyframes sv-rise-s { from { opacity: 0; transform: translateY(26px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes sv-rise-sm{ from { opacity: 0; transform: translateY(15px); }            to { opacity: 1; transform: none; } }
@keyframes sv-slideL { from { opacity: 0; transform: translateX(-26px); }           to { opacity: 1; transform: none; } }
@keyframes sv-slideR { from { opacity: 0; transform: translateX(26px); }            to { opacity: 1; transform: none; } }
@keyframes sv-clipL  { from { clip-path: inset(0 100% 0 0); opacity: .5; }           to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes sv-clipUp { from { clip-path: inset(100% 0 0 0); opacity: .55; }          to { clip-path: inset(0); opacity: 1; } }
@keyframes sv-iris   { from { opacity: 0; clip-path: circle(0% at 50% 50%); }        to { opacity: 1; clip-path: circle(78% at 50% 50%); } }
@keyframes sv-num    { from { opacity: 0; transform: rotate(-8deg) scale(.78); }     to { opacity: 1; transform: none; } }
@keyframes sv-scalex { from { transform: scaleX(0); }                                to { transform: scaleX(1); } }
@keyframes sv-draw   { to   { stroke-dashoffset: 0; } }
@keyframes sv-numeral{ 0% { opacity: 0; transform: translateY(48px); } 38% { opacity: .075; } 100% { opacity: .035; transform: translateY(-34px); } }
@keyframes sv-numeral-dark { 0% { opacity: 0; transform: translateY(48px); } 38% { opacity: .11; } 100% { opacity: .05; transform: translateY(-34px); } }
@keyframes sv-footer { from { opacity: 0; transform: translateY(70px) scale(.96); }  to { opacity: .032; transform: none; } }
@keyframes sv-dots   { from { transform: translateY(26px); }                         to { transform: translateY(-34px); } }
@keyframes sv-heroOut{ from { opacity: 1; transform: translateY(0); }                to { opacity: .25; transform: translateY(-54px); } }
@keyframes sv-frameOut{ from { opacity: 1; transform: scale(1); }                    to { opacity: .55; transform: scale(.94); } }
@keyframes sv-cueOut { from { opacity: 1; transform: translateY(0); }                to { opacity: 0; transform: translateY(-18px); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---- Headings & lead text rise as they enter (scroll-scrubbed) ---- */
    #main .section .section-head h2 { animation: sv-rise linear both; animation-timeline: view(); animation-range: entry 2% cover 38%; }
    .section-head .lead, .why__body, .why__quiet, .about__body, .about__statement, .contact__intro {
      animation: sv-rise-sm linear both; animation-timeline: view(); animation-range: entry 4% cover 42%;
    }

    /* ---- Cards float-rise on entry ---- */
    .svc-card, .mock, .branch-card, .value-card, .principle, .person, .faq__item, .field {
      animation: sv-rise-s linear both; animation-timeline: view(); animation-range: entry 0% cover 36%;
    }
    /* row-aware micro-stagger via per-column range offsets */
    .services__grid .svc-card:nth-child(2n), .work__grid .mock:nth-child(2n),
    .principles__grid .principle:nth-child(2n) { animation-range: entry 5% cover 41%; }
    .principles__grid .principle:nth-child(3n) { animation-range: entry 9% cover 45%; }

    /* ---- Directional / clip variety ---- */
    .why-point { animation: sv-rise-s linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    .step      { animation: sv-clipL  linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .rung      { animation: sv-slideL linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    .work__grid .mock:nth-child(odd)  { animation-name: sv-slideL; }
    .work__grid .mock:nth-child(even) { animation-name: sv-slideR; }

    /* ---- Serif numerals settle (rotate + scale) on entry ---- */
    .svc-card__no, .principle__num, .step__no, .why-point__num, .rung__index {
      animation: sv-num linear both; animation-timeline: view(); animation-range: entry 6% cover 40%;
    }

    /* ---- Gold hairlines draw with scroll ---- */
    .section-head .eyebrow::before { animation: sv-scalex linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; transform-origin: left center; }
    .draw-rule { animation: sv-scalex linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; transform-origin: 0 50%; transform: scaleX(0); }

    /* ---- SVG icons stroke-draw, scrubbed to scroll ---- */
    .svc-card__icon svg *, .branch-card__logo svg *, .value-card__icon svg * { stroke-dasharray: 400; stroke-dashoffset: 400; }
    .svc-card__icon svg *, .branch-card__logo svg *, .value-card__icon svg * {
      animation: sv-draw linear both; animation-timeline: view(); animation-range: entry 8% cover 44%;
    }
    .branch-card__logo { animation: sv-iris linear both; animation-timeline: view(); animation-range: entry 4% cover 40%; }

    /* ---- Decoration parallax (numerals drift, footer wordmark rises, dot-grids drift) ---- */
    #main .section .section-head::before { animation: sv-numeral linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    #main .on-dark .section-head::before { animation-name: sv-numeral-dark; }
    .footer::before { animation: sv-footer linear both; animation-timeline: view(); animation-range: entry 0% cover 80%; }
    .why::before, .contact::before { animation: sv-dots linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

    /* ---- Misc accents rise ---- */
    .badge, .mock__tag, .link-arrow, .field label, .contact__point, .principles__firm {
      animation: sv-rise-sm linear both; animation-timeline: view(); animation-range: entry 4% cover 46%;
    }

    /* ---- Hero cinematic: content parallaxes up & fades as you scroll away ---- */
    /* (frame draw-in and scroll-cue are left to their existing load/--hs handlers) ---- */
    .hero__content { animation: sv-heroOut linear both; animation-timeline: scroll(root); animation-range: 0 92vh; }
  }
}

/* =======================================================================
   MODERN TECHNIQUES — batch 7  (2026 web-platform features, researched)
   linear() springs · @property typed gradients · View Transitions ·
   interpolate-size. Idle-cost-free (springs are timing fns; rings hover-only).
   ======================================================================= */

/* enable animating to intrinsic sizes (height:auto etc.) site-wide */
:root { interpolate-size: allow-keywords; }

/* ---- native spring/bounce physics via linear() (no JS spring libs) ---- */
:root {
  --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968, 0.991, 1.006 47.3%, 1.015 51.2%, 1.017 55.2%, 1.013 59.1%, 1.002 67.1%, 0.997 72.4%, 0.998 80.7%, 1.001 90.9%, 1);
  --spring-bounce: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.281 6.9%, 0.723 15%, 0.938 19.5%, 1.017, 1.077 25.9%, 1.103, 1.117 31.2%, 1.118, 1.111 36.4%, 1.07 42.6%, 1.018 49.4%, 0.999 54.5%, 0.991 60.6%, 0.991 66.7%, 1.001 84.4%, 1);
  --ease-back: var(--spring);   /* upgrades every existing back-eased "pop" to a real spring */
}
.btn, .svc-card, .mock, .branch-card, .principle, .value-card, .person, .to-top,
.branch-card__logo, .svc-card__icon, .value-card__icon svg, .person__avatar,
.lang-caret, .link-arrow svg, .faq__icon { transition-timing-function: var(--spring); }
.btn:active { transition-timing-function: var(--spring-bounce); }

/* ---- @property typed custom prop → animatable conic angle ---- */
@property --halo-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* Rotating gold conic ring on hover — modern masked gradient-border technique.
   Mask makes the pseudo render ONLY as the 1.5px ring, so it never covers content. */
.value-card, .principle, .why-point { position: relative; }
.value-card::before, .principle::before, .why-point::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0;
  padding: 1.5px;
  background: conic-gradient(from var(--halo-angle), transparent 0deg, var(--gold-hi) 28deg, var(--gold) 64deg, transparent 130deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .45s var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .value-card:hover::before, .principle:hover::before, .why-point:hover::before {
    opacity: .9; animation: halo-spin 3s linear infinite;
  }
}
@keyframes halo-spin { to { --halo-angle: 360deg; } }

/* ---- View Transitions: language swap + smooth cross-document page navigation ---- */
/* Clicking a nav link (Join, Team, etc.) now fades-and-rises into the next page
   instead of a hard cut, in browsers that support cross-document view transitions. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mbc-vt-out .32s var(--ease) both; }
::view-transition-new(root) { animation: mbc-vt-in .46s var(--ease) both; }
@keyframes mbc-vt-out { to { opacity: 0; transform: scale(.994); } }
@keyframes mbc-vt-in  { from { opacity: 0; transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* =======================================================================
   NOVEL TECHNIQUES — batch 8
   3D flip-reveal · SVG gooey (liquid gold) · conic scroll ring · @starting-style
   ======================================================================= */

/* ---- 3D flip-up reveal bar on work mockups (pure CSS, perspective) ---- */
.mock__frame { perspective: 640px; }
.mock__frame::after {
  content: "↗"; position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none;
  padding: .5rem; text-align: center; font-size: 1.1rem; font-weight: 700; color: #1d1606;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  transform: rotateX(90deg); transform-origin: bottom center; opacity: 0;
  transition: transform .55s var(--spring), opacity .3s var(--ease);
}
@media (hover: hover) { .mock:hover .mock__frame::after { transform: rotateX(0deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mock__frame::after { transition: none; } }

/* ---- SVG gooey "liquid gold" metaballs (contact accent) ---- */
.svg-defs { position: absolute; }
.gooey { display: inline-block; position: relative; width: 46px; height: 30px; filter: url(#goo); margin-bottom: .5rem; }
.gooey i {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--gold-hi), var(--gold-deep)); transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
  .gooey i:nth-child(1) { animation: goo-a 4.2s ease-in-out infinite; }
  .gooey i:nth-child(2) { animation: goo-b 4.2s ease-in-out infinite; }
  .gooey i:nth-child(3) { animation: goo-c 4.2s ease-in-out infinite; }
}
@keyframes goo-a { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-155%, -50%) scale(.82); } }
@keyframes goo-b { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(55%, -95%) scale(.9); } }
@keyframes goo-c { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(58%, 5%) scale(.96); } }

/* ---- Conic scroll-progress ring around the back-to-top button (@property + scroll-timeline) ---- */
@property --topp { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
@supports (animation-timeline: scroll()) {
  .to-top::before {
    content: ""; position: absolute; inset: -5px; border-radius: 50%; z-index: -1; pointer-events: none;
    background: conic-gradient(var(--gold) var(--topp), rgba(201,162,75,.22) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 3px));
    animation: topp-fill linear both; animation-timeline: scroll(root);
  }
}
@keyframes topp-fill { to { --topp: 100%; } }

/* ---- @starting-style: true entry choreography for menus (2026) ---- */
@starting-style {
  .lang[data-open="true"] .lang-menu { opacity: 0; transform: translateY(-12px) scale(.96); }
  body.menu-open .mobile-menu { opacity: 0; transform: translateY(-10px); }
}

/* =======================================================================
   LIQUID GLASS — batch 9  (Apple "Liquid Glass" material)
   Frosted + saturated backdrop, specular rim light, depth shadow, and
   noise-driven REFRACTION of the backdrop (Chromium, on-demand elements
   only so it never re-displaces during scroll). Gel interaction.
   ======================================================================= */

/* ---- Nav: dark glass over the hero, light glass when solid ---- */
.nav--transparent {
  background: rgba(15, 15, 21, 0.18);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.nav--solid {
  background: rgba(250, 247, 240, 0.62) !important;
  backdrop-filter: blur(10px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.04);
  border-bottom-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 10px rgba(255, 255, 255, 0.10),
    0 1px 0 var(--line), 0 10px 30px rgba(20, 20, 15, 0.08);
}

/* ---- Language menu: light liquid glass ---- */
.lang-menu {
  background: rgba(250, 247, 240, 0.60) !important;
  backdrop-filter: blur(20px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -8px 16px rgba(255, 255, 255, 0.12),
    0 18px 44px rgba(20, 20, 15, 0.20);
  border-radius: 18px;
}
.lang-menu button { position: relative; z-index: 2; }

/* ---- Mobile menu: dark liquid glass panel ---- */
.mobile-menu {
  background: rgba(10, 10, 14, 0.55) !important;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ---- Consent card: dark liquid glass ---- */
.consent__card {
  background: rgba(18, 18, 24, 0.52) !important;
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1.5px solid rgba(201, 162, 75, 0.7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.consent__card > * { position: relative; z-index: 2; }

/* ---- Back-to-top: glass circle ---- */
.to-top {
  background: rgba(22, 22, 28, 0.42) !important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.to-top:hover { background: rgba(34, 34, 42, 0.55) !important; }

/* ---- Hero secondary CTA → liquid glass pill ---- */
.btn--ghost-light {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), inset 0 -8px 16px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.18);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.20) !important; border-color: rgba(255, 255, 255, 0.65) !important; color: #fff !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 12px 30px rgba(0, 0, 0, 0.22) !important; transform: translateY(-2px);
}
.btn--ghost-light:active { transform: translateY(1px) scale(.985); }

/* ---- True Liquid-Glass REFRACTION (Chromium) — on-demand elements only ---- */
@supports (backdrop-filter: url(#glass-distort)) {
  .lang-menu { backdrop-filter: blur(9px) url(#glass-distort) saturate(190%) brightness(1.06); }
  .consent__card { backdrop-filter: blur(11px) url(#glass-distort) saturate(170%); }
  .mobile-menu { backdrop-filter: blur(14px) url(#glass-distort) saturate(160%); }
}

/* ---- Graceful fallback if backdrop-filter isn't supported at all ---- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .nav--solid { background: rgba(250, 247, 240, 0.96) !important; }
  .lang-menu { background: var(--paper) !important; }
  .mobile-menu { background: rgba(8, 8, 10, 0.98) !important; }
  .consent__card { background: var(--night-2) !important; }
  .to-top { background: var(--ink) !important; }
}

/* =======================================================================
   IMMERSIVE — 3D depth-tilt showcase + animated grid
   (adapted from the "Business 3D Design" component → vanilla, MBC brand,
   honest content; the card's contents parallax in true 3D on cursor move)
   ======================================================================= */
.section--immersive { background: var(--night); position: relative; overflow: hidden; }
.section-head--center { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* animated perspective grid (GPU transform, vignette-masked) */
.immersive__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: radial-gradient(125% 90% at 50% 42%, #000 0%, rgba(0,0,0,.45) 55%, transparent 80%);
          mask: radial-gradient(125% 90% at 50% 42%, #000 0%, rgba(0,0,0,.45) 55%, transparent 80%);
}
.immersive__grid::before {
  content: ""; position: absolute; inset: -48px;
  background-image: linear-gradient(rgba(201,162,75,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,75,.10) 1px, transparent 1px);
  background-size: 46px 46px; animation: grid-pan 7s linear infinite;
}
@keyframes grid-pan { to { transform: translate(46px, 46px); } }
.immersive__halo {
  position: absolute; left: 50%; top: 42%; width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,75,.14), transparent 62%); filter: blur(22px);
  animation: halo-drift 13s ease-in-out infinite alternate;
}
@keyframes halo-drift { from { transform: translate(-54%,-52%) scale(1); } to { transform: translate(-46%,-44%) scale(1.12); } }
.section--immersive > .container { position: relative; z-index: 1; }

/* 3D depth cards — two-card grid (per-card perspective is set in the JS transform) */
.card3d-grid { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); align-items: center; margin-top: clamp(2.4rem,5vw,3.4rem); }
@media (min-width: 940px) { .card3d-grid { grid-template-columns: 1fr 1fr; } }
.card3d {
  position: relative; width: min(580px, 100%); transform-style: preserve-3d;
  transition: transform .25s var(--ease); border-radius: 24px; padding: clamp(1.6rem, 3.2vw, 2.4rem);
  background: rgba(18, 18, 26, 0.55);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -12px 32px rgba(0,0,0,0.25), 0 36px 90px rgba(0,0,0,0.55);
}
.card3d__inner { transform-style: preserve-3d; }
.card3d__row, .card3d__desc, .card3d__tiles, .card3d__cta, .card3d__list,
.chips, .brief__body, .brief__scope, .card3d__inner > .btn { transform: translateZ(var(--z)); transform-style: preserve-3d; }

/* --- interactive project-brief builder --- */
.chips { display: flex; flex-wrap: wrap; gap: .65rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .62rem .95rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); color: #f4f2ec;
  font-family: var(--sans); font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: transform .35s var(--spring, var(--ease)), background var(--t), border-color var(--t), color var(--t);
}
.chip:hover { border-color: var(--line-gold); transform: translateY(-1px); }
.chip__check {
  width: 0; height: 16px; overflow: hidden; display: inline-flex; align-items: center;
  transition: width .3s var(--spring, var(--ease));
}
.chip__check svg { width: 14px; height: 14px; flex: none; }
.chip.is-on { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1d1606; border-color: transparent; box-shadow: 0 6px 18px rgba(168,132,47,.3); }
.chip.is-on .chip__check { width: 18px; }

.brief__count {
  font-family: var(--serif); font-weight: 800; font-size: 1.5rem; color: var(--gold-hi); font-variant-numeric: tabular-nums; line-height: 1;
}
.card3d--brief .card3d__icon { transition: background var(--t); }
.brief__body { min-height: 64px; margin-bottom: 1.2rem; }
.brief__empty { color: rgba(244,242,236,.5); font-size: .95rem; line-height: 1.5; }
.brief__items { display: flex; flex-wrap: wrap; gap: .5rem; }
.brief__tag {
  padding: .42rem .8rem; border-radius: 9px; background: rgba(201,162,75,.14); border: 1px solid var(--line-gold);
  color: var(--gold-hi); font-size: .85rem; font-weight: 500; animation: tag-in .45s var(--spring, var(--ease)) both;
}
@keyframes tag-in { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
.brief__scope { color: rgba(244,242,236,.66); font-size: .82rem; line-height: 1.55; margin-bottom: 1.4rem; }
.brief__cta { width: 100%; transition: opacity .3s var(--ease), transform var(--t), box-shadow var(--t); }
.brief__cta.is-disabled { opacity: .45; pointer-events: none; }

/* left "what's included" card */
.card3d__list { list-style: none; display: grid; gap: .85rem; margin-bottom: 1.6rem; }
.card3d__list li { display: flex; align-items: center; gap: .7rem; color: rgba(244,242,236,.9); font-size: .95rem; line-height: 1.4; }
.card3d__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); flex: none; box-shadow: 0 0 10px rgba(230,200,127,.55); }
.card3d--list .card3d__inner > .btn { width: 100%; }
.card3d__row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem; }
.card3d__icon {
  width: 56px; height: 56px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(201,162,75,.22), rgba(201,162,75,.06)); border: 1px solid var(--line-gold); color: var(--gold-hi);
}
.card3d__icon svg { width: 28px; height: 28px; }
.card3d__row h3 { font-size: 1.4rem; color: #fff; line-height: 1.1; }
.card3d__row > div > p { font-size: .85rem; color: rgba(244,242,236,.6); margin-top: .15rem; }
.card3d__desc { color: rgba(244,242,236,.82); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; }
.card3d__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.6rem; }
.card3d__tile {
  padding: 1rem; border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.card3d__tile svg { width: 22px; height: 22px; color: var(--gold-hi); margin-bottom: .55rem; }
.card3d__tile b { display: block; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.25; }
.card3d:hover .card3d__tile { border-color: rgba(201,162,75,.28); }
.card3d__tile:hover { background: rgba(201,162,75,.08); transform: translateY(-2px); }
.card3d__cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.card3d__cta .btn { flex: 1; min-width: 150px; }

/* floating depth orbs */
.card3d__orbs { position: absolute; top: 0; right: 0; transform-style: preserve-3d; pointer-events: none; }
.card3d__orbs span {
  position: absolute; border-radius: 50%; transform: translateZ(var(--z));
  border: 1px solid rgba(201,162,75,.22); background: radial-gradient(circle at 35% 30%, rgba(201,162,75,.18), transparent 70%);
}
.card3d__orbs span:nth-child(1) { width: 132px; height: 132px; top: -20px; right: -20px; }
.card3d__orbs span:nth-child(2) { width: 92px; height: 92px; top: 2px; right: 2px; }
.card3d__orbs span:nth-child(3) { width: 56px; height: 56px; top: 24px; right: 24px; }

/* entrance via fx-seen (opacity only — transform is owned by the tilt) */
.mfx .card3d { opacity: 0; transition: opacity .9s var(--ease), transform .25s var(--ease); }
.mfx .card3d.fx-seen { opacity: 1; }

@media (max-width: 600px) { .card3d__cta { flex-direction: column; } .card3d__cta .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .immersive__grid::before, .immersive__halo { animation: none !important; }
  .card3d { transition: none !important; transform: none !important; }
}

/* =======================================================================
   ALWAYS-ON / interactive globe (adapted from the "Business Vision" globe →
   vanilla canvas, MBC gold, honest "always-on reach" framing)
   ======================================================================= */
.network { background: var(--night); }
.network__card {
  position: relative; overflow: hidden; border-radius: 24px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02);
  display: grid; gap: clamp(1.5rem,4vw,2.5rem); align-items: center;
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
@media (min-width: 860px) { .network__card { grid-template-columns: 1.05fr 1fr; } }
.network__badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  font-size: .74rem; letter-spacing: .04em; color: rgba(244,242,236,.72); margin-bottom: 1.4rem; width: fit-content;
}
.network__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 9px var(--gold-hi); animation: net-pulse 2s ease-in-out infinite; }
@keyframes net-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
.network__copy h2 { color: #fff; margin-bottom: 1.1rem; }
.network__copy p { color: rgba(244,242,236,.76); font-size: var(--fs-lead); line-height: 1.62; max-width: 46ch; margin-bottom: 1.8rem; }
.network__cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.network__globe { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 480px; margin-inline: auto; }
.globe-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.network__hint {
  position: absolute; left: 50%; bottom: -.2rem; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,242,236,.28); pointer-events: none; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .network__dot { animation: none; } }
@media (max-width: 600px) { .network__cta { flex-direction: column; } .network__cta .btn { width: 100%; } }

/* a11y: crisp focus ring on the project-brief chips (native buttons; Enter/Space already toggle) */
.chip:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ===== Work grid: 3 columns on wide screens (now 10 concept cards) ===== */
@media (min-width: 1080px) { .work__grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== "Any industry" invite tile — spans the grid, says we build for everything ===== */
.mock--invite {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.2rem);
  flex-wrap: wrap; text-align: left;
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 2.4rem);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(201,162,75,.13), transparent 58%),
    linear-gradient(180deg, var(--paper, #fffdf8), var(--paper-2, #faf6ee));
  border: 1px solid rgba(201,162,75,.42);
}
.mock--invite__plus {
  flex: none; font-family: var(--serif); font-weight: 300; line-height: 1;
  font-size: clamp(2.6rem, 7vw, 4rem); color: var(--gold); opacity: .85;
}
.mock--invite__copy { max-width: 62ch; }
.mock--invite__copy h3 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: .25rem 0 .55rem; }
.mock--invite__copy p { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: 1.05rem; max-width: 60ch; }
.mock--invite__copy .btn { margin-top: .1rem; }
@media (max-width: 560px) {
  .mock--invite { text-align: center; flex-direction: column; }
  .mock--invite__copy { margin: 0 auto; }
}

/* ===== Print: clean, ink-friendly pages (especially the legal documents) ===== */
@media print {
  *, *::before, *::after {
    animation: none !important; transition: none !important;
    box-shadow: none !important; text-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    filter: none !important;
  }
  html, body { background: #fff !important; color: #111 !important; }
  /* hide chrome, media and decoration — keep the readable content */
  .nav, .mobile-menu, .footer, .scroll-progress, .to-top, .consent, .skip-link,
  .nav__toggle, .lang, .mbc-spark-canvas, .mbc-gem, .mbc-viewfinder,
  .hero__video, .hero__beam, .network__globe, .network__hint,
  .immersive__grid, .immersive__halo, .marquee, .gooey { display: none !important; }
  /* flatten dark sections to ink-on-paper */
  .on-dark, .section--immersive, .network, .hero, .contact, section, main {
    background: #fff !important; color: #111 !important;
  }
  h1, h2, h3, h4, h5, p, li, span, a, strong, em { color: #111 !important; }
  a { text-decoration: underline; }
  .container, .container--narrow, main, .legal { width: auto !important; max-width: 100% !important; margin: 0 auto !important; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li, .legal-notice { page-break-inside: avoid; }
  .legal, .legal-body { font-size: 11.5pt; line-height: 1.55; }
  .legal-notice { border: 1px solid #999 !important; background: #f6f6f6 !important; }
}

/* ===== ⌘K Command palette ===== */
.cmdk { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; opacity: 0; transition: opacity .18s var(--ease); }
.cmdk.is-open { opacity: 1; }
.cmdk[hidden] { display: none; }
.cmdk__backdrop { position: absolute; inset: 0; background: rgba(8,8,11,.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cmdk__panel {
  position: relative; width: min(580px, 100%); max-height: 70vh; display: flex; flex-direction: column;
  background: rgba(19,19,25,.88); border: 1px solid rgba(255,255,255,.13); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  overflow: hidden; color: #f3f1ea; transform: translateY(10px) scale(.985); transition: transform .2s var(--ease);
}
.cmdk.is-open .cmdk__panel { transform: none; }
.cmdk__bar { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.cmdk__bar svg { width: 18px; height: 18px; color: rgba(243,241,234,.55); flex: none; }
.cmdk__input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fdfcf8; font: inherit; font-size: 1.02rem; padding: .1rem 0; }
.cmdk__input::placeholder { color: rgba(243,241,234,.42); }
.cmdk__esc { font-size: .66rem; letter-spacing: .04em; color: rgba(243,241,234,.5); border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: .12rem .4rem; font-family: var(--sans); flex: none; }
.cmdk__list { overflow-y: auto; padding: .4rem; }
.cmdk__group { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(243,241,234,.4); padding: .7rem .7rem .3rem; font-family: var(--sans); }
.cmdk__item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .62rem .7rem; border-radius: 9px; cursor: pointer; color: #ece9e0; }
.cmdk__item.is-active { background: linear-gradient(90deg, rgba(201,162,75,.22), rgba(201,162,75,.07)); box-shadow: inset 2px 0 0 var(--gold); color: #fff; }
.cmdk__item-label { font-size: .95rem; }
.cmdk__item-go { display: flex; opacity: 0; transition: opacity .15s var(--ease); }
.cmdk__item-go svg { width: 16px; height: 16px; color: var(--gold-hi, #e6c87f); }
.cmdk__item.is-active .cmdk__item-go { opacity: 1; }
.cmdk__empty { padding: 1.6rem .9rem 1.8rem; text-align: center; color: rgba(243,241,234,.5); font-size: .92rem; }
@supports (backdrop-filter: url(#glass-distort)) { .cmdk__panel { backdrop-filter: blur(16px) url(#glass-distort) saturate(180%); } }

/* launcher pill (bottom-left, balances the back-to-top button) */
.cmdk-launch {
  position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 900; display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .7rem; border-radius: 999px; cursor: pointer; color: #f1ecdf;
  background: rgba(22,22,28,.42); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(8px); animation: cmdk-launch-in .5s var(--ease) 1.2s forwards;
}
@keyframes cmdk-launch-in { to { opacity: 1; transform: none; } }
.cmdk-launch:hover { background: rgba(34,34,42,.6); border-color: var(--gold); }
.cmdk-launch svg { width: 16px; height: 16px; }
.cmdk-launch kbd { font-size: .68rem; letter-spacing: .03em; font-family: var(--sans); color: rgba(241,236,223,.85); }
@media (max-width: 600px) { .cmdk-launch { left: 1rem; bottom: 1rem; padding: .55rem; } .cmdk-launch kbd { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cmdk, .cmdk__panel, .cmdk__item-go { transition: none; }
  .cmdk-launch { animation: none; opacity: 1; transform: none; }
}


/* === "The Skyline" — gold shining nav centerpiece (the cherry on top) === */
.nav__link--skyline{color:var(--gold-hi,#e6c87f);font-weight:600;letter-spacing:.005em;filter:drop-shadow(0 0 .4px rgba(201,162,75,.5));transition:filter .3s var(--ease,ease);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nav__links .nav__link--skyline{background-image:linear-gradient(100deg,var(--gold-deep,#a8842f) 0%,var(--gold,#c9a24b) 28%,#fff6da 47%,#fffaf0 50%,#fff6da 53%,var(--gold-hi,#e6c87f) 72%,var(--gold,#c9a24b) 100%);background-size:250% 100%;background-position:130% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:nav-in .55s var(--ease,ease) both,mbcf-nav-shine 5s var(--ease,ease) infinite;}
}
.nav__link--skyline:hover,.nav__link--skyline:focus-visible{filter:drop-shadow(0 0 7px rgba(230,200,127,.6));}
.nav__link--skyline::after{background:linear-gradient(90deg,var(--gold,#c9a24b),var(--gold-hi,#e6c87f))!important;}
@keyframes mbcf-nav-shine{0%{background-position:135% 0;}48%{background-position:-35% 0;}100%{background-position:135% 0;}}
.nav__links .nav__link:nth-child(6){animation-delay:.5s;}
.nav__links .nav__link:nth-child(7){animation-delay:.57s;}
@media (prefers-reduced-motion:reduce){.nav__links .nav__link--skyline{animation:none!important;background-position:50% 0;}}
.mobile-menu__skyline{color:var(--gold,#c9a24b)!important;font-weight:600;}