/* =====================================================================
   ToughLove — shared design system
   Warm, hand-made, dog-food-market feel. Humanized, not machine.
   Modern CSS: custom-property tokens · native nesting · clamp() fluid type
   · auto-fit grids · @container queries · :has() · color-mix() · logical
   props · dark mode · scroll-driven + reduced-motion.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Shantell+Sans:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap');

/* ---------- Tokens ---------- */
:root {
  --cream:    #F5E9D0;   /* oat biscuit background */
  --milk:     #FFFBF2;   /* card / surface */
  --cocoa:    #3B2A1B;   /* warm dark ink */
  --bark:     #6B5031;   /* secondary brown */
  --moss:     #6E7D42;   /* natural green */
  --moss-lt:  #8DA05B;
  --marigold: #EDA324;   /* cheese / treat accent */
  --coral:    #E8743B;   /* tiny pops (tongue, hearts) */
  --line:     color-mix(in oklab, var(--cocoa) 16%, transparent);
  --shadow:   4px 4px 0 var(--cocoa);
  --shadow-sm:3px 3px 0 var(--cocoa);

  --display: "Shantell Sans", system-ui, sans-serif;
  --body:    "Nunito", system-ui, sans-serif;
  --hand:    "Caveat", cursive;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
  --step-2:  clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
  --step-3:  clamp(2.6rem, 1.9rem + 3.2vw, 5rem);

  --gap: clamp(1rem, 0.7rem + 1.4vw, 2rem);
  --section-space: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --wrap: 76rem;
  --radius: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream:  #241A11;
    --milk:   #2E2216;
    --cocoa:  #F5E9D0;
    --bark:   #D8C29A;
    --moss:   #A7B56E;
    --moss-lt:#B9C784;
    --marigold:#F2B03E;
    --line:   color-mix(in oklab, var(--cocoa) 18%, transparent);
    --shadow: 4px 4px 0 color-mix(in oklab, var(--cocoa) 60%, transparent);
    --shadow-sm:3px 3px 0 color-mix(in oklab, var(--cocoa) 60%, transparent);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:where(body){ margin:0; }
:where(img,svg){ max-width:100%; display:block; }
:where(a){ color:inherit; }
:where(button){ font:inherit; cursor:pointer; }

body{
  background:var(--cream);
  color:var(--cocoa);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--display); line-height:1.02; margin:0; font-weight:800; }
h1{ font-size:var(--step-3); letter-spacing:-.01em; }
h2{ font-size:var(--step-2); }
h3{ font-size:var(--step-1); font-weight:700; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

.wrap{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; position:relative; }
.section{ padding-block:var(--section-space); position:relative; }
.center{ text-align:center; }

.eyebrow{
  font-family:var(--hand);
  font-size:1.5rem; font-weight:700; color:var(--moss);
  margin:0 0 .3rem; line-height:1;
}
.lede{ font-size:var(--step-1); line-height:1.4; max-width:46ch; }
.muted{ color:color-mix(in oklab, var(--cocoa) 72%, transparent); }

/* Hand-drawn underline under a word */
.squiggle{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M2 9 C22 3 34 12 52 7 S86 3 100 9 116 7 118 6' fill='none' stroke='%23EDA324' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:100% .55em;
  padding-block-end:.08em;
}

/* Sticker badge */
.sticker{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--display); font-weight:700; font-size:var(--step--1);
  background:var(--marigold); color:var(--cocoa);
  border:2px solid var(--cocoa); border-radius:999px;
  padding:.35rem .8rem; box-shadow:var(--shadow-sm);
  rotate:-3deg;
}
.sticker--moss{ background:var(--moss); color:var(--milk); }
.sticker--milk{ background:var(--milk); }

/* ---------- Accessibility floor ---------- */
:focus-visible{ outline:3px solid var(--moss); outline-offset:3px; border-radius:6px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:60;
  background:var(--cocoa); color:var(--cream);
  padding:.55rem 1rem; border-radius:10px; text-decoration:none;
  transition:top .2s;
}
.skip:focus{ top:1rem; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--marigold); --btn-fg:var(--cocoa);
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:var(--step-0);
  text-decoration:none; padding:.8rem 1.5rem; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:2.5px solid var(--cocoa); box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translate(-2px,-2px) rotate(-1deg); box-shadow:6px 6px 0 var(--cocoa); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--cocoa); }
.btn--dark{ --btn-bg:var(--cocoa); --btn-fg:var(--cream); }
.btn--milk{ --btn-bg:var(--milk); --btn-fg:var(--cocoa); }
.btn--moss{ --btn-bg:var(--moss); --btn-fg:var(--milk); }
.btn--sm{ font-size:var(--step--1); padding:.55rem 1rem; box-shadow:var(--shadow-sm); }

/* ---------- Mascot & doodles ---------- */
.mascot{ width:100%; height:auto; overflow:visible; }
.icon{ width:1.6em; height:1.6em; stroke:currentColor; stroke-width:2; fill:none;
       stroke-linecap:round; stroke-linejoin:round; }
.paw{ width:1.2em; height:1.2em; fill:currentColor; display:inline-block; vertical-align:middle; }

/* soft organic blobs behind sections */
.blob{ position:absolute; z-index:0; opacity:.5; pointer-events:none; filter:blur(2px); }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; padding-block:.7rem;
  transition:padding .2s ease, background .2s ease; }
.site-header.scrolled{ padding-block:.35rem;
  background:color-mix(in oklab, var(--cream) 86%, transparent);
  backdrop-filter:blur(10px);
  border-block-end:2px solid var(--cocoa); }
.nav{ display:flex; align-items:center; gap:var(--gap); }
.brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.brand .mascot{ width:44px; }
.brand b{ font-family:var(--display); font-weight:800; font-size:1.5rem; }
.brand b i{ color:var(--marigold); font-style:normal; }
.nav__links{ display:flex; gap:1.4rem; margin-inline:auto; list-style:none; margin-block:0; padding:0; }
.nav__links a{ text-decoration:none; font-family:var(--display); font-weight:600; padding:.3rem .2rem;
  border-block-end:3px solid transparent; }
.nav__links a:hover,.nav__links a[aria-current="page"]{ border-color:var(--marigold); }
.nav__actions{ display:flex; align-items:center; gap:.7rem; }
.cart-btn{ position:relative; background:var(--milk); border:2.5px solid var(--cocoa);
  border-radius:999px; padding:.45rem .8rem; box-shadow:var(--shadow-sm); text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--display); font-weight:700; }
.cart-count{ background:var(--coral); color:#fff; border:2px solid var(--cocoa); border-radius:999px;
  min-width:1.5em; height:1.5em; display:grid; place-content:center; font-size:.7rem; }
.nav__toggle{ display:none; background:var(--milk); border:2.5px solid var(--cocoa); border-radius:12px;
  width:44px; height:44px; box-shadow:var(--shadow-sm); align-items:center; justify-content:center; }
.nav__toggle svg{ width:22px; height:22px; stroke:var(--cocoa); stroke-width:2.4; }

@media (max-width:800px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:absolute; inset-block-start:calc(100% + .6rem); inset-inline:0; margin-inline:auto;
    width:min(100% - 2.4rem,var(--wrap));
    flex-direction:column; gap:.2rem; background:var(--milk);
    border:2.5px solid var(--cocoa); border-radius:18px; box-shadow:var(--shadow);
    padding:.8rem; display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:.6rem .8rem; border-radius:12px; border:0; }
  .nav__links a:hover{ background:var(--cream); }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(2.5rem,5vw,5rem) var(--section-space); }
.hero__grid{ display:grid; gap:var(--gap); align-items:center; grid-template-columns:1fr; }
@media (min-width:860px){ .hero__grid{ grid-template-columns:1.05fr .95fr; } }
.hero h1{ margin-block:.4rem; }
.hero__hand{ font-family:var(--hand); font-size:1.7rem; color:var(--moss); font-weight:700; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-block-start:1.6rem; }
.hero__proof{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-block-start:1.6rem;
  font-family:var(--display); font-weight:600; font-size:var(--step--1); }
.hero__proof span{ display:inline-flex; align-items:center; gap:.35rem; }
.hero__art{ position:relative; }
.hero__art .disc{ aspect-ratio:1; border-radius:50%; background:var(--marigold);
  border:3px solid var(--cocoa); box-shadow:var(--shadow); display:grid; place-content:center;
  padding:clamp(1.5rem,5vw,3rem); }
.hero__art .disc .mascot{ width:min(78%,320px); margin-inline:auto; }
.hero__art .float{ position:absolute; }
.hero__art .float--1{ inset-block-start:-6%; inset-inline-end:-2%; }
.hero__art .float--2{ inset-block-end:2%; inset-inline-start:-4%; }

/* ---------- Marquee ticker ---------- */
.ticker{ background:var(--cocoa); color:var(--cream); border-block:3px solid var(--cocoa);
  padding-block:.7rem; overflow:hidden; }
.ticker__track{ display:flex; gap:2.5rem; width:max-content;
  animation:scrollx 26s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker span{ font-family:var(--display); font-weight:700; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap; }
.ticker span::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--marigold); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------- Section heads ---------- */
.head{ max-width:54ch; margin-block-end:calc(var(--gap) * 1.3); }
.head.center{ margin-inline:auto; }

/* ---------- Product cards ---------- */
.product-grid{ display:grid; gap:var(--gap); list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.card{
  container-type:inline-size;
  background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:clip; display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
}
.card:hover{ transform:translate(-3px,-3px) rotate(-.6deg); box-shadow:8px 8px 0 var(--cocoa); }
.card:has(.tag--sale){ border-color:var(--marigold); } /* :has() — sale cards get a warm frame */
.card__media{ aspect-ratio:1; border-block-end:2.5px solid var(--cocoa);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab,var(--marigold) 35%,transparent), transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in oklab,var(--cocoa) 6%,transparent) 0 14px, transparent 14px 28px),
    var(--cream);
  display:grid; place-content:center; text-align:center; color:var(--bark);
  font-family:var(--hand); font-size:1.4rem; padding:1rem; position:relative; }
.card__media .tag{ position:absolute; inset-block-start:.7rem; inset-inline-start:.7rem; z-index:1; }
.card__media:has(img){ background:#fff; padding:.4rem; }   /* real product photos sit on a clean tile */
.card__media img{ width:100%; height:100%; object-fit:contain; }
.card__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.card h3{ font-size:var(--step-0); }
.card h3 a{ text-decoration:none; }
.card h3 a:hover{ text-decoration:underline wavy var(--marigold); text-underline-offset:4px; }
.tag{ font-family:var(--display); font-weight:700; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; border:2px solid var(--cocoa); border-radius:999px; padding:.2rem .6rem;
  background:var(--milk); align-self:start; }
.tag--sale{ background:##241a11; }
.price{ font-family:var(--display); display:flex; align-items:baseline; gap:.5rem; margin:0; }
.price ins{ text-decoration:none; font-weight:800; font-size:var(--step-1); }
.price del{ color:var(--bark); font-size:var(--step--1); }
.stock{ font-family:var(--body); font-weight:700; font-size:.78rem; color:var(--moss);
  display:inline-flex; align-items:center; gap:.35rem; }
.stock::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--moss); }
.card .btn{ margin-block-start:auto; justify-content:center; }

/* Container query: roomier card internals when the card itself is wide */
@container (min-width:22rem){ .card__body{ padding:1.4rem; gap:.7rem; } }

/* ---------- Size guide ---------- */
.sizes{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); }
.size{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.3rem; text-align:center; }
.size .dot{ width:clamp(2.2rem,7vw,3.4rem); aspect-ratio:1; margin:0 auto .7rem; border-radius:50%;
  background:var(--marigold); border:2.5px solid var(--cocoa); display:grid; place-content:center;
  font-family:var(--display); font-weight:800; }
.size:nth-child(2) .dot{ background:var(--moss); color:var(--milk); }
.size:nth-child(3) .dot{ background:var(--coral); color:var(--milk); }
.size h3{ margin-block-end:.2rem; }
.size .lbs{ font-family:var(--display); font-weight:700; color:var(--moss); }
.size .breeds{ color:var(--bark); font-size:var(--step--1); margin-block-start:.3rem; }

/* ---------- Dark band (story / cta) ---------- */
.band{ background:var(--cocoa); color:var(--cream); }
.band .eyebrow{ color:var(--marigold); }
.band .muted{ color:color-mix(in oklab,var(--cream) 76%,transparent); }
.band__grid{ display:grid; gap:calc(var(--gap) * 1.5); align-items:center; grid-template-columns:1fr; }
@media (min-width:860px){ .band__grid{ grid-template-columns:1fr 1fr; } }
.band__art{ aspect-ratio:4/5; border-radius:var(--radius); border:3px solid var(--marigold);
  background:color-mix(in oklab,var(--cream) 7%,var(--cocoa)); display:grid; place-content:center;
  color:color-mix(in oklab,var(--cream) 55%,transparent); font-family:var(--hand); font-size:1.5rem;
  text-align:center; padding:1.5rem; }
.stats{ display:flex; flex-wrap:wrap; gap:2rem; margin-block-start:1.8rem; padding:0; }
.stat{ display:flex; flex-direction:column-reverse; }
.stat dt{ font-family:var(--hand); font-size:1.3rem; color:var(--marigold); }
.stat dd{ margin:0; font-family:var(--display); font-weight:800; font-size:var(--step-2); line-height:1; }

/* ---------- Ingredients ---------- */
.ing-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); }
.ing{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.4rem; text-align:center; }
.ing .ic{ width:3.4rem; aspect-ratio:1; margin:0 auto .7rem; border-radius:50%; display:grid;
  place-content:center; background:var(--cream); border:2.5px solid var(--cocoa); color:var(--moss); }
.ing .ic svg{ width:1.9rem; height:1.9rem; }
.ing h3{ font-size:var(--step-0); }
.nutri{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:clip; }
.nutri__head{ background:var(--cocoa); color:var(--cream); padding:.8rem 1.2rem; font-family:var(--display);
  font-weight:800; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.nutri__head small{ font-family:var(--hand); font-size:1.1rem; color:var(--marigold); }
.nutri dl{ margin:0; }
.nutri dl>div{ display:flex; justify-content:space-between; gap:1rem; padding:.85rem 1.2rem;
  border-block-end:1px solid var(--line); }
.nutri dl>div:last-child{ border-block-end:0; }
.nutri dt{ font-weight:700; }
.nutri dd{ margin:0; font-family:var(--display); font-weight:800; }

/* ---------- Feature grid ---------- */
.features{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
.feature{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.4rem; transition:transform .15s ease; }
.feature:hover{ transform:rotate(-1deg); }
.feature .ic{ width:3rem; aspect-ratio:1; border-radius:14px; display:grid; place-content:center;
  background:var(--marigold); border:2.5px solid var(--cocoa); margin-block-end:.8rem; color:var(--cocoa); }
.feature:nth-child(3n+2) .ic{ background:var(--moss); color:var(--milk); }
.feature:nth-child(3n) .ic{ background:var(--coral); color:var(--milk); }
.feature .ic svg{ width:1.7rem; height:1.7rem; }
.feature h3{ font-size:var(--step-0); margin-block-end:.3rem; }
.feature p{ color:var(--bark); font-size:var(--step--1); }

/* ---------- Steps (brand story) ---------- */
.steps{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); counter-reset:step; }
.step{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.5rem 1.3rem; position:relative; }
.step::before{ counter-increment:step; content:"0" counter(step);
  font-family:var(--display); font-weight:800; font-size:2rem; color:var(--marigold);
  -webkit-text-stroke:1.5px var(--cocoa); }
.step h3{ font-size:var(--step-0); margin-block:.4rem .3rem; }
.step p{ color:var(--bark); font-size:var(--step--1); }

/* ---------- Artisans ---------- */
.people{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); }
.person{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:clip; }
.person__photo{ aspect-ratio:4/3; border-block-end:2.5px solid var(--cocoa);
  background:radial-gradient(circle at 50% 40%, color-mix(in oklab,var(--moss) 30%,transparent),transparent 60%),var(--cream);
  display:grid; place-content:center; color:var(--bark); font-family:var(--hand); font-size:1.3rem; }
.person__body{ padding:1.2rem; }
.person h3{ font-size:var(--step-1); }
.person .role{ font-family:var(--hand); font-size:1.3rem; color:var(--moss); }
.person p{ color:var(--bark); font-size:var(--step--1); margin-block-start:.5rem; }

/* ---------- Reviews carousel ---------- */
.reviews{ position:relative; }
.reviews__track{ display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-block-end:.8rem; scrollbar-width:none; cursor:grab; }
.reviews__track::-webkit-scrollbar{ display:none; }
.reviews__track.dragging{ cursor:grabbing; scroll-snap-type:none; }
.review{ scroll-snap-align:start; flex:0 0 min(88%,22rem);
  background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.4rem; }
.review paw-rating{ margin-block-end:.6rem; }
.review blockquote{ margin:0 0 1rem; font-size:var(--step-0); }
.review .who{ display:flex; align-items:center; gap:.7rem; }
.review .who .av{ width:2.6rem; aspect-ratio:1; border-radius:50%; background:var(--marigold);
  border:2.5px solid var(--cocoa); display:grid; place-content:center; font-family:var(--display);
  font-weight:800; }
.review .who b{ font-family:var(--display); }
.review .who small{ display:block; color:var(--moss); font-family:var(--hand); font-size:1.05rem; }
.reviews__nav{ display:flex; gap:.6rem; justify-content:flex-end; margin-block-start:1rem; }
.reviews__nav button{ width:3rem; aspect-ratio:1; border-radius:50%; background:var(--milk);
  border:2.5px solid var(--cocoa); box-shadow:var(--shadow-sm); display:grid; place-content:center; }
.reviews__nav button:hover{ background:var(--marigold); }
.reviews__nav svg{ width:1.3rem; height:1.3rem; stroke:var(--cocoa); stroke-width:2.4; fill:none; }

/* paw rating (custom element) */
paw-rating{ display:inline-flex; gap:.15rem; }
.paw-ic{ width:1.15rem; height:1.15rem; color:color-mix(in oklab,var(--cocoa) 22%,transparent); }
.paw-ic.on{ color:var(--marigold); }
.paw-ic svg{ width:100%; height:100%; fill:currentColor; }

/* ---------- FAQ ---------- */
.faq{ max-width:48rem; margin-inline:auto; }
.faq details{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:16px;
  box-shadow:var(--shadow-sm); margin-block-end:.9rem; overflow:clip; }
.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-family:var(--display);
  font-weight:700; font-size:var(--step-0); display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--display); font-weight:800; color:var(--marigold);
  font-size:1.5rem; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 1.3rem 1.2rem; color:var(--bark); }

/* ---------- CTA ---------- */
.cta{ text-align:center; border-radius:var(--radius); padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;
  background:var(--marigold); border:3px solid var(--cocoa); box-shadow:var(--shadow); position:relative; }
.cta h2{ margin-block-end:.6rem; }
.cta .hand{ font-family:var(--hand); font-size:1.6rem; color:var(--cocoa); }

/* ---------- Contact ---------- */
.contact__grid{ display:grid; gap:calc(var(--gap) * 1.4); grid-template-columns:1fr; align-items:start; }
@media (min-width:820px){ .contact__grid{ grid-template-columns:1.3fr .7fr; } }
.form{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(1.3rem,4vw,2rem); }
.field{ margin-block-end:1.1rem; }
.field label{ display:block; font-family:var(--display); font-weight:700; margin-block-end:.4rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.8rem 1rem; font:inherit; color:var(--cocoa);
  background:var(--cream); border:2.5px solid var(--cocoa); border-radius:12px;
  accent-color:var(--marigold);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; box-shadow:var(--shadow-sm); }
.field textarea{ min-height:8rem; resize:vertical; }
.field .err{ color:var(--coral); font-weight:700; font-size:var(--step--1); margin-block-start:.3rem; display:none; }
.field[data-invalid] input,.field[data-invalid] select,.field[data-invalid] textarea{ border-color:var(--coral); }
.field[data-invalid] .err{ display:block; }
.form__note{ font-family:var(--hand); font-size:1.2rem; color:var(--moss); margin-block-start:.6rem; }
.form__ok{ display:none; background:var(--moss); color:var(--milk); border:2.5px solid var(--cocoa);
  border-radius:14px; padding:1rem 1.2rem; font-family:var(--display); font-weight:700; box-shadow:var(--shadow-sm); }
.form__ok.show{ display:block; }
.info{ display:grid; gap:1rem; }
.info .card-lite{ background:var(--milk); border:2.5px solid var(--cocoa); border-radius:16px;
  box-shadow:var(--shadow-sm); padding:1.2rem; }
.info h3{ font-size:var(--step-0); margin-block-end:.3rem; display:flex; align-items:center; gap:.5rem; }
.info a{ color:var(--moss); font-weight:700; }

/* ---------- Newsletter + footer ---------- */
.site-footer{ background:var(--cocoa); color:var(--cream); margin-block-start:var(--section-space); }
.footer__grid{ display:grid; gap:calc(var(--gap) * 1.3); grid-template-columns:1fr; }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.4fr 1fr; align-items:center; } }
.footer__brand{ display:flex; align-items:center; gap:.7rem; margin-block-end:.6rem; }
.footer__brand .mascot{ width:52px; }
.footer__brand b{ font-family:var(--display); font-weight:800; font-size:1.6rem; }
.footer__brand b i{ color:var(--marigold); font-style:normal; }
.newsletter label{ display:block; font-family:var(--display); font-weight:700; margin-block-end:.5rem;
  color:var(--cream); }
.newsletter__row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.newsletter input{ flex:1 1 12rem; padding:.85rem 1rem; font:inherit; color:var(--cream);
  background:transparent; border:2.5px solid var(--marigold); border-radius:999px; accent-color:var(--marigold); }
.newsletter input::placeholder{ color:color-mix(in oklab,var(--cream) 55%,transparent); }
.newsletter .msg{ font-family:var(--hand); font-size:1.2rem; color:var(--marigold); margin-block-start:.5rem;
  min-height:1.2rem; }
.pay{ list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.pay li{ display:inline-flex; }
.pay img{ height:30px; width:auto; display:block; }
.footer__legal{ border-block-start:2px solid color-mix(in oklab,var(--cream) 20%,transparent);
  margin-block-start:var(--gap); padding-block:1.3rem; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem; font-family:var(--display); font-weight:600; font-size:var(--step--1); }
.footer__legal a{ color:var(--marigold); }

/* ---------- Motion ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .ticker__track{ animation:none; }
}

/* Cross-document view transitions (works when served over http[s], same-origin) */
@view-transition{ navigation:auto; }

/* Toast */
.toast{ position:fixed; inset-block-end:1.2rem; inset-inline:0; margin-inline:auto; width:max-content;
  max-width:90vw; background:var(--cocoa); color:var(--cream); border:2.5px solid var(--marigold);
  border-radius:999px; padding:.7rem 1.3rem; box-shadow:var(--shadow); font-family:var(--display);
  font-weight:700; z-index:80; transform:translateY(150%); transition:transform .3s ease;
  display:flex; align-items:center; gap:.5rem; }
.toast.show{ transform:none; }