/* =========================
   MENU SECTION / CAROUSEL
   ========================= */

.menu-head{
  margin-bottom:18px;
}

.menu-lander{
  position:relative;
  margin-bottom:28px;
}

.menu-stage{
  position:relative;
  min-height:620px;
  overflow:visible;
}

.carousel-rail{
  position:relative;
  min-height:620px;
}

.stage-card{
  position:absolute;
  top:0;
  opacity:0;
  z-index:0;
  pointer-events:none;
  visibility:hidden;
  transform:translateY(12px) scale(.98);
  transition:
    transform .42s cubic-bezier(.2,.78,.24,1),
    opacity .28s ease,
    visibility 0s linear .28s;
}

.stage-card.center,
.stage-card.left,
.stage-card.right{
  visibility:visible;
  transition:
    transform .42s cubic-bezier(.2,.78,.24,1),
    opacity .28s ease,
    visibility 0s linear 0s;
}

.stage-card.center{
  left:0;
  width:100%;
  opacity:1;
  z-index:3;
  transform:none;
  pointer-events:auto;
}

.stage-card.left,
.stage-card.right{
  top:0;
  width:112px;
  opacity:1;
  z-index:5;
  transform:none;
  pointer-events:auto;
}

.stage-card.left{
  left:14px;
}

.stage-card.right{
  right:14px;
}

.stage-card.hidden{
  left:0;
  width:100%;
  opacity:0;
  z-index:0;
  pointer-events:none;
  visibility:hidden;
  transform:translateY(12px) scale(.98);
}

.stage-panel{
  position:relative;
  height:620px;
  min-height:620px;
}

.side-preview{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.preview-button{
  border:none;
  background:transparent;
  cursor:pointer;
  display:grid;
  justify-items:center;
  gap:10px;
  width:100%;
  padding:0;
  transition:transform .18s ease;
}

.preview-button:hover,
.preview-button:focus-visible{
  transform:translateY(-2px);
  outline:none;
}

.preview-image{
  width:96px;
  height:110px;
  display:grid;
  place-items:center;
  position:relative;
}

.preview-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  opacity:1;
  filter:drop-shadow(0 10px 14px rgba(53,27,14,.14));
  transition:
    opacity .22s ease,
    transform .18s ease,
    filter .18s ease;
}

.preview-image img.is-loading{
  opacity:0;
}

.preview-image img.is-ready{
  opacity:1;
}

.preview-text{
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:.86rem;
  font-weight:700;
  color:var(--muted);
  line-height:1.15;
  transition:transform .18s ease, color .18s ease, text-shadow .18s ease;
}

.preview-button:hover .preview-image img,
.preview-button:focus-visible .preview-image img{
  transform:scale(1.08);
  filter:drop-shadow(0 14px 20px rgba(53,27,14,.18));
}

.preview-button:hover .preview-text,
.preview-button:focus-visible .preview-text{
  color:var(--red);
  transform:scale(1.05);
  text-shadow:0 6px 14px rgba(53,27,14,.10);
}

.active-card-shell{
  height:620px;
  min-height:620px;
  border-radius:1px;
  background:
    radial-gradient(circle at 16% 18%, rgba(211,154,69,.08), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(184,56,47,.06), transparent 22%),
    linear-gradient(180deg, rgba(255,251,245,.97), rgba(255,245,236,.94));
  border:1px solid rgba(106,70,49,.10);
  box-shadow:
    0 1px 0 rgba(70,42,24,.20),
    0 2px 0 rgba(70,42,24,.10),
    0 8px 10px rgba(35,20,10,.16),
    0 18px 22px rgba(35,20,10,.10);
  padding:28px 120px 24px;
  overflow:hidden;
  position:relative;
  z-index:2;
}

/* =========================
   PIZZA CARD
   ========================= */

.pizza-shell{
  display:grid;
  grid-template-columns:58% 42%;
  gap:18px;
  height:560px;
  min-height:560px;
}

.pizza-visual-zone{
  position:relative;
  min-height:560px;
  border-radius:0;
  background:transparent;
  overflow:hidden;
}

.pizza-detail-zone{
  position:relative;
  min-height:560px;
  border-radius:0;
  background:transparent;
  border:none;
  padding:22px 22px 18px;
  overflow:hidden;
}

.pizza-pile-stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:12px 16px 8px;
  z-index:1;
}

.pizza-pile-wrap{
  position:relative;
  width:min(100%, 640px);
  height:100%;
  min-height:520px;
  z-index:1;
}

.pizza-pile-image{
  position:absolute;
  left:50%;
  top:58%;
  width:106%;
  height:106%;
  transform:translate(-50%, -50%);
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(53,27,14,.12));
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  z-index:1;
}

.foundation-inset{
  position:absolute;
  left:45%;
  top:2%;
  width:420px;
  height:auto;
  transform:translateX(-50%);
  object-fit:contain;
  z-index:0;
  pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(53,27,14,.10));
  opacity:.98;
}

.ingredient-word{
  position:absolute;
  z-index:3;
  border:none;
  background:transparent;
  color:#2f2119;
  font-family:Arial, Helvetica, sans-serif;
  font-size:1rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  padding:0;
  -webkit-text-stroke:6px rgba(255,255,255,.98);
  paint-order:stroke fill;
  text-shadow:
    0 0 1px rgba(255,255,255,.92),
    0 1px 0 rgba(255,255,255,.85);
  transition:
    transform .16s ease,
    color .16s ease,
    text-shadow .16s ease;
}

.ingredient-word::after{
  content:none;
}

.ingredient-word:hover,
.ingredient-word:focus-visible,
.ingredient-word.active{
  transform:scale(1.05);
  outline:none;
}

.ingredient-word[data-tone="red"]:hover,
.ingredient-word[data-tone="red"]:focus-visible,
.ingredient-word[data-tone="red"].active{
  color:#96211d;
  text-shadow:
    0 0 10px rgba(184,56,47,.24),
    0 0 18px rgba(184,56,47,.12);
}

.ingredient-word[data-tone="green"]:hover,
.ingredient-word[data-tone="green"]:focus-visible,
.ingredient-word[data-tone="green"].active{
  color:#3d6a31;
  text-shadow:
    0 0 10px rgba(93,123,76,.24),
    0 0 18px rgba(93,123,76,.12);
}

.ingredient-word[data-tone="cheese"]:hover,
.ingredient-word[data-tone="cheese"]:focus-visible,
.ingredient-word[data-tone="cheese"].active{
  color:#8a7425;
  text-shadow:
    0 0 10px rgba(255,232,161,.30),
    0 0 18px rgba(255,232,161,.12);
}

.ingredient-word[data-tone="cream"]:hover,
.ingredient-word[data-tone="cream"]:focus-visible,
.ingredient-word[data-tone="cream"].active{
  color:#84714a;
  text-shadow:
    0 0 10px rgba(255,248,220,.28),
    0 0 18px rgba(255,248,220,.12);
}

.ingredient-word[data-tone="gold"]:hover,
.ingredient-word[data-tone="gold"]:focus-visible,
.ingredient-word[data-tone="gold"].active{
  color:#8f7818;
  text-shadow:
    0 0 10px rgba(211,154,69,.24),
    0 0 18px rgba(211,154,69,.12);
}

.ingredient-word[data-tone="brown"]:hover,
.ingredient-word[data-tone="brown"]:focus-visible,
.ingredient-word[data-tone="brown"].active{
  color:#7a4d2c;
  text-shadow:
    0 0 10px rgba(106,70,49,.22),
    0 0 18px rgba(106,70,49,.12);
}

.w-tomatoes{ top:41%; left:7%; }
.w-garlic{ top:56%; left:3%; }
.w-basil{ top:38%; left:33%; }
.w-pepperoni{ top:41%; right:29%; }
.w-sausage{ top:46%; right:8%; }
.w-mozzarella{ top:48%; left:37%; }
.w-pecorino{ top:60%; left:23%; }
.w-parmesan{ top:59%; left:50%; }
.w-ham{ top:55%; right:23%; }
.w-peppers{ top:60%; right:1%; }
.w-dough{ bottom:73%; left:29%; }
.w-mushrooms{ bottom:21%; left:41%; }
.w-olives{ bottom:31%; right:23%; }
.w-pineapple{ bottom:24%; right:8%; }
.w-oil{ bottom:66%; left:62%; }
.w-wildcard{ bottom:21%; right:69%; }

.detail-kicker{
  margin:0 0 8px;
  font-family:Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.76rem;
  color:var(--red);
  font-weight:700;
}

.detail-title{
  margin:0 0 14px;
  font-size:clamp(1.95rem, 3vw, 3.05rem);
  line-height:.92;
  letter-spacing:-.04em;
  max-width:9.3ch;
}

.detail-panel{
  position:relative;
  min-height:388px;
  padding-top:0;
}

.comparison-layer{
  position:absolute;
  inset:0;
  z-index:1;
  transition:opacity .16s ease;
}

.comparison-layer.dimmed{
  opacity:.14;
}

.detail-copy{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  pointer-events:none;
  transform:translateY(-16px);
  transition:opacity .16s ease, transform .16s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  text-align:center;
}

.detail-copy.active{
  opacity:1;
  transform:none;
  pointer-events:none;
}

.copy-box{
  margin:0 auto;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  max-width:24ch;
  transform:translateY(-20px);
}

.copy-box h4{
  margin:0 0 12px;
  font-size:1.22rem;
  line-height:1.08;
}

.copy-box p{
  margin:0;
  color:var(--muted);
  font-family:Arial, Helvetica, sans-serif;
  font-size:1rem;
  line-height:1.56;
}

.size-card{
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.size-graphic{
  position:relative;
  width:320px;
  height:320px;
  margin:4px auto 0;
  overflow:visible;
}

.ring-caption{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  overflow:visible;
  pointer-events:none;
}

.ring-caption-text{
  font-family:Arial, Helvetica, sans-serif;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.01em;
  fill:#5a4638;
}

.ring-caption-56{
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:0;
  fill:#8f2b24;
}

.size-circle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
}

.size-circle.large{
  width:222px;
  height:222px;
  z-index:1;
  background:
    conic-gradient(
      from -22.5deg,
      #b8874e 0deg 45deg,
      #efd269 45deg 360deg
    );
  border:1px solid rgba(106,70,49,.12);
}

.size-circle.small{
  width:176px;
  height:176px;
  z-index:2;
  background:
    conic-gradient(
      from -22.5deg,
      #c7b9b1 0deg 45deg,
      #d7d1cd 45deg 360deg
    );
  border:1px solid rgba(106,70,49,.12);
}

.circle-text{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px;
  z-index:3;
}

.circle-text-large{
  z-index:0;
  opacity:.12;
}

.circle-text-inner{
  display:grid;
  gap:3px;
  max-width:76%;
}

.circle-text strong{
  display:block;
  font-size:.95rem;
  line-height:1.04;
}

.circle-text span{
  display:block;
  color:var(--muted);
  font-family:Arial, Helvetica, sans-serif;
  font-size:.8rem;
  line-height:1.2;
}

/* =========================
   EXPERIENCE CARD
   ========================= */

.experience-shell{
  align-items:start;
}

.experience-copy-zone{
  padding-top:20px;
  padding-right:22px;
  padding-bottom:18px;
  padding-left:22px;
}

.experience-title{
  margin:0;
  font-size:clamp(2.2rem, 4.3vw, 4.4rem);
  line-height:.92;
  letter-spacing:-.045em;
  max-width:9ch;
}

.experience-copy-stage{
  position:relative;
  min-height:230px;
  margin-top:18px;
}

.experience-copy{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease;
}

.experience-copy.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.experience-body{
  margin:0;
  max-width:30ch;
  color:var(--muted);
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.05rem;
  line-height:1.72;
}

.experience-image-zone{
  display:grid;
  align-content:start;
  justify-items:center;
  padding-top:4px;
  padding-bottom:14px;
}

.experience-visual-wrap{
  position:relative;
  width:min(100%, 520px);
  min-height:500px;
}

.experience-visual-wrap img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 16px 20px rgba(53,27,14,.14));
}

.experience-hotspot{
  position:absolute;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  z-index:3;
  left:56%;
  top:39%;
  width:27%;
  height:28%;
}

.experience-hotspot:focus-visible{
  outline:2px solid rgba(184,56,47,.35);
  outline-offset:4px;
  border-radius:10px;
}

.below-cards{
  margin-top:24px;
  position:relative;
  z-index:1;
  min-height:340px;
}

.below-card{
  display:none;
  background:linear-gradient(180deg, rgba(255,251,245,.96), rgba(255,246,237,.94));
  border:1px solid rgba(106,70,49,.10);
  border-radius:1px;
  box-shadow:
    0 1px 0 rgba(70,42,24,.20),
    0 2px 0 rgba(70,42,24,.10),
    0 8px 10px rgba(35,20,10,.16),
    0 18px 22px rgba(35,20,10,.10);
  padding:28px 24px 24px;
  min-height:320px;
}

.below-card.active{
  display:block;
}

.below-card h3{
  margin:0 0 18px;
  font-size:1.5rem;
  line-height:1.05;
}

.below-card p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
  font-size:1.05rem;
}

.below-card p:last-child{
  margin-bottom:0;
}

/* =========================
   SHARED SIMPLE CARD LAYOUT
   ========================= */

.simple-shell{
  height:560px;
  min-height:560px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}

.simple-copy-zone,
.simple-image-zone{
  min-height:560px;
  border-radius:0;
  background:transparent;
  border:none;
  overflow:hidden;
}

.simple-copy-zone{
  padding:22px 22px 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.simple-image-zone{
  display:grid;
  place-items:center;
  padding:18px;
}

.simple-image-zone img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(53,27,14,.14));
}

.simple-lines{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.simple-line{
  padding-top:12px;
  border-top:1px solid rgba(106,70,49,.10);
}

.simple-line strong{
  display:block;
  margin-bottom:4px;
  font-size:1rem;
  line-height:1.08;
}

.simple-line span{
  display:block;
  color:var(--muted);
  font-family:Arial, Helvetica, sans-serif;
  font-size:.95rem;
  line-height:1.5;
}

/* =========================
   FLOATS CARD
   ========================= */

.float-shell{
  align-items:start;
}

.float-copy-zone{
  padding-top:20px;
  padding-right:22px;
  padding-bottom:18px;
  padding-left:33px;
}

.float-copy-stage{
  position:relative;
  min-height:260px;
  margin-top:10px;
  padding-left:0;
}

.float-copy{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease;
  padding-left:20px;
}

.float-copy.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.float-title{
  margin:0;
  font-size:clamp(2.4rem, 4.6vw, 4.6rem);
  line-height:.92;
  letter-spacing:-.045em;
  max-width:8ch;
}

.float-body{
  margin:0;
  max-width:25ch;
  color:var(--muted);
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.08rem;
  line-height:1.72;
}

.float-image-zone{
  display:grid;
  align-content:start;
  justify-items:center;
  padding-top:4px;
  padding-bottom:14px;
}

.float-visual-wrap{
  position:relative;
  width:min(100%, 430px);
  min-height:500px;
}

.float-hero-image{
  position:absolute;
  left:50%;
  top:0;
  width:92%;
  height:auto;
  transform:translateX(-50%);
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(53,27,14,.14));
  pointer-events:none;
}

.float-word{
  position:absolute;
  z-index:3;
  border:none;
  background:transparent;
  color:#2f2119;
  font-family:Arial, Helvetica, sans-serif;
  font-size:.98rem;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  cursor:pointer;
  padding:0;
  max-width:12ch;
  -webkit-text-stroke:6px rgba(255,255,255,.98);
  paint-order:stroke fill;
  text-shadow:
    0 0 1px rgba(255,255,255,.92),
    0 1px 0 rgba(255,255,255,.85);
  transition:
    transform .16s ease,
    color .16s ease,
    text-shadow .16s ease;
}

.float-word:hover,
.float-word:focus-visible,
.float-word.active{
  transform:scale(1.05);
  outline:none;
  color:#96211d;
  text-shadow:
    0 0 10px rgba(184,56,47,.20),
    0 0 16px rgba(184,56,47,.10);
}

.fw-lid:hover,
.fw-lid:focus-visible,
.fw-lid.active{
  transform:translateX(-50%) scale(1.05);
}

.fw-lid{
  top:24%;
  left:36%;
  transform:translateX(-50%);
}

.fw-barqs{
  left:19%;
  bottom:25%;
}

.fw-vanilla{
  right:11%;
  top:35%;
}

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

@media (max-width: 1180px){
  .active-card-shell{
    padding-left:108px;
    padding-right:108px;
  }

  .stage-card.left{
    left:10px;
  }

  .stage-card.right{
    right:10px;
  }

  .float-hero-image{
    width:96%;
  }
}

@media (max-width: 1080px){
  .menu-stage,
  .carousel-rail{
    min-height:0;
  }

  .stage-card{
    position:relative;
    top:auto;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    transform:none !important;
    opacity:1 !important;
    display:none;
  }

  .stage-card.center{
    display:block;
  }

  .side-preview{
    display:none;
  }

  .active-card-shell{
    padding:22px;
  }

  .pizza-shell,
  .simple-shell{
    grid-template-columns:1fr;
    min-height:0;
  }

  .pizza-visual-zone,
  .pizza-detail-zone,
  .simple-copy-zone,
  .simple-image-zone{
    min-height:0;
  }

  .pizza-pile-stage{
    position:relative;
    min-height:500px;
  }

  .pizza-pile-wrap{
    min-height:500px;
  }

  .detail-title,
  .float-title{
    max-width:none;
  }

  .detail-copy{
    padding:10px 16px;
  }

  .float-copy-stage{
    min-height:220px;
  }

  .float-visual-wrap{
    min-height:430px;
  }

  .float-hero-image{
    top:0;
    width:80%;
  }

  .fw-lid{
    top:4%;
  }

  .fw-barqs{
    left:12%;
    bottom:18%;
  }

  .fw-vanilla{
    right:8%;
    top:18%;
  }

  .experience-title{
    max-width:none;
  }

  .experience-copy-stage{
    min-height:190px;
  }

  .experience-visual-wrap{
    min-height:420px;
  }

  .below-cards,
  .below-card{
    min-height:0;
  }
}

@media (max-width: 760px){
  .active-card-shell{
    padding:18px;
    border-radius:24px;
  }

  .pizza-visual-zone,
  .pizza-detail-zone,
  .simple-copy-zone,
  .simple-image-zone{
    padding:18px;
    border-radius:22px;
  }

  .pizza-pile-stage{
    padding:10px 10px 8px;
  }

  .pizza-pile-wrap{
    min-height:420px;
  }

  .pizza-pile-image{
    width:110%;
    height:110%;
    top:60%;
  }

  .foundation-inset{
    width:320px;
    left:48%;
    top:4%;
  }

  .ingredient-word,
  .float-word{
    font-size:.84rem;
    -webkit-text-stroke:5px rgba(255,255,255,.98);
  }

  .detail-title{
    font-size:clamp(1.7rem, 8vw, 2.45rem);
  }

  .float-title{
    font-size:clamp(2rem, 9vw, 3.15rem);
  }

  .float-body{
    font-size:1rem;
    line-height:1.6;
  }

  .size-graphic{
    width:260px;
    height:260px;
  }

  .ring-caption-text{
    font-size:10px;
  }

  .ring-caption-56{
    font-size:15px;
  }

  .size-circle.large{
    width:184px;
    height:184px;
  }

  .size-circle.small{
    width:148px;
    height:148px;
  }

  .circle-text strong{
    font-size:.8rem;
  }

  .circle-text span{
    font-size:.68rem;
  }

  .float-copy-stage{
    min-height:220px;
  }

  .float-visual-wrap{
    min-height:360px;
  }

  .float-hero-image{
    width:84%;
  }

  .fw-barqs{
    left:10%;
    bottom:12%;
  }

  .fw-vanilla{
    right:4%;
    top:16%;
  }

  .fw-lid{
    top:2%;
  }

  .experience-title{
    font-size:clamp(1.95rem, 9vw, 3.1rem);
  }

  .experience-body{
    font-size:1rem;
    line-height:1.6;
  }

  .experience-copy-stage{
    min-height:190px;
  }

  .experience-visual-wrap{
    min-height:340px;
  }

  .below-card{
    padding:18px;
  }
}