@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── ROOT TOKENS ── */
:root {
  --gold:          #C9A84C;
  --gold-light:    #E8D48B;
  --gold-dark:     #8A6B2C;
  --gold-glow:     rgba(201,168,76,0.18);
  --gold-glow-sm:  rgba(201,168,76,0.10);
  --black:         #000000;
  --charcoal:      #080808;
  --charcoal-mid:  #0D0D0D;
  --charcoal-card: #111111;
  --grey-dark:     #222222;
  --grey-mid:      #555555;
  --grey-light:    #888888;
  --white:         #F0EBE0;
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', -apple-system, sans-serif;
  --section-pad:   6rem 3rem;
  --max-w:         1180px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) var(--charcoal);
}
body {
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--charcoal); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── NAV ── */
.nav {
  position: fixed; top:0; left:0; width:100%; z-index:1000;
  padding: 1.4rem 3rem;
  display: flex; align-items:center; justify-content:space-between;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(201,168,76,0.07);
  transition: all 0.4s ease;
}
.nav.scrolled { padding: 0.85rem 3rem; background: rgba(0,0,0,0.97); }
.nav-logo { height: 40px; transition: height 0.4s ease; }
.nav.scrolled .nav-logo { height: 30px; }

/* Hamburger button */
.hamburger {
  display: flex; flex-direction:column;
  justify-content: center; gap: 6px;
  width: 44px; height: 44px;
  cursor: pointer; z-index: 1001;
  border: none; background: none; padding: 6px;
  position: relative;
}
.hamburger span {
  display: block; width: 26px; height: 1px;
  background: var(--gold);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center;
}
.hamburger span:last-child { width: 16px; }
.hamburger.open span:first-child  { transform: translateY(7px) rotate(45deg); width: 26px; }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:last-child   { transform: translateY(-7px) rotate(-45deg); width: 26px; }

/* nav-overlay removed — using horizontal menu */

/* ── SECTION BASE ── */
section {
  position: relative;
  padding: 6rem 3rem;
  display: flex; align-items:center; justify-content:center;
}
.section-inner {
  max-width: 1180px; width:100%; margin:0 auto;
}
.section-label {
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform:uppercase;
  color: var(--gold); font-weight:600; margin-bottom: 0.75rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700; color: var(--white);
  line-height: 1.15; margin-bottom: 1rem;
}
.section-subtitle {
  font-size: 1rem; color: var(--grey-light);
  max-width: 620px; font-weight:300; line-height:1.85;
}
.section-subtitle.wide { max-width: 820px; }
.gold-divider {
  width:50px; height:1px;
  background: var(--gold); margin:1.25rem 0;
}
.gold-divider.center { margin:1.25rem auto; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1.25rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }

/* Client pedigree logos -- sits on dark bg, blends naturally */
.client-logos-wrap {
  margin-top: 3rem; text-align: center;
}
.client-logos-wrap img {
  max-width: 820px; width: 100%;
  display: block; margin: 0 auto;
  opacity: 0.82;
  filter: brightness(1.05);
  transition: opacity 0.4s ease;
}
.client-logos-wrap img:hover { opacity: 1; }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background: var(--black);
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 50%;
  z-index:0;
  filter: brightness(0.35) saturate(0.8);
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.5) 60%,
    rgba(0,0,0,0.9) 100%);
}
/* Film grain overlay — cinematic texture at z-index 1 */
.hero::after {
  content: '';
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  opacity: 0.032;
  pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain 0.35s steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,   0);   }
  20%  { transform: translate(-3%, -4%); }
  40%  { transform: translate(4%,   3%); }
  60%  { transform: translate(-2%,  4%); }
  80%  { transform: translate(3%,  -3%); }
  100% { transform: translate(-1%,  2%); }
}

.hero-content {
  position:relative; z-index:2;
  max-width: 900px; text-align:center; padding:0 2rem;
}
.hero-label {
  font-size: 0.6rem; letter-spacing:0.3em; text-transform:uppercase;
  color: var(--gold); margin-bottom:1.5rem; font-weight:600;
}
/* Hero logo float micro-animation */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-8px);  }
}
.hero-logo-img {
  animation: logoFloat 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Hero stat counter — value transitions */
.hero-stat-val {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700; color: var(--gold);
  display: block; line-height: 1;
  transition: opacity 0.15s ease;
}
.hero-stat-val.counting { opacity: 0.7; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900; color: var(--white);
  line-height: 1.05; margin-bottom: 0.75rem;
}
.hero-title em {
  font-style:italic; color: var(--gold-light);
}
.hero-fr {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-style:italic; color: rgba(232,212,139,0.5);
  margin-bottom: 2rem; font-weight:400;
}
.hero-desc {
  font-size: 1rem; color: rgba(240,235,224,0.7);
  max-width: 680px; margin:0 auto 2.5rem;
  line-height: 1.9; font-weight:300;
}
.hero-desc strong { color: var(--gold-light); font-weight:600; }
.hero-stats {
  display:flex; gap:2.5rem; justify-content:center;
  flex-wrap:wrap; margin-bottom:2.5rem;
}
.hero-stat { text-align:center; }
.hero-stat-val {
  display:block; font-family: var(--font-display);
  font-size: 1.6rem; font-weight:700; color: var(--gold);
  line-height:1.1;
}
.hero-stat-lbl {
  display:block; font-size:0.6rem; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--grey-mid); margin-top:0.2rem;
}
.hero-cta {
  display:inline-block;
  padding: 0.9rem 2.5rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration:none;
  font-size: 0.7rem; letter-spacing:0.15em; text-transform:uppercase;
  font-weight:600;
  transition: all 0.3s ease;
}
.hero-cta:hover {
  background: var(--gold); color: var(--black);
  box-shadow: 0 0 40px var(--gold-glow);
}
.scroll-indicator {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  animation: bounce 2.5s infinite; z-index:2;
}
.scroll-indicator span {
  display:block; width:1px; height:48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  margin:0 auto 0.5rem;
}
.scroll-indicator small {
  font-size:0.55rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--grey-mid);
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(6px); }
}

/* ── PARADOX ── */
.paradox {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.04) 0%, transparent 60%),
    var(--charcoal);
}
.paradox-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:3rem;
}
.paradox-card {
  background: var(--charcoal-card);
  border: 1px solid var(--grey-dark);
  padding: 2.5rem 2rem;
  position: relative; overflow: hidden;
  transition: all 0.4s ease;
}
.paradox-card::before {
  content:''; position:absolute; top:0; left:0;
  width:100%; height:2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  transform:scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.paradox-card:hover::before { transform:scaleX(1); }
.paradox-card:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.05);
}
.paradox-stat {
  font-family: var(--font-display);
  font-size: 2.8rem; font-weight:700;
  color: var(--gold); margin-bottom:0.5rem;
}
.paradox-card h3 {
  font-family: var(--font-display);
  font-size:1.1rem; color:var(--gold-light);
  margin-bottom:0.75rem;
}
.paradox-card p { font-size:0.85rem; color:var(--grey-light); line-height:1.75; }

/* ── FACILITY ── */
.facility {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(201,168,76,0.03) 0%, transparent 50%),
    var(--black);
}
/* Text block sits above the hardware grid -- text-first philosophy */
.facility-intro {
  display: flex; flex-direction: column; gap: 3rem; margin-bottom: 5rem;
}
.facility-intro-text { max-width: 680px; }
.facility-intro-text .section-title { margin-bottom: 1rem; }

/* Hardware floating grid -- 2 columns, pure floating images */
.hw-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap: 5rem 4rem;
}
.hw-item {
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap: 1.5rem;
  background:none; border:none;
  position: relative;
}
/* Ambient pool of light beneath each floating asset */
.hw-item::before {
  content: '';
  position: absolute;
  bottom: 60px;
  left: 50%; transform: translateX(-50%);
  width: 160px; height: 40px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.12) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hw-item:hover::before { opacity: 1.5; }
.hw-img {
  max-width: 220px; max-height: 200px;
  width:auto; height:auto;
  display:block; margin:0 auto;
  mix-blend-mode: screen;
  filter: brightness(1.15) contrast(1.05);
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.4s ease;
}
.hw-item:hover .hw-img {
  transform: translateY(-14px) scale(1.05);
  filter: brightness(1.45) contrast(1.1);
}
.hw-name {
  font-family: var(--font-display);
  font-size:0.9rem; color: var(--gold-light);
  letter-spacing:0.05em; margin-bottom:0.2rem;
}
.hw-spec {
  font-size:0.72rem; color:var(--grey-mid); line-height:1.5;
}

/* Creative Hub subsection inside Facility */
.hub-divider {
  border:none; border-top:1px solid var(--grey-dark);
  margin:5rem 0;
}
.hub-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center; margin-top:3rem;
}
.hub-text {}
.hub-assets {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:3rem 2rem;
}
.hub-asset {
  display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:0.75rem;
}
.hub-img {
  max-width:180px; max-height:160px;
  width:auto; height:auto; display:block; margin:0 auto;
  mix-blend-mode: screen;
  filter: brightness(1.15) contrast(1.05);
  transition: transform 0.5s ease, filter 0.4s ease;
}
.hub-asset:hover .hub-img {
  transform: translateY(-10px) scale(1.04);
  filter: brightness(1.4);
}

/* ── ARSENAL ── */
.arsenal {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.03) 0%, transparent 50%),
    var(--black);
}
.arsenal .section-inner { text-align:center; }
.arsenal-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap: 6rem 5rem;
  margin-top: 4rem;
  max-width: 880px; margin-left:auto; margin-right:auto;
}
.arsenal-item {
  background:none; border:none;
  display:flex; flex-direction:column;
  align-items:center; text-align:center; gap: 1.5rem;
  position: relative;
}
/* Ambient pool of gold light beneath each camera/equipment object */
.arsenal-item::before {
  content: '';
  position: absolute;
  bottom: 70px;
  left: 50%; transform: translateX(-50%);
  width: 200px; height: 50px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.1) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.arsenal-item:hover::before { opacity: 2; }
.arsenal-img {
  max-width: 260px; max-height: 230px;
  width:auto; height:auto;
  display:block; margin:0 auto;
  mix-blend-mode: screen;
  filter: brightness(1.15) contrast(1.05);
  transition: transform 0.55s cubic-bezier(0.23,1,0.32,1), filter 0.4s ease;
}
.arsenal-item:hover .arsenal-img {
  transform: translateY(-16px) scale(1.06);
  filter: brightness(1.5) contrast(1.1);
}
.arsenal-name {
  font-family: var(--font-display);
  font-size:1rem; color:var(--gold-light);
  letter-spacing:0.06em; margin-bottom:0.2rem;
}
.arsenal-spec {
  font-size:0.73rem; color:var(--grey-mid); line-height:1.55;
}
/* Tech spec list beneath each arsenal item */
.arsenal-tech {
  list-style:none; padding:0;
  margin-top:0.75rem; padding-top:0.75rem;
  border-top:1px solid rgba(201,168,76,0.1);
  text-align:left; width:100%; max-width:260px;
}
.arsenal-tech li {
  font-size:0.62rem; color:rgba(136,136,136,0.65);
  padding:0.18rem 0; display:flex; align-items:flex-start;
  gap:0.5rem; line-height:1.45;
}
.arsenal-tech li::before { content:'/'; color:var(--gold-dark); flex-shrink:0; }
.arsenal-tech .credit {
  color:rgba(201,168,76,0.4); font-style:italic;
  margin-top:0.4rem; display:block;
  border-top:1px solid rgba(255,255,255,0.04); padding-top:0.4rem;
}

/* Methodology / One-Stop section */
.methodology { background: var(--charcoal-card); }
.method-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:3rem;
}
.method-card {
  padding:2.5rem 2rem;
  border:1px solid var(--grey-dark);
  position:relative; overflow:hidden;
  transition: all 0.4s ease;
}
.method-card::before {
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  transform:scaleX(0); transition:transform 0.5s ease;
}
.method-card:hover::before { transform:scaleX(1); }
.method-card:hover { border-color:rgba(201,168,76,0.25); transform:translateY(-3px); }
.method-num {
  font-family:var(--font-display); font-size:3rem;
  font-weight:700; color:rgba(201,168,76,0.08);
  display:block; line-height:1; margin-bottom:0.5rem;
}
.method-card h3 {
  font-family:var(--font-display); font-size:1.1rem;
  color:var(--gold-light); margin-bottom:0.75rem;
}
.method-card p { font-size:0.82rem; color:var(--grey-light); line-height:1.8; }

/* Investment Why block inside Arsenal */
.arsenal-why {
  margin-top:4rem; padding:3rem;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(201,168,76,0.1);
  display:block;
}
.arsenal-why h3 {
  font-family:var(--font-display); font-size:1.4rem;
  color:var(--white); margin-bottom:1rem; line-height:1.2;
}
.arsenal-why p { font-size:0.85rem; color:var(--grey-light); line-height:1.85; margin-bottom:1rem; }
.arsenal-why-stats { display:flex; flex-direction:column; gap:1.5rem; }
.aws-row {
  display:flex; gap:1.5rem; align-items:center;
  padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,0.05);
}
.aws-val {
  font-family:var(--font-display); font-size:2rem;
  font-weight:700; color:var(--gold); min-width:100px;
}
.aws-desc { font-size:0.78rem; color:var(--grey-mid); line-height:1.65; }

.arsenal-stats-bar {
  margin-top:5rem; padding-top:3rem;
  border-top:1px solid rgba(201,168,76,0.12);
  display:flex; gap:4rem; justify-content:center; flex-wrap:wrap;
}
.ast-block { text-align:center; }
.ast-val {
  font-family: var(--font-display);
  font-size:2.5rem; font-weight:700; color:var(--gold);
  display:block;
}
.ast-lbl {
  font-size:0.6rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--grey-mid);
  margin-top:0.2rem; display:block;
}

/* ── SERVICES / PILLARS ── */
.services { background: var(--charcoal); }
.pillars { display:flex; flex-direction:column; gap:1.5rem; margin-top:3rem; }
.pillar {
  display:block; padding:2.5rem; text-align:center;
  background: var(--charcoal-card);
  border:1px solid var(--grey-dark);
  transition: all 0.4s ease; align-items:start;
}
.pillar:hover { border-color:var(--gold-dark); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,0.4); }
.pillar-num {
  font-family: var(--font-display); font-size:3.5rem; font-weight:700;
  color: rgba(201,168,76,0.12); display:block; line-height:1; margin-bottom:0.25rem;
}
.pillar-header h3 {
  font-family: var(--font-display);
  font-size:1.3rem; color:var(--gold-light); line-height:1.2;
}
.pillar-body { border-left:1px solid rgba(255,255,255,0.06); padding-left:2rem; }
.pillar-lead {
  font-size:0.9rem; color:var(--grey-light); line-height:1.7;
  margin-bottom:1.25rem; padding-bottom:1.25rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.pillar-lead strong { color:var(--gold); font-family:var(--font-display); }
.pillar-list { list-style:none; padding:0; margin:0; }
.pillar-list li {
  font-size:0.82rem; color:var(--grey-mid);
  padding:0.4rem 0; display:flex; align-items:center; gap:0.6rem;
}
.pillar-list li::before { content:'--'; color:var(--gold-dark); font-weight:700; }

/* ── INSTITUTIONAL ── */
.institutional { background: var(--charcoal); }
.inst-grid {
  display:flex; flex-direction:column; align-items:center; gap:1.5rem; margin-top:3rem;
}
.inst-card {
  background: var(--charcoal-card); border:1px solid var(--grey-dark);
  padding:2.5rem 2rem; text-align:center;
  transition: all 0.4s ease;
}
.inst-card:hover { border-color:var(--gold-dark); transform:translateY(-3px); }
.inst-icon { font-size:2rem; margin-bottom:1rem; }
.inst-card h3 {
  font-family: var(--font-display);
  font-size:1.1rem; color:var(--gold-light); margin-bottom:0.75rem;
}
.inst-card p { font-size:0.82rem; color:var(--grey-light); line-height:1.75; }

/* ── ARCTOS PARTNERSHIP ── */
.arctos {
  background: radial-gradient(ellipse at bottom right, rgba(201,168,76,0.04) 0%, transparent 60%), var(--charcoal);
  border-top:1px solid rgba(201,168,76,0.08);
}
.arctos-inner {
  display:flex; gap:5rem; align-items:center;
}
.arctos-text { flex:1; }
.arctos-brand {
  flex:0 0 320px; text-align:center;
  padding:3rem; background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
}
.arctos-logo {
  width:100%; max-width:200px;
  margin-bottom:1.5rem;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.08));
}
.arctos-tag {
  display:inline-block; padding:0.35rem 1rem;
  background:var(--gold-dark); color:var(--black);
  font-size:0.55rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.2em;
  margin-bottom:1rem;
}
.arctos-brand p {
  font-size:0.78rem; color:var(--grey-mid); line-height:1.7;
}
.arctos-points { list-style:none; margin-top:2rem; }
.arctos-points li {
  font-size:0.85rem; color:var(--grey-light);
  padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex; align-items:center; gap:0.6rem;
}
.arctos-points li::before { content:'--'; color:var(--gold); font-weight:700; }

/* ── INVESTMENT PROPOSITION ── */
.investment { background: var(--charcoal-card); }
.invest-split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; margin-top:3rem;
}
.invest-col {
  padding:3rem; border:1px solid var(--grey-dark);
}
.invest-col:first-child { border-right:none; }
.invest-col h3 {
  font-family: var(--font-display);
  font-size:1.2rem; color:var(--gold); margin-bottom:0.5rem;
}
.invest-pct {
  font-family: var(--font-display); font-size:3.5rem;
  font-weight:900; color:var(--gold); opacity:0.18; margin-bottom:1.5rem;
  line-height:1;
}
.invest-col ul { list-style:none; padding:0; }
.invest-col li {
  font-size:0.85rem; color:var(--grey-light);
  padding:0.55rem 0; border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex; align-items:center; gap:0.6rem;
}
.invest-col li::before { content:'--'; color:var(--gold-dark); }

/* ── STUDIO HERITAGE TIMELINE ── */
.heritage-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: 4rem;
  position: relative;
}
/* Connecting gold line through all nodes */
.heritage-track::before {
  content: '';
  position: absolute;
  top: 20px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201,168,76,0.15),
    rgba(201,168,76,0.5) 40%,
    rgba(201,168,76,0.8) 70%,
    var(--gold) 100%);
  z-index: 0;
}
.heritage-stop {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 0.75rem;
  position: relative; z-index: 1;
}
.heritage-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--charcoal-card);
  border: 1px solid var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 700;
  color: var(--gold-dark);
  transition: all 0.4s ease;
}
.heritage-stop:hover .heritage-dot {
  background: var(--gold-dark);
  color: var(--black);
  transform: scale(1.1);
}
/* Active / current studio */
.heritage-stop.current .heritage-dot {
  background: var(--black);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.08),
              0 0 20px rgba(201,168,76,0.15);
  animation: heritagePulse 2.5s ease-in-out infinite;
}
@keyframes heritagePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201,168,76,0.08), 0 0 20px rgba(201,168,76,0.15); }
  50%       { box-shadow: 0 0 0 8px rgba(201,168,76,0.04), 0 0 35px rgba(201,168,76,0.25); }
}
.heritage-num {
  font-size: 0.6rem; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 0.35rem; display: block;
}
.heritage-city {
  font-family: var(--font-display);
  font-size: 0.9rem; color: var(--white);
  margin-bottom: 0.25rem;
}
.heritage-country {
  font-size: 0.6rem; letter-spacing: 0.1em;
  color: var(--gold-dark); text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.heritage-role {
  font-size: 0.65rem; color: var(--grey-mid);
  line-height: 1.55;
}
.heritage-stop.current .heritage-city { color: var(--gold-light); }
.heritage-stop.current .heritage-role { color: var(--grey-light); }

/* ── CONTACT ── */
.contact { background: var(--black); text-align:center; }

.contact-email {
  display:inline-block; margin-top:2.5rem;
  padding:1rem 3rem; border:1px solid var(--gold);
  color:var(--gold); text-decoration:none;
  font-size:0.8rem; letter-spacing:0.15em; text-transform:uppercase;
  font-weight:600; transition: all 0.3s ease;
}
.contact-email:hover {
  background:var(--gold); color:var(--black);
  box-shadow: 0 0 40px var(--gold-glow);
}

/* ── FOOTER ── */
.footer {
  background:var(--black); padding:2.5rem 3rem;
  border-top:1px solid rgba(201,168,76,0.08);
  text-align:center;
}
.footer-logo { height:32px; opacity:0.5; margin-bottom:1rem; }
.footer p {
  font-size:0.62rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--grey-mid);
}

/* ── THE PROCESS — Client Journey ── */
.process { background: var(--black); }
.process-track {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:0; margin-top:4rem; position:relative;
}
.process-track::before {
  content:''; position:absolute;
  top: 28px; left:10%; right:10%; height:1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,168,76,0.2) 20%,
    rgba(201,168,76,0.4) 50%,
    rgba(201,168,76,0.2) 80%, transparent);
  z-index:0;
}
.process-step {
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding:0 1.5rem; position:relative; z-index:1;
}
.process-dot {
  width:56px; height:56px; border-radius:50%;
  background:var(--black);
  border:1px solid var(--gold-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1rem;
  font-weight:700; color:var(--gold);
  margin-bottom:1.5rem;
  transition: all 0.4s ease;
  flex-shrink:0;
}
.process-step:hover .process-dot {
  background: var(--gold-dark);
  color: var(--black);
  box-shadow: 0 0 30px rgba(201,168,76,0.2);
}
.process-step h4 {
  font-family:var(--font-display); font-size:0.95rem;
  color:var(--gold-light); margin-bottom:0.75rem;
  line-height:1.3;
}
.process-step p {
  font-size:0.72rem; color:var(--grey-mid); line-height:1.7;
}
.process-step .process-tools {
  margin-top:0.75rem; padding-top:0.75rem;
  border-top:1px solid rgba(201,168,76,0.08);
  font-size:0.6rem; color:rgba(201,168,76,0.4);
  letter-spacing:0.05em; line-height:1.6;
}

/* ── ROADMAP ── */
.roadmap {
  background: radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.04) 0%, transparent 60%),
    var(--charcoal);
}
.roadmap-track {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin-top:4rem; position:relative;
}
.roadmap-track::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    var(--gold-dark) 0%,
    var(--gold) 50%,
    rgba(201,168,76,0.3) 100%);
}
.roadmap-year {
  padding:3rem 2.5rem 2.5rem;
  border:1px solid var(--grey-dark); border-top:none;
  position:relative; transition:all 0.4s ease;
}
.roadmap-year:not(:last-child) { border-right:none; }
.roadmap-year::before {
  content:''; position:absolute; top:-1px; left:2.5rem;
  width:40px; height:3px;
  background:var(--gold);
}
.roadmap-year:nth-child(2)::before { background: var(--gold-light); }
.roadmap-year:nth-child(3)::before { background: rgba(201,168,76,0.5); opacity:0.6; }
.roadmap-year:hover { border-color:rgba(201,168,76,0.2); background:rgba(201,168,76,0.02); }
.roadmap-label {
  font-size:0.55rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:0.4rem; display:block;
}
.roadmap-year h3 {
  font-family:var(--font-display); font-size:1.3rem;
  color:var(--white); margin-bottom:1.5rem;
  padding-bottom:1rem; border-bottom:1px solid var(--grey-dark);
}
.roadmap-milestones { list-style:none; padding:0; }
.roadmap-milestones li {
  font-size:0.8rem; color:var(--grey-light);
  padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex; align-items:flex-start; gap:0.75rem; line-height:1.55;
}
.roadmap-milestones li::before {
  content:''; display:block;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold-dark); flex-shrink:0; margin-top:0.45rem;
}
.roadmap-milestones li strong { color:var(--gold-light); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .facility-intro { grid-template-columns:1fr; gap:2rem; }
  .hub-grid { grid-template-columns:1fr; }
  .arctos-inner { flex-direction:column; gap:3rem; }
  .arctos-brand { flex:1; width:100%; max-width:440px; }
}
@media (max-width: 768px) {
  section { padding:4rem 1.5rem; }
  .nav { padding:1rem 1.5rem; }
  .nav.scrolled { padding:0.6rem 1.5rem; }
  .nav-links { display:none; }
  .paradox-grid { grid-template-columns:1fr; }
  .hw-grid { grid-template-columns:1fr; gap:3rem; }
  .hub-assets { grid-template-columns:1fr; }
  .arsenal-grid { grid-template-columns:1fr; gap:3rem; max-width:100%; }
  .pillar { grid-template-columns:1fr; }
  .pillar-body { border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,0.06); padding-top:1.5rem; }
  .inst-grid { grid-template-columns:1fr; }
  .invest-split { grid-template-columns:1fr; }
  .invest-col:first-child { border-right:1px solid var(--grey-dark); border-bottom:none; }
  .hero-stats { gap:1.5rem; }
  .arsenal-stats-bar { gap:2rem; }
}


/* ==========================================================================
   MASSIVE VOLUME BANNER (SECTION 3.5)
   ========================================================================== */
.volume-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4rem 2rem;
  border-top: 1px solid rgba(185, 155, 90, 0.2);
  border-bottom: 1px solid rgba(185, 155, 90, 0.2);
  margin-top: 2rem;
}

.volume-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 1;
}

.volume-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to top, var(--bg-dark) 0%, rgba(10, 10, 10, 0.6) 40%, rgba(10, 10, 10, 0.4) 100%);
}

.volume-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
}

.volume-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  margin-bottom: 1.5rem;
}

.volume-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-main);
  max-width: 700px;
  margin: 0 auto;
}

/* ==========================================================================
   NATIVE CSS CAPITAL STACK
   ========================================================================== */
.capital-stack-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
  margin-top: 3rem;
}

@media (max-width: 900px) {
  .capital-stack-container {
    grid-template-columns: 1fr;
  }
}

.cs-chart-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
  height: 400px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.cs-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
}

.cs-label {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold-light);
  line-height: 1.3;
}

.cs-label span {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--grey-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Animations for Bars */
@keyframes growUp {
  from { height: 0; opacity: 0; }
  to { opacity: 1; }
}

.cs-bar-total {
  width: 100%;
  height: 280px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-dark) 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 20px rgba(185, 155, 90, 0.2);
  animation: growUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.cs-bar-asset {
  width: 100%;
  height: 100px; /* ~38% of total height */
  background: linear-gradient(180deg, #d4af37 0%, #aa8624 100%);
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: growUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
  opacity: 0;
  border-bottom: 2px solid var(--bg-dark);
}

.cs-bar-cash {
  width: 100%;
  height: 180px; /* ~62% of total height */
  background: linear-gradient(180deg, rgba(185, 155, 90, 0.6) 0%, rgba(185, 155, 90, 0.3) 100%);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: growUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0s forwards;
}

.split-col .cs-bar-asset span,
.split-col .cs-bar-cash span {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: #fff;
  padding: 0 0.5rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.split-col .cs-bar-asset small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  opacity: 0.8;
  margin-top: 4px;
}

.hardware-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.hw-item {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 1rem;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.hw-item:hover {
  transform: translateY(-5px);
  border-color: rgba(185, 155, 90, 0.4);
}

.hw-item img {
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
  margin-bottom: 1rem;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

.hw-item span {
  display: block;
  font-size: 0.85rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── HORIZONTAL NAVIGATION ── */
.horizontal-menu {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.horizontal-menu .nav-item {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.horizontal-menu .nav-item:hover {
  color: var(--gold);
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    padding: 1rem !important;
  }
  .horizontal-menu {
    margin-top: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* -- PROVEN METHODOLOGY -- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (max-width: 900px) { .method-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .method-grid { grid-template-columns: 1fr; } }

.method-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.method-card:hover {
  border-color: rgba(201,168,76,0.35);
  background: rgba(201,168,76,0.04);
}
.method-num {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-weight: 600;
}
.method-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 0.75rem;
  font-weight: 700;
}
.method-card p {
  font-size: 0.9rem;
  color: var(--grey-light);
  line-height: 1.75;
}

/* -- PROCESS TRACK -- */
.process-track {
  display: flex;
  gap: 0;
  align-items: flex-start;
  position: relative;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.process-track::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark) 20%, var(--gold-dark) 80%, transparent);
  opacity: 0.4;
  pointer-events: none;
}
.process-step {
  flex: 1;
  min-width: 180px;
  padding: 0 1rem;
  text-align: center;
  position: relative;
}
.process-dot {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--charcoal-card);
  border: 1px solid var(--gold-dark);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  position: relative;
  z-index: 1;
}
.process-step h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.process-step p {
  font-size: 0.8rem;
  color: var(--grey-light);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.process-tools {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .process-track { flex-direction: column; }
  .process-track::before { display: none; }
  .process-step { min-width: unset; padding: 1rem 0; border-bottom: 1px solid rgba(201,168,76,0.1); }
}

/* ══════════════════════════════════════════════════════════
   LOGO CENTERING — NAV + CONTACT FOOTER
   ══════════════════════════════════════════════════════════ */
.nav-logo {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
  transition: height 0.4s ease;
}
.nav.scrolled .nav-logo { height: 30px; }
.tis-logo {
  display: block;
  margin: 0 auto 2rem;
  height: 56px;
  width: auto;
  object-fit: contain;
}

/* ══════════════════════════════════════════════════════════
   VOLUME BANNER — STATIC IMAGE + GRADIENT OVERLAY
   ══════════════════════════════════════════════════════════ */
.volume-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
}
/* Old parallax helper — suppressed */
.volume-bg { display: none; }

/* New static background */
.volume-static {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  z-index: 0;
  filter: brightness(0.55) saturate(0.85);
}
/* Dark gradient overlay — ensures text legibility in all conditions */
.volume-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45)  0%,
    rgba(0,0,0,0.20) 40%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.90) 100%
  ),
  linear-gradient(
    to right,
    rgba(0,0,0,0.6) 0%,
    transparent     30%,
    transparent     70%,
    rgba(0,0,0,0.6) 100%
  );
}
.volume-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 2rem;
  max-width: 820px;
}
.volume-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--white);
  margin-bottom: 1rem;
}
.volume-content p {
  font-size: 1.05rem;
  color: rgba(240,235,224,0.85);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════
   MARKET DATA STRIP (GAP 01)
   ══════════════════════════════════════════════════════════ */
.market-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(201,168,76,0.04);
  flex-wrap: wrap;
}
.ms-stat {
  flex: 1;
  min-width: 160px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}
.ms-value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.ms-label {
  font-size: 0.68rem;
  color: rgba(240,235,224,0.6);
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
}
.ms-divider {
  width: 1px;
  background: rgba(201,168,76,0.15);
  align-self: stretch;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .ms-divider { display: none; }
  .ms-stat { border-bottom: 1px solid rgba(201,168,76,0.1); }
}

/* ══════════════════════════════════════════════════════════
   TRIP 40% CALLOUT + COMPETITOR RATES (GAP 02 + 03)
   ══════════════════════════════════════════════════════════ */
.trip-callout {
  background: var(--charcoal-card);
  border-top: 1px solid rgba(201,168,76,0.12);
  border-bottom: 1px solid rgba(201,168,76,0.12);
  padding: 3.5rem 3rem;
}
.trip-inner {
  max-width: var(--max-w);
  margin: 0 auto 2.5rem;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.trip-badge {
  flex-shrink: 0;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: var(--gold-dark);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 0 40px rgba(201,168,76,0.3);
}
.trip-body { flex: 1; min-width: 260px; }
.trip-body h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}
.trip-body p {
  font-size: 0.95rem;
  color: rgba(240,235,224,0.75);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.trip-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.trip-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.trip-stat span {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.trip-stat small {
  font-size: 0.68rem;
  color: var(--grey-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Competitor rates table */
.trip-context {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(201,168,76,0.1);
}
.trip-context-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grey-light);
  margin-bottom: 1rem;
}
.trip-rates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.trip-rate-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
}
.trip-rate-item.ln-rate {
  background: rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.25);
}
.tr-name {
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 500;
}
.tr-rate {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--grey-light);
  white-space: nowrap;
}
.ln-rate .tr-rate { color: var(--gold); }
.tr-note {
  font-size: 0.68rem;
  color: var(--grey-light);
  opacity: 0.7;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .trip-rate-item { grid-template-columns: 1fr; }
  .tr-note { display: none; }
}

/* ══════════════════════════════════════════════════════════
   ESG / SUSTAINABILITY GRID (GAP 05)
   ══════════════════════════════════════════════════════════ */
.esg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (max-width: 768px) {
  .esg-grid { grid-template-columns: 1fr; }
}
.esg-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 6px;
  padding: 2rem 1.75rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.esg-card:hover {
  border-color: rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.05);
}
.esg-icon {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.esg-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}
.esg-card p {
  font-size: 0.88rem;
  color: rgba(240,235,224,0.7);
  line-height: 1.8;
  margin-bottom: 0.75rem;
}
.esg-source {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  font-weight: 600;
}
.section-subtitle.wide { max-width: 780px; }

/* ══════════════════════════════════════════════════════════
   PARTNERSHIP MODEL CARDS — CONTACT CTA (GAP 07)
   ══════════════════════════════════════════════════════════ */
.tis-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}
@media (max-width: 640px) {
  .tis-model-grid { grid-template-columns: 1fr; }
}
.tis-model-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 4px;
  padding: 1.25rem;
  text-align: left;
}
.tmc-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.tis-model-card p {
  font-size: 0.8rem;
  color: rgba(240,235,224,0.65);
  line-height: 1.7;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   VIZ 01 — MARKET STRIP: ENLARGED NUMBERS + GLOW PULSE
   ══════════════════════════════════════════════════════════ */
.market-strip { position: relative; box-shadow: 0 0 80px rgba(201,168,76,0.07); }
.ms-value { font-size: clamp(2.8rem, 5vw, 4.2rem) !important; letter-spacing: -0.02em; }
@keyframes stripGlow {
  0%,100% { box-shadow: 0 0 40px rgba(201,168,76,0.05); }
  50%      { box-shadow: 0 0 100px rgba(201,168,76,0.15); }
}
.market-strip.visible { animation: stripGlow 4s ease-in-out 0.5s infinite; }

/* ══════════════════════════════════════════════════════════
   VIZ 02 — MOAT TABLE: GOLD LN COLUMN + STAGGERED CHECKS
   ══════════════════════════════════════════════════════════ */
.moat-table .col-ln { border-left: 2px solid rgba(201,168,76,0.4) !important; background: rgba(201,168,76,0.03); }
.moat-table thead .col-ln { background: rgba(201,168,76,0.08) !important; color: var(--gold) !important; }
.moat-table-wrap { border: 1px solid rgba(201,168,76,0.1); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 40px rgba(0,0,0,0.4); }
@keyframes checkPop { 0% { transform:scale(0) rotate(-15deg); opacity:0; } 100% { transform:scale(1) rotate(0); opacity:1; } }
.moat-check { display:inline-block; animation: checkPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; animation-play-state:paused; }
.moat-table.animate .moat-check { animation-play-state: running; }
.moat-table tbody tr:nth-child(1) .moat-check { animation-delay:0.05s; }
.moat-table tbody tr:nth-child(2) .moat-check { animation-delay:0.10s; }
.moat-table tbody tr:nth-child(3) .moat-check { animation-delay:0.15s; }
.moat-table tbody tr:nth-child(4) .moat-check { animation-delay:0.20s; }
.moat-table tbody tr:nth-child(5) .moat-check { animation-delay:0.25s; }
.moat-table tbody tr:nth-child(6) .moat-check { animation-delay:0.30s; }
.moat-table tbody tr:nth-child(7) .moat-check { animation-delay:0.35s; }
.moat-table tbody tr:nth-child(8) .moat-check { animation-delay:0.40s; }
.moat-table tbody tr:nth-child(9) .moat-check { animation-delay:0.45s; }
.moat-table tbody tr:nth-child(10) .moat-check { animation-delay:0.50s; }
.moat-table tbody tr:nth-child(11) .moat-check { animation-delay:0.55s; }
.moat-table tbody tr:nth-child(12) .moat-check { animation-delay:0.60s; }
.moat-table tbody tr:nth-child(13) .moat-check { animation-delay:0.65s; }
.moat-table tbody tr:nth-child(14) .moat-check { animation-delay:0.70s; }

/* ══════════════════════════════════════════════════════════
   VIZ 03 — TRIP: DIM COMPETITORS, ELEVATE LN ROW
   ══════════════════════════════════════════════════════════ */
.trip-rate-item:not(.ln-rate) { opacity:0.48; transition:opacity 0.3s ease; }
.trip-rate-item:not(.ln-rate):hover { opacity:0.78; }
.ln-rate { border-left:3px solid var(--gold) !important; box-shadow:0 0 30px rgba(201,168,76,0.12); transform:translateX(2px); }
.ln-rate .tr-name::before { content:'\2726  '; color:var(--gold); font-size:0.8em; }

/* ══════════════════════════════════════════════════════════
   VIZ 04 — ESG: HERO CARD FULL-WIDTH
   ══════════════════════════════════════════════════════════ */
.esg-card.esg-hero { grid-column:1/-1; background:linear-gradient(135deg,rgba(201,168,76,0.07) 0%,rgba(0,0,0,0) 70%); border-color:rgba(201,168,76,0.28); padding:2.5rem; }
.esg-hero-inner { display:flex; align-items:center; gap:3rem; flex-wrap:wrap; }
.esg-hero-stat { flex-shrink:0; font-family:var(--font-display); font-size:clamp(4rem,10vw,7rem); font-weight:900; color:var(--gold); line-height:1; letter-spacing:-0.04em; text-shadow:0 0 80px rgba(201,168,76,0.4); }
.esg-hero-stat span { font-size:0.45em; vertical-align:super; color:var(--gold-light); }
.esg-hero-text { flex:1; min-width:260px; }
.esg-hero-text h3 { font-family:var(--font-display); font-size:1.4rem; color:var(--gold-light); margin-bottom:0.75rem; }
.esg-hero-text p { font-size:0.9rem; color:rgba(240,235,224,0.75); line-height:1.9; margin-bottom:0.5rem; }

/* ══════════════════════════════════════════════════════════
   VIZ 05 — CINEMATIC SEPARATORS
   ══════════════════════════════════════════════════════════ */
.cine-sep { display:flex; align-items:center; gap:2.5rem; padding:3.5rem 4rem; background:var(--black); position:relative; overflow:hidden; }
.cine-sep::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,rgba(201,168,76,0.04) 0%,transparent 70%); pointer-events:none; }
.cine-sep__line { flex:1; height:1px; background:linear-gradient(90deg,transparent 0%,rgba(201,168,76,0.22) 30%,rgba(201,168,76,0.22) 70%,transparent 100%); }
.cine-sep__quote { font-family:var(--font-display); font-style:italic; font-size:clamp(0.9rem,1.8vw,1.15rem); color:rgba(201,168,76,0.6); text-align:center; white-space:nowrap; letter-spacing:0.01em; flex-shrink:0; max-width:520px; }
@media (max-width:680px) { .cine-sep { flex-direction:column; padding:2.5rem 2rem; gap:1rem; } .cine-sep__quote { white-space:normal; } }

/* ══════════════════════════════════════════════════════════
   VIZ 06 — CONTACT SECTION: CINEMATIC BACKGROUND
   ══════════════════════════════════════════════════════════ */
.table-is-set { position:relative; overflow:hidden; }
.table-is-set::before { content:''; position:absolute; inset:0; background-image:url('images/hero-atmosphere.jpg'); background-size:cover; background-position:center 30%; opacity:0.055; filter:saturate(0.3) brightness(0.8); z-index:0; }
.table-is-set::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%,transparent 15%,rgba(0,0,0,0.55) 65%,rgba(0,0,0,0.92) 100%); z-index:1; pointer-events:none; }
.table-is-set .section-inner { position:relative; z-index:2; }
.tis-proof-value { font-size:clamp(2.2rem,5vw,3.5rem) !important; text-shadow:0 0 40px rgba(201,168,76,0.35); }
.tis-cta { display:inline-block; padding:1rem 2.5rem; font-size:0.78rem; letter-spacing:0.14em; font-weight:700; text-transform:uppercase; text-decoration:none; background:var(--gold); color:var(--black); border:2px solid var(--gold); border-radius:2px; margin:0.5rem; box-shadow:0 0 30px rgba(201,168,76,0.22); transition:all 0.3s ease; }
.tis-cta:hover { background:var(--gold-light); border-color:var(--gold-light); box-shadow:0 0 60px rgba(201,168,76,0.4); transform:translateY(-2px); }
.tis-cta-outline { display:inline-block; padding:1rem 2.5rem; font-size:0.78rem; letter-spacing:0.14em; font-weight:600; text-transform:uppercase; text-decoration:none; background:transparent; color:var(--gold); border:1px solid rgba(201,168,76,0.42); border-radius:2px; margin:0.5rem; transition:all 0.3s ease; }
.tis-cta-outline:hover { background:rgba(201,168,76,0.08); border-color:var(--gold); transform:translateY(-2px); }

/* ══════════════════════════════════════════════════════════
   VIZ 07 — TECHNOLOGY SECTION: 3-STAT BANNER
   ══════════════════════════════════════════════════════════ */
.tech-banner { display:flex; justify-content:center; align-items:stretch; max-width:760px; margin:0 auto 3.5rem; border:1px solid rgba(201,168,76,0.2); border-radius:6px; overflow:hidden; background:rgba(201,168,76,0.03); }
.tech-banner-stat { flex:1; padding:1.5rem 1rem; text-align:center; border-right:1px solid rgba(201,168,76,0.12); }
.tech-banner-stat:last-child { border-right:none; }
.tech-banner-val { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:var(--gold); line-height:1; display:block; margin-bottom:0.4rem; }
.tech-banner-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.12em; color:rgba(240,235,224,0.5); line-height:1.4; }
@media (max-width:600px) { .tech-banner { flex-direction:column; } .tech-banner-stat { border-right:none; border-bottom:1px solid rgba(201,168,76,0.1); } }

/* ══════════════════════════════════════════════════════════
   PASS 1 — CRITICAL FIXES
   ══════════════════════════════════════════════════════════ */

/* FIX 1: .reveal fallback — elements animate in after 1.5s
   even if IntersectionObserver never fires (prevents black voids) */
@keyframes revealFallback {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.reveal {
  animation: revealFallback 0.8s ease 1.5s both;
}
.reveal.visible {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* FIX 2: Camera/lens PNGs — kill the grey checkerboard.
   mix-blend-mode:screen only works on black backgrounds.
   The section has a radial-gradient bg that isn't pure black. */
.arsenal-img {
  mix-blend-mode: normal !important;
  background: transparent;
  filter: brightness(1.1) contrast(1.05) drop-shadow(0 8px 24px rgba(0,0,0,0.8)) !important;
}
.arsenal-item {
  background: var(--black) !important;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(201,168,76,0.07);
}
/* Same fix for facility floating images */
.hw-img {
  mix-blend-mode: normal !important;
  filter: brightness(1.1) contrast(1.05) drop-shadow(0 6px 18px rgba(0,0,0,0.7)) !important;
}
.hw-item {
  background: var(--black) !important;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  border: 1px solid rgba(201,168,76,0.06);
}
.hub-img {
  mix-blend-mode: normal !important;
  filter: brightness(1.1) contrast(1.05) drop-shadow(0 4px 12px rgba(0,0,0,0.7)) !important;
}

/* FIX 3: verticals-grid — was completely MISSING from CSS.
   This caused the entire client verticals section to collapse. */
.verticals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 900px) {
  .verticals-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .verticals-grid { grid-template-columns: 1fr; }
}
.vertical-card {
  background: var(--charcoal-card);
  border: 1px solid var(--grey-dark);
  border-top: 2px solid var(--gold-dark);
  padding: 2rem 1.75rem;
  position: relative;
  transition: all 0.4s ease;
  overflow: hidden;
}
.vertical-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.vertical-card:hover::before { transform: scaleX(1); }
.vertical-card:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.vc-num {
  font-family: var(--font-display);
  font-size: 2.8rem; font-weight: 700;
  color: rgba(201,168,76,0.08);
  display: block; line-height: 1;
  margin-bottom: 0.25rem;
}
.vc-label {
  font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
  font-weight: 700; margin-bottom: 0.6rem;
}
.vertical-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem; color: var(--white);
  margin-bottom: 1rem; line-height: 1.3;
}
.vc-pain {
  font-size: 0.8rem; color: var(--grey-light);
  line-height: 1.7; margin-bottom: 0.5rem;
}
.vc-pain strong { color: rgba(240,235,224,0.6); font-weight: 600; }
.vc-solution {
  font-size: 0.8rem; color: var(--grey-light);
  line-height: 1.7; margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(201,168,76,0.1);
}
.vc-solution strong { color: var(--gold); font-weight: 600; }

/* FIX 4: section text-align — opportunity section was not centering
   its heading because section-inner has no text-align by default */
.opportunity .section-inner > .section-label,
.opportunity .section-inner > .section-title,
.opportunity .section-inner > .section-title-fr,
.opportunity .section-inner > .section-subtitle {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.opportunity .section-inner > .section-subtitle {
  max-width: 820px;
}

/* FIX 5: moat table — fixed layout prevents header text from merging */
.moat-table {
  table-layout: fixed;
  width: 100%;
}
.moat-table th:first-child { width: 35%; }
.moat-table th:not(:first-child) { width: 16.25%; }
.moat-table th, .moat-table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* FIX 6: hardware-showcase inside technology section */
.hardware-showcase {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.hardware-showcase .hw-item {
  max-width: 200px;
}

/* FIX 7: arsenal-grid proper desktop layout */
.arsenal-grid {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 700px) {
  .arsenal-grid { grid-template-columns: 1fr !important; }
}

/* FIX 8: section-inner general centering for text headers */
.section-inner > .section-label,
.section-inner > .section-title,
.section-inner > .section-title-fr,
.section-inner > .gold-divider.center {
  display: block;
}
/* Facility section text should be left-aligned (text-heavy intro) */
#facility .section-inner > .section-label,
#facility .section-inner > .section-title,
#facility .section-inner > .section-title-fr,
#facility .section-inner > .section-subtitle { text-align: left; }

/* ══════════════════════════════════════════════════════════
   PASS 2 — TARGETED FIXES
   ══════════════════════════════════════════════════════════ */

/* FIX A: hero-stat-strip was MISSING from V3 CSS entirely */
.hero-stat-strip {
  display: flex !important;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin: 2.5rem auto 0;
  border: 1px solid rgba(201,168,76,0.2);
  max-width: 800px;
}
.hss-item {
  flex: 1;
  min-width: 130px;
  text-align: center;
  padding: 1.1rem 1rem;
  border-right: 1px solid rgba(201,168,76,0.15);
}
.hss-item:last-child { border-right: none; }
.hss-value {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.3rem;
  display: block;
}
.hss-label {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-mid);
  display: block;
}

/* FIX B: tis-proof (contact stats) — was stacking vertically */
.tis-proof {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
}
.tis-proof-item {
  text-align: center;
  flex: 0 0 auto;
}

/* FIX C: pillar-list bullet floating far left — caused by display:flex
   on li with absolute-positioned ::before pseudo */
.pillar-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  position: relative;
}
.pillar-list li::before {
  content: '\2014' !important;
  color: var(--gold-dark) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  position: static !important;
}

/* FIX D: Arsenal PNG checkerboards — nuclear approach.
   Force every .arsenal-item to black background regardless of specificity.
   The png images have true transparency; we must set bg on the container. */
.arsenal .arsenal-grid .arsenal-item,
section.arsenal .arsenal-item {
  background-color: #000000 !important;
  background-image: none !important;
}
img.arsenal-img {
  mix-blend-mode: normal !important;
  -webkit-mix-blend-mode: normal !important;
  background: transparent !important;
}

/* FIX E: facility hw-item same nuclear fix */
.facility .hw-item,
#facility .hw-item,
section#facility .hw-item {
  background-color: #000000 !important;
}
img.hw-img {
  mix-blend-mode: normal !important;
  -webkit-mix-blend-mode: normal !important;
}

/* FIX F: scroll indicator z-index — was floating on top of content */
.scroll-indicator {
  z-index: 2 !important;
  pointer-events: none;
}

/* FIX G: market-strip proper display */
.market-strip {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2.5rem;
  background: rgba(201,168,76,0.02);
}
.ms-stat {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border-right: 1px solid rgba(201,168,76,0.1);
}
.ms-stat:last-child { border-right: none; }
.ms-divider { display: none; }
.ms-value {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: var(--gold) !important;
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}
.ms-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.55);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   PASS 3 — FINAL FIXES
   ══════════════════════════════════════════════════════════ */

/* FIX I: Paradox infographic CSS — ALL classes were missing.
   This caused the entire market infographic to collapse to a left-stacked column. */
.paradox-infographic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 820px;
  margin: 3rem auto 2rem;
}
.pi-node {
  background: var(--charcoal-card);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 6px;
  padding: 1.5rem 2rem;
  text-align: center;
  position: relative;
  min-width: 220px;
}
.pi-node.root-node {
  min-width: 300px;
  border-color: rgba(201,168,76,0.4);
  background: linear-gradient(135deg, rgba(201,168,76,0.06) 0%, var(--charcoal-card) 70%);
}
.pi-node.highlight-node {
  background: rgba(201,168,76,0.05);
  border-color: var(--gold-dark);
  min-width: 240px;
}
.pi-node.final-node {
  min-width: 280px;
}
.pi-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.3rem;
  display: block;
}
.pi-label {
  font-size: 0.75rem;
  color: rgba(240,235,224,0.7);
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.pi-note {
  font-size: 0.62rem;
  color: var(--grey-mid);
  letter-spacing: 0.05em;
}
.pi-icon {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.pi-connector {
  width: 180px;
  height: 40px;
  display: block;
  margin: 0 auto -5px;
}
.pi-connector-single {
  width: 20px;
  height: 30px;
  display: block;
  margin: 0 auto -5px;
}
.pi-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.pi-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.pi-split-inner {
  display: flex;
  gap: 0;
  justify-content: center;
}
@media (max-width: 700px) {
  .pi-row { flex-direction: column; align-items: center; }
  .pi-connector { display: none; }
  .pi-split-inner { flex-direction: column; }
}

/* FIX II: List bullets floating far left — apply to ALL list contexts */
.arctos-points,
.invest-col ul,
.pillar-list,
.arctos-points li,
.invest-col li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.arctos-points li,
.invest-col li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  text-align: left !important;
  position: static !important;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.arctos-points li::before,
.invest-col li::before {
  content: '\2014' !important;
  color: var(--gold-dark) !important;
  flex-shrink: 0 !important;
  font-weight: 700 !important;
  position: static !important;
  left: auto !important;
}

/* FIX III: Camera images — apply CSS filter to simulate black bg
   since the numpy grey-mask didn't catch all variants */
.arsenal-item {
  background: #000000 !important;
}
.arsenal-img {
  background: #000000 !important;
  mix-blend-mode: normal !important;
  border-radius: 4px;
}

/* FIX IV: Section alignment — center all primary headings globally */
.section-inner > .section-label { display: block; }
.section-inner > h2.section-title { display: block; }


/* -- HERO LOGO: size, centering, transparency -- */
.hero-logo {
  width: clamp(160px, 26vw, 260px);
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
  background: transparent !important;
  mix-blend-mode: normal;
  animation: logoFloat 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* -- HERO H1 � High Impact Story Telling -- */
.hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 400;
  color: rgba(232,212,139,0.72);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* -- FACILITY FLOAT GRID � frameless, blends into dark background -- */
.facility-float-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 2.5rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
  .facility-float-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
}
@media (max-width: 520px) {
  .facility-float-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.facility-float-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  /* No box, no border, no background � image floats on section bg */
  background: none;
  border: none;
  padding: 0;
  position: relative;
}
/* Ambient glow pool beneath each image */
.facility-float-item::before {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 50%; transform: translateX(-50%);
  width: 140px; height: 36px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.10) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.facility-float-item:hover::before { opacity: 1.8; }
.facility-float-img {
  /* Larger than old hw-img, no framing, blends into bg */
  width: 100%;
  max-width: 220px;
  max-height: 210px;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
  border: none;
  /* No mix-blend-mode � image has black bg now so it blends naturally */
  mix-blend-mode: normal;
  filter: brightness(1.05) contrast(1.05) drop-shadow(0 10px 28px rgba(0,0,0,0.7));
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.4s ease;
}
.facility-float-item:hover .facility-float-img {
  transform: translateY(-12px) scale(1.04);
  filter: brightness(1.25) contrast(1.1) drop-shadow(0 18px 40px rgba(0,0,0,0.8));
}
.facility-float-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-light);
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.facility-float-spec {
  font-size: 0.72rem;
  color: var(--grey-mid);
  line-height: 1.5;
}

/* -- HERO LOGO RESIZE + BREATHING SPACE -- */
/* Larger logo; big gap beneath pushes all captions lower
   so the studio person in the background image remains visible */
.hero-logo {
  width: clamp(220px, 36vw, 380px) !important;
  margin: 0 auto 7rem !important;
}

/* -- GLOBAL CENTER ALIGNMENT FIX --
   Override the #facility left-align rule added in Pass 1.
   ALL sections must be center-aligned consistently. */
#facility .section-inner > .section-label,
#facility .section-inner > .section-title,
#facility .section-inner > .section-title-fr,
#facility .section-inner > .section-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure section-inner children are always centered across the board */
.section-inner {
  text-align: center;
}
.section-inner .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* -- HERO BG CROP: show full figure of studio person --
   Shifting from center 50% to center 68% pans image up,
   revealing the person's full body rather than just upper half. */
.hero-bg {
  background-position: center 68% !important;
}

/* -- LED VOLUME GALLERY -- */
.volume-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .volume-gallery { grid-template-columns: 1fr; gap: 2.5rem; }
}
.vg-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--charcoal-card);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.vg-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.vg-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  filter: brightness(0.88) contrast(1.05);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.vg-item:hover .vg-img {
  filter: brightness(1.0) contrast(1.05);
  transform: scale(1.03);
}
.vg-caption {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(201,168,76,0.12);
  background: linear-gradient(to bottom, rgba(17,17,17,0.96), rgba(8,8,8,0.99));
  text-align: left;
}
.vg-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-light);
  margin-bottom: 0.4rem;
}
.vg-caption span {
  font-size: 0.75rem;
  color: var(--grey-mid);
  line-height: 1.65;
}

/* -- TECHNOLOGY GRID: 3-column override (6 items = 2 clean rows) -- */
.tech-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3.5rem 3rem !important;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .tech-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  .tech-grid { grid-template-columns: 1fr !important; }
}

/* -- COLLECTIVE BEHIND THE ARCHITECTURE -- */
.collective-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (max-width: 860px) {
  .collective-pillars { grid-template-columns: 1fr; max-width: 520px; margin-left:auto; margin-right:auto; }
}
.collective-pillar {
  background: rgba(17,17,17,0.7);
  border: 1px solid rgba(201,168,76,0.12);
  border-top: 3px solid rgba(201,168,76,0.25);
  border-radius: 4px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.collective-pillar:hover {
  transform: translateY(-8px);
  border-top-color: var(--gold);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.collective-pillar.cp-featured {
  border-top: 3px solid var(--gold);
  background: rgba(201,168,76,0.04);
}
.cp-icon {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}
.cp-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.cp-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-light);
  margin-bottom: 1rem;
  font-weight: 600;
}
.cp-text {
  font-size: 0.8rem;
  color: var(--grey-light);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.cp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}
.cp-tags span {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 2px;
  padding: 0.2rem 0.55rem;
}

/* Award badges row */
.collective-awards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}
.caw-badge {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232,212,139,0.55);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 2px;
  padding: 0.35rem 0.9rem;
  transition: color 0.3s, border-color 0.3s;
}
.caw-badge:hover {
  color: var(--gold-light);
  border-color: rgba(201,168,76,0.4);
}

/* -- SOVEREIGN PILLARS (Services / Paris Advantage section) -- */
.sovereign-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}
@media (max-width: 1100px) {
  .sovereign-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sovereign-pillars { grid-template-columns: 1fr; }
}
.sp-card {
  background: rgba(15,15,15,0.85);
  border: 1px solid rgba(201,168,76,0.1);
  border-top: 3px solid rgba(201,168,76,0.2);
  border-radius: 4px;
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.4s ease, border-top-color 0.4s ease, box-shadow 0.4s ease;
}
.sp-card:hover {
  transform: translateY(-8px);
  border-top-color: var(--gold);
  box-shadow: 0 20px 48px rgba(0,0,0,0.65);
}
.sp-num {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: 1rem;
}
.sp-icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  opacity: 0.75;
}
.sp-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
  line-height: 1.35;
  font-weight: 600;
}
.sp-divider {
  width: 32px;
  height: 1px;
  background: rgba(201,168,76,0.35);
  margin-bottom: 1rem;
}
.sp-edge {
  font-size: 0.78rem;
  color: var(--grey-light);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.sp-edge strong {
  color: var(--gold-light);
}
.sp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  flex: 1;
}
.sp-list li {
  font-size: 0.73rem;
  color: rgba(232,225,212,0.7);
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.sp-list li::before {
  content: '\2014';
  color: var(--gold-dark);
  flex-shrink: 0;
  font-size: 0.65rem;
  margin-top: 0.05rem;
}
.sp-tag {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-top: 1px solid rgba(201,168,76,0.12);
  padding-top: 0.9rem;
  margin-top: auto;
}

/* -- THE WORK SPEAKS � EVIDENCE SECTION -- */

/* Hero stat anchor */
.work-hero-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin: 1rem auto 4rem;
  padding: 2rem 3rem;
  border: 1px solid rgba(201,168,76,0.15);
  border-left: 4px solid var(--gold);
  max-width: 540px;
  background: rgba(201,168,76,0.03);
  border-radius: 2px;
}
.whs-number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.whs-label {
  font-size: 0.85rem;
  color: var(--grey-light);
  line-height: 1.6;
  text-align: left;
}
.whs-label small {
  font-size: 0.7rem;
  color: var(--grey-mid);
  letter-spacing: 0.05em;
}

/* Showcase cards */
.work-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3.5rem;
}
@media (max-width: 860px) {
  .work-showcase { grid-template-columns: 1fr; max-width: 520px; margin-left:auto; margin-right:auto; }
}
.ws-card {
  background: rgba(15,15,15,0.9);
  border: 1px solid rgba(201,168,76,0.1);
  border-top: 3px solid rgba(201,168,76,0.2);
  border-radius: 4px;
  padding: 2.25rem 2rem 1.75rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, border-top-color 0.4s ease, box-shadow 0.4s ease;
}
.ws-card:hover {
  transform: translateY(-8px);
  border-top-color: var(--gold);
  box-shadow: 0 22px 52px rgba(0,0,0,0.7);
}
.ws-card--featured {
  border-top: 3px solid var(--gold);
  background: rgba(201,168,76,0.03);
}
.ws-category {
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 1rem;
  font-weight: 700;
}
.ws-award-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.ws-trophy {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.ws-award-text {
  font-size: 0.7rem;
  color: var(--gold-light);
  font-style: italic;
  line-height: 1.4;
}
.ws-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--cream);
  margin-bottom: 0.2rem;
  font-weight: 600;
}
.ws-type {
  font-size: 0.68rem;
  color: var(--grey-mid);
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.ws-desc {
  font-size: 0.78rem;
  color: var(--grey-light);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 1.25rem;
}
.ws-footer {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-top: 1px solid rgba(201,168,76,0.1);
  padding-top: 0.85rem;
  margin-top: auto;
}

/* Laurel strip at the bottom */
.laurel-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
}
.ls-item {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.5);
  transition: color 0.3s ease;
}
.ls-item:hover { color: var(--gold-light); }
.ls-sep {
  color: rgba(201,168,76,0.2);
  font-size: 0.6rem;
}

/* -- THE CREATIVE COLLECTIVE � ROSTER CARDS -- */

/* Stats bar */
.collective-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 3.5rem;
  max-width: 640px;
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 4px;
  overflow: hidden;
}
.csb-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1rem;
  gap: 0.2rem;
}
.csb-val {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.csb-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-mid);
}
.csb-divider {
  width: 1px;
  height: 48px;
  background: rgba(201,168,76,0.15);
  flex-shrink: 0;
}

/* Roster grid: 4 columns, 2 rows */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1100px) {
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .roster-grid { grid-template-columns: 1fr; }
}
.roster-card {
  background: rgba(12,12,12,0.9);
  border: 1px solid rgba(201,168,76,0.08);
  border-top: 2px solid rgba(201,168,76,0.18);
  border-radius: 4px;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.38s ease, border-top-color 0.38s ease, box-shadow 0.38s ease;
}
.roster-card:hover {
  transform: translateY(-7px);
  border-top-color: var(--gold);
  box-shadow: 0 18px 44px rgba(0,0,0,0.65);
}
.roster-card.rc-featured {
  border-top: 2px solid var(--gold);
  background: rgba(201,168,76,0.03);
}
.rc-icon {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  opacity: 0.75;
}
.rc-role {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
}
.rc-desc {
  font-size: 0.75rem;
  color: var(--grey-light);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 1rem;
}
.rc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(201,168,76,0.08);
}
.rc-tags span {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 2px;
  padding: 0.18rem 0.5rem;
}

/* -- ARCTOS SECTION � single centered column -- */
.arctos-logo-wrap {
  margin: 0 auto 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.arctos-logo-center {
  /* mix-blend-mode:screen makes white/light bg disappear on dark page;
     only the coloured logo pixels remain visible */
  max-width: 300px;
  width: 60%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.05);
  background: transparent;
  border: none;
  transition: filter 0.4s ease;
}
.arctos-logo-center:hover {
  filter: brightness(1.3) contrast(1.1);
}
.arctos-est {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-mid);
}

/* Partnership points � 2-column grid of icon + text items */
.arctos-points-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 3rem;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 700px) {
  .arctos-points-grid { grid-template-columns: 1fr; }
}
.apg-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--grey-light);
  line-height: 1.65;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.apg-icon {
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.7;
  margin-top: 0.05rem;
}

/* -- HERITAGE COMPACT � Studios I-V acknowledged, VI celebrated -- */
.heritage-compact {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Studios I�V: one quiet line */
.hc-history {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.25rem 2rem;
  border: 1px solid rgba(201,168,76,0.1);
  border-radius: 4px 4px 0 0;
  background: rgba(255,255,255,0.01);
  width: 100%;
  text-align: center;
}
.hc-label {
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--grey-mid);
  font-weight: 700;
}
.hc-path {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: rgba(232,225,212,0.4);
  letter-spacing: 0.05em;
}
.hc-years {
  font-size: 0.6rem;
  color: var(--grey-mid);
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* Connector arrow */
.hc-arrow {
  font-size: 1.5rem;
  color: var(--gold);
  opacity: 0.4;
  line-height: 1;
  padding: 0.5rem 0;
}

/* Studio VI � the centrepiece card */
.hc-apex {
  width: 100%;
  border: 1px solid var(--gold);
  border-top: 4px solid var(--gold);
  border-radius: 0 0 4px 4px;
  background: linear-gradient(135deg, rgba(201,168,76,0.06) 0%, rgba(8,8,8,0.98) 60%);
  padding: 2.5rem 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Subtle radial glow behind apex card */
.hc-apex::before {
  content: '';
  position: absolute;
  top: -40px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 160px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hc-apex-label {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.hc-apex-city {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.55);
  margin-bottom: 0.75rem;
}
.hc-apex-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}
.hc-apex-desc {
  font-size: 0.82rem;
  color: var(--grey-light);
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto 1.75rem;
}
.hc-apex-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.hc-apex-tags span {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 2px;
  padding: 0.25rem 0.65rem;
}

/* -- INSTITUTIONAL SECTION: centered 3-card row -- */
.inst-cards-centered {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
@media (max-width: 860px) {
  .inst-cards-centered { grid-template-columns: 1fr; max-width: 520px; margin-left:auto; margin-right:auto; }
}
.icc-card {
  background: rgba(17,17,17,0.7);
  border: 1px solid rgba(201,168,76,0.1);
  border-top: 3px solid rgba(201,168,76,0.2);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  text-align: center;
  transition: transform 0.4s ease, border-top-color 0.4s ease;
}
.icc-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--gold);
}
.icc-card .inst-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.75;
}
.icc-card h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}
.icc-card p {
  font-size: 0.78rem;
  color: var(--grey-light);
  line-height: 1.75;
}

/* ----------------------------------------------------------
   GLOBAL ALIGNMENT MASTER OVERRIDE
   Applied last � overrides all earlier section-specific rules.
   Forces consistent centered layout across the entire site.
   ---------------------------------------------------------- */

/* Every section-inner is centered */
section .section-inner,
.section-inner {
  text-align: center !important;
}

/* Section subtitle always auto-margins to center */
.section-subtitle,
p.section-subtitle {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 820px;
}

/* Section label, title, title-fr � always centered */
.section-label,
.section-title,
.section-title-fr,
h2.section-title {
  text-align: center !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Gold divider � always centered */
.gold-divider {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Kill any two-column layouts still present in arsenal/institutional sections */
.arsenal .section-inner,
.institutional .section-inner,
#services .section-inner,
#financials .section-inner,
#arctos .section-inner,
#institutional .section-inner {
  display: block !important;
  text-align: center !important;
}

/* Arctos old two-column inner � force single column */
.arctos-inner {
  display: block !important;
}
.arctos-text,
.arctos-brand {
  width: 100% !important;
  text-align: center !important;
}

/* Institutional section fix */
#institutional .section-inner > div,
#institutional .reveal {
  text-align: center !important;
}

/* inst-cards and inst-card � center content within */
.inst-cards {
  justify-content: center;
}
.inst-card {
  text-align: center;
}

/* section-subtitle.wide � centered with constrained max-width */
.section-subtitle.wide,
p.section-subtitle.wide {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Any stray left-aligned paragraph inside section-inner */
.section-inner > p,
.section-inner > h2,
.section-inner > h3,
.section-inner > span {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* -- LOGO SIZE UPGRADES --
   Hero logo: larger centrepiece
   Nav logo: properly sized next to the horizontal menu */
.hero-logo {
  width: clamp(280px, 44vw, 480px) !important;
  margin: 0 auto 7rem !important;
}

/* Nav logo � enlarged to sit proportionally next to the menu links */
.nav-logo,
nav .logo,
nav .nav-logo,
header .logo,
.nav__logo,
.navbar-logo {
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
}

/* Nav logo � correct class confirmed: .nav-logo */
.nav-logo {
  height: 52px !important;
  width: auto !important;
  mix-blend-mode: screen;
  filter: brightness(1.2);
}

/* -- PRODUCTION PORTFOLIO � POSTER GRID -- */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin: 0 auto;
}
@media (max-width: 1200px) { .poster-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .poster-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .poster-grid { grid-template-columns: repeat(2, 1fr); } }

.poster-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--charcoal-card);
  cursor: default;
  transition: transform 0.45s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.45s ease;
}
.poster-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 28px 60px rgba(0,0,0,0.85);
  z-index: 2;
}
.poster-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  filter: brightness(0.88) contrast(1.05) saturate(0.9);
  transition: filter 0.45s ease;
}
.poster-card:hover .poster-img {
  filter: brightness(1.0) contrast(1.08) saturate(1.05);
}

/* Gradient overlay + title revealed on hover */
.poster-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem 0.85rem 0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.23,1,0.32,1);
}
.poster-card:hover .poster-info {
  transform: translateY(0);
}
.poster-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--cream);
  font-weight: 600;
  line-height: 1.2;
}
.poster-platform {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.85;
}

/* Gold top-border glow on hover */
.poster-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 1;
}
.poster-card:hover::before {
  transform: scaleX(1);
}

/* -- TECH GRID: 2 columns (3 rows of 2) for larger equipment images -- */
.tech-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 3rem 4rem !important;
  max-width: 860px !important;
}
@media (max-width: 600px) {
  .tech-grid { grid-template-columns: 1fr !important; }
}

/* -- VOLUME GALLERY: 2-column, 2-row (4 images) -- */
.vg-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .vg-grid-2col { grid-template-columns: 1fr; }
}
.vg2-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--charcoal-card);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.vg2-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.75);
}
.vg2-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  filter: brightness(0.9) saturate(0.92);
  transition: filter 0.4s ease;
}
.vg2-item:hover .vg2-img {
  filter: brightness(1.0) saturate(1.0);
}
.vg2-caption {
  padding: 1.25rem 1.5rem 1.5rem;
  background: linear-gradient(to bottom, rgba(12,12,12,0.0) 0%, rgba(8,8,8,0.97) 100%);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid rgba(201,168,76,0.12);
}
.vg2-caption strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-light);
  font-weight: 600;
}
.vg2-caption span {
  font-size: 0.75rem;
  color: var(--grey-light);
  line-height: 1.7;
}
/* Gold top-border on hover */
.vg2-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 1;
}
.vg2-item:hover::before { transform: scaleX(1); }

/* -- VOLUME GALLERY: enforce 16:9 panoramic crop on all 4 images -- */
.vg2-img {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
  object-position: center center;
}

/* -- STUDIO VI INTRO TAGS -- */
.vi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.5rem;
}
.vi-tags span {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 2px;
  padding: 0.3rem 0.8rem;
}

/* -- STRUCTURED PUBLIC FUNDING: force ALL cards into single vertical column -- */
#financials .inst-cards,
#financials .inst-cards--single {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.25rem !important;
  width: 100%;
}
#financials .inst-card {
  max-width: 680px;
  width: 100%;
  text-align: center;
}

/* -- GLOBAL: force ALL remaining left-aligned elements to center -- */
.arsenal .section-inner,
#services .section-inner,
.arsenal .section-subtitle,
#services .section-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Kill any lingering text-left on section headings */
.service-pillar,
.section-inner .section-label,
.section-inner .section-title,
.section-inner .section-title-fr {
  display: block;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --------------------------------------------------------
   DEFINITIVE ALIGNMENT RESET � FINAL OVERRIDE LAYER
   Kills every legacy two-column/multi-column layout that
   persists from the original stylesheet.
   -------------------------------------------------------- */

/* Kill .pillar two-column (280px 1fr layout) */
.pillar,
.pillars-container .pillar,
.service-pillar {
  display: block !important;
  grid-template-columns: none !important;
  text-align: center !important;
}
.pillar-body {
  border-left: none !important;
  padding-left: 0 !important;
  border-top: 1px solid rgba(201,168,76,0.08) !important;
  padding-top: 1.5rem !important;
}

/* Kill .auteur-grid two-column */
.auteur-grid {
  display: block !important;
  grid-template-columns: none !important;
}
.auteur-portrait { display: none !important; }

/* Kill .arsenal-why two-column */
.arsenal-why {
  grid-template-columns: 1fr !important;
  display: block !important;
}

/* Kill .inst-grid two-column inside non-financials sections */
.inst-grid {
  grid-template-columns: 1fr !important;
}

/* Force all top-level section-inner children to center */
section > div.section-inner,
section > div > div.section-inner {
  text-align: center !important;
}
section > div.section-inner > *,
section > div > div.section-inner > p,
section > div > div.section-inner > h2,
section > div > div.section-inner > h3,
section > div > div.section-inner > span {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* section-subtitle: always centered, always auto-margin */
.section-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 820px !important;
}
.section-subtitle.wide {
  max-width: 900px !important;
}

/* section-label, section-title, section-title-fr: always centered */
.section-label,
h2.section-title,
.section-title,
.section-title-fr {
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* -- CREDENTIAL CARDS (institutional section) � clean 3-col grid -- */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto 0;
}
@media (max-width: 860px) {
  .cred-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}
.cred-card {
  background: rgba(15,15,15,0.8);
  border: 1px solid rgba(201,168,76,0.1);
  border-top: 3px solid rgba(201,168,76,0.2);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  text-align: center;
  transition: transform 0.4s ease, border-top-color 0.4s ease;
}
.cred-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--gold);
}
.cred-card .cred-icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}
.cred-card h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}
.cred-card p {
  font-size: 0.78rem;
  color: var(--grey-light);
  line-height: 1.75;
}

/* -- FACILITY RICH GRID: 2 per row, image left + text right -- */
.fac-rich-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .fac-rich-grid { grid-template-columns: 1fr; max-width: 560px; }
}

.fac-rich-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  background: rgba(12,12,12,0.6);
  border: 1px solid rgba(201,168,76,0.08);
  border-top: 2px solid rgba(201,168,76,0.15);
  border-radius: 4px;
  padding: 2.5rem 2rem 2rem;
  transition: transform 0.4s ease, border-top-color 0.4s ease;
}
.fac-rich-item:hover {
  transform: translateY(-6px);
  border-top-color: var(--gold);
}

.fac-rich-img {
  width: 100%;
  max-width: 200px;
  max-height: 180px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.05) drop-shadow(0 8px 24px rgba(0,0,0,0.8));
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.4s ease;
}
.fac-rich-item:hover .fac-rich-img {
  transform: translateY(-10px) scale(1.04);
  filter: brightness(1.3) contrast(1.1) drop-shadow(0 18px 40px rgba(0,0,0,0.9));
}

.fac-rich-text { width: 100%; }

.fac-rich-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-light);
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.fac-rich-spec {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  opacity: 0.8;
  margin-bottom: 1rem;
}
.fac-rich-desc {
  font-size: 0.8rem;
  color: var(--grey-light);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.fac-rich-tech {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(201,168,76,0.08);
  padding-top: 1rem;
  text-align: left;
}
.fac-rich-tech li {
  font-size: 0.68rem;
  color: rgba(190,180,160,0.6);
  padding: 0.25rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.fac-rich-tech li::before {
  content: '/';
  color: var(--gold-dark);
  flex-shrink: 0;
  font-weight: 700;
}

/* Nav logo � enlarged 40% (52px ? 73px) */
.nav-logo {
  height: 73px !important;
  width: auto !important;
}

/* Podcast room is a real photo � normal blend, not screen */
img[src*="studio-podcast-room"] {
  mix-blend-mode: normal !important;
  border-radius: 4px;
  filter: brightness(0.88) contrast(1.05) !important;
}

/* Nav logo � enlarged 50% from original 52px baseline */
.nav-logo {
  height: 78px !important;
  width: auto !important;
}