/* ==========================================================================
   Site styles — Natalyeah Nordberg's Cleaning Services
   Built on assets/brand.css. Follows the brand kit rules:
     - Yellowtail for her name and section titles only, never below 24px
     - Caveat for asides, one or two per layout maximum
     - Hearts replace every bullet point, always
     - Sparkles in corners and empty space, never over text
     - Roughly 60% Cloud / 20% Petal / 12% Hot Pink / 8% Berry
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
/* Narrow reading column. Keeps the SAME outer box and gutter as .wrap so the
   left edge lines up with the header, breadcrumb and page title — only the
   measure is constrained. Centring a narrower box instead would indent the body
   ~160px from everything above it. */
.wrap--narrow { max-width: 1100px; }
.wrap--narrow > * { max-width: 78ch; }
.wrap--narrow > .cta,
.wrap--narrow > .grid { max-width: none; }

.section { position: relative; padding-block: clamp(40px, 6vw, 76px); }

/* Bokeh glow - blurred pink light behind everything. Brand kit motif 04:
   "This is what makes the brand feel soft rather than flat." */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 88% 12%, rgba(251,175,208,.40) 0%, rgba(251,175,208,0) 62%),
    radial-gradient(52% 48% at 6% 82%, rgba(253,217,232,.55) 0%, rgba(253,217,232,0) 60%);
}
.section > * { position: relative; z-index: 1; }

.section--tint { background: linear-gradient(180deg, rgba(253,217,232,.55) 0%, rgba(255,242,247,0) 100%); }
.section--tint::before {
  background:
    radial-gradient(58% 50% at 12% 8%, rgba(248,111,174,.28) 0%, rgba(248,111,174,0) 62%),
    radial-gradient(50% 46% at 92% 78%, rgba(251,175,208,.45) 0%, rgba(251,175,208,0) 60%);
}
.section--petal { background: var(--petal); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr));
  gap: var(--gap, 22px);
}
.stack > * + * { margin-top: var(--gap, 20px); }

/* Heart-centred rule between sections. Brand kit motif 04: "heart-centered rule
   between sections". Drawn on the section itself so no markup changes are needed. */
.section + .section::after {
  content: "\2665";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cloud);
  color: var(--hot-pink);
  font-size: 15px;
  line-height: 1;
}
.section + .section {
  border-top: 1.5px solid var(--blush);
}
.section--tint + .section::after,
.section + .section--tint::after { background: #FDEAF2; }

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--hot-pink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; top: 0; color: var(--paper); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* Gradient bar at the page edge - brand kit motif 04. */
.header::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--hot-pink), var(--blush), var(--bubblegum), var(--hot-pink));
}

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 251, 252, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--blush);
}
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
}

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.logo__mark {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #FFFFFF 0%, var(--blush) 38%, var(--hot-pink) 100%);
  box-shadow: 0 6px 14px rgba(237,44,143,.35), inset 0 -3px 7px rgba(109,11,50,.25);
  font-family: var(--script);
  font-size: 21px;
  color: var(--paper);
  text-shadow: 0 2px 5px rgba(109,11,50,.5);
}
.logo__name,
.logo__biz { display: block; }

.logo__name {
  font-family: var(--script);
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.05;
  color: var(--berry);
}
.logo__biz {
  font-size: clamp(8.5px, 1.2vw, 10px);
  font-weight: 900;
  letter-spacing: .15em;
  color: var(--hot-pink);
}

.nav { display: none; }
.nav ul { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.nav li { margin: 0; }
.nav__link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--berry);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__link:hover { color: var(--hot-pink); border-bottom-color: var(--blush); }
.nav__link--active { color: var(--hot-pink); border-bottom-color: var(--hot-pink); }

.header__call {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--hot-pink);
  color: var(--paper);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(237,44,143,.32);
  white-space: nowrap;
}
.header__call:hover { background: var(--berry); color: var(--paper); }
.header__call-label { display: none; }

@media (min-width: 900px) {
  .nav { display: block; }
  .header__call-label { display: inline; }
}

/* Mobile nav strip below the bar */
.navstrip {
  display: block;
  border-top: 1px solid var(--petal);
  overflow-x: auto;
  scrollbar-width: none;
}
.navstrip::-webkit-scrollbar { display: none; }
.navstrip ul {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 9px clamp(16px, 4vw, 40px);
  list-style: none;
}
.navstrip li { margin: 0; }
@media (min-width: 900px) { .navstrip { display: none; } }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary {
  background: var(--hot-pink);
  color: var(--paper);
  box-shadow: 0 8px 20px rgba(237,44,143,.34);
}
.btn--primary:hover { background: var(--berry); color: var(--paper); }
.btn--ghost {
  background: var(--paper);
  color: var(--berry);
  box-shadow: inset 0 0 0 2px var(--blush);
}
.btn--ghost:hover { color: var(--hot-pink); box-shadow: inset 0 0 0 2px var(--hot-pink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 10px;
}

/* Section titles: Yellowtail on a Bubblegum brush stroke.
   Brand kit type scale: "Section title - 32-48px - Yellowtail on a Bubblegum
   brush stroke". The stroke is the motif from section 04: soft ends, slight
   rotation, Bubblegum at 100% / Blush at 60%. */
.h-script {
  position: relative;
  display: inline-block;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.15;
  color: var(--berry);
  -webkit-text-stroke: 2px var(--paper);
  paint-order: stroke fill;
  text-shadow: 0 0 16px rgba(248,111,174,.55);
  padding-inline: .1em;
  isolation: isolate;
}
.h-script::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.16em;
  right: -.16em;
  top: 46%;
  height: .52em;
  background: linear-gradient(90deg,
    rgba(248,111,174,0) 0%, rgba(248,111,174,.55) 12%,
    rgba(248,111,174,.6) 88%, rgba(248,111,174,0) 100%);
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
  transform: rotate(-1.4deg);
  pointer-events: none;
}
.cta .h-script::before,
.footer .h-script::before { display: none; }
.h-sans {
  font-size: clamp(21px, 2.8vw, 29px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--berry);
}
.h-sm { font-size: clamp(17px, 2.2vw, 21px); font-weight: 800; color: var(--berry); }

/* Caveat aside. Brand rule: one or two per layout, maximum. */
.hand {
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.35;
  color: var(--berry);
}
.hand--lg { font-size: clamp(22px, 3.2vw, 34px); }

.lead { font-size: clamp(16px, 1.9vw, 18.5px); line-height: 1.75; color: var(--ink); }
.muted { color: var(--ink-muted); }
.small { font-size: 13.5px; }

.heart { color: var(--hot-pink); }

/* --------------------------------------------------------------------------
   Hearts replace every bullet point, always.
   -------------------------------------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  line-height: 1.6;
}
.ticks li::before {
  content: "\2665";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--hot-pink);
  font-size: 15px;
}
.ticks--tight li { margin-bottom: 6px; }
.ticks--two { columns: 2; column-gap: 32px; }
.ticks--two li { break-inside: avoid; }
@media (max-width: 620px) { .ticks--two { columns: 1; } }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.9);
  border: 2px solid #FFFFFF;
  box-shadow: var(--lift-lg);
}
.card--paper { background: linear-gradient(180deg, #FFFFFF 0%, var(--paper-warm) 100%); }
.card--flat { background: var(--paper); box-shadow: var(--lift-md); }
.card__title { margin-bottom: 8px; }

/* Service / area card with a link */
.tile {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper-warm) 100%);
  border: 2px solid #FFFFFF;
  box-shadow: var(--lift-lg);
  text-decoration: none;
  color: inherit;
}
.tile:hover { box-shadow: var(--lift-xl); color: inherit; }
.tile:hover .tile__title { color: var(--hot-pink); }
.tile__icon {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: var(--blush);
  box-shadow: 0 0 0 6px rgba(251,175,208,.32);
  font-size: 24px;
  color: var(--berry);
}
.tile__title { font-size: 19px; font-weight: 800; color: var(--berry); margin-bottom: 7px; }
.tile__body { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0; }
.tile__more {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hot-pink);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 84px);
  background:
    radial-gradient(110% 60% at 12% 0%,  #FFD9E9 0%, rgba(255,217,233,0) 62%),
    radial-gradient(90% 55% at 92% 14%,  #FFC6DF 0%, rgba(255,198,223,0) 58%),
    linear-gradient(180deg, #FFF4F8 0%, #FFE9F2 55%, #FFF4F8 100%);
}
.hero__inner { position: relative; z-index: 1; }

.hero__grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 46px; }
}

/* Portrait slot. A real photo of Natalyeah belongs here - a face outperforms
   a stock image of a mop in every local market. */
.hero__portrait {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--lift-xl);
  background: var(--paper);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xl); }
.hero__portrait--empty {
  background: repeating-linear-gradient(135deg, var(--petal) 0 10px, var(--cloud) 10px 20px);
  border: 2px dashed var(--blush);
  box-shadow: none;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--label-soft);
}
@media (max-width: 939px) { .hero__portrait { display: none; } }
.hero__name,
.hero__biz { display: block; }

.hero__name {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(34px, 7vw, 74px);
  line-height: 1.04;
  color: var(--berry);
  -webkit-text-stroke: 2.5px var(--paper);
  paint-order: stroke fill;
  text-shadow: 0 0 20px rgba(255,255,255,.92), 0 0 42px rgba(248,111,174,.8);
}
.hero__biz {
  margin-top: 4px;
  font-size: clamp(17px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--hot-pink);
  -webkit-text-stroke: 2px var(--soft-black);
  paint-order: stroke fill;
}
.hero__tag { margin-top: 12px; }
.hero__lead { margin-top: 18px; max-width: 46ch; }
.hero__cta { margin-top: 26px; }
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.hero__proof li {
  margin: 0;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1.5px solid var(--blush);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chip-ink);
}

/* Decorative sparkles — corners and empty space only.
   Below 860px the layout is single-column and text fills the width, so there is
   no empty space left for them and they would sit over copy. The brand kit is
   explicit that sparkles never go over text, so they drop out entirely. */
@media (max-width: 859px) { .spark { display: none; } }

/* Sparkle clusters of three - large, medium, small - in the outer gutters only,
   so they never sit over text. Brand kit motif 04. Desktop only: below 860px the
   layout is single-column and there is no empty space left for them. */
@media (min-width: 1160px) {
  .section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(circle, var(--bubblegum) 38%, transparent 40%),
      radial-gradient(circle, var(--blush) 38%, transparent 40%);
    background-size: 9px 9px, 5px 5px;
    background-position: 3.5% 22%, 2.2% 30%;
    opacity: .85;
  }
  .section:nth-of-type(even)::after {
    background-position: 96.5% 18%, 97.8% 26%;
  }
  .section + .section::after { content: "\2665"; }
}

.spark {
  position: absolute;
  background: var(--bubblegum);
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Interior page header
   -------------------------------------------------------------------------- */
.pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(30px, 4.5vw, 56px);
  background:
    radial-gradient(90% 70% at 88% 0%, #FFD9E9 0%, rgba(255,217,233,0) 62%),
    linear-gradient(180deg, #FFF4F8 0%, #FFEAF3 100%);
  border-bottom: 1.5px solid var(--blush);
}
.pagehead__inner { position: relative; z-index: 1; }
.pagehead__lead { margin-top: 12px; max-width: 58ch; }

.crumbs {
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--label-soft);
}
.crumbs a { color: var(--label-soft); }
.crumbs span { opacity: .55; padding-inline: 5px; }

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */
.prose h2 { margin: 1.6em 0 .5em; font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.4em 0 .4em; font-size: clamp(17px, 2.1vw, 20px); font-weight: 800; }
.prose p { margin-bottom: 1.05em; }
.prose > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Callout
   -------------------------------------------------------------------------- */
.callout {
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--r-md);
  background: var(--paper);
  border-left: 5px solid var(--hot-pink);
  box-shadow: var(--lift-md);
}
.callout--petal { background: var(--petal); border-left-color: var(--berry); box-shadow: none; }
.callout__title { font-size: 16px; font-weight: 800; color: var(--berry); margin-bottom: 7px; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.quote {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 2px solid #FFFFFF;
  box-shadow: var(--lift-md);
}
.quote p { font-size: 15.5px; line-height: 1.7; color: var(--ink); margin-bottom: 14px; }
.quote footer { font-size: 13px; font-weight: 700; color: var(--label-soft); }
.quote__stars { color: var(--hot-pink); font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }

/* Placeholder shown until real reviews exist. Never fake a testimonial. */
.quote--placeholder {
  background: repeating-linear-gradient(135deg, var(--petal) 0 9px, var(--cloud) 9px 18px);
  border: 2px dashed var(--blush);
  box-shadow: none;
  text-align: center;
  color: var(--label-soft);
}
.quote--placeholder p { font-family: var(--mono); font-size: 12.5px; color: var(--label-soft); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1.5px solid var(--petal); }
.faq details {
  border-bottom: 1.5px solid var(--petal);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--berry);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "\2665";
  flex: 0 0 auto;
  color: var(--hot-pink);
  font-size: 14px;
  line-height: 1.6;
}
.faq summary:hover { color: var(--hot-pink); }
.faq details[open] summary { color: var(--hot-pink); }
.faq__body { padding: 0 0 18px 26px; }
.faq__body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta {
  padding: clamp(28px, 4.5vw, 52px);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--blush) 0%, var(--hot-pink) 100%);
  box-shadow: 0 18px 44px rgba(237,44,143,.3);
  text-align: center;
  color: var(--paper);
}
.cta h2 { color: var(--paper); font-family: var(--hand); font-weight: 600; font-size: clamp(24px, 3.6vw, 36px); }
.cta p { max-width: 56ch; margin: 12px auto 0; font-size: clamp(14.5px, 1.7vw, 16.5px); }
.cta .btn--ghost { margin-top: 22px; }
.cta__phone {
  display: inline-block;
  margin-top: 20px;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--paper);
  text-decoration: none;
}
.cta__phone:hover { color: var(--paper); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 17px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--berry); }
.field input,
.field select,
.field textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--blush);
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--hot-pink); outline: none; box-shadow: 0 0 0 3px rgba(237,44,143,.18); }
.field textarea { resize: vertical; min-height: 110px; }
.field__hint { font-size: 12.5px; color: var(--ink-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
@media (min-width: 680px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; } }

.form__status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  background: var(--petal);
  color: var(--berry);
}
.form__status--ok  { background: var(--petal); color: var(--berry); font-weight: 700; }
.form__status--err { background: #FFE4EF; color: var(--berry); box-shadow: inset 0 0 0 1.5px var(--hot-pink); }

/* --------------------------------------------------------------------------
   Area / table
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.data th, table.data td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--petal); text-align: left; vertical-align: top; }
table.data th { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--label-soft); }
table.data td:first-child { font-weight: 700; color: var(--berry); }

/* Price tables */
table.data--price th[scope="row"] {
  font-weight: 700;
  color: var(--berry);
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
}
table.data--price thead th { color: var(--label); }
table.data--price td {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--hot-pink);
  white-space: nowrap;
}
table.data--price tbody tr:nth-child(even) { background: rgba(253, 217, 232, .3); }
table.data--price th, table.data--price td { padding: 12px 16px 12px 12px; }
table.data--price th:first-child, table.data--price td:first-child { padding-left: 12px; }
.table-wrap {
  margin-bottom: 1.2em;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--lift-md);
  padding: 4px 8px 8px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* Footer uses the brand kit's own footer treatment: Sugar Glow gradient,
   near-white type. The kit's footer is Blush -> Hot Pink at 160deg. */
.footer {
  position: relative;
  margin-top: clamp(36px, 5vw, 64px);
  padding-block: clamp(32px, 4.5vw, 52px) 26px;
  background: linear-gradient(160deg, var(--blush) 0%, var(--hot-pink) 100%);
  color: var(--paper);
  font-size: 14.5px;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 88% 10%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%);
}
.footer > * { position: relative; }
.footer a { color: var(--paper); text-decoration: none; }
.footer a:hover { color: var(--paper); text-decoration: underline; }
.footer h3 {
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,251,252,.82);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 7px; }
.footer__name {
  font-family: var(--script);
  font-size: 27px;
  color: var(--paper);
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(109,11,50,.4);
}
.footer__biz { font-size: 10px; font-weight: 900; letter-spacing: .16em; color: var(--berry); margin-bottom: 12px; }
.footer__tag { font-family: var(--hand); font-weight: 600; font-size: 19px; color: var(--paper); margin-top: 14px; }
.footer__bottom {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,251,252,.35);
  font-size: 12.5px;
  color: rgba(255,251,252,.85);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .navstrip, .skip, .cta, .spark { display: none; }
  body { background: #fff; }
  .card, .tile, .quote { box-shadow: none; border: 1px solid var(--blush); break-inside: avoid; }
  a { text-decoration: none; }
}