/* Hungry Paws website — static; fonts are served from this site (Fredoka, OFL), nothing is loaded from others.
   Colours follow the game: cream cards with orange frames, candy-green buttons, warm wood, a spring meadow. */
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/Fredoka-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/Fredoka-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/Fredoka-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
:root {
  --wood-deep: #6E3F1C; --wood: #A86A3C; --wood-top: #C48652; --wood-light: #E8C08C;
  --cream: #FFF8EC; --card: #FFF1D6; --line: #F2D9AE;
  --orange: #F28A2E; --orange-deep: #D9661B;
  --green: #5DB33C; --green-top: #8BD866; --green-lip: #3E8A24;
  --sky: #CDEBF7; --meadow: #A6D982; --meadow-deep: #5E9E45;
  --ink: #3B2614; --ink-soft: #6E5440;
  --radius: 22px;
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-weight: 500; color: var(--ink); background: var(--cream); line-height: 1.55; font-size: 17px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--wood-deep); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: 8px 12px; border-radius: 10px; z-index: 10; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(160%) blur(12px);
  background: color-mix(in srgb, var(--wood-deep) 90%, transparent); box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.site-head .wrap { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: .2px; }
.brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { color: #FFEBD2; text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--wood-light); }

/* ---------- hero: a spring meadow, the game on two phones, the guests leaning over the table edge ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky) 0%, #E6F5EA 46%, var(--meadow) 100%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-block: 60px 0; }
.hero .wrap > div:first-child { padding-bottom: 140px; }   /* the CTA stays clear of the guests leaning over the table edge */
.eyebrow { display: inline-block; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; font-size: 13px;
  color: #fff; background: var(--orange); padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 -3px 0 var(--orange-deep); }
.hero h1 { font-size: clamp(40px, 6.2vw, 68px); line-height: 1.02; margin: 18px 0 14px; color: var(--wood-deep); letter-spacing: -.5px; }
.hero h1 .sub { display: block; font-size: .5em; line-height: 1.2; color: var(--orange-deep); letter-spacing: 0; margin-top: 8px; }
.hero p.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-soft); max-width: 32em; margin: 0 0 26px; }
.cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; background: var(--green); color: #fff; border-radius: 16px; padding: 12px 20px;
  font-weight: 700; text-decoration: none; box-shadow: inset 0 4px 0 var(--green-top), 0 5px 0 var(--green-lip); }
a.store:hover { color: #fff; filter: brightness(1.05); }
.store small { display: block; font-weight: 600; font-size: 12px; opacity: .9; letter-spacing: .3px; }
.store .dot { width: 10px; height: 10px; border-radius: 50%; background: #FFE58A; box-shadow: 0 0 0 4px rgba(255,229,138,.35); }
.phones { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 560px; }
.phone { width: 250px; border-radius: 40px; padding: 9px; background: #2A1A0E; box-shadow: 0 30px 60px rgba(60,35,10,.35), inset 0 0 0 2px #4A3020; }
.phone img { border-radius: 32px; }
.phone.back { transform: rotate(-7deg) translate(36px, -30px); z-index: 1; width: 226px; }
.phone.front { transform: rotate(4deg) translate(-26px, -6px); z-index: 2; }
/* the guests sit on the wooden table edge and sway a little, like guests waiting for their food */
.table-edge { position: relative; z-index: 3; height: 64px; margin-top: -30px;
  background: linear-gradient(180deg, var(--wood-top) 0 12px, var(--wood) 12px 100%); box-shadow: 0 -2px 0 rgba(0,0,0,.06); }
.guest-row { position: absolute; left: 0; right: 0; bottom: calc(100% - 12px); display: flex; justify-content: center; gap: 6px;
  pointer-events: none; }
.guest-row img { height: var(--h, 108px); width: auto; transform-origin: 50% 100%; filter: drop-shadow(0 4px 3px rgba(70,40,15,.28));
  animation: sway 3.4s ease-in-out infinite; }
.guest-row img:nth-child(3n+1) { animation-delay: -1.1s; } .guest-row img:nth-child(3n+2) { animation-delay: -2.3s; animation-duration: 3.9s; }
.guest-row img:nth-child(4n) { animation-duration: 3s; }
@keyframes sway { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-4px) rotate(-2deg); }
  60% { transform: translateY(0) rotate(1.5deg); } }

/* ---------- sections ---------- */
section { padding-block: 76px; }
.sec-title { text-align: center; margin: 0 auto 10px; font-size: clamp(30px, 4vw, 42px); color: var(--wood-deep); letter-spacing: -.3px; }
.sec-lead { text-align: center; color: var(--ink-soft); max-width: 40em; margin: 0 auto 40px; font-size: 18px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step { background: #fff; border-radius: var(--radius); padding: 20px 20px 24px; border: 3px solid var(--orange); box-shadow: 0 6px 0 var(--line); }
.step .shot { border-radius: 16px; overflow: hidden; aspect-ratio: 2 / 3; background: var(--card); margin-bottom: 16px; }
.step .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.step .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); flex: 0 0 auto;
  color: #fff; font-weight: 700; margin-right: 10px; box-shadow: inset 0 3px 0 var(--green-top), inset 0 -3px 0 var(--green-lip); }
.step h3 { display: flex; align-items: center; margin: 0 0 8px; font-size: 21px; color: var(--ink); }
.step p { margin: 0; color: var(--ink-soft); }

.band { background: linear-gradient(180deg, #FFF0D6, #FFF8EC); border-block: 2px solid var(--line); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: #fff; border-radius: var(--radius); padding: 20px 22px 22px; border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line); }
.feature .ico { width: 64px; height: 64px; display: grid; place-items: center; background: var(--card); border-radius: 18px; }
.feature .ico img { width: 50px; height: 50px; object-fit: contain; }
.feature h3 { margin: 14px 0 6px; font-size: 20px; color: var(--wood-deep); }
.feature p { margin: 0; color: var(--ink-soft); }

/* the strip runs to the page edge (the wrap's 20px gutter is taken back), so pictures scroll in from the side */
.strip { display: flex; gap: 18px; overflow-x: auto; margin-inline: -20px; padding: 16px 20px 40px; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; }
.place { flex: 0 0 auto; width: clamp(200px, 60vw, 240px); margin: 0; background: #fff; padding: 10px 10px 36px; border-radius: 14px;
  border: 3px solid var(--orange); box-shadow: 0 8px 18px rgba(110,63,28,.16); scroll-snap-align: start; position: relative; }
.place img { border-radius: 8px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.place span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-weight: 600; font-size: 14px; color: var(--wood-deep); }

.guests { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 6px; }
.guest { width: 128px; margin: 0; text-align: center; }
.guest .seat { height: 150px; display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(180deg, transparent 0 86%, var(--wood-top) 86% 90%, var(--wood) 90% 100%); border-radius: 0 0 10px 10px; }
.guest img { height: var(--h, 120px); max-height: 140px; max-width: 100%; width: auto; object-fit: contain; margin-bottom: 9px; filter: drop-shadow(0 3px 2px rgba(70,40,15,.22)); }
.guest figcaption { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-top: 6px; }

.shots { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 22px; scroll-snap-type: x mandatory; }
.shots img { width: 230px; flex: 0 0 auto; border-radius: 22px; box-shadow: 0 12px 30px rgba(110,63,28,.22); scroll-snap-align: start; }

.chef-band { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: center; background: var(--card);
  border: 3px solid var(--orange); border-radius: 28px; padding: 24px 32px; }
.chef-band h2 { margin: 0 0 8px; color: var(--wood-deep); font-size: 28px; }
.chef-band p { margin: 0; color: var(--ink-soft); }
.chef-band .chefs { display: flex; align-items: flex-end; }
.chef-band .chefs img { width: 120px; } .chef-band .chefs img + img { width: 80px; margin-left: -22px; }

/* ---------- legal / support ---------- */
.page-head { background: linear-gradient(180deg, var(--wood-deep), #8A5530); color: #fff; padding-block: 56px 46px; }
.page-head h1 { margin: 0 0 8px; font-size: clamp(32px, 5vw, 46px); }
.page-head p { margin: 0; color: #FCE6CC; }
.legal { padding-block: 44px 70px; }
.legal h2 { color: var(--wood-deep); font-size: 24px; margin: 38px 0 10px; }
.legal h3 { font-size: 19px; margin: 24px 0 6px; }
.legal p, .legal li { color: #4A3424; }
.legal ul { padding-left: 1.2em; }
.legal .summary { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 16px 20px; font-weight: 600; color: #5E4A33; }
.faq details { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 14px 18px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--wood-deep); }
.faq details p { margin: 10px 0 2px; color: #4A3424; }
.contact-card { background: var(--card); border: 2px solid var(--line); border-radius: 22px; padding: 22px 24px; margin-top: 26px; }
.contact-card a { font-weight: 700; font-size: 19px; }

/* ---------- footer ---------- */
.site-foot { background: var(--wood-deep); color: #F4DDC2; padding-block: 40px; font-size: 15px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: space-between; align-items: flex-start; }
.site-foot a { color: #fff; text-decoration: none; font-weight: 600; }
.site-foot a:hover { color: var(--wood-light); }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot .op { max-width: 34em; color: #E2C6A6; font-size: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; padding-top: 44px; }
  .hero .wrap > div:first-child { padding-bottom: 0; }
  .hero p.lead { margin-inline: auto; }
  .cta { justify-content: center; }
  .phones { min-height: 480px; }
  .phone { width: 210px; } .phone.back { width: 190px; }
  .steps, .features { grid-template-columns: 1fr 1fr; }
  .guest-row img { height: calc(var(--h, 108px) * .8); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav { gap: 12px; } .nav a { font-size: 14px; }
  .nav .hide-s { display: none; }
  .steps, .features { grid-template-columns: 1fr; }
  .phones { min-height: 420px; }
  .phone { width: 180px; padding: 7px; border-radius: 32px; } .phone img { border-radius: 26px; }
  .phone.back { width: 160px; transform: rotate(-7deg) translate(26px, -20px); }
  .guest-row { justify-content: flex-start; overflow: hidden; }
  .guest-row img { height: calc(var(--h, 108px) * .58); }
  .guest-row { gap: 2px; }
  .table-edge { height: 48px; }
  .chef-band { grid-template-columns: 1fr; text-align: center; padding: 22px; }
  .chef-band .chefs { justify-content: center; }
  .guest { width: 104px; } .guest .seat { height: 124px; } .guest img { height: calc(var(--h, 120px) * .8); max-height: 108px; }
  section { padding-block: 56px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .guest-row img { animation: none; } }