/* ============================================================
   DogBake — Premium Polish Layer
   Loaded after the app bundle CSS. Overrides only visual
   surface: warmth, depth, hierarchy, micro-motion.
   Brand: warm · joyful · community-led · premium positioning
   ============================================================ */

:root {
  --warm-white: #fffdf8;
  --cream-deep: #fdf4e4;
  --ink-warm: #5c4632;            /* cocoa-toned supporting text */
  --line-warm: #ecd9b8;
  --shadow-sm: 0 1px 2px rgba(74, 42, 27, .05), 0 4px 14px rgba(74, 42, 27, .06);
  --shadow-md: 0 2px 6px rgba(74, 42, 27, .06), 0 16px 40px rgba(74, 42, 27, .1);
  --shadow-blue: 0 2px 8px rgba(0, 87, 194, .12), 0 14px 36px rgba(0, 87, 194, .16);
}

/* ---------- Canvas: warm the whole page ---------- */

body {
  background: var(--warm-white);
}

.story-intro,
.manifesto,
.customize,
.cake-feature {
  background: var(--warm-white);
}

::selection {
  background: var(--biscuit);
  color: var(--cocoa);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Header: warmer glass, finer line ---------- */

.site-header {
  background: rgba(255, 253, 248, .88);
  border-bottom: 1px solid rgba(11, 142, 253, .14);
  box-shadow: 0 1px 0 rgba(74, 42, 27, .03);
}

.header-order {
  box-shadow: var(--shadow-blue);
}

.header-order:hover {
  background: var(--cream);
  border-color: var(--deep);
}

/* ---------- Menu band: cream, like the inside of a bakery box ---------- */

.menu-section {
  background: linear-gradient(180deg, var(--warm-white) 0%, var(--cream) 14%, var(--cream) 86%, var(--warm-white) 100%);
}

/* Category cards: from flat grid cells to soft cards */

.category-grid {
  border-block: 0;
  gap: 1rem;
}

.category-card {
  background: var(--white);
  border: 1px solid rgba(11, 142, 253, .16) !important;
  border-radius: 1.4rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}

.category-card:hover {
  background: var(--blue);
  box-shadow: var(--shadow-blue);
}

.category-card:last-child {
  background: var(--deep);
  border-color: var(--deep) !important;
}

.category-card p {
  color: var(--ink-warm);
  transition: color .45s var(--ease);
}

.category-card:hover p,
.category-card:last-child p {
  color: rgba(255, 255, 255, .82);
}

/* ---------- Product cards: depth, warmth, tactile hover ---------- */

.product-image {
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .45s var(--ease);
}

.product-card.contain .product-image {
  background: var(--cream-deep);
}

.product-card:hover .product-image {
  box-shadow: var(--shadow-md);
}

.product-card:hover .product-image img {
  transform: scale(1.04);
}

/* "Best seller" & co. as biscuit chips instead of bare caps */

.product-tag:not(:empty) {
  display: inline-block;
  background: rgba(246, 200, 117, .32);
  color: #7c5212;
  border-radius: 99px;
  padding: .38rem .7rem .34rem;
  letter-spacing: .11em;
}

/* Supporting copy: warm ink instead of wall-to-wall blue */

.product-content > p:not(.product-tag),
.product-group-header p,
.mobile-product-description {
  color: var(--ink-warm);
}

/* Prices: steady, tabular, quietly confident */

.product-meta strong,
.mobile-product-copy > div strong,
.category-card strong {
  font-variant-numeric: tabular-nums;
}

.product-meta {
  border-top: 1px solid var(--line-warm);
}

/* Order pill: solid, dimensional, alive on hover */

.product-order {
  color: var(--white);
  background: var(--deep);
  border-color: var(--deep);
  box-shadow: var(--shadow-blue);
  transition: color .35s var(--ease), background .35s var(--ease),
              padding .35s var(--ease), box-shadow .35s var(--ease),
              translate .35s var(--ease);
}

.product-order:hover {
  background: var(--blue);
  border-color: var(--blue);
  translate: 0 -2px;
  box-shadow: 0 4px 12px rgba(0, 87, 194, .2), 0 18px 44px rgba(0, 87, 194, .22);
}

/* Mobile catalog gets the same warmth */

.mobile-product-image {
  background: var(--cream-deep);
}

.mobile-product-copy > div {
  border-top: 1px solid var(--line-warm);
}

/* ---------- Story & stage ---------- */

.story-image {
  border: 1px solid var(--line-warm);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-md);
}

.treat-stage {
  border-radius: 1.5rem;
  background: radial-gradient(120% 140% at 12% 0%, #2ba1ff 0%, var(--blue) 52%, #0071e0 100%);
}

/* ---------- Marquee: cream ribbon ---------- */

.marquee {
  background: var(--cream);
  border-block: 1px solid var(--line-warm);
}

/* ---------- Promise: rich deep-blue slab with soft edges ---------- */

.promise {
  background: radial-gradient(130% 150% at 15% 0%, #0a66d8 0%, var(--deep) 48%, #003c8f 100%);
}

@media (width > 700px) {
  .promise {
    border-radius: 1.5rem;
    margin: 0 .7rem;
  }
}

.promise-list article {
  border-top: 1px solid rgba(255, 255, 255, .32);
}

.promise-list p {
  color: rgba(255, 255, 255, .85);
}

/* ---------- Cake feature & customize ---------- */

.cake-gallery {
  background: radial-gradient(120% 140% at 80% 10%, #2ba1ff 0%, var(--blue) 55%, #0071e0 100%);
}

.cake-copy > a {
  box-shadow: var(--shadow-blue);
}

.cake-copy > a:hover {
  background: var(--cream);
}

.custom-options span {
  border-color: rgba(11, 142, 253, .35);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.custom-options span:nth-child(2n) {
  background: var(--deep);
  border-color: var(--deep);
  box-shadow: var(--shadow-blue);
}

/* ---------- Footer: gradient depth instead of flat slab ---------- */

footer {
  background: linear-gradient(180deg, var(--deep) 0%, #00378a 100%);
}

/* ---------- Rhythm: trim the emptiest desktop gaps ---------- */

@media (width > 700px) {
  .product-groups { gap: clamp(6rem, 9vw, 10rem); }
  .product-heading { margin-block: clamp(6rem, 9vw, 10rem) 5rem; }
  .menu-section,
  .customize { padding-block: clamp(6.5rem, 9vw, 10rem); }
  .manifesto { padding-block: clamp(6.5rem, 10vw, 11rem); }
}

/* ============================================================
   MOBILE FIRST — the .mobile-catalog accordion is the primary
   shopping experience. Same warmth & depth as desktop.
   ============================================================ */

/* Accordion: warm hairlines, bakery-box feel */

.mobile-catalog,
.mobile-category {
  border-color: rgba(74, 42, 27, .18);
}

.mobile-category-title small,
.mobile-category-note {
  color: var(--ink-warm);
}

.mobile-category-toggle {
  box-shadow: var(--shadow-blue);
}

.mobile-category[open] .mobile-category-toggle {
  color: #7c5212;
  background: rgba(246, 200, 117, .42);
  box-shadow: none;
}

/* Product cards: warm shadow + border instead of cold blue */

.mobile-product {
  border: 1px solid var(--line-warm);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-md);
}

/* Tags (BEST SELLER, DOG-SAFE CAROB…) as biscuit chips */

.mobile-product-copy > p:not(.mobile-product-description) {
  align-self: flex-start;
  background: rgba(246, 200, 117, .32);
  color: #7c5212;
  border-radius: 99px;
  padding: .34rem .65rem .3rem;
  letter-spacing: .1em;
}

/* ORDER button: dimensional, comfortable, alive under the thumb */

.mobile-product-copy > a {
  min-height: 48px;
  padding: .65rem .85rem;
  font-size: .72rem;
  box-shadow: var(--shadow-blue);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

/* Press feedback on touch (Apple HIG: respond within 100ms) */

@media (hover: none) {
  .mobile-product-copy > a:active,
  .product-order:active,
  .cake-copy > a:active,
  .header-order:active,
  .hero-scroll-cue:active {
    transform: scale(.97);
    transition-duration: .08s;
  }
}

/* Promise slab: rounded card on mobile too (matches treat-stage) */

@media (width <= 700px) {
  .promise {
    border-radius: 1.25rem;
    margin: 0 .5rem;
  }
}

/* ============================================================
   HERO LOGO — premium entrance, breath & sheen
   Two tiers:
   · full motion  → rise-in, slow breathe, light sweep on the glyph
   · reduced      → opacity-only fade + soft glow (still loads,
                    no spatial movement — safe for vestibular users)
   ============================================================ */

/* NOTE: never animate .hero-logo-stage itself — an animation there
   creates a stacking context that isolates the logo's blend pieces
   from the blue scene and washes the logo out. All motion lives on
   pseudo-element overlays instead. */

@keyframes db-logo-glow {
  0%, 100% { opacity: .14; }
  50%      { opacity: .3; }
}

@keyframes db-logo-glimmer {
  0%, 100% { opacity: 0; }
  50%      { opacity: .4; }
}

/* Soft halo behind the logo — pulses gently, pure opacity */

.hero-logo-stage::before {
  content: "";
  position: absolute;
  inset: -18% -8%;
  z-index: 0;
  background: radial-gradient(52% 62% at 50% 50%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: .14;
  animation: db-logo-glow 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

/* Light sweep on the glyph.
   The bundle already ships a perfectly aligned masked container
   (.hero-logo-mask) — we ride inside it instead of rebuilding it.
   Desktop already sweeps on its own (logo-sheen-pass, 6.4s loop).
   Mobile binds its sheen to scroll position, so at rest nothing
   moves — this adds a time-based sweep on load for phones. */

@keyframes db-sheen-pass {
  0%        { opacity: 0; transform: skew(-13deg) translateX(-160%); }
  4%        { opacity: .9; }
  18%       { opacity: .9; transform: skew(-13deg) translateX(800%); }
  22%, 100% { opacity: 0; transform: skew(-13deg) translateX(800%); }
}

@media (width <= 700px) {
  .hero-logo-mask::after {
    content: "";
    position: absolute;
    inset: -35% auto -35% -25%;
    width: 13%;
    pointer-events: none;
    background: linear-gradient(90deg, #0000, #ffffffd6 42%, #56b2f68c 62%, #0000);
    transform: skew(-13deg) translateX(-160%);
    animation: db-sheen-pass 6.4s var(--ease) 1.6s infinite;
  }
}

/* Reduced-motion note: per the owner's explicit decision, the same
   animations run in all motion modes. The halo/sheen live on pseudo
   elements the bundle's reduce kill-list never touches, and mask
   re-enabling is handled in the width-scoped blocks below. */

/* ============================================================
   ROUND 3 — luminous hero, elegant arrows, living marquee
   References: depth & restraint (Apple), single light source,
   motion with meaning, affordance without clutter.
   ============================================================ */

/* ---------- Hero: one light source, breathing, alive ---------- */

.hero-brand-scene {
  background: radial-gradient(120% 100% at 20% 0%,
    #38a6ff 0%, #0b8efd 42%, #0678ec 74%, #005fd3 100%);
}

/* calmer dot grid — texture, not noise */
.hero-brand-scene:before { opacity: .07; }

/* Runs in ALL motion modes (owner's explicit choice): keyframes use
   translate/rotate/scale longhands so the bundle's reduced-motion
   `transform:none!important` cannot cancel them. */

@keyframes db-scene-in {
  from { opacity: 0; scale: 1.02; }
  to   { opacity: 1; scale: 1; }
}

@keyframes db-ellipse-drift {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

.hero-brand-scene { animation: db-scene-in 1s var(--ease) both; }
.hero-brand-scene:after { animation: db-ellipse-drift 90s linear infinite; }

/* Treat photos pop in with a staggered, bouncy entrance */

@keyframes db-pop {
  from { opacity: 0; translate: 0 16px; scale: .82; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

.hero-treat-one   { animation: db-pop .75s cubic-bezier(.34, 1.56, .64, 1) .35s both; }
.hero-treat-two   { animation: db-pop .75s cubic-bezier(.34, 1.56, .64, 1) .55s both; }
.hero-treat-three { animation: db-pop .75s cubic-bezier(.34, 1.56, .64, 1) .75s both; }

/* stronger breathing halo behind the logo (redefines earlier keyframes) */

.hero-logo-stage::before { inset: -28% -12%; }

@keyframes db-logo-glow {
  0%, 100% { opacity: .16; }
  50%      { opacity: .34; }
}

/* brighter, more present sheen on phones — all motion modes */

@media (width <= 700px) {
  .hero-logo-mask { display: block !important; opacity: .9 !important; }
  .hero-logo-mask::after {
    width: 16%;
    background: linear-gradient(90deg, #0000, #fffffff0 42%, #7ec4ffb0 62%, #0000);
    animation-duration: 5.4s;
    animation-delay: 1.1s;
  }
}

/* desktop with reduced motion: the bundle kills its own sheen —
   provide ours so the logo still gets the light pass */

@media (width > 700px) and (prefers-reduced-motion: reduce) {
  .hero-logo-mask { display: block !important; opacity: .9 !important; }
  .hero-logo-mask .logo-orb { display: none !important; }
  .hero-logo-mask::after {
    content: "";
    position: absolute;
    inset: -35% auto -35% -25%;
    width: 13%;
    pointer-events: none;
    background: linear-gradient(90deg, #0000, #ffffffd6 42%, #56b2f68c 62%, #0000);
    animation: db-sheen-pass 6.4s var(--ease) 1.6s infinite;
  }
}

@keyframes db-sheen-pass {
  0%        { opacity: 0; transform: skew(-13deg) translateX(-160%); }
  5%        { opacity: .95; }
  20%       { opacity: .95; transform: skew(-13deg) translateX(780%); }
  24%, 100% { opacity: 0; transform: skew(-13deg) translateX(780%); }
}

/* treats float gently — every device, every motion mode
   (translate/rotate longhands dodge the reduce transform kill) */

@keyframes db-float-a {
  from { translate: 0 0; rotate: -1.4deg; }
  to   { translate: 0 -9px; rotate: 1.2deg; }
}

@keyframes db-float-b {
  from { translate: 0 -6px; rotate: 1.4deg; }
  to   { translate: 0 4px; rotate: -1deg; }
}

.hero-treat-one > span {
  animation: db-float-a 6.5s ease-in-out 1s infinite alternate !important;
  animation-timeline: auto !important;
}
.hero-treat-two > span {
  animation: db-float-b 7.5s ease-in-out .6s infinite alternate !important;
  animation-timeline: auto !important;
}
.hero-treat-three > span {
  animation: db-float-a 8.2s ease-in-out 1.4s infinite alternate !important;
  animation-timeline: auto !important;
}

/* ---------- Footer: no arrow at all — the headline itself expands ---------- */

.footer-top > a span {
  display: none !important;
}

.footer-top > a {
  transform-origin: left bottom;
  transition: scale .5s var(--ease), text-shadow .5s var(--ease);
}

.footer-top > a:hover {
  scale: 1.025;
}

.footer-top > a:active {
  scale: .99;
}

/* ---------- Round CTA: no arrow, a quiet ring, a real hover ---------- */

.round-link-arrow { display: none; }

.round-link {
  background: var(--deep);
  box-shadow: 0 14px 40px rgba(0, 60, 143, .3);
  transition: transform .45s var(--ease), background .45s var(--ease),
              box-shadow .45s var(--ease);
}

.round-link::after {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px dashed rgba(255, 255, 255, .45);
  border-radius: 50%;
  pointer-events: none;
  transition: inset .45s var(--ease), border-color .45s var(--ease);
}

.round-link::after { animation: db-ring-spin 60s linear infinite; }

@keyframes db-ring-spin {
  to { rotate: 360deg; }
}

.round-link:hover {
  background: var(--blue);
  transform: scale(1.06);
  box-shadow: 0 22px 60px rgba(0, 87, 194, .42);
}

.round-link:hover::after {
  inset: .9rem;
  border-color: rgba(255, 255, 255, .8);
}

.round-link:active { transform: scale(.97); }

.round-link-label { letter-spacing: .15em; }

/* ---------- Category cards: arrows become quiet circled marks ---------- */

.category-card strong i {
  width: 2em;
  height: 2em;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .9em;
  opacity: .85;
}

/* ---------- Marquee: rotating strip on phones, all motion modes ---------- */

@keyframes db-ticker {
  to { translate: -50% 0; }
}

@media (width <= 700px) {
  .marquee div {
    animation: db-ticker 26s linear infinite !important;
    animation-timeline: auto !important;
  }
}

/* ============================================================
   SCROLL-HOVER — on phones there is no cursor, so the "hover"
   state is driven by scroll position instead: as a card or CTA
   passes through the middle of the screen it lifts, glows and
   settles back down on its way out. Runs in all motion modes.
   ============================================================ */

@keyframes db-scroll-hover-card {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    box-shadow: 0 2px 6px rgba(74, 42, 27, .06), 0 16px 40px rgba(74, 42, 27, .1);
  }
  50% {
    translate: 0 -6px;
    scale: 1.015;
    box-shadow: 0 6px 16px rgba(74, 42, 27, .1), 0 26px 60px rgba(74, 42, 27, .17);
  }
}

@keyframes db-scroll-hover-circle {
  0%, 100% {
    scale: 1;
    box-shadow: 0 14px 40px rgba(0, 60, 143, .3);
  }
  50% {
    scale: 1.05;
    box-shadow: 0 22px 60px rgba(0, 87, 194, .45);
  }
}

@keyframes db-scroll-hover-headline {
  0%, 100% { scale: 1; text-shadow: none; }
  50%      { scale: 1.03; text-shadow: 0 6px 40px rgba(255, 255, 255, .45); }
}

@media (width <= 700px) {
  .mobile-category[open] .mobile-product {
    opacity: 1 !important;
    animation: db-scroll-hover-card linear both !important;
    animation-timeline: view() !important;
    animation-range: cover 10% cover 90% !important;
  }
  .round-link {
    animation: db-scroll-hover-circle linear both !important;
    animation-timeline: view() !important;
    animation-range: cover 15% cover 85% !important;
  }
  .footer-top > a {
    display: inline-block;
    animation: db-scroll-hover-headline linear both !important;
    animation-timeline: view() !important;
    animation-range: cover 25% cover 75% !important;
  }
}

/* ---------- Promise section: fix overlapping display text ----------
   The display font has deep descenders — the "g" in "gross." was
   touching the "E" of "Everything" at the bundle's .84 line-height. */

.promise-heading h2 {
  line-height: 1.12 !important;
  margin-bottom: 1.5rem;
}

@media (width <= 700px) {
  .promise-heading h2 {
    margin-top: 1.5rem;
    margin-bottom: .5rem;
  }
  .promise-list {
    padding-top: 2.25rem;
  }
  .promise-list h3 {
    line-height: 1.05;
  }
}

/* ============================================================
   LINK AFFORDANCE — every link answers "can I click this?"
   on hover (desktop) and on press (touch).
   ============================================================ */

/* Footer contact links: underline slides in from the left */

.footer-meta a,
.footer-legal a {
  position: relative;
}

.footer-meta a::after,
.footer-legal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .5rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .75;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.footer-meta a:hover::after,
.footer-legal a:hover::after {
  transform: scaleX(1);
}

/* Footer headline link: soft glow + gentle expansion says "go" */

.footer-top > a {
  transition: scale .5s var(--ease), text-shadow .5s var(--ease);
}

.footer-top > a:hover {
  text-shadow: 0 6px 40px rgba(255, 255, 255, .4);
}

/* Circle CTA: label breathes wider on hover */

.round-link-label {
  transition: letter-spacing .45s var(--ease);
}

.round-link:hover .round-link-label {
  letter-spacing: .2em;
}

/* Touch: links respond to the press itself */

@media (hover: none) {
  .footer-meta a:active,
  .footer-legal a:active,
  .footer-top > a:active,
  .story-copy > a:active,
  .desktop-nav a:active {
    opacity: .65;
    transition: opacity .08s;
  }
  .round-link:active { transform: scale(.96); }
}

/* ============================================================
   ROUND 5 — story caption below image, pill CTAs, no arrows
   ============================================================ */

/* 1 · Story photo (girl + dog): caption moves BELOW the image */

.story-image {
  aspect-ratio: auto !important;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}

.story-image img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 1.2rem;
  border: 1px solid var(--line-warm);
  box-shadow: var(--shadow-md);
  animation: none !important;
  transform: none !important;
}

.story-image figcaption {
  position: static !important;
  display: inline-block;
  margin: 1rem 0 0;
  color: var(--deep);
  background: var(--white);
  border: 1px solid var(--line-warm);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (width <= 700px) {
  .story-image img { aspect-ratio: 4 / 3; }
  .story-image figcaption {
    display: block;
    text-align: center;
    margin-top: .9rem;
  }
}

/* 2 · "MAKE THEIR DAY": from underlined text to a real pill CTA */

.story-copy > a span { display: none !important; }

.story-copy > a {
  border: 0 !important;
  color: var(--white) !important;
  background: linear-gradient(135deg, #0f86f2, #0057c2 70%);
  border-radius: 999px;
  padding: 1rem 1.7rem !important;
  font-size: .72rem !important;
  letter-spacing: .15em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25),
              0 2px 8px rgba(0, 87, 194, .16),
              0 14px 34px rgba(0, 87, 194, .24);
  transition: translate .3s var(--ease), box-shadow .3s var(--ease),
              filter .3s var(--ease);
}

.story-copy > a:hover {
  translate: 0 -2px;
  filter: brightness(1.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
              0 4px 12px rgba(0, 87, 194, .2),
              0 20px 48px rgba(0, 87, 194, .3);
}

.story-copy > a:active { translate: 0 0; filter: brightness(.97); }

/* 3 · ORDER CTAs (every menu item, desktop + mobile):
      arrow gone, centered label, dimensional gradient pill */

.product-order span,
.mobile-product-copy > a span,
.header-order span,
.cake-copy > a span { display: none !important; }

.product-order,
.mobile-product-copy > a {
  justify-content: center !important;
  border: 0 !important;
  color: var(--white) !important;
  letter-spacing: .16em;
  background: linear-gradient(135deg, #0f86f2, #0057c2 65%, #004aa8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25),
              0 2px 8px rgba(0, 87, 194, .16),
              0 12px 28px rgba(0, 87, 194, .22);
}

.product-order:hover {
  background: linear-gradient(135deg, #2294ff, #0b6fe0 65%, #0057c2);
  color: var(--white) !important;
}

.header-order,
.cake-copy > a {
  justify-content: center !important;
  gap: 0 !important;
}

/* ============================================================
   ORDER CLARITY — CTAs whose labels don't say "order" get an
   explicit ORDER NOW cue so nobody misses how to buy.
   ============================================================ */

/* Footer headline: an unmistakable ORDER NOW pill under the text */

.footer-top > a::after {
  content: "ORDER NOW";
  display: flex;
  width: max-content;
  align-items: center;
  margin-top: 1.6rem;
  font-family: var(--font-body), Arial, sans-serif;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--deep);
  background: var(--white);
  border-radius: 999px;
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 32px rgba(0, 20, 60, .28);
  transition: box-shadow .4s var(--ease);
}

.footer-top > a:hover::after {
  box-shadow: 0 16px 44px rgba(0, 20, 60, .38);
}

@media (width <= 700px) {
  .footer-top > a::after {
    font-size: .72rem;
    padding: .95rem 1.3rem;
    margin-top: 1.3rem;
  }
}

/* Story pill: label says it outright */

.story-copy > a {
  gap: 0 !important;
}

.story-copy > a::before {
  content: "ORDER NOW — ";
  white-space: pre;
}

/* ============================================================
   ROUND 7 — header order button on mobile, WhatsApp FAB,
   disruptive hero entrance, scroll progress bar
   ============================================================ */

/* 1 · Mobile header: ORDER NOW rides next to MENU */

@media (width <= 1080px) {
  .site-header {
    grid-template-columns: 1fr auto auto !important;
    gap: .7rem;
    align-items: center;
  }
  .header-logo   { grid-column: 1; grid-row: 1; }
  .header-order {
    display: inline-flex !important;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-height: 44px;
    gap: 0;
    padding: .55rem 1rem;
    font-size: .66rem;
  }
  .mobile-menu:not([open]) { grid-column: 3; grid-row: 1; justify-self: end; }
  .mobile-menu[open]       { justify-self: auto; align-self: auto; }
}

/* 2 · Disruptive hero entrance — a light bloom washes out as the
      scene settles from oversized + overbright into place, then
      the badges rise in. */

@keyframes db-scene-in-big {
  0%   { opacity: 0; scale: 1.07; filter: brightness(1.3) saturate(1.25); }
  55%  { opacity: 1; }
  100% { opacity: 1; scale: 1; filter: brightness(1) saturate(1); }
}

.hero-brand-scene {
  animation: db-scene-in-big 1.15s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes db-bloom {
  0%   { opacity: .95; scale: .35; }
  100% { opacity: 0; scale: 1.6; }
}

.hero-sticky {
  position: relative;
}

.hero-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(58% 44% at 50% 46%,
    rgba(255, 255, 255, .95) 0%,
    rgba(160, 214, 255, .5) 45%,
    rgba(160, 214, 255, 0) 72%);
  animation: db-bloom 1.25s cubic-bezier(.22, 1, .36, 1) .12s both;
}

@keyframes db-rise-in {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

.hero-brand-scene .brand-scene-meta   { animation: db-rise-in .7s var(--ease) .95s both; }
.hero-brand-scene .brand-scene-bottom { animation: db-rise-in .7s var(--ease) 1.15s both; }

/* 3 · Scroll progress: a thin brand-blue thread along the top */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 90;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transform-origin: left;
  scale: 0 1;
  animation: db-progress linear both;
  animation-timeline: scroll(root);
  pointer-events: none;
}

@keyframes db-progress {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

/* 4 · Floating WhatsApp button (element injected by boost script) */

.db-wa-fab {
  position: fixed;
  right: 1rem;
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 60;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #31d971, #1cb955);
  box-shadow: 0 4px 14px rgba(18, 140, 60, .38), 0 14px 34px rgba(18, 140, 60, .3);
  transition: scale .25s var(--ease), box-shadow .25s var(--ease);
  animation: db-rise-in .6s var(--ease) 1.8s both;
}

.db-wa-fab svg {
  width: 1.85rem;
  height: 1.85rem;
  fill: #fff;
}

.db-wa-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #2ee06e;
  opacity: 0;
  animation: db-fab-pulse 2.4s ease-out 2.6s 3;
  pointer-events: none;
}

@keyframes db-fab-pulse {
  0%   { opacity: .75; scale: 1; }
  100% { opacity: 0; scale: 1.6; }
}

.db-wa-fab:hover { scale: 1.08; }
.db-wa-fab:active { scale: .94; }

/* ---------- Focus: visible everywhere, on-brand ---------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: .5rem;
}