/* =============================================================================
   STUDIO CAELUM
   Palette: ink black · deep navy · cream · white, with a single gold accent.
   ========================================================================== */

:root {
  /* core */
  --ink: #070a14;
  --ink-2: #0a0e1c;
  --navy-deep: #0e1738;
  --navy: #122554;
  --navy-lift: #1a3575;
  --navy-line: #24468d;
  --cream: #f7f2e8;
  --cream-dim: #ded4c2;
  --cream-mute: #b8ab96;
  --white: #faf7f2;
  --gold: #dfc896;

  /* semantic */
  --bg: var(--ink);
  --fg: var(--cream);
  --rule: rgba(247, 242, 232, .14);
  --rule-soft: rgba(247, 242, 232, .07);

  /* type */
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* rhythm */
  --gut: clamp(20px, 4vw, 64px);
  --sec-y: clamp(96px, 13vh, 200px);
  --maxw: 1440px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* safe area insets for notched/mobile displays */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* ── reset ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 192, 137, 0.35) #05070c;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #05070c;
}

::-webkit-scrollbar-thumb {
  background: rgba(217, 192, 137, 0.3);
  border-radius: 4px;
  border: 1px solid rgba(217, 192, 137, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 192, 137, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  position: relative;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main,
section,
header,
footer {
  max-width: 100%;
  box-sizing: border-box;
}

body.is-loading {
  overflow: hidden;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ol,
ul {
  list-style: none;
  padding: 0;
}

img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--cream);
  color: var(--ink);
}

.wrap {
  width: min(100% - var(--gut) * 2, var(--maxw));
  margin-inline: auto;
}

/* ── shared type ─────────────────────────────────────────────────────────── */
.eyebrow,
.sec-head__label,
.plate__no,
.plate__meta,
.card__label,
.card__foot,
.craft-row__no,
.step__no,
.reel__cap,
.foot__row {
  font-family: var(--sans);
  font-size: clamp(10px, .78vw, 12px);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.sec-head {
  max-width: 62ch;
  margin-bottom: clamp(48px, 7vw, 96px);
}

.sec-head--center {
  max-width: none;
  text-align: center;
}

.sec-head--split {
  max-width: none;
  display: flex;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sec-head__label {
  display: block;
  margin-bottom: 22px;
}

.sec-head__label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 1px;
  background: var(--rule);
  margin-right: 14px;
}

.sec-head__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 6.2vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--white);
}

.sec-head__title em {
  font-style: italic;
  color: var(--cream);
}

.sec-head__note {
  margin-top: 26px;
  max-width: 46ch;
  color: var(--cream-dim);
}

.sec-head--split .sec-head__note {
  margin-top: 0;
  text-align: right;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--cream);
  background: rgba(16, 34, 76, .28);
  backdrop-filter: blur(8px);
  transition: color .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

.btn:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 11px;
}

.btn--ghost {
  background: transparent;
  border-color: rgba(239, 228, 206, .34);
}

/* =============================================================================
   PRELOADER
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity .9s var(--ease), visibility .9s;
}

.loader__sky {
  position: absolute;
  inset: 0;
  opacity: .5;
}

.loader__inner {
  position: relative;
  width: min(420px, 76vw);
  text-align: center;
}

.loader__mark {
  width: 190px;
  margin: 0 auto 28px;
  color: var(--cream);
  overflow: visible;
}

.loader__line {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: .5;
  /* pathLength normalised by JS */
}

.loader__stars circle {
  fill: var(--cream);
  opacity: 0;
  transition: opacity .5s var(--ease);
}

.loader__stars circle.lit {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(239, 228, 206, .9));
}

.loader__word {
  margin-bottom: 30px;
}

.loader__studio {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .48em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin-bottom: 6px;
  text-indent: .48em;
}

.loader__name {
  display: block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(28px, 6vw, 42px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--white);
  text-indent: .3em;
}

.loader__bar {
  height: 1px;
  background: var(--rule-soft);
  overflow: hidden;
}

.loader__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cream);
  transition: width .25s linear;
}

.loader__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.loader__pct b {
  color: var(--cream);
  font-weight: 400;
}

body:not(.is-loading) .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =============================================================================
/* =============================================================================
   CURSOR: custom star SVG, white fill + gold outline
   ========================================================================== */

/* default star cursor: white fill, gold outline via paint-order trick */
html,
body,
* {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="%23ffffff" stroke="%23d9c089" stroke-width="0.8" paint-order="stroke" d="M22 11c-4.96 0-9-4.04-9-9 0-1.32-2-1.32-2 0 0 4.96-4.04 9-9 9-1.32 0-1.32 2 0 2 4.96 0 9 4.04 9 9 0 1.32 2 1.32 2 0 0-4.96 4.04-9 9-9 1.32 0 1.32-2 0-2Z"></path></svg>') 14 14, auto !important;
}

/* hot / interactive elements: slightly larger, gold fill */
[data-cursor],
a,
button,
[role="button"],
[tabindex] {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24"><path fill="%23ffffff" stroke="%23d9c089" stroke-width="0.8" paint-order="stroke" d="M22 11c-4.96 0-9-4.04-9-9 0-1.32-2-1.32-2 0 0 4.96-4.04 9-9 9-1.32 0-1.32 2 0 2 4.96 0 9 4.04 9 9 0 1.32 2 1.32 2 0 0-4.96 4.04-9 9-9 1.32 0 1.32-2 0-2Z"></path></svg>') 17 17, pointer !important;
}

/* floating label div: still used by bootCursor for hover text */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 190;
  pointer-events: none;
}

.cursor__label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  background: rgba(5, 7, 12, 0.55);
  padding: 3px 8px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

.cursor.is-hot .cursor__label {
  opacity: 1;
}

@media (hover: none),
(pointer: coarse) {

  html,
  body,
  * {
    cursor: auto !important;
  }

  [data-cursor],
  a,
  button,
  [role="button"],
  [tabindex] {
    cursor: auto !important;
  }

  .cursor {
    display: none;
  }
}

/* =============================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gut);
  transform: translateY(-104%);
  transition: transform .8s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-shown {
  transform: none;
}

.nav.is-solid {
  background: rgba(5, 7, 12, .78);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom-color: var(--rule-soft);
}

/* ── Ambient audio toggle, parked top-left, clear of the nav bar ── */
.amb {
  position: fixed;
  z-index: 130;
  top: clamp(80px, 9.5vh, 92px);
  left: 16px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(5, 7, 12, .55);
  border: 1px solid var(--rule-soft);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}

@media (max-width: 768px) {
  .amb {
    display: none !important;
  }
}

.amb:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.amb__icon {
  position: absolute;
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: opacity .35s var(--ease);
}

.amb__icon--off {
  opacity: 0;
}

.amb[aria-pressed="false"] .amb__icon--on {
  opacity: 0;
}

.amb[aria-pressed="false"] .amb__icon--off {
  opacity: 1;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
  flex: none;
  filter: brightness(1.05);
}

.nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
}

.nav__links a {
  position: relative;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: 4px 0;
  transition: color .4s var(--ease);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}

.nav__links a:hover {
  color: var(--white);
}

.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__burger {
  display: none;
  width: 34px;
  height: 24px;
  position: relative;
}

.nav__burger i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cream);
  transition: transform .5s var(--ease), opacity .3s;
}

.nav__burger i:first-child {
  top: 8px;
}

.nav__burger i:last-child {
  top: 15px;
}

.nav__burger[aria-expanded="true"] i:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] i:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(5, 7, 12, .97);
  backdrop-filter: blur(20px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer a {
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 300;
  color: var(--cream);
  padding: 6px 0;
}

/* =============================================================================
   HERO: constellation canvas
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  background: var(--ink);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* full-bleed star canvas */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* constellation SVG overlay */
.hero__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero__svg line {
  stroke: var(--gold);
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.hero__svg line.is-drawn {
  opacity: 0.65;
}

.hero__svg circle {
  fill: var(--gold);
  opacity: 0;
  transition: opacity 0.6s var(--ease), r 0.6s var(--ease);
}

.hero__svg circle.is-drawn {
  opacity: 1;
}

/* vignette */
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(110% 90% at 50% 50%, transparent 45%, rgba(5, 7, 12, .45) 100%);
}

/* film grain texture */
.hero__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .04;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(3) infinite;
}

@keyframes grain {
  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(-3%, 2%);
  }

  66% {
    transform: translate(2%, -3%);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* ── wordmark ── */
.hero__copy {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

.hero.is-ready .hero__copy {
  opacity: 1;
  transform: none;
}

.hero__eyebrow {
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 28px;
  opacity: 0.8;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.16;
  font-size: clamp(3.8rem, 9.5vw, 8.5rem);
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04em;
}

.hero__title-line {
  display: block;
  line-height: 1.14;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.hero__title-line--italic {
  font-style: italic;
  color: var(--cream);
}

.hero.is-ready .hero__title-line[data-line="0"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.hero.is-ready .hero__title-line[data-line="1"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.22s;
}

.hero.is-ready .hero__title-line[data-line="2"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.34s;
}

.hero__sub {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin-top: 28px;
  font-weight: 400;
  opacity: 0;
  transition: opacity 1s var(--ease) 0.6s;
}

.hero.is-ready .hero__sub {
  opacity: 1;
}

/* ── Tiny Minimalist Hero Scroll Arrow ── */
.hero__scroll {
  position: absolute;
  bottom: clamp(24px, 4.5vh, 40px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  text-decoration: none;
  opacity: 0;
  cursor: pointer;
  transition: opacity 1.2s var(--ease) 0.8s, transform 1.2s var(--ease) 0.8s;
  -webkit-tap-highlight-color: transparent;
}

.hero.is-ready .hero__scroll {
  opacity: 0.85;
  transform: translateX(-50%) translateY(0);
}

.hero__scroll-arrow {
  width: 18px;
  height: 18px;
  color: var(--gold);
  opacity: 0.8;
  filter: drop-shadow(0 0 8px rgba(217, 192, 137, 0.45));
  animation: heroArrowPulse 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: all 0.35s var(--ease);
}

@keyframes heroArrowPulse {

  0%,
  18%,
  100% {
    transform: translateY(0);
    opacity: 0.65;
  }

  32% {
    transform: translateY(7px);
    opacity: 1;
    color: var(--white);
    filter: drop-shadow(0 0 12px rgba(217, 192, 137, 0.9));
  }

  46% {
    transform: translateY(0);
    opacity: 0.75;
  }

  56% {
    transform: translateY(4px);
    opacity: 0.9;
  }

  70% {
    transform: translateY(0);
    opacity: 0.65;
  }
}

.hero__scroll:hover .hero__scroll-arrow {
  color: var(--white);
  opacity: 1;
  transform: translateY(4px);
  filter: drop-shadow(0 0 14px rgba(217, 192, 137, 0.95));
}

/* ── constellation node labels ── */
.hero__nodes {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hero__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.hero__node.is-visible {
  opacity: 1;
}

.hero__node-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(217, 192, 137, .12), 0 0 16px rgba(217, 192, 137, .6);
}

.hero__node-label {
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f7eedd;
  white-space: nowrap;
  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 2px 8px rgba(5, 7, 12, 0.7);
}

/* ── parallax depth on scroll ── */
.hero__canvas,
.hero__svg {
  will-change: transform;
}

/* ── mobile grain disable (performance) ── */
@media (max-width: 768px) {
  .hero__grain {
    display: none !important;
    animation: none !important;
  }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero__grain {
    display: none;
  }

  .hero__copy,
  .hero__title-line,
  .hero__sub,
  .hero__cta,
  .hero__cue {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__node {
    transition: none !important;
    opacity: 1 !important;
  }
}

/* =============================================================================
   AMBIENT STARFIELD
   ========================================================================== */
.stars-global {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
}

.stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .70;
  z-index: 0;
}

@media (max-width: 768px) {
  .stars {
    opacity: .38;
  }
}

/* =============================================================================
   MANIFESTO
   ========================================================================== */
.manifesto {
  position: relative;
  overflow: hidden;
  padding: var(--sec-y) 0 calc(var(--sec-y) * .7);
  background: linear-gradient(to bottom, var(--ink) 0%, var(--navy-deep) 60%, var(--ink-2) 100%);
}

.manifesto .wrap {
  position: relative;
}

.eyebrow {
  margin-bottom: clamp(40px, 6vw, 72px);
  text-transform: none;
  letter-spacing: .16em;
  font-size: 12px;
}

.eyebrow span {
  color: var(--cream);
}

.eyebrow em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--cream-dim);
  letter-spacing: 0;
}

.manifesto__type {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 5.4vw, 4.8rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--white);
}

.manifesto__type .line {
  display: block;
}

.manifesto__type em {
  font-style: italic;
  color: var(--gold);
}

.manifesto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--rule-soft);
}

.manifesto__grid p {
  color: var(--cream);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.6;
  max-width: 52ch;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
  margin-top: clamp(56px, 8vw, 104px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--rule-soft);
}

.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1;
  color: var(--white);
}

.stat b::after {
  content: "+";
  color: var(--gold);
  font-size: .5em;
  vertical-align: super;
  margin-left: .1em;
}

.stat span {
  display: block;
  margin-top: 10px;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* =============================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  border-block: 1px solid var(--rule-soft);
  background: var(--ink-2);
  overflow: hidden;
  padding: 20px 0;
}

.marquee__row {
  display: flex;
  gap: 40px;
  width: max-content;
  will-change: transform;
}

.marquee__row span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--cream-dim);
  white-space: nowrap;
}

.marquee__row i {
  color: var(--gold);
  font-style: normal;
  align-self: center;
  font-size: .9rem;
}

/* =============================================================================
   CRAFT
   ========================================================================== */
.craft {
  padding: var(--sec-y) 0;
  background: var(--ink-2);
}

.craft__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
}

@media (min-width: 1024px) {
  .craft__body {
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
}

.craft-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "no name arrow" ". desc .";
  column-gap: clamp(16px, 2vw, 34px);
  row-gap: 6px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--rule-soft);
  transition: padding-left .6s var(--ease);
}

.craft-row:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.craft-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 100%;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease);
}

.craft-row.is-active::before {
  transform: scaleX(1);
}

.craft-row.is-active {
  padding-left: clamp(10px, 1.6vw, 24px);
}

.craft-row__no {
  grid-area: no;
  color: var(--cream-mute);
  padding-top: .6em;
  transition: color .5s;
}

.craft-row__name {
  grid-area: name;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--cream-dim);
  transition: color .5s var(--ease);
}

.craft-row__desc {
  grid-area: desc;
  max-width: 48ch;
  color: var(--cream-dim);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.5;
  opacity: .001;
  max-height: 0;
  overflow: hidden;
  transition: opacity .6s var(--ease), max-height .6s var(--ease);
}

.craft-row__arrow {
  grid-area: arrow;
  align-self: center;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: all .5s var(--ease);
}

.craft-row.is-active .craft-row__name {
  color: var(--white);
}

.craft-row.is-active .craft-row__no {
  color: var(--gold);
}

.craft-row.is-active .craft-row__desc {
  opacity: 1;
  color: var(--cream);
  max-height: 140px;
}

.craft-row.is-active .craft-row__arrow {
  opacity: 1;
  transform: none;
}

.craft-row__detail {
  display: none;
}

.craft__panel {
  position: sticky;
  top: 110px;
  height: clamp(400px, 75vh, 800px);
  contain: layout style;
}

.craft__panel-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.craft__panel-track {
  display: flex;
  flex-direction: column;
  gap: 32px;
  transition: transform 0.8s var(--ease);
}

.craft-view {
  flex: none;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0.3;
  transform: scale(0.95);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.craft-view.is-active {
  opacity: 1;
  transform: scale(1);
}

.craft-view__frame {
  /* background-image is set from JS */
  position: relative;
  flex: 1;
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1.2s var(--ease);
  filter: saturate(.9) contrast(1.05);
}

.craft-view.is-active .craft-view__frame {
  transform: scale(1);
}

.craft-view__deliver {
  padding: 16px 20px;
  background: var(--ink-2);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cream-dim);
  text-transform: uppercase;
  border-top: 1px solid var(--rule-soft);
}

@media (max-width: 1023px) {
  .craft__panel {
    display: none;
  }

  .craft-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "no name arrow"
      ". desc ."
      "detail detail detail";
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    background: rgba(10, 19, 48, 0.3);
    cursor: pointer;
    transition: all 0.4s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }

  .craft-row:last-child {
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 0;
  }

  .craft-row::before {
    display: none;
  }

  .craft-row.is-active {
    padding-left: 14px;
    background: linear-gradient(160deg, rgba(16, 34, 76, 0.55) 0%, rgba(10, 19, 48, 0.75) 100%);
    border-color: rgba(217, 192, 137, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(217, 192, 137, 0.1);
  }

  .craft-row__no {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding-top: 0.3em;
    color: var(--cream-mute);
    transition: color 0.4s;
  }

  .craft-row.is-active .craft-row__no {
    color: var(--gold);
  }

  .craft-row__name {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
    line-height: 1.2;
    color: var(--cream-dim);
    transition: color 0.4s;
  }

  .craft-row.is-active .craft-row__name {
    color: var(--white);
  }

  .craft-row__arrow {
    align-self: center;
    color: var(--gold);
    font-size: 16px;
    opacity: 0.6;
    transform: rotate(0deg);
    transition: transform 0.4s var(--ease), opacity 0.4s;
  }

  .craft-row.is-active .craft-row__arrow {
    opacity: 1;
    transform: rotate(90deg);
  }

  .craft-row__desc {
    grid-area: desc;
    color: var(--cream-mute);
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.85;
    max-height: none;
    margin: 0;
    transition: color 0.4s;
  }

  .craft-row.is-active .craft-row__desc {
    color: var(--gold);
    opacity: 1;
  }

  .craft-row__detail {
    display: block;
    grid-area: detail;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, margin-top 0.35s ease;
  }

  .craft-row.is-active .craft-row__detail {
    max-height: 280px;
    opacity: 1;
    margin-top: 12px;
  }

  .craft-row__explanation {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 3.8vw, 1.25rem);
    font-weight: 300;
    color: var(--cream);
    line-height: 1.55;
    padding: 14px 16px;
    background: rgba(5, 8, 15, 0.65);
    border: 1px solid rgba(217, 192, 137, 0.45);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 16px rgba(0, 0, 0, 0.3);
  }
}

/* =============================================================================
   WORK - archive plates
   ========================================================================== */
.work {
  position: relative;
  overflow: hidden;
  padding: var(--sec-y) 0;
  background: linear-gradient(to bottom, var(--ink-2), var(--navy-deep) 60%, var(--ink-2));
}

.work .wrap {
  position: relative;
  z-index: 2;
}


/* ── plate detail sheet ──────────────────────────────────────────────────── */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 160;
  visibility: hidden;
}

.sheet.is-open {
  visibility: visible;
}

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 12, .84);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .6s var(--ease);
}

.sheet.is-open .sheet__scrim {
  opacity: 1;
}

.sheet__panel {
  position: absolute;
  inset: auto 0 0 0;
  max-height: 92svh;
  overflow-y: auto;
  display: grid;
  gap: 0;
  background: var(--ink-2);
  border-top: 1px solid var(--rule);
  transform: translateY(100%);
  transition: transform .8s var(--ease);
  contain: layout style;
}

.sheet.is-open .sheet__panel {
  transform: none;
}

@media (min-width: 900px) {
  .sheet__panel {
    grid-template-columns: none;
    max-height: 100%;
  }
}

.sheet__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 12, .6);
  transition: background .4s var(--ease), transform .4s var(--ease);
}

.sheet__close:hover {
  background: var(--cream);
  transform: rotate(90deg);
}

.sheet__close span {
  position: absolute;
  width: 14px;
  height: 1px;
  background: var(--cream);
  transition: background .4s;
}

.sheet__close:hover span {
  background: var(--ink);
}

.sheet__close span:first-child {
  transform: rotate(45deg);
}

.sheet__close span:last-child {
  transform: rotate(-45deg);
}

.sheet__media {
  min-height: 240px;
  background: var(--navy-deep);
  overflow: hidden;
}

.sheet__frame {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 1s var(--ease);
}

.sheet.is-open .sheet__frame {
  transform: scale(1);
}

.sheet__copy {
  padding: clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sheet__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.06;
  color: var(--white);
}

.sheet__meta {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.sheet__text {
  color: var(--cream-dim);
  max-width: 46ch;
}

.sheet__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 18px;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
}

.sheet__facts dt {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin-bottom: 5px;
}

.sheet__facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--cream);
}

.sheet__nav {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
}

.sheet__step {
  padding: 11px 22px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: all .4s var(--ease);
}

.sheet__step:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

/* =============================================================================
   STUDIO / FOUNDERS
   ========================================================================== */
.studio {
  padding: var(--sec-y) 0;
  background: var(--ink-2);
}

/* founders' stage */
.tk {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  background: transparent;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.tk__scroll {
  display: none;
}

.tk__stage {
  position: relative;
  height: clamp(480px, 76svh, 760px);
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(217, 192, 137, 0.15);
}

.tk__static-img {
  display: none;
}

.tk__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tk__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 46%, transparent 46%, rgba(5, 7, 12, .35) 100%),
    linear-gradient(to bottom, rgba(5, 7, 12, .4) 0%, transparent 20%, transparent 80%, rgba(5, 7, 12, .6) 100%);
}

.tk__slate,
.tk__cue,
.tk__bar {
  display: none;
}

/* ── Founders Studio Overlay Labels ── */
.tk__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: clamp(14%, 22svh, 28%);
  padding-left: clamp(20px, 4.5vw, 70px);
  padding-right: clamp(20px, 4.5vw, 70px);
  box-sizing: border-box;
}

.tk__label {
  display: flex;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  box-sizing: border-box;
  opacity: 0;
  background: rgba(244, 241, 234, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(217, 192, 137, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.tk__label--left {
  align-items: flex-start;
  text-align: left;
  transform: translateX(-40px);
}

.tk__label--right {
  align-items: flex-end;
  text-align: right;
  transform: translateX(40px);
}

.tk.is-live .tk__label--left {
  opacity: 1;
  transform: translateX(0);
}

.tk.is-live .tk__label--right {
  opacity: 1;
  transform: translateX(0);
}

.tk__label-tag {
  font-family: var(--sans);
  font-size: clamp(9px, 0.82vw, 11px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a37f37;
  margin-bottom: 3px;
  display: inline-block;
  white-space: nowrap;
}

.tk__label-name {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  color: #060c1c;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tk__label-line {
  width: 32px;
  height: 1.5px;
  background: var(--gold);
  margin-top: 6px;
  border-radius: 2px;
}

.tk__label--right .tk__label-line {
  align-self: flex-end;
}

/* Mobile & Tablet Static Display for Founders Stage */
@media (max-width: 860px) {
  .tk__stage {
    position: relative;
    height: auto;
    aspect-ratio: 1024 / 510;
    max-height: none;
    min-height: 0;
    border-radius: 14px;
    background: #080f24;
    overflow: hidden;
    display: block;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(217, 192, 137, 0.2);
  }

  .tk__static-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
  }

  .tk__canvas,
  .tk__scrim,
  .tk__labels {
    display: none !important;
  }
}

.founders {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(56px, 7vw, 96px);
}

@media (max-width: 720px) {
  .founders {
    grid-template-columns: 1fr;
  }
}

.founder {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 48px 44px 52px;
  background: rgba(10, 19, 48, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(217, 192, 137, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}

/* top gold accent bar */
.founder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(217, 192, 137, 0.15) 70%, transparent 100%);
  border-radius: 16px 16px 0 0;
  transition: opacity .4s var(--ease);
}

/* subtle radial glow bottom-left */
.founder::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -40px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(217, 192, 137, 0.07) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

.founder:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 192, 137, 0.45);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 20px rgba(217, 192, 137, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.founder:hover::after {
  opacity: 1;
  background: radial-gradient(circle, rgba(217, 192, 137, 0.12) 0%, transparent 70%);
}

/* ── top block ── */
.founder__top {
  margin-bottom: 36px;
}

.founder__role {
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 16px;
}

.founder__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 3.2vw, 3.2rem);
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 10px;
}

.founder__discipline {
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e2d5bd;
  font-weight: 400;
}

/* ── skills list ── */
.founder__skills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(239, 228, 206, 0.08);
}

.founder__skill {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(239, 228, 206, 0.08);
  position: relative;
  transition: background-color .3s var(--ease);
}

.founder__skill-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: .03em;
  transition: color .3s var(--ease);
}

.founder__skill:hover .founder__skill-title {
  color: var(--gold);
}

.founder__skill-desc {
  font-size: 14.5px;
  color: var(--cream-dim);
  line-height: 1.6;
  font-weight: 400;
}

/* remove old selectors that no longer apply */
.founder__bio {
  display: none;
}

.founder--note {
  display: none;
}

.founder--note::before {
  display: none;
}

/* =============================================================================
   PROCESS - star chart
   ========================================================================== */
.process {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 7vw, 96px) 0 clamp(80px, 10vw, 130px);
  background: linear-gradient(to bottom, var(--ink-2) 0%, var(--navy-deep) 30%, var(--navy-deep) 65%, var(--ink) 100%);
}

.process .wrap {
  position: relative;
}

.process .sec-head {
  max-width: 480px;
  position: relative;
  z-index: 5;
}

.chart {
  position: relative;
  min-height: clamp(400px, 42vw, 500px);
  margin-top: -140px;
  z-index: 4;
}

.chart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(239, 228, 206, .5);
  overflow: visible;
}

.chart__line {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px rgba(239, 228, 206, .45));
  transition: stroke-dashoffset 2s cubic-bezier(0.65, 0, 0.35, 1);
}

.chart.is-visible .chart__line {
  stroke-dashoffset: 0;
}

.chart__steps {
  position: absolute;
  inset: 0;
}

.step {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 10;
}

.step__star {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow:
    0 0 3px 1px rgba(255, 255, 255, .9),
    0 0 10px 3px rgba(239, 228, 206, .45),
    0 0 24px 6px rgba(239, 228, 206, .15);
  z-index: 2;
}

.step__star::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(239, 228, 206, .12) 0%,
      rgba(239, 228, 206, .04) 40%,
      transparent 70%);
  animation: starBreathe 4s var(--ease-io) infinite;
}

@keyframes starBreathe {

  0%,
  100% {
    transform: scale(.85);
    opacity: .7;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.step__content {
  position: absolute;
  top: 24px;
  left: -140px;
  width: 280px;
  text-align: center;
}

.step:first-child .step__content {
  left: -20px;
  text-align: left;
}

.step:last-child .step__content {
  left: -40px;
  right: auto;
  top: 24px;
  bottom: auto;
  text-align: left;
}

.step__no {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
}

.step__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--white);
  margin-bottom: 8px;
}

.step__desc {
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .chart {
    min-height: 0;
    margin-top: 36px;
  }

  .chart__svg {
    display: none;
  }

  .chart__steps {
    position: static;
    display: grid;
    gap: 44px;
  }

  .step {
    position: static;
  }

  .step__content {
    position: static;
    width: auto;
    text-align: left !important;
    padding-left: 24px;
    border-left: 1px solid var(--rule-soft);
    margin-left: 4px;
    padding-bottom: 8px;
  }

  .step__star {
    left: 24px;
    top: auto;
    transform: translate(-50%, 8px);
  }
}

/* =============================================================================
   CONTACT
   ========================================================================== */
.contact {
  padding: var(--sec-y) 0;
  background: var(--ink);
}

.cards {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  transform: rotate(var(--rot, 0deg));
  transition: transform .6s var(--ease), border-color .6s var(--ease);
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(315deg, rgba(239, 228, 206, 0.12) 50%, transparent 50%);
  pointer-events: none;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}

.card:hover::after {
  width: 54px;
  height: 54px;
}

.card:nth-child(1) {
  --rot: -.5deg;
}

.card:nth-child(2) {
  --rot: .4deg;
}

.card:nth-child(3) {
  --rot: -.3deg;
}

.card--connect {
  justify-content: space-between;
}

.card:hover {
  transform: rotate(0deg) translateY(-8px);
  border-color: rgba(239, 228, 206, .36);
}

.card__mark {
  width: 26px;
  height: 26px;
  color: var(--cream);
}

.card__word {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--white);
}

.card__word b {
  font-weight: 300;
  color: var(--cream-mute);
}

.card__sub {
  color: var(--cream-dim);
  font-size: 14px;
}

.card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cream-dim);
  margin-top: 4px;
}

.card__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}

.card__label {
  color: var(--gold);
}

.card__lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
}

.card__list {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}

.card__list li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: var(--cream-dim);
}

.card__list span {
  color: var(--cream-mute);
  font-size: 11px;
  letter-spacing: .12em;
  padding-top: 3px;
}

.card__cta {
  margin-top: auto;
  padding-top: 18px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  border-top: 1px solid var(--rule-soft);
  transition: color .4s;
}

.card__cta:hover {
  color: var(--gold);
}

.card__mail {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  color: var(--white);
  word-break: break-all;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: border-color .4s, color .4s;
}

.card__mail:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.card--cream {
  background: linear-gradient(150deg, var(--cream) 0%, #ddd0b6 100%);
  border-color: rgba(5, 7, 12, .18);
}

.card--cream .card__label,
.card--cream .card__list span {
  color: rgba(5, 7, 12, .55);
}

.card--cream .card__lead {
  color: var(--ink);
}

.card--cream .card__list li {
  color: rgba(5, 7, 12, .72);
}

.card--cream .card__cta {
  color: rgba(5, 7, 12, .72);
  border-top-color: rgba(5, 7, 12, .14);
}

.card--cream .card__cta:hover {
  color: var(--ink);
}

.card--cream .card__foot {
  color: rgba(5, 7, 12, .5);
  border-top-color: rgba(5, 7, 12, .14);
}

.mega {
  display: block;
  margin-top: clamp(60px, 9vw, 128px);
  text-align: center;
  overflow: hidden;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.6rem, 11vw, 9rem);
  line-height: 1;
  color: var(--white);
}

.mega__line {
  display: block;
  transition: transform .7s var(--ease);
}

.mega__line--dupe {
  color: var(--gold);
}

.mega:hover .mega__line {
  transform: translateY(-100%);
}

/* =============================================================================
   FOOTER
   ========================================================================== */
.foot {
  padding: 34px 0 40px;
  border-top: 1px solid var(--rule-soft);
  background: var(--ink);
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.foot__row a {
  transition: color .4s;
}

.foot__row a:hover {
  color: var(--cream);
}

.foot__mid {
  text-align: center;
}

/* =============================================================================
   REVEALS
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .nav__links {
    display: none;
  }

  .amb {
    top: 20px;
    left: 16px;
    width: 48px;
    height: 48px;
  }

  .amb__icon {
    width: 28px;
    height: 28px;
  }

  .nav__burger {
    display: block;
  }

  .sec-head--split {
    display: block;
  }

  .sec-head--split .sec-head__note {
    text-align: left;
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .tk__scroll {
    height: 120vh;
  }
}




/* Added for Craft View Text Replacements */
.craft-view__explanation {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.2vw, 1.8rem);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.6;
  text-align: left;
  transform: translateY(10px);
  transition: transform 1.2s var(--ease);
}

.craft-view.is-active .craft-view__explanation {
  transform: translateY(0);
}

@media (max-width: 900px) {
  .craft-view__explanation {
    font-size: 1.4rem;
    padding: 24px;
  }
}


/* =============================================================================
   CASE STUDY MODAL & MOCKUP PLACEHOLDERS (Matching Attached Layout)
   ========================================================================== */
.sheet__panel {
  position: fixed;
  inset: 0;
  background: var(--ink);
  overflow-y: auto;
  padding: clamp(24px, 4vw, 60px) clamp(20px, 5vw, 80px);
  color: var(--cream);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--ink-2);
  display: block;
  grid-template-columns: none;
}

.sheet__close {
  position: fixed;
  top: 30px;
  right: 36px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 13, 20, 0.85);
  border: 1px solid var(--rule-soft);
  color: var(--cream);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.3s, background 0.3s;
}

.sheet__close:hover {
  transform: scale(1.1);
  background: var(--gold);
  color: var(--ink);
}

.cs-container {
  max-width: 1040px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.cs-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cs-back {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.15em;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.3s;
}

.cs-back:hover {
  opacity: 0.7;
}

.cs-tag {
  color: var(--cream-dim);
}

.cs-title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--white);
}

.cs-lead {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--cream-dim);
  margin-bottom: 36px;
  max-width: 68ch;
  font-weight: 300;
}

.cs-hero-wrap {
  margin-bottom: 28px;
}

/* Mockup Frame & Placeholder styling */
.mockup-frame {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  background: var(--navy-deep);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}

.mockup-header {
  height: 36px;
  background: rgba(15, 20, 30, 0.95);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: relative;
}

.mockup-dots {
  display: flex;
  gap: 6px;
}

.mockup-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(239, 228, 206, 0.2);
}

.mockup-dots span:nth-child(1) {
  background: #ff5f56;
}

.mockup-dots span:nth-child(2) {
  background: #ffbd2e;
}

.mockup-dots span:nth-child(3) {
  background: #27c93f;
}

.mockup-url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--cream-mute);
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.mockup-body {
  flex: 1;
  position: relative;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0d121c;
}

.mockup-body--fit {
  flex: none;
  width: 100%;
  background: transparent;
  padding: 0;
  display: block;
}

.mockup-img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

.mockup-placeholder-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(10, 13, 20, 0.88);
  border: 1px dashed var(--gold);
  padding: 20px 32px;
  border-radius: 8px;
  color: var(--cream);
  backdrop-filter: blur(10px);
  text-align: center;
}

.mockup-placeholder-badge svg {
  color: var(--gold);
}

.mockup-placeholder-badge span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.mockup-placeholder-badge small {
  font-size: 11px;
  color: var(--cream-dim);
}

.mockup-placeholder-badge code {
  color: var(--gold);
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Meta Bar */
.cs-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.cs-tags-text {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.cs-live-btn {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  text-decoration: none;
  padding-bottom: 2px;
  transition: opacity 0.3s;
}

.cs-live-btn:hover {
  opacity: 0.75;
}

.cs-divider {
  width: 100%;
  height: 1px;
  background: var(--rule-soft);
  margin: 40px 0;
}

.cs-section {
  margin-bottom: 60px;
}

.cs-sec-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 300;
  margin-bottom: 16px;
  color: var(--white);
}

.cs-sec-desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--cream-dim);
  max-width: 75ch;
  margin-bottom: 28px;
  font-weight: 300;
}

.cs-sec-media {
  margin-top: 24px;
}

/* Result Head with Tape Badge */
.cs-result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.cs-result-head>div:first-child {
  flex: 1;
  min-width: 280px;
}

.cs-tape-badge {
  background: var(--navy-deep);
  border: 1px solid var(--gold);
  padding: 18px 28px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transform: rotate(-1.5deg);
}

.cs-tape-text {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--gold);
  font-style: italic;
}

.cs-tape-badge small {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cream-mute);
  text-transform: uppercase;
}

/* Comparison Grid */
.cs-process-box {
  background: rgba(15, 20, 30, 0.6);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 28px;
  margin-top: 36px;
}

.cs-process-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin-bottom: 20px;
}

.cs-process-label em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  color: var(--cream-dim);
}

.cs-comparison-grid {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cs-comp-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-comp-frame {
  aspect-ratio: 16/10;
  background: var(--navy-deep);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-comp-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--cream-mute);
  font-size: 12px;
}

/* Coming Soon tile: replaces a missing hero/live image (result comparison, hero mockup, plate card) */
.cs-coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 55%, rgba(16, 34, 76, 0.92) 0%, rgba(5, 7, 12, 0.97) 100%);
  border-radius: 6px;
  overflow: hidden;
}

.cs-coming-soon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg,
      rgba(217, 192, 137, 0.03) 0px,
      rgba(217, 192, 137, 0.03) 1px,
      transparent 1px,
      transparent 18px);
  pointer-events: none;
}

.cs-coming-soon svg {
  color: var(--gold);
  opacity: 0.75;
  flex-shrink: 0;
  position: relative;
}

.cs-coming-soon__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  position: relative;
}

.cs-coming-soon__sub {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-mute);
  position: relative;
}

/* Coming Soon tile inside the .cs-comp-frame (result comparison) */
.cs-comp-frame {
  position: relative;
}

/* Coming Soon tile inside the plate__screen (archive card) */
.plate__screen {
  position: relative;
}

.plate__coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 55%, rgba(16, 34, 76, 0.92) 0%, rgba(5, 7, 12, 0.97) 100%);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

/* show tile only when image fails (class added via onerror) */
.plate__screen--coming-soon .plate__coming-soon {
  opacity: 1;
  pointer-events: auto;
}

.plate__coming-soon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg,
      rgba(217, 192, 137, 0.03) 0px,
      rgba(217, 192, 137, 0.03) 1px,
      transparent 1px,
      transparent 18px);
  pointer-events: none;
}

.plate__coming-soon svg {
  color: var(--gold);
  opacity: 0.75;
  flex-shrink: 0;
  position: relative;
}

.plate__coming-soon__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  position: relative;
}

.plate__coming-soon__sub {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-mute);
  position: relative;
}

.cs-comp-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  text-align: center;
}

.cs-arrow-sep {
  font-size: 24px;
  color: var(--gold);
}

/* Next Case Footer Card */
.cs-next-case {
  margin-top: 80px;
  padding: 40px;
  background: var(--navy-deep);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.4s, transform 0.4s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-next-case:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.cs-next-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}

.cs-next-title {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--white);
}

.cs-next-meta {
  font-size: 13px;
  color: var(--cream-dim);
}

/* Plate Image Placeholders */
.plate__img-placeholder,
.plate__img-box {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--navy-deep);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  margin-bottom: 16px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  transition: transform 0.6s var(--ease);
}

.plate:hover .plate__img-placeholder {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .cs-comparison-grid {
    flex-direction: column;
  }

  .cs-arrow-sep {
    transform: rotate(90deg);
  }
}

/* =============================================================================
   ARCHIVE CARDS - 3-Card Visible Carousel Slider (Nav Arrows & Auto-scroll)
   ========================================================================== */
.plates-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-top: 24px;
}

.plates-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  width: 100%;
  position: relative;
  border-radius: 6px;
  padding: 12px 2px 18px 2px;
}

.plates-track {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 24px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  width: 100%;
}

.plate {
  position: relative;
  z-index: 2;
  cursor: pointer;
  outline: none;
  flex: 0 0 calc((100% - (2 * clamp(14px, 1.6vw, 24px)) - 3px) / 3);
  width: calc((100% - (2 * clamp(14px, 1.6vw, 24px)) - 3px) / 3);
  max-width: calc((100% - (2 * clamp(14px, 1.6vw, 24px)) - 3px) / 3);
  box-sizing: border-box;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #080f24;
  border-radius: 8px;
  transition: transform 0.5s var(--ease);
}

@media (max-width: 900px) {
  .plates-carousel-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 14px;
    padding-top: 12px;
  }

  .plates-viewport {
    width: 100%;
    flex: 0 0 100%;
    order: 1;
    padding: 6px 0 12px;
  }

  .plate {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .plates-nav-btn--prev {
    order: 2;
  }

  .plates-nav-btn--next {
    order: 3;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .plate {
    flex: 0 0 calc((100% - clamp(16px, 1.8vw, 28px)) / 2);
    width: calc((100% - clamp(16px, 1.8vw, 28px)) / 2);
  }
}

.plate:hover {
  transform: translateY(-8px);
}

.plates-nav-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(10, 19, 48, 0.85);
  border: 1px solid rgba(217, 192, 137, 0.4);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.plates-nav-btn:hover {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(217, 192, 137, 0.5);
}

.plates-nav-btn:active {
  transform: scale(0.95);
}

/* ── Outside Top Executive Location Tag ── */
.plate__top-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  background: linear-gradient(160deg, rgba(16, 34, 76, 1) 0%, rgba(10, 19, 48, 1) 100%);
  border: 1px solid rgba(217, 192, 137, 0.35);
  border-bottom: 0;
  padding: 4px 16px 5px;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: none;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.plate:hover .plate__top-tag {
  border-color: var(--gold);
  box-shadow: 0 -4px 18px rgba(217, 192, 137, 0.35);
  color: var(--gold);
}

.plate__body {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(16px, 2vw, 24px);
  border-radius: 8px;
  overflow: hidden;
  background: #080f24;
  background: linear-gradient(165deg, #0e1e3e 0%, #060b18 100%);
  border: 1px solid rgba(217, 192, 137, 0.35);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.plate:hover .plate__body {
  border-color: var(--gold);
  background: linear-gradient(165deg, #11254c 0%, #070e20 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 24px rgba(217, 192, 137, 0.2);
}

/* ── Dark image placeholder area ── */
.plate__screen {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050a16;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.plate__screen-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.5s var(--ease), transform 1s var(--ease);
}

.plate:hover .plate__screen-img {
  opacity: 1;
  transform: scale(1.04);
}

/* ── Company name - big, bold, white ── */
.plate__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--white);
  margin: 18px 0 0 0;
  line-height: 1.2;
}

/* ── Tagline - smaller, cream ── */
.plate__tagline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  color: var(--cream-dim);
  margin: 6px 0 0 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Fold triangle at bottom-right ── */
.plate__fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(315deg,
      rgba(239, 228, 206, 0.12) 50%,
      transparent 50%);
  pointer-events: none;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}

.plate:hover .plate__fold {
  width: 54px;
  height: 54px;
}

/* =============================================================================
   ENERGIXPERT MOBILE APP 12-SCREEN SHOWCASE & UI/UX DESIGN SYSTEM
   ========================================================================== */

/* Plate Card: Mobile App Sequential Deck */
.plate--app-suite .plate__screen--app-deck {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle at 50% 120%, #15244a 0%, #080d1a 65%, #04060b 100%);
  border-bottom: 1px solid rgba(217, 192, 137, 0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plate-app-showcase {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plate-app-phone {
  position: relative;
  background: #000;
  border-radius: 18px;
  border: 1.5px solid rgba(217, 192, 137, 0.35);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  transition: transform 0.45s var(--ease), opacity 0.35s ease, filter 0.35s ease;
}

.plate-app-phone--main {
  width: 132px;
  height: 250px;
  z-index: 3;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(217, 192, 137, 0.2);
}

.plate-app-phone--sub {
  position: absolute;
  top: 24px;
  width: 110px;
  height: 215px;
  z-index: 1;
  opacity: 0.35;
  filter: blur(0.4px) brightness(0.65);
  pointer-events: none;
}

.plate-app-phone--left {
  left: 20px;
  transform: rotate(-10deg) scale(0.92);
}

.plate-app-phone--right {
  right: 20px;
  transform: rotate(10deg) scale(0.92);
}

.plate:hover .plate-app-phone--main {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--gold);
}

.plate:hover .plate-app-phone--left {
  transform: rotate(-14deg) translateX(-6px) scale(0.95);
  opacity: 0.55;
  filter: blur(0px) brightness(0.85);
}

.plate:hover .plate-app-phone--right {
  transform: rotate(14deg) translateX(6px) scale(0.95);
  opacity: 0.55;
  filter: blur(0px) brightness(0.85);
}

.plate-app-notch {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 4px;
  background: #000;
  border-radius: 4px;
  z-index: 5;
}

.plate-app-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

/* Sequence Indicator on Card */
.plate-seq-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(5, 8, 15, 0.88);
  border: 1px solid rgba(217, 192, 137, 0.3);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  z-index: 10;
  pointer-events: none;
}

.plate-seq-num {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.12em;
}

.plate-seq-name {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--cream);
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mini controls on card */
.plate-seq-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.plate-seq-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(5, 8, 15, 0.85);
  border: 1px solid rgba(217, 192, 137, 0.4);
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s var(--ease);
}

.plate-seq-btn:hover {
  background: var(--gold);
  color: var(--ink);
  transform: scale(1.1);
}

.plate-seq-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(239, 228, 206, 0.1);
  z-index: 10;
}

.plate-seq-fill {
  height: 100%;
  background: var(--gold);
  transition: width 0.3s ease;
}

.plate__caption-box {
  padding: 14px 18px 16px;
}

.plate__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.plate__badge-pill {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold);
  background: rgba(217, 192, 137, 0.12);
  border: 1px solid rgba(217, 192, 137, 0.35);
  padding: 2px 7px;
  border-radius: 10px;
}

.plate__action-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.plate__action-arrow {
  transition: transform 0.3s var(--ease);
}

.plate:hover .plate__action-arrow {
  transform: translateX(4px);
}

/* =============================================================================
   CASE STUDY: 12-SCREEN MOBILE UI/UX SUITE
   ========================================================================== */

.cs-app-suite {
  margin: 50px 0;
  padding: 38px 30px;
  background: linear-gradient(180deg, rgba(14, 25, 55, 0.45) 0%, rgba(6, 10, 20, 0.8) 100%);
  border: 1px solid rgba(217, 192, 137, 0.22);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.cs-app-suite__head {
  margin-bottom: 32px;
}

.cs-app-suite__badge-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cs-app-suite__badge {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.cs-app-suite__count {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--cream);
  background: rgba(239, 228, 206, 0.08);
  border: 1px solid rgba(239, 228, 206, 0.15);
  padding: 3px 10px;
  border-radius: 20px;
}

.cs-app-suite__title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 14px;
}

.cs-app-suite__lead {
  font-family: var(--sans);
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--cream-dim);
  line-height: 1.65;
  max-width: 80ch;
}

/* Phase Flow Bar */
.cs-flow-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 28px 0 32px;
}

.cs-flow-step {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: rgba(5, 8, 16, 0.6);
  border: 1px solid rgba(217, 192, 137, 0.16);
  border-radius: 10px;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}

.cs-flow-step:hover,
.cs-flow-step.is-active {
  background: rgba(21, 36, 74, 0.6);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cs-flow-num {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 4px;
}

.cs-flow-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 4px;
}

.cs-flow-range {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--cream-mute);
}

@media (max-width: 900px) {
  .cs-flow-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .cs-flow-bar {
    grid-template-columns: 1fr;
  }
}

/* Filter Pills */
.cs-filter-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.cs-pill {
  padding: 7px 16px;
  border-radius: 24px;
  background: rgba(5, 8, 16, 0.6);
  border: 1px solid rgba(239, 228, 206, 0.15);
  color: var(--cream-mute);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.cs-pill:hover {
  color: var(--white);
  border-color: rgba(217, 192, 137, 0.4);
}

.cs-pill.is-active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(217, 192, 137, 0.3);
}

/* 12-Screen Responsive Grid */
.cs-screens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 1040px) {
  .cs-screens-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 650px) {
  .cs-screens-grid {
    grid-template-columns: 1fr;
  }
}

.cs-screen-card {
  display: flex;
  flex-direction: column;
  background: rgba(6, 10, 20, 0.7);
  border: 1px solid rgba(239, 228, 206, 0.1);
  border-radius: 16px;
  padding: 22px 18px 20px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.cs-screen-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 192, 137, 0.45);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(217, 192, 137, 0.12);
}

.cs-phone-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  cursor: pointer;
}

.cs-phone-chassis {
  position: relative;
  width: 180px;
  aspect-ratio: 9 / 18.5;
  background: #050508;
  border-radius: 22px;
  border: 2.5px solid #1a2336;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(217, 192, 137, 0.2);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.cs-screen-card:hover .cs-phone-chassis {
  transform: scale(1.025);
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9), 0 0 18px rgba(217, 192, 137, 0.3);
}

.cs-phone-notch {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 5px;
  background: #000;
  border-radius: 6px;
  z-index: 10;
}

.cs-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 19px;
  overflow: hidden;
}

.cs-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.cs-phone-zoom-hint {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.75);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.25s ease;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-screen-card:hover .cs-phone-zoom-hint {
  opacity: 1;
}

.cs-screen-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-screen-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cs-screen-seq {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.cs-screen-phase-tag {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.cs-screen-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 4px;
}

.cs-screen-subtitle {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.cs-screen-desc {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--cream-dim);
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}

.cs-screen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-stag {
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--cream-mute);
  background: rgba(239, 228, 206, 0.06);
  border: 1px solid rgba(239, 228, 206, 0.12);
  padding: 2px 7px;
  border-radius: 12px;
  letter-spacing: 0.03em;
}

/* =============================================================================
   FULLSCREEN HIGH-DEFINITION SCREEN INSPECTION LIGHTBOX
   ========================================================================== */

.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.cs-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cs-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.88);
  backdrop-filter: blur(12px);
}

.cs-lightbox__dialog {
  position: relative;
  z-index: 2;
  width: min(92vw, 980px);
  max-height: 90vh;
  background: linear-gradient(160deg, #0d152a 0%, #060914 100%);
  border: 1px solid rgba(217, 192, 137, 0.3);
  border-radius: 20px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9), 0 0 40px rgba(217, 192, 137, 0.15);
  overflow-y: auto;
  padding: 32px;
}

.cs-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(239, 228, 206, 0.08);
  border: 1px solid rgba(239, 228, 206, 0.2);
  color: var(--cream);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease);
  z-index: 5;
}

.cs-lightbox__close:hover {
  background: var(--gold);
  color: var(--ink);
  transform: scale(1.08);
}

.cs-lightbox__content {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 820px) {
  .cs-lightbox__content {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.cs-lightbox__device {
  display: flex;
  justify-content: center;
}

.cs-lightbox__phone {
  position: relative;
  width: 240px;
  aspect-ratio: 9 / 18.5;
  background: #000;
  border-radius: 28px;
  border: 3.5px solid #1f2c45;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 192, 137, 0.25);
  overflow: hidden;
}

.cs-lightbox__notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 6px;
  background: #000;
  border-radius: 6px;
  z-index: 10;
}

.cs-lightbox__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-lightbox__details {
  display: flex;
  flex-direction: column;
}

.cs-lightbox__header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cs-lightbox__counter {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
  background: rgba(217, 192, 137, 0.12);
  border: 1px solid rgba(217, 192, 137, 0.35);
  padding: 3px 10px;
  border-radius: 12px;
}

.cs-lightbox__phase {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-mute);
}

.cs-lightbox__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 6px;
}

.cs-lightbox__subtitle {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 20px;
}

.cs-lightbox__desc-box {
  background: rgba(0, 0, 0, 0.3);
  border-left: 2px solid var(--gold);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 22px;
}

.cs-lightbox__desc {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.65;
}

.cs-lightbox__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.cs-lightbox__nav-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cs-lightbox__nav-btn {
  padding: 10px 18px;
  background: rgba(239, 228, 206, 0.08);
  border: 1px solid rgba(217, 192, 137, 0.3);
  border-radius: 8px;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.cs-lightbox__nav-btn:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* =============================================================================
   PLAY THE CONSTELLATION - INTERACTIVE CELESTIAL GAME
   ========================================================================== */

.constellation-play-wrap {
  margin-top: 48px;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.constellation-trigger-box {
  display: flex;
  justify-content: center;
}

.btn-play-constellation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 680px;
  padding: 18px 26px;
  background: linear-gradient(135deg, rgba(14, 25, 55, 0.85) 0%, rgba(5, 8, 16, 0.95) 100%);
  border: 1.5px solid rgba(217, 192, 137, 0.4);
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(217, 192, 137, 0.15);
  cursor: pointer;
  transition: all 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}

.btn-play-constellation::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(217, 192, 137, 0.15), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}

.btn-play-constellation:hover::before {
  left: 150%;
}

.btn-play-constellation:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85), 0 0 35px rgba(217, 192, 137, 0.3);
}

.btn-play-constellation__icon {
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(217, 192, 137, 0.12);
  border: 1px solid rgba(217, 192, 137, 0.3);
  transition: transform 0.35s var(--ease), background 0.35s ease;
}

.btn-play-constellation:hover .btn-play-constellation__icon {
  transform: scale(1.1) rotate(15deg);
  background: rgba(217, 192, 137, 0.25);
  box-shadow: 0 0 15px rgba(217, 192, 137, 0.4);
}

.btn-play-constellation__text {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.btn-play-constellation__title {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
}

.btn-play-constellation__sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--cream-dim);
  letter-spacing: 0.02em;
}

.btn-play-constellation__badge {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--gold);
  padding: 4px 11px;
  border-radius: 20px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(217, 192, 137, 0.35);
  flex-shrink: 0;
}

.btn-play-constellation__arrow {
  color: var(--gold);
  font-size: 16px;
  transition: transform 0.35s var(--ease);
  flex-shrink: 0;
}

.btn-play-constellation[aria-expanded="true"] .btn-play-constellation__arrow {
  transform: rotate(90deg);
}

/* Expandable Celestial Game Arena */
.constellation-game-arena {
  width: 100%;
  transition: max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, margin 0.5s ease;
}

.constellation-game-arena.is-collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  margin-top: 0;
}

.constellation-game-arena.is-open {
  max-height: 1200px;
  opacity: 1;
  margin-top: 36px;
  pointer-events: auto;
}

.cg-inner {
  background: radial-gradient(circle at 50% 25%, #0f1c3f 0%, #050815 70%, #02040a 100%);
  border: 1.5px solid rgba(217, 192, 137, 0.35);
  border-radius: 22px;
  box-shadow: 0 35px 95px rgba(0, 0, 0, 0.9), 0 0 45px rgba(217, 192, 137, 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cg-hud {
  padding: 22px 28px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border-bottom: 1px solid rgba(217, 192, 137, 0.16);
  flex-wrap: wrap;
  background: rgba(4, 7, 16, 0.4);
}

.cg-hud__left {
  display: flex;
  flex-direction: column;
}

.cg-hud__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cg-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: cgPulse 2s infinite ease-in-out;
}

@keyframes cgPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

.cg-status-text {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.cg-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin: 4px 0 2px;
}

.cg-desc {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--cream-dim);
}

.cg-hud__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

@media (max-width: 860px) {
  .cg-hud__controls {
    align-items: flex-start;
    width: 100%;
  }
}


.cg-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cg-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(5, 8, 16, 0.65);
  border: 1px solid rgba(239, 228, 206, 0.16);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.cg-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(21, 36, 74, 0.5);
}

.cg-btn.is-active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(217, 192, 137, 0.15);
}

.cg-btn--close:hover {
  border-color: #f87171;
  color: #f87171;
}

/* Canvas Container */
.cg-canvas-wrap {
  position: relative;
  width: 100%;
  height: 520px;
  background: transparent;
  cursor: crosshair;
  overflow: hidden;
  user-select: none;
}

@media (max-width: 600px) {
  .cg-canvas-wrap {
    height: 420px;
  }
}

.cg-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* Progress Pill */
.cg-counter-pill {
  position: absolute;
  top: 18px;
  left: 20px;
  padding: 6px 14px;
  background: rgba(5, 8, 16, 0.88);
  border: 1px solid rgba(217, 192, 137, 0.35);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 5;
}

.cg-counter-stars {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.cg-counter-label {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--cream-dim);
}

/* Victory Overlay */
.cg-victory {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 14, 0.88);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
  z-index: 25;
  padding: 24px;
}

.cg-victory.is-active {
  opacity: 1;
  pointer-events: auto;
}

.cg-victory__card {
  max-width: 520px;
  width: 100%;
  padding: 40px 32px;
  background: linear-gradient(150deg, #10214a 0%, #060914 100%);
  border: 1.5px solid var(--gold);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(217, 192, 137, 0.35);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.45s var(--ease);
}

.cg-victory.is-active .cg-victory__card {
  transform: translateY(0) scale(1);
}

.cg-victory__star-icon {
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 12px;
  animation: cgPulse 2s infinite ease-in-out;
}

.cg-victory__kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.cg-victory__name {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 12px;
}

.cg-victory__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cream);
  line-height: 1.5;
  margin-bottom: 28px;
}

.cg-victory__btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cg-vbtn {
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cg-vbtn--next {
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(217, 192, 137, 0.4);
}

.cg-vbtn--next:hover {
  background: var(--cream);
  border-color: var(--cream);
  transform: translateY(-2px);
}

.cg-vbtn--replay {
  background: rgba(239, 228, 206, 0.08);
  border: 1px solid rgba(217, 192, 137, 0.3);
  color: var(--cream);
}

.cg-vbtn--replay:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.cg-vbtn--brief {
  background: transparent;
  border: 1px solid rgba(239, 228, 206, 0.2);
  color: var(--cream-dim);
}

.cg-vbtn--brief:hover {
  color: var(--white);
  border-color: var(--cream);
}

/* Footer status row */
.cg-footer {
  padding: 12px 24px;
  background: rgba(3, 5, 12, 0.85);
  border-top: 1px solid rgba(217, 192, 137, 0.12);
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--cream-mute);
  font-family: var(--sans);
  flex-wrap: wrap;
  gap: 8px;
}

/* Continue Bar (floating at bottom of canvas) */
.cg-continue-bar {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.cg-continue-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cg-btn-continue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(217, 192, 137, 0.95) 0%, rgba(239, 228, 206, 0.95) 100%);
  color: var(--ink);
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(217, 192, 137, 0.4), 0 0 20px rgba(217, 192, 137, 0.15);
  transition: all 0.3s var(--ease);
}

.cg-btn-continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(217, 192, 137, 0.55), 0 0 30px rgba(217, 192, 137, 0.25);
}

.cg-btn-continue__spark {
  font-size: 15px;
}

.cg-btn-continue__arrow {
  font-size: 16px;
  transition: transform 0.25s ease;
}

.cg-btn-continue:hover .cg-btn-continue__arrow {
  transform: translateX(3px);
}

/* Enquiry Modal Overlay */
.cg-modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.cg-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.cg-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.92);
  backdrop-filter: blur(16px);
}

.cg-modal__dialog {
  position: relative;
  z-index: 2;
  width: 94%;
  max-width: 580px;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 192, 137, 0.4) rgba(6, 10, 24, 0.6);
  background: linear-gradient(160deg, #10214a 0%, #060a18 100%);
  border: 1.5px solid rgba(217, 192, 137, 0.4);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(217, 192, 137, 0.2);
  padding: 28px 28px 24px;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.45s var(--ease);
}

.cg-modal__dialog::-webkit-scrollbar {
  width: 6px;
}

.cg-modal__dialog::-webkit-scrollbar-track {
  background: rgba(6, 10, 24, 0.6);
  border-radius: 4px;
  margin: 16px 0;
}

.cg-modal__dialog::-webkit-scrollbar-thumb {
  background: rgba(217, 192, 137, 0.35);
  border-radius: 4px;
  border: 1px solid rgba(217, 192, 137, 0.2);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.cg-modal__dialog::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 192, 137, 0.7);
  border-color: var(--gold);
}

.cg-modal[aria-hidden="false"] .cg-modal__dialog {
  transform: translateY(0) scale(1);
}

.cg-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 228, 206, 0.06);
  border: 1px solid rgba(239, 228, 206, 0.15);
  border-radius: 8px;
  color: var(--cream);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cg-modal__close:hover {
  border-color: #f87171;
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}

.cg-modal__header {
  text-align: center;
  margin-bottom: 16px;
}

.cg-modal__badge {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(217, 192, 137, 0.12);
  border: 1px solid rgba(217, 192, 137, 0.3);
  border-radius: 20px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 10px;
}

.cg-modal__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 8px;
}

.cg-modal__desc {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(239, 228, 206, 0.65);
  line-height: 1.5;
}

/* Enquiry Form */
.cg-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cg-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 560px) {
  .cg-form__row {
    grid-template-columns: 1fr;
  }
}

.cg-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cg-form__label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(239, 228, 206, 0.8);
  text-transform: uppercase;
}

.cg-req {
  color: #f87171;
}

.cg-form__input,
.cg-form__textarea {
  width: 100%;
  padding: 10px 14px;
  background: rgba(5, 8, 16, 0.7);
  border: 1px solid rgba(217, 192, 137, 0.22);
  border-radius: 10px;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cg-form__input:focus,
.cg-form__textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(217, 192, 137, 0.2);
}

.cg-form__input::placeholder,
.cg-form__textarea::placeholder {
  color: rgba(239, 228, 206, 0.3);
}

.cg-form__textarea {
  resize: vertical;
  min-height: 56px;
}

.cg-form__input.is-error,
.cg-form__textarea.is-error {
  border-color: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.2);
}

/* Services Tag Pills */
.cg-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cg-tag-pill {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.cg-tag-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cg-tag-pill span {
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(239, 228, 206, 0.05);
  border: 1px solid rgba(217, 192, 137, 0.22);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(239, 228, 206, 0.7);
  transition: all 0.25s ease;
}

.cg-tag-pill:hover span {
  border-color: rgba(217, 192, 137, 0.5);
  color: var(--cream);
}

.cg-tag-pill input[type="checkbox"]:checked+span {
  background: rgba(217, 192, 137, 0.18);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(217, 192, 137, 0.2);
}

/* Timeline Radio Pills */
.cg-timeline-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cg-radio-pill {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.cg-radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cg-radio-pill span {
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(239, 228, 206, 0.05);
  border: 1px solid rgba(217, 192, 137, 0.22);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(239, 228, 206, 0.7);
  transition: all 0.25s ease;
}

.cg-radio-pill:hover span {
  border-color: rgba(217, 192, 137, 0.5);
  color: var(--cream);
}

.cg-radio-pill input[type="radio"]:checked+span {
  background: rgba(217, 192, 137, 0.18);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(217, 192, 137, 0.2);
}

/* Form Actions */
.cg-form__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

.cg-btn-submit {
  padding: 10px 28px;
  background: var(--gold);
  color: var(--ink);
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(217, 192, 137, 0.35);
  transition: all 0.3s var(--ease);
}

.cg-btn-submit:hover {
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(217, 192, 137, 0.5);
}

.cg-btn-back {
  padding: 10px 20px;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(239, 228, 206, 0.22);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cg-btn-back:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Success State */
.cg-modal__success {
  text-align: center;
  padding: 20px 0;
}

.cg-modal__success.is-hidden {
  display: none;
}

.cg-success__icon {
  font-size: 36px;
  color: var(--gold);
  margin-bottom: 16px;
  animation: cgPulse 2s infinite ease-in-out;
}

.cg-success__kicker {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cg-success__title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 10px;
}

.cg-success__desc {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(239, 228, 206, 0.65);
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto 24px;
}

.cg-success__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


/* =============================================================================
   UNIVERSAL MOBILE & TABLET COMPATIBILITY SUITE
   (Tablets, iPads, Foldables, Standard Smartphones, iPhone SE / Compact)
   ========================================================================== */

/* ── Touch Target & Gesture Optimizations ── */
@media (hover: none) and (pointer: coarse) {

  /* Prevent touch hover freeze states */
  .plate:hover {
    transform: none;
  }

  .founder:hover {
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  button,
  .btn,
  .btn-play-constellation,
  .card__cta,
  .cg-btn,
  .cg-btn-continue,
  .cg-orientation-cue__btn,
  .chip,
  .nav__link,
  .nav__cta,
  .nav__links a,
  .drawer a,
  .cs-back,
  .cs-live-btn,
  .plate-seq-btn,
  a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── Tablet & Small Laptops (641px - 1024px) ── */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --gut: clamp(20px, 3.5vw, 36px);
    --sec-y: clamp(70px, 9vh, 120px);
  }

  .nav {
    padding: 18px var(--gut);
    padding-top: calc(18px + var(--sat));
  }

  .hero__title {
    font-size: clamp(3rem, 7.5vw, 6rem);
  }

  /* Founders Grid on Tablet */
  .founders {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .founder {
    padding: 34px 26px 38px;
  }

  /* Carousel on Tablet: 2 cards visible */
  .plate {
    flex: 0 0 calc((100% - clamp(20px, 2.5vw, 36px)) / 2);
  }

  /* Plate 4 EnergiXpert 3-Phone Deck on Tablet */
  .plate-app-phone--main {
    width: 118px;
    height: 225px;
  }

  .plate-app-phone--sub {
    width: 98px;
    height: 195px;
    top: 20px;
  }

  .plate-app-phone--left {
    left: 12px;
  }

  .plate-app-phone--right {
    right: 12px;
  }

  /* Case Study Modal on Tablet */
  .sheet__panel {
    padding: calc(30px + var(--sat)) clamp(24px, 4vw, 44px) 60px;
  }

  .cs-screens-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Constellation Game on Tablet */
  .cg-hud {
    padding: 18px 22px;
  }

  .cg-canvas-wrap {
    height: 460px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CELESTIAL CHARTING ARENA — MOBILE & LANDSCAPE EXPERIENCE
   ══════════════════════════════════════════════════════════════════════════ */

/* Mobile GPU performance optimization: disable heavy backdrop blurs on cards */
@media (max-width: 860px) {
  .founder,
  .plate-card,
  .studio__card,
  .review-card,
  .card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8, 12, 24, 0.94) !important;
  }
}

/* ── Mobile Orientation Cue Overlay ── */
.cg-orientation-cue {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 7, 18, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: inherit;
  padding: 24px 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  visibility: hidden;
}

.cg-orientation-cue.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

@media (orientation: landscape) {
  .cg-orientation-cue {
    display: none !important;
  }
}

.cg-orientation-cue__content {
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cg-orientation-cue__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(217, 192, 137, 0.09);
  border: 1px solid rgba(217, 192, 137, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 4px;
  box-shadow: 0 0 24px rgba(217, 192, 137, 0.16);
}

.cg-phone-rotate {
  animation: cgRotatePhone 2.6s ease-in-out infinite;
}

@keyframes cgRotatePhone {
  0%, 20% {
    transform: rotate(0deg);
  }
  50%, 75% {
    transform: rotate(90deg);
  }
  90%, 100% {
    transform: rotate(0deg);
  }
}

.cg-orientation-cue__title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4.5vw, 1.55rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--cream);
  margin: 0;
}

.cg-orientation-cue__desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cream-dim);
  margin: 0;
}

.cg-orientation-cue__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.cg-orientation-cue__btn {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.25s ease;
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
}

.cg-orientation-cue__btn:active {
  transform: scale(0.98);
}

.cg-orientation-cue__btn--alt {
  background: transparent;
  color: var(--cream-dim);
  border: 1px solid rgba(239, 228, 206, 0.25);
}

.cg-orientation-cue__btn--alt:active {
  background: rgba(239, 228, 206, 0.08);
  color: var(--cream);
}

/* Landscape Mode for Physical Mobile Devices */
@media (max-width: 950px) and (orientation: landscape) {
  .constellation-game-arena.is-open {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: none !important;
    z-index: 999999 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #02050e !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .constellation-game-arena.is-open .cg-inner {
    border-radius: 0 !important;
    border: none !important;
    height: 100% !important;
    width: 100% !important;
    padding: calc(6px + var(--sat)) calc(14px + var(--sar)) calc(6px + var(--sab)) calc(14px + var(--sal)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .constellation-game-arena.is-open .cg-canvas-wrap {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    border-radius: 12px !important;
    border: 1px solid rgba(217, 192, 137, 0.25) !important;
  }

  .constellation-play-wrap {
    margin-top: 24px;
  }

  .cg-hud {
    padding: 8px 14px 6px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }

  .cg-hud__left {
    width: auto !important;
  }

  .cg-title {
    font-size: 1.15rem !important;
    margin-bottom: 2px !important;
  }

  .cg-desc {
    display: none !important;
  }

  .cg-hud__controls {
    width: auto !important;
  }

  .cg-actions {
    width: auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .cg-btn {
    padding: 6px 12px !important;
    min-height: 32px !important;
    font-size: 11px !important;
    flex: none !important;
    white-space: nowrap !important;
  }

  .cg-canvas-wrap {
    height: auto !important;
  }

  .cg-continue-bar {
    right: 18px !important;
    bottom: 16px !important;
  }
}

/* ── Smartphones & Compact Devices (max-width: 640px) ── */
@media (max-width: 640px) {
  :root {
    --gut: 16px;
    --sec-y: clamp(48px, 7vh, 80px);
  }

  /* Global safe layout & zero horizontal scroll drift */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
    overscroll-behavior-x: none;
  }

  main {
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow-x: clip;
  }

  .wrap {
    padding-left: calc(16px + var(--sal));
    padding-right: calc(16px + var(--sar));
  }

  /* Fixed Navigation Header */
  .nav {
    padding: 12px 16px;
    padding-top: calc(12px + var(--sat));
    padding-left: calc(16px + var(--sal));
    padding-right: calc(16px + var(--sar));
  }

  .nav__brand {
    gap: 8px;
  }

  .nav__mark {
    width: 20px;
    height: 20px;
  }

  .nav__wordmark {
    font-size: 11px;
    letter-spacing: .2em;
  }

  .nav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Ambient Audio Pill - docked bottom-left on mobile to prevent header brand collision */
  .amb {
    top: auto !important;
    bottom: calc(16px + var(--sab));
    left: calc(16px + var(--sal));
    width: 46px;
    height: 46px;
    z-index: 100;
    background: rgba(8, 14, 32, 0.88);
    border: 1.5px solid rgba(217, 192, 137, 0.4);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.8), 0 0 16px rgba(217, 192, 137, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-tap-highlight-color: transparent;
  }

  .amb__icon {
    width: 24px;
    height: 24px;
  }

  /* Mobile Fullscreen Drawer */
  .drawer {
    padding: calc(72px + var(--sat)) 24px calc(48px + var(--sab));
    gap: 16px;
    background: radial-gradient(circle at 50% 30%, #0d1a3c 0%, #050814 80%, #020409 100%);
  }

  .drawer a {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* Hero Section & Constellation Nodes */
  .hero {
    height: 100svh;
    min-height: 560px;
    padding: 0 16px;
    overflow: hidden;
  }

  .hero__title {
    font-size: clamp(2.2rem, 9.4vw, 3.6rem);
    line-height: 1.1;
  }

  .hero__sub {
    font-size: 9.5px;
    letter-spacing: .18em;
    margin-top: 16px;
  }

  .hero__scroll {
    bottom: calc(18px + var(--sab));
  }

  .hero__node-label {
    font-size: 9.5px;
    letter-spacing: .12em;
    padding: 2.5px 7px;
    background: rgba(5, 8, 16, 0.78);
    border-radius: 4px;
    border: 1px solid rgba(217, 192, 137, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
  }

  /* Manifesto & Statistics */
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px;
    margin-top: 40px;
    padding-top: 28px;
  }

  .stat b {
    font-size: clamp(2.2rem, 8.5vw, 3.2rem);
  }

  .stat span {
    font-size: 10px;
    letter-spacing: .16em;
    margin-top: 6px;
  }

  /* The Craft / Disciplines Accordion */
  .craft-row {
    padding: 16px 14px;
    min-height: 52px;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }

  .craft-row__name {
    font-size: clamp(1.2rem, 4.8vw, 1.55rem);
  }

  .craft-row__explanation {
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(239, 228, 206, 0.85);
  }

  /* Founders Cards */
  .founders {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
  }

  .founder {
    padding: 26px 18px 28px;
    border-radius: 14px;
  }

  .founder__top {
    margin-bottom: 22px;
  }

  .founder__role {
    font-size: 10px;
    letter-spacing: .2em;
    margin-bottom: 8px;
  }

  .founder__name {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
  }

  .founder__sub {
    font-size: 9.5px;
    letter-spacing: .14em;
    margin-top: 6px;
    color: var(--cream-dim);
  }

  .founder__discipline {
    color: #e2d5bd !important;
  }

  .founder__skill-desc {
    color: var(--cream-dim) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  .founder__caps {
    gap: 14px;
  }

  .founder__cap-title {
    font-size: 13.5px;
  }

  .founder__cap-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cream-dim);
  }

  .founder__tags {
    gap: 6px;
    margin-top: 18px;
    padding-top: 14px;
  }

  .founder__tags span {
    font-size: 9.5px;
    padding: 3px 8px;
  }

  /* Process Steps Chart — Illuminated Vertical Timeline */
  .chart__steps {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-left: 10px;
  }

  .step {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  .step__content {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    text-align: left !important;
    padding-left: 28px !important;
    border-left: 1.5px solid rgba(217, 192, 137, 0.35) !important;
    margin-left: 5px !important;
    padding-bottom: 6px !important;
  }

  .step__star {
    position: absolute !important;
    left: 5px !important;
    top: 6px !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    z-index: 5 !important;
  }

  .step__name {
    font-size: clamp(1.25rem, 4.8vw, 1.6rem);
  }

  .step__desc {
    font-size: 12.5px;
    line-height: 1.55;
  }

  /* Portfolio Carousel & Cards on Mobile */
  .plates-carousel-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 14px;
    padding: 8px 0 12px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
  }

  .plates-viewport {
    width: 100%;
    flex: 0 0 100%;
    order: 1;
    overflow: hidden;
    padding: 4px 0 10px;
    border-radius: 12px;
    box-sizing: border-box;
  }

  .plates-track {
    gap: 16px;
    width: 100%;
  }

  .plate {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding-top: 18px;
  }

  .plate__body {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 14px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #080f24;
    background: linear-gradient(165deg, #0d1e3e 0%, #050a17 100%);
    border: 1px solid rgba(217, 192, 137, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  }

  .plate__screen {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: none;
    border-radius: 8px;
    overflow: hidden;
    background: #040813;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
  }

  .plate__screen-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    background: transparent;
    display: block;
  }

  .plate__name {
    font-size: clamp(1.3rem, 4.8vw, 1.65rem);
    margin-top: 14px;
    line-height: 1.25;
    word-break: break-word;
  }

  .plate__tagline {
    font-size: 12px;
    margin-top: 6px;
    white-space: normal;
    line-height: 1.4;
    max-width: 100%;
  }

  .plate__top-tag {
    font-size: 8.5px;
    padding: 4px 14px;
    letter-spacing: 0.2em;
  }

  .plate__fold {
    width: 36px;
    height: 36px;
  }

  /* Centered Bottom-Docked Navigation Controls on Mobile */
  .plates-nav-btn {
    position: relative;
    transform: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    z-index: 10;
    background: rgba(10, 19, 48, 0.92);
    border: 1.5px solid var(--gold);
    color: var(--gold);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 6px;
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }

  .plates-nav-btn--prev {
    order: 2;
  }

  .plates-nav-btn--next {
    order: 3;
  }

  .plates-nav-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Plate 4: EnergiXpert 3-Phone Showcase on Mobile */
  .plate--app-suite .plate__screen--app-deck {
    aspect-ratio: 16 / 11;
    min-height: 215px;
    max-height: 250px;
    padding: 6px 4px;
  }

  .plate-app-phone--main {
    width: 95px;
    height: 195px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.95);
  }

  .plate-app-phone--sub {
    width: 78px;
    height: 160px;
    top: 16px;
    border-radius: 12px;
  }

  .plate-app-phone--left {
    left: 4px;
    transform: rotate(-9deg) scale(0.92);
  }

  .plate-app-phone--right {
    right: 4px;
    transform: rotate(9deg) scale(0.92);
  }

  .plate-seq-pill {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    gap: 6px;
  }

  .plate-seq-num {
    font-size: 9px;
  }

  .plate-seq-name {
    font-size: 9px;
    max-width: 100px;
  }

  .plate-seq-controls {
    bottom: 8px;
    right: 8px;
    gap: 4px;
  }

  .plate-seq-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Case Study Modal on Mobile */
  .sheet__panel {
    padding: calc(18px + var(--sat)) calc(14px + var(--sar)) calc(44px + var(--sab)) calc(14px + var(--sal));
  }

  .sheet__close {
    top: calc(12px + var(--sat));
    right: calc(12px + var(--sar));
    width: 42px;
    height: 42px;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;
  }

  .cs-topbar {
    margin-bottom: 18px;
    padding-right: 50px;
  }

  .cs-back {
    font-size: 11px;
    padding: 6px 12px;
  }

  .cs-title {
    font-size: clamp(1.8rem, 6.8vw, 2.5rem);
    margin-top: 8px;
  }

  .cs-lead {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 22px;
  }

  .cs-meta-bar {
    gap: 10px;
    margin-bottom: 24px;
    flex-direction: column;
    align-items: flex-start;
  }

  .cs-result-head {
    flex-direction: column;
    gap: 16px;
  }

  .cs-tape-badge {
    align-self: flex-start;
    transform: none;
    padding: 12px 18px;
  }

  .cs-tape-text {
    font-size: 1.15rem;
  }

  .cs-process-box {
    padding: 16px 12px;
    border-radius: 6px;
  }

  .cs-comparison-grid {
    flex-direction: column;
    gap: 14px;
  }

  .cs-arrow-sep {
    transform: rotate(90deg);
  }

  .cs-screens-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cs-screen-head {
    padding: 12px 14px;
  }

  .cs-screen-name {
    font-size: 1.2rem;
  }

  .cs-screen-device {
    padding: 18px 12px;
  }

  .cs-screen-phone {
    width: 175px;
    border-radius: 20px;
  }

  /* High-Definition Screen Inspection Lightbox on Mobile */
  .cs-lightbox__dialog {
    width: 96%;
    padding: 20px 14px;
    max-height: 92vh;
    border-radius: 16px;
  }

  .cs-lightbox__close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    -webkit-tap-highlight-color: transparent;
  }

  .cs-lightbox__content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cs-lightbox__phone {
    width: clamp(200px, 60vw, 240px);
  }

  /* Constellation Interactive Game on Mobile */
  .constellation-play-wrap {
    margin-top: 36px;
  }

  .btn-play-constellation {
    padding: 14px 16px;
    gap: 12px;
  }

  .btn-play-constellation__icon {
    width: 38px;
    height: 38px;
  }

  .btn-play-constellation__title {
    font-size: 12px;
    letter-spacing: .15em;
  }

  .btn-play-constellation__sub {
    font-size: 11px;
  }

  .btn-play-constellation__badge {
    display: none;
  }

  .constellation-game-arena.is-open {
    max-height: 2000px;
    margin-top: 18px;
  }

  .cg-inner {
    border-radius: 16px;
  }

  .cg-hud {
    padding: 14px 14px 10px;
    flex-direction: column;
    gap: 12px;
  }

  .cg-hud__left {
    width: 100%;
  }

  .cg-title {
    font-size: 1.35rem;
  }

  .cg-desc {
    font-size: 11.5px;
  }

  .cg-hud__controls {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .cg-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .cg-btn {
    flex: 1 1 calc(33.33% - 6px);
    min-width: 76px;
    justify-content: center;
    padding: 8px 6px;
    min-height: 40px;
    font-size: 11px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
  }

  .cg-canvas-wrap {
    height: clamp(340px, 48vh, 400px);
  }

  .cg-canvas {
    touch-action: none;
  }

  .cg-counter-pill {
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    font-size: 11px;
  }

  .cg-footer {
    padding: 10px 14px;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    font-size: 10.5px;
  }

  .cg-continue-bar {
    right: 14px;
    bottom: 14px;
  }

  .cg-btn-continue {
    padding: 11px 18px;
    font-size: 12.5px;
    gap: 8px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(217, 192, 137, 0.35);
  }

  /* Constellation Enquiry Modal Mobile */
  .cg-modal__dialog {
    width: 95%;
    max-width: 480px;
    padding: 24px 16px;
    max-height: 90vh;
    border-radius: 16px;
  }

  .cg-modal__close {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .cg-form {
    gap: 16px;
  }

  .cg-form__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cg-form__input,
  .cg-form__textarea {
    font-size: 16px;
    /* Prevents iOS browser auto-zoom on input focus */
    padding: 12px 14px;
    border-radius: 8px;
  }

  .cg-tag-pill span,
  .cg-radio-pill span {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .cg-btn-submit,
  .cg-btn-back {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 13px;
  }

  /* Contact Cards on Mobile */
  .cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .card {
    min-height: auto;
    transform: none !important;
    padding: 24px 18px;
    border-radius: 12px;
  }

  .card:hover {
    transform: translateY(-3px) !important;
  }

  /* Footer on Mobile */
  .foot__row {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    align-items: center;
    padding-bottom: calc(12px + var(--sab));
  }
}

/* ── Compact Screen Sizes (max-width: 380px, e.g. iPhone SE / Fold cover) ── */
@media (max-width: 380px) {
  .hero__title {
    font-size: clamp(2rem, 10vw, 2.6rem);
  }

  .plate-app-phone--main {
    width: 86px;
    height: 170px;
  }

  .plate-app-phone--sub {
    width: 70px;
    height: 138px;
    top: 14px;
  }

  .plate-app-phone--left {
    left: 0;
  }

  .plate-app-phone--right {
    right: 0;
  }

  .cg-canvas-wrap {
    height: 330px;
  }

  .cg-btn {
    min-width: 68px;
    font-size: 10px;
    padding: 6px 4px;
  }
}