/* =====================================================
   Benny's Ice Cream — site styles
   --------------------------------------------------------
   Coding by Pixamation. (c) 2026 Pixamation.
   All rights reserved. Built for bennysicecream.com.
   --------------------------------------------------------

   Color palette (from "Color and font assets.jpg"):
     coral:      #FF7F50   (buttons, brand wordmark)
     mint:       #CAFEE0   (page bg on flavors/hours/contact/review)
     light blue: #BEE2FF   (page bg on home + footer band on other pages)
     ink:        #000      (body copy, dark text)
   Designer used Myriad Pro. Free equivalents:
     Open Sans (body) + Open Sans Semibold (headings & buttons).
   ===================================================== */

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Open Sans', 'Myriad Pro', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  background: #cafee0;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.home { background: #bee2ff; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

button { font-family: inherit; cursor: pointer; }

main { flex: 1 0 auto; }

.container {
  width: min(1760px, 92%);
  margin: 0 auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* =====================================================
   HEADER
   Coral pill nav buttons on the left, hand-lettered
   "Benny's Ice Cream" wordmark image on the right.

   The header is positioned absolutely on every page so that
   the nav pills overlay the decorative element directly
   underneath:
     - on index.html they sit on top of Homepagestyle.png
       (the mint→peach blob, which now starts at y=0 of the
       stage)
     - on flavors/hours/contact/review they sit on top of
       Icecreamdrip.svg (the white drip strip)
   ===================================================== */
.site-header {
  padding: 1.25rem 0 1rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
/* Reserve room at the top of every page-stage so the absolute
   header doesn't visually crash into the first row of content.
   Per-page sections override this where appropriate. */
main { padding-top: 0; }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.brand-mark {
  display: inline-block;
  flex: 0 0 auto;
  text-decoration: none;
  transition: transform .15s ease;
}
.brand-mark img {
  /* Smaller on phones so the logo shares the header row with the
     nav pills without forcing the header to wrap onto two lines.
     Steps back up to the design-true height on tablet (720px) and
     desktop (1200px) breakpoints below. */
  height: 40px;
  width: auto;
  display: block;
}
@media (min-width: 720px) {
  .brand-mark img { height: 70px; }
}
@media (min-width: 1200px) {
  .brand-mark img { height: 88px; }
}
.brand-mark:hover { transform: translateY(-1px) scale(1.02); }

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
@media (min-width: 720px) {
  .primary-nav ul { gap: 1rem; }
}

.primary-nav .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  /* Designer spec: 40pt sans-serif. 40pt ≈ 53px on a 1920px design.
     Clamp so it scales smoothly to phone widths and tops out at a
     readable, design-true size on big screens.
     On phones (< 720px) the min size and min-width are deliberately
     small so all four pills (HOME / FLAVORS / HOURS / CONTACT) fit
     on a single row at ~360px viewport width. The @media (min-width:
     720px) rule below restores the larger, design-true sizing on
     tablet and up. */
  font-weight: 400;
  font-size: clamp(1rem, 2.4vw, 1.85rem);
  color: #fff;
  background: #ff7f50;
  padding: .5rem 1rem;
  min-width: 64px;
  text-align: center;
  border-radius: 26px;
  letter-spacing: .01em;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
@media (min-width: 720px) {
  .primary-nav .nav-link {
    padding: .8rem 2rem;
    min-width: 165px;
    border-radius: 32px;
  }
}
.primary-nav .nav-link:hover,
.primary-nav .nav-link:focus-visible {
  background: #ff6b3d;
  transform: translateY(-2px);
  outline: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.primary-nav .nav-link[aria-current="page"] {
  background: #e76b3d;
  box-shadow: inset 0 3px 6px rgba(0,0,0,.18);
}

/* =====================================================
   HOME PAGE
   Big two-column layout — text/CTA on the left, tilted
   ice-cream-cone illustration on the right. Soft mint→
   coral blob sits behind the cone as decoration.
   ===================================================== */
.home-stage {
  position: relative;
  padding: 0 0 1.5rem;
  /* No overflow:hidden — we want the cone to be free to extend
     past the stage's bottom edge and overlap the blue footer
     band, exactly like the cone tips in Homepage.pdf. The blob
     and watermark are clipped instead by their own wrapper
     `.home-stage-clip` (see below). */
  min-height: clamp(560px, 72vh, 800px);
}

/* Clip wrapper that ONLY contains the blob + watermark, so they
   don't bleed into the footer while the cone is still free to
   render on top of it. */
.home-stage-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Layer 1 — Big mint→peach blob. We use the SVG version
   (Homepagestyle.svg) instead of the PNG because the SVG is
   true vector geometry with linearGradient fills and a real
   transparent canvas — there's no white photographic backdrop
   to worry about, so the light-blue page bg shows through
   the empty corners exactly like Homepage.pdf.

   The artwork is anchored a few inches above the stage's top
   edge so its upper lobe pokes into the header area and
   tapers downward, matching the PDF where only the lower
   curves of the blob sit behind the hero copy. */
.home-blob {
  position: absolute;
  top: -22%;
  right: -6%;
  width: 112%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Layer 2 — Faded "Benny's Ice Cream" watermark. The SVG already has
   opacity:.06 baked in, so it stays subtle. Sits below the absolute
   header (~120px tall) and above the tagline. */
.home-watermark {
  position: absolute;
  top: 8%;
  left: 4%;
  width: 92%;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Layer 3 — Cone illustration. Sourced from the designer's
   Ice Cream.svg, which embeds the cone product photo with
   a proper alpha channel and the design's signature
   -14.53° rotation already baked in (so we do NOT add
   another rotate() here — that would double-rotate the
   image). The SVG's intrinsic viewBox is 1156.68 × 1281.9
   (≈ 0.9 aspect), and Homepage.pdf places it so the
   bounding box spans ~48% of the page width anchored just
   left of vertical-center. */
.home-cone {
  position: absolute;
  top: 92%;
  /* Nudged ~2" further right (10% of the design width) per
     request. The translate(-50%, -50%) below means `left` is
     measured to the cone's centerpoint. */
  left: 57%;
  width: clamp(420px, 48%, 920px);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  /* Topmost layer — the cone tips deliberately drop into and
     over the light-blue footer band so they remain visible
     above "Visit Our Friends" / Directions. */
  z-index: 100;
}

/* The text content sits on top of all three image layers. */
.home-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1000px) {
  .home-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    min-height: clamp(540px, 70vh, 820px);
  }
}

.home-copy {
  position: relative;
  /* Push the copy clear of the absolute-positioned header AND the
     "Benny's Ice Cream" watermark that crowns the blob, so the
     tagline starts roughly where Homepage.pdf places it. */
  padding-top: clamp(6rem, 14vh, 11rem);
}

/* Designer spec — tagline ≈ 50pt semibold; description ≈ 30pt
   regular; address ≈ 40pt semibold; CTA button ≈ 40pt semibold. */
.home-tag {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  color: #000;
  margin: 0 0 1.25rem;
  line-height: 1.2;
}

.home-desc {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 400;
  /* Originally clamp(1.1rem, 2vw, 1.75rem). Was shrunk by two
     type-steps, then bumped back up one step per the follow-up
     request ("one size bigger"). */
  font-size: clamp(1rem, 1.65vw, 1.4rem);
  color: #000;
  margin: 0 0 2.5rem;
  max-width: 34ch;
  line-height: 1.45;
}

.home-address {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.35rem);
  color: #000;
  margin: 0 0 2.25rem;
  line-height: 1.25;
  max-width: 22ch;
}

.btn-menu {
  display: inline-block;
  background: #ff7f50;
  color: #000;
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.5vw, 2.25rem);
  padding: 1rem 3rem;
  border-radius: 44px;
  text-decoration: none;
  letter-spacing: .01em;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn-menu:hover,
.btn-menu:focus-visible {
  background: #ff6b3d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
  outline: none;
}

/* Empty right column — pushes the text into the left half. The cone
   itself is absolutely positioned at the section level (above), not
   inside .home-art, because mix-blend-mode behaves more reliably
   when its layers are siblings. */
.home-art {
  min-height: 420px;
}

@media (max-width: 999px) {
  .home-stage { min-height: 820px; padding-bottom: 2rem; }
  /* Reserve enough room above the tagline that the absolutely-
     positioned header — which may wrap onto two rows on very
     narrow phones — never crashes into the H1. clamp() lets the
     gap grow with the viewport so the tagline lands in roughly
     the same spot regardless of phone size. */
  .home-copy { padding-top: clamp(7rem, 22vw, 10rem); }
  .home-art { display: none; }
  .home-blob { right: -22%; top: 28%; width: 138%; }
  /* The script "Benny's Ice Cream" watermark is purely decorative.
     On phones it landed directly across the description text, so
     we hide it entirely below 1000px. The brand-mark image in the
     header still provides the wordmark for narrower viewports. */
  .home-watermark { display: none; }
  .home-cone {
    top: auto;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%) rotate(-8deg);
    width: 70%;
  }

  /* On desktop the home page deliberately blocks scrolling
     (overflow:hidden on <html> and <body>) so the ice-cream cone's
     tips can clip flush with the footer. On phones the page is
     taller than the viewport once the header wraps and the copy is
     pushed down, so the user needs to be able to scroll. Restore
     normal page scrolling here. */
  html:has(body.home) { overflow: visible; }
  body.home { overflow: visible; min-height: 100vh; }
  body.home .home-stage { padding-bottom: 1.5rem; }
}

/* =====================================================
   PAGE DRIP STRIP
   On every page except the home page, the design shows a
   melting-ice-cream drip strip across the very top of the
   page. The absolute header (nav pills + brand wordmark)
   overlays it. The drip SVG already bakes in a 0.2 opacity
   so it reads as a soft watermark over the mint body bg.

   The original artwork is 1918 × 280 with empty space along
   the top of the canvas (the actual drip pattern starts
   ~58px down). The design SVG crops that empty space with
   `transform="translate(0 -57.94)"`. We replicate that crop
   in pure CSS by sizing the displayed strip to the cropped
   aspect-ratio (1918 × 222) and using object-fit: cover +
   object-position: bottom so the bottom of the source SVG
   (where the drip lives) is what gets shown — making the
   first drip flush to the top of the page.
   ===================================================== */
.page-drip {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1918 / 222;
  object-fit: cover;
  object-position: bottom;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

/* =====================================================
   PAGE HERO  (used on flavors/hours/review)
   ===================================================== */
.page-hero {
  padding: 1rem 0 .5rem;
  text-align: center;
}

.page-title {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  color: #000;
  margin: 0 0 .5rem;
}

.page-subtitle {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  margin: 0 auto 1rem;
  max-width: 60ch;
  color: #333;
}

/* =====================================================
   FLAVORS PAGE — Flavoredpage.pdf
   Two soft-mint rounded panels sit side-by-side. The left
   panel has a coral "Soft Serve" pill straddling its top
   edge. Each panel hosts a two-column flavor list. The
   right panel ends with a small "★ Indicates rotated
   flavors" note (the rotated flavors in its second column
   are prefixed with a coral ★).
   ===================================================== */
.flavors-page {
  padding: clamp(7rem, 14vh, 11rem) 0 3rem;
}

.flavors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .flavors-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.flavors-panel {
  position: relative;
  background: #e6f9ec;
  border: 2px solid #d8efde;
  border-radius: 50px;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3rem);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  flex-direction: column;
}

.flavors-pill {
  position: absolute;
  top: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #ff7f50;
  color: #000;
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  padding: .7rem 2.4rem;
  border-radius: 38px;
  letter-spacing: .01em;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  white-space: nowrap;
}

.flavors-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem 2rem;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.55rem);
  line-height: 1.55;
  color: #000;
  flex: 1 0 auto;
}
.flavors-list li { padding: .1rem 0; }

.flavors-list .rotated::before {
  content: "★ ";
  color: #ff7f50;
  font-weight: 700;
}

.flavors-list .burst::before {
  content: "♦ ";
  color: #ff7f50;
  font-weight: 700;
}

.flavors-note {
  margin: 1.5rem 0 0;
  text-align: right;
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  color: #000;
}
.flavors-note::before {
  content: "★ ";
  color: #ff7f50;
  font-weight: 700;
}

.flavors-burst-note {
  margin: 1.5rem 0 0;
  text-align: right;
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  color: #000;
}
.flavors-burst-note::before {
  content: "♦ ";
  color: #ff7f50;
  font-weight: 700;
}

/* =====================================================
   HOURS PAGE
   2 x 2 grid of seasonal cards — same layout as Nutty
   Putty's hours page. The page-level mint background and
   the ice-cream-drip strip stay; only the cards change.
   Each card is a rounded box in its seasonal color with
   a left-aligned illustration (tulips for spring, pumpkin
   for fall, sun for summer, snowman for winter) and the
   hours text on the right.
   ===================================================== */
.hours-page {
  padding: clamp(3rem, 6vh, 5rem) 0 4rem;
}

.hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 4.5rem);
  row-gap: 22px;
  max-width: 1786px;
  margin: 0 auto;
}

.hours-card {
  border-radius: 21px;
  padding: 1.25rem 1.75rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 1.25rem;
  min-height: 211px;
  box-shadow: 7px 7px 12px rgba(0, 0, 0, .35);
  color: #000;
}

.hours-card.spring { background: #ffccd1; }
.hours-card.summer { background: #b3f4c9; }
.hours-card.fall   { background: #fcab75; }
.hours-card.winter { background: #8fcaff; }

.hours-card .card-art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hours-card .card-art img {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.hours-card .card-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}
.hours-card .card-content.single {
  grid-template-columns: 1fr;
  text-align: center;
}

.hours-block {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #000;
}
.hours-block .hours-title {
  font-weight: 700;
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  color: #000;
}
.hours-block p { margin: 0; }

.hours-card .closed-msg {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
  color: #000;
}

/* On narrow screens: stack the cards into one column,
   then stack each card's illustration above its text so
   nothing gets squeezed. */
@media (max-width: 1100px) {
  .hours-grid { grid-template-columns: 1fr; column-gap: 0; }
}
@media (max-width: 700px) {
  .hours-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hours-card .card-content {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   CONTACT PAGE — Contactpage.pdf
   One big coral rounded panel hosts the whole contact ui.
   Left half: phone/email blurb, white textarea, white
   "SUBMIT" pill, and Facebook + Instagram circles. Right
   half: a white rounded slideshow frame with dots, with a
   white "GIVE US A REVIEW" pill underneath. Heading sits
   centered along the very top of the coral panel.
   ===================================================== */
.contact-page {
  padding: clamp(7rem, 14vh, 11rem) 0 3rem;
}

.contact-panel {
  background: #ff7f50;
  border-radius: clamp(40px, 5vw, 64px);
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.75rem, 4vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  position: relative;
}

.contact-heading {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #000;
  text-align: center;
  margin: 0 0 2rem;
  line-height: 1.2;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
}

.contact-info-col { display: flex; flex-direction: column; gap: 1.25rem; }

.contact-blurb {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.55vw, 1.4rem);
  line-height: 1.45;
  color: #000;
  margin: 0;
}
.contact-blurb a {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}
.contact-blurb a:hover { text-decoration: underline; }

.contact-textarea {
  width: 100%;
  min-height: 170px;
  border: none;
  border-radius: 28px;
  padding: 1.4rem 1.6rem;
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  color: #000;
  resize: vertical;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.contact-textarea::placeholder { color: #c8c8c8; }
.contact-textarea:focus {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* SUBMIT button + social icons share one horizontal row, matching
   the Nutty Putty contact-page layout. The button sits on the left
   and the Facebook / Instagram circles ride on the right. On very
   narrow screens the row wraps so nothing gets squished. */
.contact-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.btn-submit {
  background: #fff;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  padding: .65rem 2.4rem;
  border-radius: 32px;
  border: none;
  cursor: pointer;
  letter-spacing: .06em;
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
  transition: transform .15s, background .15s, color .15s, box-shadow .15s;
}
.btn-submit:hover {
  background: #ffeae0;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
}

.contact-socials {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.contact-socials a {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .15s, box-shadow .15s;
}
.contact-socials a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.24);
}
.contact-socials img { width: 36px; height: 36px; }

.contact-media-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
}

.slideshow-frame {
  width: 100%;
  aspect-ratio: 445 / 280;
  background: #fff;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.btn-review {
  align-self: center;
  background: #fff;
  color: #ff7f50;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  padding: .75rem 2.4rem;
  border-radius: 32px;
  text-decoration: none;
  letter-spacing: .06em;
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
  transition: transform .15s, background .15s, color .15s, box-shadow .15s;
}
.btn-review:hover {
  background: #ffeae0;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
}

/* =====================================================
   SLIDER  (auto-discovers images in /SLIDER/)
   ===================================================== */
.slider-track { position: absolute; inset: 0; }
.slider-slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease-in-out;
  pointer-events: none;
}
.slider-slide.is-active { opacity: 1; pointer-events: auto; }

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.85);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  transition: background .2s, transform .2s, opacity .2s;
  opacity: .85;
}
.slider-arrow:hover, .slider-arrow:focus-visible {
  background: #fff; opacity: 1;
  transform: translateY(-50%) scale(1.08);
  outline: none;
}
.slider-arrow.is-prev { left: .8rem; }
.slider-arrow.is-next { right: .8rem; }
.slider-arrow svg { width: 20px; height: 20px; }

.slideshow-dots {
  position: absolute;
  left: 50%;
  bottom: .9rem;
  transform: translateX(-50%);
  display: flex;
  gap: .65rem;
  z-index: 2;
}
.slideshow-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #1c2540;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: .35;
  transition: opacity .2s, transform .2s;
}
.slideshow-dot:hover { opacity: .65; }
.slideshow-dot.is-active { opacity: 1; transform: scale(1.15); }

.slider-placeholder {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg,#ffd1c4 0%, #ffe9b3 50%, #cafee0 100%);
  color: #ff7f50;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
}

/* ----- Review-screenshot slider on the Contact page -----
   Sits below the form in the left column. We use a wider /
   shorter aspect ratio than the main photo slideshow so the
   review strip doesn't tower over the form. The `is-contain`
   modifier swaps cover→contain so screenshots aren't cropped.
   Picks up images from the /REVIEW-SLIDER/ folder at the site
   root. */
.slideshow-frame.is-contain {
  aspect-ratio: 16 / 5;
  margin-top: .75rem;
}
.slideshow-frame.is-contain .slider-slide {
  object-fit: contain;
  background: #fff;
}

/* =====================================================
   REVIEW PAGE — Reviewpage.pdf
   One big mint-tinted rounded panel hosts everything. The
   internal grid is two columns:

     LEFT  → coral "What do our customer say?" pill at the
             top-left of the panel, then a 5-row star-bar
             chart (FIVE/FOUR/THREE/TWO/ONE), then a
             "Recent Feedbacks" subheading and three empty
             white feedback cards underneath.
     RIGHT → a soft-orange rounded "summary" tile at the
             top-right (big "4.3", row of stars, "50 Ratings"),
             then an "Add a Review" form (Name, Email,
             Comments with mini star-row label, SUBMIT pill).
   ===================================================== */
.review-page {
  padding: clamp(7rem, 14vh, 11rem) 0 3rem;
}

.review-panel {
  background: #e6f9ec;
  border: 2px solid #d8efde;
  border-radius: clamp(36px, 4vw, 56px);
  padding: clamp(2rem, 3.5vw, 3.5rem) clamp(1.75rem, 3.5vw, 3.5rem);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1000px) {
  .review-panel { grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
}

.review-left,
.review-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.review-pill {
  align-self: flex-start;
  background: #ff7f50;
  color: #000;
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  padding: .55rem 1.6rem;
  border-radius: 30px;
  letter-spacing: .01em;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  margin: 0;
}

.rating-bars { width: 100%; }
.rating-bars .bar-row {
  display: grid;
  grid-template-columns: 80px 22px 1fr 36px;
  align-items: center;
  gap: .75rem;
  margin: .45rem 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  color: #000;
}
.rating-bars .bar-row .star {
  display: inline-block;
  font-size: 1.4em;
  line-height: 1;
  color: #f4b400;
  text-align: center;
}
.rating-bars .bar-track {
  height: 14px;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  overflow: hidden;
}
.rating-bars .bar-fill {
  height: 100%;
  background: #f4b400;
  border-radius: 999px;
}
.rating-bars .bar-count { text-align: right; font-weight: 700; }

.review-section-heading {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 700;
  color: #000;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  margin: .5rem 0 .25rem;
}

.review-feed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-card {
  background: #fff;
  border-radius: 22px;
  min-height: 60px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* ----- Right column: rating summary tile ----- */
.rating-summary {
  align-self: flex-end;
  background: #ffe6c4;
  border-radius: 28px;
  padding: 1rem 1.75rem 1.1rem;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  min-width: clamp(220px, 22vw, 320px);
}
.rating-summary .score {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 3.2vw, 2.8rem);
  line-height: 1;
  color: #f4b400;
}
.rating-summary .stars-img {
  width: clamp(140px, 18vw, 200px);
  margin: .25rem auto;
}
.rating-summary .total {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: #000;
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  margin: 0;
}

/* ----- Right column: Add a Review form ----- */
.form-card {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-card .form-heading {
  font-family: 'Open Sans', 'Myriad Pro', sans-serif;
  font-weight: 700;
  color: #000;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  margin: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
}

.form-field label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  margin-bottom: .35rem;
  color: #000;
}
.form-field .label-with-stars {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.form-field .label-with-stars .stars-img {
  width: clamp(110px, 14vw, 160px);
  height: auto;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: .65rem .85rem;
  font: inherit;
  background: #fff;
  color: #000;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 3px solid #f4b400;
  outline-offset: 1px;
}
.form-field textarea {
  min-height: 110px;
  resize: vertical;
}

.form-card .btn-submit {
  align-self: flex-end;
  margin-top: .25rem;
}

.form-success {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  background: #e6ffea;
  border: 1px solid #2f8e4d;
  border-radius: 12px;
  color: #1a5d31;
}
.form-success.is-visible { display: block; }

/* Inline error feedback rendered by main.js when contact-send.ashx
   returns a non-OK response (validation error, SMTP failure, etc.). */
.form-error {
  display: none;
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  background: #fff1e5;
  border-left: 4px solid #c0392b;
  border-radius: 8px;
  color: #882a17;
  font-weight: 600;
}
.form-error.is-visible { display: block; }

/* Honeypot — pushed off-screen so real visitors never see it,
   but bots that auto-fill every field will populate it and the
   server will silently drop the submission. */
.hp-field {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =====================================================
   FOOTER  (light blue band on every page)
   ===================================================== */
.site-footer {
  background: #bee2ff;
  padding: 2.5rem 0 2rem;
  color: #000;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1fr auto; }
}

.footer-friends h2 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  margin: 0 0 .5rem;
  color: #000;
}
.footer-friends ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
}
.footer-friends ul a {
  color: #ff7f50;
  text-decoration: none;
}
.footer-friends ul a:hover { text-decoration: underline; }

.btn-directions {
  display: inline-block;
  background: #ff7f50;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 2.1rem);
  padding: 1rem 3rem;
  border-radius: 36px;
  text-decoration: none;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.btn-directions:hover {
  background: #ff6b3d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
}

.footer-fineprint {
  margin: 1.25rem 0 0;
  font-size: .85rem;
  color: #555;
  text-align: right;
}

/* ----- Home-page footer tightening -----
   On index.html the design wants the bottom of the page to end
   immediately after the copyright fineprint — no airy padding,
   no empty light-blue band running off the bottom of the
   viewport, no ice-cream cone trailing past the footer. So on
   body.home we:
     1. drop the 100vh min-height that forces the footer to the
        bottom of tall screens,
     2. collapse the stage's lower padding and the footer's
        bottom padding so the page's natural height ends right
        after the copyright line,
     3. clip everything below the page's natural bottom edge so
        the absolutely-positioned ice-cream cone (deliberately
        extended past the stage to overlap the footer) is cut
        off flush with the copyright line. The cone's tips
        intentionally disappear so nothing renders below the
        copyright.

   Note on the clipping technique:
     `overflow: hidden` set on <body> alone does NOT clip the
     cone, because the CSS spec propagates body's overflow up
     to the viewport when <html>'s overflow is still `visible`
     — leaving <body> itself effectively `visible`. So we also
     set overflow on <html> via :has() (scoped to the home
     page so the other, scrollable pages are unaffected). For
     good measure we also give <html> the same light-blue
     background as body.home; on viewports taller than the
     page's natural height that ensures the canvas area below
     <body> stays seamlessly light-blue instead of falling
     through to white. */
html:has(body.home) {
  overflow: hidden;
  background: #bee2ff;
}
body.home {
  min-height: 0;
  overflow: hidden;
}
body.home .home-stage { padding-bottom: 0; }
body.home .site-footer { padding: 1.75rem 0 .4rem; }
body.home .footer-fineprint { margin-bottom: 0; }