/* Slow moving gold “nebula” */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
    /* Huge so edges never show */
  width: 60vmax;
  height: 200vmax;

   /* start off-screen (top-left) */
  left: -10vmax;
  top: -30vmax;


  /* Big blurred blobs + subtle vignette */
  background:
    radial-gradient(circle at 18% 22%, rgb(233, 179, 3), transparent 20%),
    radial-gradient(circle at 78% 70%, rgba(212,175,55,.14), transparent 56%),
    radial-gradient(circle at 55% 35%, rgba(191,195,201,.08), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0), rgba(0,0,0));

  filter: blur(48px);
  opacity: .9;
  transform: translate3d(0,0,0) scale(1.05);
  will-change: transform;

  animation: goldNebula 28s ease-in-out infinite alternate;
  overflow-x: hidden !important;
}

@keyframes goldNebula{
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.06); }
  50%  { transform: translate3d( 2%,  2%, 0) scale(1.10); }
  100% { transform: translate3d(-1%,  3%, 0) scale(1.08); }
}

/* Light mode: softer + less dark vignette */
:root[data-theme="light"] body::before{
  background:
    radial-gradient(circle at 18% 22%, rgb(233, 179, 3), transparent 20%),
    radial-gradient(circle at 78% 70%, rgba(212,175,55,.10), transparent 58%),
    radial-gradient(circle at 55% 35%, rgba(191,195,201,.08), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.70), rgba(255,255,255,.92));
  filter: blur(52px);
  opacity: .75;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}



/* --- FULL BLEED UTILITY --- */
.full-bleed{
  width: 100%;
}


.h2{ font-size: clamp(30px, 4.2vw, 58px);
  }


.header-title {
    font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 10px 0 10px;
}


/* --- FUTURISTIC CAROUSEL UPGRADES --- */
.home-carousel-viewport{
  position: relative;
  isolation: isolate; /* ensures pseudo layers stay contained */
}

/* Buttery motion curve + subtle overshoot */
.home-carousel-track{
  transition: transform 880ms cubic-bezier(.12,.98,.14,1.02);
}
.home-carousel-track.is-dragging{
  transition: none !important;
}

/* Cinematic scanline + hologram sheen on slide */
.home-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 28%, rgba(0,0,0,.18)),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity: 0.0;
  transform: translateY(8px);
  transition: opacity 700ms ease, transform 900ms ease;
  pointer-events:none;
  mix-blend-mode: overlay;
}

/* Active slide gets the hologram layer */
.home-slide.is-active::before{
  opacity: .22;
  transform: translateY(0);
}

/* Background zoom easing for “cinema” feel */
.home-slide-bg{
  transition: transform 1200ms cubic-bezier(.12,.98,.14,1.02);
}
.home-slide.is-active .home-slide-bg{
  transform: scale(1.06);
}

/* Futuristic nav buttons */
.home-carousel-btn{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(212,175,55,.26);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.home-carousel-btn::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%,
    rgba(212,175,55,.26),
    rgba(191,195,201,.12),
    transparent 60%);
  opacity: .35;
}
.home-carousel-btn:hover{
  border-color: rgba(212,175,55,.45);
  transform: translateY(-1px);
}
.nav-ico{
  width: 24px;
  height: 24px;
  display:grid;
  place-items:center;
  color: var(--gold);
  position: relative;
  z-index: 1;
}
.nav-svg{ width: 24px; height: 24px; }

/* Dots: make them “orbit nodes” */
.home-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  position: relative;
}
.home-dot.is-active{
  background: rgba(212,175,55,.95);
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 6px rgba(212,175,55,.10), 0 0 26px rgba(212,175,55,.22);
}
.home-dot.is-active::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  border: 1px dashed rgba(212,175,55,.35);
  animation: orbitSpin 2.8s linear infinite;
}
@keyframes orbitSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .home-dot.is-active::after{ animation: none; }
}

/* Progress bar */
.home-carousel-progress{
  position:absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  z-index: 2;
}
.home-carousel-progress span{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(212,175,55,.2), rgba(212,175,55,.95), rgba(191,195,201,.35));
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(212,175,55,.25);
}

/* Futuristic scroll hint */
.home-carousel-scrollhint{
  position:absolute;
  right: 12px;
  bottom: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  z-index: 2;
}
.scrollhint-text{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--silver);
}
.scrollhint-ico{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  position: relative;
  box-shadow: 0 0 20px rgba(212,175,55,.18);
}
.scrollhint-ico::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  transform: translate(-50%,-50%);
  animation: pulseDot 1.4s ease-in-out infinite;
}
.scrollhint-ico::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  border: 1px dashed rgba(191,195,201,.28);
  animation: orbitSpin 3.4s linear infinite;
}
@keyframes pulseDot{
  0%,100%{ transform: translate(-50%,-50%) scale(.8); opacity: .55; }
  50%{ transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .scrollhint-ico::before,
  .scrollhint-ico::after{ animation:none; }
}



/* Smoothness boosters */
.home-carousel-viewport{
  contain: paint; /* reduces repaint jank */
}

.home-carousel-track{
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* Black-gold wash between transitions */
.home-carousel-wash{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3; /* above slides, below nav if you want */
  opacity: 0;
  transform: translateZ(0);
  background:
    radial-gradient(circle at 30% 25%, rgba(212,175,55,.22), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(191,195,201,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.88));
}

/* When active: quick blackout then reveal */
.home-carousel-wash.is-on{
  animation: washPulse 640ms cubic-bezier(.2,.9,.2,1);
}

@keyframes washPulse{
  0%   { opacity: 0; filter: blur(0px) saturate(1); }
  25%  { opacity: .92; filter: blur(1px) saturate(1.05); }
  55%  { opacity: .55; filter: blur(0.5px) saturate(1.1); }
  100% { opacity: 0; filter: blur(0px) saturate(1); }
}

@media (prefers-reduced-motion: reduce){
  .home-carousel-wash.is-on{ animation: none; opacity: 0; }
}

.home-slide-bg{
  will-change: transform;
  transform: translateZ(0) scale(1.03);
}



/* --- HERO VIDEO BACKGROUND --- */
.hero-video{
  position: relative;
  min-height: 100vh; /* subtract your navbar padding if needed */
  display: grid;
  align-items: center;
  padding: 0;
  justify-content: center;
  text-align: center;
  overflow: visible;          /* keeps the bar clipped to the secstion */
  overflow-x: clip; 
  isolation: isolate;        /* makes z-index layering predictable */
}
/* Fullscreen video behind */


/* Content above video */
.hero-inner{
  position: relative;
  z-index: 5;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);
  padding-bottom: 200px;
  padding-inline: 10px;
  overflow: visible;
}

.hero-video .subtitle {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  margin: 0 auto 1.75rem;
  opacity: 0.95;

  text-shadow:
    0 2px 14px rgba(0,0,0,.65),
    0 1px 2px rgba(0,0,0,.85);
}
/* Full-section layer */
.lava-bg.single{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* “lava” look */
  filter: blur(52px);
  opacity: 0.85;
  transform: translateZ(0);
  overflow: visible;
}

/* One giant golden blob */
.lava-bg.single .blob{
  position: absolute;

  /* Huge so edges never show */
  width: 260vmax;
  height: 260vmax;

  /* start off-screen (top-left) */
  left: -90vmax;
  top: -90vmax;

  border-radius: 50%;
  will-change: transform;

  /* gold glow using your variable */
  background: radial-gradient(circle at 18% 22%,  rgb(212, 179, 3), transparent 20%);

  mix-blend-mode: screen;
  animation: goldSweep 10s ease-in-out infinite alternate;
}

/* Diagonal sweep: top-left -> bottom-right (and back) */
@keyframes goldSweep{
  0%{
    transform: translate(0vw, 0vh) rotate(-10deg) scale(1.05);
  }
  100%{
    transform: translate(220vw, 220vh) rotate(10deg) scale(1.12);
  }
}

/* Mobile: reduce blur cost */
@media (max-width: 640px){
  .lava-bg.single{ filter: blur(30px); opacity: 0.75; }
  .lava-bg.single .blob{ animation-duration: 14s; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .lava-bg.single .blob{ animation: none; transform: translate(50vw, 50vh) scale(1.1); }
}

/* CTA row */
.hero-cta-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
    align-items: center;
  justify-content: center;
  text-align: center;
}

/* Remove background cards inside hero (if any) so it stays "no overlay" */
.hero-video .card{
  background: transparent;
}

.gold-rotator{
  display:inline-block;
  perspective: 900px;
  white-space: nowrap;

}

.gold-rotator .gold-word{
  display:inline-block;
  transform-origin: 50% 70%;
  backface-visibility: hidden;
  transform: rotateX(0deg);
  opacity: 1;
  transition: transform 150ms cubic-bezier(.2,.8,.2,1), opacity 150ms ease;
}

.gold-rotator.is-flipping .gold-word{
  transform: rotateX(90deg);
  opacity: 0;
}

/* Reduced motion: fade only */
@media (prefers-reduced-motion: reduce){
  .gold-rotator .gold-word{
    transition: opacity 220ms ease;
    transform: none !important;
  }
  .gold-rotator.is-flipping .gold-word{
    opacity: 0;
  }
}



/* Primary: gold, high contrast */
.btn.primary {
  background: linear-gradient(180deg, rgba(255,215,130,1), rgba(201,150,45,1));
  color: #0b0b0b; /* dark text is more readable on gold */
  border: 1px solid rgba(255,255,255,.18);
}

/* Secondary: glassy dark with strong white text */
.btn.sheen,.home-btn2 {
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;

  /* subtle “frost” feel + better separation */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Hover/focus states */
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.10) inset;
}

.btn:active {
  transform: translateY(0px);
}

.btn:focus-visible {
  outline: 3px solid rgba(255, 215, 130, 0.85);
  outline-offset: 3px;
}




.hero-video .subtitle{
    font-size: clamp(16px, 1.5vw, 20px);
  color: var(--muted);
  line-height: 1.35;
}



/* Reduced motion: don't autoplay in user motion preference (video still shows first frame) */
@media (prefers-reduced-motion: reduce){
  .hero-bg-video{ animation: none; }
}


.page{ padding: 0; width:100%; max-width: 100%; margin: 0; }



/* ------------------------------
   3D PROJECT CAROUSEL
------------------------------ */

.p3d{ margin-top: 34px; }
.p3d-shell{ padding: 16px; }

.p3d-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  margin: 30px;
  text-align: center;
  justify-content: center;
  align-items: center;

}

.p3d-stage{
  position: relative;
  height: 90vh;
  overflow: visible;

  /* 3D */
  perspective: 1200px;
  transform-style: preserve-3d;

}
.p3d-track{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(0);
}


.p3d-card{
  position: absolute;
  left: 50%;
  top: 50%;

  width: 50vw;
  height: 62vh;

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  overflow: hidden;

  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;

  text-decoration: none;
  color: inherit;
  z-index: 1;
}
:root[data-theme="light"] .p3d-card{
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.12);
}

.p3d-media{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: translateZ(0) scale(1.02);
  filter: saturate(1.06) contrast(1.05);
}

.p3d-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(212,175,55,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.78));
  pointer-events:none;
}
:root[data-theme="light"] .p3d-vignette{
  background:
    radial-gradient(circle at 30% 20%, rgba(212,175,55,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.55));
}

.p3d-content{
  position:absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 10px;
  border-radius: 0 0 20px 20px;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}


.p3d-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(18px, 2.6vw, 34px);
  pointer-events: none;
}
.p3d-summary{
  margin-top: 8px;
  color: rgba(255,255,255,.86);
  align-items: center;
  text-align: center;
  justify-content: center;
}
:root[data-theme="light"] .p3d-summary{ color: rgba(0,0,0,.75); }

.p3d-pill{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--gold);
  font-weight: 900;
  text-decoration: none;
  position: relative;
  z-index: 3;
}

/* nav buttons */
.p3d-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 4;

  border: 1px solid rgba(212,175,55,.26);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.p3d-nav::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%,
    rgba(212,175,55,.26),
    rgba(191,195,201,.12),
    transparent 60%);
  opacity: .35;
}
.p3d-nav:hover{
  border-color: rgba(212,175,55,.48);
  transform: translateY(-50%) translateY(-1px);
}

.p3d-prev{ left: 14px; }
.p3d-next{ right: 14px; }

.p3d-nav-ico{
  width: 24px;
  height: 24px;
  display:grid;
  place-items:center;
  color: var(--gold);
  position: relative;
  z-index: 1;
}
.p3d-nav-svg{ width: 24px; height: 24px; }

/* dots */
.p3d-dots{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display:flex;
  gap: 8px;
  z-index: 4;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
:root[data-theme="light"] .p3d-dots{ background: rgba(255,255,255,.55); }

.p3d-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
}
.p3d-dot.is-active{
  background: rgba(212,175,55,.95);
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 6px rgba(212,175,55,.10), 0 0 26px rgba(212,175,55,.22);
}

/* hint */
.p3d-hint{
  position:absolute;
  right: 14px;
  bottom: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  z-index: 4;
}
:root[data-theme="light"] .p3d-hint{ background: rgba(255,255,255,.55); }

.p3d-hint-text{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--silver);
}
.p3d-hint-ico{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  position: relative;
  box-shadow: 0 0 20px rgba(212,175,55,.18);
}
.p3d-hint-ico::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--gold);
  transform: translate(-50%,-50%);
  animation: p3dPulse 1.4s ease-in-out infinite;
}
@keyframes p3dPulse{
  0%,100%{ transform: translate(-50%,-50%) scale(.8); opacity: .55; }
  50%{ transform: translate(-50%,-50%s) scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .p3d-hint-ico::before{ animation: none; }
}

/* mobile adjustments */
@media (max-width: 520px){
  .p3d-head{ align-items:flex-start; flex-direction:column; }
  .p3d-stage{ height: clamp(520px, 72vh, 680px); }
  .p3d-card{ max-height: 400px; width: 80dvw; }
  .p3d-stage{ overflow-x: hidden; }
  .p3d-summary{ display: none;}
}



/* ------------------------------
   HOME WOW SECTIONS
------------------------------ */
/* 
.narrative{
    margin: 30px;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.narrative-inner{ max-width: 1100px; margin: 0 auto; padding: 22px 18px; }

.narrative-title{
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 10px 0 10px;
}
.narrative-swap{
  display:inline-block;
  position: relative;
  padding: 0 .15em;
}
.swap-word{
  position:absolute;
  left:0; top:0;
  opacity:0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.9,.2,1);
  color: var(--silver);
  will-change: transform, opacity;
}
.swap-word.is-on{
  position: relative;
  opacity: 1;
  transform: translateY(0);
  color: var(--gold);
}

.narrative-gallery{
  margin-top: 16px;
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.n-img{
  border-radius: 22px;
  overflow: visible;
}
.n-img img{
  width:100%;
  height: 100%;
  display:block;
  object-fit: contain;
}
.n-img--wide{
  grid-column: 1 / -1;
  height: 820px;
}
.narrative-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px;   align-items: center;
  justify-content: center;
  text-align: center;}

.narrative-progress{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.narrative-progress span{
  display:block;
  width: 0%;
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(191,195,201,.25), rgba(212,175,55,.95));
  box-shadow: 0 0 26px rgba(212,175,55,.22);
} */

/* Scroll length: section becomes tall enough for steps */
.narrative {
      margin-top: 30px;

  --steps: 3;                  /* set by JS too */
  position: relative;
    align-items: center;
  justify-content: center;
  text-align: center;
}
.narrative-inner{
  overflow: visible;
}
.narrative-title{
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 10px 0 10px;
}
.swap-word{
    color: var(--gold);
}

/* pinned viewport stage */
.narrative-pin {
  position: sticky;
  top: 0;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: clamp(20px, 6vw, 60px) 0;
}

/* creates the “pause” scroll distance */
.narrative-track {
  /* if steps=3, we need 2 screens of scroll to move through 3 states */
  height: calc((var(--steps) - 1) * 100vh);
}

/* swap word (no layout shift) */
.narrative-swap { display: inline-grid; }
.swap-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.25em);
  transition: opacity .35s ease, transform .45s ease;
}
.swap-word.is-on { opacity: 1; transform: translateY(0); }

/* stacked images */
.narrative-gallery {
  margin-top: clamp(18px, 3vw, 28px);
  position: relative;
  height: 95vh;
  overflow: visible;
}
.n-img {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(10px) scale(1.02);
  transition: opacity .5s ease, transform .65s ease;
  pointer-events: none;
}
.n-img.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.n-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media (prefers-reduced-motion: reduce) {
  .swap-word, .n-img { transition: none; }
}



/* Proof strip */
.proof-strip{
  margin-block: clamp(48px, 8vw, 100px);
  padding: clamp(12px, 2.5vw, 18px) 0;

}
.proof-shell{

  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.proof-item{
  backdrop-filter: blur(10px);
  padding: 16px;
  position: relative;
  overflow:hidden;
    align-items: center;
  justify-content: center;
  text-align: center;
}

.proof-item.is-on::after{
  opacity: .7;
  transition: opacity 600ms ease;
}
.proof-label{ color: var(--text); font-weight: 800; }
.proof-num{
  margin-top: 6px;
  font-size: clamp(1.5rem, 18cqw, 6rem); /* min, fluid, max */
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--gold);
    align-items: center;
  justify-content: center;
  text-align: center;
}

/* Tablet / small laptop */
@media (max-width: 1024px){
  .proof-shell{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .proof-num{
    font-size: clamp(3rem, 7vw, 6rem);
  }
}

/* Process */
/*

.process-grid{
  padding: 10px;
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}
.process-left{
  position: sticky;
  top: 110px;
}
.process-steps{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}
.pstep{
  padding: 12px 12px;
  font-weight: 900;
  color: var(--text);
}
.pstep.is-active{
  border-color: rgba(212,175,55,.35);
  color: var(--gold);
  box-shadow: 0 0 22px rgba(212,175,55,.12);
}
.process-line{
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.process-line span{
  display:block;
  width: 0%;
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(191,195,201,.25), rgba(212,175,55,.95));
}

.process-right{ display:grid; gap: 14px; }
.process-card img{
  margin-top: 12px;
  width: 100%;
  height: clamp(220px, 30vh, 360px);
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
}


/* ===== Process deck: overlapping sticky cards ===== */
.process {
  margin-top: 50px;
    align-items: center;
  justify-content: center;
  text-align: center;
}

.process-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.process-meta{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.process-chip{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  font-weight: 900;
  color: rgba(255,255,255,.86);
}

.process-grid{
  align-items: center;
  max-width: 1180px;
  justify-content: center;
  text-align: center;

}

/* Gives enough scroll space so the last card can “take over” */
.process-deck{
  position: relative;
  padding-bottom: 40vh;
      align-items: center;
  justify-content: center;
  text-align: center;
}

/* little topbar */
.process-deck-topbar{
  position:absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 6;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
}
.deck-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.10);
}
.deck-title{
  margin-left: 6px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  font-size: 12px;
}

/* Tweak these two variables to taste */
.process{
  --process-sticky-top: clamp(72px, 10vh, 110px);
  --process-overlap: 120px; /* how much each card covers the previous */
}

/* Sticky + smooth */
.process-card{
  position: sticky;
  top: var(--process-sticky-top);

  /* Make the stack look intentional */
  border-radius: 22px;
  overflow: hidden;

  background-color: var(--bg);
  /* Smooth, but keep it subtle so sticky doesn’t jitter */
  transition: transform 220ms ease, filter 220ms ease;
  will-change: transform;

  /* Stacking order (set via JS: --i) */
  z-index: calc(10 + var(--i, 0));
}

.process-card-inner{
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px ;
}

/* The overlap: each next card sits on top of the previous */
.process-card + .process-card{
  margin-top: calc(-1 * var(--process-overlap));
}

/* Optional: make active card pop a tiny bit */
.process-card.is-active{
  transform: translateY(-4px);
  filter: brightness(1.02);
}

/* nice bullets */
.process-bullets{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pb{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.28);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 12px;
}

.process-deck .process-card img{
  width: 100%;
  aspect-ratio: 2 / 1;      /* ✅ keeps your 2:1 images perfect */
  height: auto;             /* ✅ no distortion */
  object-fit: cover;        /* still crops nicely if needed */
  object-position: center;  /* or "50% 35%" if faces get cut */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  margin-top: 12px;

}

/* end CTA */
.process-end{
  margin: 18px auto 0;
  width: min(860px, 100%);
  text-align: center;
}


/* ===== Mobile tweaks ===== */
@media (max-width: 820px){
  .process{ --process-overlap: 20px; }
  .process-bullets{
    display: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .process-card,
  .process-line span{
    transition: none !important;
  }
}




/* Services Orbit */
/* 

.services-orbit{ margin-top:50px; text-align:center; justify-content: center; align-items: center; }
.orbit-wrap{
  margin-top: 100px;
  height: 700px;
  position: relative;
  perspective: 1100px;
  overflow:visible;
    touch-action: pan-y;    
  user-select: none;
}
.orbit{
  position:absolute;
  inset:0;
  transform-style: preserve-3d;
  will-change: transform;
}
.orbit-card{
  position:absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 76vw);
  height: 210px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  text-decoration:none;
  color: inherit;
  transform-style: preserve-3d;
    backface-visibility: hidden;
  will-change: transform, opacity;
}
.orbit-nav{ min-height: 44px; min-width: 44px; } 

.orbit-img{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.orbit-meta{
  position:absolute;
  left: 14px; right: 14px; bottom: 14px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.orbit-title{ font-weight: 950; letter-spacing:-0.02em; font-size: 18px; color: var(--gold); }
.orbit-desc{ margin-top: 6px; color: rgba(255,255,255,.78); font-weight: 700; }
.orbit-cta{ margin-top: 16px; display:flex; gap: 12px; flex-wrap:wrap; align-items: center; justify-content: center; text-align: center; }
 */

 /* ===== Services Orbit (3D carousel) ===== */

.services-orbit {
  padding: clamp(48px, 6vw, 96px) 0;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-block: 100px;
}
.services-orbit h2{
  padding-bottom: 50px;
}
.orbit-wrap {
  margin-top: 50px;
  perspective: 1200px;              /* depth */
  perspective-origin: 50% 45%;
  touch-action: pan-y;              /* allow vertical scroll; we handle horizontal drag */
  user-select: none;
}

.orbit {
  --count: 6;
  --step: calc(360deg / var(--count));
  --radius: 360px;
  --rot: 0deg;

  position: relative;
  width: min(1100px, 100%);
  margin: 0 auto;
  height: clamp(320px, 46vw, 520px);
  transform-style: preserve-3d;
  will-change: transform;
}

.orbit-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 240px;

  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;

  transform-style: preserve-3d;
  will-change: transform, filter, opacity;

  /* Position around ring AND keep readable:
     - rotate to angle
     - push out to radius
     - counter-rotate to face camera
  */

  --ang: calc((var(--i) * var(--step)) + var(--rot));
  transform:
    translate(-50%, -50%)
    translateY(var(--y, 0px))              /* 👈 lift cards in the back */
    rotateY(var(--ang))
    translateZ(var(--radius))
    rotateY(calc(-1 * var(--ang)));

  /* “glass-ish” look */
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(8px);
  box-shadow:
    0 18px 50px rgba(0,0,0,.25),
    0 2px 10px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);

  transition: filter .25s ease, opacity .25s ease, transform .05s linear;
}

.orbit-card:focus-visible {
  outline: 3px solid rgba(255,255,255,.65);
  outline-offset: 4px;
}

/* Optional: a subtle “depth” vibe without hiding cards */
.orbit-card {
  filter: saturate(0.95) contrast(1.02);
  opacity: 0.98;

}

.orbit-img {
  height: 62%;
  background-size: cover;
  background-position: center;
}

.orbit-meta {
  padding: 14px 16px 16px;
  display: grid;
  gap: 6px;
}

.orbit-title {
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: #fff;
}

.orbit-desc {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
}

.orbit-cta{
  padding-top: 50px;
}
/* Nice hover on desktop */
@media (hover: hover) and (pointer: fine) {
  .orbit-card:hover {
    filter: saturate(1.05) contrast(1.05);
  }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .orbit-card { transition: none; }
}

/* Fallback (no 3D): horizontal scroll snap */
@supports not (transform-style: preserve-3d) {
  .orbit {
    height: auto;
    display: grid;
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 8px 18px;
    scroll-snap-type: x mandatory;
  }
  .orbit-card {
    position: relative;
    top: auto; left: auto;
    transform: none;
    scroll-snap-align: center;
  }
}


/* Partners */
.partners{
  margin-top: 34px;
  padding: 28px 0 34px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.partners-shell{ max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.logo-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;

  /* key: prevents items stretching to tallest card */
  align-items: start;
}

.logo-card{
  border-radius: 18px;
  text-decoration: none;
  padding: 14px;

  display: grid;
  /* row 1: logo area, row 2: name area */
  grid-template-rows: 92px auto;
  justify-items: center;
  align-content: start;
  gap: 10px;
}

.logo-card img{
  max-width: 120px;
  max-height: 92px;     /* match row 1 */
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;

  filter: grayscale(1) contrast(1.05) opacity(.85);
  transition: filter 220ms ease, transform 220ms ease;
}

.logo-name{
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text);

  /* reserve space for up to 2 lines so top row stays aligned */
  line-height: 1.15;
  min-height: 2.3em;    /* ~2 lines */
  align-self: start;    /* top-align name block */
}

/* Optional: clamp to 2 lines (prevents 3+ line weirdness) */
.logo-name{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.logo-card:hover img{
  filter: grayscale(0) opacity(1);
  transform: translateY(-1px);
}


@media (max-width: 900px){
  .proof-shell{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ipane{ grid-template-columns: 1fr; }
  .logo-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.logo-card img{ 
  filter:none;
}
}


@media (max-width: 900px){
  .home-slide-content,
  .nav-panel,
  .proof-item{
    backdrop-filter: none;
  }
}

/* ------------------------------
   WOW INDUSTRY SWITCHER
------------------------------ */
/* ------------------------------
   WOW INDUSTRY SWITCHER (v2)
   - clearer click targets
   - better mobile UX
   - accessibility upgrades
------------------------------ */

.industry-wow{
  margin-top: 50px !important;
  padding: 60px 0;
  text-align: center;
}

.industry-wow-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Head */
.industry-wow-head{
  display: grid;
  gap: 10px;
  justify-items: center;
}

.industry-wow-title{
  margin: 0;
  line-height: 1.1;
}

.iw-accent{
  color: var(--gold);
  text-shadow: 0 0 26px rgba(212,175,55,.18);
  transition: color 280ms ease, text-shadow 280ms ease;
}

/* Tabs wrap (adds "this is clickable" look) */
.industry-wow-tabsWrap{
  margin-top: 16px;
  position: relative;
}

/* Optional swipe hint on mobile */
.iw-swipeHint{
  display: none;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
}

/* Tablist */
.industry-wow-tabs{
  --tab-gap: 10px;
  display: flex;
  gap: var(--tab-gap);
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 18px  18px 0px 0px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255, 255, 255, 0.062);
  backdrop-filter: blur(10px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.industry-wow-tabs::-webkit-scrollbar{ height: 0; }

/* Each tab button */
.iw-tab{
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.90);
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 160ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.iw-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                 /* mobile tap target */
  padding: 10px 14px;
  gap: 10px;
  font-weight: 900;
  font-size: clamp(14px, 2.2vw, 18px);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Hover / active / focus states (more obvious) */
.iw-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.25);
  background: rgba(0,0,0,.30);
}

.iw-tab:active{
  transform: translateY(0px) scale(.99);
}

.iw-tab:focus-visible{
  outline: 3px solid rgba(212,175,55,.55);
  outline-offset: 2px;
}

/* Active tab: supports either .is-active OR aria-selected */
.iw-tab.is-active,
.iw-tab[aria-selected="true"]{
  border-color: rgba(212,175,55,.45);
  background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(0,0,0,.26));
  box-shadow: 0 0 24px rgba(212,175,55,.10);
}

.iw-tab.is-active .iw-chip,
.iw-tab[aria-selected="true"] .iw-chip{
  color: var(--gold);
}

/* Stage */
.industry-wow-stage{
  margin-top: 0;
  position: relative;
  border-radius: 0px 0px 26px 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  overflow: hidden;
  isolation: isolate;

  /* tighter + more mobile-friendly than before */
  min-height: clamp(460px, 64vh, 720px);
}

/* Ambient layers */
.iw-ambient{
  position: absolute;
  inset: -30%;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(212,175,55,.18), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(191,195,201,.10), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.88));
  opacity: .85;
  pointer-events: none;
}

.iw-scan{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(212,175,55,.09), transparent);
  opacity: 0;
  transform: translateY(-40%);
}

.industry-wow-stage.is-scanning .iw-scan{
  opacity: .85;
  animation: iwScan 900ms cubic-bezier(.2,.9,.2,1);
}

@keyframes iwScan{
  from{ transform: translateY(-45%); opacity: 0; }
  20%{ opacity: .85; }
  to{ transform: translateY(65%); opacity: 0; }
}

/* Media */
.iw-media{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.iw-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 460ms ease, transform 900ms cubic-bezier(.2,.9,.2,1);
  filter: saturate(1.06) contrast(1.06);
}

.iw-img.is-active{
  opacity: .92;
  transform: scale(1.06);
}


/* ------------------------------
   PANELS (Bottom, full-width)
------------------------------ */

/* Wrapper sits on top of media and hugs the bottom */
.iw-panels{
  position: absolute;                 /* key: overlay on image */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;

  height: auto;                       /* avoid clipping */
  display: block;
  padding: 0;                         /* panel controls its own padding */
  pointer-events: none;               /* only the panel should be clickable */
}

/* The panel becomes a full-width bottom sheet */
.iw-panel{
  width: 100%;
  max-width: none;

  border-radius:  0;       /* sheet edge */
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: none;

  background: rgba(0, 0, 0, 0.151);
  backdrop-filter: blur(6px);

  padding: 5px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));

  opacity: 0;
  transform: translateY(18px);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.9,.2,1);
  display: none;

  pointer-events: auto;               /* restore interactivity */
}

/* Inner content width (keeps text from stretching too wide on desktop) */
.iw-panel > *{
  max-width: 1180px;                  /* match shell */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Active state */
.iw-panel.is-active{
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Light theme variant */
:root[data-theme="light"] .iw-panel{
  background: rgba(255,255,255,.84);
  border-color: rgba(0,0,0,.10);
}

/* Optional: add a subtle top divider/glow for separation from image */
.iw-panel::before{
  content:"";
  display:block;
  height: 1px;
  margin: -16px -16px 16px; /* align with padding */
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.35), transparent);
  opacity: .75;
}

/* Desktop: keep it elegant (not too tall) */
@media (min-width: 721px){
  .iw-panel{
    padding: 18px 0;                  /* outer padding handled by inner content */
  }
  .iw-panel > *{
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* Mobile refinements */
@media (max-width: 720px){
  .iw-panel{
    border-radius: 18px 18px 0 0;
    backdrop-filter: none;            /* smoother on phones */
  }

  /* keep your tab scroller behavior */
  .industry-wow-tabs{
    justify-content: flex-start;
    padding: 8px 10px;
  }
}

@media (max-width: 720px){

  /* Give the scroller room so the first/last tab aren't cut off by padding/masks */
  .industry-wow-tabsWrap{
    margin-left: -16px;   /* align with shell padding */
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
  }

  .industry-wow-tabs{
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;              /* prevents vertical clipping */
    padding: 10px 14px;               /* breathing room */
    scroll-padding-left: 14px;        /* makes first tab fully visible */
    scroll-padding-right: 14px;

    /* REMOVE the mask that causes "cutoff" on some devices */
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Optional: add non-clipping edge fades as overlays (visual hint only) */
  .industry-wow-tabsWrap::before,
  .industry-wow-tabsWrap::after{
    content:"";
    position:absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    pointer-events:none;
    z-index: 2;
  }

  .industry-wow-tabsWrap::before{
    left: 16px;
    background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  }

  .industry-wow-tabsWrap::after{
    right: 16px;
    background: linear-gradient(270deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .iw-img,
  .iw-panel,
  .iw-tab{
    transition: none !important;
    animation: none !important;
  }
}



/* ------------------------------
   CEO SPOTLIGHT
------------------------------ */
.ceo{
  margin-top: 34px;
  position: relative;
  overflow: visible;
  padding-left: 10px;
  max-width: 100%;
  z-index: 10;
}


.parallax{
  position:relative;
  background-image: var(--bgimg);
  background-size: cover;
  background-position:top center;
  background-attachment: fixed; /* desktop */
}

/* Mobile/touch: turn off "fixed" (best compatibility + performance) */
@media (hover: none), (pointer: coarse){
  .parallax{
    background-position:contain;
    background-attachment: scroll;
    background-position: center top; /* often looks better on tall screens */
  }
}

/* Reduced motion: also turn off */
@media (prefers-reduced-motion: reduce){
  .parallax{
    background-attachment: scroll;
  }
}

.ceo-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: center;
  z-index: 1;
}

.ceo-role{
  margin-top: 6px;
  color: rgba(255,255,255,.8);
  font-weight: 800;
}


.ceo-quote{
  margin: 14px 0 0;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--card);
  color: rgba(255,255,255,.78);
  font-weight: 750;
  line-height: 1.5;
}



.ceo-copy{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.9);
  color: rgba(255,255,255,.88);
  padding: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ceo-quote-by{
  display:block;
  margin-top: 10px;
  color: var(--gold);
  font-weight: 900;
}

.ceo-contact{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ceo-link{
  text-decoration:none;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 12px 12px;
  transition: transform 180ms ease, border-color 180ms ease;
}

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

.ceo-link:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.35);
}

.ceo-label{
  display:block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,255,255,.68);
}

:root[data-theme="light"] .ceo-label{ color: rgba(0,0,0,.55); }

.ceo-value{
  display:block;
  margin-top: 6px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}

:root[data-theme="light"] .ceo-value{ color: rgba(0,0,0,.85); }

.ceo-ctas{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Portrait card with head overflow */
.ceo-portrait{
  position: relative;
  overflow: visible;
}

.ceo-portrait-card{
  position: relative;
  height: min(520px, 62vh);
  overflow: visible; /* allow head overflow */
  isolation: isolate;
  transform: translateZ(0);
}

/* The PNG itself: bottom anchored, top overflows */
.ceo-img{
  position:absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: min(520px, 92%);
  height: auto;
  z-index: 3;

  /* overflow “head out of card” */
  margin-top: -90px; /* pushes top outside the card */
}

/* Badge */
.ceo-badge{
  position:absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  font-weight: 900;
  color: rgba(255,255,255,.88);
}

.ceo-badge-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 22px rgba(212,175,55,.25);
}

@media (max-width: 900px){
  .ceo-grid{
    grid-template-columns: 1fr;
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 10px;
  }
  .ceo-contact{
    grid-template-columns: 1fr;
  }
  .ceo-portrait-card{
    height: 520px;
  }
  .ceo-img{
    width: min(520px, 96%);
    margin-top: -70px;
  }
}


.section-solid{
background: var(--bg);
}

.section { padding-block: 4rem; }

/* ==========================================
   HOME.CSS — LIGHT MODE CLEAN IVORY PATCH
   Add this at the END of home.css
========================================== */

/* 1) Ivory nebula in light mode (no harsh white vignette) */
:root[data-theme="light"] body::before{
  background:
    radial-gradient(circle at 18% 22%, rgba(233,179,3,.55), transparent 22%),
    radial-gradient(circle at 78% 70%, rgba(212,175,55,.14), transparent 60%),
    radial-gradient(circle at 55% 35%, rgba(191,195,201,.10), transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(251,246,234,.92), rgba(251,246,234,.98));
  filter: blur(56px);
  opacity: .55;
}

/* 2) Remove “floating” shadows + glossy blur layers in light mode */
:root[data-theme="light"] .home-dot.is-active,
:root[data-theme="light"] .home-carousel-progress span,
:root[data-theme="light"] .home-carousel-btn,
:root[data-theme="light"] .home-carousel-scrollhint,
:root[data-theme="light"] .p3d-content,
:root[data-theme="light"] .p3d-nav,
:root[data-theme="light"] .p3d-dot.is-active,
:root[data-theme="light"] .p3d-dots,
:root[data-theme="light"] .p3d-hint,
:root[data-theme="light"] .process-chip,
:root[data-theme="light"] .process-deck-topbar,
:root[data-theme="light"] .pb,
:root[data-theme="light"] .industry-wow-tabs,
:root[data-theme="light"] .industry-wow-stage,
:root[data-theme="light"] .iw-tab.is-active,
:root[data-theme="light"] .iw-tab[aria-selected="true"],
:root[data-theme="light"] .iw-panel,
:root[data-theme="light"] .ceo-quote,
:root[data-theme="light"] .ceo-copy,
:root[data-theme="light"] .ceo-badge,
:root[data-theme="light"] .ceo-link{
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3) Carousel controls: clean “ivory glass” instead of dark glass */
:root[data-theme="light"] .home-carousel-btn{
  border-color: rgba(212,175,55,.22);
}
:root[data-theme="light"] .home-carousel-btn::before{
  opacity: .18;
}
:root[data-theme="light"] .home-carousel-scrollhint{
  background: rgba(255,255,255,.78);
  border-color: rgba(18,18,18,.10);
}
:root[data-theme="light"] .scrollhint-text{
  color: rgba(18,18,18,.65);
}
:root[data-theme="light"] .scrollhint-ico{
  box-shadow: none;
  border-color: rgba(212,175,55,.30);
}

/* Dots: drop the glow ring in light mode (cleaner) */
:root[data-theme="light"] .home-dot{
  border-color: rgba(18,18,18,.14);
  background: rgba(18,18,18,.06);
}
:root[data-theme="light"] .home-dot.is-active{
  background: rgba(212,175,55,.95);
  border-color: rgba(212,175,55,.40);
  box-shadow: none;
}
:root[data-theme="light"] .home-dot.is-active::after{
  border-color: rgba(212,175,55,.28);
}

/* Progress bar: less neon */
:root[data-theme="light"] .home-carousel-progress{
  background: rgba(18,18,18,.06);
  border-color: rgba(18,18,18,.08);
}
:root[data-theme="light"] .home-carousel-progress span{
  box-shadow: none;
}

/* 4) Hero text: remove heavy text-shadow (reads dirty on ivory) */
:root[data-theme="light"] .hero-video .subtitle{
  text-shadow: none;
  opacity: 1;
}

/* 5) Primary/secondary hero buttons in light mode (ivory + gold) */
:root[data-theme="light"] .btn.primary{
  background: linear-gradient(180deg, rgba(255,236,180,1), rgba(212,175,55,1));
  color: #121212;
  border-color: rgba(212,175,55,.28);
  box-shadow: none !important;
}
:root[data-theme="light"] .btn.sheen,
:root[data-theme="light"] .home-btn2{
  background: rgba(255,255,255,.84);
  color: #121212;
  border-color: rgba(18,18,18,.12);
  box-shadow: none !important;
}

/* 6) 3D projects carousel: cleaner surfaces */
:root[data-theme="light"] .p3d-card{
  background: rgba(255,255,255,.76);
  border-color: rgba(18,18,18,.12);
}
:root[data-theme="light"] .p3d-content{
  background: rgba(255,255,255,.56);
  border-color: rgba(18,18,18,.10);
}
:root[data-theme="light"] .p3d-nav{
  background: rgba(255,255,255,.82);
  border-color: rgba(212,175,55,.22);
}
:root[data-theme="light"] .p3d-nav::before{ opacity: .18; }
:root[data-theme="light"] .p3d-dots,
:root[data-theme="light"] .p3d-hint{
  background: rgba(255,255,255,.78);
  border-color: rgba(18,18,18,.10);
}
:root[data-theme="light"] .p3d-dot{
  border-color: rgba(18,18,18,.14);
  background: rgba(18,18,18,.06);
}
:root[data-theme="light"] .p3d-dot.is-active{
  box-shadow: none;
  background-color: var(--gold);
  border-color: var(--gold);
}

/* 7) Process deck chips/topbar: ivory, not dark glass */
:root[data-theme="light"] .process-chip,
:root[data-theme="light"] .process-deck-topbar,
:root[data-theme="light"] .pb,
:root[data-theme="light"] .p3d-pill{
  background: rgba(255,255,255,.78);
  border-color: rgba(18,18,18,.10);
  color: rgba(18,18,18,.78);
}
:root[data-theme="light"] .deck-title{
  color: rgba(18,18,18,.60);
}
:root[data-theme="light"] .deck-dot{
  background: rgba(18,18,18,.10);
  border-color: rgba(18,18,18,.10);
}

/* 8) Industry WOW: tabs/stage/panel become clean ivory surfaces */
:root[data-theme="light"] .industry-wow-tabs{
  background: rgba(255,255,255,.72);
  border-color: rgba(18,18,18,.10);
}
:root[data-theme="light"] .iw-tab{
  background: rgba(255,255,255,.74);
  border-color: rgba(18,18,18,.10);
  color: rgba(18,18,18,.82);
}
:root[data-theme="light"] .iw-tab:hover{
  background: rgba(255,255,255,.90);
  border-color: rgba(212,175,55,.28);
}
:root[data-theme="light"] .iw-tab.is-active,
:root[data-theme="light"] .iw-tab[aria-selected="true"]{
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.38);
}
:root[data-theme="light"] .industry-wow-stage{
  background: rgba(255,255,255,.64);
  border-color: rgba(18,18,18,.10);
}
:root[data-theme="light"] .iw-ambient{
  background:
    radial-gradient(circle at 25% 25%, rgba(212,175,55,.14), transparent 58%),
    radial-gradient(circle at 70% 70%, rgba(191,195,201,.10), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(251,246,234,.70), rgba(251,246,234,.95));
  opacity: .75;
}
:root[data-theme="light"] .iw-panel{
  background: rgba(255,255,255,.88);
  border-color: rgba(18,18,18,.10);
}
:root[data-theme="light"] .iw-panel::before{
  opacity: .6;
}

/* 9) CEO section: remove dark slabs in light mode */
:root[data-theme="light"] .ceo-quote{
  background: rgba(255,255,255,.86);
  border-color: rgba(18,18,18,.10);
  color: rgba(18,18,18,.78);
}
:root[data-theme="light"] .ceo-copy{
  background: rgba(255,255,255,.88);
  border-color: rgba(18,18,18,.10);
  color: rgba(18,18,18,.84);
}
:root[data-theme="light"] .ceo-role{
  color: rgba(18,18,18,.70);
}
:root[data-theme="light"] .ceo-badge{
  background: rgba(255,255,255,.78);
  border-color: rgba(18,18,18,.10);
  color: rgba(18,18,18,.82);
}
:root[data-theme="light"] .ceo-link{
  background: rgba(255,255,255,.82);
  border-color: rgba(18,18,18,.10);
}

/* =========================
   INDUSTRY STACK SECTION
   ========================= */
/* =========================
   INDUSTRY STACK
   ========================= */

.industry-stack {
  --industry-bg: #050607;
  --industry-fg: #ffffff;
  --industry-muted: rgba(255, 255, 255, 0.78);
  --industry-muted-2: rgba(255, 255, 255, 0.92);
  --industry-line: rgba(255, 255, 255, 0.12);
  --industry-line-strong: rgba(255, 255, 255, 0.2);
  --industry-chip-bg: rgba(255, 255, 255, 0.04);
  --industry-chip-line: rgba(255, 255, 255, 0.16);
  --industry-card-bg:rgba(0,0,0, 0.8);
  --industry-copy-bg:
    radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015));
  --industry-copy-bg-active:
    radial-gradient(circle at top right, rgba(var(--gold-rgb), .10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  --industry-shadow: 0 24px 60px rgba(0,0,0,.32);
  --industry-radius: 28px;
  --industry-ease: cubic-bezier(.22, 1, .36, 1);

  color: var(--industry-fg);
  position: relative;
  overflow: hidden;
}

.industry-stack-shell {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) 0;
}

.industry-stack-head {
  max-width: 860px;
  margin: 0 auto 42px;
  text-align: center;
}

.industry-stack-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 8px 14px;
  border: 1px solid var(--industry-chip-line);
  border-radius: 999px;
  background: var(--industry-chip-bg);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.industry-stack-title {
  margin: 0;
  color: var(--industry-fg);
}

.industry-stack-accent {
  color: var(--gold);
}

.industry-stack-intro {
  margin: 18px auto 0;
  max-width: 760px;
  color: var(--industry-muted);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
}

.industry-stack-list {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
}

.industry-band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: clamp(380px, 48vw, 560px);
  border: 1px solid var(--industry-line);
  border-radius: var(--industry-radius);
  overflow: hidden;
  background: var(--industry-card-bg);
  box-shadow: var(--industry-shadow);

  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    transform .8s var(--industry-ease),
    opacity .8s var(--industry-ease),
    border-color .45s ease,
    background .45s ease,
    box-shadow .45s ease;
  will-change: transform, opacity;
}

.industry-band.is-reverse {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.industry-band.is-reverse .industry-band-media {
  order: 2;
}

.industry-band.is-reverse .industry-band-copy {
  order: 1;
}

/* reveal state */
.js .industry-band {
  opacity: 0.88;
  transform: translateY(24px) scale(.99);
}
.js .industry-band.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* fallback when JS is unavailable */
.no-js .industry-band,
html:not(.js) .industry-band {
  opacity: 1;
  transform: none;
}

.industry-band-media,
.industry-band-copy {
  min-width: 0;
}

.industry-band-media {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  min-height: 100%;
}

.industry-band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)),
    linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.28));
  pointer-events: none;
  transition: opacity .6s ease;
}

.industry-band-img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(.92);
  transform: scale(1.04);
  transition:
    filter 1.2s var(--industry-ease),
    transform 1.2s var(--industry-ease);
  will-change: filter, transform;
}

.industry-band-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 4vw, 52px);
  background: var(--industry-copy-bg);
  transition:
    background .45s ease,
    transform .45s ease;
}

.industry-band-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--industry-chip-line);
  background: var(--industry-chip-bg);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.industry-band-title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.06;
  letter-spacing: -.03em;
  transition: color .55s ease;
}

.industry-band-text {
  margin: 18px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.85;
  max-width: 58ch;
}

.industry-band-points {
  margin: 40px 40px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.industry-band-point {
  position: relative;
  padding-left: 18px;
  color: var(--industry-muted-2);
  line-height: 1.7;
}

.industry-band-point::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  opacity: .8;
  transform: translateY(-50%);
}

.industry-band-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.industry-band-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.01em;
  transition:
    transform .18s ease,
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.industry-band-btn:hover {
  transform: translateY(-1px);
}

.industry-band-btn-primary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.14);
}

.industry-band-btn-secondary {
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background: transparent;
}

.industry-band-btn-secondary:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.26);
}

/* Current card */
.industry-band.is-current {
  box-shadow:
    0 26px 70px rgba(0,0,0,.36),
    0 0 0 1px rgba(var(--gold-rgb), .06) inset;
}

.industry-band.is-current .industry-band-copy {
  background: var(--industry-copy-bg-active);
}

.industry-band.is-current .industry-band-title {
  color: var(--gold);
}

.industry-band.is-current .industry-band-img {
  filter: grayscale(0) contrast(1.02) brightness(.99);
  transform: scale(1);
}

.industry-band.is-current .industry-band-media::after {
  opacity: .72;
}

.industry-band.is-current .industry-band-btn-primary {
  background: var(--gold);
  color: #050607;
  border-color: var(--gold);
  box-shadow: 0 10px 28px rgba(var(--gold-rgb), .22);
}

.industry-band.is-current .industry-band-btn-secondary {
  color: var(--gold);
  border-color: rgba(var(--gold-rgb), .55);
  background: rgba(var(--gold-rgb), .08);
}

/* Focus accessibility */
.industry-band-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* =========================
   LIGHT MODE
   Supports both:
   - html.theme-light
   - :root[data-theme="light"]
   ========================= */

html.theme-light .industry-stack,
:root[data-theme="light"] .industry-stack {
  --industry-bg: #f5f5f5;
  --industry-fg: #111111;
  --industry-muted: rgba(0,0,0,.72);
  --industry-muted-2: rgba(0,0,0,.9);
  --industry-line: rgba(0,0,0,.1);
  --industry-line-strong: rgba(0,0,0,.16);
  --industry-chip-bg: rgba(0,0,0,.03);
  --industry-chip-line: rgba(0,0,0,.12);
  --industry-card-bg: rgba(255,255,255);
  --industry-copy-bg:
    radial-gradient(circle at top right, rgba(0,0,0,.035), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,.01));
  --industry-copy-bg-active:
    radial-gradient(circle at top right, rgba(var(--gold-rgb), .08), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.018), rgba(0,0,0,.012));
  --industry-shadow: 0 14px 36px rgba(0,0,0,.06);
}

html.theme-light .industry-stack-kicker,
html.theme-light .industry-band-badge,
:root[data-theme="light"] .industry-stack-kicker,
:root[data-theme="light"] .industry-band-badge {
  color: rgba(0,0,0,.7);
}

html.theme-light .industry-stack-title,
html.theme-light .industry-band-title,
:root[data-theme="light"] .industry-stack-title,
:root[data-theme="light"] .industry-band-title {
  color: #111;
}

html.theme-light .industry-stack-intro,
html.theme-light .industry-band-text,
:root[data-theme="light"] .industry-stack-intro,
:root[data-theme="light"] .industry-band-text {
  color: rgba(0,0,0,.72);
}

html.theme-light .industry-band-point::before,
:root[data-theme="light"] .industry-band-point::before {
  background: #111;
}

html.theme-light .industry-band-btn-primary,
:root[data-theme="light"] .industry-band-btn-primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

html.theme-light .industry-band-btn-primary:hover,
:root[data-theme="light"] .industry-band-btn-primary:hover {
  background: #000;
}

html.theme-light .industry-band-btn-secondary,
:root[data-theme="light"] .industry-band-btn-secondary {
  color: #111;
  border-color: rgba(0,0,0,.14);
  background: transparent;
}

html.theme-light .industry-band-btn-secondary:hover,
:root[data-theme="light"] .industry-band-btn-secondary:hover {
  background: rgba(0,0,0,.035);
  border-color: rgba(0,0,0,.24);
}

html.theme-light .industry-band.is-current .industry-band-title,
:root[data-theme="light"] .industry-band.is-current .industry-band-title {
  color: var(--gold);
}

html.theme-light .industry-band.is-current .industry-band-btn-primary,
:root[data-theme="light"] .industry-band.is-current .industry-band-btn-primary {
  background: var(--gold);
  color: #111;
  border-color: var(--gold);
}

html.theme-light .industry-band.is-current .industry-band-btn-secondary,
:root[data-theme="light"] .industry-band.is-current .industry-band-btn-secondary {
  color: #7a5b00;
  border-color: rgba(var(--gold-rgb), .45);
  background: rgba(var(--gold-rgb), .08);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 920px) {
  .industry-band,
  .industry-band.is-reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .industry-band.is-reverse .industry-band-media,
  .industry-band.is-reverse .industry-band-copy {
    order: initial;
  }

  .industry-band-media {
    min-height: clamp(240px, 44vw, 360px);
  }

  .industry-band-copy {
    padding: 24px 20px 24px;
  }

  .industry-band-ctas {
    justify-content: stretch;
  }

  .industry-band-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .industry-stack-shell {
    width: min(100%, calc(100% - 20px));
    padding: 56px 0 72px;
  }

  .industry-stack-head {
    margin-bottom: 28px;
  }

  .industry-band {
    border-radius: 22px;
  }

  .industry-band-media {
    min-height: 220px;
  }

  .industry-band-copy {
    padding: 22px 18px 24px;
  }

  .industry-band-points {
    display: none;
  }

  .industry-band-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .industry-band-btn {
    width: 100%;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .industry-band,
  .industry-band-copy,
  .industry-band-title,
  .industry-band-img,
  .industry-band-btn,
  .industry-band-media::after {
    transition: none !important;
    animation: none !important;
  }

  .js .industry-band {
    opacity: 1;
    transform: none;
  }
}


@media (max-width: 767px) {
  .logo-card--hide-mobile {
    display: none;
  }
}