:root{
  --site-red:#C8221A;
  --site-red-dark:#A01008;
  --site-cream:#FAF0E4;
  --site-brown:#2C1A0E;
  --site-brown-soft:#6B2506;
  --site-white:#FFFFFF;
  --font-display:'Fredoka One', cursive;
  --font-body:'Nunito', Arial, sans-serif;
}
html{scroll-behavior:smooth;}
body,button,input,textarea,select,a,p,li,div,span{font-family:var(--font-body)!important;}
h1,h2,h3,.brand-name,.nav-logo,.section-title,.page-title,.hero-title,.hero-heading,.display-font{font-family:var(--font-display)!important;}
body{color:var(--site-brown);background:var(--site-cream);}
.site-nav{
  position:fixed!important; top:0; left:0; right:0; z-index:5000;
  height:72px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:0 24px; background:var(--site-red)!important;
  box-shadow:0 2px 16px rgba(0,0,0,.16);
}
.site-nav::before,.site-nav::after{display:none!important;content:none!important;}
.nav-logo{color:#fff!important;text-decoration:none!important;font-size:1.8rem!important;white-space:nowrap;}
.nav-links{display:flex!important;align-items:center;gap:1.2rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end;}
.nav-links li{list-style:none;}
.nav-links a{
  color:#fff!important; text-decoration:none!important; font-weight:800!important;
  font-size:1rem!important; letter-spacing:.2px;
}
.nav-links a:hover{color:#ffe3e8!important;text-decoration:none!important;}
.site-footer{
  background:var(--site-red)!important; color:#fff!important; text-align:center;
  padding:10px 16px!important; margin:0!important; line-height:1.2!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
}
.site-footer p{margin:2px 0!important;}
.site-footer a{color:#fff!important; text-decoration:none!important;}
.site-footer a:hover{text-decoration:underline!important;}
body.about-page, body.testimonials-page, body.recipes-page{padding-top:88px!important;}
body.faq-page{padding-top:72px!important;}
body.faq-page header{
  background:var(--site-red)!important; color:#fff!important; margin-top:0!important; padding-top:18px!important;
}
body.faq-page header::before{display:none!important;}
body.faq-page header::after{display:none!important;}
body.faq-page .hero-inner{padding-top:28px!important; padding-bottom:42px!important;}
body.faq-page .brand-name,
body.faq-page .hero-title,
body.faq-page .hero-subtitle{color:#fff!important;}
body.faq-page .site-nav{background:var(--site-red)!important;}
body.faq-page .tab-nav{background:rgba(255,255,255,.12)!important; border-color:rgba(255,255,255,.25)!important;}
body.faq-page .tab-nav a{color:#fff!important;}
body.faq-page .faq-question, body.faq-page details summary{background:var(--site-red)!important; color:#fff!important;}
body.faq-page .faq-answer, body.faq-page details{border-color:#e7b8b4!important;}
body.faq-page h1, body.faq-page h2, body.faq-page h3{font-family:var(--font-display)!important;}
@media (max-width:900px){
  .site-nav{height:auto!important;padding:12px 16px!important;align-items:flex-start!important;}
  .nav-logo{font-size:1.45rem!important;}
  .nav-links{gap:.8rem 1rem!important;}
  .nav-links a{font-size:.95rem!important;}
  body.about-page, body.testimonials-page, body.recipes-page{padding-top:118px!important;}
  body.faq-page{padding-top:104px!important;}
}


.nav-logo{display:flex!important;align-items:center;gap:12px;max-width:none!important;}
.nav-logo-img{height:48px;width:auto;display:block;flex:0 0 auto;box-shadow:none!important;filter:none!important;background:transparent!important;}
.nav-logo span{display:inline-block;color:#fff!important;line-height:1.05;font-size:1.5rem!important;}
#home .hero-image img, .hero-image img{filter:none!important;box-shadow:none!important;max-width:min(420px,40vw);width:100%;height:auto;}
body.home-page .hero{padding-top:118px!important;}
body.home-page .hero::before{background:linear-gradient(120deg, rgba(250,240,228,.98) 50%, rgba(250,240,228,.72) 100%)!important;}
body.home-page .hero-content{max-width:620px!important;}
body.home-page .hero h1{font-size:clamp(2.6rem,4.8vw,3.8rem)!important;}
body.home-page .hero p{font-size:1.2rem!important;}
body.faq-page header{background:var(--site-red)!important;padding-top:28px!important;padding-bottom:18px!important;}
body.faq-page .tab-nav{background:var(--site-red-dark)!important;border:none!important;box-shadow:none!important;}
body.faq-page .tab-nav a{opacity:1!important;font-weight:800!important;}
body.faq-page .faq-hero-logo{width:min(320px,62vw)!important;height:auto!important;display:block;margin:0 auto 16px;filter:none!important;box-shadow:none!important;}
@media (max-width:900px){
  .nav-logo-img{height:38px!important;}
  .nav-logo span{font-size:1.12rem!important;}
  body.home-page .hero{padding-top:132px!important;}
  .hero-image img{max-width:min(320px,72vw)!important;}
}


/* Small cleanup for testimonial cards and Why Ice Cream page */
body.testimonials-page .grid{align-items:start;}
body.why-ice-cream-page{padding-top:88px!important;}
body.why-ice-cream-page .site-nav{background:var(--site-red)!important;}




/* Richer Why Ice Cream background */
body.why-ice-cream-page,
.why-ice-cream-page .page,
.why-ice-cream-page main,
.why-ice-cream-page section{
  background:
    linear-gradient(180deg, rgba(107,37,6,0.96), rgba(74,24,3,1)) !important;
}

/* Global card polish */
.flavor-card,
.how-card,
.card,
.testimonial-card,
.recipe-card,
.recipe-item,
.content-box,
.section-box,
.faq-card,
.faq-item,
.panel,
.tile{
  border-radius: var(--polish-radius) !important;
  box-shadow: var(--polish-shadow-sm) !important;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important;
  overflow: hidden;
}

.flavor-card:hover,
.how-card:hover,
.card:hover,
.testimonial-card:hover,
.recipe-card:hover,
.recipe-item:hover,
.content-box:hover,
.section-box:hover,
.faq-card:hover,
.faq-item:hover,
.panel:hover,
.tile:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--polish-shadow-md) !important;
}

/* White card treatment on dark brown page */
.why-ice-cream-page .card,
.why-ice-cream-page .content-box,
.why-ice-cream-page .section-box,
.why-ice-cream-page .panel,
.why-ice-cream-page .tile{
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: var(--polish-shadow-lg) !important;
}

/* Testimonial + recipe cards feel more premium */
.testimonials-page .card,
.testimonials-page .testimonial-card,
.recipes-page .card,
.recipes-page .recipe-card,
.recipes-page .recipe-item{
  background: #ffffff !important;
  border: 1px solid rgba(107,37,6,0.08) !important;
  box-shadow: 0 10px 24px rgba(59,26,16,0.10) !important;
}

.testimonials-page .card:hover,
.testimonials-page .testimonial-card:hover,
.recipes-page .card:hover,
.recipes-page .recipe-card:hover,
.recipes-page .recipe-item:hover{
  box-shadow: 0 16px 34px rgba(59,26,16,0.14) !important;
}

/* Gentle section spacing and readability */
section,
main{
  position: relative;
}

.testimonials-page p,
.recipes-page p,
.why-ice-cream-page p,
.faq-page p,
.about-page p{
  line-height: 1.7;
}

/* Headings a touch more refined */
.testimonials-page h1,
.testimonials-page h2,
.recipes-page h1,
.recipes-page h2,
.why-ice-cream-page h1,
.why-ice-cream-page h2{
  letter-spacing: 0.2px;
}

/* Buttons and pills look more cohesive */
.badge,
.pill,
.btn-white,
.btn-primary,
.btn-secondary{
  box-shadow: 0 8px 18px rgba(200,34,26,0.16) !important;
}

.badge:hover,
.pill:hover,
.btn-white:hover,
.btn-primary:hover,
.btn-secondary:hover{
  box-shadow: 0 12px 24px rgba(200,34,26,0.22) !important;
}

/* Keep mobile feeling open, not cramped */
@media (max-width: 900px){
  .flavor-card,
  .how-card,
  .card,
  .testimonial-card,
  .recipe-card,
  .recipe-item,
  .content-box,
  .section-box,
  .faq-card,
  .faq-item,
  .panel,
  .tile{
    border-radius: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .flavor-card,
  .how-card,
  .card,
  .testimonial-card,
  .recipe-card,
  .recipe-item,
  .content-box,
  .section-box,
  .faq-card,
  .faq-item,
  .panel,
  .tile{
    transition: none !important;
  }
}




/* polished pill buttons on Why Ice Cream */
.why-ice-cream-page .bubble-link,
.why-ice-cream-page .pill-btn,
.why-ice-cream-page .topic-pill,
.why-ice-cream-page .card a,
.why-ice-cream-page .card button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  margin: 0 0 14px 0 !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(44,26,14,0.16) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative;
  overflow: hidden;
}

.why-ice-cream-page .bubble-link:hover,
.why-ice-cream-page .pill-btn:hover,
.why-ice-cream-page .topic-pill:hover,
.why-ice-cream-page .card a:hover,
.why-ice-cream-page .card button:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(44,26,14,0.24) !important;
  filter: saturate(1.03);
}

.why-ice-cream-page .bubble-link:active,
.why-ice-cream-page .pill-btn:active,
.why-ice-cream-page .topic-pill:active,
.why-ice-cream-page .card a:active,
.why-ice-cream-page .card button:active{
  transform: scale(.985) !important;
  box-shadow: 0 8px 18px rgba(44,26,14,0.18) !important;
}

/* soft top sheen */
.why-ice-cream-page .bubble-link::before,
.why-ice-cream-page .pill-btn::before,
.why-ice-cream-page .topic-pill::before,
.why-ice-cream-page .card a::before,
.why-ice-cream-page .card button::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  pointer-events: none;
}

/* tone cleanup by color family */
.why-ice-cream-page .bubble-link.red,
.why-ice-cream-page .pill-btn.red,
.why-ice-cream-page .topic-pill.red{
  background: linear-gradient(180deg, #ef2c1f, #d81e12) !important;
  color: #fff !important;
}
.why-ice-cream-page .bubble-link.pink,
.why-ice-cream-page .pill-btn.pink,
.why-ice-cream-page .topic-pill.pink{
  background: linear-gradient(180deg, #e7b3c2, #d89aac) !important;
  color: #fff !important;
}
.why-ice-cream-page .bubble-link.brown,
.why-ice-cream-page .pill-btn.brown,
.why-ice-cream-page .topic-pill.brown{
  background: linear-gradient(180deg, #c76721, #aa5319) !important;
  color: #fff !important;
}
.why-ice-cream-page .bubble-link.gold,
.why-ice-cream-page .pill-btn.gold,
.why-ice-cream-page .topic-pill.gold{
  background: linear-gradient(180deg, #f1ca39, #e8bb23) !important;
  color: #fff !important;
}
.why-ice-cream-page .bubble-link.outline,
.why-ice-cream-page .pill-btn.outline,
.why-ice-cream-page .topic-pill.outline{
  background: linear-gradient(180deg, #efe1d6, #ead9cd) !important;
  color: #fff !important;
  border: 2px solid #d9a21d !important;
  box-shadow: 0 10px 22px rgba(44,26,14,0.12) !important;
}

/* fallback styling for the exact current button order */
.why-ice-cream-page .card a:nth-of-type(1),
.why-ice-cream-page .card button:nth-of-type(1){
  background: linear-gradient(180deg, #ef2c1f, #d81e12) !important;
  color: #fff !important;
}
.why-ice-cream-page .card a:nth-of-type(2),
.why-ice-cream-page .card button:nth-of-type(2){
  background: linear-gradient(180deg, #e7b3c2, #d89aac) !important;
  color: #fff !important;
}
.why-ice-cream-page .card a:nth-of-type(3),
.why-ice-cream-page .card button:nth-of-type(3){
  background: linear-gradient(180deg, #c76721, #aa5319) !important;
  color: #fff !important;
}
.why-ice-cream-page .card a:nth-of-type(4),
.why-ice-cream-page .card button:nth-of-type(4){
  background: linear-gradient(180deg, #f1ca39, #e8bb23) !important;
  color: #fff !important;
}
.why-ice-cream-page .card a:nth-of-type(5),
.why-ice-cream-page .card button:nth-of-type(5){
  background: linear-gradient(180deg, #efe1d6, #ead9cd) !important;
  color: #fff !important;
  border: 2px solid #d9a21d !important;
}

/* icon / emoji cleanup spacing */
.why-ice-cream-page .bubble-link .icon,
.why-ice-cream-page .pill-btn .icon,
.why-ice-cream-page .topic-pill .icon,
.why-ice-cream-page .card a .icon,
.why-ice-cream-page .card button .icon{
  margin-right: .55rem !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* recipe/testimonial card motion consistency */
.recipes-page .card,
.recipes-page .recipe-card,
.recipes-page .recipe-item,
.testimonials-page .card,
.testimonials-page .testimonial-card{
  transition: transform .22s ease, box-shadow .22s ease, opacity .7s ease, background .22s ease !important;
}

/* tighter mobile fit */
@media (max-width: 700px){
  .why-ice-cream-page .card,
  .why-ice-cream-page .content-box,
  .why-ice-cream-page .section-box,
  .why-ice-cream-page .panel,
  .why-ice-cream-page .tile{
    border-radius: 20px !important;
  }
  .why-ice-cream-page .bubble-link,
  .why-ice-cream-page .pill-btn,
  .why-ice-cream-page .topic-pill,
  .why-ice-cream-page .card a,
  .why-ice-cream-page .card button{
    min-height: 46px !important;
    padding: 12px 14px !important;
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
}







/* remove light card treatment and return to clean full-bleed layout */
.why-ice-cream-page .card,
.why-ice-cream-page .content-box,
.why-ice-cream-page .section-box,
.why-ice-cream-page .panel,
.why-ice-cream-page .tile{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* typography polish */
.why-ice-cream-page .section-tag,
.why-ice-cream-page .eyebrow,
.why-ice-cream-page .kicker,
.why-ice-cream-page .pretitle{
  color: #F8E7DA !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
}

.why-ice-cream-page h1{
  color: #FFFFFF !important;
  font-size: clamp(2.6rem, 5vw, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.6px !important;
  margin-bottom: 1.2rem !important;
  text-shadow: none !important;
  max-width: 9ch !important;
}

.why-ice-cream-page h2,
.why-ice-cream-page h3{
  color: #FFF7F0 !important;
  line-height: 1.2 !important;
}

.why-ice-cream-page p,
.why-ice-cream-page li{
  color: #FFF7F0 !important;
  font-size: 1.08rem !important;
  line-height: 1.78 !important;
  max-width: 66ch !important;
}

/* quoted line */
.why-ice-cream-page em,
.why-ice-cream-page i{
  color: #FFF7F0 !important;
}

/* image area polish */
.why-ice-cream-page img{
  max-width: 100% !important;
  height: auto !important;
}
.why-ice-cream-page .hero img,
.why-ice-cream-page .page img,
.why-ice-cream-page .content-wrap img{
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.18)) !important;
}

/* story layout spacing */
.why-ice-cream-page .hero,
.why-ice-cream-page .page,
.why-ice-cream-page main{
  position: relative !important;
}
.why-ice-cream-page .hero{
  gap: 44px !important;
  align-items: center !important;
}
.why-ice-cream-page .hero > div:first-child,
.why-ice-cream-page .page > div:first-child{
  padding-right: 8px !important;
}

/* keep CTA/topic pills readable if present lower on page */
.why-ice-cream-page .bubble-link,
.why-ice-cream-page .pill-btn,
.why-ice-cream-page .topic-pill,
.why-ice-cream-page a.button,
.why-ice-cream-page button{
  box-shadow: 0 10px 22px rgba(44,26,14,0.18) !important;
}

/* mobile readability */
@media (max-width: 900px){
  .why-ice-cream-page h1{
    max-width: none !important;
    font-size: clamp(2.15rem, 8.8vw, 3.2rem) !important;
    margin-bottom: 1rem !important;
  }
  .why-ice-cream-page p,
  .why-ice-cream-page li{
    font-size: 1rem !important;
    line-height: 1.72 !important;
    max-width: none !important;
  }
  .why-ice-cream-page .hero{
    gap: 24px !important;
  }
}




/* keep page full-bleed and rich brown */
.why-ice-cream-page .card,
.why-ice-cream-page .content-box,
.why-ice-cream-page .section-box,
.why-ice-cream-page .panel,
.why-ice-cream-page .tile{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* text block styling */
.why-ice-cream-page .section-tag,
.why-ice-cream-page .eyebrow,
.why-ice-cream-page .kicker,
.why-ice-cream-page .pretitle{
  color: #fff3ea !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.why-ice-cream-page h1{
  color: #ffffff !important;
  font-size: clamp(2.8rem, 5.4vw, 5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 1.3rem !important;
  max-width: 8.8ch !important;
}

.why-ice-cream-page h2,
.why-ice-cream-page h3{
  color: #ffffff !important;
  line-height: 1.15 !important;
}

.why-ice-cream-page p,
.why-ice-cream-page li{
  color: #fff7f0 !important;
  font-size: 1.05rem !important;
  line-height: 1.72 !important;
  max-width: 64ch !important;
}

/* image / right column panel like reference */
.why-ice-cream-page .hero > div:last-child,
.why-ice-cream-page .page > div:last-child,
.why-ice-cream-page .content-wrap > div:last-child,
.why-ice-cream-page .image-panel,
.why-ice-cream-page .hero-image,
.why-ice-cream-page .side-panel{
  background: #8d4218 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 14px !important;
  padding: 24px 26px 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.why-ice-cream-page img{
  max-width: 100% !important;
  height: auto !important;
}

.why-ice-cream-page .hero img,
.why-ice-cream-page .page img,
.why-ice-cream-page .content-wrap img{
  filter: none !important;
  margin: 0 auto !important;
  display: block !important;
}

/* lower text in the right panel */
.why-ice-cream-page .hero > div:last-child p,
.why-ice-cream-page .page > div:last-child p,
.why-ice-cream-page .content-wrap > div:last-child p{
  text-align: center !important;
  max-width: 28ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

/* button stack styling */
.why-ice-cream-page .bubble-link,
.why-ice-cream-page .pill-btn,
.why-ice-cream-page .topic-pill,
.why-ice-cream-page .card a,
.why-ice-cream-page .card button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 13px 18px !important;
  margin: 0 0 14px 0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.why-ice-cream-page .bubble-link:hover,
.why-ice-cream-page .pill-btn:hover,
.why-ice-cream-page .topic-pill:hover,
.why-ice-cream-page .card a:hover,
.why-ice-cream-page .card button:hover{
  filter: brightness(0.98) !important;
  transform: none !important;
}

.why-ice-cream-page .card a:nth-of-type(1),
.why-ice-cream-page .card button:nth-of-type(1){
  background: #f62217 !important;
  color: #ffffff !important;
}
.why-ice-cream-page .card a:nth-of-type(2),
.why-ice-cream-page .card button:nth-of-type(2){
  background: #e2b4c6 !important;
  color: #ffffff !important;
}
.why-ice-cream-page .card a:nth-of-type(3),
.why-ice-cream-page .card button:nth-of-type(3){
  background: #c1651d !important;
  color: #ffffff !important;
}
.why-ice-cream-page .card a:nth-of-type(4),
.why-ice-cream-page .card button:nth-of-type(4){
  background: #efc430 !important;
  color: #fffaf4 !important;
}
.why-ice-cream-page .card a:nth-of-type(5),
.why-ice-cream-page .card button:nth-of-type(5){
  background: #eadccf !important;
  color: #ffffff !important;
  border: 2px solid #dfab13 !important;
}

/* layout and spacing */
.why-ice-cream-page .hero{
  gap: 56px !important;
  align-items: start !important;
}

.why-ice-cream-page .hero > div:first-child,
.why-ice-cream-page .page > div:first-child{
  padding-right: 8px !important;
}

/* mobile */
@media (max-width: 900px){
  .why-ice-cream-page h1{
    max-width: none !important;
    font-size: clamp(2.2rem, 8.8vw, 3.3rem) !important;
  }
  .why-ice-cream-page .hero{
    gap: 26px !important;
  }
  .why-ice-cream-page p,
  .why-ice-cream-page li{
    font-size: 1rem !important;
    line-height: 1.68 !important;
    max-width: none !important;
  }
  .why-ice-cream-page .hero > div:last-child,
  .why-ice-cream-page .page > div:last-child,
  .why-ice-cream-page .content-wrap > div:last-child,
  .why-ice-cream-page .image-panel,
  .why-ice-cream-page .hero-image,
  .why-ice-cream-page .side-panel{
    padding: 18px 18px 14px !important;
  }
}



/* WHY ICE CREAM CLEANUP */
body.why-ice-cream-page,
.why-ice-cream-page,
.why-ice-cream-page .page,
.why-ice-cream-page main,
.why-ice-cream-page section{
  background: #7b320c !important;
  color: #fff7f0 !important;
}

/* keep all normal content blocks from inheriting fake panels */
.why-ice-cream-page .card,
.why-ice-cream-page .content-box,
.why-ice-cream-page .section-box,
.why-ice-cream-page .panel,
.why-ice-cream-page .tile{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* only style the actual right-side visual box */
.why-ice-cream-page .hero-image,
.why-ice-cream-page .image-panel,
.why-ice-cream-page .side-panel{
  background: #8d4218 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 14px !important;
  padding: 24px 26px 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* prevent any accidental extra image placement */
.why-ice-cream-page .hero-content img,
.why-ice-cream-page .section-tag img,
.why-ice-cream-page h1 img,
.why-ice-cream-page p img{
  display: none !important;
}

/* restore clean typography */
.why-ice-cream-page .section-tag,
.why-ice-cream-page .eyebrow,
.why-ice-cream-page .kicker,
.why-ice-cream-page .pretitle{
  color: #fff3ea !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.why-ice-cream-page h1{
  color: #ffffff !important;
  font-size: clamp(2.8rem, 5.4vw, 5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.8px !important;
  margin-bottom: 1.3rem !important;
  max-width: 9.2ch !important;
  white-space: normal !important;
  word-break: normal !important;
}

.why-ice-cream-page h2,
.why-ice-cream-page h3{
  color: #ffffff !important;
  line-height: 1.18 !important;
  white-space: normal !important;
}

.why-ice-cream-page p,
.why-ice-cream-page li{
  color: #fff7f0 !important;
  font-size: 1.05rem !important;
  line-height: 1.72 !important;
  max-width: 64ch !important;
}

/* ensure only the main logo image shows in the right panel */
.why-ice-cream-page .hero-image img,
.why-ice-cream-page .image-panel img,
.why-ice-cream-page .side-panel img{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: none !important;
}

/* button styling inside the right panel only */
.why-ice-cream-page .hero-image a,
.why-ice-cream-page .image-panel a,
.why-ice-cream-page .side-panel a,
.why-ice-cream-page .hero-image button,
.why-ice-cream-page .image-panel button,
.why-ice-cream-page .side-panel button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 13px 18px !important;
  margin: 0 0 14px 0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 0 !important;
  white-space: normal !important;
}

.why-ice-cream-page .hero-image a:nth-of-type(1),
.why-ice-cream-page .image-panel a:nth-of-type(1),
.why-ice-cream-page .side-panel a:nth-of-type(1){
  background: #f62217 !important;
  color: #ffffff !important;
}
.why-ice-cream-page .hero-image a:nth-of-type(2),
.why-ice-cream-page .image-panel a:nth-of-type(2),
.why-ice-cream-page .side-panel a:nth-of-type(2){
  background: #e2b4c6 !important;
  color: #ffffff !important;
}
.why-ice-cream-page .hero-image a:nth-of-type(3),
.why-ice-cream-page .image-panel a:nth-of-type(3),
.why-ice-cream-page .side-panel a:nth-of-type(3){
  background: #c1651d !important;
  color: #ffffff !important;
}
.why-ice-cream-page .hero-image a:nth-of-type(4),
.why-ice-cream-page .image-panel a:nth-of-type(4),
.why-ice-cream-page .side-panel a:nth-of-type(4){
  background: #efc430 !important;
  color: #fffaf4 !important;
}
.why-ice-cream-page .hero-image a:nth-of-type(5),
.why-ice-cream-page .image-panel a:nth-of-type(5),
.why-ice-cream-page .side-panel a:nth-of-type(5){
  background: #eadccf !important;
  color: #ffffff !important;
  border: 2px solid #dfab13 !important;
}

/* layout */
.why-ice-cream-page .hero{
  gap: 56px !important;
  align-items: start !important;
}
.why-ice-cream-page .hero-content{
  min-width: 0 !important;
}
.why-ice-cream-page .hero > *{
  min-width: 0 !important;
}

@media (max-width: 900px){
  .why-ice-cream-page h1{
    max-width: none !important;
    font-size: clamp(2.2rem, 8.8vw, 3.3rem) !important;
  }
  .why-ice-cream-page .hero{
    gap: 26px !important;
  }
  .why-ice-cream-page p,
  .why-ice-cream-page li{
    font-size: 1rem !important;
    line-height: 1.68 !important;
    max-width: none !important;
  }
  .why-ice-cream-page .hero-image,
  .why-ice-cream-page .image-panel,
  .why-ice-cream-page .side-panel{
    padding: 18px 18px 14px !important;
  }
}



/* FINAL NAV + HOME + FAVICON REFRESH */
:root{
  --site-red:#C8221A;
  --site-red-dark:#A01008;
  --site-cream:#FAF0E4;
  --site-brown:#2C1A0E;
  --site-brown-soft:#6B2506;
  --site-white:#FFFFFF;
  --font-display:'Fredoka One', cursive;
  --font-body:'Nunito', Arial, sans-serif;
}

/* larger desktop nav */
.site-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 7000 !important;
  min-height: 98px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 14px 28px !important;
  background: var(--site-red) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}
.nav-logo{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  text-decoration:none !important;
  min-width:0 !important;
  max-width:none !important;
}
.nav-logo-img{
  width:58px !important;
  height:58px !important;
  object-fit:contain !important;
  flex:0 0 58px !important;
}
.nav-logo span{
  font-family:var(--font-display) !important;
  color:#fff !important;
  font-size:2rem !important;
  line-height:1.02 !important;
  white-space:nowrap !important;
}
.nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:14px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  flex-wrap:wrap !important;
}
.nav-links li{list-style:none !important;}
.nav-links a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:54px !important;
  padding:10px 22px !important;
  background:#B1120A !important;
  color:#fff !important;
  border-radius:999px !important;
  font-weight:800 !important;
  font-size:1rem !important;
  text-decoration:none !important;
  box-shadow:0 8px 18px rgba(110,0,0,.26) !important;
  white-space:nowrap !important;
}
.nav-links a:hover{
  color:#fff !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 22px rgba(110,0,0,.32) !important;
}

/* body offsets for larger nav */
body.home-page,
body.about-page,
body.testimonials-page,
body.recipes-page,
body.why-ice-cream-page{
  padding-top:110px !important;
}
body.faq-page{ padding-top: 98px !important; }

/* home page font sizing */
body.home-page .hero{
  padding-top: 148px !important;
}
body.home-page .hero-content{
  max-width: 660px !important;
}
body.home-page .hero h1{
  font-size: clamp(3.1rem, 5.8vw, 4.7rem) !important;
  line-height: 1.08 !important;
}
body.home-page .hero h1 .tagline{
  font-size: clamp(2rem, 3.4vw, 2.7rem) !important;
  line-height: 1.14 !important;
}
body.home-page .hero p{
  font-size: 1.5rem !important;
  line-height: 1.65 !important;
}
body.home-page .badge{
  font-size: 1.08rem !important;
}
body.home-page .section-title{
  font-size: clamp(2.4rem, 4.5vw, 3.5rem) !important;
}
body.home-page .section-sub{
  font-size: 1.35rem !important;
  line-height: 1.72 !important;
}

/* mobile: centered 3-column nav + autohide */
@media (max-width: 900px){
  .site-nav{
    display:block !important;
    min-height:0 !important;
    padding:10px 14px 14px !important;
    transition:transform .28s ease, box-shadow .28s ease !important;
    will-change:transform !important;
  }
  .site-nav.nav-hidden{
    transform: translateY(-100%) !important;
  }
  .nav-logo{
    justify-content:center !important;
    margin-bottom:12px !important;
  }
  .nav-logo-img{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
  }
  .nav-logo span{
    font-size:1.34rem !important;
    white-space:normal !important;
    text-align:center !important;
  }
  .nav-links{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    max-width:390px !important;
    margin:0 auto !important;
    gap:10px !important;
    justify-items:center !important;
    align-items:stretch !important;
  }
  .nav-links li{
    width:100% !important;
    max-width:100% !important;
  }
  .nav-links a{
    width:100% !important;
    min-height:48px !important;
    padding:8px 8px !important;
    font-size:.82rem !important;
    line-height:1.16 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  body.home-page,
  body.about-page,
  body.testimonials-page,
  body.recipes-page,
  body.why-ice-cream-page{
    padding-top: 210px !important;
  }
  body.faq-page{ padding-top: 198px !important; }

  body.home-page .hero{
    padding-top: 26px !important;
  }
  body.home-page .hero h1{
    font-size: clamp(2.6rem, 9vw, 3.4rem) !important;
    line-height: 1.08 !important;
  }
  body.home-page .hero h1 .tagline{
    font-size: clamp(1.6rem, 6.2vw, 2.1rem) !important;
  }
  body.home-page .hero p{
    font-size: 1.18rem !important;
    line-height: 1.65 !important;
  }
  body.home-page .section-sub{
    font-size: 1.15rem !important;
  }
}

@media (max-width: 430px){
  .nav-logo span{
    font-size:1.24rem !important;
  }
  .nav-links{
    max-width:360px !important;
    gap:9px !important;
  }
  .nav-links a{
    font-size:.78rem !important;
    min-height:46px !important;
    padding:8px 6px !important;
  }
}

/* keep why ice cream page body color */
body.why-ice-cream-page{
  background:#7B320C !important;
}



/* mobile nav auto-hide restore */
@media (max-width: 900px){
  .site-nav{
    transition: transform .28s ease, box-shadow .28s ease !important;
    will-change: transform !important;
  }
  .site-nav.nav-hidden{
    transform: translateY(-100%) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.10) !important;
  }
}