:root {
  --bg: #0a0a0c;
  --text: #f2f2f2;
  --muted: #a8a8ad;
  --line: rgba(255,255,255,.12);
  --panel: #111114;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: 70px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(18px);
}
.brand, .top-nav button {
  border: 0;
  background: none;
  cursor: pointer;
}
.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 800;
}
.brand-dot { width: 7px; height: 7px; border-radius: 50%; background: #f0f0f0; box-shadow: 0 0 18px rgba(255,255,255,.7); }
.top-nav { display: flex; gap: 22px; }
.top-nav button { color: #bbb; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: .2s ease; }
.top-nav button:hover { color: white; }

main { min-height: 100vh; }
.page { display: none; min-height: 100vh; padding-top: 70px; }
.page.active { display: block; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; color: #9d9da2; }
.btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: white;
  padding: 13px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .2s ease;
}
.btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }

/* HOME */
.page-home {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(95,76,255,.13), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.06), transparent 30%),
    #09090b;
}
.home-bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.home-intro { position: relative; max-width: 1180px; margin: 0 auto; padding: 110px 28px 54px; z-index: 2; }
.home-intro h1 { margin: 12px 0 18px; font-size: clamp(48px, 8vw, 118px); line-height: .9; letter-spacing: -.055em; font-weight: 900; }
.home-intro h1 span { color: #77777f; }
.home-copy { max-width: 650px; color: #a9a9b0; font-size: 17px; line-height: 1.7; }
.project-grid { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 28px 100px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.project-card {
  min-height: 430px;
  border: 1px solid rgba(255,255,255,.11);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 24px;
  transition: transform .45s var(--ease), border-color .25s ease;
  isolation: isolate;
}
.project-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.35); }
.project-card:nth-child(1) { grid-column: span 7; }
.project-card:nth-child(2) { grid-column: span 5; }
.project-card:nth-child(3) { grid-column: span 12; min-height: 300px; }
.card-kicker, .card-number { position: absolute; top: 20px; font-size: 10px; letter-spacing: .18em; font-weight: 800; z-index: 3; }
.card-kicker { left: 22px; }
.card-number { right: 22px; opacity: .55; }
.card-content { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 3; }
.card-content h2 { margin: 0 0 12px; font-size: clamp(38px, 5vw, 72px); letter-spacing: -.05em; line-height: .88; }
.card-content p { margin: 0 0 20px; max-width: 480px; color: rgba(255,255,255,.72); }
.project-link { border: 0; background: none; color: white; padding: 0; font-size: 11px; letter-spacing: .16em; font-weight: 900; cursor: pointer; }
.card-backrooms { background: linear-gradient(145deg, #c5b45a 0%, #75692e 55%, #282411 100%); color: #151408; }
.card-backrooms:before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(40,35,12,.18) 71px 73px); mix-blend-mode:multiply; }
.card-backrooms .card-content p, .card-backrooms .project-link { color: #1e1d10; }
.card-scanlines { position:absolute; inset:0; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.04) 4px); opacity:.4; }
.card-mx5 { background: linear-gradient(160deg, #1b1c20 0%, #121317 45%, #542c20 100%); }
.card-mx5:before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 70% 25%, rgba(255,108,64,.24), transparent 28%); }
.road-line { position:absolute; width:120%; height:2px; background:linear-gradient(90deg, transparent, #f0d199, transparent); bottom:100px; left:-10%; transform:rotate(-9deg); box-shadow:0 0 24px rgba(240,209,153,.5); }
.card-software { background: #0b1216; }
.card-software:before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(93,221,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(93,221,255,.07) 1px, transparent 1px); background-size:32px 32px; }
.terminal-lines { position:absolute; right:26px; top:80px; color:#76e7ff; font-family:monospace; font-size:14px; line-height:2; opacity:.5; z-index:2; }

/* BACKROOMS */
.page-backrooms { position: relative; background: #a99a4e; color: #171609; overflow:hidden; }
.page-backrooms:before { content:""; position:fixed; inset:70px 0 0; pointer-events:none; background: radial-gradient(circle at 50% -10%, rgba(255,244,162,.45), transparent 34%), linear-gradient(rgba(88,75,24,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(88,75,24,.08) 1px, transparent 1px); background-size:auto, 90px 90px, 90px 90px; opacity:.75; }
.backrooms-noise { position: fixed; inset:70px 0 0; pointer-events:none; opacity:.14; z-index:1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.fluorescent-light { position:absolute; height:8px; background:#fff8c9; box-shadow:0 0 18px 6px rgba(255,248,201,.45); z-index:2; }
.light-one { width:220px; top:140px; right:12%; transform:rotate(-2deg); }
.light-two { width:150px; top:420px; left:8%; transform:rotate(1deg); }
.project-subnav { position:sticky; top:70px; z-index:20; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:15px 28px; border-bottom:1px solid rgba(38,34,12,.2); background:rgba(183,168,88,.78); backdrop-filter: blur(16px); font-size:11px; letter-spacing:.14em; font-weight:900; }
.project-subnav div { display:flex; gap:20px; }
.project-subnav a { opacity:.7; }
.project-subnav a:hover { opacity:1; }
.br-hero { position:relative; z-index:3; min-height:calc(100vh - 70px); max-width:1280px; margin:0 auto; padding:100px 28px 80px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; }
.br-eyebrow { color:#3a3418; }
.glitch-title { position:relative; font-family:"Arial Narrow", Impact, sans-serif; margin:14px 0 4px; font-size:clamp(62px, 10vw, 150px); line-height:.8; letter-spacing:-.045em; }
.glitch-title:before, .glitch-title:after { content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:0; }
.glitch-title:hover:before { opacity:.65; transform:translate(4px,-2px); clip-path:inset(8% 0 60% 0); }
.glitch-title:hover:after { opacity:.5; transform:translate(-5px,3px); clip-path:inset(55% 0 12% 0); }
.br-tagline { font-size:12px; letter-spacing:.26em; font-weight:900; margin:20px 0; }
.br-intro { max-width:620px; line-height:1.8; color:#403b1e; font-size:16px; }
.hero-actions { display:flex; gap:12px; margin-top:26px; }
.br-btn { border-color:rgba(32,29,12,.26); background:#18170b; color:#d9ca78; }
.br-btn.ghost { background:rgba(255,255,255,.14); color:#1c1a0c; }
.liminal-room { height:520px; position:relative; overflow:hidden; background:linear-gradient(#cbbb67,#9d8d46); border:1px solid rgba(45,40,15,.2); box-shadow:0 30px 80px rgba(57,50,18,.28); perspective:700px; }
.wall-left, .wall-right { position:absolute; top:0; bottom:20%; width:45%; background:#b7a557; }
.wall-left { left:-10%; transform:skewY(12deg); box-shadow:inset -30px 0 55px rgba(79,70,25,.17); }
.wall-right { right:-10%; transform:skewY(-12deg); box-shadow:inset 30px 0 55px rgba(79,70,25,.17); }
.room-floor { position:absolute; left:0; right:0; bottom:0; height:42%; background:repeating-linear-gradient(90deg,#8f7f41 0 38px,#988848 39px 40px), linear-gradient(#87773b,#5d542d); transform:skewY(-1deg); }
.room-light { position:absolute; top:42px; left:50%; width:180px; height:14px; transform:translateX(-50%); background:#fffbe1; box-shadow:0 0 45px 18px rgba(255,250,218,.75); }
.liminal-room span { position:absolute; left:18px; bottom:16px; z-index:4; font:700 10px monospace; letter-spacing:.14em; }
.content-section { position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:110px 28px; border-top:1px solid rgba(48,42,14,.16); }
.content-section.narrow { max-width:900px; }
.section-index { font-size:11px; letter-spacing:.18em; font-weight:900; opacity:.65; }
.content-section h2 { font-size:clamp(40px, 6vw, 84px); line-height:.96; letter-spacing:-.04em; margin:10px 0 20px; }
.content-section p { line-height:1.8; color:#423d20; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:34px; }
.section-heading > p { max-width:460px; margin:0 0 8px; font-size:13px; }
.section-heading code { font-family:monospace; background:rgba(0,0,0,.08); padding:3px 5px; }
.devlog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.devlog-card { background:rgba(35,32,13,.9); color:#efe6b7; border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.video-wrap { aspect-ratio:16/9; background:#0a0a06; }
.video-wrap iframe { width:100%; height:100%; border:0; display:block; }
.video-placeholder { aspect-ratio:16/9; display:grid; place-items:center; background:repeating-linear-gradient(0deg,#1b190b 0 2px,#0d0c05 3px 5px); color:#bcae65; font:700 11px monospace; letter-spacing:.15em; }
.devlog-meta { padding:24px; }
.devlog-meta > div { display:flex; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.14em; opacity:.7; }
.devlog-meta h3 { font-size:30px; margin:14px 0 8px; }
.devlog-meta p { color:#bfb783; margin:0; font-size:14px; }
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.media-card { min-height:260px; border:1px solid rgba(37,32,11,.22); cursor:pointer; position:relative; padding:0; overflow:hidden; transition:transform .25s ease, filter .25s ease; }
.media-card:hover { transform:scale(1.015); filter:brightness(1.08); }
.media-card:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(255,255,255,.14)); }
.media-yellow { background:linear-gradient(135deg,#c8b95f,#6d622e); }
.media-dark { background:linear-gradient(135deg,#38341f,#13120b); }
.media-green { background:linear-gradient(135deg,#8e9f6c,#344235); }
.media-amber { background:linear-gradient(135deg,#c69b4f,#6b4a20); }
.media-grey { background:linear-gradient(135deg,#8e8a72,#474538); }
.media-yellow2 { background:linear-gradient(135deg,#d5c96f,#827839); }
.media-crosshair { position:absolute; top:16px; right:18px; font-size:24px; }
.media-label { position:absolute; left:18px; bottom:16px; text-align:left; display:grid; gap:3px; }
.media-label b { font-size:18px; }
.media-label small { font-size:10px; letter-spacing:.13em; text-transform:uppercase; opacity:.7; }
.timeline { max-width:850px; }
.timeline-item { display:grid; grid-template-columns:34px 90px 1fr; gap:18px; padding:0 0 44px; position:relative; }
.timeline-item:before { content:""; position:absolute; left:8px; top:18px; bottom:-8px; width:1px; background:rgba(39,34,11,.26); }
.timeline-item:last-child:before { display:none; }
.timeline-marker { width:17px; height:17px; border-radius:50%; background:#1e1b0c; box-shadow:0 0 0 6px rgba(35,31,11,.12); }
.timeline-date { font:800 11px monospace; padding-top:2px; }
.timeline h3 { margin:0 0 5px; font-size:24px; }
.timeline p { margin:0; font-size:14px; }
.exit-zone { position:relative; z-index:3; min-height:380px; display:grid; place-items:center; align-content:center; gap:16px; background:#18170b; color:#d6c976; text-align:center; }
.exit-zone p { font:800 10px monospace; letter-spacing:.18em; opacity:.7; }
.exit-button { border:1px solid rgba(220,207,126,.35); background:none; color:#dfd181; padding:18px 24px; cursor:pointer; font-weight:900; letter-spacing:.16em; transition:.2s; }
.exit-button:hover { background:#d6c976; color:#18170b; }

/* MX5 */
.page-mx5 { position:relative; background:linear-gradient(180deg,#0b0d10,#171112 70%,#2c1710); overflow:hidden; }
.mx5-road { position:absolute; left:50%; top:70px; bottom:0; width:620px; transform:translateX(-50%); background:linear-gradient(90deg,transparent 0 8%,#2b2c2e 8% 92%,transparent 92%), repeating-linear-gradient(0deg, transparent 0 60px, rgba(255,221,135,.5) 61px 90px); opacity:.55; clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); }
.placeholder-page { position:relative; z-index:3; max-width:900px; margin:0 auto; padding:150px 28px; }
.placeholder-page h1 { font-size:clamp(58px,9vw,130px); line-height:.86; letter-spacing:-.05em; margin:10px 0 24px; }
.placeholder-page p { max-width:620px; line-height:1.8; color:#bbb; }
.mx5-btn { margin-top:20px; }

/* SOFTWARE */
.page-software { position:relative; background:#071015; overflow:hidden; }
.software-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(93,221,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(93,221,255,.06) 1px,transparent 1px); background-size:32px 32px; }
.software-window { margin-top:70px; background:#0b161d; border:1px solid rgba(113,226,255,.2); box-shadow:0 30px 100px rgba(0,0,0,.35); }
.window-bar { margin:-150px -28px 70px; height:44px; padding:0 16px; border-bottom:1px solid rgba(113,226,255,.14); display:flex; align-items:center; gap:8px; }
.window-bar span { width:9px; height:9px; border-radius:50%; background:#6a7a81; }
.window-bar b { margin-left:10px; font:600 11px monospace; color:#7ceaff; }
.software-btn { margin-top:20px; border-color:rgba(113,226,255,.25); color:#7ceaff; font-family:monospace; }

/* TRANSITIONS */
.transition-layer { position:fixed; inset:0; z-index:5000; pointer-events:none; display:none; place-items:center; background:#050506; overflow:hidden; }
.transition-layer.active { display:grid; animation:transitionFade 1.05s ease both; }
.transition-text { position:relative; z-index:5; font:900 clamp(20px,3vw,42px) monospace; letter-spacing:.16em; }
.transition-noise { position:absolute; inset:0; opacity:.28; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.06) 3px 4px); }
.glitch-transition { background:#b9aa57; color:#151408; }
.glitch-transition .transition-text { animation:glitchText .08s steps(2,end) infinite; text-shadow:7px 0 rgba(20,20,12,.25),-6px 0 rgba(255,255,255,.18); }
.software-transition { background:#061219; color:#7ceaff; }
.exit-transition { background:#08080a; color:#eee; }
.garage-transition { background:#0a0b0d; color:#e9d8bc; }
.garage-door { position:absolute; inset:0; display:flex; flex-direction:column; transform:translateY(0); }
.garage-door .garage-slat { flex:1; background:linear-gradient(#31343a,#1d1f23); border-bottom:2px solid #0a0b0c; box-shadow:inset 0 -3px 0 rgba(255,255,255,.04); }
.garage-door.active { animation:garageOpen .7s .22s var(--ease) forwards; }
@keyframes garageOpen { to { transform:translateY(-102%); } }
@keyframes glitchText { 0%{transform:translate(0)} 25%{transform:translate(4px,-1px)} 50%{transform:translate(-3px,2px)} 75%{transform:translate(1px,-2px)} 100%{transform:translate(0)} }
@keyframes transitionFade { 0%{opacity:0} 15%{opacity:1} 82%{opacity:1} 100%{opacity:0} }

/* LIGHTBOX */
.lightbox { position:fixed; inset:0; z-index:6000; display:none; place-items:center; background:rgba(0,0,0,.88); padding:30px; }
.lightbox.open { display:grid; }
#lightbox-close { position:absolute; top:22px; right:26px; background:none; border:0; color:white; font-size:38px; cursor:pointer; }
#lightbox-content { width:min(1000px,92vw); }
.lightbox-demo { min-height:620px; display:grid; place-items:center; align-content:center; text-align:center; border:1px solid rgba(255,255,255,.18); color:#171609; }
.lightbox-demo span { font:900 11px monospace; letter-spacing:.16em; }
.lightbox-demo h2 { font-size:54px; margin:14px 0 4px; }
.lightbox-demo p { margin:0; }

@media (max-width: 900px) {
  .top-nav { display:none; }
  .project-grid { grid-template-columns:1fr; }
  .project-card:nth-child(n) { grid-column:1; min-height:360px; }
  .br-hero { grid-template-columns:1fr; }
  .liminal-room { height:380px; }
  .devlog-grid { grid-template-columns:1fr; }
  .media-grid { grid-template-columns:repeat(2,1fr); }
  .section-heading { display:block; }
}

@media (max-width: 560px) {
  .site-header { padding:0 16px; height:62px; }
  .page { padding-top:62px; }
  .home-intro { padding:90px 18px 40px; }
  .project-grid, .content-section, .br-hero, .placeholder-page { padding-left:18px; padding-right:18px; }
  .home-intro h1 { font-size:52px; }
  .card-content h2 { font-size:42px; }
  .project-subnav { top:62px; padding:12px 18px; }
  .media-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .timeline-item { grid-template-columns:28px 65px 1fr; gap:10px; }
  .window-bar { margin-left:-18px; margin-right:-18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* BACKROOMS TEXTURE OVERRIDES */
.page-backrooms {
  background:
    linear-gradient(rgba(198, 190, 104, .72), rgba(162, 150, 68, .78)),
    url("../assets/backrooms-wallpaper.png") center top / 520px auto repeat;
}

/* Éclairage fixe sans dupliquer la texture */
.page-backrooms:before {
  background:
    radial-gradient(circle at 50% -10%, rgba(255,244,162,.34), transparent 34%),
    linear-gradient(rgba(88,75,24,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,75,24,.045) 1px, transparent 1px);
  opacity:.4;
  mix-blend-mode:multiply;
}

.backrooms-noise {
  opacity:.07;
}

.project-subnav {
  background:rgba(183,168,88,.90);
}

/* Le papier principal n'est plus répété dans les sections */
.br-hero:before,
.content-section:before {
  content:none;
}

.exit-zone:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(rgba(53,48,21,.92), rgba(24,23,11,.95));
  pointer-events:none;
}

/* Texture conservée seulement dans la fausse pièce */
.liminal-room {
  background:
    linear-gradient(rgba(205,192,103,.58), rgba(146,132,62,.72)),
    url("../assets/backrooms-wallpaper.png") center / 430px auto repeat;
}

.wall-left,
.wall-right {
  background:
    linear-gradient(rgba(202,191,111,.58), rgba(150,136,64,.72)),
    url("../assets/backrooms-wallpaper.png") center / 320px auto repeat;
}

.room-floor {
  background:
    linear-gradient(rgba(123,112,55,.72), rgba(90,82,42,.88)),
    repeating-linear-gradient(90deg, rgba(71,60,24,.24) 0 38px, rgba(0,0,0,.06) 39px 40px);
}

.room-light {
  box-shadow:0 0 45px 18px rgba(255,250,218,.68), 0 0 120px 36px rgba(255,250,218,.15);
}

.devlog-card,
.video-placeholder {
  background:rgba(35,32,13,.95);
}

.media-card {
  background-image:
    linear-gradient(135deg, rgba(219,208,121,.18), rgba(56,45,12,.42)),
    url("../assets/backrooms-wallpaper.png");
  background-size:auto, 300px auto;
  background-position:center;
  background-repeat:no-repeat, repeat;
}

.media-dark { filter:brightness(.55) saturate(.7); }
.media-green { filter:hue-rotate(28deg) saturate(.85) brightness(.8); }
.media-amber { filter:hue-rotate(-14deg) saturate(1.1) brightness(.95); }
.media-grey { filter:saturate(.28) brightness(.78); }
.media-yellow2 { filter:brightness(1.05) saturate(1.02); }

.media-crosshair,
.media-label,
.lightbox-demo,
.devlog-meta,
.timeline,
.project-subnav,
.br-hero-copy,
.liminal-room span {
  text-shadow:0 1px 0 rgba(255,255,255,.08);
}

.lightbox-demo {
  background-image:
    linear-gradient(rgba(216,206,119,.84), rgba(164,149,69,.9)),
    url("../assets/backrooms-wallpaper.png");
  background-size:auto, 520px auto;
  background-position:center;
  background-repeat:no-repeat, repeat;
}



/* BACKROOMS HUB CARD */
.card-backrooms {
  background:
    linear-gradient(145deg, rgba(214,205,118,.50) 0%, rgba(151,137,62,.68) 52%, rgba(44,39,16,.90) 100%),
    url("../assets/backrooms-wallpaper.png") center / 320px auto repeat;
}
.card-backrooms:before {
  background:
    radial-gradient(circle at 70% 20%, rgba(255,248,183,.18), transparent 28%),
    linear-gradient(180deg, transparent 0 55%, rgba(18,16,6,.18) 100%);
  mix-blend-mode:multiply;
}

/* BACKROOMS AUDIO CONTROLS */
.br-nav-actions {
  display:flex;
  align-items:center;
  gap:22px;
}
.br-nav-links {
  display:flex;
  align-items:center;
  gap:20px;
}
.audio-controls {
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:18px;
  border-left:1px solid rgba(38,34,12,.2);
}
.audio-toggle {
  border:1px solid rgba(30,27,10,.24);
  background:rgba(255,255,255,.13);
  color:#211f10;
  padding:7px 9px;
  cursor:pointer;
  font:800 9px monospace;
  letter-spacing:.08em;
  transition:background .18s ease, transform .18s ease;
}
.audio-toggle:hover {
  background:rgba(255,255,255,.25);
  transform:translateY(-1px);
}
.audio-volume-wrap {
  display:flex;
  align-items:center;
  gap:7px;
  font:800 9px monospace;
  letter-spacing:.08em;
}
.audio-volume-wrap input {
  width:82px;
  accent-color:#302c13;
  cursor:pointer;
}

/* GLITCH / NOCLIP TRANSITION */
.glitch-transition {
  background:transparent;
  color:#f3efc3;
  animation:backroomsOverlay 1.55s linear both !important;
}
.glitch-transition .transition-noise {
  opacity:.68;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.10) 3px 4px),
    repeating-linear-gradient(90deg, rgba(152,255,232,.07) 0 2px, transparent 3px 11px);
  mix-blend-mode:difference;
  animation:noiseJitter .085s steps(2,end) infinite;
}
.glitch-transition .transition-text {
  opacity:0;
  animation:glitchMessage 1.55s steps(2,end) both;
  text-shadow:
    6px 0 rgba(255,0,90,.55),
    -6px 0 rgba(0,235,255,.45),
    0 0 18px rgba(255,255,255,.22);
}
.glitch-artifacts {
  position:absolute;
  inset:0;
  overflow:hidden;
  display:none;
  z-index:4;
  mix-blend-mode:difference;
}
.glitch-transition .glitch-artifacts { display:block; }
.glitch-artifacts i {
  position:absolute;
  left:-12%;
  width:124%;
  height:3.5%;
  opacity:.75;
  background:linear-gradient(90deg,
    transparent 0 7%,
    rgba(255,255,255,.92) 7% 13%,
    rgba(0,250,235,.55) 13% 26%,
    transparent 26% 42%,
    rgba(255,0,92,.48) 42% 58%,
    rgba(255,255,255,.72) 58% 66%,
    transparent 66% 100%);
  transform:translateX(0) skewX(-7deg);
  animation:artifactSlice .12s steps(2,end) infinite alternate;
}
.glitch-artifacts i:nth-child(1)  { top:4%;  height:2%;   animation-delay:-.02s; }
.glitch-artifacts i:nth-child(2)  { top:14%; height:5%;   animation-delay:-.08s; }
.glitch-artifacts i:nth-child(3)  { top:25%; height:1.7%; animation-delay:-.04s; }
.glitch-artifacts i:nth-child(4)  { top:34%; height:7%;   animation-delay:-.10s; }
.glitch-artifacts i:nth-child(5)  { top:49%; height:2.5%; animation-delay:-.06s; }
.glitch-artifacts i:nth-child(6)  { top:57%; height:4.5%; animation-delay:-.01s; }
.glitch-artifacts i:nth-child(7)  { top:68%; height:1.5%; animation-delay:-.09s; }
.glitch-artifacts i:nth-child(8)  { top:76%; height:6%;   animation-delay:-.05s; }
.glitch-artifacts i:nth-child(9)  { top:88%; height:2%;   animation-delay:-.11s; }
.glitch-artifacts i:nth-child(10) { top:94%; height:3%;   animation-delay:-.03s; }

.page.falling-backrooms {
  display:block !important;
  position:relative;
  z-index:2;
  transform-origin:50% 45%;
  backface-visibility:hidden;
  will-change:transform, filter, opacity;
  animation:noclipFall .98s cubic-bezier(.62,.02,.88,.47) forwards;
}
.site-header.falling-backrooms-header {
  transform-origin:50% 45%;
  will-change:transform, filter, opacity;
  animation:noclipFallHeader .98s cubic-bezier(.62,.02,.88,.47) forwards;
}

@keyframes artifactSlice {
  0%   { transform:translateX(-4%) skewX(-7deg); filter:hue-rotate(0deg); }
  35%  { transform:translateX(8%) skewX(5deg); }
  70%  { transform:translateX(-10%) skewX(-2deg); filter:hue-rotate(65deg); }
  100% { transform:translateX(13%) skewX(8deg); }
}
@keyframes noiseJitter {
  0% { transform:translate(0,0); }
  25% { transform:translate(3px,-2px); }
  50% { transform:translate(-4px,1px); }
  75% { transform:translate(2px,3px); }
  100% { transform:translate(-2px,-1px); }
}
@keyframes glitchMessage {
  0%,18% { opacity:0; transform:translate(0,0); }
  20% { opacity:.95; transform:translate(7px,-2px); }
  27% { opacity:.35; transform:translate(-8px,3px); }
  35% { opacity:.92; transform:translate(3px,-4px); }
  47% { opacity:.2; }
  56%,69% { opacity:1; transform:translate(0,0); }
  77% { opacity:.2; transform:translate(-6px,2px); }
  86% { opacity:.85; }
  100% { opacity:0; }
}
@keyframes backroomsOverlay {
  0%   { background:rgba(0,0,0,0); }
  18%  { background:rgba(0,0,0,.04); }
  38%  { background:rgba(218,208,117,.04); }
  52%  { background:rgba(255,255,255,.10); }
  62%  { background:rgba(36,32,10,.18); }
  68%  { background:rgba(221,211,119,.93); }
  73%  { background:rgba(10,10,7,.96); }
  79%  { background:rgba(184,172,83,.94); }
  88%  { background:rgba(184,172,83,.32); }
  100% { background:rgba(184,172,83,0); }
}
@keyframes noclipFall {
  0% {
    transform:perspective(1200px) translate3d(0,0,0) rotateX(0) rotateZ(0) scale(1);
    filter:none;
    opacity:1;
  }
  12% {
    transform:perspective(1200px) translate3d(-5px,4px,0) rotateX(.4deg) rotateZ(-.15deg) scale(1.002);
    filter:contrast(1.15) saturate(1.15);
  }
  23% {
    transform:perspective(1200px) translate3d(7px,-3px,0) rotateX(-.7deg) rotateZ(.22deg) scale(1.008);
    filter:contrast(1.35) saturate(.78);
  }
  34% {
    transform:perspective(1200px) translate3d(-9px,5px,0) rotateX(1deg) rotateZ(-.3deg) scale(1.015);
    filter:contrast(1.5) brightness(.92);
  }
  44% {
    transform:perspective(1200px) translate3d(0,8px,-20px) rotateX(3deg) rotateZ(.2deg) scale(1.025);
    filter:contrast(1.25) blur(.3px);
  }
  58% {
    transform:perspective(1200px) translate3d(0,55px,-100px) rotateX(9deg) rotateZ(-.6deg) scale(.98);
    filter:brightness(.82) blur(.8px);
  }
  75% {
    transform:perspective(1200px) translate3d(0,48vh,-320px) rotateX(18deg) rotateZ(1.1deg) scale(.88);
    filter:brightness(.64) blur(1.8px);
  }
  100% {
    transform:perspective(1200px) translate3d(0,125vh,-680px) rotateX(34deg) rotateZ(-2deg) scale(.68);
    filter:brightness(.35) blur(4px);
    opacity:.12;
  }
}
@keyframes noclipFallHeader {
  0%,34% { transform:translate3d(0,0,0); filter:none; opacity:1; }
  58% { transform:translate3d(0,35px,0) rotateZ(-.25deg); filter:blur(.3px); }
  75% { transform:translate3d(0,43vh,0) rotateZ(.8deg) scale(.94); opacity:.75; }
  100% { transform:translate3d(0,120vh,0) rotateZ(-1.5deg) scale(.72); filter:blur(3px); opacity:.1; }
}

@media (max-width: 900px) {
  .project-subnav { gap:12px; }
  .br-nav-actions { gap:10px; }
  .br-nav-links { display:none; }
  .audio-controls { border-left:0; padding-left:0; }
}

@media (max-width: 560px) {
  .audio-volume-wrap span { display:none; }
  .audio-volume-wrap input { width:58px; }
  .audio-toggle { padding:6px 7px; font-size:8px; }
}


/* =========================================================
   BACKROOMS TRANSITION V3 — organic RGB / signal tear / noclip
   ========================================================= */
body.is-transitioning { overflow:hidden !important; }

.glitch-stage {
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}
.glitch-scene {
  position:absolute;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#09090b;
  pointer-events:none;
}
.glitch-scene .site-header {
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  transform:none !important;
  animation:none !important;
}
.glitch-scene .page {
  display:block !important;
  pointer-events:none !important;
}
.glitch-slice {
  position:absolute;
  inset:-2px 0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  will-change:transform, opacity, filter;
}
.glitch-slice-in { z-index:2; }

.glitch-transition {
  background:transparent !important;
  animation:none !important;
  isolation:isolate;
}
.glitch-transition .transition-text { display:none !important; }
.glitch-transition .transition-noise {
  z-index:6;
  opacity:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.075) 3px 4px),
    radial-gradient(circle at 48% 50%, transparent 0 38%, rgba(0,0,0,.18) 100%);
  mix-blend-mode:screen;
  animation:organicNoise 1.35s steps(2,end) both;
}
.glitch-transition .glitch-artifacts {
  z-index:7;
  opacity:.45;
  mix-blend-mode:screen;
  animation:artifactContainer 1.35s steps(2,end) both;
}
.glitch-transition .glitch-artifacts i {
  background:linear-gradient(90deg,
    transparent 0 5%,
    rgba(0,235,255,.58) 5% 16%,
    rgba(255,255,255,.74) 16% 19%,
    transparent 19% 39%,
    rgba(255,0,88,.52) 39% 52%,
    transparent 52% 74%,
    rgba(236,244,192,.62) 74% 82%,
    transparent 82% 100%);
  animation:organicArtifact .115s steps(2,end) infinite alternate;
}
.signal-tear {
  display:none;
  position:absolute;
  z-index:8;
  left:-12vw;
  width:124vw;
  height:3px;
  top:47%;
  opacity:0;
  background:#f3f2d0;
  box-shadow:
    0 -3px 0 rgba(0,236,255,.6),
    0 3px 0 rgba(255,0,92,.56),
    0 0 18px rgba(255,255,255,.8);
  transform:skewX(-12deg);
  mix-blend-mode:screen;
}
.signal-flash {
  display:none;
  position:absolute;
  inset:0;
  z-index:9;
  opacity:0;
  background:#f4efb9;
  mix-blend-mode:screen;
}
.glitch-transition .signal-tear {
  display:block;
  animation:signalTear 1.34s cubic-bezier(.18,.75,.2,1) both;
}
.glitch-transition .signal-flash {
  display:block;
  animation:signalFlash 1.34s steps(1,end) both;
}

/* The actual hub falls away, while sliced clones keep tearing above it. */
.page.falling-backrooms {
  display:block !important;
  position:relative;
  z-index:1;
  transform-origin:50% 58%;
  will-change:transform, filter, opacity;
  animation:organicNoclipFall 1.18s cubic-bezier(.36,.02,.78,.36) forwards !important;
}
.site-header.falling-backrooms-header {
  transform-origin:50% 58%;
  will-change:transform, filter, opacity;
  animation:organicHeaderFall 1.18s cubic-bezier(.36,.02,.78,.36) forwards !important;
}
.page-backrooms.backrooms-arrival {
  transform-origin:50% 48%;
  animation:backroomsResolve .76s cubic-bezier(.18,.8,.25,1) both;
}

@keyframes organicNoise {
  0%,5% { opacity:0; transform:translate(0,0); }
  7% { opacity:.34; transform:translate(1px,-1px); }
  11% { opacity:.08; transform:translate(-2px,0); }
  17% { opacity:.5; transform:translate(3px,1px); }
  22% { opacity:.12; }
  28% { opacity:.58; transform:translate(-4px,-1px); }
  34% { opacity:.2; }
  41% { opacity:.66; transform:translate(2px,2px); }
  49% { opacity:.25; }
  57% { opacity:.7; transform:translate(-3px,1px); }
  66% { opacity:.18; }
  73% { opacity:.62; transform:translate(2px,-2px); }
  83% { opacity:.23; }
  92% { opacity:.42; }
  100% { opacity:0; }
}
@keyframes artifactContainer {
  0%,4% { opacity:0; }
  7% { opacity:.72; }
  13% { opacity:.08; }
  19% { opacity:.58; }
  27% { opacity:.18; }
  37% { opacity:.82; }
  46% { opacity:.1; }
  58% { opacity:.68; }
  69% { opacity:.22; }
  77% { opacity:.78; }
  91% { opacity:.24; }
  100% { opacity:0; }
}
@keyframes organicArtifact {
  0% { transform:translate3d(-3%,0,0) skewX(-8deg) scaleX(.98); filter:hue-rotate(0); }
  28% { transform:translate3d(9%,1px,0) skewX(5deg) scaleX(1.02); }
  57% { transform:translate3d(-12%,-1px,0) skewX(-2deg) scaleX(1.06); filter:hue-rotate(34deg); }
  100% { transform:translate3d(15%,0,0) skewX(8deg) scaleX(.97); }
}
@keyframes signalTear {
  0%,9% { top:48%; opacity:0; transform:translateX(-18%) skewX(-12deg) scaleX(.45); }
  12% { opacity:.95; transform:translateX(10%) skewX(10deg) scaleX(1.1); }
  14% { opacity:.08; }
  25% { top:31%; opacity:0; transform:translateX(-15%) skewX(-4deg) scaleX(.7); }
  27% { opacity:.85; transform:translateX(7%) skewX(14deg) scaleX(1.25); }
  29% { opacity:0; }
  42% { top:66%; opacity:0; }
  45% { opacity:.75; transform:translateX(-5%) skewX(-16deg) scaleX(1.35); }
  48% { opacity:0; }
  62% { top:53%; opacity:0; }
  65% { opacity:.9; transform:translateX(12%) skewX(4deg) scaleX(.95); }
  68% { opacity:0; }
  78% { top:18%; opacity:0; }
  81% { opacity:.7; transform:translateX(-8%) skewX(9deg) scaleX(1.15); }
  84%,100% { opacity:0; }
}
@keyframes signalFlash {
  0%,10% { opacity:0; }
  11% { opacity:.13; }
  12%,31% { opacity:0; }
  32% { opacity:.08; }
  33%,51% { opacity:0; }
  52% { opacity:.28; }
  53% { opacity:0; }
  64% { opacity:.12; }
  65%,73% { opacity:0; }
  74% { opacity:.42; }
  75% { opacity:0; }
  88% { opacity:.08; }
  89%,100% { opacity:0; }
}
@keyframes organicNoclipFall {
  0% {
    transform:perspective(1300px) translate3d(0,0,0) rotateX(0) rotateZ(0) scale(1);
    filter:none;
    opacity:1;
  }
  10% {
    transform:perspective(1300px) translate3d(-2px,1px,0) rotateX(.15deg) rotateZ(-.08deg) scale(1.001);
    filter:contrast(1.08);
  }
  18% {
    transform:perspective(1300px) translate3d(4px,-2px,0) rotateX(-.28deg) rotateZ(.12deg) scale(1.004);
    filter:contrast(1.28) saturate(.86);
  }
  27% {
    transform:perspective(1300px) translate3d(-6px,3px,-4px) rotateX(.55deg) rotateZ(-.18deg) scale(1.008);
    filter:contrast(1.42) saturate(.7);
  }
  36% {
    transform:perspective(1300px) translate3d(3px,7px,-12px) rotateX(1.4deg) rotateZ(.12deg) scale(1.014);
    filter:contrast(1.25) brightness(.94);
  }
  47% {
    transform:perspective(1300px) translate3d(0,22px,-45px) rotateX(4deg) rotateZ(-.25deg) scale(1.012);
    filter:brightness(.9) blur(.15px);
  }
  58% {
    transform:perspective(1300px) translate3d(0,70px,-105px) rotateX(8deg) rotateZ(.35deg) scale(.985);
    filter:brightness(.8) blur(.45px);
  }
  70% {
    transform:perspective(1300px) translate3d(0,27vh,-220px) rotateX(14deg) rotateZ(-.55deg) scale(.925);
    filter:brightness(.68) blur(1px);
  }
  84% {
    transform:perspective(1300px) translate3d(0,72vh,-430px) rotateX(23deg) rotateZ(.8deg) scale(.79);
    filter:brightness(.5) blur(2px);
    opacity:.82;
  }
  100% {
    transform:perspective(1300px) translate3d(0,135vh,-760px) rotateX(36deg) rotateZ(-1.35deg) scale(.62);
    filter:brightness(.28) blur(4.5px);
    opacity:.04;
  }
}
@keyframes organicHeaderFall {
  0%,35% { transform:translate3d(0,0,0); filter:none; opacity:1; }
  47% { transform:translate3d(0,10px,0) rotateZ(-.06deg); }
  58% { transform:translate3d(0,48px,0) rotateZ(.18deg); filter:blur(.25px); }
  70% { transform:translate3d(0,24vh,0) rotateZ(-.35deg) scale(.97); opacity:.9; }
  84% { transform:translate3d(0,70vh,0) rotateZ(.65deg) scale(.84); opacity:.62; filter:blur(1.5px); }
  100% { transform:translate3d(0,132vh,0) rotateZ(-1deg) scale(.68); opacity:.03; filter:blur(4px); }
}
@keyframes backroomsResolve {
  0% { transform:scale(1.055) translateY(-6px); filter:contrast(1.7) saturate(.55) brightness(1.18); opacity:.3; }
  18% { transform:scale(1.025) translateY(2px); filter:contrast(1.45) saturate(1.28) brightness(.92); opacity:.82; }
  35% { transform:scale(1.012) translateX(-2px); filter:contrast(1.28) saturate(.82); opacity:.96; }
  52% { transform:scale(1.006) translateX(2px); filter:contrast(1.16) saturate(1.1); opacity:1; }
  72% { transform:scale(1.002) translateX(-1px); filter:contrast(1.08); }
  100% { transform:scale(1) translate(0,0); filter:none; opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  .page.falling-backrooms,
  .site-header.falling-backrooms-header,
  .page-backrooms.backrooms-arrival { animation-duration:.01ms !important; }
  .glitch-stage, .signal-tear, .signal-flash { display:none !important; }
}


/* =========================================================
   BACKROOMS TRANSITION V4 — micro signal tears
   ========================================================= */
.glitch-transition .glitch-artifacts {
  opacity:.72;
  mix-blend-mode:screen;
  filter:contrast(1.18);
}
.glitch-transition .glitch-artifacts i {
  position:absolute;
  min-height:1px;
  max-height:9px;
  background:linear-gradient(90deg,
    transparent 0 3%,
    rgba(0,229,255,.32) 3% 10%,
    rgba(248,248,221,.62) 10% 13%,
    transparent 13% 31%,
    rgba(255,0,92,.28) 31% 40%,
    transparent 40% 64%,
    rgba(233,239,194,.42) 64% 71%,
    transparent 71% 100%);
  transform:translate3d(0,0,0) skewX(var(--tear-skew, 0deg));
  animation:microArtifact var(--tear-speed, .09s) steps(2,end) var(--tear-delay, 0s) infinite alternate;
  box-shadow:
    0 -1px 0 rgba(0,229,255,.12),
    0 1px 0 rgba(255,0,92,.12);
}

.glitch-transition .transition-noise {
  opacity:0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 1px,
      rgba(255,255,255,.045) 2px,
      transparent 3px 5px),
    radial-gradient(circle at 48% 50%, transparent 0 44%, rgba(0,0,0,.13) 100%);
  animation:fineNoise 1.42s steps(2,end) both;
}

.glitch-slice {
  inset:-1px 0;
  overflow:hidden;
  backface-visibility:hidden;
}

/* Les lignes fortes deviennent de brefs accrocs au lieu de gros rectangles. */
.signal-tear {
  height:1px;
  box-shadow:
    0 -1px 0 rgba(0,236,255,.42),
    0 1px 0 rgba(255,0,92,.38),
    0 0 8px rgba(255,255,255,.42);
}
.glitch-transition .signal-tear {
  animation:microSignalTear 1.42s cubic-bezier(.18,.75,.2,1) both;
}
.glitch-transition .signal-flash {
  animation:microSignalFlash 1.42s steps(1,end) both;
}

@keyframes microArtifact {
  0%   { transform:translate3d(calc(var(--tear-shift) * -.28),0,0) skewX(var(--tear-skew)); opacity:.28; }
  28%  { transform:translate3d(calc(var(--tear-shift) * .18),0,0) skewX(var(--tear-skew)); opacity:.7; }
  56%  { transform:translate3d(calc(var(--tear-shift) * -.12),0,0) skewX(var(--tear-skew)); opacity:.4; }
  100% { transform:translate3d(var(--tear-shift),0,0) skewX(var(--tear-skew)); opacity:.76; }
}

@keyframes fineNoise {
  0%,4% { opacity:0; transform:translate(0,0); }
  7% { opacity:.18; transform:translate(1px,0); }
  10% { opacity:.03; transform:translate(-1px,0); }
  14% { opacity:.26; transform:translate(2px,-1px); }
  18% { opacity:.05; }
  23% { opacity:.31; transform:translate(-2px,0); }
  29% { opacity:.07; }
  34% { opacity:.36; transform:translate(1px,1px); }
  40% { opacity:.08; }
  47% { opacity:.28; transform:translate(-2px,-1px); }
  54% { opacity:.1; }
  61% { opacity:.4; transform:translate(2px,0); }
  69% { opacity:.08; }
  76% { opacity:.34; transform:translate(-1px,1px); }
  84% { opacity:.1; }
  92% { opacity:.22; }
  100% { opacity:0; }
}

@keyframes microSignalTear {
  0%,8%  { top:47%; opacity:0; transform:translateX(-8%) skewX(-5deg) scaleX(.72); }
  10%    { opacity:.72; transform:translateX(4%) skewX(5deg) scaleX(1.02); }
  11.5%  { opacity:0; }
  21%    { top:24%; opacity:0; transform:translateX(-6%) scaleX(.82); }
  23%    { opacity:.58; transform:translateX(3%) skewX(-4deg) scaleX(1.08); }
  24.5%  { opacity:0; }
  36%    { top:71%; opacity:0; }
  38%    { opacity:.66; transform:translateX(-3%) skewX(6deg) scaleX(.95); }
  39.5%  { opacity:0; }
  50%    { top:55%; opacity:0; }
  52%    { opacity:.82; transform:translateX(6%) skewX(-3deg) scaleX(1.12); }
  53.2%  { opacity:0; }
  63%    { top:14%; opacity:0; }
  65%    { opacity:.55; transform:translateX(-4%) skewX(3deg) scaleX(.9); }
  66.4%  { opacity:0; }
  74%    { top:82%; opacity:0; }
  76%    { opacity:.74; transform:translateX(5%) skewX(-5deg) scaleX(1.05); }
  77.4%  { opacity:0; }
  88%    { top:39%; opacity:0; }
  90%    { opacity:.42; transform:translateX(-3%) skewX(2deg) scaleX(.92); }
  91.5%,100% { opacity:0; }
}

@keyframes microSignalFlash {
  0%,9% { opacity:0; }
  10% { opacity:.035; }
  11%,31% { opacity:0; }
  32% { opacity:.045; }
  33%,51% { opacity:0; }
  52% { opacity:.095; }
  53%,73% { opacity:0; }
  74% { opacity:.12; }
  75%,88% { opacity:0; }
  89% { opacity:.04; }
  90%,100% { opacity:0; }
}

/* =========================================================
   BACKROOMS TRANSITION V5 — wider displacement + multicolor
   ========================================================= */
.glitch-transition .glitch-artifacts i {
  background:linear-gradient(90deg,
    transparent 0 2%,
    var(--glitch-a, rgba(0,229,255,.44)) 2% 11%,
    transparent 11% 19%,
    var(--glitch-c, rgba(167,72,255,.38)) 19% 27%,
    rgba(255,255,255,.62) 27% 30%,
    transparent 30% 48%,
    var(--glitch-b, rgba(255,0,92,.42)) 48% 59%,
    transparent 59% 72%,
    var(--glitch-d, rgba(255,224,73,.36)) 72% 81%,
    transparent 81% 100%);
  box-shadow:
    0 -1px 0 var(--glitch-a, rgba(0,229,255,.2)),
    0 1px 0 var(--glitch-b, rgba(255,0,92,.2));
}

@keyframes microArtifact {
  0%   { transform:translate3d(calc(var(--tear-shift) * -.55),0,0) skewX(var(--tear-skew)) scaleX(.96); opacity:.24; }
  20%  { transform:translate3d(calc(var(--tear-shift) * .38),0,0) skewX(var(--tear-skew)) scaleX(1.06); opacity:.76; }
  43%  { transform:translate3d(calc(var(--tear-shift) * -.72),0,0) skewX(var(--tear-skew)) scaleX(1.12); opacity:.48; }
  66%  { transform:translate3d(calc(var(--tear-shift) * .24),0,0) skewX(var(--tear-skew)) scaleX(.99); opacity:.68; }
  100% { transform:translate3d(var(--tear-shift),0,0) skewX(var(--tear-skew)) scaleX(1.08); opacity:.8; }
}

.signal-tear {
  box-shadow:
    0 -2px 0 rgba(0,235,255,.48),
    0 -1px 0 rgba(104,255,88,.30),
    0 1px 0 rgba(255,38,181,.46),
    0 2px 0 rgba(151,72,255,.34),
    0 0 9px rgba(255,242,96,.34);
}

/* A tiny chromatic kick on the whole signal at the most violent moments. */
.glitch-transition .transition-noise {
  filter:saturate(1.32) contrast(1.1);
}


/* AUDIO-SYNCED NEON FLICKER */
.neon-flicker-overlay {
  position: fixed;
  inset: 70px 0 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background: rgba(18, 14, 3, 0);
  mix-blend-mode: multiply;
}

.page-backrooms.neon-flicker-soft .neon-flicker-overlay {
  animation: neonScreenSoft .30s steps(1, end) both;
}
.page-backrooms.neon-flicker-medium .neon-flicker-overlay {
  animation: neonScreenMedium .56s steps(1, end) both;
}
.page-backrooms.neon-flicker-strong .neon-flicker-overlay {
  animation: neonScreenStrong .90s steps(1, end) both;
}

.page-backrooms.neon-flicker-soft .fluorescent-light,
.page-backrooms.neon-flicker-soft .room-light {
  animation: neonTubeSoft .30s steps(1, end) both;
}
.page-backrooms.neon-flicker-medium .fluorescent-light,
.page-backrooms.neon-flicker-medium .room-light {
  animation: neonTubeMedium .56s steps(1, end) both;
}
.page-backrooms.neon-flicker-strong .fluorescent-light,
.page-backrooms.neon-flicker-strong .room-light {
  animation: neonTubeStrong .90s steps(1, end) both;
}

@keyframes neonScreenSoft {
  0%,100% { opacity:0; background:rgba(18,14,3,0); }
  12% { opacity:.23; background:rgba(20,16,5,.76); }
  25% { opacity:.02; }
  39% { opacity:.15; background:rgba(28,22,6,.66); }
  52% { opacity:0; }
}

@keyframes neonScreenMedium {
  0%,100% { opacity:0; }
  8%  { opacity:.34; background:rgba(14,11,3,.88); }
  16% { opacity:.03; }
  25% { opacity:.46; background:rgba(8,7,2,.94); }
  34% { opacity:.08; background:rgba(255,248,195,.18); mix-blend-mode:screen; }
  45% { opacity:.27; background:rgba(19,15,3,.83); mix-blend-mode:multiply; }
  57% { opacity:0; }
  70% { opacity:.16; }
  79% { opacity:0; }
}

@keyframes neonScreenStrong {
  0%,100% { opacity:0; }
  5%  { opacity:.62; background:rgba(7,6,2,.96); }
  10% { opacity:.04; }
  15% { opacity:.78; background:rgba(3,3,1,.98); }
  21% { opacity:.06; background:rgba(255,250,208,.30); mix-blend-mode:screen; }
  27% { opacity:.52; background:rgba(10,8,2,.95); mix-blend-mode:multiply; }
  33% { opacity:.03; }
  39% { opacity:.70; }
  46% { opacity:.09; background:rgba(255,248,188,.23); mix-blend-mode:screen; }
  53% { opacity:.43; background:rgba(14,11,3,.90); mix-blend-mode:multiply; }
  62% { opacity:0; }
  72% { opacity:.24; }
  78% { opacity:.02; }
  84% { opacity:.12; }
  90% { opacity:0; }
}

@keyframes neonTubeSoft {
  0%,100% { opacity:1; filter:brightness(1); }
  12% { opacity:.34; filter:brightness(.55); box-shadow:0 0 4px 1px rgba(255,248,201,.18); }
  24% { opacity:1; filter:brightness(1.12); }
  39% { opacity:.58; filter:brightness(.72); }
  52% { opacity:1; filter:brightness(1); }
}

@keyframes neonTubeMedium {
  0%,100% { opacity:1; filter:brightness(1); }
  8%  { opacity:.12; filter:brightness(.3); box-shadow:0 0 2px rgba(255,248,201,.08); }
  16% { opacity:1; filter:brightness(1.18); }
  25% { opacity:.04; filter:brightness(.18); }
  34% { opacity:1; filter:brightness(1.28); }
  45% { opacity:.30; filter:brightness(.48); }
  57% { opacity:1; filter:brightness(1); }
  70% { opacity:.52; }
  79% { opacity:1; }
}

@keyframes neonTubeStrong {
  0%,100% { opacity:1; filter:brightness(1); }
  5%  { opacity:.03; filter:brightness(.08); box-shadow:none; }
  10% { opacity:1; filter:brightness(1.35); }
  15% { opacity:0; filter:brightness(0); box-shadow:none; }
  21% { opacity:1; filter:brightness(1.55); box-shadow:0 0 36px 12px rgba(255,248,201,.62); }
  27% { opacity:.08; filter:brightness(.2); box-shadow:none; }
  33% { opacity:1; filter:brightness(1.28); }
  39% { opacity:.02; filter:brightness(.05); }
  46% { opacity:1; filter:brightness(1.42); }
  53% { opacity:.20; filter:brightness(.35); }
  62% { opacity:1; filter:brightness(1.08); }
  72% { opacity:.44; }
  78% { opacity:1; }
  84% { opacity:.72; }
  90% { opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  .neon-flicker-overlay { display:none !important; }
  .page-backrooms .fluorescent-light,
  .page-backrooms .room-light { animation:none !important; }
}


/* =========================================================
   MX5 EXPERIENCE — V7
   ========================================================= */
.page-mx5 {
  position:relative;
  overflow:hidden;
  background:#0b0d0f;
  color:#f4f1eb;
}
.mx5-background { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.mx5-horizon-glow {
  position:absolute; width:980px; height:700px; right:-240px; top:-120px;
  background:radial-gradient(circle, rgba(200,58,37,.26), rgba(132,33,24,.08) 40%, transparent 70%);
  filter:blur(10px);
}
.mx5-grid-lines {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, black, transparent 92%);
}
.mx5-project-nav {
  position:sticky; top:70px; z-index:30; min-height:50px; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(9,11,13,.78); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:10px; letter-spacing:.16em; font-weight:900;
}
.mx5-project-nav div { display:flex; gap:24px; }
.mx5-project-nav a { color:#aaa; transition:.2s ease; }
.mx5-project-nav a:hover { color:#fff; }
.mx5-hero {
  position:relative; z-index:2; min-height:calc(100vh - 120px); max-width:1380px; margin:0 auto;
  padding:90px 30px 70px; display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; gap:46px;
}
.mx5-kicker,.mx5-section-index { color:#c9604b; font-size:10px; letter-spacing:.2em; font-weight:900; }
.mx5-hero-copy h1 {
  margin:16px 0 24px; font-size:clamp(68px,9vw,142px); line-height:.77; letter-spacing:-.065em;
  font-weight:950;
}
.mx5-hero-copy h1 span { color:#ba3d2d; }
.mx5-lead { max-width:600px; color:#bcb9b3; font-size:17px; line-height:1.75; }
.mx5-actions { display:flex; gap:24px; align-items:center; margin-top:32px; }
.mx5-primary-btn {
  padding:15px 19px; background:#b93d2e; color:#fff; border:1px solid #d36250;
  font-size:10px; letter-spacing:.14em; font-weight:900; transition:.25s ease;
}
.mx5-primary-btn:hover { background:#d14a36; transform:translateY(-2px); }
.mx5-text-link { font-size:10px; letter-spacing:.14em; font-weight:900; color:#c4c0b9; }
.mx5-meta-strip { display:flex; flex-wrap:wrap; gap:24px; margin-top:44px; color:#777; font-size:9px; letter-spacing:.16em; font-weight:800; }
.mx5-meta-strip b { color:#c34a38; margin-right:5px; }
.mx5-garage-bay {
  position:relative; height:610px; overflow:hidden; border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,#161a1d 0 63%,#0c0e10 63% 100%);
  box-shadow:0 40px 100px rgba(0,0,0,.42);
}
.mx5-garage-bay:before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:100px 100%,100% 74px;
}
.mx5-garage-bay:after {
  content:""; position:absolute; left:0; right:0; top:63%; height:2px; background:rgba(255,255,255,.07);
  box-shadow:0 35px 80px rgba(195,62,44,.12);
}
.mx5-bay-light { position:absolute; top:56px; left:15%; right:15%; height:5px; background:#f5eee1; box-shadow:0 0 38px 14px rgba(245,238,225,.14); }
.mx5-bay-number { position:absolute; top:82px; right:34px; color:#62676a; font:700 10px monospace; letter-spacing:.18em; }
.mx5-roadster-svg { position:absolute; left:50%; bottom:64px; width:112%; transform:translateX(-50%); overflow:visible; }
.car-shadow { fill:rgba(0,0,0,.46); filter:blur(10px); }
.car-body { stroke:#ed6b52; stroke-width:2; }
.car-glass { stroke:rgba(255,255,255,.25); stroke-width:2; }
.car-windshield-line,.car-door-line { fill:none; stroke:rgba(255,255,255,.18); stroke-width:2; }
.popup-headlight { fill:#e7ddc8; filter:drop-shadow(0 0 12px rgba(255,238,195,.35)); }
.rear-light { fill:#f64c39; filter:drop-shadow(0 0 8px rgba(255,68,49,.35)); }
.wheel-outer { fill:#090a0b; stroke:#31363a; stroke-width:5; }
.wheel-inner { fill:#1a1d20; stroke:#85898c; stroke-width:2; }
.car-highlight { fill:none; stroke:rgba(255,255,255,.34); stroke-width:2; }
.mx5-floor-reflection {
  position:absolute; left:12%; right:12%; bottom:32px; height:90px;
  background:radial-gradient(ellipse,rgba(191,55,39,.16),transparent 68%); filter:blur(12px);
}
.mx5-section { position:relative; z-index:3; max-width:1240px; margin:0 auto; padding:120px 30px; border-top:1px solid rgba(255,255,255,.07); }
.mx5-section-heading { display:grid; grid-template-columns:1.3fr .7fr; gap:70px; align-items:end; margin-bottom:54px; }
.mx5-section-heading h2,.mx5-spec-copy h2,.mx5-route-copy h2,.mx5-end-section h2 {
  margin:12px 0 0; font-size:clamp(44px,6.4vw,88px); line-height:.93; letter-spacing:-.05em;
}
.mx5-section-heading h2 span,.mx5-route-copy h2 span { color:#6f7377; }
.mx5-section-heading > p,.mx5-spec-copy > p,.mx5-route-copy > p,.mx5-end-section p { color:#999b9c; line-height:1.8; }
.mx5-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mx5-feature-card {
  min-height:360px; padding:28px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  position:relative; overflow:hidden; transition:.3s ease;
}
.mx5-feature-card:hover { transform:translateY(-6px); border-color:rgba(206,72,52,.35); }
.mx5-feature-card small { display:block; color:#bd4a39; font-size:9px; letter-spacing:.18em; font-weight:900; margin:36px 0 10px; }
.mx5-feature-card h3 { margin:0 0 13px; font-size:30px; letter-spacing:-.03em; }
.mx5-feature-card p { margin:0; color:#8e9193; line-height:1.75; font-size:14px; }
.feature-icon { height:115px; position:relative; opacity:.88; }
.roadster-icon:before { content:""; position:absolute; left:5%; right:5%; bottom:26px; height:30px; border-radius:60% 45% 18% 18%; background:#a63529; transform:skewX(-10deg); }
.roadster-icon:after { content:""; position:absolute; width:33%; height:30px; left:31%; bottom:48px; border:3px solid #777; border-bottom:0; transform:skewX(-22deg); }
.roadster-icon span:before,.roadster-icon span:after { content:""; position:absolute; bottom:14px; width:44px; height:44px; border-radius:50%; background:#0c0d0e; border:4px solid #383c3f; }
.roadster-icon span:before { left:18%; } .roadster-icon span:after { right:18%; }
.route-icon i { position:absolute; left:48%; top:2px; width:5px; height:110px; background:#b74231; border-radius:10px; transform:rotate(21deg); box-shadow:-28px 19px 0 -1px #4d5052,31px 31px 0 -1px #4d5052; }
.key-icon:before { content:""; position:absolute; width:64px; height:64px; border:10px solid #a73c2e; border-radius:50%; left:22%; top:17px; }
.key-icon:after { content:""; position:absolute; left:43%; top:67px; width:104px; height:12px; background:#a73c2e; transform:rotate(34deg); transform-origin:left center; }
.key-icon b { position:absolute; width:18px; height:30px; border-left:8px solid #a73c2e; border-right:8px solid #a73c2e; left:69%; top:90px; transform:rotate(34deg); }
.mx5-roadster-section { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
.mx5-spec-visual { min-height:530px; position:relative; display:grid; place-items:center; background:radial-gradient(circle at 50% 38%,rgba(186,57,42,.19),transparent 37%),#101214; border:1px solid rgba(255,255,255,.07); overflow:hidden; }
.mx5-spec-visual:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.04) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.03) 50%,transparent 50.2%); }
.mx5-popup-pair { width:min(520px,88%); height:250px; position:relative; display:flex; justify-content:space-between; align-items:start; }
.popup-lamp { width:105px; height:85px; margin-top:24px; border-radius:8px 8px 18px 18px; background:linear-gradient(#dbe2dc,#6f7674); border:12px solid #7c251d; box-shadow:0 0 35px rgba(245,235,210,.16); }
.popup-nose { position:absolute; left:8%; right:8%; top:96px; height:115px; background:linear-gradient(#a33127,#511714); clip-path:polygon(4% 0,96% 0,100% 100%,0 100%); border-radius:9px 9px 40% 40%; }
.popup-nose i { position:absolute; top:32px; width:52px; height:14px; background:#17191a; border-radius:0 0 16px 16px; }
.popup-nose i:first-child { left:18%; } .popup-nose i:nth-child(2) { right:18%; }
.popup-nose b { position:absolute; width:95px; height:13px; left:50%; bottom:20px; transform:translateX(-50%); border-radius:0 0 50% 50%; background:#111; }
.mx5-spec-caption { position:absolute; left:24px; bottom:20px; color:#626669; font:800 9px monospace; letter-spacing:.18em; }
.mx5-spec-copy > p { max-width:530px; }
.mx5-spec-list { margin-top:38px; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.1); }
.mx5-spec-list div { padding:20px; border-right:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.mx5-spec-list span { display:block; color:#6f7477; font-size:8px; letter-spacing:.17em; margin-bottom:5px; }
.mx5-spec-list strong { font-size:20px; }
.mx5-route-section { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:center; }
.route-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; }
.route-tags span { padding:8px 10px; border:1px solid rgba(255,255,255,.11); color:#888c8e; font-size:8px; letter-spacing:.14em; }
.mx5-route-map { min-height:580px; position:relative; overflow:hidden; background:#111416; border:1px solid rgba(255,255,255,.07); }
.route-map-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; }
.mx5-route-map svg { position:absolute; inset:9% 6% 8%; width:88%; height:83%; }
.route-shadow { fill:none; stroke:rgba(0,0,0,.55); stroke-width:16; stroke-linecap:round; }
.route-path { fill:none; stroke:#c54634; stroke-width:5; stroke-linecap:round; stroke-dasharray:13 8; filter:drop-shadow(0 0 8px rgba(202,71,51,.22)); }
.route-point { fill:#151719; stroke:#c54634; stroke-width:4; }
.route-point.start,.route-point.finish { fill:#c54634; stroke:#f2b6aa; }
.route-label { position:absolute; display:grid; gap:4px; }
.route-label small { color:#b54030; font-size:8px; letter-spacing:.18em; }
.route-label strong { font-size:11px; letter-spacing:.1em; }
.start-label { left:5%; bottom:5%; } .finish-label { right:5%; top:5%; text-align:right; }
.mx5-end-section { position:relative; z-index:3; min-height:480px; padding:100px max(30px,calc((100vw - 1180px)/2)); display:flex; align-items:end; justify-content:space-between; gap:50px; background:linear-gradient(135deg,#17191b,#0a0b0c 55%,#311511); border-top:1px solid rgba(255,255,255,.07); }
.mx5-end-section > div { max-width:760px; }
.mx5-end-section small { color:#b64534; letter-spacing:.18em; font-size:9px; font-weight:900; }
.mx5-end-section p { max-width:650px; }
.mx5-return-button { background:none; color:#ddd; border:1px solid rgba(255,255,255,.14); padding:16px 18px; cursor:pointer; white-space:nowrap; font-size:9px; letter-spacing:.15em; font-weight:900; }
.mx5-return-button:hover { border-color:#c24836; color:#fff; }

/* GARAGE TRANSITION — slow close, pause, slow reveal */
.transition-layer.garage-transition.active {
  display:block;
  animation:none;
  background:transparent;
  overflow:hidden;
}
.garage-transition .transition-text,
.garage-transition .transition-noise,
.garage-transition .glitch-artifacts,
.garage-transition .signal-tear,
.garage-transition .signal-flash,
.garage-transition .glitch-stage { display:none !important; }
.garage-transition-scene {
  position:absolute; inset:0; display:none; overflow:hidden; pointer-events:none;
  background:transparent;
}
.garage-transition-scene.active { display:block; }
.garage-side-rail {
  position:absolute; z-index:8; top:0; bottom:0; width:30px;
  background:linear-gradient(90deg,#08090a,#34383a 38%,#17191a 62%,#050606);
  box-shadow:0 0 25px rgba(0,0,0,.7);
  opacity:0; animation:garageRailsIn .35s ease forwards;
}
.rail-left { left:0; } .rail-right { right:0; transform:scaleX(-1); }
.garage-overhead-light {
  position:absolute; z-index:9; top:18px; width:26%; height:5px; background:#f5f0e6;
  box-shadow:0 0 35px 15px rgba(244,239,226,.13); opacity:0; animation:garageRailsIn .4s ease forwards;
}
.garage-overhead-light.light-left { left:14%; } .garage-overhead-light.light-right { right:14%; }
.garage-floor-light {
  position:absolute; z-index:6; left:6%; right:6%; bottom:-20px; height:120px;
  background:radial-gradient(ellipse,rgba(208,82,55,.13),transparent 68%); opacity:0; transition:opacity .5s ease;
}
.garage-transition-scene.revealing .garage-floor-light { opacity:1; }
.garage-door {
  position:absolute; z-index:7; inset:0 30px 0; transform:translateY(-103%); will-change:transform;
  display:block;
}
.garage-door-face {
  position:absolute; inset:0;
  background:linear-gradient(90deg,#1c1f21 0,#404448 5%,#25282b 11%,#33373a 50%,#24272a 89%,#404448 95%,#181a1c 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.72),inset 0 0 80px rgba(0,0,0,.32);
}
.garage-door-face:before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);
  opacity:.5;
}
.garage-door-slats { position:absolute; inset:0; display:grid; grid-template-rows:repeat(8,1fr); }
.garage-door-slats span { border-bottom:3px solid #121416; box-shadow:inset 0 -5px 0 rgba(0,0,0,.23),inset 0 3px 0 rgba(255,255,255,.04); }
.garage-door-badge { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); text-align:center; color:#e8e4dc; text-shadow:0 2px 10px #000; }
.garage-door-badge small { display:block; color:#9b9e9f; font:700 9px monospace; letter-spacing:.22em; margin-bottom:9px; }
.garage-door-badge strong { font-size:clamp(22px,4vw,50px); letter-spacing:.07em; }
.garage-door-handle { position:absolute; width:100px; height:14px; left:50%; bottom:13%; transform:translateX(-50%); border-radius:8px; background:linear-gradient(#676c70,#222527); box-shadow:0 4px 10px #000; }
.garage-door-seal { position:absolute; left:0; right:0; bottom:0; height:18px; background:linear-gradient(#111,#030303); box-shadow:0 4px 16px #000; }
.garage-door.garage-closing { animation:garageCloseSlow 1.45s cubic-bezier(.55,.05,.28,.98) forwards; }
.garage-door.garage-closed { transform:translateY(0); }
.garage-door.garage-opening { animation:garageOpenSlow 1.45s cubic-bezier(.22,.76,.18,1) forwards; }
@keyframes garageCloseSlow { from { transform:translateY(-103%); } to { transform:translateY(0); } }
@keyframes garageOpenSlow { from { transform:translateY(0); } to { transform:translateY(-103%); } }
@keyframes garageRailsIn { from { opacity:0; } to { opacity:1; } }

@media (max-width: 960px) {
  .mx5-hero { grid-template-columns:1fr; padding-top:70px; }
  .mx5-garage-bay { height:500px; }
  .mx5-section-heading,.mx5-roadster-section,.mx5-route-section { grid-template-columns:1fr; }
  .mx5-feature-grid { grid-template-columns:1fr; }
  .mx5-feature-card { min-height:280px; }
  .mx5-spec-visual,.mx5-route-map { min-height:480px; }
  .mx5-end-section { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 560px) {
  .mx5-project-nav { top:62px; padding:0 18px; }
  .mx5-project-nav div { display:none; }
  .mx5-hero,.mx5-section { padding-left:18px; padding-right:18px; }
  .mx5-hero-copy h1 { font-size:66px; }
  .mx5-actions { align-items:flex-start; flex-direction:column; }
  .mx5-garage-bay { height:390px; }
  .mx5-roadster-svg { width:135%; bottom:55px; }
  .mx5-spec-visual,.mx5-route-map { min-height:390px; }
  .mx5-popup-pair { transform:scale(.78); }
  .mx5-spec-list { grid-template-columns:1fr 1fr; }
  .garage-door { inset-left:16px; inset-right:16px; }
  .garage-side-rail { width:16px; }
}


/* =========================================================
   CONVERTISSEUR LOCAL — V8 / TERMINAL + NEON GRID
   ========================================================= */
.card-software {
  background:
    radial-gradient(circle at 76% 30%,rgba(48,246,255,.17),transparent 26%),
    linear-gradient(145deg,#07151b,#050a0d 58%,#02151a);
  border-color:rgba(78,231,244,.16);
}
.card-software:after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 0 47%,rgba(94,248,255,.08) 49%,transparent 51% 100%);
  transform:translateX(-45%); transition:transform .7s ease;
}
.card-software:hover:after { transform:translateX(45%); }
.card-software .project-link { color:#75efff; text-shadow:0 0 16px rgba(91,235,255,.25); }

.page-software { position:relative; overflow:hidden; background:#02070a; color:#dffcff; }
.software-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.software-perspective-grid {
  position:absolute; left:-18%; right:-18%; bottom:-22%; height:72%;
  background-image:linear-gradient(rgba(64,231,241,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(64,231,241,.13) 1px,transparent 1px);
  background-size:58px 42px; transform:perspective(560px) rotateX(61deg); transform-origin:center bottom;
  mask-image:linear-gradient(to top,black 25%,transparent 92%);
}
.software-orbit { position:absolute; border:1px solid rgba(64,235,245,.16); border-radius:50%; box-shadow:0 0 70px rgba(32,213,235,.08),inset 0 0 70px rgba(32,213,235,.04); }
.orbit-one { width:760px; height:760px; right:-310px; top:90px; }
.orbit-two { width:460px; height:460px; right:-160px; top:240px; border-style:dashed; animation:softwareOrbit 18s linear infinite; }
.software-scanline { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(96,245,255,.018) 5px); opacity:.55; }
@keyframes softwareOrbit { to { transform:rotate(360deg); } }

.software-project-nav {
  position:sticky; top:70px; z-index:30; min-height:50px; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(2,10,14,.82); backdrop-filter:blur(18px); border-bottom:1px solid rgba(96,241,251,.14);
  color:#a9f5ff; font:800 10px monospace; letter-spacing:.13em;
}
.software-project-nav div { display:flex; gap:24px; }
.software-project-nav a { color:#63aab3; transition:.2s; }
.software-project-nav a:hover { color:#c8fbff; text-shadow:0 0 12px rgba(92,238,255,.4); }

.software-hero {
  position:relative; z-index:2; min-height:calc(100vh - 120px); max-width:1380px; margin:0 auto;
  padding:88px 30px 90px; display:grid; grid-template-columns:.82fr 1.18fr; gap:58px; align-items:center;
}
.software-kicker,.software-section-index { color:#58eaf6; font:900 10px monospace; letter-spacing:.18em; }
.software-hero-copy h1 { margin:14px 0 25px; font-size:clamp(68px,8.8vw,140px); line-height:.79; letter-spacing:-.065em; font-weight:950; }
.software-hero-copy h1 span { color:#51efff; text-shadow:0 0 34px rgba(40,227,246,.28); }
.software-lead { max-width:610px; color:#789ba1; line-height:1.8; font-size:16px; }
.software-actions { display:flex; align-items:center; gap:22px; margin-top:32px; flex-wrap:wrap; }
.software-primary-btn { padding:14px 18px; background:#51ecfa; color:#031014; border:1px solid #9df7ff; font:900 10px monospace; letter-spacing:.13em; box-shadow:0 0 24px rgba(61,229,244,.17); }
.software-primary-btn:hover { box-shadow:0 0 36px rgba(61,229,244,.35); transform:translateY(-2px); }
.software-status-pill { color:#79b7bd; font:800 9px monospace; letter-spacing:.12em; }
.software-status-pill i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#53f3b0; margin-right:7px; box-shadow:0 0 12px rgba(83,243,176,.7); }
.software-format-strip { display:flex; gap:8px; flex-wrap:wrap; margin-top:42px; }
.software-format-strip span { padding:7px 9px; border:1px solid rgba(78,232,244,.15); color:#5d9399; font:800 8px monospace; letter-spacing:.13em; }

.software-hero-ui { min-width:0; }
.cl-window { background:rgba(4,15,20,.92); border:1px solid rgba(80,231,243,.25); box-shadow:0 28px 90px rgba(0,0,0,.52),0 0 60px rgba(20,216,235,.08); overflow:hidden; }
.cl-titlebar { min-height:46px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid rgba(80,231,243,.14); background:#06151b; color:#4f9299; font:800 9px monospace; letter-spacing:.12em; }
.cl-title-left { display:flex; align-items:center; gap:7px; }
.cl-title-left i { width:7px; height:7px; border-radius:50%; background:#26545b; }
.cl-title-left i:first-child { background:#4ae8f4; box-shadow:0 0 12px rgba(74,232,244,.5); }
.cl-title-left b { color:#93eaf2; margin-left:8px; font-weight:800; }
.cl-layout { min-height:520px; display:grid; grid-template-columns:92px 1fr; }
.cl-sidebar { border-right:1px solid rgba(72,230,243,.11); background:#041015; padding:20px 10px; display:flex; flex-direction:column; gap:9px; }
.cl-sidebar strong { width:46px; height:46px; display:grid; place-items:center; margin:0 auto 18px; border:1px solid rgba(81,235,247,.3); color:#74effa; font:900 18px monospace; box-shadow:inset 0 0 18px rgba(56,225,240,.08); }
.cl-sidebar button { border:0; background:transparent; color:#406f75; min-height:48px; padding:8px; display:grid; place-items:center; gap:3px; font:800 15px monospace; }
.cl-sidebar button span { font-size:7px; text-transform:uppercase; letter-spacing:.08em; }
.cl-sidebar button.active { color:#75f1fb; background:rgba(62,227,240,.07); border-left:2px solid #56eaf7; }
.cl-main { padding:34px; }
.cl-main-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.cl-main-heading small { color:#4b7f86; font:800 8px monospace; letter-spacing:.14em; }
.cl-main-heading h3 { margin:5px 0 0; font-size:30px; letter-spacing:-.035em; }
.cl-chip { border:1px solid rgba(79,231,243,.2); color:#66cfd8; padding:6px 8px; font:800 8px monospace; letter-spacing:.12em; }
.cl-url-box { margin-top:28px; min-height:58px; display:flex; align-items:center; padding:0 17px; border:1px solid rgba(75,222,234,.16); background:#02090c; color:#386d73; font:700 11px monospace; }
.cl-url-box span { color:#57cdd8; margin-right:2px; }
.cl-url-box b { color:#87c9cf; font-weight:700; }
.cl-url-box i { width:7px; height:16px; background:#69eef8; margin-left:4px; animation:terminalBlink .8s steps(1) infinite; }
.cl-controls { display:grid; grid-template-columns:1fr 1fr 120px; gap:10px; margin-top:12px; }
.cl-controls div,.cl-controls button { min-height:66px; border:1px solid rgba(72,225,238,.13); background:rgba(8,25,31,.75); padding:12px; text-align:left; color:#dffcff; }
.cl-controls small { display:block; color:#477b81; font:800 7px monospace; letter-spacing:.14em; margin-bottom:7px; }
.cl-controls strong { font:900 15px monospace; }
.cl-controls button { display:grid; place-items:center; text-align:center; background:#4ce7f5; color:#021014; font:900 10px monospace; letter-spacing:.14em; cursor:pointer; }
.cl-progress-card { margin-top:18px; padding:17px; border:1px solid rgba(72,225,238,.13); background:rgba(6,18,23,.72); }
.cl-progress-card > div:first-child { display:flex; justify-content:space-between; color:#72aeb5; font:800 9px monospace; }
.cl-progress-card > div:first-child b { color:#7df2fb; }
.cl-progress-track { height:6px; background:#071216; margin:12px 0 9px; overflow:hidden; }
.cl-progress-track i { display:block; width:72%; height:100%; background:linear-gradient(90deg,#238d99,#60effb); box-shadow:0 0 18px rgba(76,232,246,.4); }
.cl-progress-card small { color:#315d62; font:700 7px monospace; letter-spacing:.08em; }
.cl-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.cl-metrics div { padding:16px; border:1px solid rgba(72,225,238,.1); background:rgba(3,13,17,.7); }
.cl-metrics small { display:block; color:#35666b; font:800 7px monospace; letter-spacing:.12em; }
.cl-metrics strong { display:block; margin-top:6px; color:#8aebf2; font:900 15px monospace; }

.software-section { position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:118px 30px; border-top:1px solid rgba(73,227,240,.08); }
.software-section-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:end; margin-bottom:50px; }
.software-section-heading h2,.software-data-copy h2,.software-engine-copy h2 { margin:10px 0 0; font-size:clamp(44px,6.2vw,86px); line-height:.94; letter-spacing:-.05em; }
.software-section-heading h2 span,.software-data-copy h2 span,.software-engine-copy h2 span { color:#315c62; }
.software-section-heading > p,.software-data-copy > p,.software-engine-copy > p { color:#64868c; line-height:1.8; }
.software-module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.software-module { min-height:350px; padding:28px; position:relative; overflow:hidden; border:1px solid rgba(80,230,243,.1); background:linear-gradient(145deg,rgba(17,48,56,.22),rgba(2,12,16,.76)); transition:.3s; }
.software-module:hover { transform:translateY(-6px); border-color:rgba(84,237,249,.3); box-shadow:0 18px 50px rgba(0,0,0,.24); }
.module-code { position:absolute; top:18px; right:20px; color:#244e53; font:800 9px monospace; }
.software-module small { display:block; color:#4de6f2; font:900 8px monospace; letter-spacing:.16em; margin:28px 0 8px; }
.software-module h3 { margin:0 0 12px; font-size:28px; }
.software-module p { color:#55777d; line-height:1.75; font-size:14px; }
.module-icon { height:115px; position:relative; }
.download-icon:before { content:""; position:absolute; left:50%; top:13px; width:3px; height:62px; background:#4ce9f6; box-shadow:0 0 14px rgba(76,233,246,.4); }
.download-icon:after { content:""; position:absolute; left:calc(50% - 15px); top:57px; width:28px; height:28px; border-left:3px solid #4ce9f6; border-bottom:3px solid #4ce9f6; transform:rotate(-45deg); }
.convert-icon:before,.convert-icon:after { content:""; position:absolute; width:58px; height:58px; border:2px solid #48dbe8; border-radius:50%; top:20px; }
.convert-icon:before { left:25%; } .convert-icon:after { right:25%; border-color:#2a7d86; }
.history-icon:before { content:""; position:absolute; width:72px; height:72px; border:2px solid #46dce9; border-radius:50%; left:50%; top:16px; transform:translateX(-50%); }
.history-icon:after { content:""; position:absolute; left:50%; top:38px; width:2px; height:30px; background:#4ce9f6; box-shadow:12px 19px 0 -0.2px #4ce9f6; transform-origin:bottom; }

.software-data-section { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
.software-data-panel { border:1px solid rgba(77,229,242,.14); background:rgba(4,17,22,.8); }
.software-data-header { min-height:48px; padding:0 17px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(77,229,242,.12); color:#559299; font:800 8px monospace; letter-spacing:.13em; }
.software-data-header b { color:#72eefa; }
.software-data-list > div { min-height:68px; padding:0 18px; display:grid; grid-template-columns:90px 1fr 70px; align-items:center; border-bottom:1px solid rgba(77,229,242,.08); }
.software-data-list > div:last-child { border-bottom:0; }
.software-data-list strong { font:900 17px monospace; color:#baf8fc; }
.software-data-list span { color:#426f75; font:800 8px monospace; letter-spacing:.1em; }
.software-data-list i { font-style:normal; color:#54e9aa; font:800 8px monospace; text-align:right; }
.software-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.software-badges span { padding:8px 10px; border:1px solid rgba(72,225,239,.13); color:#47767c; font:800 8px monospace; letter-spacing:.11em; }

.software-engine-section { display:grid; grid-template-columns:1.08fr .92fr; gap:70px; align-items:center; }
.software-terminal-card { border:1px solid rgba(75,228,241,.15); background:#020a0d; box-shadow:0 30px 80px rgba(0,0,0,.32); }
.software-terminal-card-bar { height:44px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(75,228,241,.11); color:#42777d; font:800 8px monospace; letter-spacing:.12em; }
.software-terminal-card-bar b { color:#56e6f2; }
.software-terminal-card pre { margin:0; min-height:350px; padding:32px; color:#578d93; font:700 12px/2 monospace; white-space:pre-wrap; }
.software-terminal-card pre span { color:#4ce3f0; }
.software-terminal-card .terminal-success { color:#57f0ac; text-shadow:0 0 12px rgba(87,240,172,.28); }
.software-return-button { margin-top:28px; padding:14px 16px; border:1px solid rgba(75,229,242,.18); background:transparent; color:#76eaf4; font:900 9px monospace; letter-spacing:.12em; cursor:pointer; }
.software-return-button:hover { background:rgba(74,229,242,.08); border-color:rgba(89,237,249,.4); }

/* SOFTWARE BOOT TRANSITION */
.transition-layer.software-transition.active { display:block; animation:none; background:#010608; overflow:hidden; }
.software-transition .transition-text,.software-transition .transition-noise,.software-transition .glitch-artifacts,.software-transition .signal-tear,.software-transition .signal-flash,.software-transition .glitch-stage,.software-transition .garage-transition-scene { display:none !important; }
.software-boot-scene { position:absolute; inset:0; display:none; overflow:hidden; background:radial-gradient(circle at 50% 55%,#06252d 0,#02090c 42%,#010405 76%); color:#7bf3ff; }
.software-boot-scene.visible { display:block; animation:softwareSceneIn .22s ease both; }
.software-boot-grid { position:absolute; left:-18%; right:-18%; bottom:-32%; height:82%; background-image:linear-gradient(rgba(59,223,237,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(59,223,237,.16) 1px,transparent 1px); background-size:62px 45px; transform:perspective(520px) rotateX(62deg); transform-origin:center bottom; opacity:.52; }
.software-boot-glow { position:absolute; width:900px; height:900px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-44%); background:radial-gradient(circle,rgba(57,235,248,.11),transparent 64%); }
.software-terminal-shell { position:absolute; width:min(920px,88vw); height:min(560px,72vh); left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(80,237,249,.36); background:rgba(2,11,15,.94); box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 70px rgba(51,226,241,.11),inset 0 0 80px rgba(42,199,214,.035); }
.software-terminal-shell:before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(100,244,255,.018) 4px); }
.software-terminal-topbar { height:44px; padding:0 15px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(80,237,249,.16); color:#43848b; font:800 9px monospace; letter-spacing:.12em; }
.software-terminal-topbar b { margin-left:auto; color:#63d6df; }
.terminal-led { width:7px; height:7px; border-radius:50%; background:#61f2ff; box-shadow:0 0 12px rgba(97,242,255,.75); }
.software-terminal-body { position:absolute; inset:44px 0 20px; padding:26px 28px; overflow:hidden; }
.terminal-ascii { display:grid; color:#2b6970; font:700 10px/1.45 monospace; margin-bottom:21px; }
.software-terminal-output { height:250px; overflow:hidden; color:#4c9299; font:700 11px/1.75 monospace; }
.terminal-output-line { opacity:0; transform:translateY(5px); transition:.16s ease; }
.terminal-output-line.visible { opacity:1; transform:none; }
.term-dim { color:#254e53; }.term-ok { color:#57efae; }.term-cyan { color:#67ecf7; }
.terminal-output-line.success { color:#71ffc0; margin-top:8px; text-shadow:0 0 16px rgba(83,245,177,.24); }
.software-terminal-command { position:absolute; left:28px; right:28px; bottom:23px; color:#4d9299; font:800 11px monospace; }
.software-terminal-command span { color:#63eaf6; margin-right:8px; }
.software-terminal-command b { color:#c2fbff; font-weight:700; }
.terminal-cursor { display:inline-block; width:7px; height:14px; vertical-align:-2px; margin-left:3px; background:#6ff3ff; animation:terminalBlink .72s steps(1) infinite; }
@keyframes terminalBlink { 50% { opacity:0; } }
.software-terminal-progress { position:absolute; left:0; right:0; bottom:0; height:3px; background:#071519; }
.software-terminal-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,#136d77,#69f2ff); box-shadow:0 0 12px rgba(70,232,246,.55); transition:width .35s ease; }
.software-boot-status { position:absolute; left:50%; bottom:7%; transform:translateX(-50%); color:#346c72; font:800 9px monospace; letter-spacing:.18em; }
.software-launch-flash { position:absolute; inset:0; background:#8cf7ff; opacity:0; pointer-events:none; }
.software-boot-scene.launching .software-terminal-shell { animation:terminalLaunch .62s cubic-bezier(.2,.8,.2,1) forwards; }
.software-boot-scene.launching .software-launch-flash { animation:terminalFlash .62s ease forwards; }
.software-boot-scene.launching .software-boot-grid { animation:gridDive .62s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes softwareSceneIn { from { opacity:0; } to { opacity:1; } }
@keyframes terminalLaunch { 0% { transform:translate(-50%,-50%) scale(1); filter:none; opacity:1; } 55% { transform:translate(-50%,-50%) scale(1.06); filter:brightness(1.35) contrast(1.18); } 100% { transform:translate(-50%,-50%) scale(1.32); filter:brightness(2.2) blur(8px); opacity:0; } }
@keyframes terminalFlash { 0%,55% { opacity:0; } 72% { opacity:.68; } 100% { opacity:0; } }
@keyframes gridDive { to { transform:perspective(400px) rotateX(65deg) translateY(120px) scale(1.35); opacity:.08; } }

@media (max-width:960px) {
  .software-hero,.software-data-section,.software-engine-section,.software-section-heading { grid-template-columns:1fr; }
  .software-module-grid { grid-template-columns:1fr; }
  .software-hero-ui { order:-1; }
  .cl-layout { grid-template-columns:68px 1fr; }
  .cl-sidebar button span { display:none; }
}
@media (max-width:560px) {
  .software-project-nav { top:62px; padding:0 18px; }
  .software-project-nav div { display:none; }
  .software-hero,.software-section { padding-left:18px; padding-right:18px; }
  .software-hero-copy h1 { font-size:64px; }
  .cl-main { padding:20px; }
  .cl-controls { grid-template-columns:1fr 1fr; }
  .cl-controls button { grid-column:1/-1; }
  .cl-metrics { grid-template-columns:1fr; }
  .software-data-list > div { grid-template-columns:70px 1fr 55px; }
  .software-terminal-shell { width:94vw; height:70vh; }
  .software-terminal-body { padding:20px; }
  .software-terminal-output { font-size:9px; }
  .software-terminal-command { left:20px; right:20px; font-size:9px; }
}

/* CMS-driven real screenshots */
.media-card.has-image { background:#16150b; filter:none; }
.media-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .45s var(--ease), filter .35s ease; }
.media-card.has-image:hover .media-image { transform:scale(1.045); filter:brightness(1.06); }
.media-card-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(11,10,5,.78), rgba(11,10,5,.02) 58%); pointer-events:none; }
.media-card .media-crosshair, .media-card .media-label { z-index:2; }
.lightbox-image-wrap { margin:0; width:min(1200px,92vw); max-height:86vh; display:grid; gap:12px; }
.lightbox-image-wrap img { display:block; width:100%; max-height:78vh; object-fit:contain; background:#050505; border:1px solid rgba(255,255,255,.14); }
.lightbox-image-wrap figcaption { display:flex; justify-content:space-between; gap:20px; color:#eee; font-size:13px; letter-spacing:.04em; }
.lightbox-image-wrap figcaption span { color:#aaa; }


/* BACKROOMS — REAL SCREENSHOT GALLERY */
.gallery-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:-6px 0 24px;
  padding:14px 0 18px;
  border-bottom:1px solid rgba(39,34,11,.18);
}
.gallery-filters { display:flex; flex-wrap:wrap; gap:8px; }
.gallery-filter {
  border:1px solid rgba(30,27,12,.24);
  background:rgba(255,255,255,.11);
  color:#292511;
  padding:8px 11px;
  cursor:pointer;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.gallery-filter:hover { transform:translateY(-1px); background:rgba(255,255,255,.24); }
.gallery-filter.active { background:#1d1b0d; color:#e7d98c; border-color:#1d1b0d; }
.gallery-sort-wrap { display:flex; align-items:center; gap:9px; font:800 9px monospace; letter-spacing:.12em; color:#3e381a; }
.gallery-sort-wrap select {
  border:1px solid rgba(30,27,12,.24);
  background:rgba(235,225,145,.68);
  color:#26230f;
  padding:8px 28px 8px 10px;
  font:700 11px monospace;
  cursor:pointer;
}
.media-grid { align-items:stretch; }
.media-card { min-height:0; aspect-ratio:16/9; background:#25220f; }
.media-card.has-image { filter:none; }
.media-card.has-image:before { z-index:2; background:linear-gradient(135deg,transparent 35%,rgba(255,247,184,.08)); }
.media-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  transition:transform .45s var(--ease), filter .3s ease;
}
.media-card:hover .media-image { transform:scale(1.035); filter:brightness(1.04); }
.media-card-shade {
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top, rgba(9,8,3,.82) 0%, rgba(9,8,3,.22) 42%, rgba(9,8,3,.08) 70%, rgba(9,8,3,.24) 100%);
  pointer-events:none;
}
.media-top-meta {
  position:absolute;
  z-index:4;
  left:14px;
  top:13px;
  right:48px;
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}
.media-category,.media-date {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:4px 7px;
  background:rgba(14,13,7,.74);
  border:1px solid rgba(255,255,255,.17);
  color:#f0e7b6;
  backdrop-filter:blur(6px);
  font:800 9px monospace;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.media-crosshair { z-index:4; color:#fff8d0; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.media-label { z-index:4; color:#f4ecc5; right:16px; text-shadow:0 2px 14px rgba(0,0,0,.85); }
.media-label small { color:#ded4a4; }
.lightbox-image-wrap { margin:0; width:100%; display:grid; gap:12px; }
.lightbox-image-wrap img {
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background:#090905;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 30px 100px rgba(0,0,0,.5);
}
.lightbox-image-wrap figcaption { display:flex; justify-content:space-between; gap:20px; color:#eee6bb; font-size:13px; }
.lightbox-image-wrap figcaption b { font-size:15px; }
.lightbox-image-wrap figcaption span { opacity:.7; font:700 11px monospace; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width: 700px) {
  .gallery-toolbar { align-items:flex-start; flex-direction:column; }
  .gallery-sort-wrap { width:100%; justify-content:space-between; }
  .gallery-sort-wrap select { flex:1; }
}


/* YouTube fallback when the site is opened directly with file:// */
.video-local-fallback {
  aspect-ratio: 16 / 9;
  position: relative;
  display: block;
  overflow: hidden;
  background: #0a0a06;
  color: #efe6b7;
}
.video-local-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.72) saturate(.78) sepia(.12);
  transition: transform .35s ease, filter .35s ease;
}
.video-local-fallback:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(9,8,3,.75));
  pointer-events: none;
}
.video-local-fallback:hover img {
  transform: scale(1.025);
  filter: brightness(.9) saturate(.92);
}
.video-play-button {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 4px;
  background: rgba(18,17,8,.82);
  border: 1px solid rgba(239,230,183,.45);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  font-size: 25px;
}
.video-local-message {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 14px;
  font: 800 10px/1.4 monospace;
  letter-spacing: .11em;
  text-align: center;
  color: #e8dca0;
}


/* V10.2 — INLINE YOUTUBE PLAYER */
.video-inline-shell,
.video-inline-player,
.video-local-fallback {
  width:100%;
  aspect-ratio:16/9;
}
.video-inline-player,
.video-local-fallback {
  position:relative;
  display:block;
  overflow:hidden;
  padding:0;
  border:0;
  background:#0b0b08;
  cursor:pointer;
  color:#f3e8a8;
}
.video-inline-player img,
.video-local-fallback img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.72) contrast(1.08) brightness(.72);
  transition:transform .35s ease, filter .35s ease;
}
.video-inline-player:hover img,
.video-local-fallback:hover img {
  transform:scale(1.025);
  filter:saturate(.9) contrast(1.08) brightness(.88);
}
.video-inline-player:after,
.video-local-fallback:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(8,7,2,.72));
  pointer-events:none;
}
.video-play-button {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:70px;
  height:70px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:5px;
  background:rgba(12,11,5,.78);
  border:1px solid rgba(239,226,153,.48);
  box-shadow:0 0 35px rgba(255,239,151,.17);
  font-size:25px;
}
.video-local-message {
  position:absolute;
  left:18px;
  right:18px;
  bottom:15px;
  z-index:3;
  font:800 10px/1.35 monospace;
  letter-spacing:.11em;
  text-align:left;
}

/* V10.2 — AUDIO-REACTIVE LIGHT LOSS */
.page-backrooms {
  --audio-blackout:0;
  --audio-tube-opacity:1;
  --audio-tube-brightness:1;
}
.audio-blackout-overlay {
  position:fixed;
  inset:70px 0 0;
  z-index:29;
  pointer-events:none;
  opacity:var(--audio-blackout);
  background:
    radial-gradient(circle at 52% 34%, rgba(22,20,9,.30), rgba(5,5,3,.91) 72%),
    rgba(7,6,3,.72);
  mix-blend-mode:multiply;
  transition:opacity .10s linear;
}
.page-backrooms.audio-neon-dropout .fluorescent-light,
.page-backrooms.audio-neon-dropout .room-light {
  opacity:var(--audio-tube-opacity);
  filter:brightness(var(--audio-tube-brightness));
  transition:opacity .09s linear, filter .09s linear, box-shadow .09s linear;
}
.page-backrooms.audio-neon-off .fluorescent-light,
.page-backrooms.audio-neon-off .room-light {
  box-shadow:0 0 2px rgba(255,248,201,.08);
}
.page-backrooms.audio-neon-off .project-subnav {
  box-shadow:0 1px 0 rgba(25,22,7,.5);
}


/* V10.4 — extinction réelle des néons synchronisée au son */
.audio-blackout-overlay {
  position:fixed;
  inset:70px 0 0;
  z-index:999;
  pointer-events:none;
  opacity:var(--audio-blackout);
  background:
    radial-gradient(circle at 50% 32%, rgba(24,21,10,.20) 0%, rgba(5,5,3,.82) 48%, rgba(1,1,1,.97) 100%),
    rgba(2,2,1,.74);
  mix-blend-mode:normal;
  transition:opacity .055s linear;
}

.page-backrooms.audio-neon-dropout .fluorescent-light,
.page-backrooms.audio-neon-dropout .room-light {
  opacity:var(--audio-tube-opacity) !important;
  filter:brightness(var(--audio-tube-brightness)) !important;
  transition:opacity .055s linear, filter .055s linear, box-shadow .055s linear !important;
}

.page-backrooms.audio-neon-off .fluorescent-light,
.page-backrooms.audio-neon-off .room-light {
  opacity:.008 !important;
  filter:brightness(.02) !important;
  box-shadow:none !important;
}

.page-backrooms.audio-neon-off .project-subnav,
.page-backrooms.audio-neon-off .br-hero,
.page-backrooms.audio-neon-off .content-section,
.page-backrooms.audio-neon-off .exit-zone {
  filter:brightness(.72) saturate(.82);
}

.video-integrated { position:relative; }
.integrated-player-badge {
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  pointer-events:none;
  padding:5px 8px;
  border:1px solid rgba(218,204,118,.3);
  background:rgba(12,11,6,.78);
  color:#d8cc76;
  font:800 9px/1 monospace;
  letter-spacing:.12em;
}


/* ==========================================================
   V10.7 — TRUE AUDIO-SYNCED FLUORESCENT BEHAVIOUR
   Metallic transients can flash the tubes even during blackout.
   ========================================================== */

/* The blackout itself follows the analyzed hum envelope. */
.page-backrooms .audio-blackout-overlay {
  z-index: 999;
  opacity: var(--audio-blackout);
  transition: opacity .025s linear;
}

/* Normal dropout state: no !important lock, so cue animations can override it. */
.page-backrooms.audio-neon-dropout .fluorescent-light,
.page-backrooms.audio-neon-dropout .room-light,
.page-backrooms.audio-neon-off .fluorescent-light,
.page-backrooms.audio-neon-off .room-light {
  opacity: var(--audio-tube-opacity) !important;
  filter: brightness(var(--audio-tube-brightness)) !important;
  box-shadow: none;
  transition: opacity .025s linear, filter .025s linear, box-shadow .025s linear;
}

/* Cue durations are intentionally short: these are electrical clicks, not long fades. */
.page-backrooms.neon-flicker-soft .neon-flicker-overlay {
  animation: v107ScreenSoft .17s steps(1,end) both !important;
}
.page-backrooms.neon-flicker-medium .neon-flicker-overlay {
  animation: v107ScreenMedium .29s steps(1,end) both !important;
}
.page-backrooms.neon-flicker-strong .neon-flicker-overlay {
  animation: v107ScreenStrong .47s steps(1,end) both !important;
}

/* IMPORTANT: while the hum is OFF, a metallic click can briefly re-ignite the tubes. */
.page-backrooms.audio-neon-off.neon-flicker-soft .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-soft .room-light {
  animation: v107TubeDarkSoft .17s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-medium .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-medium .room-light {
  animation: v107TubeDarkMedium .29s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-strong .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-strong .room-light {
  animation: v107TubeDarkStrong .47s steps(1,end) both !important;
}

/* During a blackout, flicker cues punch holes into the darkness overlay too. */
.page-backrooms.audio-neon-off.neon-flicker-soft .audio-blackout-overlay {
  animation: v107BlackoutSoft .17s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-medium .audio-blackout-overlay {
  animation: v107BlackoutMedium .29s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-strong .audio-blackout-overlay {
  animation: v107BlackoutStrong .47s steps(1,end) both !important;
}

@keyframes v107ScreenSoft {
  0%,100% { opacity:0; }
  18% { opacity:.22; background:rgba(12,10,3,.72); }
  42% { opacity:0; }
  66% { opacity:.11; background:rgba(255,248,197,.16); mix-blend-mode:screen; }
  78% { opacity:0; }
}
@keyframes v107ScreenMedium {
  0%,100% { opacity:0; }
  8% { opacity:.40; background:rgba(5,5,2,.92); mix-blend-mode:multiply; }
  17% { opacity:0; }
  28% { opacity:.16; background:rgba(255,250,205,.25); mix-blend-mode:screen; }
  37% { opacity:.43; background:rgba(6,5,2,.94); mix-blend-mode:multiply; }
  50% { opacity:0; }
  66% { opacity:.22; }
  75% { opacity:0; }
}
@keyframes v107ScreenStrong {
  0%,100% { opacity:0; }
  5% { opacity:.70; background:rgba(2,2,1,.98); mix-blend-mode:multiply; }
  11% { opacity:0; }
  18% { opacity:.20; background:rgba(255,250,210,.34); mix-blend-mode:screen; }
  24% { opacity:.76; background:rgba(2,2,1,.98); mix-blend-mode:multiply; }
  31% { opacity:0; }
  38% { opacity:.26; background:rgba(255,248,195,.30); mix-blend-mode:screen; }
  44% { opacity:.55; background:rgba(5,4,1,.95); mix-blend-mode:multiply; }
  54% { opacity:0; }
  66% { opacity:.35; }
  72% { opacity:0; }
  84% { opacity:.18; }
  90% { opacity:0; }
}

@keyframes v107TubeDarkSoft {
  0%,100% { opacity:.008; filter:brightness(.02); box-shadow:none; }
  18% { opacity:.62; filter:brightness(1.05); box-shadow:0 0 18px 6px rgba(255,248,201,.34); }
  42% { opacity:.02; filter:brightness(.08); box-shadow:none; }
  66% { opacity:.35; filter:brightness(.7); box-shadow:0 0 9px 3px rgba(255,248,201,.20); }
  78% { opacity:.008; filter:brightness(.02); box-shadow:none; }
}
@keyframes v107TubeDarkMedium {
  0%,100% { opacity:.008; filter:brightness(.02); box-shadow:none; }
  8% { opacity:.96; filter:brightness(1.32); box-shadow:0 0 28px 9px rgba(255,248,201,.50); }
  17% { opacity:.015; filter:brightness(.04); box-shadow:none; }
  28% { opacity:.74; filter:brightness(1.10); box-shadow:0 0 20px 7px rgba(255,248,201,.38); }
  37% { opacity:.01; filter:brightness(.03); box-shadow:none; }
  50% { opacity:.88; filter:brightness(1.22); box-shadow:0 0 24px 8px rgba(255,248,201,.45); }
  66% { opacity:.05; filter:brightness(.12); box-shadow:none; }
  75% { opacity:.008; filter:brightness(.02); box-shadow:none; }
}
@keyframes v107TubeDarkStrong {
  0%,100% { opacity:.008; filter:brightness(.02); box-shadow:none; }
  5% { opacity:1; filter:brightness(1.65); box-shadow:0 0 42px 14px rgba(255,248,201,.68); }
  11% { opacity:0; filter:brightness(0); box-shadow:none; }
  18% { opacity:1; filter:brightness(1.45); box-shadow:0 0 36px 12px rgba(255,248,201,.60); }
  24% { opacity:.01; filter:brightness(.02); box-shadow:none; }
  31% { opacity:1; filter:brightness(1.72); box-shadow:0 0 48px 16px rgba(255,248,201,.74); }
  38% { opacity:.02; filter:brightness(.05); box-shadow:none; }
  44% { opacity:.82; filter:brightness(1.22); box-shadow:0 0 26px 9px rgba(255,248,201,.46); }
  54% { opacity:.008; filter:brightness(.02); box-shadow:none; }
  66% { opacity:.48; filter:brightness(.82); box-shadow:0 0 12px 4px rgba(255,248,201,.26); }
  72% { opacity:.008; filter:brightness(.02); box-shadow:none; }
}

@keyframes v107BlackoutSoft {
  0%,100% { opacity:var(--audio-blackout); }
  18% { opacity:.58; }
  42% { opacity:var(--audio-blackout); }
  66% { opacity:.72; }
  78% { opacity:var(--audio-blackout); }
}
@keyframes v107BlackoutMedium {
  0%,100% { opacity:var(--audio-blackout); }
  8% { opacity:.28; }
  17% { opacity:var(--audio-blackout); }
  28% { opacity:.42; }
  37% { opacity:var(--audio-blackout); }
  50% { opacity:.34; }
  66% { opacity:.78; }
  75% { opacity:var(--audio-blackout); }
}
@keyframes v107BlackoutStrong {
  0%,100% { opacity:var(--audio-blackout); }
  5% { opacity:.10; }
  11% { opacity:var(--audio-blackout); }
  18% { opacity:.18; }
  24% { opacity:var(--audio-blackout); }
  31% { opacity:.06; }
  38% { opacity:var(--audio-blackout); }
  44% { opacity:.28; }
  54% { opacity:var(--audio-blackout); }
  66% { opacity:.52; }
  72% { opacity:var(--audio-blackout); }
}


/* ==========================================================
   V10.8 — RESTORE + EXTEND NEON FLICKERS
   Outside a blackout, restore the longer V10.6 flicker language.
   During a blackout, the V10.7 re-ignition rules remain active.
   ========================================================== */
.page-backrooms:not(.audio-neon-off).neon-flicker-soft .neon-flicker-overlay {
  animation: neonScreenSoft .30s steps(1,end) both !important;
}
.page-backrooms:not(.audio-neon-off).neon-flicker-medium .neon-flicker-overlay {
  animation: neonScreenMedium .56s steps(1,end) both !important;
}
.page-backrooms:not(.audio-neon-off).neon-flicker-strong .neon-flicker-overlay {
  animation: neonScreenStrong .90s steps(1,end) both !important;
}
.page-backrooms:not(.audio-neon-off).neon-flicker-soft .fluorescent-light,
.page-backrooms:not(.audio-neon-off).neon-flicker-soft .room-light {
  animation: neonTubeSoft .30s steps(1,end) both !important;
}
.page-backrooms:not(.audio-neon-off).neon-flicker-medium .fluorescent-light,
.page-backrooms:not(.audio-neon-off).neon-flicker-medium .room-light {
  animation: neonTubeMedium .56s steps(1,end) both !important;
}
.page-backrooms:not(.audio-neon-off).neon-flicker-strong .fluorescent-light,
.page-backrooms:not(.audio-neon-off).neon-flicker-strong .room-light {
  animation: neonTubeStrong .90s steps(1,end) both !important;
}


/* ==========================================================
   V10.9 — PHYSICAL FLUORESCENT FIXTURES + BLACKOUT TUNING
   The housing stays visible when the lamp is off. Only the inner
   luminous strip loses emission.
   ========================================================== */
.page-backrooms .fluorescent-light,
.page-backrooms .room-light {
  opacity:1 !important;
  filter:none !important;
  animation:none !important;
  box-shadow:0 2px 8px rgba(23,20,9,.34) !important;
  background:linear-gradient(180deg,#716e5d 0%,#37372f 46%,#23241f 100%) !important;
  border:1px solid rgba(20,20,16,.72);
  border-radius:3px;
  overflow:visible;
}

.page-backrooms .fluorescent-light {
  height:18px;
}
.page-backrooms .room-light {
  height:22px;
}

/* Small end caps / fixture depth. */
.page-backrooms .fluorescent-light::before,
.page-backrooms .room-light::before {
  content:"";
  position:absolute;
  inset:2px 5px;
  border-radius:2px;
  background:linear-gradient(180deg,#47483e,#282922);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12), inset 0 -1px 2px rgba(0,0,0,.65);
  z-index:0;
}

/* The actual fluorescent tube: this is what turns off. */
.page-backrooms .fluorescent-light::after,
.page-backrooms .room-light::after {
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:50%;
  height:5px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#fff9d5;
  opacity:var(--audio-tube-opacity,1);
  filter:brightness(var(--audio-tube-brightness,1));
  box-shadow:
    0 0 4px 1px rgba(255,250,218,.95),
    0 0 15px 5px rgba(255,245,185,.62),
    0 0 34px 10px rgba(255,241,161,.22);
  transition:opacity .045s linear, filter .045s linear, box-shadow .045s linear;
  z-index:1;
}

.page-backrooms.audio-neon-off .fluorescent-light::after,
.page-backrooms.audio-neon-off .room-light::after {
  opacity:.018;
  filter:brightness(.18);
  background:#aaa88f;
  box-shadow:0 0 1px rgba(255,248,201,.08);
}

/* Parent fixture always remains visible, even in a full blackout. */
.page-backrooms.audio-neon-dropout .fluorescent-light,
.page-backrooms.audio-neon-dropout .room-light,
.page-backrooms.audio-neon-off .fluorescent-light,
.page-backrooms.audio-neon-off .room-light {
  opacity:1 !important;
  filter:none !important;
  box-shadow:0 2px 8px rgba(0,0,0,.38) !important;
}

/* Flicker now acts on the light source inside the fixture, never on the housing. */
.page-backrooms.neon-flicker-soft .fluorescent-light::after,
.page-backrooms.neon-flicker-soft .room-light::after {
  animation:v109TubeSoft .30s steps(1,end) both !important;
}
.page-backrooms.neon-flicker-medium .fluorescent-light::after,
.page-backrooms.neon-flicker-medium .room-light::after {
  animation:v109TubeMedium .56s steps(1,end) both !important;
}
.page-backrooms.neon-flicker-strong .fluorescent-light::after,
.page-backrooms.neon-flicker-strong .room-light::after {
  animation:v109TubeStrong .90s steps(1,end) both !important;
}

/* Dark-state sparks can genuinely re-ignite an otherwise dead tube. */
.page-backrooms.audio-neon-off.neon-flicker-soft .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-soft .room-light::after {
  animation:v109DarkSparkSoft .30s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-medium .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-medium .room-light::after {
  animation:v109DarkSparkMedium .56s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-strong .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-strong .room-light::after {
  animation:v109DarkSparkStrong .90s steps(1,end) both !important;
}

@keyframes v109TubeSoft {
  0%,100% { opacity:var(--audio-tube-opacity,1); filter:brightness(1); }
  14% { opacity:.18; filter:brightness(.35); box-shadow:0 0 2px rgba(255,248,201,.12); }
  29% { opacity:1; filter:brightness(1.18); }
  46% { opacity:.44; filter:brightness(.65); }
  61% { opacity:var(--audio-tube-opacity,1); }
}
@keyframes v109TubeMedium {
  0%,100% { opacity:var(--audio-tube-opacity,1); }
  8% { opacity:.03; filter:brightness(.12); box-shadow:none; }
  18% { opacity:1; filter:brightness(1.28); }
  28% { opacity:.08; filter:brightness(.2); }
  39% { opacity:1; filter:brightness(1.42); }
  51% { opacity:.24; filter:brightness(.45); }
  65% { opacity:1; }
  78% { opacity:.55; }
  88% { opacity:var(--audio-tube-opacity,1); }
}
@keyframes v109TubeStrong {
  0%,100% { opacity:var(--audio-tube-opacity,1); }
  4% { opacity:0; box-shadow:none; }
  10% { opacity:1; filter:brightness(1.55); }
  16% { opacity:.01; box-shadow:none; }
  23% { opacity:1; filter:brightness(1.72); }
  31% { opacity:.03; }
  39% { opacity:1; filter:brightness(1.42); }
  48% { opacity:.08; }
  58% { opacity:1; }
  69% { opacity:.18; }
  78% { opacity:1; }
  88% { opacity:var(--audio-tube-opacity,1); }
}

@keyframes v109DarkSparkSoft {
  0%,100% { opacity:.018; filter:brightness(.18); box-shadow:none; }
  15% { opacity:.72; filter:brightness(1.12); box-shadow:0 0 18px 6px rgba(255,248,201,.38); }
  32% { opacity:.02; box-shadow:none; }
  50% { opacity:.38; filter:brightness(.78); box-shadow:0 0 9px 3px rgba(255,248,201,.20); }
  65% { opacity:.018; box-shadow:none; }
}
@keyframes v109DarkSparkMedium {
  0%,100% { opacity:.018; filter:brightness(.18); box-shadow:none; }
  7% { opacity:1; filter:brightness(1.48); box-shadow:0 0 30px 10px rgba(255,248,201,.56); }
  15% { opacity:.01; box-shadow:none; }
  25% { opacity:.82; filter:brightness(1.18); box-shadow:0 0 22px 7px rgba(255,248,201,.42); }
  35% { opacity:.018; box-shadow:none; }
  47% { opacity:1; filter:brightness(1.36); box-shadow:0 0 27px 9px rgba(255,248,201,.50); }
  60% { opacity:.03; box-shadow:none; }
  72% { opacity:.56; box-shadow:0 0 12px 4px rgba(255,248,201,.28); }
  84% { opacity:.018; box-shadow:none; }
}
@keyframes v109DarkSparkStrong {
  0%,100% { opacity:.018; filter:brightness(.18); box-shadow:none; }
  4% { opacity:1; filter:brightness(1.85); box-shadow:0 0 48px 16px rgba(255,248,201,.78); }
  10% { opacity:0; box-shadow:none; }
  17% { opacity:1; filter:brightness(1.62); box-shadow:0 0 42px 14px rgba(255,248,201,.68); }
  24% { opacity:.01; box-shadow:none; }
  32% { opacity:1; filter:brightness(1.95); box-shadow:0 0 54px 18px rgba(255,248,201,.84); }
  40% { opacity:.02; box-shadow:none; }
  49% { opacity:.92; filter:brightness(1.40); box-shadow:0 0 34px 11px rgba(255,248,201,.58); }
  59% { opacity:.01; box-shadow:none; }
  70% { opacity:.65; box-shadow:0 0 16px 5px rgba(255,248,201,.32); }
  80% { opacity:.018; box-shadow:none; }
}

/* Let blackout flashes brighten the room, but immediately fall back into darkness. */
.page-backrooms.audio-neon-off.neon-flicker-soft .audio-blackout-overlay { animation:v107BlackoutSoft .30s steps(1,end) both !important; }
.page-backrooms.audio-neon-off.neon-flicker-medium .audio-blackout-overlay { animation:v107BlackoutMedium .56s steps(1,end) both !important; }
.page-backrooms.audio-neon-off.neon-flicker-strong .audio-blackout-overlay { animation:v107BlackoutStrong .90s steps(1,end) both !important; }

/* Faster visual recovery when hum returns. */
.page-backrooms .audio-blackout-overlay {
  transition:opacity .035s linear !important;
}


/* ==========================================================
   V10.10 — SUBTLE NEON FIXTURE REFINEMENT
   Keep the physical tube visible when off, but with a very fine,
   minimal outline so it stays in the same visual language.
   ========================================================== */
.page-backrooms .fluorescent-light,
.page-backrooms .room-light {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.page-backrooms .fluorescent-light {
  height: 10px !important;
}
.page-backrooms .room-light {
  height: 12px !important;
}

/* Ultra-thin casing / contour, always visible but discreet. */
.page-backrooms .fluorescent-light::before,
.page-backrooms .room-light::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid rgba(70, 68, 56, .42);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 0 1px rgba(0,0,0,.12);
  z-index: 0;
}

.page-backrooms .room-light::before {
  height: 10px;
}

/* Small metallic end caps, still subtle. */
.page-backrooms .fluorescent-light {
  position: absolute;
}
.page-backrooms .fluorescent-light > .endcap,
.page-backrooms .room-light > .endcap {
  display:none;
}

.page-backrooms .fluorescent-light::after,
.page-backrooms .room-light::after {
  left: 5px !important;
  right: 5px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #fff9d5 !important;
  opacity: var(--audio-tube-opacity,1);
  filter: brightness(var(--audio-tube-brightness,1));
  box-shadow:
    0 0 4px 1px rgba(255,250,218,.85),
    0 0 12px 4px rgba(255,245,185,.42),
    0 0 24px 8px rgba(255,241,161,.18) !important;
}

.page-backrooms .room-light::after {
  height: 5px !important;
}

.page-backrooms.audio-neon-off .fluorescent-light::before,
.page-backrooms.audio-neon-off .room-light::before,
.page-backrooms.audio-neon-dropout .fluorescent-light::before,
.page-backrooms.audio-neon-dropout .room-light::before {
  border-color: rgba(52, 51, 43, .5) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 0 1px rgba(0,0,0,.16) !important;
}

.page-backrooms.audio-neon-off .fluorescent-light::after,
.page-backrooms.audio-neon-off .room-light::after {
  opacity: .05 !important;
  filter: brightness(.22) !important;
  background: rgba(209, 206, 187, .78) !important;
  box-shadow: 0 0 1px rgba(255,248,201,.06) !important;
}


/* ==========================================================
   V10.11 — SQUARE TUBES + BLACKOUT FLICKER VISIBILITY
   Make the fixtures more rectangular and ensure blackout flickers
   visibly re-ignite the neon source itself, not just the room glow.
   ========================================================== */
.page-backrooms .fluorescent-light,
.page-backrooms .room-light {
  border-radius: 2px !important;
}

.page-backrooms .fluorescent-light::before,
.page-backrooms .room-light::before {
  border-radius: 1px !important;
  border-color: rgba(72, 70, 58, .46) !important;
}

.page-backrooms .fluorescent-light::after,
.page-backrooms .room-light::after {
  border-radius: 1px !important;
}

/* Slightly more squared dimensions. */
.page-backrooms .fluorescent-light { height: 9px !important; }
.page-backrooms .room-light { height: 11px !important; }
.page-backrooms .fluorescent-light::before { height: 7px !important; }
.page-backrooms .room-light::before { height: 9px !important; }
.page-backrooms .fluorescent-light::after { height: 3px !important; }
.page-backrooms .room-light::after { height: 4px !important; }

/* During blackout flickers, brighten the actual fixture too so the
   user can clearly see where the returning light comes from. */
.page-backrooms.audio-neon-off.neon-flicker-soft .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-soft .room-light {
  animation: v1011FixtureSparkSoft .30s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-medium .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-medium .room-light {
  animation: v1011FixtureSparkMedium .56s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-strong .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-strong .room-light {
  animation: v1011FixtureSparkStrong .90s steps(1,end) both !important;
}

/* Make the tube flashes themselves much more obvious during the blackout. */
.page-backrooms.audio-neon-off.neon-flicker-soft .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-soft .room-light::after {
  animation: v1011DarkSparkSoft .30s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-medium .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-medium .room-light::after {
  animation: v1011DarkSparkMedium .56s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-strong .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-strong .room-light::after {
  animation: v1011DarkSparkStrong .90s steps(1,end) both !important;
}

@keyframes v1011FixtureSparkSoft {
  0%,100% { box-shadow:none; opacity:1; }
  16% { box-shadow:0 0 3px rgba(255,248,201,.18), 0 0 10px rgba(255,244,180,.12) !important; }
  32% { box-shadow:none; }
  50% { box-shadow:0 0 2px rgba(255,248,201,.12), 0 0 6px rgba(255,244,180,.08) !important; }
  68% { box-shadow:none; }
}
@keyframes v1011FixtureSparkMedium {
  0%,100% { box-shadow:none; opacity:1; }
  8% { box-shadow:0 0 6px rgba(255,248,201,.26), 0 0 18px rgba(255,244,180,.16) !important; }
  18% { box-shadow:none; }
  28% { box-shadow:0 0 5px rgba(255,248,201,.22), 0 0 14px rgba(255,244,180,.14) !important; }
  40% { box-shadow:none; }
  52% { box-shadow:0 0 7px rgba(255,248,201,.28), 0 0 20px rgba(255,244,180,.18) !important; }
  66% { box-shadow:none; }
  78% { box-shadow:0 0 4px rgba(255,248,201,.16), 0 0 10px rgba(255,244,180,.10) !important; }
}
@keyframes v1011FixtureSparkStrong {
  0%,100% { box-shadow:none; opacity:1; }
  4% { box-shadow:0 0 10px rgba(255,248,201,.34), 0 0 26px rgba(255,244,180,.24) !important; }
  10% { box-shadow:none; }
  18% { box-shadow:0 0 10px rgba(255,248,201,.34), 0 0 28px rgba(255,244,180,.26) !important; }
  26% { box-shadow:none; }
  35% { box-shadow:0 0 12px rgba(255,248,201,.40), 0 0 32px rgba(255,244,180,.28) !important; }
  44% { box-shadow:none; }
  54% { box-shadow:0 0 8px rgba(255,248,201,.28), 0 0 20px rgba(255,244,180,.18) !important; }
  64% { box-shadow:none; }
  76% { box-shadow:0 0 5px rgba(255,248,201,.18), 0 0 12px rgba(255,244,180,.12) !important; }
}

@keyframes v1011DarkSparkSoft {
  0%,100% { opacity:.05; filter:brightness(.22); box-shadow:0 0 1px rgba(255,248,201,.06); }
  16% { opacity:.88; filter:brightness(1.35); box-shadow:0 0 6px 2px rgba(255,248,201,.60), 0 0 20px 7px rgba(255,244,180,.28); }
  32% { opacity:.08; filter:brightness(.28); box-shadow:none; }
  50% { opacity:.56; filter:brightness(.96); box-shadow:0 0 4px 1px rgba(255,248,201,.34), 0 0 10px 4px rgba(255,244,180,.14); }
  68% { opacity:.05; }
}
@keyframes v1011DarkSparkMedium {
  0%,100% { opacity:.05; filter:brightness(.22); box-shadow:0 0 1px rgba(255,248,201,.06); }
  8% { opacity:1; filter:brightness(1.75); box-shadow:0 0 10px 3px rgba(255,248,201,.76), 0 0 30px 10px rgba(255,244,180,.34); }
  18% { opacity:.03; box-shadow:none; }
  28% { opacity:.9; filter:brightness(1.28); box-shadow:0 0 8px 3px rgba(255,248,201,.54), 0 0 22px 8px rgba(255,244,180,.26); }
  40% { opacity:.05; box-shadow:none; }
  52% { opacity:1; filter:brightness(1.62); box-shadow:0 0 10px 4px rgba(255,248,201,.70), 0 0 28px 10px rgba(255,244,180,.32); }
  66% { opacity:.04; box-shadow:none; }
  78% { opacity:.64; filter:brightness(1.02); box-shadow:0 0 5px 2px rgba(255,248,201,.36), 0 0 12px 4px rgba(255,244,180,.16); }
}
@keyframes v1011DarkSparkStrong {
  0%,100% { opacity:.05; filter:brightness(.22); box-shadow:0 0 1px rgba(255,248,201,.06); }
  4% { opacity:1; filter:brightness(2.0); box-shadow:0 0 14px 5px rgba(255,248,201,.92), 0 0 40px 14px rgba(255,244,180,.40); }
  10% { opacity:.02; box-shadow:none; }
  18% { opacity:1; filter:brightness(1.84); box-shadow:0 0 13px 5px rgba(255,248,201,.84), 0 0 36px 12px rgba(255,244,180,.36); }
  26% { opacity:.03; box-shadow:none; }
  35% { opacity:1; filter:brightness(2.08); box-shadow:0 0 16px 6px rgba(255,248,201,.98), 0 0 46px 16px rgba(255,244,180,.46); }
  44% { opacity:.03; box-shadow:none; }
  54% { opacity:.94; filter:brightness(1.48); box-shadow:0 0 10px 4px rgba(255,248,201,.70), 0 0 24px 8px rgba(255,244,180,.28); }
  64% { opacity:.03; box-shadow:none; }
  76% { opacity:.70; filter:brightness(1.10); box-shadow:0 0 6px 2px rgba(255,248,201,.40), 0 0 14px 5px rgba(255,244,180,.18); }
}


/* ==========================================================
   V10.12 — BLACKOUT TUBE FLICKER FIX
   During blackout flickers, the tube itself must visibly relight.
   We force the luminous strip back on during the flicker window and
   drive the blink on the whole lamp so the source is obvious.
   ========================================================== */

/* Slightly squarer overall shape. */
.page-backrooms .fluorescent-light,
.page-backrooms .room-light,
.page-backrooms .fluorescent-light::before,
.page-backrooms .room-light::before,
.page-backrooms .fluorescent-light::after,
.page-backrooms .room-light::after {
  border-radius: 1px !important;
}

/* In blackout + flicker state, force the tube back on visibly. */
.page-backrooms.audio-neon-off.neon-flicker-soft .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-soft .room-light::after,
.page-backrooms.audio-neon-off.neon-flicker-medium .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-medium .room-light::after,
.page-backrooms.audio-neon-off.neon-flicker-strong .fluorescent-light::after,
.page-backrooms.audio-neon-off.neon-flicker-strong .room-light::after {
  opacity: .92 !important;
  filter: brightness(1.5) !important;
  background: #fffbe2 !important;
  box-shadow:
    0 0 7px 2px rgba(255,250,218,.88),
    0 0 20px 7px rgba(255,245,185,.44),
    0 0 34px 12px rgba(255,241,161,.22) !important;
}

.page-backrooms.audio-neon-off.neon-flicker-soft .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-soft .room-light {
  animation: v1012LampBlinkSoft .30s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-medium .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-medium .room-light {
  animation: v1012LampBlinkMedium .56s steps(1,end) both !important;
}
.page-backrooms.audio-neon-off.neon-flicker-strong .fluorescent-light,
.page-backrooms.audio-neon-off.neon-flicker-strong .room-light {
  animation: v1012LampBlinkStrong .90s steps(1,end) both !important;
}

@keyframes v1012LampBlinkSoft {
  0%,100% { opacity:.18; box-shadow:none; }
  14% { opacity:1; box-shadow:0 0 8px rgba(255,248,201,.18), 0 0 22px rgba(255,244,180,.16); }
  30% { opacity:.22; box-shadow:none; }
  48% { opacity:.72; box-shadow:0 0 5px rgba(255,248,201,.12), 0 0 12px rgba(255,244,180,.09); }
  64% { opacity:.18; box-shadow:none; }
}
@keyframes v1012LampBlinkMedium {
  0%,100% { opacity:.16; box-shadow:none; }
  8% { opacity:1; box-shadow:0 0 11px rgba(255,248,201,.28), 0 0 30px rgba(255,244,180,.22); }
  18% { opacity:.12; box-shadow:none; }
  28% { opacity:.88; box-shadow:0 0 9px rgba(255,248,201,.22), 0 0 24px rgba(255,244,180,.18); }
  40% { opacity:.16; box-shadow:none; }
  52% { opacity:1; box-shadow:0 0 12px rgba(255,248,201,.30), 0 0 32px rgba(255,244,180,.24); }
  64% { opacity:.12; box-shadow:none; }
  78% { opacity:.58; box-shadow:0 0 6px rgba(255,248,201,.15), 0 0 16px rgba(255,244,180,.11); }
}
@keyframes v1012LampBlinkStrong {
  0%,100% { opacity:.14; box-shadow:none; }
  4% { opacity:1; box-shadow:0 0 14px rgba(255,248,201,.34), 0 0 36px rgba(255,244,180,.28); }
  10% { opacity:.10; box-shadow:none; }
  18% { opacity:1; box-shadow:0 0 14px rgba(255,248,201,.34), 0 0 38px rgba(255,244,180,.30); }
  26% { opacity:.10; box-shadow:none; }
  35% { opacity:1; box-shadow:0 0 16px rgba(255,248,201,.40), 0 0 44px rgba(255,244,180,.34); }
  44% { opacity:.10; box-shadow:none; }
  54% { opacity:.84; box-shadow:0 0 10px rgba(255,248,201,.24), 0 0 24px rgba(255,244,180,.18); }
  64% { opacity:.10; box-shadow:none; }
  76% { opacity:.58; box-shadow:0 0 7px rgba(255,248,201,.16), 0 0 16px rgba(255,244,180,.12); }
}


/* ==========================================================
   V10.13 — RESPONSIVE LARGE-SCREEN SCALING
   Preserve the visual proportions seen around 1920px wide while
   allowing 2K / wider displays to grow instead of leaving fixed-px
   elements visually tiny. Audio / blackout logic is untouched.
   ========================================================== */

/* Standalone Backrooms ceiling tubes scale with viewport width,
   but never shrink below the current 1080p design. */
.page-backrooms .light-one {
  width: clamp(220px, 11.46vw, 300px) !important;
  top: clamp(140px, 7.30vw, 190px) !important;
}
.page-backrooms .light-two {
  width: clamp(150px, 7.82vw, 205px) !important;
  top: clamp(420px, 21.88vw, 560px) !important;
}

/* The tube inside the hero room follows the same ratio. */
.page-backrooms .room-light {
  width: clamp(180px, 9.38vw, 240px) !important;
  top: clamp(42px, 2.19vw, 56px) !important;
}

/* Wide desktops: expand the actual layout too. At 1920px these values
   stay practically identical to V10.12; at 2560px they grow ~25%. */
@media (min-width: 1800px) {
  .home-intro,
  .project-grid {
    max-width: clamp(1180px, 61.46vw, 1480px) !important;
  }

  .br-hero {
    max-width: clamp(1280px, 66.67vw, 1600px) !important;
    gap: clamp(50px, 2.60vw, 68px) !important;
    padding-top: clamp(100px, 5.21vw, 130px) !important;
    padding-bottom: clamp(80px, 4.17vw, 105px) !important;
  }

  .content-section {
    max-width: clamp(1180px, 61.46vw, 1480px) !important;
  }

  .content-section.narrow {
    max-width: clamp(900px, 46.88vw, 1125px) !important;
  }

  .liminal-room {
    height: clamp(520px, 27.08vw, 650px) !important;
  }

  /* Keep the physical fixture thickness visually consistent on denser,
     larger desktop canvases without making it cartoonishly thick. */
  .page-backrooms .fluorescent-light {
    height: clamp(9px, .47vw, 12px) !important;
  }
  .page-backrooms .room-light {
    height: clamp(11px, .57vw, 14px) !important;
  }
  .page-backrooms .fluorescent-light::before {
    height: clamp(7px, .365vw, 9px) !important;
  }
  .page-backrooms .room-light::before {
    height: clamp(9px, .47vw, 12px) !important;
  }
  .page-backrooms .fluorescent-light::after {
    height: clamp(3px, .156vw, 4px) !important;
  }
  .page-backrooms .room-light::after {
    height: clamp(4px, .208vw, 5px) !important;
  }
}

/* Tablets and compact screens keep the established V10.12 proportions. */
@media (max-width: 1100px) {
  .page-backrooms .light-one { width: 220px !important; top: 140px !important; }
  .page-backrooms .light-two { width: 150px !important; top: 420px !important; }
  .page-backrooms .room-light { width: 180px !important; top: 42px !important; }
}


/* ==========================================================
   V10.15 — MX5 EXPERIENCE PHOTO PASS
   Built on V10.13. Backrooms/audio/lighting intentionally untouched.
   ========================================================== */

/* Home card: real MX-5 texture with strong overlay for readability */
.card-mx5 {
  background:
    linear-gradient(155deg, rgba(8,9,11,.18), rgba(8,9,11,.82) 62%, rgba(62,18,13,.94)),
    url("https://upload.wikimedia.org/wikipedia/commons/f/f6/1991_Mazda_MX-5_Miata_in_Classic_Red%2C_Front_Right%2C_05-29-2022.jpg") center 48% / cover no-repeat !important;
}
.card-mx5:before {
  background:linear-gradient(90deg,rgba(6,7,8,.18),transparent 58%),radial-gradient(circle at 70% 25%,rgba(255,94,55,.16),transparent 32%) !important;
}

.page-mx5 { background:#08090b; }
.mx5-horizon-glow { opacity:.72; }
.mx5-grid-lines { opacity:.48; }

/* HERO PHOTO */
.mx5-hero { gap:clamp(34px,4vw,70px); }
.mx5-hero-visual { min-width:0; }
.mx5-photo-hero {
  position:relative;
  margin:0;
  height:clamp(500px,68vh,760px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#111316;
  box-shadow:0 35px 90px rgba(0,0,0,.42);
}
.mx5-photo-hero:before {
  content:""; position:absolute; inset:16px; z-index:4; pointer-events:none;
  border:1px solid rgba(255,255,255,.08);
}
.mx5-photo-hero img { width:100%; height:100%; object-fit:cover; object-position:52% 50%; display:block; filter:saturate(.90) contrast(1.04) brightness(.76); transform:scale(1.015); }
.mx5-photo-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 38%,rgba(5,6,7,.84) 100%),linear-gradient(90deg,transparent 56%,rgba(89,24,17,.18)); }
.mx5-photo-hero figcaption { position:absolute; left:34px; bottom:30px; z-index:5; display:grid; gap:5px; }
.mx5-photo-hero figcaption span { color:#df5b45; font:900 9px monospace; letter-spacing:.20em; }
.mx5-photo-hero figcaption strong { font-size:clamp(28px,3.5vw,48px); letter-spacing:-.035em; }
.mx5-photo-hero figcaption small { color:#a7aaac; font-size:8px; letter-spacing:.17em; }
.mx5-photo-badge { position:absolute; right:32px; top:28px; z-index:5; color:rgba(255,255,255,.58); font:900 11px monospace; border:1px solid rgba(255,255,255,.14); padding:9px 11px; }

/* IMAGE CARDS */
.mx5-feature-grid-photos .mx5-feature-card { padding:0; min-height:470px; display:flex; flex-direction:column; overflow:hidden; background:#0f1113; }
.mx5-feature-photo { height:245px; overflow:hidden; position:relative; background:#151719; }
.mx5-feature-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(10,11,12,.80)); }
.mx5-feature-photo img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82) contrast(1.04) brightness(.82); transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease; }
.mx5-feature-photo-card:hover .mx5-feature-photo img { transform:scale(1.045); filter:saturate(1) contrast(1.04) brightness(.9); }
.mx5-feature-body { padding:26px 28px 30px; }
.mx5-feature-body small { color:#c74a37; font-size:8px; letter-spacing:.18em; font-weight:900; }
.mx5-feature-body h3 { font-size:28px; margin:10px 0 10px; }
.mx5-feature-body p { margin:0; color:#969a9c; line-height:1.7; font-size:13px; }

/* ROADSTER PHOTO */
.mx5-spec-photo { min-height:600px; display:block; }
.mx5-spec-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:54% 50%; filter:saturate(.82) contrast(1.07) brightness(.72); }
.mx5-spec-photo-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 46%,rgba(6,7,8,.88)),linear-gradient(90deg,rgba(114,30,21,.12),transparent 60%); }
.mx5-spec-photo:before { z-index:2; opacity:.4; }
.mx5-spec-photo .mx5-spec-caption { z-index:3; left:28px; bottom:28px; display:grid; gap:7px; }
.mx5-spec-photo .mx5-spec-caption span { color:#c84937; font:800 9px monospace; letter-spacing:.18em; }
.mx5-spec-photo .mx5-spec-caption strong { color:#f4f1eb; font-size:24px; letter-spacing:.04em; }

/* ROADBOOK: Gileppe photo behind the route map */
.mx5-route-map { min-height:620px; background:#0c0e10; }
.mx5-route-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.60) contrast(1.08) brightness(.44); }
.mx5-route-photo-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,10,11,.48),rgba(8,10,11,.18)),linear-gradient(180deg,rgba(8,10,11,.12),rgba(8,10,11,.70)); }
.mx5-route-map .route-map-grid { opacity:.38; mix-blend-mode:screen; }
.mx5-route-map svg { z-index:3; }
.mx5-route-map .route-label { z-index:4; text-shadow:0 2px 12px rgba(0,0,0,.9); }

/* PHOTO GALLERY */
.mx5-gallery-section { padding-top:120px; padding-bottom:130px; }
.mx5-gallery-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:end; margin-bottom:42px; }
.mx5-gallery-heading h2 { margin:8px 0 0; font-size:clamp(48px,6vw,88px); line-height:.9; letter-spacing:-.045em; }
.mx5-gallery-heading h2 span { color:#777b7e; }
.mx5-gallery-heading > p { color:#888d90; max-width:500px; line-height:1.8; font-size:13px; }
.mx5-gallery-grid { display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:repeat(3,230px); gap:12px; }
.mx5-gallery-grid figure { margin:0; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.07); background:#111; }
.mx5-gallery-grid figure.mx5-gallery-main { grid-row:1 / span 3; }
.mx5-gallery-grid img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.80) contrast(1.06) brightness(.75); transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .35s ease; }
.mx5-gallery-grid figure:hover img { transform:scale(1.035); filter:saturate(1) contrast(1.04) brightness(.88); }
.mx5-gallery-grid figure:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.76)); pointer-events:none; }
.mx5-gallery-grid figcaption { position:absolute; left:20px; bottom:18px; z-index:2; display:flex; gap:12px; align-items:center; }
.mx5-gallery-grid figcaption span { color:#d44d39; font:900 9px monospace; }
.mx5-gallery-grid figcaption strong { font-size:11px; letter-spacing:.12em; }
.mx5-photo-credits { margin:22px 0 0; color:#5e6264; font-size:9px; line-height:1.7; letter-spacing:.04em; }

@media (max-width:960px) {
  .mx5-photo-hero { height:520px; }
  .mx5-gallery-heading { grid-template-columns:1fr; gap:15px; }
  .mx5-gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:420px 220px 220px; }
  .mx5-gallery-grid figure.mx5-gallery-main { grid-column:1 / span 2; grid-row:auto; }
  .mx5-spec-photo { min-height:520px; }
}
@media (max-width:560px) {
  .mx5-photo-hero { height:440px; }
  .mx5-photo-hero figcaption { left:20px; bottom:20px; }
  .mx5-photo-badge { right:20px; top:20px; }
  .mx5-feature-grid-photos .mx5-feature-card { min-height:0; }
  .mx5-feature-photo { height:210px; }
  .mx5-gallery-grid { display:grid; grid-template-columns:1fr; grid-template-rows:none; }
  .mx5-gallery-grid figure,.mx5-gallery-grid figure.mx5-gallery-main { grid-column:auto; grid-row:auto; height:260px; }
  .mx5-gallery-grid figure.mx5-gallery-main { height:360px; }
  .mx5-spec-photo { min-height:420px; }
}


/* ==========================================================
   V10.16 — MX5 EXPERIENCE / LEGACY SITE INTEGRATION
   Original site's identity, adapted as an embedded mini-site.
   ========================================================== */
.page-mx5.mx5-legacy {
  --mx-bg:#21171b;
  --mx-bg-deep:#170f13;
  --mx-panel:#302126;
  --mx-panel-2:#39262d;
  --mx-border:#64414b;
  --mx-text:#fff9fa;
  --mx-soft:#eadde1;
  --mx-muted:#c7aab3;
  --mx-red:#c91831;
  --mx-red-hot:#ef2946;
  --mx-red-dark:#86101f;
  position:relative;
  overflow:visible;
  background:
    radial-gradient(circle at 12% 4%, rgba(201,24,49,.25), transparent 26%),
    radial-gradient(circle at 88% 25%, rgba(130,20,38,.20), transparent 30%),
    linear-gradient(180deg,#35151d 0,#25191e 22%,#21171b 68%,#180f13 100%);
  color:var(--mx-text);
}
.page-mx5 .mx5-legacy-ambient { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(black,transparent 82%); }
.mx5-legacy-brand-strip { position:relative; z-index:5; padding:18px 24px 13px; border-bottom:1px solid rgba(239,41,70,.28); background:linear-gradient(90deg,rgba(97,17,31,.76),rgba(46,24,30,.90),rgba(97,17,31,.68)); }
.mx5-legacy-brand-shell { max-width:1240px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.mx5-site-brand { display:flex; align-items:center; gap:15px; border:0; background:none; color:white; padding:0; cursor:pointer; text-align:left; }
.mx5-site-brand img { width:90px; height:auto; display:block; filter:drop-shadow(0 8px 18px rgba(0,0,0,.22)); }
.mx5-site-brand span { display:grid; gap:3px; }
.mx5-site-brand strong { font-size:17px; letter-spacing:.01em; }
.mx5-site-brand small { color:var(--mx-muted); font-size:12px; }
.mx5-hub-link { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); color:#fff; padding:10px 13px; cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.13em; }
.mx5-hub-link:hover { border-color:rgba(239,41,70,.55); background:rgba(201,24,49,.13); }
.mx5-legacy-nav-wrap { position:sticky; top:70px; z-index:40; padding:9px 20px; background:rgba(42,23,29,.91); border-bottom:1px solid var(--mx-border); backdrop-filter:blur(14px); }
.mx5-legacy-nav { max-width:1240px; margin:auto; display:flex; gap:8px; flex-wrap:wrap; }
.mx5-legacy-nav button { border:1px solid transparent; border-radius:9px; background:transparent; color:#f4e9ec; padding:9px 14px; cursor:pointer; font-weight:700; font-size:13px; transition:.2s ease; }
.mx5-legacy-nav button:hover { background:rgba(201,24,49,.12); border-color:rgba(239,41,70,.24); }
.mx5-legacy-nav button.active { background:linear-gradient(135deg,rgba(201,24,49,.30),rgba(134,16,31,.42)); border-color:rgba(239,41,70,.48); box-shadow:0 8px 20px rgba(177,18,38,.14); }
.mx5-legacy-content { position:relative; z-index:2; }
.mx5-legacy-view { display:none; animation:mxLegacyEnter .34s ease both; }
.mx5-legacy-view.active { display:block; }
@keyframes mxLegacyEnter { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* Original-site layout, scoped inside MX5 only */
.mx5-legacy-view > section { max-width:1120px; margin:auto; padding:46px 20px; }
.mx5-legacy-view .grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.mx5-legacy-view .card { background:linear-gradient(145deg,rgba(58,39,46,.97),rgba(43,29,35,.97)); border:1px solid var(--mx-border); border-radius:16px; padding:25px; margin-bottom:20px; box-shadow:0 14px 34px rgba(14,5,8,.24); }
.mx5-legacy-view .card:hover { border-color:rgba(239,41,70,.35); }
.mx5-legacy-view h1,.mx5-legacy-view h2,.mx5-legacy-view h3 { color:var(--mx-text); }
.mx5-legacy-view h2::after,.mx5-legacy-view h3::after { content:""; display:block; width:64px; height:3px; margin-top:10px; border-radius:99px; background:linear-gradient(90deg,var(--mx-red-hot),rgba(201,24,49,.08)); }
.mx5-legacy-view p { color:var(--mx-soft); line-height:1.68; }
.mx5-legacy-view strong { color:#fff; }
.mx5-legacy-view .cta,.mx5-legacy-view .cta-button { display:inline-block; margin-top:20px; padding:13px 20px; border:0; border-radius:9px; background:linear-gradient(135deg,var(--mx-red-hot),var(--mx-red-dark)); color:#fff; text-decoration:none; font-weight:800; cursor:pointer; box-shadow:0 11px 26px rgba(201,24,49,.25); transition:.2s ease; }
.mx5-legacy-view .cta:hover,.mx5-legacy-view .cta-button:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(201,24,49,.34); }

.mx5-legacy-view header.hero { min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:70px 24px; background-image:linear-gradient(rgba(28,7,12,.13),rgba(42,8,16,.42)),url('../assets/mx5/hero.jpg') !important; background-size:cover; background-position:center; }
.mx5-legacy-view .hero-content { max-width:860px; padding:30px 34px; border-radius:18px; background:linear-gradient(135deg,rgba(34,12,18,.30),rgba(26,12,17,.14)); backdrop-filter:blur(2px); box-shadow:0 20px 65px rgba(0,0,0,.15); }
.mx5-legacy-view header.hero h1 { margin:0 0 14px; font-size:clamp(42px,6vw,78px); text-shadow:0 3px 22px rgba(0,0,0,.55); }
.mx5-legacy-view header.hero p { max-width:760px; margin:auto; color:#fff4f6; font-size:18px; text-shadow:0 2px 14px rgba(0,0,0,.52); }
.mx5-legacy-view .page-banner { min-height:42vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:44px 20px; background-size:cover !important; background-position:center !important; }
.mx5-legacy-view .banner-overlay { padding:26px 34px; border-radius:14px; background:rgba(42,13,20,.44); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(4px); box-shadow:0 15px 45px rgba(0,0,0,.20); }
.mx5-legacy-view .page-banner h1 { margin:0; font-size:clamp(38px,5vw,64px); }

/* The old photos are allowed to breathe: no heavy black wash. */
.mx5-legacy-view .vehicle-tile { min-height:360px; display:flex; align-items:flex-end; overflow:hidden; border:1px solid var(--mx-border); border-radius:18px; background-size:cover !important; background-position:center !important; box-shadow:0 15px 36px rgba(0,0,0,.20); transition:.25s ease; }
.mx5-legacy-view .vehicle-tile:hover { transform:translateY(-5px); border-color:rgba(239,41,70,.52); box-shadow:0 20px 46px rgba(0,0,0,.27); }
.mx5-legacy-view .vehicle-tile-link { display:block; color:inherit; text-decoration:none; }
.mx5-legacy-view .vehicle-tile-content { width:100%; padding:28px; background:linear-gradient(to top,rgba(25,7,12,.78),rgba(25,7,12,.10) 76%,transparent); }
.mx5-legacy-view .vehicle-tile-content p,.mx5-legacy-view .vehicle-tile-content h2 { color:#fff; }
.mx5-legacy-view .vehicle-hero { min-height:54vh; display:flex; align-items:flex-end; background-size:cover !important; background-position:center !important; border-radius:18px; overflow:hidden; border:1px solid var(--mx-border); box-shadow:0 15px 36px rgba(0,0,0,.22); }
.mx5-legacy-view .vehicle-hero-content { width:100%; padding:30px; background:linear-gradient(to top,rgba(28,7,13,.70),rgba(28,7,13,.08)); }
.mx5-legacy-view .vehicle-gallery { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.mx5-legacy-view .vehicle-gallery img { width:100%; height:280px; object-fit:cover; border-radius:16px; border:1px solid var(--mx-border); box-shadow:0 12px 28px rgba(0,0,0,.18); background:#29191f; }

.mx5-photo-strip-section { padding-top:10px !important; }
.mx5-photo-strip { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:16px; }
.mx5-photo-strip figure { margin:0; position:relative; min-height:260px; overflow:hidden; border-radius:16px; border:1px solid var(--mx-border); }
.mx5-photo-strip img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.mx5-photo-strip figcaption { position:absolute; left:14px; bottom:12px; background:rgba(42,12,19,.74); color:#fff; padding:7px 10px; border-radius:7px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.mx5-legacy-view .faq-section { display:flex; flex-direction:column; gap:16px; }
.mx5-legacy-view .faq-category { background:linear-gradient(145deg,rgba(58,39,46,.97),rgba(43,29,35,.97)); border:1px solid var(--mx-border); border-radius:16px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.16); }
.mx5-legacy-view .faq-category summary { list-style:none; cursor:pointer; padding:20px 22px; font-weight:800; color:#fff; background:linear-gradient(135deg,rgba(201,24,49,.20),rgba(134,16,31,.24)); }
.mx5-legacy-view .faq-category summary::-webkit-details-marker{display:none}.mx5-legacy-view .faq-category summary::after{content:'+';float:right}.mx5-legacy-view .faq-category[open] summary::after{content:'−'}
.mx5-legacy-view .faq-category-content { padding:0 22px 22px; }
.mx5-legacy-view .faq-item { padding:20px 0; border-bottom:1px solid rgba(255,255,255,.07); }.mx5-legacy-view .faq-item:last-child{border-bottom:0}
.mx5-legacy-view form label { color:#fff; font-weight:700; }
.mx5-legacy-view input,.mx5-legacy-view select,.mx5-legacy-view textarea { width:100%; padding:12px 14px; border-radius:9px; border:1px solid var(--mx-border); background:rgba(255,255,255,.055); color:#fff; font-size:15px; outline:none; }
.mx5-legacy-view input:focus,.mx5-legacy-view select:focus,.mx5-legacy-view textarea:focus { border-color:rgba(239,41,70,.80); box-shadow:0 0 0 3px rgba(201,24,49,.15); }
.mx5-legacy-view select option { background:#35232a; }
.mx5-legacy-view textarea { resize:vertical; min-height:130px; }
.mx5-legacy-footer { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:12px; padding:28px 20px 40px; color:var(--mx-muted); border-top:1px solid var(--mx-border); background:linear-gradient(90deg,rgba(201,24,49,.08),rgba(20,12,15,.22),rgba(201,24,49,.08)); }
.mx5-legacy-footer img { width:48px; opacity:.8; }.mx5-legacy-footer p{margin:0}

/* Home card also uses the actual old-site hero photograph. */
.card-mx5 { background-image:linear-gradient(145deg,rgba(34,10,16,.16),rgba(49,8,17,.52)),url('../assets/mx5/hero.jpg') !important; background-size:cover !important; background-position:center 62% !important; }
.card-mx5 .card-content p { color:#fff0f3 !important; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.card-mx5 .card-content h2,.card-mx5 .project-link,.card-mx5 .card-kicker,.card-mx5 .card-number { text-shadow:0 2px 14px rgba(0,0,0,.58); }

@media(max-width:800px){
  .mx5-legacy-brand-shell{align-items:flex-start}.mx5-hub-link{margin-top:5px}.mx5-site-brand img{width:70px}.mx5-legacy-nav-wrap{top:62px;overflow-x:auto}.mx5-legacy-nav{flex-wrap:nowrap;width:max-content}.mx5-legacy-view header.hero{min-height:58vh}.mx5-photo-strip{grid-template-columns:1fr}.mx5-photo-strip figure{min-height:230px}.mx5-legacy-view .vehicle-gallery img{height:230px}
}
@media(max-width:520px){
  .mx5-legacy-brand-strip{padding:13px 14px 9px}.mx5-site-brand strong{font-size:14px}.mx5-site-brand small{font-size:10px}.mx5-hub-link{font-size:8px;padding:8px}.mx5-legacy-view>section{padding:36px 15px}.mx5-legacy-view .card{padding:20px}.mx5-legacy-view header.hero h1{font-size:42px}.mx5-legacy-view header.hero p{font-size:15px}
}

/* Photo overlays intentionally lighter than the old standalone site. */
[data-mx5-view-panel="concept"] .page-banner {
  background-image:linear-gradient(rgba(38,8,15,.14),rgba(46,10,18,.34)),url('../assets/mx5/hero.jpg') !important;
}
[data-mx5-view-panel="vehicles"] .page-banner {
  background-image:linear-gradient(rgba(38,8,15,.10),rgba(46,10,18,.30)),url('../assets/mx5/vehicule.jpg') !important;
}
[data-mx5-view-panel="vehicles"] .vehicle-tile-link:nth-child(1) .vehicle-tile {
  background-image:linear-gradient(rgba(31,8,15,.10),rgba(31,8,15,.42)),url('../assets/mx5/violette.jpg') !important;
}
[data-mx5-view-panel="vehicles"] .vehicle-tile-link:nth-child(2) .vehicle-tile {
  background-image:linear-gradient(rgba(31,8,15,.08),rgba(31,8,15,.40)),url('../assets/mx5/rouge.jpg') !important;
}
[data-mx5-view-panel="red"] .vehicle-hero {
  background-image:linear-gradient(rgba(30,7,13,.05),rgba(35,7,14,.35)),url('../assets/mx5/rouge-1.jpg') !important;
}
[data-mx5-view-panel="purple"] .vehicle-hero {
  background-image:linear-gradient(rgba(30,7,13,.05),rgba(35,7,14,.35)),url('../assets/mx5/violette-1.jpg') !important;
}


/* ==========================================================
   V10.17 — CONVERTISSEURLOCAL REAL UI INTEGRATION
   Palette and component language derived from the actual V4.100 project.
   ========================================================== */
.page-software {
  background:
    radial-gradient(circle at 50% -10%, #263754 0%, #111722 42%, #080b11 100%) !important;
  color:#f4f6fb !important;
}
.software-real-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.software-real-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(117,157,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(117,157,255,.025) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 86%);
}
.software-real-glow { position:absolute; border-radius:50%; filter:blur(90px); opacity:.18; }
.software-real-glow.glow-a { width:560px; height:560px; background:#648dff; top:2%; right:-140px; }
.software-real-glow.glow-b { width:460px; height:460px; background:#8c6eff; top:38%; left:-180px; opacity:.10; }
.software-real-nav {
  background:rgba(14,20,30,.88) !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
  color:#b9ccff !important;
  backdrop-filter:blur(18px);
}
.software-real-nav a { color:#9faabc !important; }
.software-real-nav a:hover { color:#f4f6fb !important; }
.software-real-hero { grid-template-columns:.76fr 1.24fr !important; max-width:1450px !important; }
.software-kicker,.software-section-index { color:#8daaff !important; }
.software-hero-copy h1 span { color:#759dff !important; text-shadow:0 0 38px rgba(117,157,255,.20) !important; }
.software-lead { color:#aeb8c8 !important; }
.software-primary-btn {
  background:linear-gradient(135deg,#648dff,#8c6eff) !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 14px 38px rgba(77,104,190,.24) !important;
  border-radius:11px;
}
.software-primary-btn:hover { filter:brightness(1.08); box-shadow:0 18px 46px rgba(77,104,190,.34) !important; }
.software-status-pill { color:#9faabc !important; }
.software-status-pill i { background:#54d794 !important; box-shadow:0 0 12px rgba(84,215,148,.54) !important; }
.software-real-format-strip span {
  border-color:rgba(117,157,255,.20) !important;
  background:rgba(69,89,130,.14);
  color:#b9ccff !important;
  border-radius:8px;
}
.software-real-preview {
  min-width:0; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:#141b27;
  box-shadow:0 34px 100px rgba(0,0,0,.42),0 0 70px rgba(100,141,255,.08);
  transform:perspective(1300px) rotateY(-1.5deg) rotateX(.7deg);
}
.software-preview-topbar {
  min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 16px; background:#101722; border-bottom:1px solid rgba(255,255,255,.08);
  color:#7f8ca1; font:800 9px monospace; letter-spacing:.10em;
}
.software-preview-topbar div { display:flex; align-items:center; gap:7px; }
.software-preview-topbar i { width:7px; height:7px; border-radius:50%; background:#44516a; }
.software-preview-topbar i:first-child { background:#648dff; box-shadow:0 0 10px rgba(100,141,255,.55); }
.software-preview-topbar b { margin-left:8px; color:#c6d3eb; font-weight:800; }
.software-real-preview img { width:100%; display:block; aspect-ratio:1500/940; object-fit:cover; object-position:center; }
.software-preview-caption {
  min-height:54px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  border-top:1px solid rgba(255,255,255,.07); color:#8996a9; font:700 9px monospace; letter-spacing:.08em;
}
.software-preview-caption b { color:#b9c7dd; font-weight:700; text-align:right; }
.software-section { border-top-color:rgba(255,255,255,.07) !important; }
.software-section-heading h2 span,.software-data-copy h2 span,.software-engine-copy h2 span { color:#65728a !important; }
.software-section-heading > p,.software-data-copy > p,.software-engine-copy > p { color:#9faabc !important; }
.software-ui-detail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.software-ui-detail {
  min-height:240px; position:relative; padding:24px;
  border:1px solid rgba(255,255,255,.09); border-radius:17px;
  background:rgba(20,27,39,.86); box-shadow:0 18px 48px rgba(0,0,0,.16);
}
.software-ui-detail > span { display:inline-grid; place-items:center; width:35px; height:35px; border-radius:50%; background:linear-gradient(135deg,#648dff,#8c6eff); font:900 11px monospace; }
.software-ui-detail h3 { margin:42px 0 10px; font-size:25px; }
.software-ui-detail p { color:#9faabc; font-size:14px; line-height:1.7; }
.software-platform-heading { margin-bottom:35px !important; }
.software-platform-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.software-platform-card {
  min-height:220px; padding:22px; border:1px solid rgba(255,255,255,.09); border-radius:17px;
  background:rgba(10,15,23,.66); display:flex; flex-direction:column; justify-content:space-between; gap:25px;
  transition:.25s ease;
}
.software-platform-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.20); }
.software-platform-card img { width:45px; height:45px; object-fit:contain; }
.software-platform-card small { color:#7f8da4; font:800 8px monospace; letter-spacing:.12em; }
.software-platform-card h3 { margin:7px 0 6px; font-size:24px; }
.software-platform-card p { margin:0; color:#98a4b5; font-size:13px; line-height:1.5; }
.software-platform-card.youtube { box-shadow:inset 0 3px 0 rgba(255,0,0,.80); }
.software-platform-card.tiktok { box-shadow:inset 0 3px 0 rgba(37,244,238,.72); }
.software-platform-card.instagram { box-shadow:inset 0 3px 0 rgba(225,48,108,.78); }
.software-platform-card.facebook { box-shadow:inset 0 3px 0 rgba(24,119,242,.82); }
.software-platform-card.other { box-shadow:inset 0 3px 0 rgba(140,110,255,.82); }
.software-other-icon { width:45px; height:45px; display:grid; grid-template-columns:repeat(2,12px); grid-auto-rows:12px; gap:5px; place-content:center; border:1px solid #8c6eff; border-radius:11px; background:rgba(140,110,255,.10); }
.software-other-icon i { border:2px solid #cbbfff; border-radius:2px; }
.software-real-features { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
.software-real-output-panel { border:1px solid rgba(255,255,255,.09); border-radius:18px; overflow:hidden; background:rgba(20,27,39,.84); }
.software-real-output-head { height:52px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); color:#8d9ab0; font:800 9px monospace; letter-spacing:.11em; }
.software-real-output-head b { color:#b9ccff; }
.software-output-groups { padding:18px; display:grid; gap:13px; }
.software-output-group { display:grid; grid-template-columns:100px repeat(6,1fr); gap:7px; align-items:center; }
.software-output-group small { color:#718097; font:900 8px monospace; letter-spacing:.12em; }
.software-output-group span { min-height:42px; display:grid; place-items:center; border:1px solid #344158; border-radius:10px; background:#0f1520; color:#dce5f4; font:800 10px monospace; }
.software-output-group:nth-child(2),.software-output-group:nth-child(3) { grid-template-columns:100px repeat(3,1fr); }
.software-real-badges span { border-color:rgba(117,157,255,.18) !important; color:#91a1ba !important; background:rgba(59,75,108,.10); border-radius:7px; }
.software-real-terminal { background:#090d14 !important; border-color:rgba(117,157,255,.16) !important; border-radius:16px; overflow:hidden; }
.software-real-terminal .software-terminal-card-bar { border-color:rgba(117,157,255,.12) !important; color:#718097 !important; }
.software-real-terminal .software-terminal-card-bar b { color:#9ab4ff !important; }
.software-real-terminal pre { color:#75859d !important; }
.software-real-terminal pre span { color:#789cff !important; }
.software-real-terminal .terminal-success { color:#76e0aa !important; }
.software-return-button { border-radius:11px !important; border-color:rgba(117,157,255,.25) !important; color:#b9ccff !important; }
.software-return-button:hover { background:#648dff !important; color:#fff !important; }

/* Home card now hints at the real software instead of pure Tron cyan. */
.card-software {
  background:
    linear-gradient(90deg,rgba(8,11,17,.96) 0%,rgba(11,16,27,.86) 48%,rgba(18,26,42,.46) 100%),
    url('../assets/software/convertisseurlocal-ui.png') right center / 58% auto no-repeat !important;
}
.card-software:before {
  background-image:linear-gradient(rgba(117,157,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(117,157,255,.045) 1px,transparent 1px) !important;
  background-size:32px 32px !important;
}
.card-software .terminal-lines { color:#8daaff !important; }

@media (max-width:1100px) {
  .software-ui-detail-grid { grid-template-columns:repeat(2,1fr); }
  .software-platform-grid { grid-template-columns:repeat(2,1fr); }
  .software-platform-card:last-child { grid-column:1/-1; }
  .software-real-features { grid-template-columns:1fr; }
  .software-output-group { grid-template-columns:90px repeat(3,1fr); }
}
@media (max-width:960px) {
  .software-real-hero { grid-template-columns:1fr !important; }
  .software-real-preview { order:-1; transform:none; }
}
@media (max-width:620px) {
  .software-ui-detail-grid,.software-platform-grid { grid-template-columns:1fr; }
  .software-platform-card:last-child { grid-column:auto; }
  .software-preview-caption { align-items:flex-start; flex-direction:column; justify-content:center; padding-top:11px; padding-bottom:11px; }
  .software-preview-caption b { text-align:left; }
  .software-output-group,.software-output-group:nth-child(2),.software-output-group:nth-child(3) { grid-template-columns:repeat(2,1fr); }
  .software-output-group small { grid-column:1/-1; }
}


/* ==========================================================
   V10.18 — CONVERTISSEURLOCAL HERO REWORK
   Larger real screenshot, less "window inside window", more faithful UI.
   ========================================================== */
.page-software {
  background:
    radial-gradient(circle at 50% -10%, #2d3e61 0%, #131c2b 42%, #090d15 100%) !important;
}
.software-real-hero {
  grid-template-columns: .56fr 1.44fr !important;
  max-width: 1560px !important;
  gap: 32px !important;
  align-items: center !important;
}
.software-hero-copy {
  max-width: 470px;
}
.page-software .software-hero-copy h1 {
  font-size: clamp(50px, 6vw, 92px) !important;
  line-height: .92 !important;
}
.page-software .software-lead {
  font-size: 15px !important;
  line-height: 1.72 !important;
  max-width: 42ch;
}
.software-actions {
  gap: 12px !important;
}
.software-primary-btn,
.software-secondary-btn {
  padding: 14px 18px;
  border-radius: 11px;
  font: 900 10px monospace;
  letter-spacing: .13em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.software-secondary-btn {
  background: rgba(255,255,255,.04);
  color: #c7d5ef;
  border: 1px solid rgba(117,157,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  cursor: default;
}
.software-secondary-btn:hover {
  background: rgba(255,255,255,.06);
  color: #eef4ff;
}
.software-real-preview-large {
  min-width: 0;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.36), 0 0 70px rgba(100,141,255,.06) !important;
  transform: none !important;
  padding: 0 !important;
}
.software-real-preview-large img {
  width: 100%;
  display: block;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  border-radius: 22px;
  border: 1px solid rgba(117,157,255,.08);
  background: #070d18;
}
.software-real-shot-note {
  margin: 10px 6px 0;
  color: #8f9cb3;
  font: 700 10px monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
}
/* Hide old preview framing if still present somewhere */
.software-preview-topbar,
.software-preview-caption {
  display: none !important;
}
.card-software {
  background:
    linear-gradient(90deg,rgba(8,11,17,.94) 0%,rgba(11,16,27,.82) 34%,rgba(14,20,33,.28) 100%),
    url('../assets/software/convertisseurlocal-real-screenshot.png') right center / 72% auto no-repeat !important;
}
@media (max-width: 1200px) {
  .software-real-hero {
    grid-template-columns: .68fr 1.32fr !important;
  }
}
@media (max-width: 960px) {
  .software-real-hero {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .software-real-preview-large {
    order: -1;
  }
  .software-hero-copy {
    max-width: none;
  }
}


/* ==========================================================
   V10.20 — BACKROOMS SCREENSHOT + LIVE TITLE GLITCH FIX
   ========================================================== */
/* Gallery: use the actual IMG as the only visual source. */
.page-backrooms #media-grid .media-card.has-image {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  background: #15140a !important;
  background-image: none !important;
  filter: none !important;
}
.page-backrooms #media-grid .media-card.has-image > img.media-image {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
  filter: none !important;
}
.page-backrooms #media-grid .media-card.has-image .media-card-shade {
  position:absolute !important; inset:0 !important; z-index:2 !important;
  background:linear-gradient(to top,rgba(7,7,3,.74),rgba(7,7,3,.02) 60%) !important;
}
.page-backrooms #media-grid .media-card.has-image::before { z-index:3 !important; pointer-events:none !important; }
.page-backrooms #media-grid .media-card.has-image .media-top-meta,
.page-backrooms #media-grid .media-card.has-image .media-crosshair,
.page-backrooms #media-grid .media-card.has-image .media-label { z-index:4 !important; }
.page-backrooms #media-grid .media-card.has-image:hover > img.media-image { transform:scale(1.025) !important; filter:brightness(1.04) !important; }

/* Title: actual layered DOM, not pseudo-elements that can be overwritten by JS. */
.br-live-glitch { position:relative !important; display:inline-block !important; isolation:isolate; overflow:visible !important; }
.br-live-glitch::before,.br-live-glitch::after { display:none !important; content:none !important; }
.br-live-glitch .br-title-base { position:relative; z-index:2; display:block; color:#171609; will-change:transform,filter; }
.br-live-glitch .br-title-slice { position:absolute; inset:0; z-index:3; display:block; opacity:0; pointer-events:none; mix-blend-mode:multiply; will-change:transform,opacity,clip-path,filter; }
.br-live-glitch .slice-cyan{color:#00dfff}.br-live-glitch .slice-magenta{color:#ff236f}.br-live-glitch .slice-violet{color:#734dff}.br-live-glitch .slice-green{color:#20e89a}.br-live-glitch .slice-yellow{color:#ffe260}
.br-live-glitch.glitch-now .br-title-base{animation:br20Base 1.55s steps(1,end) both}
.br-live-glitch.glitch-now .slice-cyan{animation:br20Cyan 1.55s steps(1,end) both}
.br-live-glitch.glitch-now .slice-magenta{animation:br20Magenta 1.55s steps(1,end) both}
.br-live-glitch.glitch-now .slice-violet{animation:br20Violet 1.55s steps(1,end) both}
.br-live-glitch.glitch-now .slice-green{animation:br20Green 1.55s steps(1,end) both}
.br-live-glitch.glitch-now .slice-yellow{animation:br20Yellow 1.55s steps(1,end) both}
@keyframes br20Base{0%,4%,100%{transform:none;filter:none}6%{transform:translateX(-8px) scaleX(1.02)}9%{transform:translateX(14px) scaleX(.98)}13%{transform:translateX(-24px) scaleX(1.07);filter:contrast(1.25)}17%{transform:translateX(5px)}25%{transform:translateX(34px) scaleX(1.10)}29%{transform:translateX(-18px) scaleX(.97)}37%{transform:none}47%{transform:translateX(-44px) scaleX(1.15);filter:contrast(1.45)}51%{transform:translateX(24px) scaleX(.94)}56%{transform:translateX(-9px) scaleX(1.03)}65%{transform:translateX(30px) scaleX(1.08)}70%{transform:translateX(-15px) scaleX(.98)}79%{transform:none}88%{transform:translateX(16px) scaleX(1.04)}92%{transform:translateX(-8px)}}
@keyframes br20Cyan{0%,5%,100%{opacity:0;clip-path:inset(0 0 100% 0)}6%{opacity:.9;clip-path:inset(6% 0 80% 0);transform:translateX(-55px) scaleX(1.25)}10%{opacity:.35;clip-path:inset(26% 0 60% 0);transform:translateX(32px) scaleX(.92)}14%{opacity:0}24%{opacity:.72;clip-path:inset(54% 0 31% 0);transform:translateX(66px) scaleX(1.34)}29%{opacity:0}46%{opacity:.9;clip-path:inset(12% 0 74% 0);transform:translateX(-84px) scaleX(1.42)}52%{opacity:.22;transform:translateX(31px) scaleX(.90)}57%{opacity:0}66%{opacity:.72;clip-path:inset(72% 0 14% 0);transform:translateX(58px) scaleX(1.28)}72%{opacity:0}88%{opacity:.55;clip-path:inset(38% 0 49% 0);transform:translateX(-38px) scaleX(1.18)}94%{opacity:0}}
@keyframes br20Magenta{0%,8%,100%{opacity:0}9%{opacity:.84;clip-path:inset(67% 0 17% 0);transform:translateX(74px) scaleX(1.32)}14%{opacity:.25;transform:translateX(-40px) scaleX(.9)}17%{opacity:0}27%{opacity:.88;clip-path:inset(19% 0 65% 0);transform:translateX(-68px) scaleX(1.30)}32%{opacity:0}48%{opacity:.80;clip-path:inset(47% 0 37% 0);transform:translateX(90px) scaleX(1.46)}54%{opacity:.18;transform:translateX(-34px) scaleX(.92)}59%{opacity:0}68%{opacity:.70;clip-path:inset(7% 0 81% 0);transform:translateX(-62px) scaleX(1.27)}74%{opacity:0}90%{opacity:.52;clip-path:inset(57% 0 29% 0);transform:translateX(42px) scaleX(1.18)}95%{opacity:0}}
@keyframes br20Violet{0%,20%,100%{opacity:0}21%{opacity:.58;clip-path:inset(34% 0 53% 0);transform:translateX(-48px) scaleX(1.22)}26%{opacity:0}43%{opacity:.60;clip-path:inset(75% 0 11% 0);transform:translateX(64px) scaleX(1.28)}48%{opacity:0}62%{opacity:.68;clip-path:inset(27% 0 59% 0);transform:translateX(-72px) scaleX(1.32)}68%{opacity:0}}
@keyframes br20Green{0%,32%,100%{opacity:0}33%{opacity:.52;clip-path:inset(2% 0 86% 0);transform:translateX(58px) scaleX(1.24)}38%{opacity:0}57%{opacity:.60;clip-path:inset(61% 0 25% 0);transform:translateX(-64px) scaleX(1.28)}62%{opacity:0}82%{opacity:.50;clip-path:inset(43% 0 44% 0);transform:translateX(46px) scaleX(1.20)}87%{opacity:0}}
@keyframes br20Yellow{0%,38%,100%{opacity:0}39%{opacity:.48;clip-path:inset(17% 0 69% 0);transform:translateX(42px) scaleX(1.17)}43%{opacity:0}73%{opacity:.52;clip-path:inset(51% 0 35% 0);transform:translateX(-50px) scaleX(1.22)}78%{opacity:0}}
.br-live-glitch:not(.glitch-now){animation:br20Idle 7.5s steps(1,end) infinite}
@keyframes br20Idle{0%,73%,100%{transform:none}74%{transform:translateX(-3px) scaleX(1.008)}75%{transform:translateX(5px) scaleX(.995)}76%{transform:none}91%{transform:translateX(3px) scaleX(1.006)}92%{transform:translateX(-3px) scaleX(.998)}93%{transform:none}}


/* ==========================================================
   V10.21 — ROBUST BACKROOMS GALLERY + SUBTLE TITLE GLITCH
   ========================================================== */

/* Gallery: keep the image as a plain, visible image with almost no overlay. */
.page-backrooms #media-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
}
.page-backrooms #media-grid .media-card {
  display:block !important;
  position:relative !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#5e572b !important;
  background-image:none !important;
  filter:none !important;
  border:1px solid rgba(43,38,15,.24) !important;
  isolation:isolate !important;
}
.page-backrooms #media-grid .media-card > img.media-image {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  z-index:1 !important;
}
.page-backrooms #media-grid .media-card::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:linear-gradient(to top,rgba(12,10,4,.48) 0%,rgba(12,10,4,.08) 37%,transparent 62%) !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}
.page-backrooms #media-grid .media-card .media-card-shade {
  display:none !important;
}
.page-backrooms #media-grid .media-top-meta,
.page-backrooms #media-grid .media-crosshair,
.page-backrooms #media-grid .media-label {
  position:absolute !important;
  z-index:3 !important;
}
.page-backrooms #media-grid .media-card:hover > img.media-image {
  transform:scale(1.018) !important;
  filter:brightness(1.025) !important;
}
@media (max-width:900px){
  .page-backrooms #media-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:560px){
  .page-backrooms #media-grid{grid-template-columns:1fr !important;}
}

/* Title: thin signal-tear style, small offsets, no giant ghost text. */
.br-live-glitch {
  position:relative !important;
  display:inline-block !important;
  isolation:isolate !important;
}
.br-live-glitch .br-title-base {
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  color:#171609 !important;
  will-change:transform,filter;
}
.br-live-glitch .br-title-slice {
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  display:block !important;
  pointer-events:none !important;
  opacity:0;
  mix-blend-mode:multiply !important;
  will-change:transform,opacity,clip-path;
}
.br-live-glitch .slice-green,
.br-live-glitch .slice-yellow { display:none !important; }
.br-live-glitch .slice-cyan { color:#00d8ff !important; }
.br-live-glitch .slice-magenta { color:#ff3b8d !important; }
.br-live-glitch .slice-violet { color:#6e59ff !important; }

.br-live-glitch.glitch-now .br-title-base { animation:br21Base .92s steps(1,end) both !important; }
.br-live-glitch.glitch-now .slice-cyan { animation:br21Cyan .92s steps(1,end) both !important; }
.br-live-glitch.glitch-now .slice-magenta { animation:br21Magenta .92s steps(1,end) both !important; }
.br-live-glitch.glitch-now .slice-violet { animation:br21Violet .92s steps(1,end) both !important; }

@keyframes br21Base {
  0%,7%,100% { transform:none; filter:none; }
  9% { transform:translateX(-2px) scaleX(1.004); }
  12% { transform:translateX(3px) scaleX(.998); }
  16% { transform:none; }
  35% { transform:translateX(4px) scaleX(1.006); }
  38% { transform:translateX(-3px); filter:contrast(1.06); }
  42% { transform:none; filter:none; }
  65% { transform:translateX(-4px) scaleX(1.008); }
  69% { transform:translateX(2px); }
  73% { transform:none; }
}
@keyframes br21Cyan {
  0%,8%,100% { opacity:0; }
  9% { opacity:.42; clip-path:inset(8% 0 86% 0); transform:translateX(-9px) scaleX(1.025); }
  13% { opacity:0; }
  34% { opacity:.34; clip-path:inset(46% 0 48% 0); transform:translateX(11px) scaleX(1.018); }
  39% { opacity:0; }
  64% { opacity:.38; clip-path:inset(72% 0 22% 0); transform:translateX(-10px) scaleX(1.022); }
  70% { opacity:0; }
}
@keyframes br21Magenta {
  0%,11%,100% { opacity:0; }
  12% { opacity:.34; clip-path:inset(24% 0 70% 0); transform:translateX(8px) scaleX(1.018); }
  16% { opacity:0; }
  37% { opacity:.31; clip-path:inset(61% 0 33% 0); transform:translateX(-12px) scaleX(1.026); }
  42% { opacity:0; }
  67% { opacity:.30; clip-path:inset(38% 0 56% 0); transform:translateX(9px) scaleX(1.018); }
  72% { opacity:0; }
}
@keyframes br21Violet {
  0%,28%,100% { opacity:0; }
  29% { opacity:.22; clip-path:inset(16% 0 79% 0); transform:translateX(-6px) scaleX(1.015); }
  33% { opacity:0; }
  57% { opacity:.24; clip-path:inset(82% 0 13% 0); transform:translateX(7px) scaleX(1.018); }
  61% { opacity:0; }
}
/* Tiny idle twitch only; no duplicated word visible. */
.br-live-glitch:not(.glitch-now) { animation:br21Idle 9s steps(1,end) infinite !important; }
@keyframes br21Idle {
  0%,79%,100% { transform:none; }
  80% { transform:translateX(-1px); }
  81% { transform:translateX(2px); }
  82% { transform:none; }
}


/* ==========================================================
   V10.22 — INLINE SCREENSHOTS + RANDOM SIGNAL GLITCH
   ========================================================== */

/* Gallery: brutally simple rendering. No variant filter, blend mode or hidden fallback. */
.page-backrooms #media-grid .media-card.has-image {
  display:block !important;
  position:relative !important;
  width:100% !important;
  aspect-ratio:16 / 9 !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#b2a455 !important;
  background-image:none !important;
  filter:none !important;
  opacity:1 !important;
  isolation:isolate !important;
}
.page-backrooms #media-grid .media-card.has-image > img.media-image {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  z-index:1 !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  transform:none;
}
.page-backrooms #media-grid .media-card.has-image::before {
  content:"" !important;
  position:absolute !important;
  inset:auto 0 0 0 !important;
  height:42% !important;
  z-index:2 !important;
  background:linear-gradient(to top,rgba(8,7,3,.58),transparent) !important;
  opacity:1 !important;
  pointer-events:none !important;
  mix-blend-mode:normal !important;
}
.page-backrooms #media-grid .media-card.has-image .media-card-shade { display:none !important; }
.page-backrooms #media-grid .media-card.has-image .media-top-meta,
.page-backrooms #media-grid .media-card.has-image .media-crosshair,
.page-backrooms #media-grid .media-card.has-image .media-label {
  z-index:3 !important;
}
.page-backrooms #media-grid .media-card.has-image:hover > img.media-image {
  transform:scale(1.018) !important;
  filter:brightness(1.03) !important;
}

/* No mouse-driven glitch at all. */
.br-live-glitch:hover,
.br-live-glitch:hover .br-title-base,
.br-live-glitch:hover .br-title-slice { animation:none; }
.br-live-glitch::before,
.br-live-glitch::after { display:none !important; content:none !important; }
.br-live-glitch:not(.glitch-now) { animation:none !important; transform:none !important; }

/* Signal-tear title: visible, thin, and much closer to the transition language. */
.br-live-glitch .slice-green { display:block !important; color:#19df9c !important; }
.br-live-glitch .slice-yellow { display:block !important; color:#f4dc64 !important; }
.br-live-glitch .slice-cyan { color:#00d7ff !important; }
.br-live-glitch .slice-magenta { color:#ff327d !important; }
.br-live-glitch .slice-violet { color:#7658ff !important; }

.br-live-glitch.glitch-now .br-title-base { animation:br22Base .76s steps(1,end) both !important; }
.br-live-glitch.glitch-now .slice-cyan { animation:br22Cyan .76s steps(1,end) both !important; }
.br-live-glitch.glitch-now .slice-magenta { animation:br22Magenta .76s steps(1,end) both !important; }
.br-live-glitch.glitch-now .slice-violet { animation:br22Violet .76s steps(1,end) both !important; }
.br-live-glitch.glitch-now .slice-green { animation:br22Green .76s steps(1,end) both !important; }
.br-live-glitch.glitch-now .slice-yellow { animation:br22Yellow .76s steps(1,end) both !important; }

@keyframes br22Base {
  0%,7%,100% { transform:none; filter:none; }
  9% { transform:translateX(-4px) scaleX(1.008); }
  13% { transform:translateX(7px) scaleX(.997); }
  17% { transform:none; }
  38% { transform:translateX(9px) scaleX(1.012); filter:contrast(1.08); }
  43% { transform:translateX(-6px) scaleX(.998); }
  48% { transform:none; filter:none; }
  69% { transform:translateX(-8px) scaleX(1.014); }
  74% { transform:translateX(4px); }
  79% { transform:none; }
}
@keyframes br22Cyan {
  0%,8%,100% { opacity:0; }
  9% { opacity:.60; clip-path:inset(9% 0 85% 0); transform:translateX(-19px) scaleX(1.055); }
  14% { opacity:.18; transform:translateX(7px); }
  17% { opacity:0; }
  37% { opacity:.52; clip-path:inset(45% 0 49% 0); transform:translateX(22px) scaleX(1.045); }
  43% { opacity:0; }
  68% { opacity:.55; clip-path:inset(74% 0 20% 0); transform:translateX(-18px) scaleX(1.052); }
  75% { opacity:0; }
}
@keyframes br22Magenta {
  0%,11%,100% { opacity:0; }
  12% { opacity:.55; clip-path:inset(25% 0 69% 0); transform:translateX(18px) scaleX(1.042); }
  17% { opacity:0; }
  40% { opacity:.48; clip-path:inset(60% 0 34% 0); transform:translateX(-23px) scaleX(1.055); }
  46% { opacity:0; }
  70% { opacity:.48; clip-path:inset(37% 0 57% 0); transform:translateX(17px) scaleX(1.042); }
  76% { opacity:0; }
}
@keyframes br22Violet {
  0%,25%,100% { opacity:0; }
  26% { opacity:.38; clip-path:inset(16% 0 79% 0); transform:translateX(-13px) scaleX(1.032); }
  32% { opacity:0; }
  56% { opacity:.42; clip-path:inset(82% 0 13% 0); transform:translateX(14px) scaleX(1.038); }
  62% { opacity:0; }
}
@keyframes br22Green {
  0%,31%,100% { opacity:0; }
  32% { opacity:.31; clip-path:inset(4% 0 91% 0); transform:translateX(11px) scaleX(1.028); }
  36% { opacity:0; }
  61% { opacity:.34; clip-path:inset(52% 0 43% 0); transform:translateX(-12px) scaleX(1.030); }
  66% { opacity:0; }
}
@keyframes br22Yellow {
  0%,47%,100% { opacity:0; }
  48% { opacity:.28; clip-path:inset(31% 0 64% 0); transform:translateX(10px) scaleX(1.025); }
  53% { opacity:0; }
  80% { opacity:.28; clip-path:inset(68% 0 27% 0); transform:translateX(-11px) scaleX(1.028); }
  85% { opacity:0; }
}


/* ==========================================================
   V10.23 — RANDOM HORIZONTAL SIGNAL SPLIT TITLE
   No hover trigger. The title briefly splits into top/bottom halves,
   with many very thin multicolour signal tears.
   ========================================================== */

/* Kill every legacy mouse-hover title effect. */
.glitch-title:hover::before,
.glitch-title:hover::after,
.br-live-glitch:hover::before,
.br-live-glitch:hover::after {
  display:none !important;
  content:none !important;
  opacity:0 !important;
  transform:none !important;
}
.br-live-glitch:hover,
.br-live-glitch:hover .br-title-base,
.br-live-glitch:hover .br-title-half,
.br-live-glitch:hover .br-title-micro {
  animation:none !important;
  transform:none;
}
.br-live-glitch:not(.glitch-now) {
  animation:none !important;
  transform:none !important;
}

.br-live-glitch {
  position:relative !important;
  display:inline-block !important;
  isolation:isolate !important;
}
.br-live-glitch .br-title-base {
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  color:#171609 !important;
  will-change:transform, opacity, filter;
}
.br-live-glitch .br-title-half,
.br-live-glitch .br-title-micro {
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:0;
  color:#171609;
  will-change:transform, opacity, clip-path, filter;
}
.br-live-glitch .br-title-half { z-index:3 !important; }
.br-live-glitch .br-title-micro {
  z-index:4 !important;
  mix-blend-mode:multiply;
}

/* Two physical-looking horizontal halves. */
.br-title-half-top { clip-path:inset(0 0 50% 0); }
.br-title-half-bottom { clip-path:inset(50% 0 0 0); }

/* Many thin coloured lamellae. Each is only ~1.5–3% of title height. */
.br-micro-1  { color:#00d7ff !important; clip-path:inset(8% 0 89.8% 0); }
.br-micro-2  { color:#ff2f86 !important; clip-path:inset(17% 0 80.8% 0); }
.br-micro-3  { color:#8b5cff !important; clip-path:inset(28% 0 69.5% 0); }
.br-micro-4  { color:#00e6a6 !important; clip-path:inset(36% 0 61.4% 0); }
.br-micro-5  { color:#ffd83d !important; clip-path:inset(44.5% 0 52.8% 0); }
.br-micro-6  { color:#ff633b !important; clip-path:inset(53% 0 44.8% 0); }
.br-micro-7  { color:#2d7dff !important; clip-path:inset(62% 0 35.7% 0); }
.br-micro-8  { color:#ff4de1 !important; clip-path:inset(71% 0 26.8% 0); }
.br-micro-9  { color:#76ff4c !important; clip-path:inset(80% 0 17.5% 0); }
.br-micro-10 { color:#f5f2b8 !important; clip-path:inset(90% 0 7.6% 0); }

.br-live-glitch.glitch-now .br-title-base {
  animation:br23Base .58s steps(1,end) both !important;
}
.br-live-glitch.glitch-now .br-title-half-top {
  animation:br23Top .58s steps(1,end) both !important;
}
.br-live-glitch.glitch-now .br-title-half-bottom {
  animation:br23Bottom .58s steps(1,end) both !important;
}
.br-live-glitch.glitch-now .br-micro-1  { animation:br23MicroA .58s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-2  { animation:br23MicroB .58s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-3  { animation:br23MicroC .58s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-4  { animation:br23MicroD .58s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-5  { animation:br23MicroE .58s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-6  { animation:br23MicroF .58s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-7  { animation:br23MicroA .58s .01s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-8  { animation:br23MicroC .58s .015s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-9  { animation:br23MicroB .58s .008s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-10 { animation:br23MicroE .58s .012s steps(1,end) both !important; }

@keyframes br23Base {
  0%,7%,100% { transform:none; filter:none; opacity:1; }
  9%  { transform:translateX(-2px) scaleX(1.006); filter:contrast(1.08); }
  15% { transform:translateX(3px) scaleX(.998); }
  20% { transform:none; }
  39% { transform:translateX(2px); filter:contrast(1.05); }
  44% { transform:translateX(-3px); }
  49% { transform:none; filter:none; }
  70% { transform:translateX(-2px) scaleX(1.004); }
  75% { transform:none; }
}
@keyframes br23Top {
  0%,8%,100% { opacity:0; transform:none; }
  9%  { opacity:.92; transform:translateX(-12px) scaleX(1.018); }
  14% { opacity:.72; transform:translateX(-6px) scaleX(1.008); }
  19% { opacity:0; transform:none; }
  38% { opacity:.82; transform:translateX(9px) scaleX(1.014); }
  44% { opacity:0; transform:none; }
  68% { opacity:.62; transform:translateX(-7px); }
  73% { opacity:0; }
}
@keyframes br23Bottom {
  0%,8%,100% { opacity:0; transform:none; }
  9%  { opacity:.92; transform:translateX(12px) scaleX(1.018); }
  14% { opacity:.70; transform:translateX(6px) scaleX(1.008); }
  19% { opacity:0; transform:none; }
  38% { opacity:.80; transform:translateX(-10px) scaleX(1.014); }
  44% { opacity:0; transform:none; }
  68% { opacity:.60; transform:translateX(8px); }
  73% { opacity:0; }
}

/* Fine signal tears: short bursts, more colour, never giant duplicate words. */
@keyframes br23MicroA {
  0%,8%,100% { opacity:0; transform:none; }
  9%  { opacity:.72; transform:translateX(-24px) scaleX(1.045); }
  12% { opacity:.34; transform:translateX(8px); }
  15% { opacity:0; }
  40% { opacity:.52; transform:translateX(18px) scaleX(1.030); }
  43% { opacity:0; }
}
@keyframes br23MicroB {
  0%,11%,100% { opacity:0; transform:none; }
  12% { opacity:.66; transform:translateX(22px) scaleX(1.040); }
  15% { opacity:.22; transform:translateX(-6px); }
  18% { opacity:0; }
  67% { opacity:.50; transform:translateX(-17px) scaleX(1.024); }
  71% { opacity:0; }
}
@keyframes br23MicroC {
  0%,24%,100% { opacity:0; transform:none; }
  25% { opacity:.52; transform:translateX(-18px) scaleX(1.032); }
  29% { opacity:0; }
  47% { opacity:.58; transform:translateX(20px) scaleX(1.036); }
  51% { opacity:0; }
}
@keyframes br23MicroD {
  0%,31%,100% { opacity:0; transform:none; }
  32% { opacity:.48; transform:translateX(15px) scaleX(1.026); }
  36% { opacity:0; }
  73% { opacity:.42; transform:translateX(-14px); }
  77% { opacity:0; }
}
@keyframes br23MicroE {
  0%,17%,100% { opacity:0; transform:none; }
  18% { opacity:.46; transform:translateX(-14px) scaleX(1.020); }
  21% { opacity:0; }
  55% { opacity:.50; transform:translateX(16px) scaleX(1.028); }
  59% { opacity:0; }
}
@keyframes br23MicroF {
  0%,35%,100% { opacity:0; transform:none; }
  36% { opacity:.55; transform:translateX(-20px) scaleX(1.036); }
  40% { opacity:.20; transform:translateX(5px); }
  43% { opacity:0; }
  79% { opacity:.40; transform:translateX(12px); }
  83% { opacity:0; }
}


/* ==========================================================
   V10.24 — ULTRA-THIN SIGNAL TEAR TITLE
   True horizontal split + many 1px-ish artefacts, stretched sideways.
   ========================================================== */

/* absolutely no hover behavior */
.br-live-glitch:hover,
.br-live-glitch:hover *,
.glitch-title:hover,
.glitch-title:hover * {
  animation-play-state: initial !important;
}
.br-live-glitch:not(.glitch-now) .br-title-half,
.br-live-glitch:not(.glitch-now) .br-title-micro {
  opacity:0 !important;
  transform:none !important;
}

/* split line: deliberately not dead-center so it feels less synthetic */
.br-title-half-top    { clip-path:inset(0 0 53% 0) !important; }
.br-title-half-bottom { clip-path:inset(47% 0 0 0) !important; }

/* Ultra-thin signal slices. Most are under ~1% of title height. */
.br-micro-1  { color:#00e5ff !important; clip-path:inset(5.8% 0 93.5% 0) !important; }
.br-micro-2  { color:#ff2d95 !important; clip-path:inset(10.9% 0 88.4% 0) !important; }
.br-micro-3  { color:#8d66ff !important; clip-path:inset(16.8% 0 82.5% 0) !important; }
.br-micro-4  { color:#2dffb3 !important; clip-path:inset(22.2% 0 77.1% 0) !important; }
.br-micro-5  { color:#ffe24a !important; clip-path:inset(28.9% 0 70.4% 0) !important; }
.br-micro-6  { color:#ff7047 !important; clip-path:inset(34.1% 0 65.2% 0) !important; }
.br-micro-7  { color:#3182ff !important; clip-path:inset(39.7% 0 59.6% 0) !important; }
.br-micro-8  { color:#ff51df !important; clip-path:inset(44.8% 0 54.5% 0) !important; }
.br-micro-9  { color:#79ff57 !important; clip-path:inset(49.6% 0 49.7% 0) !important; }
.br-micro-10 { color:#f8f3bb !important; clip-path:inset(54.5% 0 44.8% 0) !important; }
.br-micro-11 { color:#36f0ff !important; clip-path:inset(59.3% 0 40.0% 0) !important; }
.br-micro-12 { color:#ff3f6d !important; clip-path:inset(64.1% 0 35.2% 0) !important; }
.br-micro-13 { color:#b46cff !important; clip-path:inset(68.7% 0 30.6% 0) !important; }
.br-micro-14 { color:#30e5a1 !important; clip-path:inset(73.6% 0 25.7% 0) !important; }
.br-micro-15 { color:#ffd34a !important; clip-path:inset(78.1% 0 21.2% 0) !important; }
.br-micro-16 { color:#ff8159 !important; clip-path:inset(82.4% 0 16.9% 0) !important; }
.br-micro-17 { color:#52a0ff !important; clip-path:inset(86.3% 0 13.0% 0) !important; }
.br-micro-18 { color:#ff65ef !important; clip-path:inset(89.8% 0 9.5% 0) !important; }
.br-micro-19 { color:#99ff61 !important; clip-path:inset(93.1% 0 6.2% 0) !important; }
.br-micro-20 { color:#fffbd1 !important; clip-path:inset(96.1% 0 3.2% 0) !important; }

.br-live-glitch.glitch-now .br-title-base {
  animation:br24Base .66s steps(1,end) both !important;
}
.br-live-glitch.glitch-now .br-title-half-top {
  animation:br24Top .66s steps(1,end) both !important;
}
.br-live-glitch.glitch-now .br-title-half-bottom {
  animation:br24Bottom .66s steps(1,end) both !important;
}

/* map many thin slices onto staggered signal-tear patterns */
.br-live-glitch.glitch-now .br-micro-1,
.br-live-glitch.glitch-now .br-micro-6,
.br-live-glitch.glitch-now .br-micro-11,
.br-live-glitch.glitch-now .br-micro-16 { animation:br24SliceA .66s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-2,
.br-live-glitch.glitch-now .br-micro-7,
.br-live-glitch.glitch-now .br-micro-12,
.br-live-glitch.glitch-now .br-micro-17 { animation:br24SliceB .66s .006s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-3,
.br-live-glitch.glitch-now .br-micro-8,
.br-live-glitch.glitch-now .br-micro-13,
.br-live-glitch.glitch-now .br-micro-18 { animation:br24SliceC .66s .012s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-4,
.br-live-glitch.glitch-now .br-micro-9,
.br-live-glitch.glitch-now .br-micro-14,
.br-live-glitch.glitch-now .br-micro-19 { animation:br24SliceD .66s .003s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-5,
.br-live-glitch.glitch-now .br-micro-10,
.br-live-glitch.glitch-now .br-micro-15,
.br-live-glitch.glitch-now .br-micro-20 { animation:br24SliceE .66s .009s steps(1,end) both !important; }

/* The base genuinely disappears for split frames so the halves are the actual title. */
@keyframes br24Base {
  0%,7%,100% { opacity:1; transform:none; filter:none; }
  8%  { opacity:.08; transform:translateX(-2px) scaleX(1.018); filter:contrast(1.18); }
  13% { opacity:.04; transform:translateX(3px) scaleX(1.01); }
  18% { opacity:1; transform:none; }
  35% { opacity:.10; transform:translateX(2px) scaleX(1.012); }
  40% { opacity:.05; transform:translateX(-3px); }
  45% { opacity:1; transform:none; }
  67% { opacity:.14; transform:translateX(-2px) scaleX(1.008); }
  72% { opacity:1; transform:none; }
}

/* Real top/bottom split, with much more horizontal travel than vertical motion. */
@keyframes br24Top {
  0%,7%,100% { opacity:0; transform:none; filter:none; }
  8%  { opacity:1; transform:translateX(-27px) scaleX(1.055); filter:contrast(1.15); }
  12% { opacity:.94; transform:translateX(-14px) scaleX(1.025); }
  17% { opacity:0; transform:none; }
  35% { opacity:.98; transform:translateX(21px) scaleX(1.045); }
  39% { opacity:.82; transform:translateX(9px) scaleX(1.018); }
  44% { opacity:0; }
  67% { opacity:.90; transform:translateX(-18px) scaleX(1.035); }
  71% { opacity:0; transform:none; }
}
@keyframes br24Bottom {
  0%,7%,100% { opacity:0; transform:none; filter:none; }
  8%  { opacity:1; transform:translateX(28px) scaleX(1.060); filter:contrast(1.15); }
  12% { opacity:.94; transform:translateX(15px) scaleX(1.028); }
  17% { opacity:0; transform:none; }
  35% { opacity:.98; transform:translateX(-22px) scaleX(1.048); }
  39% { opacity:.82; transform:translateX(-10px) scaleX(1.020); }
  44% { opacity:0; }
  67% { opacity:.90; transform:translateX(19px) scaleX(1.038); }
  71% { opacity:0; transform:none; }
}

/* Thin, stretched signal artefacts — designed to echo the transition effect. */
@keyframes br24SliceA {
  0%,6%,100% { opacity:0; transform:none; }
  8%  { opacity:.84; transform:translateX(-46px) scaleX(1.16); }
  10% { opacity:.48; transform:translateX(15px) scaleX(1.05); }
  13% { opacity:0; }
  36% { opacity:.68; transform:translateX(38px) scaleX(1.14); }
  39% { opacity:0; }
}
@keyframes br24SliceB {
  0%,10%,100% { opacity:0; transform:none; }
  12% { opacity:.78; transform:translateX(52px) scaleX(1.18); }
  14% { opacity:.34; transform:translateX(-18px) scaleX(1.06); }
  17% { opacity:0; }
  65% { opacity:.60; transform:translateX(-41px) scaleX(1.12); }
  69% { opacity:0; }
}
@keyframes br24SliceC {
  0%,22%,100% { opacity:0; transform:none; }
  24% { opacity:.68; transform:translateX(-43px) scaleX(1.15); }
  27% { opacity:.26; transform:translateX(11px); }
  30% { opacity:0; }
  45% { opacity:.72; transform:translateX(49px) scaleX(1.17); }
  49% { opacity:0; }
}
@keyframes br24SliceD {
  0%,30%,100% { opacity:0; transform:none; }
  32% { opacity:.62; transform:translateX(35px) scaleX(1.13); }
  35% { opacity:.22; transform:translateX(-9px); }
  38% { opacity:0; }
  73% { opacity:.58; transform:translateX(-37px) scaleX(1.12); }
  77% { opacity:0; }
}
@keyframes br24SliceE {
  0%,16%,100% { opacity:0; transform:none; }
  18% { opacity:.58; transform:translateX(-34px) scaleX(1.12); }
  21% { opacity:0; }
  54% { opacity:.66; transform:translateX(42px) scaleX(1.15); }
  57% { opacity:.24; transform:translateX(-10px); }
  60% { opacity:0; }
}


/* ==========================================================
   V10.25 — 30 ARTEFACTS + LOWER GLITCH FREQUENCY
   More ultra-thin horizontal artefacts, less frequent random glitches.
   ========================================================== */

/* absolutely no hover-triggered behavior */
.br-live-glitch:hover,
.br-live-glitch:hover *,
.glitch-title:hover,
.glitch-title:hover * {
  animation: none !important;
  transform: none !important;
}

/* add 10 more ultra-thin stretched slices */
.br-micro-21 { color:#24e7ff !important; clip-path:inset(7.3% 0 92.0% 0) !important; }
.br-micro-22 { color:#ff4c87 !important; clip-path:inset(13.6% 0 85.7% 0) !important; }
.br-micro-23 { color:#7f68ff !important; clip-path:inset(19.4% 0 79.9% 0) !important; }
.br-micro-24 { color:#1fe1a9 !important; clip-path:inset(26.1% 0 73.2% 0) !important; }
.br-micro-25 { color:#ffe86a !important; clip-path:inset(32.6% 0 66.7% 0) !important; }
.br-micro-26 { color:#ff8756 !important; clip-path:inset(47.0% 0 52.3% 0) !important; }
.br-micro-27 { color:#4aa6ff !important; clip-path:inset(61.0% 0 38.3% 0) !important; }
.br-micro-28 { color:#ff60da !important; clip-path:inset(74.9% 0 24.4% 0) !important; }
.br-micro-29 { color:#8fff62 !important; clip-path:inset(87.8% 0 11.5% 0) !important; }
.br-micro-30 { color:#fff6bf !important; clip-path:inset(98.0% 0 1.1% 0) !important; }

.br-live-glitch.glitch-now .br-micro-21,
.br-live-glitch.glitch-now .br-micro-26 { animation:br24SliceA .66s .004s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-22,
.br-live-glitch.glitch-now .br-micro-27 { animation:br24SliceB .66s .010s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-23,
.br-live-glitch.glitch-now .br-micro-28 { animation:br24SliceC .66s .002s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-24,
.br-live-glitch.glitch-now .br-micro-29 { animation:br24SliceD .66s .008s steps(1,end) both !important; }
.br-live-glitch.glitch-now .br-micro-25,
.br-live-glitch.glitch-now .br-micro-30 { animation:br24SliceE .66s .014s steps(1,end) both !important; }


/* ==========================================================
   V10.26 — MX5 EXPERIENCE DARK BORDEAUX REBALANCE
   Bring the embedded legacy site closer to the original:
   near-black burgundy background, darker top bands, panels unchanged.
   ========================================================== */
.page-mx5.mx5-legacy {
  --mx-bg:#130b0e;
  --mx-bg-deep:#090507;
  --mx-panel:#302126;
  --mx-panel-2:#39262d;
  background:
    radial-gradient(circle at 12% 4%, rgba(128,18,35,.075), transparent 30%),
    radial-gradient(circle at 88% 24%, rgba(105,15,31,.06), transparent 34%),
    linear-gradient(180deg,#160a0e 0%,#120b0e 26%,#10090c 70%,#090507 100%) !important;
}

/* Top identity strip: almost black with just a restrained burgundy tint. */
.mx5-legacy-brand-strip {
  background:linear-gradient(90deg,
    rgba(29,10,15,.97),
    rgba(18,11,14,.98) 48%,
    rgba(31,10,16,.96)) !important;
  border-bottom-color:rgba(201,24,49,.16) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

/* Internal navigation follows the same dark charcoal/burgundy base. */
.mx5-legacy-nav-wrap {
  background:rgba(20,13,16,.96) !important;
  border-bottom-color:rgba(100,65,75,.42) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}

/* Keep hover/accent red, but tone down the always-on active fill. */
.mx5-legacy-nav button.active {
  background:linear-gradient(135deg,rgba(167,22,43,.20),rgba(92,13,25,.30)) !important;
  border-color:rgba(239,41,70,.34) !important;
  box-shadow:0 8px 20px rgba(100,8,22,.10) !important;
}

/* Ambient grid becomes almost imperceptible on the darker base. */
.page-mx5 .mx5-legacy-ambient {
  opacity:.58;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px) !important;
}

/* Footer stays in the same family instead of glowing red at the bottom. */
.mx5-legacy-footer {
  background:linear-gradient(90deg,rgba(91,12,27,.035),rgba(10,7,9,.34),rgba(91,12,27,.035)) !important;
  border-top-color:rgba(100,65,75,.34) !important;
}


/* ==========================================================
   V10.27 — BACKROOMS MINI-SITE VIEWS
   Separate Home / About / Devlogs / Media / Timeline panels.
   ========================================================== */
.br-site-nav button {
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.br-site-brand {
  color:#2a2713 !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  padding:0 !important;
}
.br-nav-links button {
  color:#302c16 !important;
  opacity:.58;
  font-size:10px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase;
  font-weight:900 !important;
  padding:6px 2px !important;
  position:relative;
  transition:opacity .2s ease;
}
.br-nav-links button:hover,
.br-nav-links button.active { opacity:1; }
.br-nav-links button.active::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-7px;
  height:2px;
  background:#25220f;
}
.br-view { display:none; position:relative; z-index:3; min-height:calc(100vh - 120px); }
.br-view.active { display:block; animation:brViewIn .34s ease both; }
@keyframes brViewIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.br-home-pillars { padding-top:80px !important; }
.br-home-heading { align-items:start !important; }
.br-home-heading h2 { max-width:760px; font-size:clamp(38px,5vw,70px) !important; }
.br-pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.br-pillar-grid article,
.br-about-card {
  position:relative;
  min-height:280px;
  padding:28px;
  border:1px solid rgba(49,43,15,.20);
  background:rgba(213,201,117,.40);
  backdrop-filter:blur(5px);
}
.br-pillar-grid article > span {
  font:900 11px monospace;
  letter-spacing:.15em;
  opacity:.55;
}
.br-pillar-grid h3,
.br-about-card h3 { margin:55px 0 12px; font-size:28px; letter-spacing:-.025em; }
.br-pillar-grid p,
.br-about-card p { margin:0; color:#46401f; line-height:1.75; font-size:14px; }

.br-page-lead { max-width:980px !important; padding-bottom:72px !important; }
.br-page-lead h2 { max-width:900px; }
.br-page-lead .br-about-lead { max-width:840px; font-size:18px; line-height:1.9; }
.br-about-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding-top:20px !important; border-top:0 !important; }
.br-about-card { min-height:320px; }
.br-about-card .section-index { margin:0; }
.br-about-card h3 { margin-top:36px; }

.br-timeline { max-width:980px !important; }
.br-timeline .timeline-item { grid-template-columns:34px 120px 1fr; }
.br-timeline .timeline-date { font-size:10px; letter-spacing:.04em; }

/* Non-home pages should feel like their own screen rather than a scroll target. */
.br-view:not([data-br-view-panel="home"]) > .content-section:first-child { padding-top:92px; min-height:calc(100vh - 190px); }

@media (max-width:900px) {
  .br-nav-links { overflow-x:auto; max-width:55vw; scrollbar-width:none; }
  .br-nav-links::-webkit-scrollbar { display:none; }
  .br-nav-links button { white-space:nowrap; }
  .br-pillar-grid,.br-about-grid { grid-template-columns:1fr; }
  .br-pillar-grid article,.br-about-card { min-height:230px; }
  .br-timeline .timeline-item { grid-template-columns:28px 96px 1fr; gap:12px; }
}
@media (max-width:620px) {
  .br-site-brand { display:none; }
  .br-nav-actions { width:100%; justify-content:space-between; }
  .br-nav-links { display:flex !important; max-width:62vw; gap:14px !important; }
  .br-nav-links button { font-size:9px !important; }
}


/* ==========================================================
   V10.28 — BACKROOMS CONTENT / SOLO DEV
   ========================================================== */
.br-hero-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 4px;
}
.br-hero-meta span {
  padding:7px 10px;
  border:1px solid rgba(66,61,31,.26);
  background:rgba(255,248,184,.16);
  color:#3d381c;
  font:900 9px/1 monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.br-about-grid { align-items:stretch; }
.br-about-card { min-height:340px; }
@media (max-width:760px) {
  .br-about-card { min-height:0; }
}