/* ==========================================================================
   A LOAD OF CRAP — aloadofcrap.org
   Vintage americana badge system. Navy / gold / cream.
   Fonts self-hosted (master.md §1.45). Animation rules per §1.47/§1.52/§1.53.
   ========================================================================== */

/* ---------- fonts (latin subsets, self-hosted) ---------- */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alfa-slab-one-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/oswald-500-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --navy: #1F2B48;
  --navy-deep: #16203A;
  --gold: #D9A62E;
  --gold-bright: #E8B93B;
  --cream: #F4EEDC;
  --cream-dim: #E9E1C8;
  --ink-on-cream: #1F2B48;
  --display: 'Alfa Slab One', 'Rockwell', 'Arial Black', serif;
  --condensed: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', Arial, sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-on-cream);
  background: var(--cream);
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--navy);
  padding: 10px 18px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 8px; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--condensed); font-weight: 600;
  font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding: 15px 28px;
  border: 3px solid transparent; border-radius: 6px;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-ghost { color: var(--cream); border-color: var(--cream); }
.btn-ghost:hover { background: var(--cream); color: var(--navy); }
.btn-navy { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-big { font-size: 1.3rem; padding: 18px 34px; }
.wa-icon { width: 1.35em; height: 1.35em; fill: currentColor; flex: none; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--navy-deep);
  padding: 12px clamp(16px, 4vw, 40px);
  border-bottom: 3px solid var(--gold);
}
.topbar-brand {
  font-family: var(--display); font-size: 1.15rem;
  color: var(--cream); text-decoration: none; letter-spacing: .02em;
}
.topbar-brand span { color: var(--gold); }
.topbar-nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 28px); }
.topbar-nav a {
  font-family: var(--condensed); font-weight: 500; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
}
.topbar-nav a:hover { color: var(--gold-bright); }
.topbar-cta {
  background: var(--gold); color: var(--navy) !important;
  padding: 8px 16px; border-radius: 4px; font-weight: 600 !important;
}
.topbar-cta:hover { background: var(--gold-bright); }

/* ---------- hero ---------- */
.hero { background: var(--navy); color: var(--cream); position: relative; }
.hero-inner {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 40px) clamp(80px, 10vw, 130px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px); align-items: center;
}
.eyebrow {
  font-family: var(--condensed); font-weight: 500; font-size: .95rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-bright);
  margin-bottom: 18px;
}
.hero-title { font-family: var(--display); font-weight: 400; line-height: .95; }
.hero-title .line-a { display: block; font-size: clamp(1.6rem, 4.5vw, 3rem); color: var(--cream); }
.hero-title .line-b { display: block; font-size: clamp(4.4rem, 13vw, 8.5rem); color: var(--gold); letter-spacing: .01em; }
.hero-tagline {
  font-family: var(--condensed); font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-bright);
  margin: 22px 0 12px;
}
.hero-sub { max-width: 46ch; opacity: .92; margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-badge { display: flex; justify-content: center; }
.seal { width: min(340px, 78vw); height: auto; aspect-ratio: 1; }
.seal-scallop circle:not(:last-child) { }
.seal-small { font-family: var(--condensed); font-weight: 600; font-size: 21px; letter-spacing: 3px; }
.seal-big { font-family: var(--display); font-size: 46px; }
.seal-tiny { font-family: var(--condensed); font-weight: 600; font-size: 12.5px; letter-spacing: 1.5px; }
.seal-ringtext { font-family: var(--condensed); font-weight: 600; font-size: 15.5px; letter-spacing: 4.2px; }
.seal-ring {
  transform-origin: 50% 50%;
  animation: seal-spin 40s linear infinite;
}
@keyframes seal-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.hero-wave svg { width: 100%; height: clamp(24px, 4vw, 60px); }

/* ==========================================================================
   THE SIGNATURE ANIMATION
   One 16s master loop. All actors animate on the same 16s clock so keyframe
   percentages line up (§1.53). Defaults (no animation running) are the FINAL
   frame — clean grass + stamp — which is exactly what reduced-motion shows.
   Timeline: 0-13% dog trots in · 14-23% squat + strain · 24-27% poo lands
   · 28-38% dog exits · 40-48% worker enters · 49-59% scooping · 60-62% poo
   gone · 63-76% spray + mist · 75-88% sparkles · 88-94% stamp thunk
   · 94-100% hold (the between-loops pause).
   ========================================================================== */
.scene-wrap { background: var(--cream); padding: clamp(24px, 4vw, 48px) 0 0; }
.scene { max-width: 1000px; margin: 0 auto; }
.scene-svg { width: 100%; height: auto; aspect-ratio: 900 / 320; overflow: hidden; }
.scene-caption {
  text-align: center; font-size: 1.15rem; padding: 18px 20px 8px;
}
.scene-caption strong { font-family: var(--condensed); letter-spacing: .06em; text-transform: uppercase; }

.scene-svg .dog, .scene-svg .dog-inner, .scene-svg .dog-tail,
.scene-svg .poo-inner, .scene-svg .worker, .scene-svg .scoop-arm,
.scene-svg .spray-arm, .scene-svg .mist circle, .scene-svg .sparkles path,
.scene-svg .stamp-inner {
  transform-box: fill-box;
  transform-origin: center;
}
/* travel groups move in view-box space */
.scene-svg .dog, .scene-svg .worker { transform-box: view-box; transform-origin: 0 0; }

/* --- defaults = final frame (also the reduced-motion static frame) --- */
.dog { transform: translateX(-300px); }
.worker { transform: translateX(540px); }
.poo-inner { transform: scale(0); transform-origin: 50% 100%; }
.spray-arm { opacity: 0; }
.mist circle { opacity: 0; }
.sparkles path { opacity: 0; }
.stamp-inner { opacity: 1; transform: rotate(-6deg); }

/* --- master keyframes --- */
@keyframes aloc-dog-travel {
  0%      { transform: translateX(-300px); }
  13%     { transform: translateX(210px); }
  27%     { transform: translateX(210px); }
  38%     { transform: translateX(1020px); }
  100%    { transform: translateX(1020px); }
}
@keyframes aloc-dog-body {
  /* trot bob in, squat dip with strain wiggles, trot bob out */
  0%      { transform: translateY(0); }
  3%      { transform: translateY(-5px); }
  6%      { transform: translateY(0); }
  9%      { transform: translateY(-5px); }
  12%     { transform: translateY(0); }
  15%     { transform: translateY(12px) rotate(3deg); }
  17%     { transform: translateY(12px) rotate(1deg); }
  19%     { transform: translateY(13px) rotate(4deg); }
  21%     { transform: translateY(12px) rotate(2deg); }
  23%     { transform: translateY(12px) rotate(4deg); }
  26%     { transform: translateY(0) rotate(0deg); }
  29%     { transform: translateY(-5px); }
  32%     { transform: translateY(0); }
  35%     { transform: translateY(-5px); }
  38%     { transform: translateY(0); }
  100%    { transform: translateY(0); }
}
@keyframes aloc-dog-tail {
  0%, 13% { transform: rotate(0deg); }
  15%     { transform: rotate(38deg); }
  17%     { transform: rotate(30deg); }
  19%     { transform: rotate(40deg); }
  21%     { transform: rotate(32deg); }
  23%     { transform: rotate(38deg); }
  26%, 100% { transform: rotate(0deg); }
}
@keyframes aloc-poo {
  0%, 23.5% { transform: scale(0); }
  24.5%   { transform: scale(1.25, .65); }
  25.2%   { transform: scale(.85, 1.18); }
  26%     { transform: scale(1.08, .94); }
  27%     { transform: scale(1); }
  59%     { transform: scale(1); }
  60.5%   { transform: scale(1.2, .55); }
  62%, 100% { transform: scale(0); }
}
@keyframes aloc-worker-travel {
  0%, 40% { transform: translateX(540px); }
  48%     { transform: translateX(-45px); }
  78%     { transform: translateX(-45px); }
  88%, 100% { transform: translateX(540px); }
}
@keyframes aloc-scoop {
  0%, 49% { transform: rotate(0deg); opacity: 1; }
  52%     { transform: rotate(16deg); }
  55%     { transform: rotate(0deg); }
  58%     { transform: rotate(16deg); }
  61%     { transform: rotate(0deg); opacity: 1; }
  63%, 74% { opacity: 0; }
  76%, 100% { transform: rotate(0deg); opacity: 1; }
}
@keyframes aloc-spray-arm {
  0%, 62% { opacity: 0; }
  64%     { opacity: 1; transform: rotate(0deg); }
  66%     { transform: rotate(-7deg); }
  68%     { transform: rotate(0deg); }
  70%     { transform: rotate(-7deg); }
  72%     { transform: rotate(0deg); }
  74%     { opacity: 1; }
  76%, 100% { opacity: 0; }
}
@keyframes aloc-mist {
  0%, 64% { opacity: 0; transform: translate(0, 0) scale(.6); }
  67%     { opacity: .85; transform: translate(-10px, -3px) scale(1); }
  73%     { opacity: 0; transform: translate(-26px, -8px) scale(1.25); }
  100%    { opacity: 0; transform: translate(-26px, -8px) scale(1.25); }
}
@keyframes aloc-spark {
  0%, 75% { opacity: 0; transform: scale(.5); }
  79%     { opacity: 1; transform: scale(1.15); }
  84%     { opacity: 0; transform: scale(.7); }
  100%    { opacity: 0; transform: scale(.7); }
}
@keyframes aloc-stamp {
  0%      { opacity: 0; transform: scale(2.6) rotate(-18deg); }
  88%     { opacity: 0; transform: scale(2.6) rotate(-18deg); }
  90.5%   { opacity: 1; transform: scale(.92) rotate(-4deg); }
  92%     { transform: scale(1.06) rotate(-7deg); }
  93.5%   { transform: scale(1) rotate(-6deg); }
  98.5%   { opacity: 1; transform: scale(1) rotate(-6deg); }
  100%    { opacity: 0; transform: scale(1) rotate(-6deg); }
}

/* attach — paused until JS adds .play after window.load + idle (§1.52) */
.scene .dog        { animation: aloc-dog-travel 16s linear infinite; }
.scene .dog-inner  { animation: aloc-dog-body 16s ease-in-out infinite; }
.scene .dog-tail   { animation: aloc-dog-tail 16s ease-in-out infinite; transform-origin: 90% 20%; }
.scene .poo-inner  { animation: aloc-poo 16s ease-out infinite; transform-origin: 50% 100%; }
.scene .worker     { animation: aloc-worker-travel 16s linear infinite; }
.scene .scoop-arm  { animation: aloc-scoop 16s ease-in-out infinite; transform-origin: 15% 10%; }
.scene .spray-arm  { animation: aloc-spray-arm 16s ease-in-out infinite; transform-origin: 85% 50%; }
.scene .mist .mist-1 { animation: aloc-mist 16s ease-out infinite; }
.scene .mist .mist-2 { animation: aloc-mist 16s ease-out infinite; animation-delay: -15.85s; }
.scene .mist .mist-3 { animation: aloc-mist 16s ease-out infinite; animation-delay: -15.7s; }
.scene .sparkles .spark-1 { animation: aloc-spark 16s ease-in-out infinite; }
.scene .sparkles .spark-2 { animation: aloc-spark 16s ease-in-out infinite; animation-delay: -15.6s; }
.scene .sparkles .spark-3 { animation: aloc-spark 16s ease-in-out infinite; animation-delay: -15.2s; }
.scene .stamp-inner { animation: aloc-stamp 16s cubic-bezier(.2, .9, .3, 1.2) infinite; }

.scene:not(.play) .dog, .scene:not(.play) .dog-inner, .scene:not(.play) .dog-tail,
.scene:not(.play) .poo-inner, .scene:not(.play) .worker, .scene:not(.play) .scoop-arm,
.scene:not(.play) .spray-arm, .scene:not(.play) .mist circle,
.scene:not(.play) .sparkles path, .scene:not(.play) .stamp-inner {
  animation-play-state: paused;
}

.stamp-small { font-family: var(--condensed); font-weight: 600; font-size: 20px; letter-spacing: 3px; }
.stamp-big { font-family: var(--display); font-size: 26px; }

/* ---------- 3. offer ticket ---------- */
.offer { padding: clamp(40px, 7vw, 80px) 20px; background: var(--cream); }
.ticket {
  position: relative;
  max-width: 620px; margin: 0 auto;
  background: var(--gold);
  color: var(--navy);
  text-align: center;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 56px);
  border-radius: 10px;
  /* perforated ticket edge */
  background-image:
    radial-gradient(circle at 0 50%, var(--cream) 9px, transparent 10px),
    radial-gradient(circle at 100% 50%, var(--cream) 9px, transparent 10px);
  background-repeat: repeat-y;
  background-size: 20px 26px;
  background-position: -1px 0, calc(100% + 1px) 0;
  box-shadow: 0 8px 0 rgba(31, 43, 72, .18);
}
.ticket::before {
  content: "";
  position: absolute; inset: 12px 22px;
  border: 2px dashed var(--navy);
  border-radius: 6px;
  pointer-events: none;
}
.ticket > * { position: relative; }
.ticket-eyebrow {
  font-family: var(--condensed); font-weight: 600; font-size: 1rem;
  letter-spacing: .2em; text-transform: uppercase;
}
.ticket-price {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 4.8rem);
  line-height: 1.05; margin: 8px 0 2px;
}
.ticket-lock {
  font-family: var(--condensed); font-weight: 600;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  letter-spacing: .14em; text-transform: uppercase;
}
.ticket-limit {
  display: inline-block; margin-top: 12px;
  background: var(--navy); color: var(--gold-bright);
  font-family: var(--condensed); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; font-size: .95rem;
  padding: 6px 18px; border-radius: 4px;
}
.ticket-gone { font-style: italic; font-weight: 600; margin: 12px 0 4px; }
.ticket-badges {
  list-style: none; display: flex; justify-content: center;
  gap: 8px 22px; flex-wrap: wrap; margin: 16px 0 22px;
}
.ticket-badges li {
  font-family: var(--condensed); font-weight: 500; font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.ticket-badges li::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--navy); flex: none;
}

/* ---------- section scaffolding ---------- */
.section-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  text-align: center; line-height: 1.1;
}
.section-sub { text-align: center; margin: 12px auto 0; max-width: 56ch; opacity: .85; }

/* ---------- 4. how it works ---------- */
.how { padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 40px); max-width: 1080px; margin: 0 auto; }
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; margin-top: clamp(28px, 5vw, 48px);
}
.step {
  position: relative;
  background: #FFFDF6;
  border: 3px solid var(--navy);
  border-radius: 12px;
  padding: 34px 26px 28px;
  text-align: center;
  box-shadow: 6px 6px 0 var(--gold);
}
.step-num {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--gold-bright);
  font-family: var(--display); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.step-icon { width: 58px; height: 58px; margin: 6px auto 14px; }
.step h3 {
  font-family: var(--condensed); font-weight: 600;
  letter-spacing: .1em; font-size: 1.25rem; margin-bottom: 8px;
}
.step p { font-size: 1.02rem; opacity: .9; }

/* ---------- 5. trust strip ---------- */
.trust-strip {
  background: var(--gold);
  color: var(--navy);
  display: flex; justify-content: center; align-items: center;
  gap: 14px 22px; flex-wrap: wrap;
  padding: 16px clamp(16px, 4vw, 40px);
  font-family: var(--condensed); font-weight: 600;
  letter-spacing: .14em; font-size: clamp(.85rem, 2vw, 1.05rem);
  text-transform: uppercase;
}
.trust-strip .dot { font-size: .6em; }

/* ---------- 6. pricing ---------- */
.prices { padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 40px); max-width: 1080px; margin: 0 auto; }
.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px; margin-top: clamp(28px, 5vw, 48px);
}
.price-card {
  background: var(--navy);
  color: var(--cream);
  border-radius: 12px;
  padding: clamp(22px, 4vw, 34px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.price-card-title {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  color: var(--gold-bright); text-align: center;
}
.price-card-note { text-align: center; font-size: .98rem; opacity: .85; margin: 8px 0 18px; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 12px 10px; text-align: left; }
.price-table thead th {
  font-family: var(--condensed); font-weight: 500; font-size: .85rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright);
  border-bottom: 2px solid var(--gold);
  text-align: right;
}
.price-table tbody tr { border-bottom: 1px solid rgba(244, 238, 220, .18); }
.price-table tbody tr:last-child { border-bottom: 0; }
.price-table tbody th { font-weight: 600; font-size: 1rem; }
.price-table tbody th small { display: block; font-weight: 400; font-size: .85rem; opacity: .75; }
.price-table td {
  font-family: var(--condensed); font-weight: 600; font-size: 1.15rem;
  text-align: right; white-space: nowrap; color: var(--gold-bright);
}
.price-table td.gold-td { color: var(--cream); }
.price-table.ongoing tbody tr.group th { padding-top: 18px; }
.price-foot { text-align: center; margin-top: 26px; }
.price-foot a { font-weight: 700; color: var(--navy); }

/* ---------- 7. area ---------- */
.area {
  background: var(--cream-dim);
  text-align: center;
  padding: clamp(48px, 8vw, 88px) clamp(20px, 4vw, 40px);
}
.area-lead { font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 700; margin-top: 16px; }
.area-sub {
  font-family: var(--condensed); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  font-size: clamp(.9rem, 2.2vw, 1.05rem);
  margin: 10px auto 0; max-width: 60ch; opacity: .85;
}
.area-note { margin-top: 18px; }
.area-note a { font-weight: 700; }

/* ---------- 8. final CTA ---------- */
.final-cta {
  background: var(--navy);
  color: var(--cream);
  text-align: center;
  padding: clamp(56px, 9vw, 110px) clamp(20px, 4vw, 40px);
}
.final-ribbon { width: 110px; height: auto; margin: 0 auto 22px; }
.ribbon-small { font-family: var(--condensed); font-weight: 600; font-size: 9.5px; letter-spacing: 1.4px; }
.ribbon-big { font-family: var(--display); font-size: 12.5px; }
.final-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 5.5vw, 3.4rem); line-height: 1.12;
}
.final-sub {
  font-family: var(--condensed); font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.5rem); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-bright);
  margin: 14px 0 30px;
}
.final-hours { margin-top: 18px; font-size: .98rem; opacity: .8; }

/* ---------- 9. footer ---------- */
.footer {
  background: var(--navy-deep);
  color: var(--cream);
  text-align: center;
  padding: 40px 20px 110px; /* bottom room for the FAB on mobile */
}
.footer-brand { font-family: var(--display); font-size: 1.3rem; }
.footer-brand span { color: var(--gold); }
.footer-line { margin-top: 8px; font-size: .98rem; opacity: .85; }
.footer-line a { color: var(--gold-bright); font-weight: 600; }
.footer-copy { margin-top: 18px; font-size: .85rem; opacity: .6; }
.footer-copy a { color: inherit; }

/* ---------- floating WhatsApp ---------- */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(22, 32, 58, .4);
  transition: transform .12s ease;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 32px; height: 32px; fill: currentColor; }

/* ---------- responsive ---------- */
@media (max-width: 430px) {
  .price-table thead th { font-size: .72rem; letter-spacing: .04em; }
  .price-table th, .price-table td { padding: 10px 6px; }
  .price-table tbody th { font-size: .92rem; }
  .price-table td { font-size: 1.05rem; }
}
@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-badge { order: -1; }
  .seal { width: min(240px, 62vw); }
  .hero-sub { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .topbar-nav a:not(.topbar-cta) { display: none; }
}
@media (min-width: 761px) {
  .wa-fab { display: none; }
}

/* ---------- reduced motion: static final frame ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}