/* =========================================================
   LUMINOS78 — RGB enhancement layer (1.2.6)
   Loads AFTER luminos78.css. Every rule is scoped to html.rgb-on,
   so removing that class (or this file) returns the site exactly
   to the original theme.

   Idea: the hero's mood scene (--c1 / --c2 / --c3) becomes the
   light source for the whole page. Pick a scene and every accent,
   strip and glow on the site fades to it.
   ========================================================= */

/* Whole-page palette follows the hero scene (values copied to :root by luminos78-rgb.js) */
html.rgb-on {
  --lm-gradient: linear-gradient(90deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
  --rgb-glow: color-mix(in srgb, var(--c2) 55%, transparent);
  --rgb-faint: color-mix(in srgb, var(--c2) 16%, transparent);
  --rgb-brass: #C9AE7C;
  --font-masc: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-wide: 'Michroma', 'Inter Tight', system-ui, sans-serif;
  transition: --c1 var(--fade) var(--ease), --c2 var(--fade) var(--ease), --c3 var(--fade) var(--ease), --up var(--fade) var(--ease);
}

/* Icon strokes in the services strip follow the scene too */
html.rgb-on #lm-stroke stop:nth-child(1) { stop-color: var(--c1); }
html.rgb-on #lm-stroke stop:nth-child(2) { stop-color: var(--c2); }
html.rgb-on #lm-stroke stop:nth-child(3) { stop-color: var(--c3); }

/* ---------- 1. Header: LED strip that fills with scroll progress ---------- */
html.rgb-on .site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  /* dim pixels along the whole strip */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 6px);
  opacity: 0; transition: opacity .5s var(--ease);
}
html.rgb-on .site-header::before {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; z-index: 1; pointer-events: none;
  width: calc(var(--progress, 0) * 100%);
  background: var(--lm-gradient);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px);
          mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px);
  filter: drop-shadow(0 0 4px var(--rgb-glow));
  opacity: 0; transition: opacity .5s var(--ease);
}
html.rgb-on .site-header.scrolled::after, html.rgb-on .site-header.scrolled::before { opacity: 1; }
html.rgb-on .site-header.scrolled { border-color: transparent; }

/* Logo: "78" carries the light */
html.rgb-on .logo-78 {
  background: var(--lm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px var(--rgb-faint));
}

/* Header CTA: a lit ring that turns on hover */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html.rgb-on .header-cta { position: relative; isolation: isolate; border-color: rgba(255, 255, 255, .28); }
html.rgb-on .header-cta::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--spin), var(--c1), var(--c2), var(--c3), var(--c1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; animation: rgb-spin 6s linear infinite; transition: opacity .4s;
}
html.rgb-on .header-cta:hover { border-color: transparent; background: transparent; box-shadow: 0 0 24px -4px var(--rgb-glow); }
html.rgb-on .header-cta:hover::before { opacity: 1; animation-duration: 2.4s; }
@keyframes rgb-spin { to { --spin: 360deg; } }

/* ---------- 2. Hero ---------- */
/* Ignition: the house powers on like a car's welcome lighting (≈1.6s, once per load) */
html.rgb-on .hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #04060b;
  animation: rgb-ignite-dark 1.5s .55s var(--ease) both;
}
html.rgb-on .hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 64%; height: 2px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c1) 20%, var(--c2) 50%, var(--c3) 80%, transparent);
  box-shadow: 0 0 24px 4px var(--rgb-glow), 0 0 80px 10px var(--rgb-faint);
  transform: scaleX(0); animation: rgb-ignite-line 1.6s .1s var(--ease) both;
}
html.rgb-on .hero-copy { animation: rgb-rise 1.1s .9s var(--ease) both; }
html.rgb-on .mood { animation: rgb-rise 1s 1.2s var(--ease) both; }
@keyframes rgb-ignite-dark { to { opacity: 0; } }
@keyframes rgb-ignite-line { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes rgb-rise { from { opacity: 0; transform: translateY(14px); } }

/* Display line: second line lit by the current scene, with a slow sheen */
html.rgb-on .hero-display .lit {
  background: linear-gradient(100deg, var(--c1) 0%, var(--c2) 45%, var(--c3) 80%, var(--c1) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px var(--rgb-faint));
  animation: rgb-sheen 9s ease-in-out infinite alternate;
}
@keyframes rgb-sheen { to { background-position: 100% 0; } }

/* Font option: masculine luxury display (html[data-font]) — "original" keeps Playfair + Caveat */
html.rgb-on[data-font="cinzel"] .hero .hero-display { font-family: var(--font-masc); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; line-height: 1.08; font-size: clamp(36px, 5.3vw, 78px); }
html.rgb-on[data-font="wide"] .hero .hero-display { font-family: var(--font-wide); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.18; font-size: clamp(26px, 4vw, 56px); }
html.rgb-on:not([data-font="original"]) .hero-script {
  display: flex; align-items: center; gap: 16px; margin-top: 22px;
  font-family: var(--font-en); font-weight: 300; font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: var(--rgb-brass);
}
html.rgb-on:not([data-font="original"]) .hero-script::before { content: ''; width: 40px; height: 1px; background: var(--rgb-brass); flex: none; }
@media (max-width: 600px) { html.rgb-on:not([data-font="original"]) .hero-script { gap: 10px; font-size: 11px; letter-spacing: .24em; } html.rgb-on:not([data-font="original"]) .hero-script::before { width: 22px; } }

/* Mood controls: lit swatch + intensity track in scene colours */
html.rgb-on .sw[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 18px 2px var(--rgb-glow); }
html.rgb-on .range { height: 2px; background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3)); }
html.rgb-on .range::-webkit-slider-thumb { box-shadow: 0 0 0 3px #0B0F19, 0 0 14px var(--c2); }
html.rgb-on .mood-label::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; vertical-align: 1px;
  background: var(--c2); box-shadow: 0 0 10px var(--c2); animation: rgb-pulse 2.4s ease-in-out infinite;
}
@keyframes rgb-pulse { 50% { opacity: .35; } }

/* ---------- 3. Services strip: icons glow on hover ---------- */
html.rgb-on .services svg { transition: filter .4s var(--ease), transform .4s var(--ease); }
html.rgb-on .services li:hover svg { filter: drop-shadow(0 0 8px var(--rgb-glow)); transform: translateY(-2px); }

/* ---------- 4. Trusted By: a light bar sweeps across the names ---------- */
html.rgb-on .clients-marquee { position: relative; }
html.rgb-on .clients-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; mix-blend-mode: color-dodge;
  background: linear-gradient(90deg, transparent, var(--c1) 35%, var(--c2) 50%, var(--c3) 65%, transparent);
  animation: rgb-scan 7s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes rgb-scan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
html.rgb-on .clients-list li:hover span { background: var(--lm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 5. Eyebrows: a small indicator light ---------- */
html.rgb-on .section .eyebrow::before {
  content: ''; display: inline-block; width: 18px; height: 2px; margin-right: 12px; vertical-align: 3px;
  background: var(--lm-gradient); box-shadow: 0 0 8px var(--rgb-faint);
}

/* ---------- 6. Cursor-lit edges on every photo card ----------
   --mx / --my are set by JS on pointer move. Border light + an LED "cove" line along the bottom. */
html.rgb-on .panel::before,
html.rgb-on .space::before,
html.rgb-on .project .ph::before,
html.rgb-on .reel::before,
html.rgb-on .contact-card::before {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 120%), var(--c2), color-mix(in srgb, var(--c3) 50%, transparent) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s var(--ease);
}
html.rgb-on .project .ph, html.rgb-on .reel { position: relative; }
html.rgb-on .panel:hover::before, html.rgb-on .panel.is-active::before,
html.rgb-on .space:hover::before, html.rgb-on .space:focus-visible::before,
html.rgb-on .project:hover .ph::before, html.rgb-on .reel:hover::before,
html.rgb-on .contact-card:hover::before { opacity: 1; }

/* LED cove line that switches on along the bottom edge */
html.rgb-on .space-body::after, html.rgb-on .panel-body::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--lm-gradient); box-shadow: 0 -6px 26px 2px var(--rgb-faint), 0 0 10px var(--rgb-glow);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease);
}
html.rgb-on .space:hover .space-body::after, html.rgb-on .space:focus-visible .space-body::after,
html.rgb-on .panel.is-active .panel-body::after { transform: scaleX(1); }
html.rgb-on .space:hover .arrow { box-shadow: 0 0 18px var(--rgb-glow); }

/* Statement / control photos: back-glow follows the scene instead of fixed violet */
html.rgb-on .figure::before {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 50%, transparent), color-mix(in srgb, var(--c3) 20%, transparent) 60%, transparent);
}

/* ---------- 7. Process: the track is an LED strip ----------
   luminos78-rgb.js draws the strip on a canvas (.rgb-track): one light runs node 01 → 05 and back,
   each LED and node swells and brightens as it passes (--lit 0–1 on each .step), then settles back.
   The CSS-only strip below is the fallback if the script doesn't run. */
html.rgb-on .steps .track-fill {
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px);
          mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px);
  box-shadow: none; filter: drop-shadow(0 0 6px var(--rgb-glow));
}
@media (max-width: 900px) { html.rgb-on .steps .track-fill { -webkit-mask: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 7px); mask: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 7px); } }
html.rgb-on .steps.has-rgb-track::before, html.rgb-on .steps.has-rgb-track .track-fill { opacity: 0; }
.rgb-track { display: none; }
html.rgb-on .rgb-track { display: block; position: absolute; z-index: 0; pointer-events: none; }
html.rgb-on .steps .step { z-index: 1; }

/* Nodes (CSS-only fallback): switch on one by one after the reveal */
html.rgb-on .steps.in .step::before { animation: rgb-node .6s var(--ease) both; box-shadow: 0 0 12px 1px var(--rgb-glow); }
html.rgb-on .steps.in .step:nth-of-type(2)::before { animation-delay: .45s; }
html.rgb-on .steps.in .step:nth-of-type(3)::before { animation-delay: .9s; }
html.rgb-on .steps.in .step:nth-of-type(4)::before { animation-delay: 1.35s; }
html.rgb-on .steps.in .step:nth-of-type(5)::before { animation-delay: 1.8s; }
@keyframes rgb-node { to { background: var(--c2); border-color: #fff; } }

/* Nodes with the canvas strip: the JS sets per node
   --node / --node-ring / --node-glow = the strip colour at that point (follows the scene; unset until the fill reaches it)
   --lit 0–1 = how close the running light is → the node swells and brightens like a bulb */
html.rgb-on .steps.has-rgb-track .step::before {
  animation: none;
  background: var(--node, var(--lm-bg-alt));
  border-color: var(--node-ring, rgba(255, 255, 255, .7));
  transform: scale(calc(1 + var(--lit, 0) * .75));
  filter: brightness(calc(1 + var(--lit, 0) * .55));
  box-shadow: 0 0 calc(8px + var(--lit, 0) * 26px) calc(var(--lit, 0) * 5px) var(--node-glow, transparent);
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}

/* Balanced timeline (desktop): each node sits centred over its column and the text centres under it,
   so the strip (01 centre → 05 centre) has equal margins on both sides. Mobile keeps the vertical line on the left. */
@media (min-width: 901px) {
  html.rgb-on .steps.has-rgb-track .step { text-align: center; }
  html.rgb-on .steps.has-rgb-track .step::before { left: 50%; margin-left: -7.5px; }
  html.rgb-on .steps.has-rgb-track .step p { margin-inline: auto; max-width: 24ch; }
}

/* ---------- 8. Why list: the small bars become 3-pixel LED segments ---------- */
html.rgb-on .why i {
  height: 3px; width: 34px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 13px);
          mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 13px);
  filter: drop-shadow(0 0 6px var(--rgb-glow));
}
html.rgb-on .why li { transition: background .5s var(--ease); }
html.rgb-on .why li:hover { background: linear-gradient(180deg, var(--rgb-faint), transparent 70%); }

/* ---------- 9. Contact card: slow lit border ---------- */
html.rgb-on .contact-card { position: relative; }
html.rgb-on .contact-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 60%, var(--c1) 72%, var(--c2) 82%, var(--c3) 92%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rgb-spin 8s linear infinite;
}
/* Buttons with white text: scene colours mixed toward the brand navy so light scenes (Relax, Arctic) keep contrast */
html.rgb-on .btn-primary, html.rgb-on .cta-call {
  background: linear-gradient(90deg, color-mix(in oklab, var(--c1) 58%, #0B0F19), color-mix(in oklab, var(--c2) 58%, #0B0F19) 52%, color-mix(in oklab, var(--c3) 58%, #0B0F19));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2) 45%, transparent);
}
html.rgb-on .cta-call:hover { box-shadow: inset 0 0 0 1px var(--c2), 0 14px 36px -12px var(--c2); }
html.rgb-on .btn-primary:hover { box-shadow: inset 0 0 0 1px var(--c2), 0 12px 36px -10px var(--c2); }

/* ---------- 10. Footer bar: LED chase ---------- */
html.rgb-on .footer-bottom .bar {
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px);
          mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px);
  background-size: 200% 100%; animation: rgb-sheen 3s linear infinite alternate;
  filter: drop-shadow(0 0 6px var(--rgb-glow));
}

/* ---------- 11. Ambient cursor light (desktop only) ---------- */
.rgb-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.rgb-on .rgb-cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 1; width: 520px; height: 520px; margin: -260px 0 0 -260px;
    border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .6s;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 9%, transparent), transparent);
    transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0);
  }
  html.rgb-on .rgb-cursor.on { opacity: 1; }
}

/* =========================================================
   v0.2 additions
   ========================================================= */

/* Type system: section headings + big numbers use the hero display face (logo keeps the original brand font) */
html.rgb-on[data-font="cinzel"] .h2 { font-family: var(--font-masc); font-weight: 400; letter-spacing: .05em; line-height: 1.16; font-size: clamp(28px, 3.7vw, 48px); }
html.rgb-on[data-font="wide"] .h2 { font-family: var(--font-wide); font-weight: 400; letter-spacing: .03em; line-height: 1.3; font-size: clamp(22px, 2.8vw, 36px); }
html.rgb-on[data-font="cinzel"] .trio b { font-family: var(--font-masc); font-weight: 500; }
html.rgb-on[data-font="wide"] .trio b { font-family: var(--font-wide); font-weight: 400; font-size: clamp(34px, 3.6vw, 48px); }
html.rgb-on:not([data-font="original"]) .footer-tagline { color: var(--rgb-brass); }

/* SET THE MOOD: a glass control panel with a scene counter */
html.rgb-on .mood { position: relative; }
html.rgb-on .mood > div:first-child, html.rgb-on .dimmer {
  padding: 16px 20px 14px; border-radius: 16px;
  background: rgba(11, 15, 25, .52); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px -24px #000;
}
html.rgb-on .dimmer { width: 220px; }
html.rgb-on .mood-label { display: flex; align-items: center; gap: 0; }
html.rgb-on .rgb-count { margin-left: auto; padding-left: 24px; font-variant-numeric: tabular-nums; letter-spacing: .14em; color: var(--lm-text); }
html.rgb-on .rgb-count small { font-size: inherit; color: var(--lm-text-muted); }
html.rgb-on .scene-name { margin-top: 12px; }
@media (max-width: 600px) { html.rgb-on .dimmer, html.rgb-on .mood > div:first-child { width: 100%; padding: 14px 16px 12px; } html.rgb-on .swatches { gap: 9px; flex-wrap: nowrap; } html.rgb-on .sw { width: 24px; height: 24px; flex: none; } html.rgb-on .sw::after { inset: -4px; } }

/* Spaces: cove light washes up from the bottom edge on hover */
html.rgb-on .space-body::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220%; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--c2) 34%, transparent), color-mix(in srgb, var(--c3) 10%, transparent) 45%, transparent 75%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .7s var(--ease);
}
html.rgb-on .space:hover .space-body::before, html.rgb-on .space:focus-visible .space-body::before { opacity: 1; }

/* Projects: light spills onto the floor under the photo */
html.rgb-on .project .ph { transition: box-shadow .8s var(--ease); }
html.rgb-on .project:hover .ph { box-shadow: 0 36px 60px -34px var(--c2), 0 18px 40px -30px var(--c1); }
html.rgb-on .project:hover .chips span { border-color: color-mix(in srgb, var(--c2) 45%, transparent); }
html.rgb-on .chips span { transition: border-color .5s var(--ease); }

/* =========================================================
   v0.3 — inner pages (luminos78-pages.css components)
   ========================================================= */

/* Page hero: photo powers on, scene light leaks in from the bottom, LED line along the bottom edge */
html.rgb-on .page-hero-bg img { animation: rgb-page-on 1.6s .1s var(--ease) both; }
@keyframes rgb-page-on { from { filter: brightness(.1) saturate(.5); transform: scale(1.04); } }
html.rgb-on .page-hero-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(70% 60% at 15% 110%, color-mix(in srgb, var(--c2) 30%, transparent), transparent 70%),
              radial-gradient(50% 50% at 95% 100%, color-mix(in srgb, var(--c3) 22%, transparent), transparent 70%);
}
html.rgb-on .page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c1) 15%, var(--c2) 50%, var(--c3) 85%, transparent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px);
          mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 7px);
  filter: drop-shadow(0 0 6px var(--rgb-glow));
  transform: scaleX(0); transform-origin: left; animation: rgb-draw 1.6s .5s var(--ease) forwards;
}
@keyframes rgb-draw { to { transform: scaleX(1); } }
html.rgb-on .page-hero-inner { animation: rgb-rise 1s .45s var(--ease) both; }
html.rgb-on[data-font="cinzel"] .page-hero .display-title { font-family: var(--font-masc); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; line-height: 1.08; font-size: clamp(34px, 5vw, 72px); max-width: 18ch; }
html.rgb-on[data-font="wide"] .page-hero .display-title { font-family: var(--font-wide); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; font-size: clamp(24px, 3.4vw, 46px); max-width: 22ch; }

/* Breadcrumb: the current page has an indicator light */
html.rgb-on .breadcrumb li:last-child { color: var(--lm-text); }
html.rgb-on .breadcrumb li:last-child::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 10px; border-radius: 50%; vertical-align: 2px; background: var(--c2); box-shadow: 0 0 8px var(--c2); }

/* Feature photos, cards, gallery tiles: cursor-lit edge like the homepage cards */
html.rgb-on .feature-media, html.rgb-on .gallery-item, html.rgb-on .card { position: relative; }
html.rgb-on .feature-media { border-radius: var(--radius); }
html.rgb-on .feature-media::before, html.rgb-on .gallery-item::before, html.rgb-on .card::before {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); padding: 1px; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 120%), var(--c2), color-mix(in srgb, var(--c3) 50%, transparent) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s var(--ease);
}
html.rgb-on .feature-media:hover::before, html.rgb-on .gallery-item:hover::before, html.rgb-on .gallery-item:focus-visible::before, html.rgb-on .card:hover::before { opacity: 1; }
html.rgb-on .feature-media img { transition: box-shadow .8s var(--ease); }
html.rgb-on .feature:hover .feature-media img { box-shadow: 0 40px 70px -40px var(--c2), 0 20px 50px -36px var(--c1); }
html.rgb-on .gallery-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: var(--lm-gradient); box-shadow: 0 -6px 22px 2px var(--rgb-faint), 0 0 8px var(--rgb-glow);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease);
}
html.rgb-on .gallery-item:hover::after, html.rgb-on .gallery-item:focus-visible::after { transform: scaleX(1); }
html.rgb-on .card { transition: background .5s var(--ease); }
html.rgb-on .card:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 7%, var(--lm-surface)), var(--lm-surface) 60%); }

/* Lists and labels: LED segments + indicator dots */
html.rgb-on .check-list li::before {
  height: 3px; width: 16px; top: .74em;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px); mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px);
  filter: drop-shadow(0 0 4px var(--rgb-glow));
}
html.rgb-on .facts b::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; vertical-align: 1px; background: var(--c2); box-shadow: 0 0 8px var(--c2); }
html.rgb-on .systems span, html.rgb-on .chips span { transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
html.rgb-on .systems span:hover, html.rgb-on .chips span:hover { border-color: color-mix(in srgb, var(--c2) 60%, transparent); box-shadow: 0 0 18px -6px var(--c2); }

/* Projects filter: the active filter is "switched on" */
html.rgb-on .filter { transition: background .3s, color .3s, border-color .3s, box-shadow .4s; }
html.rgb-on .filter:hover { border-color: color-mix(in srgb, var(--c2) 60%, transparent); }
html.rgb-on .filter[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--c2), 0 0 24px -4px var(--c2); }

/* FAQ: an open question lights its bottom edge */
html.rgb-on .faq details { transition: border-color .4s; }
html.rgb-on .faq details[open] { border-image: linear-gradient(90deg, var(--c1), var(--c2) 40%, var(--c3) 70%, transparent) 1; }
html.rgb-on .faq details[open] summary::after { color: var(--c2); text-shadow: 0 0 12px var(--c2); }
html.rgb-on .faq summary:hover { color: #fff; }

/* CTA band: the glow follows the scene and breathes slowly */
html.rgb-on .cta-band { position: relative; isolation: isolate; background: none; }
html.rgb-on .cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 70% at 50% 100%, color-mix(in srgb, var(--c2) 26%, transparent), color-mix(in srgb, var(--c3) 8%, transparent) 50%, transparent 72%);
  animation: rgb-breathe 6s ease-in-out infinite alternate;
}
@keyframes rgb-breathe { from { opacity: .65; } to { opacity: 1; } }

/* Previous / next space links */
html.rgb-on .space-nav a { position: relative; padding-bottom: 8px; }
html.rgb-on .space-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lm-gradient); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); box-shadow: 0 0 10px var(--rgb-glow); }
html.rgb-on .space-nav a:last-child::after { transform-origin: right; }
html.rgb-on .space-nav a:hover::after { transform: scaleX(1); }

/* Case study result quote: soft scene glow behind */
html.rgb-on .case-result { position: relative; isolation: isolate; }
html.rgb-on .case-result::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(760px, 90%); height: 70%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 16%, transparent), transparent); }

/* Lightbox: scene light behind the photo (::backdrop may not inherit, so fallbacks are set) */
html.rgb-on .lightbox::backdrop { background: radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--c2, #A855F7) 20%, transparent), transparent 70%), rgba(5, 7, 13, .95); }
html.rgb-on .lightbox img { box-shadow: 0 40px 90px -40px var(--c2); }
html.rgb-on .lb-btn:hover { border-color: var(--c2); box-shadow: 0 0 18px -2px var(--c2); background: rgba(11, 15, 25, .8); }

/* =========================================================
   v0.5 — client requests
   ========================================================= */

/* Hero: no scene-name line under the swatches (the counter "10 / 13" stays). Kept for screen readers. */
html.rgb-on .hero .scene-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* Smart Control: no "รองรับระบบ Philips Hue · WiZ · Govee · Custom RGB+CCT" line
   (in the real theme, remove it from the template instead of hiding it) */
html.rgb-on .control .works-with { display: none; }

/* =========================================================
   Mood dial — the light switch that follows you to every page
   ========================================================= */
.rgb-dial { display: none; }
html.rgb-on .rgb-dial {
  display: block; position: fixed; z-index: 85;
  right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
html.rgb-on .rgb-dial.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; }
.rgb-dial-btn {
  position: relative; width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(11, 15, 25, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -14px #000, 0 0 24px -6px var(--c2); transition: box-shadow .4s, transform .4s var(--ease);
}
.rgb-dial-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px #000, 0 0 30px -2px var(--c2); }
.rgb-dial-btn::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: conic-gradient(from 200deg, var(--c1), var(--c2), var(--c3), var(--c1)); }
.rgb-dial-btn::after { content: ''; position: absolute; inset: 19px; border-radius: 50%; background: #0B0F19; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.rgb-dial-panel {
  position: absolute; right: 0; bottom: 64px; width: 236px; padding: 18px 18px 16px; border-radius: 18px;
  background: rgba(11, 15, 25, .9); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -24px #000, 0 0 40px -18px var(--c2);
  transform-origin: bottom right; animation: rgb-pop .35s var(--ease);
}
@keyframes rgb-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.rgb-dial-hd { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .32em; color: var(--lm-text-muted); margin-bottom: 14px; font-family: var(--font-en); }
.rgb-dial-hd b { font-weight: 400; letter-spacing: .14em; color: var(--lm-text); font-variant-numeric: tabular-nums; }
.rgb-dial-sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.rgb-dial-sw button { aspect-ratio: 1; width: 100%; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative; transition: transform .3s var(--ease); }
.rgb-dial-sw button:hover { transform: scale(1.12); }
.rgb-dial-sw button[aria-pressed="true"] { box-shadow: 0 0 0 2px #0B0F19, 0 0 0 3px rgba(255, 255, 255, .9), 0 0 16px 2px var(--c2); }
.rgb-dial-name { margin-top: 14px; font-family: var(--font-en); font-size: 13px; color: var(--lm-text); }
.rgb-dial-name span { display: block; margin-top: 2px; font-family: var(--font-th); font-size: 12px; color: var(--lm-text-muted); }
@media (max-width: 768px) {
  html.rgb-on .rgb-dial { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
  .rgb-dial-btn { width: 46px; height: 46px; }
  .rgb-dial-btn::before { inset: 8px; } .rgb-dial-btn::after { inset: 17px; }
  .rgb-dial-panel { bottom: 58px; width: min(272px, calc(100vw - 28px)); }
}

@media (prefers-reduced-motion: reduce) {
  html.rgb-on .hero::after, html.rgb-on .hero::before, html.rgb-on .hero-copy, html.rgb-on .mood,
  html.rgb-on .hero-display .lit, html.rgb-on .clients-marquee::after,
  html.rgb-on .header-cta::before, html.rgb-on .contact-card::after, html.rgb-on .footer-bottom .bar,
  html.rgb-on .mood-label::before, html.rgb-on .steps.in .step::before,
  html.rgb-on .page-hero-bg img, html.rgb-on .page-hero-inner, html.rgb-on .cta-band::before, .rgb-dial-panel { animation: none; }
  html.rgb-on .page-hero::after { animation: none; transform: none; }
  html.rgb-on .hero::after, html.rgb-on .hero::before, html.rgb-on .clients-marquee::after { display: none; }
  html.rgb-on { transition: none; }
}