/*----------------------------------------------- VARIABLES -----------------------------------------------*/
:root {
  /* COLORS */
  --color-light: #CBBBBA;
  --color-dark: #001EF5;
  --color-accent: #EBE5E5;

  /* SPACING */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 128px;
  --space-5xl: 256px;
}
/*----------------------------------------------- VARIABLES (END) -----------------------------------------------*/








/*----------------------------------------------- GENERAL -----------------------------------------------*/
body {
  overflow-x: hidden;
  margin: 0px;
  background-color: #001BDC;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/*----------------------------------------------- GENERAL (END) -----------------------------------------------*/









/*----------------------------------------------- BASICS -----------------------------------------------*/
/*FONTS*/
.h1-splurge-hero-xl,
.h1-splurge-hero,
.h1-splurge,
.h2-splurge,
.h3-splurge,
.h4-splurge, 
.h5-splurge,
.h6-splurge,
.p-splurge {
  font-optical-sizing: auto;
  font-style: normal;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
}

/*AMERICAN TYPEWRITER*/
.h1-splurge-hero-xl,
.h1-splurge-hero,
.h1-splurge,
.h2-splurge {
  font-family: "Bagel Fat One", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/*NUNITO*/
.h3-splurge,
.h4-splurge, 
.h5-splurge,
.h6-splurge,
.p-splurge {
  font-family: "Lexend Deca", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/*SIZES ON MOBILE*/
@media screen and (max-width: 768px) {
  .h1-splurge-hero-xl {
    font-size: 84px;
    line-height: 84px;
    letter-spacing: -0.06em;
  }
  .h1-splurge-hero {
    font-size: 44px;
    line-height: 44px;
    letter-spacing: 1%;
  }

  .h1-splurge {
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0%;
  }

  .h2-splurge {
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0%;
  }

  .h3-splurge {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0%;
  }

  .h4-splurge {
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0%;
  }

  .h5-splurge {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0%;
  }

  .h6-splurge {
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0%;
  }

  .p-splurge {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
  }
}

/*SIZES ON DESKTOP*/
@media screen and (min-width: 769px) {
  .h1-splurge-hero-xl {
    font-size: 160px;
    line-height: 160px;
    letter-spacing: -0.06em;
  }
  .h1-splurge-hero {
    font-size: 72px;
    line-height: 72px;
    letter-spacing: 1.5%;
  }

  .h1-splurge {
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0%;
  }

  .h2-splurge {
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0%;
  }

  .h3-splurge {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0%;
  }

  .h4-splurge {
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0%;
  }

  .h5-splurge {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0%;
  }

  .h6-splurge {
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0%;
  }

  .p-splurge {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
  }
}
/*----------------------------------------------- BASICS (END) -----------------------------------------------*/



















/*----------------------------------------------- #HERO -----------------------------------------------*/
#hero {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
  position: relative;
  background-color: var(--color-dark);
  overflow: hidden;
}

/*IMAGE WRAPPER*/
#hero .image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  max-width: 720px;
}

/* LOGO */
#hero .logo {
  margin: 0;
  letter-spacing: -.08em;
  color: var(--color-light);
  display: inline-block;
}

/* LOGO: INTRO ONLY */
#hero .logo .char {
  display: inline-block;
  transform-origin: 50% 70%;
  will-change: transform;

  opacity: 0;
  transform: translateY(18px) scale3d(0.9, 0.9, 1);

  animation: snap-in 700ms cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay: calc(3000ms + (var(--i) * 70ms));
}

@keyframes snap-in {
  0% {
    opacity: 0;
    transform: translateY(22px) scale3d(0.85, 0.85, 1);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale3d(1.10, 0.85, 1);
  }
  75% {
    transform: translateY(0) scale3d(0.95, 1.06, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale3d(1, 1, 1);
  }
}

/*TEXT WRAPPER*/
#hero .text-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

#hero .p-splurge {
  font-weight: 400;
  width: 100%;
  max-width: 320px;
  color: var(--color-accent);
  text-align: center;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  padding-top: var(--space-lg);
  animation-delay: 4s;
}

/* CHECKERS */
#hero .checker-strip {
  position: absolute;
  left: 50%;
  width: 100vw;
  height: 48px; /* 2 rows of 24px */
  z-index: 5;
  pointer-events: none;

  display: grid;
  grid-template-rows: repeat(2, 24px);
  grid-auto-flow: column;
  grid-auto-columns: 24px;

  transform: translateX(-50%);
  animation: checker-drift 14000ms ease-in-out infinite;
  animation-delay: 4200ms;
}

#hero .checker-top { top: 0; }
#hero .checker-bottom { bottom: 0; }

#hero .sq {
  width: 24px;
  height: 24px;
}

#hero .sq-inner {
  width: 24px;
  height: 24px;
  display: block;
  transform-origin: center;
  will-change: transform;

  opacity: 0;
  transform: scale(0.2);
  filter: blur(2px);

  animation: sq-pop 650ms cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay: var(--d, 3200ms);
}

#hero .sq-inner.on { background: var(--color-light); }
#hero .sq-inner.off { background: transparent; }

@keyframes sq-pop {
  0% {
    opacity: 0;
    transform: scale(0.2);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

@keyframes checker-drift {
  0%, 100% { transform: translateX(-50%) translateX(0); }
  50% { transform: translateX(-50%) translateX(-6px); }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  #hero .checker-strip {
    animation: none !important;
    transform: translateX(-50%) !important;
  }

  #hero .sq-inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  #hero .logo .char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/*----------------------------------------------- HERO (END) -----------------------------------------------*/



















/*----------------------------------------------- ILLUSTRATIONS -----------------------------------------------*/
/* ILLUSTRATIONS */
#illustrations{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  position: relative;
  background-color: var(--color-light);

  /* 0% -> 100% palette (10% steps) */
  --p0:   #CBBBBA;
  --p10:  #B7ABC0;
  --p20:  #A29CC6;
  --p30:  #8E8CCC;
  --p40:  #7A7CD2;
  --p50:  #666DD7;
  --p60:  #515DDD;
  --p70:  #3D4DE3;
  --p80:  #293DE9;
  --p90:  #142EEF;
  --p100: #001EF5;

  /* Standard background for all cells */
  --paper: var(--p10);

  /* Standard cell fill */
  --grid-bg: var(--paper);
}

/* ITEM */
#illustrations .item{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 360px;
  position: relative;
}

@media screen and (min-width: 769px){
  #illustrations .item{ width: 33.33%; }
}

@media screen and (max-width: 768px){
  #illustrations .item{
    width: 100%;
    margin-bottom: var(--space-2xl);
  }
}

/* CANVAS */
#illustrations .item .canvas{
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: visible; /* allow parachutes above the frame */
}

/* ================================
   PIXEL GRID SYSTEM (BASE)
================================ */

/* FRAME */
#illustrations .item .canvas .pixel-frame{
  position: absolute;
  left: 7%;
  right: 7%;
  top: 7%;
  bottom: 7%;
  overflow: hidden;

  /* Grid line color */
  --grid-ink: var(--p70);

  /* Base cell fill */
  --cell-fill: var(--grid-bg);

  /* Gap lines show this background */
  background: var(--grid-ink);

  /* Outer frame border */
  border: 1px solid var(--p70);
}

/* GRID */
#illustrations .item .canvas .pixelgrid{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: repeat(var(--cols, 15), 1fr);
  grid-template-rows: repeat(var(--rows, 15), 1fr);

  gap: 1px;
  background: transparent;
}

/* CELL */
#illustrations .item .canvas .cell{
  background: var(--cell-fill);
  border: 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;

  opacity: 1;
  transition: background 900ms ease, opacity 1200ms ease;
}

/* SVG grid overlay (built by JS, only shown for arrows) */
#illustrations .item .canvas .pixel-frame .grid-overlay{
  display: none;
}

/* ================================
   ILLUSTRATION 1: INFLUENCE RIPPLE
================================ */

#illustrations .item.influence{
  --paper: var(--grid-bg);
}

#illustrations .item.influence .canvas .pixel-frame{
  --cell-fill: var(--paper);
}

#illustrations .item.influence .cell{
  background: var(--paper);
  transition: background 900ms ease;
}

/* subtle accent */
#illustrations .item.influence .cell.tan{
  background: var(--p0);
}

/* Active fills (palette steps) */
#illustrations .item.influence .cell.l1{ background: var(--p40); }
#illustrations .item.influence .cell.l2{ background: var(--p80); }
#illustrations .item.influence .cell.l3{ background: var(--p100); }

@media (prefers-reduced-motion: reduce){
  #illustrations .item.influence .cell{ transition: none; }
}

/* ================================
   ILLUSTRATION 2: PARACHUTES
================================ */

#illustrations .item.parachutes .cell{
  transition: none;
}

#illustrations .item.parachutes .canvas .pixel-frame{
  --cell-fill: var(--grid-bg);
}

/* Tower cells use an exact color assigned in JS as --tower-color */
#illustrations .item.parachutes .cell.tower{
  background: var(--tower-color, var(--p80));
}

/* OVERLAY (PARACHUTES) */
#illustrations .item.parachutes .overlay{
  position: absolute;
  left: 10%;
  right: 10%;
  top: 7%;
  bottom: 18%;
  pointer-events: none;
  overflow: visible;
}

/* PARACHUTE */
#illustrations .item.parachutes .chute{
  position: absolute;
  --chute-cells: 4.0;
  width: calc((100% / var(--cols, 15)) * var(--chute-cells));
  max-width: 120px;
  aspect-ratio: 6 / 7;
  background: url("/assets/splurge-parachute.svg") center / contain no-repeat;
  transform: translate(-50%, -50%);
  opacity: 1;
  animation: chute-float 6.0s ease-in-out infinite;
}

#illustrations .item.parachutes .chute:nth-child(1) { 
  margin-left: -1.9%; 
}
#illustrations .item.parachutes .chute:nth-child(2){
  --chute-cells: 4.0;
  animation-duration: 6.8s;
  animation-delay: -1.2s;
}
#illustrations .item.parachutes .chute:nth-child(3){
  --chute-cells: 4.0;
  animation-duration: 7.4s;
  animation-delay: -2.0s;
  margin-left: 3.7%;
}

@keyframes chute-float{
  0%{ transform: translate(-50%, -50%) translateY(-6px); }
  50%{ transform: translate(-50%, -50%) translateY(10px); }
  100%{ transform: translate(-50%, -50%) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce){
  #illustrations .item.parachutes .chute{ animation: none; }
}

/* ================================
   ILLUSTRATION 3: ARROWS (flip + swap)
================================ */

/* Use paper as frame bg (gap is off for arrows, so this matters) */
#illustrations .item.arrows .canvas .pixel-frame{
  background: var(--grid-bg);
}

/* Switch off gap-lines for arrows (SVG overlay draws lines instead) */
#illustrations .item.arrows .canvas .pixelgrid{
  gap: 0;
}

/* ARROWS: cells are 3D flipped */
#illustrations .item.arrows .cell{
  opacity: 1;
  transition: none;

  position: relative;
  transform-style: preserve-3d;
  border: 0;
}

#illustrations .item.arrows .cell::before,
#illustrations .item.arrows .cell::after{
  content: "";
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  pointer-events: none;
}

/* FRONT (fill only) */
#illustrations .item.arrows .cell::before{
  background: var(--front-color, transparent);
}

/* BACK (fill only) */
#illustrations .item.arrows .cell::after{
  transform: rotateY(180deg);
  background: var(--back-color, transparent);
}

/* flip */
#illustrations .item.arrows .cell.is-flipping{
  animation: arrow-cell-flip 720ms cubic-bezier(.2,.9,.25,1) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes arrow-cell-flip{
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce){
  #illustrations .item.arrows .cell.is-flipping{ animation: none; }
}

/* ARROWS: show the SVG grid overlay that JS injects */
#illustrations .item.arrows .canvas .pixel-frame .grid-overlay{
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  /* drive stroke color via currentColor */
  color: var(--grid-ink);
}

#illustrations .item.arrows .canvas .pixel-frame .grid-overlay line{
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}





/* H2 BASE */
#illustrations .item .h2-splurge{
  position: relative;
  display: inline-block; /* shrink-wrap to text so squiggle matches width */
  font-weight: 600;
  text-align: center;
  color: var(--color-dark);

  padding: var(--space-xxs);
  padding-bottom: calc(var(--space-xxs) + 16px);

  isolation: isolate;

  /* knobs */
  --squiggle-y: 6px;
  --squiggle-h: 12px;        /* shorter overall */
  --squiggle-stroke: 4.5px;  /* thicker default */
}

/* keep text above squiggle */
#illustrations .item .h2-splurge .label{
  position: relative;
  z-index: 3;
}

/* squiggle svg sits underneath */
#illustrations .item .h2-splurge .squiggle{
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--squiggle-y);
  height: var(--squiggle-h);
  width: 100%;
  pointer-events: none;
  z-index: 1;

  /* helps keep ends from looking clipped */
  overflow: visible;
}

#illustrations .item .h2-splurge .squiggle path{
  fill: none;
  stroke: var(--color-accent);
  stroke-width: var(--squiggle-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* your existing hover outline box */
#illustrations .item .h2-splurge::after{
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 4;
}

/* DESKTOP HOVER ONLY */
@media screen and (min-width: 769px){
  #illustrations .item .h2-splurge:hover{
    cursor: help;

    /* thicken squiggle on hover (no movement) */
    --squiggle-stroke: 6px;
  }

  #illustrations .item .h2-splurge:hover::after{
    inset: -8px;
    border-color: var(--color-dark);
    transition: inset 0.5s ease, border-color 0.5s ease;
  }

  /* SHOW TOOLTIP ON H2 HOVER (desktop) */
  #illustrations .item .h2-splurge:hover + .tooltip,
  #illustrations .item .tooltip:hover{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

@media screen and (min-width: 769px){
  #illustrations .item .h2-splurge{ margin-top: 12px; }
}

@media screen and (max-width: 768px){
  #illustrations .item .h2-splurge{ margin-top: -16px; }
}





/* TOOLTIP BASE */
#illustrations .item .tooltip {
  width: 100%;
  max-width: 280px;
  border-radius: 4px;
  padding: 20px;
  background-color: var(--color-dark);
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-48px);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

@media screen and (min-width: 769px) {
  #illustrations .item .tooltip {
    top: -68px;
  }  
}

@media screen and (max-width: 768px) {
  #illustrations .item .tooltip {
    top: -24px;
  }

  /* MOBILE "OPEN" STATE (toggled via JS) */
  #illustrations .item .h2-splurge.is-open {
    background-color: white;
    color: black;
  }

  #illustrations .item .h2-splurge.is-open::after {
    inset: -8px;
    border-color: black;
  }

  #illustrations .item .h2-splurge.is-open + .tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

#illustrations .item .tooltip .p-splurge {
  color: var(--color-light);
  font-weight: 400;
}

#illustrations .item .tooltip img {
  width: 12px;
  line-height: 7px;
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
}
/*----------------------------------------------- ILLUSTRATIONS (END) -----------------------------------------------*/




















/*----------------------------------------------- #QUOTE -----------------------------------------------*/
#quote{
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 520px;
  padding-left: 24px;
  padding-right: 24px;

  /* knobs */
  --quote-duration: 7.5s;
}

/* sr-only helper */
#quote .sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Use your existing hero type, just ensure no default margins interfere */
#quote .h1-splurge-hero {
  margin: 0;
  text-align: center;
}
@media (max-width: 768px) {
  #quote .h1-splurge-hero {
    margin-left: 12px;
  }
}
@media (min-width: 769px) {
  #quote .h1-splurge-hero {
    margin-left: 20px;
  }
}

/* ---------------- BACKGROUND FLIP ---------------- */

#quote .quote-bg{
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 0;
}

#quote .quote-bg-half{
  flex: 1 1 50%;
}

/* State A: left dark, right light */
#quote .quote-bg-a .quote-bg-half.left{  background: var(--color-dark); }
#quote .quote-bg-a .quote-bg-half.right{ background: var(--color-light); }

/* State B: left light, right dark */
#quote .quote-bg-b .quote-bg-half.left{  background: var(--color-light); }
#quote .quote-bg-b .quote-bg-half.right{ background: var(--color-dark); }

/* ---------------- TEXT (CENTERED, THEN CLIPPED INTO HALVES) ---------------- */

#quote .quote-text{
  position: relative;
  z-index: 2;
  min-height: inherit;

  display: grid;
  place-items: center;

  /* 3D stage */
  perspective: 1200px;
}

#quote .quote-face{
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: transform, opacity;
}

/* Left and right half clipping (this creates your exact reference look) */
#quote .quote-left{
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);

  /* hinge on the seam */
  transform-origin: 50% 50%;
  --out-angle:  90deg;
  --hide-angle: -90deg;
}

#quote .quote-right{
  -webkit-clip-path: inset(0 0 0 50%);
  clip-path: inset(0 0 0 50%);

  /* hinge on the seam */
  transform-origin: 50% 50%;
  --out-angle: -90deg;
  --hide-angle:  90deg;
}

#quote .face-light{ color: var(--color-light); }
#quote .face-dark{  color: var(--color-dark);  }

/* ---------------- ANIMATION (ONLY WHEN .is-animated EXISTS) ---------------- */

#quote.is-animated .quote-bg-a{ animation: quoteBgA var(--quote-duration) linear infinite; }
#quote.is-animated .quote-bg-b{ animation: quoteBgB var(--quote-duration) linear infinite; }

#quote.is-animated .quote-a{ animation: quoteFaceA var(--quote-duration) linear infinite; }
#quote.is-animated .quote-b{ animation: quoteFaceB var(--quote-duration) linear infinite; }

@keyframes quoteBgA{
  0%, 46%  { opacity: 1; }
  50%, 96% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes quoteBgB{
  0%, 46%  { opacity: 0; }
  50%, 96% { opacity: 1; }
  100%     { opacity: 0; }
}

/* A is visible first, then rotates out */
@keyframes quoteFaceA{
  0%, 46%  { transform: rotateY(0deg); opacity: 1; }
  54%, 96% { transform: rotateY(var(--out-angle)); opacity: 0; }
  100%     { transform: rotateY(0deg); opacity: 1; }
}

/* B is hidden first, then rotates in */
@keyframes quoteFaceB{
  0%, 46%  { transform: rotateY(var(--hide-angle)); opacity: 0; }
  54%, 96% { transform: rotateY(0deg); opacity: 1; }
  100%     { transform: rotateY(var(--hide-angle)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  #quote .quote-bg,
  #quote .quote-face{
    animation: none !important;
  }
}

/*----------------------------------------------- QUOTE (END) -----------------------------------------------*/























/*----------------------------------------------- KEYWORDS -----------------------------------------------*/
#keywords{
  width: 100%;
  position: relative;
  overflow: hidden;

  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;

  /* Base */
  background-color: var(--color-light);

  /* checker sizing */
  --kw-check: 24px;
  --kw-checker-h: calc(var(--kw-check) * 2); /* 2 rows tall */
}

/* Gradient overlay: color-dark 0% -> 20% */
#keywords::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: var(--color-dark);
  opacity: 0.2;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
}

/* Noise overlay */
#keywords::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
  opacity: 1;
  mix-blend-mode: multiply;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
}

/* Stage (FULL WIDTH) */
#keywords .keywords-stage{
  width: 100%;
  max-width: none;     /* key: remove the 1100px constraint */
  margin: 0;           /* key: remove centering */

  position: relative;
  overflow: hidden;

  z-index: 1;
  background: transparent;

  /* If you want rounded corners back later, you can re-add this.
     For now, keep it square so checker looks like the comp. */
  border-radius: 0;
}
@media (max-width: 768px) {
  #keywords .keywords-stage{
  height: 80vh;       
  min-height: 500px; 
  } 
}
@media (min-width: 769px) {
  #keywords .keywords-stage{
  height: 65vh;       
  min-height: 420px; 
  }
}

/* Checkerboard strip (inside stage): BLUE squares only, transparent gaps */
#keywords .keywords-checker{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--kw-checker-h);
  pointer-events: none;

  /* Behind pills visually, but still visible */
  z-index: 1;

  /* True checkerboard with transparent gaps (simpler + reliable) */
  background:
    repeating-conic-gradient(
      from 0deg,
      var(--color-dark) 0 25%,
      transparent 0 50%
    )
    0 0 / calc(var(--kw-check) * 2) calc(var(--kw-check) * 2);
}

/* Pills */
#keywords .kw-pill{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2; /* above checker */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--color-light);
  border: 1px solid var(--color-accent);
  border-radius: 999px;

  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  will-change: transform;
}

#keywords .kw-pill h3{
  margin: 0;
  padding: 16px 32px;

  font-size: 22px;
  font-weight: 600;

  color: var(--color-dark);
  pointer-events: none;
}

#keywords .kw-pill:hover{
  transform: translate3d(0,0,0) scale(1.02);
}





/* MESSAGE (CENTERED ABOVE PILLS) */
#keywords .kw-message{
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - (2 * var(--space-lg))));
  z-index: 5;
  pointer-events: none;
}

/* animate INNER only */
#keywords .kw-message .inner{
  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
  transition: opacity 280ms ease-out, transform 280ms ease-out;
}

/* IN */
#keywords .kw-message.is-show .inner{
  opacity: 1;
  transform: translateY(0px);
}

/* OUT */
#keywords .kw-message.is-hide .inner{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease-in, transform 320ms ease-in;
}



#keywords .kw-message {
  display: flex;
  justify-content: center;
}


#keywords .kw-message,
#keywords .kw-message .h1-splurge,
#keywords .kw-message .h4-splurge{
  color: var(--color-dark);
}


#keywords .kw-message .h1-splurge,
#keywords .kw-message .h4-splurge { 
  text-align: center;
}

#keywords .kw-message .h1-splurge {
  margin-bottom: var(--space-xs);
}

#keywords .kw-message .h4-splurge {
  max-width: 320px;
}




/* ACTIVE PILL (looks like thicker border without changing layout size) */
#keywords .kw-pill{
  --kw-ring: 3px; /* tweak thickness */
}

#keywords .kw-pill.is-active{
  box-shadow: inset 0 0 0 var(--kw-ring) var(--color-accent);
}


/* Optional: keyboard focus treatment */
#keywords .kw-pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 var(--kw-ring) var(--color-accent);
}

/* HOVER RING FOR NON-ACTIVE PILLS (50% opacity inset ring) */
#keywords .kw-pill:not(.is-active):hover{
  box-shadow: inset 0 0 0 var(--kw-ring) color-mix(in srgb, var(--color-accent) 50%, transparent);
}
/*----------------------------------------------- KEYWORDS (END) -----------------------------------------------*/



















/*----------------------------------------------- APP -----------------------------------------------*/
#app {
  width: 100%;
  display: flex;
  overflow: hidden;
  justify-content: center;
  padding-top: var(--space-4xl);
  background-color: var(--color-dark);
}
@media (max-width: 768px) {
  #app {
    flex-wrap: wrap;
  }
}



/* COLUMN TEXT */
@media (max-width: 768px) {
  #app .column-text {
    margin-bottom: var(--space-lg);
  }
}
@media (min-width: 769px) {
  #app .column-text {
    align-content: center;
  }
}

#app .column-text,
#app .column-image {
  width: 100%;
  max-width: 400px;
}

/* column order */
#app .column-text { order: 1; }
#app .column-image { order: 2; }

/* MOBILE MARGINS */
@media (max-width: 768px) {
  #app .column-text,
  #app .column-image {
    margin-left: var(--space-lg);
    margin-right: var(--space-lg);
  }
}

/* DESKTOP MARGINS */
@media (min-width: 769px) {
  #app .column-text {
    margin-left: var(--space-lg);
    margin-right: var(--space-2xl);
  }
  #app .column-image {
    margin-left: var(--space-2xl);
    margin-right: var(--space-lg);
  }
}



#app .column-text .wrapper-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

#app .column-text .wrapper-header h1 {
  width: 100%;
  max-width: 400px;
  color: white;
  text-align: center;
}



#app .column-text .wrapper-description {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
  #app .column-text .wrapper-description {
    margin-bottom: var(--space-xs);
  }
}

#app .column-text .wrapper-description h4 {
  width: 100%;
  max-width: 400px;
  font-weight: 400;
  color: white;
  text-align: center;
}



#app .column-image {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: -6px;
}

#app .column-image .carousel-container {
  max-width: 400px;
  justify-content: center;
  overflow: hidden;
}

/* key: prevent layout glitch on lazy-loaded carousel images */
#app .column-image .carousel-container img {
  aspect-ratio: 411 / 454;
}





/*PAGINATION*/
/*SEE MAIN.CSS FOR OTHE PAGINATION STYLING*/
#app .wrapper-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

#app .wrapper-pagination .carousel-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  max-width: 400px;
  pointer-events: none;
}

#app .wrapper-pagination .pagination_dot-boundary {
  pointer-events: auto;
}

#app .wrapper-pagination .pagination_dot-boundary.active .pagination_dot {
  background-color: var(--color-accent);
  height: 12px;
  width: 24px;
  border-radius: 0px;
}

#app .wrapper-pagination .pagination_dot-boundary.inactive .pagination_dot {
  background-color: var(--color-accent);
  height: 12px;
  width: 12px;
  border-radius: 0px;
}

.pagination_dot-boundary.inactive:hover .pagination_dot {
  box-shadow: 0 0 0 2px var(--color-accent);
}



/*ARROWS*/
/*WRAPPER*/
#app .wrapper-arrows {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 40px;
  margin-top: -40px;
  pointer-events: none;
}

/*INNER-WRAPPER*/
#app .carousel-arrows {
  display: flex;
  width: 100%;
  max-width: 400px;
  justify-content: center;
  position: relative;
  pointer-events: none;
}

/*POSITION ARROWS*/
#app .carousel-arrows .carousel-arrow-backward {
  right: 64px;
  pointer-events: auto;
}
#app .carousel-arrows .carousel-arrow-forward {
  left: 64px;
  pointer-events: auto;
}

/*ARROW COLOR*/
#app .carousel-arrow-backward span  {
  background-color: var(--color-accent);
}
#app .carousel-arrow-forward span  {
  background-color: var(--color-accent);
}
/*----------------------------------------------- APP (END) -----------------------------------------------*/



















/*----------------------------------------------- FOOTER (END) -----------------------------------------------*/
#footer {
  background: #0018C4;
  color: #fff;
  width: 100%;
  padding-right: var(--space-lg);
  padding-left: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
@media (max-width: 768px) {
  #footer {
    flex-direction: column;
    text-align: center;
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }
}
@media (min-width: 769px) {
  #footer {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-2xl);
  }
}



/*COLUMN - BUILT IN NYC*/
.footer-column-built {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .footer-column-built {
    justify-content: center;
  }
}

/*COLUMN - LOGO*/
.footer-column-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-column-logo img {
  width: 200px;
  height: 60px;
  display: block;
}

/*COLUMN - TRADEMARK*/
.footer-column-tm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
@media (max-width: 768px) {
  .footer-column-tm {
    align-items: center;
    gap: 2px;
  }
}


/*FONTS*/
#footer .h5-splurge {
  color: #A29CC6;
  font-weight: 400;
}
#footer .h6-splurge {
  color: #A29CC6;
  font-weight: 400;
}
/*----------------------------------------------- FOOTER (END) -----------------------------------------------*/