/* ==========================================================================
   THE ROYAL™ — Strategy First. Growth Always.
   LIRCLE Architectural Motion & Visual System (Orange Edition)
   Fonts: Archivo & Archivo Expanded (125% stretch)
   Colors: Matte Black (#141414) + Electric Orange (#FF5500) + Warm Paper (#F7F7F2)
   ========================================================================== */

:root {
  /* Atelier Colorist Palette (Venetian Vermilion + Chromatic Obsidian + Archival Rag) */
  --o: #FF4D00;            /* Aristocratic Venetian Vermilion */
  --o-hover: #FF6622;      /* Warm Tangerine Amber */
  --o-deep: #D83A00;       /* Burnt Terracotta Base */
  --o-glow: rgba(255, 77, 0, 0.32);
  --o-tint: rgba(255, 77, 0, 0.08);
  --o-grad: linear-gradient(155deg, #FF5500 0%, #E63B00 100%);

  /* Chromatic Darks (Warm Umber Undertone - Never flat dead black) */
  --d: #171615;            /* Deep Obsidian Charcoal */
  --d-card: #1E1D1B;       /* Warm Graphite Card */
  --d-elevated: #242220;   /* Sculptural Surface */
  --l: #F4F2EC;            /* Alabaster Silk Text */
  --m: #8E8A82;            /* Warm Silver Umber */
  --bdr: rgba(255, 255, 255, 0.09); /* Delicate Ethereal Hairline */
  --bdr-warm: rgba(255, 77, 0, 0.22);
  
  /* Museum-Grade Archival Paper / Linen (Fine Artist Editorial Canvas) */
  --paper: #F5F3EC;        /* Tactile Archival Museum Rag */
  --paper-card: #FFFFFF;   /* Crisp Gallery White */
  --paper-card-subtle: #FAF9F5;
  --ink: #171615;          /* Warm Espresso Charcoal Ink */
  --muted: #6B6760;        /* Natural Slate Umber */
  --line: #E2DFD6;         /* Fine Stone Line */
  --field: #FDFDFB;

  /* Typography: Archivo 125% Stretch */
  --font: 'Archivo', 'Archivo Expanded', -apple-system, BlinkMacSystemFont, sans-serif;
  --stretch: 125%;

  /* Motion Physics */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy & Theme Compatibility */
  --gold: var(--o);
  --gold-glow: var(--o-glow);
  --gold-dim: var(--o-tint);
  --border: var(--bdr);
  --card-bg: var(--d-card);
  --silk: var(--l);
  --text-muted: var(--m);
  --font-sans: var(--font);
  --font-serif: var(--font);
  --font-mono: var(--font);
}

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

html.lenis, html.lenis body {
  height: auto;
}

html {
  overflow-x: hidden;
  background-color: var(--d);
  color: var(--l);
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--font);
  font-stretch: var(--stretch);
  background-color: var(--d);
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(255, 77, 0, 0.08) 0%, transparent 65%),
    radial-gradient(circle at 85% 30%, rgba(255, 120, 40, 0.035) 0%, transparent 50%),
    radial-gradient(circle at 15% 75%, rgba(255, 77, 0, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--l);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* Microscopic Fine-Art Archival Paper Grain Texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99990;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

::selection {
  background: var(--o);
  color: #FFFFFF;
}

/* ==========================================================================
   Dual Fluid Cursor (Orange Edition with Dynamic Contrast Adaptation)
   ========================================================================== */
#cur {
  position: fixed;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--o);
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 9999999 !important;
  will-change: transform;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 10px rgba(255, 85, 0, 0.4);
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              background 0.22s ease, 
              border 0.22s ease, 
              box-shadow 0.22s ease;
}

#cur2, #cur-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255, 85, 0, 0.55);
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 9999998 !important;
  will-change: transform;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.2s ease,
              width 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              border 0.22s ease, 
              box-shadow 0.22s ease;
}

/* Hover state on interactive targets */
body.ch #cur {
  width: 14px;
  height: 14px;
  background: var(--o);
  box-shadow: 0 0 14px var(--o);
}

body.ch #cur2, body.ch #cur-dot {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--o);
  background: rgba(255, 85, 0, 0.08);
  opacity: 1 !important;
}

/* Dynamic High-Contrast Mode for Orange Profiles & Open Menu Overlaps */
body.cur-contrast #cur {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2px #0D0C0B, 0 4px 16px rgba(0, 0, 0, 0.55);
}

body.cur-contrast #cur2, body.cur-contrast #cur-dot {
  border: 1.5px solid #FFFFFF !important;
  box-shadow: 0 0 0 1px #0D0C0B, 0 0 22px rgba(255, 255, 255, 0.65);
}

body.cur-contrast.ch #cur {
  width: 14px;
  height: 14px;
  background: #FFFFFF !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}

body.cur-contrast.ch #cur2, body.cur-contrast.ch #cur-dot {
  width: 52px;
  height: 52px;
  border: 1.5px solid #FFFFFF !important;
  background: rgba(255, 255, 255, 0.16) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Preloader (Lircle Vector Scanline)
   ========================================================================== */
#pre {
  position: fixed;
  inset: 0;
  background: #050505;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 48px 56px;
  clip-path: inset(0 0 0 0);
  overflow: hidden;
}

.pre-field {
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(90deg, rgba(255, 85, 0, 0.1) 1px, transparent 1px) 0 0 / 12vw 100%,
    linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 18vh,
    radial-gradient(circle at 50% 50%, rgba(255, 85, 0, 0.18), transparent 34%),
    #050505;
  opacity: 0.35;
  z-index: 0;
}

.pre-brand {
  position: relative;
  z-index: 3;
  text-align: center;
}

.pre-monogram {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}

.pre-monogram span {
  color: var(--o);
}

.pre-sub {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 14px;
}

.pre-line-box {
  width: min(360px, 50vw);
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 32px auto 0;
  position: relative;
  overflow: hidden;
}

.pre-line-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--o), transparent);
}

/* ==========================================================================
   Navigation & Floating Orange Dropdown (Exact LIRCLE Screenshot Pattern)
   ========================================================================== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding: 18px 60px;
  background: rgba(13, 12, 11, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: background 0.3s ease, padding 0.3s ease;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}

.nl {
  pointer-events: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nl-emblem,
.nl-logo-img {
  height: 32px;
  width: 32px;
  max-width: 32px;
  max-height: 32px;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(255, 77, 0, 0.4));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.nl:hover .nl-emblem,
.nl:hover .nl-logo-img {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 16px rgba(255, 77, 0, 0.65));
}

.nl-title {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s;
}

.nl-title span {
  color: var(--o);
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 2px;
}

.nl:hover .nl-title {
  color: var(--o);
}

/* Preloader Emblem Logo */
.pre-logo-emblem {
  height: clamp(64px, 12vw, 110px);
  width: auto;
  display: block;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 20px rgba(255, 120, 0, 0.45));
  animation: preEmblemPulse 2s ease-in-out infinite alternate;
}

@keyframes preEmblemPulse {
  from { transform: scale(0.96); opacity: 0.85; }
  to { transform: scale(1.04); opacity: 1; filter: drop-shadow(0 0 35px rgba(255, 120, 0, 0.7)); }
}

/* Menu Overlay Logo Image */
.menu-logo-img {
  height: 48px;
  width: auto;
  display: block;
  margin-bottom: 8px;
}

/* Footer Big Brand Logo Image */
.ft-logo-img {
  height: clamp(40px, 6vw, 72px);
  width: auto;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.ft-big:hover .ft-logo-img {
  transform: scale(1.04);
}

/* ==========================================================================
   THEME-SPECIFIC BRAND LOGO ACCENT FILTERS (Footer & Accent Alignment)
   ========================================================================== */
body.ev-body .ft-logo-img { filter: hue-rotate(140deg) brightness(1.25) drop-shadow(0 0 12px rgba(0, 229, 255, 0.45)); }
body.tech-body .ft-logo-img { filter: hue-rotate(90deg) brightness(1.25) drop-shadow(0 0 12px rgba(167, 139, 250, 0.45)); }
body.lx-body .ft-logo-img { filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(229, 231, 235, 0.4)); }
body.mfg-body .ft-logo-img { filter: hue-rotate(70deg) brightness(1.15) drop-shadow(0 0 12px rgba(78, 186, 136, 0.45)); }
body.re-body .ft-logo-img { filter: hue-rotate(110deg) brightness(1.15) drop-shadow(0 0 12px rgba(0, 168, 150, 0.45)); }
body.adv-body .ft-logo-img { filter: hue-rotate(-20deg) brightness(1.15) drop-shadow(0 0 12px rgba(195, 166, 107, 0.45)); }
body.hc-body .ft-logo-img { filter: hue-rotate(130deg) brightness(1.2) drop-shadow(0 0 12px rgba(107, 164, 184, 0.45)); }
body.hosp-body .ft-logo-img { filter: hue-rotate(-15deg) brightness(1.15) drop-shadow(0 0 12px rgba(181, 154, 98, 0.45)); }
body.edu-body .ft-logo-img { filter: hue-rotate(85deg) brightness(1.25) drop-shadow(0 0 12px rgba(0, 208, 132, 0.45)); }

.nav-talk {
  pointer-events: auto;
  color: #fff;
  padding: 0 20px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--o-grad);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(255, 77, 0, 0.35);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.nav-talk:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(255, 77, 0, 0.55);
  color: #fff;
}

/* Floating Menu Pill (Luxury Dark Glass Pill) */
.menu-shell {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 130px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  pointer-events: auto;
  transition: all 0.35s ease;
}

.menu-shell:hover:not(.open) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translate(-50%, -52%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.menu-shell.scrolled:not(.open) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Full-Screen Luxury Venetian Atelier Navigation (Desktop, Laptop, Tablet, Mobile) */
.menu-shell.open {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--o-grad) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.menu-shell.open .menu-toggle {
  width: 100% !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 56px !important;
  border-bottom: 1px solid rgba(20, 20, 20, 0.16) !important;
  background: transparent !important;
  cursor: pointer !important;
  color: var(--ink) !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.menu-shell.open .menu-toggle span:first-child {
  font-size: 0 !important;
}

.menu-shell.open .menu-toggle span:first-child::after {
  content: "CLOSE" !important;
  font-family: var(--font) !important;
  font-stretch: var(--stretch) !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.14em !important;
  color: var(--ink) !important;
}

.menu-shell.open .menu-ico {
  width: 20px !important;
  height: 20px !important;
  position: relative !important;
  display: inline-block !important;
}

.menu-shell.open .menu-ico::before {
  top: 9px !important;
  left: 0 !important;
  right: 0 !important;
  transform: rotate(45deg) !important;
  background: var(--ink) !important;
  height: 2px !important;
  border-radius: 1px !important;
}

.menu-shell.open .menu-ico::after {
  top: 9px !important;
  left: 0 !important;
  right: 0 !important;
  transform: rotate(-45deg) !important;
  background: var(--ink) !important;
  height: 2px !important;
  border-radius: 1px !important;
}

.menu-panel {
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: max-height 0.55s var(--ease-smooth), border-color 0.35s;
}

.menu-shell.open .menu-panel {
  flex: 1 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 36px 56px 48px !important;
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 60px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  border-top: none !important;
}

.menu-shell.open .menu-links {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.menu-shell.open .menu-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
  font-stretch: var(--stretch) !important;
  font-size: clamp(20px, 2vw, 29px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(20, 20, 20, 0.12) !important;
  transition: color 0.25s ease, padding-left 0.25s ease !important;
  line-height: 1.2 !important;
}

.menu-shell.open .menu-links a:hover {
  padding-left: 14px !important;
  color: #000000 !important;
}

.menu-shell.open .menu-links a::after {
  content: '↗' !important;
  font-size: 0.65em !important;
  color: var(--ink) !important;
  opacity: 0 !important;
  transform: translate(-10px, 10px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.menu-shell.open .menu-links a:hover::after {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

.menu-shell.open .menu-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  padding: 6px 0 0 56px !important;
  border-left: 1px solid rgba(20, 20, 20, 0.16) !important;
  color: var(--ink) !important;
}

.menu-shell.open .menu-brand-text {
  font-family: var(--font) !important;
  font-stretch: var(--stretch) !important;
  font-size: clamp(26px, 2.6vw, 38px) !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.menu-shell.open .menu-meta-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: rgba(20, 20, 20, 0.85) !important;
}

.menu-links a.menu-link-cms {
  color: var(--ink) !important;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-links a.menu-link-cms .cms-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: #FFFFFF;
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 8px;
  line-height: 1;
}

.menu-brand-text span {
  color: var(--ink);
  font-size: 0.6em;
  vertical-align: super;
}

.menu-meta-sub {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.72);
}

.menu-offices-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0;
}

.menu-off-item {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(20, 20, 20, 0.88);
}

.menu-off-item strong {
  color: var(--ink);
  font-weight: 800;
  display: inline-block;
  margin-right: 4px;
}

.menu-contact-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.menu-contact-link {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.2s ease;
}

.menu-contact-link:hover {
  opacity: 0.65;
}

.menu-meta a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
}

/* ==========================================================================
   Hero Section (Exact LIRCLE Layout)
   ========================================================================== */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 56px 64px;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #080808;
  opacity: 0.42;
  will-change: transform;
  transition: opacity 1.2s var(--ease-smooth);
}

/* 16:9 Running Cover Video (Exact LIRCLE Video System) */
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.4s var(--ease-smooth);
  will-change: transform, opacity;
  pointer-events: none;
  background: #080808;
}

.hero-media.video-on video {
  opacity: 0.48;
}

.hero-media.video-on img {
  opacity: 0;
}

/* Floating Hero 16:9 Video Controller Pill */
.hero-vid-controls {
  position: absolute;
  left: 56px;
  bottom: 56px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  background: rgba(23, 22, 21, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 16px;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 77, 0, 0.08);
  transition: all 0.35s var(--ease-smooth);
}

.hero-vid-controls:hover {
  border-color: var(--o);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(255, 77, 0, 0.22);
}

.hvc-btn {
  background: transparent;
  border: none;
  color: var(--l);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.25s;
}

.hvc-btn:hover {
  color: var(--o);
}

.hvc-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 8px;
}

.hvc-sound-wave {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
}

.hvc-sound-wave i {
  width: 2px;
  height: 100%;
  background: var(--o);
  border-radius: 1px;
  animation: soundBar 1.1s ease-in-out infinite alternate;
}

.hvc-sound-wave i:nth-child(2) { animation-delay: 0.2s; height: 65%; }
.hvc-sound-wave i:nth-child(3) { animation-delay: 0.4s; height: 85%; }
.hvc-sound-wave i:nth-child(4) { animation-delay: 0.15s; height: 45%; }

.hvc-sound-wave.muted i {
  animation: none !important;
  height: 2px !important;
  background: var(--m) !important;
}

@keyframes soundBar {
  0% { height: 20%; }
  100% { height: 100%; }
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.25) 50%,
    rgba(10, 10, 10, 0.5) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1500px;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  overflow: hidden;
}

.hero-meta span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--o);
}

.hero-h {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: clamp(44px, 7.2vw, 118px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.035em;
  max-width: 1500px;
}

.hero-h .hl {
  display: block;
  overflow: hidden;
}

.hero-h .hl span {
  display: block;
  will-change: transform;
}

.hero-h .orange {
  color: var(--o);
}

.hero-sub {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 56px;
  gap: 48px;
}

.hero-desc {
  max-width: 440px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2;
  color: rgba(231, 231, 231, 0.7);
}

.hero-desc strong {
  color: #fff;
  font-weight: 700;
}

.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}

/* LIRCLE Buttons with Orange */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none;
  position: relative;
  overflow: hidden;
  border: none;
  transition: transform 0.35s, box-shadow 0.35s;
}

.btn-fill, .btn-gold {
  background: var(--o);
  color: var(--d);
}

.btn-fill:hover, .btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px var(--o-glow);
}

.btn-line {
  background: transparent;
  color: var(--l);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.3s, color 0.3s;
}

.btn-line:hover {
  border-color: var(--o);
  color: var(--o);
}

.hero-scrolldown {
  position: absolute;
  right: 56px;
  bottom: 80px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hsd-line {
  width: 1px;
  height: 54px;
  background: linear-gradient(var(--o), transparent);
}

.hsd-t {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  writing-mode: vertical-lr;
}

/* ==========================================================================
   Marquee Ticker (Orange Diamond)
   ========================================================================== */
.marq {
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  background: #0d0d0d;
  padding: 16px 0;
  overflow: hidden;
}

.marq-in {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marq-i {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  white-space: nowrap;
}

.marq-t {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--m);
}

.marq-d {
  color: var(--o);
  font-size: 7px;
}

/* ==========================================================================
   Philosophy / Point of View (LIRCLE Word-by-Word Scrub)
   ========================================================================== */
.philo {
  padding: 22vh 56px;
  background: var(--d);
  border-top: 1px solid var(--bdr);
}

.philo-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.philo-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--m);
}

.philo-txt {
  font-size: clamp(26px, 3.8vw, 54px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  max-width: 1280px;
}

.philo-txt .pw {
  color: rgba(231, 231, 231, 0.13);
}

.philo-txt .accent {
  font-style: italic;
  color: var(--o);
}

/* ==========================================================================
   Services / Disciplines (LIRCLE Floating Hover Preview)
   ========================================================================== */
.svcs {
  padding: 18vh 0;
  background: var(--d);
  border-top: 1px solid var(--bdr);
}

/* ==========================================================================
   Core Disciplines & Services (Exact LIRCLE Motion & Visual Architecture)
   ========================================================================== */
.disciplines, .svcs {
  padding: 130px 0;
  position: relative;
  background: var(--d);
  background-image: radial-gradient(circle at 85% 35%, rgba(255, 77, 0, 0.06) 0%, transparent 60%);
  overflow: hidden;
}

.disc-head, .svcs-head {
  padding: 0 56px;
  margin-bottom: 72px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.sec-lbl, .sec-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 16px;
}

.sec-lbl::before, .sec-tag::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--o);
}

.sec-h {
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.sec-p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--m);
  max-width: 480px;
}

/* Floating Hover Preview Card (Dual-tilt with Vermilion Shadow) */
.svc-float {
  position: fixed;
  width: 290px;
  height: 380px;
  pointer-events: none;
  z-index: 600;
  opacity: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 77, 0, 0.2);
  transform: translate(-50%, -50%) rotate(-6deg) scale(0.7);
  transition: opacity 0.35s, transform 0.35s var(--ease-smooth);
}

.svc-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #101010;
}

.svc-float.on {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-3deg) scale(1);
}

/* Full-width Discipline Rows */
.disc-row, .svc-row {
  display: flex;
  align-items: center;
  padding: 36px 56px;
  border-top: 1px solid var(--bdr);
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: padding-left 0.45s var(--ease-smooth), background-color 0.4s;
  text-decoration: none;
  color: inherit;
}

.disc-row:last-child, .svc-row:last-child {
  border-bottom: 1px solid var(--bdr);
}

.disc-row::before, .svc-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 77, 0, 0.08) 0%, transparent 60%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-smooth);
}

.disc-row:hover::before, .svc-row:hover::before {
  transform: scaleX(1);
}

.disc-row:hover, .svc-row:hover {
  padding-left: 76px;
  background: rgba(255, 77, 0, 0.025);
}

.disc-n, .svc-n {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--bdr);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--m);
  margin-right: 42px;
  flex-shrink: 0;
  transition: all 0.45s var(--ease-smooth);
  position: relative;
  z-index: 1;
}

.disc-row:hover .disc-n, .svc-row:hover .svc-n {
  background: var(--o);
  border-color: var(--o);
  color: #FFFFFF;
  transform: scale(1.1) rotate(360deg);
  box-shadow: 0 0 30px var(--o-glow);
}

.disc-info {
  display: flex;
  align-items: baseline;
  gap: 36px;
  flex-grow: 1;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.disc-name, .svc-name {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: clamp(34px, 4.8vw, 76px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--l);
  transition: color 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
  white-space: nowrap;
}

.disc-row:hover .disc-name, .svc-row:hover .svc-name {
  color: var(--o);
  transform: translateX(6px);
}

.disc-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.disc-tags span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s;
}

.disc-row:hover .disc-tags span {
  border-color: rgba(255, 77, 0, 0.35);
  color: var(--l);
  background: rgba(255, 77, 0, 0.08);
}

.disc-arr, .svc-arr {
  margin-left: auto;
  font-size: 32px;
  color: var(--o);
  opacity: 0;
  transform: translate(-14px, 10px) rotate(-15deg);
  transition: all 0.45s var(--ease-smooth);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.disc-row:hover .disc-arr, .svc-row:hover .svc-arr {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Horizontal Work (LIRCLE Pinned Scrub)
   ========================================================================== */
.hwork {
  position: relative;
  background: var(--d);
  background-image: radial-gradient(circle at 50% 30%, rgba(255, 77, 0, 0.05) 0%, transparent 60%);
  overflow: hidden;
}

.hwork-head {
  padding: 80px 56px 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hw-title {
  font-size: clamp(38px, 5.5vw, 76px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.hw-title em {
  display: block;
  font-style: italic;
  font-weight: 300;
  font-size: 0.45em;
  color: var(--m);
  margin-top: 10px;
}

.hw-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--m);
}

.hw-count b {
  color: var(--o);
  font-size: 20px;
}

.hwrap {
  display: flex;
  gap: 3vw;
  padding: 0 56px 100px;
  width: max-content;
  will-change: transform;
}

.hcard {
  width: 62vw;
  max-width: 880px;
  flex-shrink: 0;
  position: relative;
  cursor: none;
  text-decoration: none;
  color: inherit;
  display: block;
}

.hcard-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.hcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #101010;
  transition: transform 0.8s var(--ease-smooth);
  will-change: transform;
}

.hcard:hover .hcard-img img {
  transform: scale(1.02);
}

.hcard-link {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 54px;
  height: 54px;
  background: var(--o);
  color: var(--d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0;
  transform: translate(8px, -8px);
  transition: all 0.4s var(--ease-smooth);
  z-index: 3;
}

.hcard:hover .hcard-link {
  opacity: 1;
  transform: none;
}

.hcard-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 22px;
}

.hcard-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.hcard-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--m);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hcard-tag::before {
  content: "◆";
  color: var(--o);
  font-size: 6px;
}

.hcard-name {
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: -0.03em;
  transition: color 0.3s;
}

.hcard:hover .hcard-name {
  color: var(--o);
}

.hcard-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 8px;
}

/* ==========================================================================
   The Royal Method (3D Deck Stacking Pin)
   ========================================================================== */
.method {
  position: relative;
  background: var(--d);
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 77, 0, 0.05) 0%, transparent 60%);
  overflow: hidden;
}

.method-pin {
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;
  overflow: hidden;
}

.m-card {
  position: absolute;
  width: min(1340px, calc(100vw - 112px));
  height: min(640px, 78vh);
  background: var(--d-card);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  overflow: hidden;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 77, 0, 0.06);
  will-change: transform, opacity;
}

.m-card-l {
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mc-step {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 20px;
}

.mc-h {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: var(--l);
}

.mc-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--m);
  max-width: 520px;
  margin-bottom: 36px;
}

.mc-outputs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mc-output {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--l);
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
}

.m-card-r {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0E0D0C;
  background-image: radial-gradient(circle at center, rgba(255, 77, 0, 0.12) 0%, rgba(14, 13, 12, 0.98) 75%);
  position: relative;
  overflow: hidden;
  padding: 28px 20px;
}

/* 9:16 Vertical Reel Device Container */
.m-card-reel {
  width: auto;
  height: 100%;
  max-height: 540px;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #000;
  border: 1.5px solid rgba(255, 77, 0, 0.35);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(255, 77, 0, 0.18);
  transition: transform 0.4s var(--ease-smooth), border-color 0.4s, box-shadow 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-card-reel:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--o);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 60px rgba(255, 77, 0, 0.35);
}

.m-reel-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
}

.m-reel-badge {
  position: absolute;
  top: 16px;
  left: 14px;
  background: rgba(14, 13, 12, 0.88);
  border: 1px solid rgba(255, 77, 0, 0.45);
  backdrop-filter: blur(12px);
  color: var(--o);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
}

.m-reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-reel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 14px 14px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 65%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 10;
}

.m-reel-caption {
  flex-grow: 1;
  padding-right: 10px;
}

.m-reel-pill {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 3px;
}

.m-reel-caption p {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.m-reel-sound {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 999px;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
}

.m-reel-sound:hover, .m-reel-sound.active {
  background: var(--o);
  border-color: var(--o);
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 77, 0, 0.5);
}

/* ==========================================================================
   Interactive Challenges Matrix (Dynamic 8-Bottleneck Switcher)
   ========================================================================== */
.challenges {
  padding: 140px 56px;
  background: var(--d);
  background-image: radial-gradient(circle at 15% 50%, rgba(255, 77, 0, 0.05) 0%, transparent 60%);
  border-top: 1px solid var(--bdr);
}

.prob-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  margin-top: 64px;
  align-items: start;
}

.prob-list {
  border-top: 1px solid var(--bdr);
}

.prob-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--bdr);
  color: var(--m);
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: none;
  transition: all 0.35s var(--ease-smooth);
}

.prob-btn span.num {
  font-size: 11px;
  font-weight: 800;
  color: var(--m);
  transition: color 0.3s;
}

.prob-btn:hover {
  color: var(--l);
  background: rgba(255, 77, 0, 0.03);
  padding-left: 24px;
}

.prob-btn.active {
  color: #FFFFFF;
  background: rgba(255, 77, 0, 0.08);
  border-bottom-color: var(--o);
  border-left: 3px solid var(--o);
  padding-left: 24px;
}

.prob-btn.active span.num {
  color: var(--o);
}

.prob-card {
  background: var(--d-card);
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--o);
  padding: 48px;
  position: sticky;
  top: 110px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 77, 0, 0.06);
  border-radius: 4px;
}

.pc-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 14px;
}

.pc-title {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--l);
  margin-bottom: 24px;
  line-height: 1.25;
}

.pc-row {
  padding-top: 20px;
  border-top: 1px solid var(--bdr);
  margin-top: 20px;
}

.pc-sub {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m);
  margin-bottom: 8px;
}

.pc-val {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--l);
}

/* ==========================================================================
   Industries (Sector Context Grid)
   ========================================================================== */
.industries {
  padding: 140px 56px;
  background: var(--d);
  background-image: radial-gradient(circle at 20% 60%, rgba(255, 77, 0, 0.04) 0%, transparent 60%);
  border-top: 1px solid var(--bdr);
}

.ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 64px;
}

.ind-box {
  background: var(--d-card);
  border: 1px solid var(--bdr);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 145px;
  text-decoration: none;
  transition: all 0.35s var(--ease-smooth);
  border-radius: 4px;
}

.ind-box:hover {
  background: var(--d-elevated);
  border-color: var(--o);
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 25px rgba(255, 77, 0, 0.08);
}

.ind-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--m);
  margin-bottom: 24px;
  transition: color 0.3s;
}

.ind-box:hover .ind-num {
  color: var(--o);
}

.ind-name {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--l);
  line-height: 1.35;
}

/* ==========================================================================
   Differentiation Grid (Why Royal is Different)
   ========================================================================== */
.diff {
  padding: 140px 56px;
  background: var(--d);
  border-top: 1px solid var(--bdr);
  background-image: radial-gradient(circle at 80% 30%, rgba(255, 77, 0, 0.05) 0%, transparent 60%);
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
}

.diff-card {
  background: var(--d-card);
  border: 1px solid var(--bdr);
  padding: 44px 34px;
  border-radius: 4px;
  transition: all 0.35s var(--ease-smooth);
}

.diff-card:hover {
  background: var(--d-elevated);
  border-color: var(--o);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 77, 0, 0.08);
}

.diff-n {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--o);
  margin-bottom: 24px;
}

.diff-t {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--l);
  margin-bottom: 16px;
}

.diff-p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--m);
}

/* ==========================================================================
   Strategic Insights Grid (Editorial Publications)
   ========================================================================== */
.insights {
  padding: 140px 56px;
  background: var(--d);
  border-top: 1px solid var(--bdr);
}

.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 64px;
}

.ins-card {
  background: var(--d-card);
  border: 1px solid var(--bdr);
  padding: 44px 36px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  transition: all 0.35s var(--ease-smooth);
}

.ins-card:hover {
  background: var(--d-elevated);
  border-color: var(--o);
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 77, 0, 0.08);
}

.ins-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 16px;
}

.ins-title {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--l);
  margin-bottom: 16px;
}

.ins-desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--m);
}

.ins-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--bdr);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m);
}

/* ==========================================================================
   Hybrid Light Sections: FAQ & Contact
   ========================================================================== */
.faq {
  padding: 14vh 56px;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr);
  gap: 58px;
  align-items: start;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.faq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--o);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-smooth);
}

.faq-item[open]::before, .faq-item:hover::before {
  transform: scaleX(1);
}

.faq-item > * {
  position: relative;
  z-index: 1;
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 0;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 900;
  letter-spacing: -0.03em;
  cursor: none;
  transition: padding-left 0.35s, color 0.35s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  width: 36px;
  height: 36px;
  border: 1px solid rgba(20, 20, 20, 0.18);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 400;
  flex: 0 0 auto;
  transition: transform 0.35s;
}

.faq-item[open] summary, .faq-item:hover summary {
  padding-left: 24px;
  color: var(--ink);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  max-width: 760px;
  padding: 0 76px 30px 24px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2;
  color: rgba(20, 20, 20, 0.78);
}

/* ==========================================================================
   Contact / Private Desk
   ========================================================================== */
.contact {
  padding: 16vh 56px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(380px, 1.08fr);
  gap: 28px;
  margin-top: 56px;
  align-items: stretch;
}

.contact-info {
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 24px 70px rgba(23, 22, 21, 0.06);
  position: relative;
  overflow: hidden;
}

.contact-info h3 {
  color: var(--ink);
}

.contact-info p {
  color: var(--muted);
}

.c-h {
  font-size: clamp(34px, 4.8vw, 74px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--ink);
}

.c-h em {
  font-style: italic;
  color: var(--o);
}

.contact-details {
  background: #FAF9F5;
  border: 1px solid var(--line);
  padding: 14px 24px 24px;
  margin-top: 40px;
}

.c-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s;
}

.c-row:hover {
  padding-left: 8px;
}

.c-row:last-child {
  border-bottom: none;
}

.c-ico {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 77, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--o);
  background: rgba(255, 77, 0, 0.08);
}

.c-val strong {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.c-val a, .c-val span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.c-val a:hover {
  color: var(--o);
}

/* LIRCLE Contact Form with Editorial Paper Canvas */
.cform {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 38px;
  box-shadow: 0 24px 70px rgba(23, 22, 21, 0.06);
}

.cform h3 {
  color: var(--ink) !important;
}

.cform p {
  color: var(--muted) !important;
}

.fg {
  position: relative;
}

.fg label {
  position: absolute;
  top: 15px;
  left: 18px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  transition: color 0.3s;
}

.fg:focus-within label {
  color: var(--o);
}

.fg input, .fg select, .fg textarea {
  width: 100%;
  background: #FAF9F5;
  border: 1px solid var(--line);
  border-top: 2px solid transparent;
  color: var(--ink);
  padding: 38px 18px 15px;
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 13px;
  outline: none;
  transition: all 0.3s;
}

.fg:focus-within input, .fg:focus-within select, .fg:focus-within textarea {
  border-color: var(--o);
  border-top-color: var(--o);
  background: #FFFFFF;
}

.fg textarea {
  resize: none;
  height: 140px;
}

.fg-r {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.budget-label {
  margin: 10px 0 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.pills-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  background: #FAF9F5;
  border: 1.5px solid var(--line);
  color: var(--muted);
  padding: 10px 24px;
  border-radius: 999px;
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 11px;
  font-weight: 700;
  cursor: none;
  transition: all 0.3s;
}

.pill:hover, .pill.on {
  background: var(--o);
  border-color: var(--o);
  color: #FFFFFF;
}

.send {
  width: 100%;
  background: var(--o-grad);
  color: #FFFFFF;
  border: none;
  padding: 22px;
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.send:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px var(--o-glow);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background: var(--d);
  background-image: radial-gradient(ellipse at 50% 100%, rgba(255, 77, 0, 0.06) 0%, transparent 60%);
  border-top: 1px solid var(--bdr);
  overflow: hidden;
}

.ft-hero {
  padding: 100px 40px 50px;
  display: flex;
  justify-content: center;
}

.ft-big {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: clamp(54px, 13vw, 180px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  text-decoration: none;
  cursor: none;
  will-change: transform, opacity;
  transform-origin: center center;
  transition: filter 0.4s, color 0.4s;
}

.ft-big:hover {
  color: var(--o);
  filter: drop-shadow(0 0 30px var(--o-glow));
}

.ft-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 60px 56px;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}

.ft-bn {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 14px;
  display: block;
}

.ft-grid p {
  font-size: 12px;
  font-weight: 300;
  color: var(--m);
  line-height: 1.95;
  max-width: 260px;
}

.ft-grid h5 {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--m);
  margin-bottom: 18px;
}

.ft-grid ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft-grid ul a {
  color: rgba(231, 231, 231, 0.45);
  text-decoration: none;
  font-size: 12px;
  font-weight: 300;
  transition: color 0.3s, padding-left 0.3s;
}

.ft-grid ul a:hover {
  color: var(--o);
  padding-left: 6px;
}

.ft-office-item {
  margin-top: 10px;
  line-height: 1.5;
}

.ft-office-item strong {
  color: #fff;
  font-size: 11px;
  display: block;
  margin-bottom: 2px;
}

.ft-office-item span {
  color: rgba(231, 231, 231, 0.45);
  font-size: 11px;
  display: block;
  line-height: 1.45;
}

.ft-btm {
  display: flex;
  justify-content: space-between;
  padding: 20px 56px;
  font-size: 10px;
  font-weight: 300;
  color: rgba(231, 231, 231, 0.3);
}

/* ==========================================================================
   Floating WhatsApp Widget
   ========================================================================== */
.wa-fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 16px;
  border-radius: 999px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  transition: all 0.35s var(--ease-smooth);
}

.wa-fab svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  fill: #25D366;
}

.wa-fab span {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: max-width 0.35s var(--ease-smooth), opacity 0.3s;
}

.wa-fab:hover {
  gap: 11px;
  background: var(--o);
  border-color: var(--o);
  color: #141414;
  transform: translateY(-3px);
  box-shadow: 0 20px 52px var(--o-glow);
}

.wa-fab:hover svg {
  fill: #141414;
}

.wa-fab:hover span {
  max-width: 170px;
  opacity: 1;
}

body.wa-defer .wa-fab {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

body.wa-defer.wa-on .wa-fab {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ==========================================================================
   Subpages Dedicated Styles (Work, Capabilities, Industries, Insights, About, Consultation)
   ========================================================================== */
.page-hero {
  padding: 160px 56px 80px;
  background: var(--d);
  background-image: radial-gradient(ellipse at 75% 25%, rgba(255, 77, 0, 0.08) 0%, transparent 60%);
  border-bottom: 1px solid var(--bdr);
  position: relative;
}

/* ==========================================================================
   Colorist Fine-Artist Atelier Paper Theme (Balances Light & Dark)
   ========================================================================== */
body.theme-atelier-paper {
  --card-bg: #FFFFFF;
  --border: var(--line);
  --silk: var(--ink);
  --text-muted: var(--muted);
  --gold: var(--o);
  background-color: var(--paper) !important;
  background-image: 
    radial-gradient(circle at 80% 15%, rgba(255, 77, 0, 0.06) 0%, transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(255, 120, 40, 0.035) 0%, transparent 50%) !important;
  color: var(--ink) !important;
}

body.theme-atelier-paper nav .nl-title {
  color: var(--ink);
}

body.theme-atelier-paper nav .nl-title span {
  color: var(--o);
}

body.theme-atelier-paper nav .nav-talk {
  color: var(--ink);
  mix-blend-mode: normal;
}

body.theme-atelier-paper nav .nav-talk:hover {
  color: var(--o);
}

body.theme-atelier-paper .menu-shell:not(.open) {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(23, 22, 21, 0.14);
  box-shadow: 0 16px 50px rgba(23, 22, 21, 0.08);
}

body.theme-atelier-paper .page-hero {
  background: var(--paper) !important;
  background-image: radial-gradient(circle at 75% 25%, rgba(255, 77, 0, 0.06) 0%, transparent 60%) !important;
  border-bottom: 1px solid var(--line);
}

body.theme-atelier-paper .page-hero-title {
  color: var(--ink);
}

body.theme-atelier-paper .page-hero-title em {
  color: var(--o);
}

body.theme-atelier-paper .page-hero-desc {
  color: var(--muted);
}

body.theme-atelier-paper .contact {
  background: var(--paper);
}

body.theme-atelier-paper .contact-info {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(23, 22, 21, 0.06);
}

body.theme-atelier-paper .cform {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(23, 22, 21, 0.06);
}

body.theme-atelier-paper .cform h3 {
  color: var(--ink) !important;
}

body.theme-atelier-paper .cform p {
  color: var(--muted) !important;
}

.page-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.page-hero-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-hero-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--o);
}

.page-hero-title {
  font-size: clamp(38px, 5.8vw, 96px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.page-hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--o);
}

.page-hero-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--m);
  max-width: 720px;
}

/* Filter Bar */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 28px 56px;
  background: #0d0d0d;
  border-bottom: 1px solid var(--bdr);
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--bdr);
  color: var(--m);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: none;
  transition: all 0.3s;
}

.filter-btn:hover, .filter-btn.active {
  background: var(--o);
  border-color: var(--o);
  color: var(--d);
}

/* Detailed Case Studies */
.cases-container {
  padding: 80px 56px 140px;
  max-width: 1540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 90px;
}

.case-card-detail {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--bdr);
}

/* 9:16 Integrated Vertical Mobile Video Layout */
.case-card-detail.layout-vertical-9-16 {
  grid-template-columns: 360px 1fr;
  gap: 64px;
}

.case-card-detail:last-child {
  border-bottom: none;
}

/* Polymorphic Media Stage: Handles EITHER <img> OR <video>, 16:9 or 9:16 */
.ccd-media, .ccd-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  position: relative;
  background: #0d0d0d;
}

.ccd-media[data-aspect="9:16"], .case-card-detail.layout-vertical-9-16 .ccd-media {
  aspect-ratio: 9 / 16;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 77, 0, 0.1);
}

.ccd-media img, .ccd-media video, .ccd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s var(--ease-smooth);
}

.case-card-detail:hover .ccd-media img,
.case-card-detail:hover .ccd-media video,
.case-card-detail:hover .ccd-img img {
  transform: scale(1.02);
}

/* In-Media Video Audio Toggle Badge */
.ccd-audio-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  background: rgba(18, 17, 16, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all 0.25s;
}

.ccd-audio-toggle:hover {
  border-color: var(--o);
  color: var(--o);
}

.ccd-badge-format {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--o);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ccd-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 12px;
}

.ccd-title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 18px;
}

.ccd-desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--m);
  margin-bottom: 28px;
}

.ccd-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 22px;
  background: var(--d-card);
  border: 1px solid var(--bdr);
}

.ccd-m-val {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--o);
  line-height: 1;
  margin-bottom: 6px;
}

.ccd-m-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m);
}

/* Capabilities Detailed Sections */
.cap-detail-sec {
  padding: 100px 56px;
  border-bottom: 1px solid var(--bdr);
}

.cap-detail-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
  align-items: start;
}

.cap-l-pin {
  position: sticky;
  top: 130px;
}

.cap-r-deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cap-del-box {
  background: var(--d-card);
  border: 1px solid var(--bdr);
  padding: 30px 26px;
  transition: border-color 0.3s, transform 0.3s, background 0.3s, box-shadow 0.3s;
}

.cap-del-box:hover {
  border-color: var(--o);
  background: var(--d-elevated);
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 77, 0, 0.08);
}

.cap-del-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: #fff;
}

.cap-del-desc {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--m);
}

/* Industries Detail Grid */
.ind-detail-grid {
  max-width: 1540px;
  margin: 0 auto;
  padding: 80px 56px 140px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ind-card-deep {
  background: var(--d-card);
  border: 1px solid var(--bdr);
  overflow: hidden;
  transition: all 0.4s var(--ease-smooth);
}

.ind-card-deep:hover {
  border-color: var(--o);
  background: var(--d-elevated);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 77, 0, 0.08);
}

.icd-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.icd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.ind-card-deep:hover .icd-img img {
  transform: scale(1.04);
}

.icd-body {
  padding: 32px 26px;
}

.icd-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 10px;
}

.icd-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.icd-text {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--m);
}

/* Insights Essays */
.insights-full-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 56px 140px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.essay-card {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 56px;
  background: var(--d-card);
  border: 1px solid var(--bdr);
  padding: 50px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.essay-card:hover {
  border-color: var(--o);
  background: var(--d-elevated);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 77, 0, 0.08);
}

.essay-meta-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--bdr);
  padding-right: 44px;
}

.essay-h {
  font-size: clamp(26px, 2.5vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 20px;
  color: #fff;
}

.essay-body p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--m);
  margin-bottom: 20px;
}

.essay-quote {
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  color: var(--o);
  padding-left: 20px;
  border-left: 2px solid var(--o);
  margin: 28px 0;
}

/* About / Atelier Page */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 90px 56px;
}

.about-photo-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--bdr);
  position: relative;
}

.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-badge-orange, .about-badge-gold {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--o);
  color: var(--d);
  padding: 24px 30px;
  font-weight: 900;
}

.about-badge-orange .b { font-size: 38px; line-height: 1; }
.about-badge-orange .s { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 4px; }

/* ==========================================================================
   16:9 Cinema Showreel Showcase
   ========================================================================== */
.showreel-sec {
  padding: 140px 56px;
  background: var(--d);
  border-top: 1px solid var(--bdr);
  position: relative;
  background-image: radial-gradient(circle at 50% 35%, rgba(255, 77, 0, 0.05) 0%, transparent 60%);
}

.showreel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 40px;
  flex-wrap: wrap;
}

.showreel-frame-16-9 {
  position: relative;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bdr);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.75), 0 0 50px rgba(255, 77, 0, 0.08);
  background: #0d0d0d;
}

.sr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sr-overlay-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  transition: background 0.35s, opacity 0.4s;
  z-index: 2;
}

.sr-play-triangle {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--o);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  padding-left: 5px;
  box-shadow: 0 0 40px var(--o-glow);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s;
}

.sr-overlay-play:hover .sr-play-triangle {
  transform: scale(1.1);
  box-shadow: 0 0 60px rgba(255, 77, 0, 0.65);
}

.sr-play-txt {
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
}

.showreel-frame-16-9.playing .sr-overlay-play {
  opacity: 0;
  pointer-events: none;
}

.sr-ctrls-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 32px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, transparent 100%);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.35s;
}

.showreel-frame-16-9:hover .sr-ctrls-bar,
.showreel-frame-16-9.playing:hover .sr-ctrls-bar {
  opacity: 1;
}

.sr-ctrl-btn {
  background: transparent;
  border: none;
  color: var(--l);
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  padding: 4px;
}

.sr-ctrl-btn:hover {
  color: var(--o);
  transform: scale(1.1);
}

.sr-progress-wrap {
  flex-grow: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
}

.sr-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--o);
  border-radius: 999px;
  box-shadow: 0 0 10px var(--o-glow);
  transition: width 0.1s linear;
}

.sr-time {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--m);
  white-space: nowrap;
}

/* ==========================================================================
   9:16 Vertical Mobile Video & Reels Atelier
   ========================================================================== */
.mobile-reels-sec {
  padding: 130px 56px;
  background: var(--d);
  border-top: 1px solid var(--bdr);
  position: relative;
  background-image: radial-gradient(circle at 80% 50%, rgba(255, 77, 0, 0.05) 0%, transparent 60%);
}

.reels-atelier-wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  margin-top: 60px;
  perspective: 1200px;
}

/* Flagship Smartphone Bezel Frame (9:16 Format with High-Velocity 3D Motion Physics) */
.phone-mockup-frame {
  width: 320px;
  height: 620px;
  margin: 0 auto;
  background: #000;
  border-radius: 46px;
  border: 4px solid #2a2826;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.85), 0 0 45px rgba(255, 77, 0, 0.15), inset 0 0 4px rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.phone-screen-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 77, 0, 0.4) 52%, transparent 65%);
  transform: translateX(-150%);
  pointer-events: none;
  z-index: 15;
}

.phone-screen-glare.sweeping {
  animation: phoneGlareSweep 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes phoneGlareSweep {
  0% { transform: translateX(-150%); opacity: 1; }
  100% { transform: translateX(150%); opacity: 0; }
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 98px;
  height: 24px;
  background: #000;
  border-radius: 999px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.phone-camera-dot {
  width: 8px;
  height: 8px;
  background: #181818;
  border-radius: 50%;
  border: 1px solid #333;
}

.phone-sensor-pill {
  width: 14px;
  height: 5px;
  background: #111;
  border-radius: 999px;
}

.phone-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #080808;
  overflow: hidden;
}

.phone-video-9-16 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.phone-reels-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 18px 24px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 25%, transparent 60%, rgba(0, 0, 0, 0.88) 100%);
  z-index: 5;
}

.phone-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.1em;
}

.phone-audio-toggle {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.25s;
}

.phone-audio-toggle:hover {
  background: var(--o);
  border-color: var(--o);
}

.phone-bottom-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phone-user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pub-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--o);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pub-name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.pub-tag {
  font-size: 8px;
  background: rgba(255, 77, 0, 0.25);
  color: var(--o);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 77, 0, 0.35);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.phone-caption {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

.phone-sound-track {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.phone-reel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.phone-reel-bar {
  height: 100%;
  width: 0%;
  background: var(--o);
  transition: width 0.1s linear;
}

/* ==========================================================================
   Instagram Reel Embed & Launch Infrastructure (Dual Online / Manual Mode)
   ========================================================================== */
.reel-instagram-embed-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.reel-instagram-embed-wrap iframe,
.phone-instagram-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  pointer-events: auto;
}

.instagram-launch-pill {
  position: absolute;
  bottom: 22px;
  right: 20px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 17, 16, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--font);
  font-stretch: var(--stretch);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(225, 48, 108, 0.25);
  transition: all 0.3s var(--ease-smooth);
  pointer-events: auto;
}

.instagram-launch-pill:hover {
  background: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(225, 48, 108, 0.45);
  transform: translateY(-2px);
}

.instagram-ico-svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.rpb-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

.rpb-source-badge.instagram {
  background: linear-gradient(135deg, rgba(131, 58, 180, 0.25), rgba(253, 29, 29, 0.25), rgba(252, 176, 69, 0.25));
  border: 1px solid rgba(253, 29, 29, 0.45);
  color: #FF77AA;
}

.rpb-source-badge.manual {
  background: rgba(255, 77, 0, 0.15);
  border: 1px solid rgba(255, 77, 0, 0.35);
  color: var(--o);
}

.phone-side-actions {
  position: absolute;
  right: 14px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  pointer-events: auto;
}

.psa-btn {
  background: transparent;
  border: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 18px;
  transition: transform 0.2s, color 0.2s;
}

.psa-btn:hover {
  transform: scale(1.15);
  color: var(--o);
}

.psa-val {
  font-size: 9px;
  font-weight: 700;
}

.phone-play-tap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
}

.phone-play-ico {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.phone-mockup-frame.paused .phone-play-ico {
  opacity: 1;
  transform: scale(1.05);
}

/* Case Study Reel Selector List */
.reels-picker-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reel-picker-btn {
  background: var(--d-card);
  border: 1px solid var(--bdr);
  padding: 22px 26px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
  font-family: var(--font);
  font-stretch: var(--stretch);
  position: relative;
  overflow: hidden;
}

.reel-picker-btn:hover {
  border-color: rgba(255, 77, 0, 0.5);
  background: var(--d-elevated);
  transform: translateX(8px);
}

.reel-picker-btn:active {
  transform: scale(0.97) translateX(4px);
}

.reel-picker-btn.active {
  background: var(--d-elevated);
  border-color: var(--o);
  border-left: 4px solid var(--o);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 77, 0, 0.22);
}

.rpb-eq-wave {
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.reel-picker-btn.active .rpb-eq-wave {
  display: inline-flex;
}

.reel-picker-btn.active .rpb-indicator-static {
  display: none;
}

.rpb-eq-bar {
  width: 3px;
  background: var(--o);
  border-radius: 2px;
  animation: rpbEqJump 0.65s ease-in-out infinite alternate;
}
.rpb-eq-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.rpb-eq-bar:nth-child(2) { height: 18px; animation-delay: 0.18s; }
.rpb-eq-bar:nth-child(3) { height: 11px; animation-delay: 0.36s; }

@keyframes rpbEqJump {
  0% { height: 4px; }
  100% { height: 18px; }
}

.rpb-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o);
  margin-bottom: 6px;
}

.rpb-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--l);
  margin-bottom: 6px;
}

.rpb-meta {
  font-size: 11px;
  color: var(--m);
  font-weight: 400;
}

.rpb-indicator {
  font-size: 18px;
  color: var(--o);
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.3s;
}

.reel-picker-btn.active .rpb-indicator {
  opacity: 1;
  transform: scale(1.2);
}

/* 9:16 Vertical Reel Cards Grid */
.reels-grid-9-16 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.reel-card-9-16 {
  aspect-ratio: 9 / 16;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bdr);
  background: var(--d-card);
  cursor: pointer;
  transition: transform 0.4s var(--ease-smooth), border-color 0.4s, box-shadow 0.4s;
}

.reel-card-9-16:hover {
  transform: translateY(-8px);
  border-color: var(--o);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 77, 0, 0.15);
}

.rc-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.rc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 40%, rgba(0, 0, 0, 0.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px;
  transition: background 0.3s;
}

.rc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rc-format-badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}

.rc-views {
  font-size: 9px;
  font-weight: 700;
  color: var(--o);
}

.rc-play-btn {
  align-self: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 77, 0, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding-left: 3px;
  box-shadow: 0 0 25px var(--o-glow);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s var(--ease-smooth);
}

.reel-card-9-16:hover .rc-play-btn {
  opacity: 1;
  transform: scale(1);
}

.rc-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rc-cat {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o);
}

.rc-title {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
}

/* ==========================================================================
   THE ROYAL™ — MASTER RESPONSIVE & ADAPTIVE ARCHITECTURE
   Covers Desktop, Laptop, Tablet, Mobile, and High-Density Screens.
   Preserves Brand Authority, Typography Stretch, and Editorial Character.
   ========================================================================== */

/* 0. FLUID TOKENS & VIEWPORT REINFORCEMENTS */
:root {
  --space-page: clamp(16px, 4.2vw, 56px);
  --space-section: clamp(60px, 9vw, 130px);
  --radius-card: 10px;
}

html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative;
}

body.nav-locked {
  overflow: hidden !important;
  touch-action: none !important;
}

img, video, iframe {
  max-width: 100%;
}

/* 1. UNIVERSAL TOUCH & POINTER ERGONOMICS */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  body {
    cursor: auto !important;
  }
  a, button, input, select, textarea, .btn, .menu-toggle, .prob-btn, .svc-row, .disc-row, .hcard, .pill, .send, .filter-btn, .coveo-track-card, .uf-card, .uf-filter-btn, .wa-fab, [role="button"], .hnav-btn {
    cursor: pointer !important;
  }
  #cur, #cur2 {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #svcFloat {
    display: none !important;
    pointer-events: none !important;
  }
}

/* 2. TABLET & COMPACT LAPTOPS (<= 1024px) */
@media (max-width: 1024px) {
  nav {
    padding: 14px var(--space-page);
  }
  .nl-emblem,
  .nl-logo-img {
    height: 34px;
    width: auto;
  }
  .nav-talk {
    padding: 6px 14px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  /* Hero Section */
  .hero {
    padding: 130px var(--space-page) 48px;
    min-height: 100dvh;
  }
  .hero-h {
    font-size: clamp(40px, 7.5vw, 84px);
    line-height: 0.98;
  }
  .hero-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    margin-top: 36px;
  }
  .hero-desc {
    max-width: 580px;
    font-size: 13.5px;
    line-height: 1.85;
  }
  .hero-cta-row {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Subpages Page Hero */
  .page-hero {
    padding: 130px var(--space-page) 54px;
  }
  .page-hero-title {
    font-size: clamp(34px, 5.8vw, 68px);
  }

  /* Grid Reductions */
  .prob-grid, .contact-grid, .case-card-detail, .cap-detail-grid, .essay-card, .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ind-grid, .diff-grid, .ins-grid, .ind-detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .cap-l-pin {
    position: relative;
    top: 0;
  }
  .essay-meta-side {
    border-right: none;
    border-bottom: 1px solid var(--bdr);
    padding: 0 0 24px;
  }
  .disc-head, .svcs-head {
    padding: 0 var(--space-page);
  }
  .disc-row, .svc-row {
    padding: 28px var(--space-page);
  }
  .showreel-sec, .mobile-reels-sec {
    padding: 80px var(--space-page);
  }
  .reels-atelier-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .reels-grid-9-16 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Method Stacking Cards Unpinned */
  .method-pin {
    height: auto !important;
    position: static !important;
    padding: 50px var(--space-page) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    overflow: visible !important;
  }
  .m-card {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  }
  .m-card-l {
    padding: clamp(28px, 4vw, 44px);
  }
  .m-card-r {
    height: clamp(340px, 45vw, 440px);
    width: 100%;
    padding: 24px;
  }

  /* Coveo Audio Player Stage */
  .coveo-player-stage {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .coveo-turntable-deck {
    max-width: 100%;
    height: clamp(300px, 50vw, 420px);
    margin: 0 auto;
  }
  .coveo-tracklist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* Untitled Film Gallery */
  .uf-gallery-section {
    padding: 90px 0;
  }
  .uf-container {
    padding: 0 var(--space-page);
  }
  .uf-square-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Universal Footer Grid */
  .ft-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
    padding: 48px var(--space-page) !important;
  }
  .ft-grid p {
    max-width: 100%;
  }

  /* Office Locations Section */
  .office-locations-section {
    padding: 0 var(--space-page) 70px !important;
  }
}

/* 3. SELECTED WORK HORIZONTAL CAROUSEL (<= 900px Touch Snap) */
@media (max-width: 900px) {
  .hwork {
    padding: 48px 0;
    overflow: hidden;
    position: relative;
  }
  .hwork-head,
  .hwork-header,
  .hw-head {
    padding: 0 var(--space-page) 20px !important;
    margin-bottom: 12px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
  }
  .hwork .sec-h,
  .hw-title {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }
  .hwrap {
    display: flex !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 0 var(--space-page) 24px !important;
    transform: none !important;
    scrollbar-width: none !important;
  }
  .hwrap::-webkit-scrollbar {
    display: none;
  }
  .hcard {
    width: calc(100vw - (var(--space-page) * 2)) !important;
    min-width: calc(100vw - (var(--space-page) * 2)) !important;
    max-width: calc(100vw - (var(--space-page) * 2)) !important;
    flex: 0 0 calc(100vw - (var(--space-page) * 2)) !important;
    scroll-snap-align: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }
  .hcard-img {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
  }
  .hcard-link {
    opacity: 1 !important;
    transform: none !important;
    width: 40px;
    height: 40px;
    font-size: 15px;
    top: 12px;
    right: 12px;
  }
  .hcard-info {
    padding-top: 14px !important;
  }
  .hcard-category {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 6px !important;
  }
  .hcard-name {
    font-size: clamp(16px, 4.5vw, 21px) !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }
}

/* 4. MOBILE & TABLET SCREENS (<= 900px) */
@media (max-width: 900px) {
  nav {
    padding: 10px var(--space-page) !important;
  }
  .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    position: relative !important;
  }
  .nl {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }
  .nl-emblem,
  .nl-logo-img {
    height: 26px !important;
    width: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  .nl-title {
    font-size: 15px !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .nav-talk {
    padding: 6px 11px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.08em !important;
    background: rgba(255, 77, 0, 0.12) !important;
    border: 1px solid rgba(255, 77, 0, 0.3) !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    max-width: 135px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Reset positioning so menu button flows naturally in the header instead of fixed-centering over logo and CTAs */
  .menu-shell:not(.open) {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
  }
  .menu-shell:not(.open) .menu-toggle {
    height: 34px !important;
    padding: 0 13px !important;
    font-size: 11px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
  .menu-shell:not(.open) .menu-ico {
    width: 18px !important;
  }

  /* Full-Screen Luxury Mobile Overlay Navigation */
  .menu-shell.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--o-grad) !important;
    padding-top: max(16px, env(safe-area-inset-top, 16px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
    box-shadow: none !important;
  }
  .menu-shell.open .menu-toggle {
    height: 52px !important;
    padding: 0 var(--space-page) !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(20, 20, 20, 0.15) !important;
  }
  .menu-shell.open .menu-panel {
    flex: 1 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px var(--space-page) 32px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    width: 100% !important;
  }
  .menu-links {
    padding: 0 !important;
  }
  .menu-links a {
    font-size: clamp(19px, 5.5vw, 26px) !important;
    padding: 11px 0 !important;
    min-height: 44px !important;
  }
  .menu-shell.open .menu-meta {
    padding: 18px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(20, 20, 20, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .menu-meta-copy {
    align-items: flex-start !important;
  }

  /* Coveo Tracklist */
  .coveo-tracklist-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Untitled Film Filter Bar Horizontal Scroll */
  .uf-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin-bottom: 24px;
  }
  .uf-filter-bar::-webkit-scrollbar {
    display: none;
  }
  .uf-filter-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 11px;
    min-height: 38px;
  }
}

/* 5. PHONES & SMALL SCREENS (<= 640px) */
@media (max-width: 640px) {
  /* Hero Typography & CTA */
  .hero {
    padding: 105px var(--space-page) 36px;
    justify-content: flex-end;
  }
  .hero-meta {
    margin-bottom: 14px;
  }
  .hero-meta span {
    font-size: 8.5px;
    letter-spacing: 0.2em;
  }
  .hero-h {
    font-size: clamp(32px, 9.4vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }
  .hero-sub {
    margin-top: 22px;
    gap: 18px;
  }
  .hero-desc {
    font-size: 12.8px;
    line-height: 1.75;
  }
  .hero-cta-row {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .hero-cta-row .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding: 14px 18px;
    font-size: 9.5px;
  }
  .hero-scrolldown {
    display: none;
  }
  .hero-vid-controls {
    left: var(--space-page);
    bottom: 84px;
    padding: 6px 12px;
  }
  .hvc-btn {
    font-size: 9px;
    padding: 2px 4px;
  }

  /* General Section Padding */
  .philo, .svcs, .disciplines, .challenges, .industries, .diff, .insights, .contact, .page-hero, .filter-bar, .cases-container, .cap-detail-sec, .ind-detail-grid, .insights-full-grid, .about-hero-grid, .showreel-sec, .mobile-reels-sec, .coveo-audio-section, .uf-gallery-section {
    padding-left: var(--space-page);
    padding-right: var(--space-page);
  }

  /* Page Hero */
  .page-hero {
    padding-top: 95px;
    padding-bottom: 38px;
  }
  .page-hero-kicker {
    font-size: 9px;
    margin-bottom: 12px;
  }
  .page-hero-title {
    font-size: clamp(26px, 8.4vw, 44px);
    line-height: 1.05;
    margin-bottom: 14px;
  }
  .page-hero-desc {
    font-size: 12.8px;
    line-height: 1.75;
  }

  /* Disciplines & Services Rows */
  .disc-head, .svcs-head {
    padding: 0;
    margin-bottom: 28px;
  }
  .disc-row, .svc-row {
    padding: 20px 0;
    align-items: flex-start;
  }
  .disc-n, .svc-n {
    width: 32px;
    height: 32px;
    font-size: 9px;
    margin-right: 14px;
  }
  .disc-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .disc-name, .svc-name {
    font-size: clamp(20px, 6.2vw, 32px);
    white-space: normal;
    word-break: break-word;
  }
  .disc-tags {
    gap: 6px;
    flex-wrap: wrap;
  }
  .disc-tags span {
    font-size: 8.5px;
    padding: 3px 8px;
  }
  .disc-arr, .svc-arr {
    display: none;
  }

  /* 1-Col Grid System for Mobile */
  .ind-grid, .diff-grid, .ins-grid, .ind-detail-grid, .cap-r-deliverables, .fg-r, .reels-grid-9-16, .uf-square-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Showreel & Phone Mockup */
  .phone-mockup-frame {
    width: min(280px, 82vw);
    height: auto;
    aspect-ratio: 9 / 18.5;
    border-radius: 32px;
    margin: 0 auto;
  }
  .showreel-frame-16-9 {
    border-radius: 6px;
  }
  .sr-play-triangle {
    width: 54px;
    height: 54px;
    font-size: 18px;
  }
  .sr-ctrls-bar {
    padding: 10px 14px;
  }

  /* Business Challenges */
  .prob-btn {
    font-size: 13px;
    padding: 14px 14px;
    min-height: 48px;
  }
  .prob-card {
    padding: 22px 18px;
  }
  .pc-h {
    font-size: 19px;
  }

  /* Coveo Turntable & Audio Player Section on Mobile */
  .coveo-audio-section {
    padding: 60px 0 50px !important;
  }
  .coveo-audio-container {
    padding: 0 var(--space-page) !important;
  }
  .coveo-header {
    margin-bottom: 28px !important;
  }
  .coveo-header .sec-h {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.2 !important;
  }
  .coveo-header .sec-p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
  .coveo-player-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
  }
  .coveo-vinyl-col {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .coveo-turntable-deck {
    width: 100% !important;
    max-width: 360px !important;
    height: 250px !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .coveo-sleeve {
    left: 12px !important;
    width: 130px !important;
    height: 130px !important;
  }
  .coveo-vinyl-disc,
  .coveo-vinyl {
    width: 130px !important;
    height: 130px !important;
    left: 12px !important;
  }
  .coveo-turntable-deck.is-playing .coveo-vinyl-disc {
    left: 80px !important;
  }
  .coveo-vinyl-label {
    width: 44px !important;
    height: 44px !important;
  }
  .coveo-tonearm {
    right: 12px !important;
    top: 18px !important;
    transform-origin: 20px 20px;
    transform: scale(0.72) !important;
  }
  .coveo-console-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .coveo-status-bar {
    margin-bottom: 14px !important;
  }
  .coveo-track-header {
    margin-bottom: 16px !important;
  }
  .coveo-track-title {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }
  .coveo-track-desc {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }
  .coveo-wave-wrap {
    height: 70px !important;
    margin-bottom: 14px !important;
  }
  .coveo-actions-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding-top: 6px !important;
    width: 100% !important;
  }
  .coveo-transport-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .coveo-case-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    padding: 6px 16px !important;
    border: 1px solid rgba(255, 77, 0, 0.4) !important;
    border-radius: 999px !important;
    text-decoration: none !important;
  }
  .coveo-tracklist-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  .coveo-track-card {
    padding: 12px 14px !important;
    gap: 12px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  /* Untitled Film Square Card */
  .uf-card-overlay {
    padding: 14px;
  }
  .uf-pill-view {
    opacity: 1 !important;
    transform: none !important;
    font-size: 9px;
    padding: 3px 8px;
  }
  .uf-card-bottom {
    transform: none !important;
  }
  .uf-card-title {
    font-size: 15px;
  }

  /* Forms & Consultation Workspace */
  .contact {
    padding: 40px var(--space-page) 80px !important;
  }
  .contact-info, .cform {
    padding: 22px 16px !important;
    border-radius: 8px;
  }
  .cform input, .cform select, .cform textarea {
    font-size: 16px !important; /* Prevents auto-zoom in iOS Safari */
    min-height: 46px;
    padding: 12px 14px;
  }
  .cform textarea {
    min-height: 110px;
  }
  .pills {
    flex-wrap: wrap;
    gap: 6px;
  }
  .pill {
    flex: 1 1 calc(50% - 6px);
    min-height: 42px;
    font-size: 10.5px;
    padding: 8px 10px;
    text-align: center;
    justify-content: center;
  }
  .cform .send {
    width: 100%;
    min-height: 50px;
    font-size: 10px;
    padding: 14px 16px;
    letter-spacing: 0.12em;
    justify-content: center;
  }

  /* Universal Footer */
  .ft-hero {
    padding: 36px var(--space-page) 24px;
  }
  .ft-logo-img {
    height: clamp(30px, 8vw, 42px);
  }
  .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px var(--space-page) !important;
  }
  .ft-btm {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    padding: 16px var(--space-page) 24px !important;
  }

  /* WhatsApp FAB on Mobile */
  .wa-fab {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 9999 !important;
  }
  .wa-fab svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* 6. ULTRA-COMPACT MOBILE DEVICES (<= 380px: iPhone SE, Galaxy Fold, 320px) */
@media (max-width: 380px) {
  :root {
    --space-page: 12px;
  }
  .hero-h {
    font-size: 29px;
  }
  .nl-emblem,
  .nl-logo-img {
    height: 24px !important;
    width: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
  }
  .nl-title {
    font-size: 14px !important;
  }
  .menu-shell:not(.open) {
    min-width: 95px;
  }
  .menu-shell:not(.open) .menu-toggle {
    padding: 0 10px;
    font-size: 10px;
  }
  .nav-talk {
    display: none; /* Hide talk pill on extreme 320px to prevent header crush */
  }
  .pill {
    flex: 1 1 100%;
  }
  .coveo-turntable-deck {
    height: 240px;
  }
  .coveo-sleeve, .coveo-vinyl {
    width: 130px;
    height: 130px;
  }
}

/* 7. LARGE HIGH-DENSITY MONITORS (>= 1800px) */
@media (min-width: 1800px) {
  .hero-content,
  .page-hero-inner,
  .coveo-audio-container,
  .uf-container,
  .contact-grid,
  .ft-grid,
  .ind-detail-grid {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 8. WCAG 2.2 AA ACCESSIBILITY: REDUCED MOTION PREFERENCE */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-h .hl span,
  .hero-sub > *,
  .hero-kicker,
  .m-card,
  .prob-card,
  .ft-big,
  .page-hero-title,
  .page-hero-desc {
    opacity: 1 !important;
    transform: none !important;
  }
  .pre-logo-emblem,
  .rac-icon,
  .coveo-vinyl,
  .m-reel-video {
    animation: none !important;
  }
}

/* ==========================================================================
   05-B COVEO VINYL AUDIO EXPERIENCE (Sonic Identity & Acoustic Architecture)
   Inspired by Coveo Music (coveomusic.com)
   ========================================================================== */
.coveo-audio-section {
  position: relative;
  background: #0B0A09;
  padding: 130px 0 120px;
  border-bottom: 1px solid var(--bdr);
  overflow: hidden;
}

.coveo-audio-section::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(255, 77, 0, 0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.coveo-audio-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

.coveo-header {
  margin-bottom: 50px;
  max-width: 780px;
}

/* Master Player Stage: Turntable Deck + Control Console */
.coveo-player-stage {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 40px;
}

/* --------------------------------------------------------------------------
   Turntable Deck & Vinyl Disc Physics
   -------------------------------------------------------------------------- */
.coveo-vinyl-col {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

.coveo-turntable-deck {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 440px;
  background: radial-gradient(ellipse at 30% 20%, #1c1a18 0%, #121110 70%, #0d0c0b 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Album Jacket Sleeve */
.coveo-sleeve {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 310px;
  height: 310px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.2);
  z-index: 4;
  background: #181716;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

.coveo-turntable-deck:hover .coveo-sleeve {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 77, 0, 0.15);
}

.coveo-sleeve-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.8));
  z-index: 5;
  writing-mode: vertical-rl;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  pointer-events: none;
}

.coveo-sleeve-art {
  width: 100%;
  height: 100%;
  position: relative;
}

.coveo-sleeve-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(105%) brightness(96%);
  transition: filter 0.4s ease;
}

.coveo-sleeve-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 45%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

.coveo-sleeve-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  background: rgba(10, 9, 8, 0.85);
  backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 6;
}

/* Photorealistic Grooved Vinyl Disc */
.coveo-vinyl-disc {
  position: absolute;
  left: 45px;
  top: 50%;
  margin-top: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #090909;
  z-index: 2;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), inset 0 0 10px rgba(0, 0, 0, 0.9);
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s ease;
  transform-origin: center center;
}

/* Vinyl Micro-Grooves */
.coveo-vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 36%,
    rgba(255, 255, 255, 0.05) 37%,
    rgba(0, 0, 0, 0.9) 38%,
    rgba(255, 255, 255, 0.04) 44%,
    rgba(0, 0, 0, 0.9) 45%,
    rgba(255, 255, 255, 0.06) 52%,
    rgba(0, 0, 0, 0.9) 53%,
    rgba(255, 255, 255, 0.05) 62%,
    rgba(0, 0, 0, 0.9) 63%,
    rgba(255, 255, 255, 0.04) 74%,
    rgba(0, 0, 0, 0.9) 75%,
    rgba(255, 255, 255, 0.05) 86%,
    rgba(0, 0, 0, 0.9) 87%,
    rgba(255, 255, 255, 0.03) 96%,
    transparent 97%
  );
  pointer-events: none;
}

/* Concentric Light Reflection Sheen */
.coveo-vinyl-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 35deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.12) 45deg,
    transparent 90deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.12) 225deg,
    transparent 270deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.65;
}

/* Center Record Label */
.coveo-vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #1a1816;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 0 0 8px rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.coveo-vinyl-label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coveo-spindle-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 60%, #b89858 85%, #d4af37 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Slide-out & Spin State when playing */
.coveo-turntable-deck.is-playing .coveo-vinyl-disc {
  left: 175px;
}

.coveo-turntable-deck.is-playing .coveo-vinyl-disc.is-spinning {
  animation: coveoVinylSpin 5.4s linear infinite;
}

@keyframes coveoVinylSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mechanical Floating Tonearm */
.coveo-tonearm {
  position: absolute;
  top: 26px;
  right: 28px;
  width: 44px;
  height: 220px;
  transform-origin: 22px 22px;
  transform: rotate(-18deg);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
  pointer-events: none;
}

.coveo-tonearm-base {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #555, #222 70%, #111 100%);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  position: relative;
}

.coveo-tonearm-base::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FF4D00;
  box-shadow: 0 0 10px rgba(255, 77, 0, 0.8);
}

.coveo-tonearm-rod {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 4px;
  height: 160px;
  background: linear-gradient(to right, #888, #ddd, #666);
  border-radius: 2px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
}

.coveo-tonearm-head {
  position: absolute;
  bottom: 0;
  left: 12px;
  width: 20px;
  height: 36px;
  background: #1a1918;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  transform: rotate(20deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}

.coveo-turntable-deck.is-playing .coveo-tonearm {
  transform: rotate(15deg);
}

/* --------------------------------------------------------------------------
   Master Console Card (Audio Controls & Real-Time Waveform)
   -------------------------------------------------------------------------- */
.coveo-controls-col {
  width: 100%;
}

.coveo-console-card {
  background: radial-gradient(ellipse at 50% 0%, #1d1b19 0%, #131211 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px 36px 32px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  position: relative;
}

/* Status & Live Equalizer Header */
.coveo-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.coveo-now-tag {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coveo-bars-indicator {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  width: 16px;
}

.coveo-bars-indicator span {
  width: 2.5px;
  height: 4px;
  background: var(--o);
  border-radius: 1px;
  transition: height 0.2s ease;
}

.coveo-turntable-deck.is-playing ~ .coveo-controls-col .coveo-bars-indicator span:nth-child(1),
body.audio-playing .coveo-bars-indicator span:nth-child(1) {
  animation: coveoBarDance 0.7s ease infinite alternate;
}
.coveo-turntable-deck.is-playing ~ .coveo-controls-col .coveo-bars-indicator span:nth-child(2),
body.audio-playing .coveo-bars-indicator span:nth-child(2) {
  animation: coveoBarDance 0.45s ease infinite alternate 0.15s;
}
.coveo-turntable-deck.is-playing ~ .coveo-controls-col .coveo-bars-indicator span:nth-child(3),
body.audio-playing .coveo-bars-indicator span:nth-child(3) {
  animation: coveoBarDance 0.65s ease infinite alternate 0.3s;
}
.coveo-turntable-deck.is-playing ~ .coveo-controls-col .coveo-bars-indicator span:nth-child(4),
body.audio-playing .coveo-bars-indicator span:nth-child(4) {
  animation: coveoBarDance 0.5s ease infinite alternate 0.4s;
}

@keyframes coveoBarDance {
  0% { height: 4px; }
  100% { height: 16px; }
}

.coveo-state-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o);
}

.coveo-time-readout {
  font-size: 12px;
  font-weight: 700;
  color: var(--m);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.coveo-time-readout span:first-child {
  color: #FFFFFF;
}

/* Active Track Meta */
.coveo-track-header {
  margin-bottom: 22px;
}

.coveo-cat-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--o);
  background: rgba(255, 77, 0, 0.1);
  border: 1px solid rgba(255, 77, 0, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.coveo-track-title {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 800;
  font-stretch: 125%;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 8px;
}

.coveo-track-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--m);
  margin: 0;
  max-width: 600px;
}

/* Waveform Canvas */
.coveo-wave-wrap {
  width: 100%;
  height: 90px;
  background: #090908;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

#coveoCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Scrubber Seek Track */
.coveo-scrubber-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  margin-bottom: 24px;
  transition: height 0.2s ease;
}

.coveo-scrubber-track:hover {
  height: 8px;
}

.coveo-scrubber-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--o);
  border-radius: 6px;
  box-shadow: 0 0 10px var(--o-glow);
  pointer-events: none;
}

.coveo-scrubber-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), 0 0 6px var(--o);
  transform: translate(-50%, -50%) scale(0.8);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.coveo-scrubber-track:hover .coveo-scrubber-thumb {
  transform: translate(-50%, -50%) scale(1.15);
}

/* Action Controls Row */
.coveo-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.coveo-transport-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.coveo-ctrl-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--m);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.coveo-ctrl-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
}

.coveo-master-play {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--o-grad);
  border: none;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 28px var(--o-glow), 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

.coveo-master-play:hover {
  transform: scale(1.08);
  box-shadow: 0 0 38px rgba(255, 77, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.coveo-play-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 77, 0, 0.45);
  opacity: 0.6;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.coveo-master-play:hover .coveo-play-ring {
  transform: scale(1.15);
  opacity: 1;
}

.coveo-case-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--o);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 77, 0, 0.4);
  padding-bottom: 4px;
  transition: all 0.25s ease;
}

.coveo-case-btn:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  transform: translateX(4px);
}

.coveo-arr {
  transition: transform 0.25s ease;
}

.coveo-case-btn:hover .coveo-arr {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Coveo Tracklist Grid Cards
   -------------------------------------------------------------------------- */
.coveo-tracklist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 10px;
}

.coveo-track-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(22, 21, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
}

.coveo-track-card:hover {
  background: rgba(255, 77, 0, 0.06);
  border-color: rgba(255, 77, 0, 0.35);
  transform: translateY(-2px);
}

.coveo-track-card.active {
  background: rgba(255, 77, 0, 0.12);
  border-color: var(--o);
  box-shadow: 0 4px 20px rgba(255, 77, 0, 0.2);
}

.coveo-tc-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--m);
  font-variant-numeric: tabular-nums;
}

.coveo-track-card.active .coveo-tc-num {
  color: var(--o);
}

.coveo-tc-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.coveo-tc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coveo-tc-info {
  flex: 1;
  overflow: hidden;
}

.coveo-tc-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--l);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.coveo-track-card.active .coveo-tc-title {
  color: #FFFFFF;
}

.coveo-tc-meta {
  font-size: 11.5px;
  color: var(--m);
}

.coveo-tc-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coveo-tc-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.coveo-tc-bars span {
  width: 2px;
  height: 3px;
  background: var(--o);
  border-radius: 1px;
}

.coveo-track-card.active .coveo-tc-bars span:nth-child(1) {
  animation: apBarHop 0.7s ease infinite alternate;
}
.coveo-track-card.active .coveo-tc-bars span:nth-child(2) {
  animation: apBarHop 0.45s ease infinite alternate 0.15s;
}
.coveo-track-card.active .coveo-tc-bars span:nth-child(3) {
  animation: apBarHop 0.65s ease infinite alternate 0.3s;
}

.coveo-tc-dur {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--m);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   06-B UNTITLED FILM SQUARE GALLERY (1:1 Aspect Ratio Works Grid)
   Inspired by Untitled Film (untitledfilm.framer.website/works-main/square)
   ========================================================================== */
.uf-gallery-section {
  position: relative;
  background: #0E0D0C;
  padding: 130px 0 120px;
  border-bottom: 1px solid var(--bdr);
  overflow: hidden;
}

.uf-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.uf-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.uf-header .sec-p {
  max-width: 480px;
  margin: 0;
}

/* Category Filter Bar (Untitled Film Style) */
.uf-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}

.uf-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--m);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
}

.uf-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.uf-filter-btn.active {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0A0909;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.18);
}

/* 1:1 Square Grid (3 columns on desktop, 2 on tablet, 1 on mobile) */
.uf-square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Strictly 1:1 Aspect-Ratio Square Card */
.uf-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #141312;
  cursor: pointer;
  will-change: transform, opacity;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.uf-card:hover {
  border-color: rgba(255, 77, 0, 0.45);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 77, 0, 0.12);
}

.uf-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.uf-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(102%) brightness(95%);
  transition: transform 0.85s var(--ease-expo), filter 0.6s ease;
}

.uf-card:hover .uf-card-img {
  transform: scale(1.06);
  filter: contrast(105%) brightness(100%);
}

/* Subtle Gradient Scrim */
.uf-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.94) 0%, rgba(10, 9, 8, 0.45) 45%, transparent 75%);
  opacity: 0.8;
  transition: opacity 0.4s ease;
}

.uf-card:hover .uf-card-scrim {
  opacity: 0.98;
}

/* Typographic Reveal Overlay */
.uf-card-overlay {
  position: absolute;
  inset: 0;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.uf-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uf-pill-cat {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  background: rgba(13, 12, 11, 0.75);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.uf-pill-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--o);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 0 15px var(--o-glow);
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.35s var(--ease-expo);
}

.uf-card:hover .uf-pill-view {
  opacity: 1;
  transform: translateY(0);
}

.uf-card-bottom {
  transform: translateY(6px);
  transition: transform 0.4s var(--ease-expo);
}

.uf-card:hover .uf-card-bottom {
  transform: translateY(0);
}

.uf-card-title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 800;
  font-stretch: 125%;
  color: var(--l);
  line-height: 1.25;
  margin-bottom: 6px;
}

.uf-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--m);
  max-width: 92%;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}

.uf-card:hover .uf-card-desc {
  opacity: 1;
  max-height: 60px;
}

/* --------------------------------------------------------------------------
   VIEW CURSOR INTEGRATION (Integrated Dual Fluid Cursor)
   -------------------------------------------------------------------------- */
body.cur-view #cur {
  opacity: 0 !important;
}

body.cur-view #cur2,
body.cur-view #cur-dot {
  width: 72px !important;
  height: 72px !important;
  background: rgba(255, 77, 0, 0.92) !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 0 28px var(--o-glow), 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
  opacity: 1 !important;
}

body.cur-view #cur2::after,
body.cur-view #cur-dot::after {
  content: 'VIEW';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   FULLSCREEN LIGHTBOX VIEWER (Untitled Film Style)
   -------------------------------------------------------------------------- */
.uf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uf-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 7, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.uf-lb-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 40px;
  z-index: 2;
  box-sizing: border-box;
}

.uf-lb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.uf-lb-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.uf-lb-index {
  font-size: 12px;
  font-weight: 800;
  color: var(--o);
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255, 77, 0, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
}

.uf-lb-cat {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m);
}

.uf-lb-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--l);
}

.uf-lb-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.uf-lb-caselink {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--o);
  text-decoration: none;
  border-bottom: 1px solid var(--o);
  padding-bottom: 2px;
  transition: all 0.2s ease;
}

.uf-lb-caselink:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.uf-lb-close {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-size: 24px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uf-lb-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
  transform: rotate(90deg);
}

/* Lightbox Stage */
.uf-lb-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}

.uf-lb-arrow {
  background: rgba(20, 19, 18, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.25s var(--ease-smooth);
}

.uf-lb-arrow:hover {
  background: var(--o);
  border-color: var(--o);
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--o-glow);
}

.uf-lb-figure {
  max-width: 82vw;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.uf-lb-img {
  max-width: 100%;
  max-height: 66vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.uf-lb-caption-bar {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--m);
  text-align: center;
  max-width: 650px;
}

/* Lightbox Thumbnails Strip */
.uf-lb-strip {
  display: flex;
  justify-content: center;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 0;
}

.uf-lb-thumb {
  width: 54px;
  height: 54px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.45;
  border: 1.5px solid transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.uf-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uf-lb-thumb:hover {
  opacity: 0.85;
}

.uf-lb-thumb.active {
  opacity: 1;
  border-color: var(--o);
  box-shadow: 0 0 10px var(--o-glow);
}

/* ==========================================================================
   Responsive Adaptations for Coveo Audio & Untitled Film Gallery
   ========================================================================== */
@media (max-width: 1100px) {
  .coveo-player-stage {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .coveo-vinyl-col {
    max-width: 100%;
  }
  .coveo-tracklist-grid {
    grid-template-columns: 1fr;
  }
  .uf-square-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .coveo-audio-section,
  .uf-gallery-section {
    padding: 80px 0;
  }
  .coveo-audio-container,
  .uf-container {
    padding: 0 20px;
  }
  .coveo-turntable-deck {
    height: 380px;
  }
  .coveo-sleeve {
    width: 250px;
    height: 250px;
    left: 20px;
  }
  .coveo-vinyl-disc {
    width: 240px;
    height: 240px;
    margin-top: -120px;
    left: 30px;
  }
  .coveo-turntable-deck.is-playing .coveo-vinyl-disc {
    left: 110px;
  }
  .coveo-console-card {
    padding: 24px 20px;
  }
  .coveo-track-title {
    font-size: 22px;
  }
  .uf-square-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .uf-lb-shell {
    padding: 20px;
  }
  .uf-lb-title {
    display: none;
  }
  .uf-lb-arrow {
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   Floating Audio Capsule & Quick Player Trigger
   ========================================================================== */
.royal-audio-capsule {
  position: fixed;
  left: 26px;
  bottom: 26px;
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px 0 12px;
  border-radius: 999px;
  background: rgba(18, 17, 16, 0.94);
  border: 1px solid rgba(255, 77, 0, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 77, 0, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}

.royal-audio-capsule:not(.is-playing) {
  animation: racGlowPulse 2.8s ease-in-out infinite;
}

@keyframes racGlowPulse {
  0%, 100% {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 15px rgba(255, 77, 0, 0.12);
    border-color: rgba(255, 77, 0, 0.35);
  }
  50% {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 32px rgba(255, 77, 0, 0.38);
    border-color: var(--o);
  }
}

.royal-audio-capsule:hover {
  border-color: var(--o);
  transform: translateY(-2px);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.7), 0 0 35px var(--o-glow);
}

.royal-audio-capsule .rac-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--o);
  color: #0E0D0C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 14px rgba(255, 77, 0, 0.3);
}

.royal-audio-capsule.is-playing .rac-icon {
  animation: racSpin 4.5s linear infinite;
}

@keyframes racSpin {
  100% { transform: rotate(360deg); }
}

.royal-audio-capsule .rac-meta {
  display: flex;
  flex-direction: column;
}

.royal-audio-capsule .rac-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o);
}

.royal-audio-capsule .rac-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.royal-audio-capsule .rac-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-left: 4px;
}

.royal-audio-capsule .rac-bars span {
  width: 2.5px;
  background: var(--o);
  border-radius: 1px;
  height: 3px;
  transition: height 0.15s ease;
}

.royal-audio-capsule.is-playing .rac-bars span:nth-child(1) { animation: racBar 0.75s ease infinite alternate; }
.royal-audio-capsule.is-playing .rac-bars span:nth-child(2) { animation: racBar 0.45s ease infinite alternate 0.15s; }
.royal-audio-capsule.is-playing .rac-bars span:nth-child(3) { animation: racBar 0.85s ease infinite alternate 0.35s; }

@keyframes racBar {
  0% { height: 3px; }
  100% { height: 14px; }
}

@media (max-width: 768px) {
  .royal-audio-capsule {
    left: 16px !important;
    bottom: 74px !important;
    height: 44px !important;
    padding: 0 14px 0 8px !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 9998 !important;
  }
  .royal-audio-capsule .rac-title {
    max-width: 145px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .royal-audio-capsule .rac-kicker {
    font-size: 8px !important;
  }
}

/* ==========================================================================
   THE ROYAL™ — SECTOR BRANDING MANUAL: THEMED SHOWCASE WIDGETS
   ========================================================================== */

/* 1. Base Variables fallback */
:root {
  --sec-accent: #FF4D00;
  --sec-accent-glow: rgba(255, 77, 0, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #FF4D00 0%, #FF6B2B 100%);
  --sec-accent-border: rgba(255, 77, 0, 0.35);
  --sec-accent-text-contrast: #FFFFFF;
}

/* 2. Automotive & EV Mobility Strategy (#00E5FF, #2563EB, #0A1120) */
body.ev-body {
  --sec-accent: #00E5FF;
  --sec-accent-glow: rgba(0, 229, 255, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #00E5FF 0%, #2563EB 100%);
  --sec-accent-border: rgba(0, 229, 255, 0.35);
  --sec-accent-text-contrast: #060B14;
}
body.ev-body .method,
body.ev-body .coveo-audio-section,
body.ev-body .uf-gallery-section,
body.ev-body .hwork {
  background-color: var(--ev-bg, #060B14) !important;
}
body.ev-body .m-card,
body.ev-body .coveo-console-card,
body.ev-body .uf-card,
body.ev-body .hcard {
  background: var(--ev-surface, #0A1120) !important;
  border-color: rgba(0, 229, 255, 0.2) !important;
}

/* 3. Hospitality & Luxury Travel (#B59A62 Aged Brass, #0B2520 Forest) */
body.hosp-explorer-body {
  --sec-accent: #B59A62;
  --sec-accent-glow: rgba(181, 154, 98, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #C6AB73 0%, #B59A62 100%);
  --sec-accent-border: rgba(181, 154, 98, 0.35);
  --sec-accent-text-contrast: #071916;
}
body.hosp-explorer-body .method,
body.hosp-explorer-body .coveo-audio-section,
body.hosp-explorer-body .uf-gallery-section,
body.hosp-explorer-body .hwork {
  background-color: var(--hosp-forest-dark, #071916) !important;
}
body.hosp-explorer-body .m-card,
body.hosp-explorer-body .coveo-console-card,
body.hosp-explorer-body .uf-card,
body.hosp-explorer-body .hcard {
  background: var(--hosp-forest, #0B2520) !important;
  border-color: rgba(181, 154, 98, 0.25) !important;
}

/* 4. Healthcare & MedTech (#6BA4B8 Blue, #7B9E89 Sage, #0B0E0D Sanctuary) */
body.hc-body {
  --sec-accent: #6BA4B8;
  --sec-accent-glow: rgba(107, 164, 184, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #6BA4B8 0%, #7B9E89 100%);
  --sec-accent-border: rgba(107, 164, 184, 0.35);
  --sec-accent-text-contrast: #0B0E0D;
}
body.hc-body .method,
body.hc-body .coveo-audio-section,
body.hc-body .uf-gallery-section,
body.hc-body .hwork {
  background-color: var(--hc-dark, #0B0E0D) !important;
}
body.hc-body .m-card,
body.hc-body .coveo-console-card,
body.hc-body .uf-card,
body.hc-body .hcard {
  background: var(--hc-surface, #101918) !important;
  border-color: rgba(107, 164, 184, 0.22) !important;
}

/* 5. Higher Education & Research (#00D084 Mint, #0C4A42 Forest Teal) */
body.edu-explorer-body {
  --sec-accent: #00D084;
  --sec-accent-glow: rgba(0, 208, 132, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #00D084 0%, #0F5B51 100%);
  --sec-accent-border: rgba(0, 208, 132, 0.35);
  --sec-accent-text-contrast: #041B18;
}
body.edu-explorer-body .method,
body.edu-explorer-body .coveo-audio-section,
body.edu-explorer-body .uf-gallery-section,
body.edu-explorer-body .hwork {
  background-color: #051A16 !important;
  color: #F6FAF7 !important;
}
body.edu-explorer-body .m-card,
body.edu-explorer-body .coveo-console-card,
body.edu-explorer-body .uf-card,
body.edu-explorer-body .hcard {
  background: #092620 !important;
  border-color: rgba(0, 208, 132, 0.25) !important;
}

/* 6. Real Estate & Architecture (#00A896 Sovereign Teal, #C3A66B Champagne Gold, #081220 Midnight) */
body.re-body {
  --sec-accent: #00A896;
  --sec-accent-glow: rgba(0, 168, 150, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #00A896 0%, #C3A66B 100%);
  --sec-accent-border: rgba(0, 168, 150, 0.35);
  --sec-accent-text-contrast: #FFFFFF;
}
body.re-body .method,
body.re-body .coveo-audio-section,
body.re-body .uf-gallery-section,
body.re-body .hwork {
  background-color: var(--re-bg, #081220) !important;
}
body.re-body .m-card,
body.re-body .coveo-console-card,
body.re-body .uf-card,
body.re-body .hcard {
  background: var(--re-surface, #0C1A2E) !important;
  border-color: rgba(0, 168, 150, 0.22) !important;
}

/* 7. Advanced Manufacturing & Robotics (#4EBA88 Emerald, #38BDF8 Steel Blue, #0B1612 Obsidian) */
body.mf-body {
  --sec-accent: #4EBA88;
  --sec-accent-glow: rgba(78, 186, 136, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #4EBA88 0%, #38BDF8 100%);
  --sec-accent-border: rgba(78, 186, 136, 0.35);
  --sec-accent-text-contrast: #0B1612;
}
body.mf-body .method,
body.mf-body .coveo-audio-section,
body.mf-body .uf-gallery-section,
body.mf-body .hwork {
  background-color: var(--mf-bg, #0B1612) !important;
}
body.mf-body .m-card,
body.mf-body .coveo-console-card,
body.mf-body .uf-card,
body.mf-body .hcard {
  background: var(--mf-surface, #10201A) !important;
  border-color: rgba(78, 186, 136, 0.25) !important;
}

/* 8. Contemporary Luxury & Prestige (#F3F4F6 Platinum Silk, #C3A66B Gold, #090A0C Charcoal) */
body.lx-body {
  --sec-accent: #C3A66B;
  --sec-accent-glow: rgba(195, 166, 107, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #F3F4F6 0%, #C3A66B 100%);
  --sec-accent-border: rgba(195, 166, 107, 0.35);
  --sec-accent-text-contrast: #090A0C;
}
body.lx-body .method,
body.lx-body .coveo-audio-section,
body.lx-body .uf-gallery-section,
body.lx-body .hwork {
  background-color: var(--lx-bg, #090A0C) !important;
}
body.lx-body .m-card,
body.lx-body .coveo-console-card,
body.lx-body .uf-card,
body.lx-body .hcard {
  background: var(--lx-surface, #0E1014) !important;
  border-color: rgba(195, 166, 107, 0.25) !important;
}

/* 9. Master Industries Hub (#C3A66B Sovereign Gold / #FF4D00) */
body.ind-hub-body {
  --sec-accent: #C3A66B;
  --sec-accent-glow: rgba(195, 166, 107, 0.45);
  --sec-accent-grad: linear-gradient(135deg, #FF4D00 0%, #C3A66B 100%);
  --sec-accent-border: rgba(195, 166, 107, 0.35);
  --sec-accent-text-contrast: #000000;
}

/* ==========================================================================
   WIDGET THEMING RULES (Universal across all 4 core components)
   ========================================================================== */

/* Section Tags */
.method .sec-tag,
.coveo-audio-section .sec-tag,
.uf-gallery-section .sec-tag,
.hwork .sec-tag {
  color: var(--sec-accent) !important;
}

/* A. 9:16 Vertical Mobile Reels (#methodSec) */
.mc-step {
  color: var(--sec-accent) !important;
}
.m-card-reel {
  border-color: var(--sec-accent-border) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px var(--sec-accent-glow) !important;
}
.m-card-reel:hover {
  border-color: var(--sec-accent) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 55px var(--sec-accent-glow) !important;
}
.m-reel-badge {
  border-color: var(--sec-accent-border) !important;
  color: var(--sec-accent) !important;
}
.m-reel-pill {
  background: var(--sec-accent) !important;
  color: var(--sec-accent-text-contrast) !important;
  font-weight: 800;
}
.m-reel-sound.active {
  background: var(--sec-accent) !important;
  border-color: var(--sec-accent) !important;
  color: var(--sec-accent-text-contrast) !important;
}
.m-card {
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.65), 0 0 35px var(--sec-accent-glow) !important;
}

/* B. Coveo Vinyl Sound Player (#audioPortfolio) */
.coveo-master-play {
  background: var(--sec-accent-grad) !important;
  box-shadow: 0 0 28px var(--sec-accent-glow), 0 6px 18px rgba(0, 0, 0, 0.4) !important;
  color: var(--sec-accent-text-contrast) !important;
}
.coveo-master-play:hover {
  box-shadow: 0 0 42px var(--sec-accent-glow), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.coveo-play-ring {
  border-color: var(--sec-accent-border) !important;
}
.coveo-case-btn {
  color: var(--sec-accent) !important;
  border-bottom-color: var(--sec-accent-border) !important;
}
.coveo-case-btn:hover {
  color: #FFFFFF !important;
  border-bottom-color: #FFFFFF !important;
}
.coveo-now-tag {
  color: var(--sec-accent) !important;
}
.coveo-cat-pill {
  color: var(--sec-accent) !important;
  border-color: var(--sec-accent-border) !important;
  background: rgba(0, 0, 0, 0.4) !important;
}
.coveo-bars-indicator span {
  background: var(--sec-accent) !important;
}
.coveo-scrubber-fill {
  background: var(--sec-accent) !important;
}
.coveo-scrubber-thumb {
  background: var(--sec-accent) !important;
  box-shadow: 0 0 10px var(--sec-accent-glow) !important;
}
.coveo-track-card.active {
  border-color: var(--sec-accent) !important;
  box-shadow: 0 0 24px var(--sec-accent-glow) !important;
}
.coveo-track-num {
  color: var(--sec-accent) !important;
}
.royal-audio-capsule {
  border-color: var(--sec-accent-border) !important;
}
.capsule-play-mini {
  background: var(--sec-accent-grad) !important;
  color: var(--sec-accent-text-contrast) !important;
}
.royal-audio-capsule .rac-cat {
  color: var(--sec-accent) !important;
}
.royal-audio-capsule .rac-bars span {
  background: var(--sec-accent) !important;
}

/* C. Untitled Film 1:1 Square Works Gallery (#photoGallery & #ufLightbox) */
.uf-filter-btn.active {
  background: var(--sec-accent) !important;
  border-color: var(--sec-accent) !important;
  color: var(--sec-accent-text-contrast) !important;
  box-shadow: 0 4px 18px var(--sec-accent-glow) !important;
}
.uf-card:hover {
  border-color: var(--sec-accent-border) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px var(--sec-accent-glow) !important;
}
.uf-card-arr {
  background: var(--sec-accent) !important;
  color: var(--sec-accent-text-contrast) !important;
}
.uf-card-num {
  color: var(--sec-accent) !important;
}
.uf-pill-cat {
  border-color: var(--sec-accent-border) !important;
}
.uf-lb-caselink {
  background: var(--sec-accent) !important;
  color: var(--sec-accent-text-contrast) !important;
}
.uf-lb-cat {
  color: var(--sec-accent) !important;
}

/* D. Selected Work Transformation Catalog (#work) */
.hw-count b {
  color: var(--sec-accent) !important;
}
.hcard-category {
  color: var(--sec-accent) !important;
}
.hcard-link {
  background: var(--sec-accent) !important;
  color: var(--sec-accent-text-contrast) !important;
}
.hcard:hover {
  border-color: var(--sec-accent-border) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px var(--sec-accent-glow) !important;
}