:root{
  --bg: #050607;
  --text: #ffffff;
  --muted: rgba(255,255,255,.9);
  --gold: #D4AF37;
  --silver: #BFC3C9;
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --gold-rgb: 212 175 55; 
}

:root[data-theme="light"]{
  /* Warm ivory background that complements gold */
  --bg: #fbf6ea;                 /* ivory */
  --text: #121212;
  --muted: rgba(18,18,18,.70);

  /* Clean surfaces (less “glassy”, more premium) */
  --card: rgba(255,255,255,.78);
  --stroke: rgba(18,18,18,.10);

  /* Hide shadows globally in light mode */
  --shadow: none;

  /* Optional: if you want a slightly warmer “white” for panels */
  --ivory-surface: rgba(255,255,255,.86);
}


html{
  background: var(--bg); /* move background here */
  overflow-x: hidden;           /* fallback */
}
html, body { height: 100%; }
@supports (overflow: clip) {
  html { overflow-x: clip; }    /* avoids creating a scrollable overflow region */
}
body{
  margin:0;
  background: transparent;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow-x: hidden !important;
    position: relative;
    z-index: 0;
}

/* Make sure main content is above the nebula */
.site, main, .page, .layout{
  position: relative;
  z-index: 1;
}

#tsparticles { pointer-events: none; } /* not required, but keeps clicks on content */
#tsparticles canvas { opacity: 1 !important; visibility: visible !important; display: block !important; }

/* ------------------------------
   GLOBAL GOLDEN BLUR BACKGROUND
------------------------------ */


/* Tweak these two and everything updates */
:root {
  --content-max: 120rem;          /* consistent section width */
  --page-pad: clamp(10px, 2vw, 20px);
  --section-gap: clamp(10px, 2vw, 20px);
}

/* Page wrapper */
.page {
  padding-inline: var(--page-pad);
  overflow-x: clip; 
}

/* Apply to each section */
.section {
  width: min(100%, var(--content-max));
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: var(--section-gap);
  margin-inline: auto;
}

.h1{
  font-size: clamp(44px, 6vw, 88px);
  line-height: .95;
  letter-spacing: -0.03em;
}
.lead{
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--muted);
}

.btn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: var(--text);
  text-decoration:none;
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.btn.primary{
  border-color: rgba(212,175,55,.35);
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.kicker{ color: var(--gold); letter-spacing:.18em; text-transform: uppercase; font-size: 12px; }


/* ---------- HEADER / NAV ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 8000;
  background: rgba(5,6,7,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:root[data-theme="light"] .site-header{
  background: rgba(251,246,234,.74);
}

/* 3-column grid: brand | centered nav | actions */
.nav-shell{
  max-width: 1780px;
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 10px 16px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color:inherit;
  flex: 0 0 auto;
}

.brand-logo{
  height: 44px;
  width: auto;
  display:block;
  object-fit: contain;
}

/* Centered desktop nav */
.nav-links{
  justify-self: center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 26px;
}

/* Underline hover (no background blocks) */
.nav-links .nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;

  color: var(--text);
  text-decoration: none;
  opacity: .9;

  padding: 10px 2px;
  font-weight: 850;
  letter-spacing: .02em;

  transition: opacity .15s ease, transform .15s ease;
}

.nav-links .nav-link::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 6px;

  height: 2px;
  border-radius: 999px;

  /* nice gold underline with soft fade edges */
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgb(var(--gold-rgb) / .95) 20%,
      rgb(var(--gold-rgb) / .95) 80%,
      transparent 100%
    );

  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.nav-links .nav-link:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.nav-links .nav-link:hover::after{
  transform: scaleX(1);
  opacity: 1;
}

/* If you add aria-current="page" server-side, this will keep the underline */
.nav-links .nav-link[aria-current="page"]{
  opacity: 1;
}
.nav-links .nav-link[aria-current="page"]::after{
  transform: scaleX(1);
  opacity: 1;
}

/* Right controls */
.nav-actions{
  justify-self: end;
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Shared button base */
.icon-btn,
.nav-toggle{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgb(var(--gold-rgb) / .26);
  background: rgb(0 0 0 / .22);
  color: var(--text);
  cursor:pointer;

  display:grid;
  place-items:center;

  box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.icon-btn:hover,
.nav-toggle:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--gold-rgb) / .42);
  background: rgb(255 255 255 / .06);
}

:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .nav-toggle{
  background: rgb(255 255 255 / .62);
  border-color: rgb(var(--gold-rgb) / .22);
  box-shadow: none;
}

:root[data-theme="light"] .icon-btn:hover,
:root[data-theme="light"] .nav-toggle:hover{
  background: rgb(0 0 0 / .06);
}

/* Theme icon swap */
.theme-btn i{ font-size: 16px; line-height: 1; }
.icon-sun, .icon-moon{ display:none; }
:root[data-theme="light"] .icon-sun{ display:none; }
:root[data-theme="dark"]  .icon-moon{ display:none; }

/* Burger */
.burger{
  width: 18px;
  height: 2px;
  background: var(--gold);
  display:block;
  position: relative;
  border-radius: 999px;
}
.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: var(--gold);
  border-radius: 999px;
}
.burger::before{ top: -6px; }
.burger::after{ top:  6px; }

/* Language select (single clean version) */
.lang-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-wrap::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid rgb(255 255 255 / .70);
  border-bottom: 2px solid rgb(255 255 255 / .70);
  pointer-events: none;
}

:root[data-theme="light"] .lang-wrap::after{
  border-right-color: rgb(0 0 0 / .55);
  border-bottom-color: rgb(0 0 0 / .55);
}

.lang-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  height: 46px;
  border-radius: 999px;
  padding: 0 40px 0 14px;
  min-width: 96px;

  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;

  color: var(--text);
  cursor: pointer;

  border: 1px solid rgb(var(--gold-rgb) / .22);
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  box-shadow: 0 10px 24px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .08);

  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.lang-select:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--gold-rgb) / .45);
  background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03));
  box-shadow: 0 12px 28px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .10);
}

:root[data-theme="light"] .lang-select{
  color: #111;
  background: linear-gradient(180deg, rgb(255 255 255 / .92), rgb(255 255 255 / .70));
  box-shadow: none;
}

:root[data-theme="light"] .lang-select:hover{
  background: linear-gradient(180deg, rgb(255 255 255 / .96), rgb(255 255 255 / .78));
}

/* Options */
.lang-select option{ background: #0b0b0b; color: #fff; }
:root[data-theme="light"] .lang-select option{ background: #fff; color: #111; }

/* Focus (keyboard) */
.icon-btn:focus-visible,
.nav-toggle:focus-visible,
.lang-select:focus-visible,
.nav-links .nav-link:focus-visible{
  outline: 2px solid rgb(var(--gold-rgb) / .80);
  outline-offset: 3px;
}
.nav-links .nav-link:focus-visible::after{
  transform: scaleX(1);
  opacity: 1;
}

/* ---------- RESPONSIVE ---------- */
.nav-toggle{ display:none; } /* show only on mobile */

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; }
  .brand-logo{ height: 40px; }
  .desktop-theme {display: none;}
}

@media (max-width: 520px){
  /* keep theme + burger, hide language in header (still in drawer) */
  .nav-lang{ display:none; }
}

/* ---------- DRAWER ---------- */
.nav-drawer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.nav-drawer.is-open{
  opacity: 1;
  pointer-events: auto;
}

.nav-backdrop{
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .70);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.nav-drawer.is-open .nav-backdrop{ opacity: 1; }
body.nav-open{ overflow: hidden; }

.nav-panel{
  position:absolute;
  right: 0;
  top: 0;
  height: 100vh;
  width: min(420px, 92vw);
  padding: 16px;
  background: rgba(0,0,0,.92);
  border-left: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  transform: translate3d(100%,0,0);
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

:root[data-theme="light"] .nav-panel{
  background: rgba(255,255,255,.94);
}

.nav-drawer.is-open .nav-panel{ transform: translate3d(0,0,0); }

.nav-panel-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke);
}

.nav-panel-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.nav-mobile-links{
  display:grid;
  gap: 12px;
  padding: 14px 0 14px;
}

.nav-mobile-links a{
  position: relative;
  padding: 12px 2px;
  text-decoration:none;
  color: var(--text);
  font-weight: 900;
  letter-spacing: .01em;
  opacity: .92;
  transition: opacity .15s ease, transform .15s ease;
}

.nav-mobile-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(var(--gold-rgb) / .9), transparent);
  transform: scaleX(0);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.nav-mobile-links a:hover{
  opacity: 1;
  transform: translateY(-1px);
}
.nav-mobile-links a:hover::after{
  transform: scaleX(1);
  opacity: 1;
}

.nav-panel-controls{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}

.nav-panel-controls .lang-wrap{ flex: 1 1 auto; }
.nav-panel-controls .lang-select{ width: 100%; min-width: 0; }

@media (max-width: 520px){
  .nav-panel{ width: 100vw; }
}


/* --- GLOBAL EXTRAS --- */
.gold{ color: var(--gold); }
.h2{ font-size: clamp(22px, 3vw, 40px); margin: 10px 0 8px; letter-spacing:-0.02em; }
.hero-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; }

.cursor-glow{
  position: fixed;
  width: 440px; height: 440px;
  border-radius: 50%;
  pointer-events:none;
  z-index: -1;
  filter: blur(50px);
  opacity: .45;
  background: radial-gradient(circle at center,
    rgba(212,175,55,.18),
    rgba(191,195,201,.10),
    transparent 60%);
}

/* --- SHEEN --- */
/* --- SHEEN --- */
.sheen{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* keeps z-index layers contained */
}

.sheen::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events: none;          /* ✅ THIS is the key */
  z-index: 0;                    /* keep it behind content */

  background: radial-gradient(
    circle at var(--mx, 30%) var(--my, 30%),
    rgba(212,175,55,.18),
    rgba(255,255,255,.10),
    transparent 55%
  );

  opacity: 0;
  transition: opacity .25s ease;
}

.sheen:hover::before{ opacity: .9; }

/* Ensure actual content sits above sheen */
.sheen > *{
  position: relative;
  z-index: 1;
}

/* --- ICON BTN --- */
.icon-btn{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
.icon-dot{
  width: 14px; height: 14px; border-radius: 50%;
  display:inline-block;
  background: radial-gradient(circle at 30% 30%, var(--gold), var(--silver));
}

/* --- STATS --- */
.stats{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.stat{ grid-column: span 4; padding: 16px; }
.stat-label{ color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.stat-num{ font-size: clamp(26px, 3vw, 44px); font-weight: 900; margin-top: 8px; }

@media (max-width: 860px){
  .stat{ grid-column: span 12; }
}

/* --- SERVICES BENTO --- */
.bento{ margin-top: 28px; }
.bento-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.bento-card{ grid-column: span 4; min-height: 250px; }
.bento-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.bento-title{ margin: 0; font-size: 18px; font-weight: 800; }
.bento-desc{ color: var(--muted); margin: 10px 0 10px; }
.pill{
  border: 1px solid rgba(212,175,55,.30);
  color: var(--gold);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.mini-list{ margin: 0; padding-left: 18px; color: var(--muted); }
.mini-list li{ margin: 6px 0; }
.bento-cta{ margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap; }

@media (max-width: 1000px){
  .bento-card{ grid-column: span 6; }
}
@media (max-width: 640px){
  .bento-card{ grid-column: span 12; }
}

/* --- TIMELINE --- */
.timeline-wrap{ margin-top: 36px; }
.timeline{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 4fr 8fr;
  gap: 14px;
  align-items:start;
}
.timeline-sticky{
  position: sticky;
  top: 92px;
  padding: 16px;
}
.timeline-title{ font-weight: 900; margin-bottom: 10px; }
.timeline-steps{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap: 8px; }
.timeline-step{
  display:flex; gap: 10px; align-items:center;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  color: var(--muted);
}
.timeline-step.is-active{
  color: var(--text);
  border-color: rgba(212,175,55,.25);
  background: rgba(255,255,255,.06);
}
.timeline-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.timeline-step.is-active .timeline-dot{
  background: var(--gold);
  box-shadow: 0 0 22px rgba(212,175,55,.35);
}
.timeline-step-title{ font-weight: 800; display:block; }
.timeline-step-sub{ font-size: 12px; display:block; color: var(--muted); margin-top: 2px; }
.timeline-mini{ margin-top: 12px; }
.timeline-mini-bar{ height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; }
.timeline-mini-bar span{ display:block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.22)); }
.timeline-mini-note{ color: var(--muted); font-size: 12px; margin-top: 8px; }

.timeline-content{ display:flex; flex-direction:column; gap: 14px; }
.timeline-panel{ padding: 18px; }
.panel-kicker{ color: var(--gold); letter-spacing:.18em; text-transform: uppercase; font-size: 12px; }
.panel-title{ font-size: 22px; margin: 10px 0 8px; }
.panel-wow{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 10px; }
.wow-chip{
  border: 1px solid var(--stroke);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--silver);
}

@media (max-width: 860px){
  .timeline{ grid-template-columns: 1fr; }
  .timeline-sticky{ position: relative; top: 0; }
}

/* --- PROJECTS --- */
.filters{ margin-top: 18px; padding: 16px; }
.filters-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.filters-title{ font-weight: 900; }
.filters-count{ color: var(--muted); }
.chip-row{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 12px; }
.chip{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
}
.chip.is-active{
  border-color: rgba(212,175,55,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.snap-section{ margin-top: 22px; }
.snap-row{
  margin-top: 12px;
  display:flex; gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.snap-card{
  scroll-snap-align: start;
  min-width: min(520px, 86vw);
  padding: 0;
  text-decoration:none;
  color: inherit;
  position: relative;
}
.project-cover img{ width: 100%; height: 260px; object-fit: cover; border-radius: 22px 22px 0 0; display:block; }
.cover-fallback{
  height: 260px;
  border-radius: 22px 22px 0 0;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.20), rgba(255,255,255,.06));
}
.cover-letter{ font-weight: 900; font-size: 54px; color: var(--gold); }
.project-meta{ padding: 14px 16px 16px; }
.project-title{ font-weight: 900; font-size: 18px; }
.project-summary{ color: var(--muted); margin-top: 8px; }
.tag-row{ margin-top: 10px; display:flex; gap: 8px; flex-wrap:wrap; }
.tag{
  border: 1px solid var(--stroke);
  color: var(--silver);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

.project-hover{
  position:absolute; inset: 0;
  border-radius: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
}
:root[data-theme="light"] .project-hover{
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
.project-card:hover .project-hover{ opacity: 1; transform: translateY(0); }
.hover-title{ font-weight: 900; margin-bottom: 8px; }
.hover-metrics{ margin: 0; padding-left: 18px; color: rgba(255,255,255,.9); }
.hover-metrics li{ margin: 6px 0; }
.hover-link{ color: var(--gold); font-weight: 800; }

.snap-hint{ color: var(--muted); margin-top: 10px; font-size: 12px; }

.grid-section{ margin-top: 28px; }
.grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 14px;
}
.grid-card{ grid-column: span 4; text-decoration:none; color:inherit; }
.grid-card-top{ display:flex; justify-content:space-between; align-items:center; gap: 10px; }
.grid-title{ font-weight: 900; }
.grid-desc{ color: var(--muted); margin-top: 10px; }

@media (max-width: 1000px){ .grid-card{ grid-column: span 6; } }
@media (max-width: 640px){ .grid-card{ grid-column: span 12; } }

/* --- CASE STUDY --- */
.breadcrumbs{ color: var(--muted); }
.breadcrumbs a{ color: var(--muted); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--text); }
.crumb{ margin: 0 8px; }
.case-hero{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 7fr 5fr;
  gap: 14px;
  padding: 16px;
}
.case-img{ width: 100%; height: 360px; object-fit: cover; border-radius: 18px; display:block; }
.case-img.fallback{ display:grid; place-items:center; background: rgba(255,255,255,.06); }
.case-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 14px;
}
.case-grid > article{ grid-column: span 4; }
@media (max-width: 900px){
  .case-hero{ grid-template-columns: 1fr; }
  .case-grid > article{ grid-column: span 12; }
}

/* --- CAROUSEL --- */
/* ---- Carousel shell ---- */
.carousel{
  position: relative;
  padding: 16px;
  border-radius: 22px;
  overflow: hidden;
}

/* viewport ensures clipping and consistent height */
.carousel-viewport{
  border-radius: 18px;
  overflow: hidden;
  outline: none;
}

/* Track + slides */
.carousel-track{
  display: flex;
  transform: translateX(0%);
  transition: transform 520ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

.carousel-slide{
  flex: 0 0 100%;
  width: 100%;
  padding: 18px;
  min-height: 240px; /* consistent height */
  display: grid;
  gap: 16px;
  align-content: center;
}
.carousel-viewport{
  width: 100%;
  overflow: hidden;
}

.carousel-track{
  display: flex;
  width: 100%;
}

.carousel-slide{
  flex: 0 0 100%;
  width: 100%;
}


/* --- WIZARD --- */
.wizard-top{ display:flex; justify-content:space-between; align-items:center; gap: 10px; }
.wizard-note{ color: var(--muted); font-size: 12px; }
.wizard-bar{ height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow:hidden; flex: 1; }
.wizard-bar span{ display:block; height:100%; width: 0%; background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.22)); }
.wizard-steps{ display:flex; gap: 12px; align-items:center; width: min(520px, 100%); }
.wizard-steptext{ color: var(--muted); min-width: 52px; text-align:right; }
.wizard-form{ margin-top: 14px; }
.wizard-panel{ display:none; }
.wizard-panel.is-active{ display:block; }
.wizard-nav{ display:flex; gap: 10px; justify-content:flex-end; flex-wrap:wrap; margin-top: 14px; }
.pick-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 12px;
}
.pick{ grid-column: span 4; text-align:left; cursor:pointer; }
.pick-title{ font-weight: 900; }
.pick-sub{ color: var(--muted); margin-top: 6px; font-size: 12px; }
.pick.is-picked{ border-color: rgba(212,175,55,.35); }
.check-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 12px;
}
.check{ grid-column: span 6; display:flex; gap: 10px; align-items:center; cursor:pointer; }
.form-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 12px;
}
.field{ grid-column: span 6; }
.field label{ display:block; color: var(--muted); font-size: 12px; letter-spacing:.12em; text-transform: uppercase; margin: 0 0 8px; }
.field textarea.input{ resize: vertical; }
.field-hint{ color: var(--muted); font-size: 12px; margin-top: 8px; }

.review{ margin-top: 12px; padding: 14px; }
.review-row{ display:flex; justify-content:space-between; align-items:center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--stroke); }
.review-row:last-child{ border-bottom: 0; }
.fineprint{ color: var(--muted); font-size: 12px; margin-top: 10px; }

.honey{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

@media (max-width: 900px){
  .pick{ grid-column: span 6; }
  .check{ grid-column: span 12; }
  .field{ grid-column: span 12; }
}

/* --- FOOTER --- */
.site-footer{
  margin-top: 44px;
  border-top: 1px solid var(--stroke);
  background: #000;
}

.footer-inner{
  margin: 0 auto;
  padding: 34px 20px 28px;
}

/* --- CTA / TOP --- */
.footer-top{
  position: relative;
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: 22px;
  overflow: hidden;
  border: none;

  display: grid;
  place-items: center;
  text-align: center;

  background-image: url("/assets/bg4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* overlay layer */
.footer-top::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.80), rgba(0,0,0,.65));
  z-index: 1;
}

/* keep content above overlay */
.footer-top > *{
  position: relative;
  z-index: 2;
}

.footer-cta{
  max-width: 820px;
}

.footer-title{
  font-size: clamp(22px, 3vw, 40px);
  margin: 8px 0 8px;
  letter-spacing: -0.02em;
  color: #fff;
}

.footer-lead{
  color: rgba(255,255,255,.9);
  margin: 0;
}

.footer-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.footer-buttons a{
    color: #fff;
}
.footerbtn{
  margin-bottom: 0;
}

/* --- GRID --- */
.footer-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 18px;
}

.footer-col{
  padding: 18px;

}

/* Brand / Logo */
.footer-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-brand img{
  display: block;
  width: min(240px, 100%);
  max-width: 240px;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

/* Text */
.footer-text{
  color: #ffffff;
  margin: 12px 0 0;
  line-height: 1.6;
}

/* Headings */
.footer-head{
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: .02em;
  color: #fff;
}

/* Lists */
.footer-links,
.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Links */
.footer-links a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.footer-links a:hover{
  color: #fff;
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.footer-contact a{
  color:#fff;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: background .15s ease, transform .15s ease;
}

.footer-contact a:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.footer-contact i{
  width: 18px;
  margin-top: 2px;
  opacity: .9;
}

/* Social */
.footer-social{
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.social-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  display: grid;
  place-items: center;
  color:  #fff;
  text-decoration: none;
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background .15s ease;
}

.social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
}

/* Focus styles for accessibility */
.footer-links a:focus-visible,
.footer-contact a:focus-visible,
.social-btn:focus-visible{
  outline: 2px solid rgba(212,175,55,.7);
  outline-offset: 2px;
}

/* --- BOTTOM BAR --- */
.footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--stroke);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;

  color: rgba(255,255,255,.9);
  font-size: 12px;
}

.footer-legal{
  display: flex;
  gap: 10px;
  align-items: center;
}

.footer-legal a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}

.footer-legal a:hover{
  color: #fff;
  background: rgba(255,255,255,.06);
}

.footer-dot{ opacity: .6; }

/* --- RESPONSIVE --- */
@media (max-width: 900px){
  .footer-inner{
    padding: 28px 16px 24px;
  }

  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }

  /* Make the brand column span full width for a nicer tablet layout */
  .footer-col--brand{
    grid-column: 1 / -1;
  }

  .footer-bottom{
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 640px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .footer-col{
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .footer-top{
    text-align: center;
  }

  .footer-brand{
    justify-content: center;
    width: 100%;
  }

  .footer-social{
    justify-content: center;
  }
  .footer-contact{
    justify-content: center;
    align-items: center;
    text-align: center;  }

  .footer-buttons .btn{
    width: 100%;
    justify-content: center;
  }
}


/* --- BACK TO TOP ROCKET --- */
.rocket-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  background: radial-gradient(circle at 30% 30%,
    rgba(212,175,55,.22),
    rgba(191,195,201,.10),
    rgba(255,255,255,.04));
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transform: translateY(14px) scale(.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 60;
  overflow: hidden;
}

.rocket-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.rocket-ico{
  font-size: 18px;
  transform: translateY(1px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transition: transform .2s ease;
}

.rocket-top:hover .rocket-ico{
  transform: translateY(-1px);
}

/* Spark/ignite effect */
.rocket-spark{
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg,
    transparent,
    rgba(212,175,55,.22),
    rgba(255,255,255,.14),
    rgba(191,195,201,.16),
    transparent);
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity .25s ease;
}

.rocket-top:hover .rocket-spark{
  opacity: .55;
}

.rocket-top.is-igniting{
  animation: rocketPop .65s ease;
}

.rocket-top.is-igniting .rocket-ico{
  animation: rocketShake .65s ease;
}

@keyframes rocketPop{
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-4px) scale(1.06); }
  60%  { transform: translateY(0) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes rocketShake{
  0%   { transform: translateY(1px) rotate(0deg); }
  20%  { transform: translateY(-1px) rotate(-7deg); }
  40%  { transform: translateY(-2px) rotate(7deg); }
  60%  { transform: translateY(-1px) rotate(-5deg); }
  80%  { transform: translateY(0px) rotate(5deg); }
  100% { transform: translateY(1px) rotate(0deg); }
}



/* --- PROJECT: DELIVERABLE CHIPS --- */
.deliverables{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
.deliver-chip{
  border: 1px solid var(--stroke);
  color: var(--silver);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,.04);
}

/* --- PROJECT: MEDIA REEL --- */
.media-reel{ margin-top: 22px; }
.media-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
}
.media-row{
  margin-top: 12px;
  padding: 14px;
  display:flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.media-card{
  scroll-snap-align: start;
  min-width: min(440px, 84vw);
  padding: 0;
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  color: inherit;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  position: relative;
}
.media-thumb img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  display:block;
}
.media-cap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-top: 1px solid var(--stroke);
}
.media-kind{ color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.media-idx{ color: var(--gold); font-weight: 900; }

.media-play{
  position:absolute;
  left: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(0,0,0,.45);
  color: var(--gold);
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.media-empty{
  color: var(--muted);
  padding: 16px;
}

.media-hint{ color: var(--muted); margin-top: 10px; font-size: 12px; }

/* --- LIGHTBOX --- */
.media-lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  display:none;
}
.media-lightbox.is-open{ display:block; }
.lb-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
}
.lb-panel{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1040px, calc(100% - 24px)); /* 100% of .media-lightbox (fixed) */
  max-width: calc(100% - 24px);
  max-height: min(86vh, 900px);
  padding: 14px;
  overflow: hidden;
}
.lb-stage{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  max-height: calc(86vh - 80px);
}
.lb-stage img,
.lb-stage video{
  width: 100%;
  height: auto;
  max-height: calc(86vh - 80px);
  display:block;
}
.lb-close{
  position:absolute;
  right: 12px;
  top: 12px;
}



/* Simple one-time JPG page divider */
.page-divider{
  width: 100%;
  height: 140px;              /* adjust as you like */
  margin: 34px 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.page-divider img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.85;
  filter: saturate(1.05) contrast(1.05);
}

:root[data-theme="light"] .page-divider img{
  opacity: 0.55;
}






/* ------------------------------
   HEART BURST (no magnetic pull)
   Trigger: .magnetic hover/click
------------------------------ */
.magnetic{
  position: relative;
  overflow: visible;            /* hearts can float outside */
  transform-style: preserve-3d;
}

/* Optional: subtle premium glow on hover (not magnetic) */
.magnetic:hover{
  box-shadow: 0 0 0 1px rgba(212,175,55,.22), 0 18px 50px rgba(0,0,0,.35);
}

/* Layer that holds floating hearts */
.heart-burst-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  transform: translateZ(0);
}

/* Individual heart particle */
.heart-pop{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 55%);
  width: var(--sz, 18px);
  height: var(--sz, 18px);
  opacity: 0;
  transform:
    translate3d(-50%, -50%, 0)
    rotate(var(--r0, 0deg))
    scale(var(--s0, .85));
  will-change: transform, opacity, filter;
  animation: heartFloat var(--dur, 900ms) cubic-bezier(.16,.9,.2,1) forwards;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.45))
          drop-shadow(0 0 18px rgba(212,175,55,.20));
}

/* Heart shape via mask + gold/silver fill */
.heart-pop::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--gold);

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.3-4.4-9.7-8.6C.6 9.7 2 6.7 4.9 5.7c1.7-.6 3.6-.1 4.9 1.2C11.1 5.6 13 5.1 14.7 5.7c2.9 1 4.3 4 2.6 6.7C19.3 16.6 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.3-4.4-9.7-8.6C.6 9.7 2 6.7 4.9 5.7c1.7-.6 3.6-.1 4.9 1.2C11.1 5.6 13 5.1 14.7 5.7c2.9 1 4.3 4 2.6 6.7C19.3 16.6 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* Float up/out + drift + 3D-ish z */
@keyframes heartFloat{
  0%{
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(var(--r0, 0deg)) scale(var(--s0, .85));
  }
  12%{
    opacity: 1;
  }
  55%{
    opacity: .95;
  }
  100%{
    opacity: 0;
    transform:
      translate3d(calc(-50% + var(--dx, 0px)),
                  calc(-50% - var(--dy, 72px)),
                  var(--dz, 70px))
      rotate(var(--r1, 22deg))
      scale(var(--s1, 1.22));
  }
}

/* Reduced motion: no burst */
@media (prefers-reduced-motion: reduce){
  .heart-burst-layer{ display:none; }
}


















/* Default: visible (so if JS fails, nothing disappears) */
[data-reveal]{
  opacity: 1;
  transform: none;
}

/* JS will add html.js.reveal to enable the hidden-before-reveal state */
html.js.reveal [data-reveal]{
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0px), var(--reveal-y, 12px), 0) scale(var(--reveal-scale, 1));
  filter: blur(var(--reveal-blur, 0px));
  transition:
    opacity var(--reveal-dur, 700ms) var(--reveal-ease, cubic-bezier(.215,.61,.355,1)),
    transform var(--reveal-dur, 700ms) var(--reveal-ease, cubic-bezier(.215,.61,.355,1)),
    filter var(--reveal-dur, 700ms) var(--reveal-ease, cubic-bezier(.215,.61,.355,1));
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

html.js.reveal [data-reveal].is-revealed{
  opacity: 1;
  transform: none;
  filter: none;
}

/* Reduced motion: always visible, no animation */
@media (prefers-reduced-motion: reduce){
  html.js.reveal [data-reveal]{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}



html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
*, *::before, *::after{ box-sizing: border-box; }


/* temporary migration patch */
[data-aos]{ opacity: 1 !important; transform: none !important; }



/* ==============================
   HOME: WHAT WE DO (3 big cards)
============================== */

.what{
  width: min(1180px, 100%);
  margin: 50px auto 0;
  padding: clamp(40px, 6vw, 70px) 0;
  text-align: center;
}

.what-head{
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-bottom: 28px;
}

.what-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  align-items: stretch;
}

/* Entire card is a link */
.what-card{
  position: relative;
  display: grid;                /* lets us center content cleanly */
  place-items: center;
  text-decoration: none;
  color: inherit;

  border-radius: 26px;
  overflow: hidden;
  min-height: clamp(340px, 44vh, 520px);

  transform: translateZ(0);
  transition: transform 240ms ease, box-shadow 240ms ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* Background image layer */
.what-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: saturate(1.04) contrast(1.02);
  transition: transform 900ms cubic-bezier(.2,.9,.2,1), filter 450ms ease, opacity 450ms ease;
  will-change: transform;
}

/* Overlay (replace your unused .what-overlay if you want) */
.what-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.8));
  opacity: 1;
  transition: opacity 240ms ease, background 240ms ease;
  pointer-events: none;
}

/* Content panel */
.what-content{
  position: relative;
  z-index: 2;

  /* smaller padding but nicer layout */
  padding: 18px 18px 16px;
  width: min(92%, 420px);
  border-radius: 22px;

  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;

  transform: translateY(0);
  transition: transform 240ms ease, background 240ms ease, border-color 240ms ease;
}

:root[data-theme="light"] .what-overlay{
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,.45));
}

:root[data-theme="light"] .what-content{
  background: rgba(255,255,255,.62);
  border-color: rgba(0,0,0,.10);
}

.what-title{
  letter-spacing: -0.02em;
}

.what-desc{
  margin: 0;
  color: rgba(255,255,255,.88);
  font-weight: 650;
  line-height: 1.5;
  max-width: 36ch;
}
:root[data-theme="light"] .what-desc{
  color: rgba(0,0,0,.72);
}

.what-cta{
  margin-top: 2px;
  display: flex;
  justify-content: center;
}

.what-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;

  border: 1px solid rgba(212,175,55,.42);
  color: var(--gold);
  background: rgba(0,0,0,.16);
  font-weight: 900;

  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* Hover / focus effects */
.what-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
}

.what-card:hover .what-bg{
  transform: scale(1.12);
  filter: saturate(1.12) contrast(1.08);
  opacity: 0.92;
}

.what-card:hover .what-overlay{
  opacity: 0.5; /* slightly less dark on hover */
}

.what-card:hover .what-content{
  transform: translateY(-2px);
}

:root[data-theme="light"] .what-card:hover .what-content{
  background: rgba(255,255,255,.70);
  border-color: rgba(0,0,0,.14);
}

.what-card:hover .what-pill{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.95);
  background: rgba(212,175,55,.10);
  box-shadow: 0 10px 24px rgba(212,175,55,.16);
}

.what-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(212,175,55,.20), 0 18px 46px rgba(0,0,0,.38);
}

/* Responsive */
@media (max-width: 980px){
  .what-grid{
    grid-template-columns: 1fr;
  }
  .what-card{
    min-height: clamp(320px, 44vh, 520px);
  }
}

@media (max-width: 640px){
  .what-grid{
    grid-template-columns: 1fr;
    margin-inline: 15px;
  }
  .what-content{
    width: min(94%, 420px);
    padding: 16px;
  }
}



/* Cookie modal uses your existing theme variables */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

.cookie-modal[hidden] {
  display: none;
}

.cookie-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}

.cookie-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  color: var(--text);
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  outline: none;
}

.cookie-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding-bottom: 12px;
  margin-bottom: 12px;

  border-bottom: 1px solid var(--stroke);
}


.cookie-modal.is-open .cookie-card {
  opacity: 1;
  transform: translateY(0);
}

.cookie-title {
  margin: 4px 36px 8px 0;
  font-size: 1.1rem;
  letter-spacing: .2px;
}

.cookie-desc {
  margin: 0 0 14px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--muted);
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.cookie-btn {
  appearance: none;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}

.cookie-btn:active {
  transform: translateY(1px);
}

.cookie-primary {
  border-color: rgba(var(--gold-rgb) / .55);
  background: rgba(var(--gold-rgb) / .14);
}

.cookie-primary:hover {
  background: rgba(var(--gold-rgb) / .20);
}

.cookie-secondary:hover {
  background: rgba(255,255,255,.06);
}

:root[data-theme="light"] .cookie-secondary:hover {
  background: rgba(0,0,0,.05);
}

.cookie-link {
  display: flex;
  margin-top: 8px;
  font-size: .9rem;
  color: rgba(var(--gold-rgb) / .95);
  text-decoration: none;
    align-items: center;
  text-align: center;
  justify-content: center;

}
.cookie-content{
  align-items: center;
  text-align: center;
  justify-content: center;
}

.cookie-link:hover {
  text-decoration: underline;
}

.cookie-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cookie-x:hover {
  background: rgba(255,255,255,.06);
}

:root[data-theme="light"] .cookie-x:hover {
  background: rgba(0,0,0,.05);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-card {
    transition: none;
  }
}



/* Make header + panels match the ivory system */
:root[data-theme="light"] .site-header{
  background: rgba(251,246,234,.86);
  border-bottom: 1px solid rgba(18,18,18,.08);
  box-shadow: none !important;
}

:root[data-theme="light"] .nav-panel{
  background: #fbf6ea;
  border-left-color: rgba(18,18,18,.10);
  box-shadow: none !important;
}

/* Kill drop shadows / “lift” everywhere light mode */
:root[data-theme="light"] .card,
:root[data-theme="light"] .btn,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .nav-toggle,
:root[data-theme="light"] .rocket-top,
:root[data-theme="light"] .cookie-card,
:root[data-theme="light"] .filters,
:root[data-theme="light"] .timeline-sticky,
:root[data-theme="light"] .timeline-panel,
:root[data-theme="light"] .media-card,
:root[data-theme="light"] .lb-stage,
:root[data-theme="light"] .lang-select{
  box-shadow: none !important;
}

/* Light mode “clean surface” treatment (less gray, less glass) */
:root[data-theme="light"] .card{
  background: var(--ivory-surface);
  backdrop-filter: none !important;
}

/* Buttons: remove dark/glass gradient, keep elegant highlight */
:root[data-theme="light"] .btn{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border-color: rgba(18,18,18,.12);
}
:root[data-theme="light"] .btn.primary{
  border-color: rgba(212,175,55,.38);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
}

/* Icon buttons: solid + crisp */
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .nav-toggle{
  background: rgba(255,255,255,.80);
  border-color: rgba(212,175,55,.22);
}
:root[data-theme="light"] .icon-btn:hover,
:root[data-theme="light"] .nav-toggle:hover{
  background: rgba(255,255,255,.92);
}

/* Language select: remove heavy inner shadows, keep premium border */
:root[data-theme="light"] .lang-select{
  background: rgba(255,255,255,.86);
  border-color: rgba(212,175,55,.26);
}
:root[data-theme="light"] .lang-select:hover{
  background: rgba(255,255,255,.94);
  border-color: rgba(212,175,55,.45);
}

/* Remove “shadowy” filters in light mode where they read dirty */
:root[data-theme="light"] .rocket-ico{
  filter: none !important;
}
:root[data-theme="light"] .heart-pop{
  filter: none !important;
}

/* Chips: remove active shadow, rely on border + subtle bg */
:root[data-theme="light"] .chip{
  background: rgba(255,255,255,.70);
}
:root[data-theme="light"] .chip.is-active{
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.40);
}

/* What-cards: remove the default big shadow for “clean” look */
:root[data-theme="light"] .what-card{
  box-shadow: none !important;
}
:root[data-theme="light"] .what-content{
  backdrop-filter: none !important;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(18,18,18,.10);
}