/* ==========================================================================
   Laundry & Co Pricing — Core Stylesheet (Light Theme)
   --------------------------------------------------------------------------
   Mobile-first premium light theme. The primary audience scans a QR code in
   the shop, so phone layout drives the design; larger screens are the
   progressive enhancement. Breakpoint work lives in css/responsive.css.

   Palette is taken from the brand mark itself:
     navy  #042940   cyan #00A8DC   bright cyan #00CFFF

   Contents
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout & containers
   05. Ambient background
   06. Skip link & focus states
   07. Navbar
   08. Hero
   09. Live search
   10. Category filter pills
   11. Sticky toolbar
   12. Section headers
   13. Pricing tables
   14. Self-service
   15. Why choose us
   16. Terms & conditions
   17. Price note
   18. No-results state
   19. Rate us / Google reviews
   20. CTA & contact
   21. Mobile action bar
   22. Back to top & scroll progress
   23. Buttons
   24. Scroll-reveal animations
   25. Keyframes
   26. Reduced motion
   27. Print styles
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --navy: #042940;          /* brand ink — logo navy */
  --navy-700: #063651;      /* lifted navy — gradients */
  --navy-900: #02202F;      /* deepest navy — gradient anchor */
  --brand: #00A8DC;         /* logo cyan — accents, icons, fills */
  --brand-bright: #00CFFF;  /* highlight cyan — glows and gradients */
  --brand-ink: #00708F;     /* cyan dark enough for small text on white */
  --brand-soft: rgba(0, 168, 220, .10);
  --brand-softer: rgba(0, 168, 220, .05);
  --brand-line: rgba(0, 168, 220, .32);

  /* Surfaces ------------------------------------------------------------- */
  --bg: #F2F6F9;
  --bg-raise: #E9EFF4;
  --card: #FFFFFF;
  --card-2: #FBFDFE;
  --card-hover: #F7FBFD;
  --stripe: #F7FAFC;        /* alternating table row */

  /* Lines ---------------------------------------------------------------- */
  --border: rgba(4, 41, 64, .10);
  --border-strong: rgba(4, 41, 64, .18);
  --border-brand: rgba(0, 168, 220, .42);

  /* Text ----------------------------------------------------------------- */
  /* All three clear WCAG AA (4.5:1) against the page background as well as
     white cards — muted text is the tightest at ~5.0:1 on #F2F6F9. */
  --text: #042940;
  --text-dim: #3F5C6E;
  --text-mute: #5A6F7E;

  /* Geometry ------------------------------------------------------------- */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --container: 1320px;

  /* Elevation — light themes need soft, tinted shadows ------------------- */
  --shadow-sm: 0 1px 2px rgba(4, 41, 64, .06);
  --shadow: 0 2px 6px rgba(4, 41, 64, .06), 0 12px 28px -14px rgba(4, 41, 64, .18);
  --shadow-lg: 0 4px 12px rgba(4, 41, 64, .07), 0 28px 56px -28px rgba(4, 41, 64, .28);
  --glow: 0 0 0 1px var(--border-brand), 0 10px 30px -12px rgba(0, 168, 220, .42);
  --glow-strong: 0 0 0 1px var(--border-brand), 0 16px 44px -14px rgba(0, 168, 220, .55);

  /* Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .26s;
  --dur-slow: .5s;

  /* Sticky offsets ------------------------------------------------------- */
  --nav-h: 72px;
  --toolbar-h: 62px;
  --sticky-top: var(--nav-h);
  --mobile-bar-h: 0px;      /* becomes non-zero on small screens */

  /* Typography ----------------------------------------------------------- */
  /* Poppins is geometric and matches the logo, so it carries headings and the
     brand voice. Inter runs the interface: at 13–16px in dense price tables it
     has a taller x-height, clearer 1/7/9, and real tabular figures. */
  --font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Fluid type scale */
  --fs-xs:   .75rem;
  --fs-sm:   .8125rem;
  --fs-base: .9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 3.2vw, 2.125rem);
  --fs-3xl:  clamp(2rem, 6vw, 4.25rem);

  /* Tracking — large type needs negative, small caps need positive */
  --tracking-tight: -.022em;
  --tracking-snug:  -.012em;
  --tracking-wide:  .08em;
  --tracking-caps:  .12em;
}

/* When the compact toolbar is pinned, push sticky table headers below it. */
body.has-toolbar {
  --sticky-top: calc(var(--nav-h) + var(--toolbar-h));
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor targets must clear BOTH sticky bars. */
  scroll-padding-top: calc(var(--nav-h) + var(--toolbar-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.6;
  letter-spacing: var(--tracking-snug);
  font-optical-sizing: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Room for the fixed mobile action bar */
  padding-bottom: var(--mobile-bar-h);
}

img,
svg { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-ink); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--navy); }

ul, ol, dl { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

button { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-raise); }
::-webkit-scrollbar-thumb {
  background: #B9C9D4;
  border: 3px solid var(--bg-raise);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

::selection { background: var(--brand-bright); color: var(--navy); }


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  /* Stops a heading dropping one orphan word onto its own line */
  text-wrap: balance;
}

/* Long-form copy reads better without ragged short last lines */
p { text-wrap: pretty; }

/* Prices and any figure column: fixed-width, lining figures so digits stack */
.price,
.pill-count,
.section-badge-num,
.price-cur {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: 0;
}

/* Gradient headline accent — dark enough to stay legible on white */
.grad {
  background: linear-gradient(100deg, var(--brand-ink) 0%, var(--brand) 55%, #22C3F0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-ink);
}

/* ==========================================================================
   04. LAYOUT & CONTAINERS
   ========================================================================== */

.container,
.container-lg,
.container-xl,
.container-xxl {
  max-width: var(--container);
  padding-inline: 20px;
  margin-inline: auto;
  width: 100%;
}

main { position: relative; z-index: 1; }

/* Inline SVG icons (sprite lives at the top of <body>). Sized in em so they
   track surrounding text, filled with currentColor so every existing colour
   rule keeps working unchanged. */
.ico {
  /* The base reset sets svg { display: block }, which drops icons onto their
     own line in any non-flex context (table headers, the price note). */
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: 0 0 auto;
  vertical-align: -.125em;
  pointer-events: none;
}

/* Two-column CTA layout (replaces the Bootstrap row/col classes the page
   used to pull in). Terms and "Why choose us" have their own layouts. */
.cta-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
}

/* Screen-reader-only text (was .visually-hidden from Bootstrap) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.price-section { padding-block: 56px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.price-section:first-child { padding-top: 32px; }

[hidden] { display: none !important; }
.is-hidden { display: none !important; }


/* ==========================================================================
   05. AMBIENT BACKGROUND
   ========================================================================== */

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1000px 560px at 50% -10%, rgba(0, 168, 220, .12), transparent 62%),
    radial-gradient(700px 480px at 94% 6%, rgba(0, 207, 255, .09), transparent 60%),
    var(--bg);
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .55;
  will-change: transform;
}

.aurora-blob--1 {
  width: 560px; height: 560px;
  top: -220px; left: -140px;
  background: radial-gradient(circle, rgba(0, 207, 255, .26), transparent 68%);
  animation: drift-a 26s var(--ease) infinite alternate;
}

.aurora-blob--2 {
  width: 500px; height: 500px;
  top: 6%; right: -180px;
  background: radial-gradient(circle, rgba(0, 168, 220, .20), transparent 68%);
  animation: drift-b 32s var(--ease) infinite alternate;
}

.aurora-blob--3 {
  width: 660px; height: 660px;
  bottom: -320px; left: 34%;
  background: radial-gradient(circle, rgba(0, 168, 220, .13), transparent 70%);
  animation: drift-c 38s var(--ease) infinite alternate;
}

.aurora-grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(to right, rgba(4, 41, 64, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4, 41, 64, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1100px 700px at 50% 0%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(1100px 700px at 50% 0%, #000 10%, transparent 76%);
}

/* Grain is far subtler on light surfaces */
.aurora-noise {
  position: absolute;
  inset: 0;
  opacity: .018;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   06. SKIP LINK & FOCUS STATES
   ========================================================================== */

.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 2000;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  transform: translate(-50%, -160%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: #fff;
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

:focus:not(:focus-visible) { outline: none; }


/* ==========================================================================
   07. NAVBAR
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-block: 12px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.site-nav.is-stuck {
  background: rgba(255, 255, 255, .95);
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px -14px rgba(4, 41, 64, .34);
}

/* The header holds nothing but the logo, so centre it */
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: 0;
  border-radius: var(--radius-sm);
}

.brand-logo {
  height: 40px;
  width: auto;
  transition: transform var(--dur) var(--ease);
}

.brand:hover .brand-logo { transform: translateY(-1px); }


/* ==========================================================================
   08. HERO
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  padding-block: 52px 40px;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -46%;
  left: 50%;
  width: 900px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 168, 220, .16), transparent 62%);
  filter: blur(46px);
  pointer-events: none;
  animation: pulse-glow 9s ease-in-out infinite;
}

.hero-inner { position: relative; z-index: 1; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-brand);
  background: rgba(255, 255, 255, .85);
  color: var(--brand-ink);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  animation: fade-up .7s var(--ease-out) both;
}

.hero-eyebrow .ico { font-size: .8rem; }

.hero-title {
  font-size: clamp(2.05rem, 6vw, 4.4rem);
  line-height: 1.06;
  margin: 0 0 16px;
  animation: fade-up .8s .06s var(--ease-out) both;
}

.hero-sub {
  max-width: 600px;
  margin: 0 auto 30px;
  color: var(--text-dim);
  font-size: clamp(.98rem, 1.6vw, 1.16rem);
  animation: fade-up .8s .12s var(--ease-out) both;
}


/* ==========================================================================
   09. LIVE SEARCH
   ========================================================================== */

.hero-search {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  animation: fade-up .8s .18s var(--ease-out) both;
}

.search-ico {
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  color: var(--text-mute);
  font-size: 1rem;
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}

.search-input {
  width: 100%;
  padding: 17px 54px 17px 54px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.search-input::placeholder { color: var(--text-mute); }

.search-input:hover { border-color: var(--border-brand); }

.search-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--glow-strong);
}

.hero-search:focus-within .search-ico { color: var(--brand-ink); }

.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }

.search-clear {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--bg-raise);
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.search-clear:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-50%) rotate(90deg);
}

.search-status {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--text-mute);
  font-size: .86rem;
}

.search-status strong { color: var(--brand-ink); font-weight: 600; }

/* Search term highlight inside item names */
mark.hl {
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(0, 207, 255, .3);
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(0, 168, 220, .5);
}


/* ==========================================================================
   10. CATEGORY FILTER PILLS
   ========================================================================== */

.filter-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  animation: fade-up .8s .24s var(--ease-out) both;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.pill:hover {
  color: var(--navy);
  border-color: var(--navy);
  background: rgba(4, 41, 64, .04);
}

/* Active state is a solid navy chip — one clear mark, no glow or gradient */
.pill.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}

.pill-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}

.pill.is-active .pill-count { color: rgba(255, 255, 255, .68); }


/* ==========================================================================
   11. STICKY TOOLBAR
   ========================================================================== */

.toolbar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 1020;
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px -16px rgba(4, 41, 64, .5);
  transform: translateY(-115%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}

.toolbar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.toolbar-inner { display: flex; align-items: center; gap: 16px; }

.toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 300px;
}

.toolbar-search .ico {
  position: absolute;
  left: 15px;
  color: var(--text-mute);
  font-size: .86rem;
  pointer-events: none;
}

.toolbar-search input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.toolbar-search input::placeholder { color: var(--text-mute); }

.toolbar-search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.toolbar-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.toolbar-pills {
  display: flex;
  gap: 7px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 4px;
}
.toolbar-pills::-webkit-scrollbar { display: none; }

.pill--sm { padding: 8px 14px; font-size: .82rem; flex: 0 0 auto; }


/* ==========================================================================
   12. SECTION HEADERS
   ========================================================================== */

.section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.section-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  border: 0;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-bright) 100%);
  color: var(--navy);
  font-size: 1.32rem;
  box-shadow: 0 8px 22px -10px rgba(0, 168, 220, .8);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.section-head:hover .section-icon {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px -10px rgba(0, 168, 220, .95);
}

.section-head-text { min-width: 0; flex: 1 1 auto; }

.section-title { font-size: clamp(1.4rem, 3vw, 2.05rem); margin-bottom: 4px; }

.section-blurb { margin: 0; color: var(--text-dim); font-size: .92rem; }

.section-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.section-badge-num { color: var(--brand-ink); font-weight: 700; font-size: 1rem; }

.section-badge-lbl {
  color: var(--text-mute);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* ==========================================================================
   13. PRICING TABLES
   ========================================================================== */

.table-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  /* `clip`, not `hidden`: overflow:hidden would make this a scroll container
     and the sticky <thead> would pin to the card instead of the viewport. */
  overflow: clip;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.price-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text);
}

/* ---- Sticky header: navy bar, echoing the printed price list ----------- */

.price-table thead th {
  position: sticky;
  top: var(--sticky-top);
  z-index: 3;
  padding: 16px 22px;
  background: var(--navy);
  border: 0;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: top var(--dur) var(--ease);
}


.th-item { text-align: left; width: 40%; }
.th-price { text-align: right; width: 20%; }

/* Corner rounding on the cells so the card looks right even without clip */
.price-table thead th:first-child { border-top-left-radius: var(--radius); }
.price-table thead th:last-child { border-top-right-radius: var(--radius); }
.price-table tbody tr:last-child > *:first-child { border-bottom-left-radius: var(--radius); }
.price-table tbody tr:last-child > *:last-child { border-bottom-right-radius: var(--radius); }

/* ---- Body rows --------------------------------------------------------- */

.price-row { position: relative; transition: background var(--dur) var(--ease); }

/* Alternating row background */
.price-row:nth-child(even) { background: var(--stripe); }

.price-row > th,
.price-row > td {
  padding: 15px 22px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  vertical-align: middle;
}

.price-row:last-child > th,
.price-row:last-child > td { border-bottom: 0; }

.price-row:hover { background: var(--card-hover); }

.price-row:hover .item-ico {
  border-color: transparent;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-bright) 100%);
  color: var(--navy);
  transform: scale(1.06);
}

.price-row:hover .cell-item::before { transform: scaleY(1); }

/* ---- Item cell --------------------------------------------------------- */

.cell-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  font-weight: 500 !important;
  color: var(--text) !important;
  text-align: left;
}

.cell-item::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand), var(--brand-bright));
  transform: scaleY(0);
  transition: transform var(--dur) var(--ease-out);
}

.item-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-mute);
  font-size: .88rem;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.item-name {
  font-size: .96rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .1px;
}

/* Category tag — revealed during search so an item appearing under both
   Men's and Women's is never ambiguous. */
.item-cat {
  display: none;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  border: 1px solid var(--border-brand);
  color: var(--brand-ink);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

body.is-searching .item-cat { display: inline-block; }

/* ---- Price cells ------------------------------------------------------- */

.cell-price { text-align: right; white-space: nowrap; }

.price {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--navy);
  font-size: 1.04rem;
  font-weight: 700;
}

.price-cur {
  color: var(--text-mute);
  font-size: .7rem;
  font-weight: 500;
}

.price-na {
  display: inline-block;
  color: var(--text-mute);
  font-size: 1.05rem;
  opacity: .6;
  cursor: help;
}


/* ==========================================================================
   14. SELF-SERVICE
   Presented with the same tables as the garment sections. It previously used
   eight bordered cards, each with its own gradient icon tile — far too much
   chrome for eight numbers.
   ========================================================================== */

.ss-block { margin-bottom: 30px; }
.ss-block:last-of-type { margin-bottom: 0; }

/* Quiet label above each table — the table header carries the structure */
.ss-block-title {
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Middle columns (load weight, ETA) — supporting data, not the headline */
.th-mid { text-align: right; width: 20%; }

.cell-meta {
  text-align: right;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: var(--fs-base);
  font-weight: 500;
}

/* "per cap" / "per cup" sits beside the amount without competing with it */
.price-unit {
  display: inline-block;
  margin-left: 7px;
  color: var(--text-mute);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* ==========================================================================
   15. WHY CHOOSE US
   Supporting copy inside a pricing section, so it stays understated.
   ========================================================================== */

.why-block { margin-top: 38px; }

.why-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.why-title {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: var(--tracking-snug);
  margin-bottom: 5px;
}

/* Small brand tick instead of a 48px gradient tile */
.why-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: middle;
}

.why-text {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.6;
}


/* ==========================================================================
   16. TERMS & CONDITIONS
   Deliberately quiet: this is fine print, so it uses an auto-numbered list
   rather than cards, and must never outweigh the pricing above it.
   ========================================================================== */

.terms-section { padding-top: 8px; }

.terms-head { margin-bottom: 22px; }

.terms-head .section-title { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

.terms-list {
  counter-reset: term;
  columns: 2;
  column-gap: 48px;
  border-top: 1px solid var(--border);
}

.term {
  counter-increment: term;
  break-inside: avoid;
  padding: 16px 0 16px 40px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* The number is the only ornament — small, muted, aligned with the title */
.term::before {
  content: counter(term, decimal-leading-zero);
  position: absolute;
  top: 17px;
  left: 0;
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.term-title {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: var(--tracking-snug);
  margin-bottom: 3px;
}

.term-text {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.6;
}


/* ==========================================================================
   17. PRICE NOTE
   ========================================================================== */

.price-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.price-note > .ico { color: var(--brand-ink); font-size: 1rem; margin-top: 3px; flex: 0 0 auto; }

.price-note p { margin: 0; color: var(--text-dim); font-size: .87rem; line-height: 1.62; }

.price-note strong { color: var(--navy); font-weight: 600; }

.price-note .price-na { font-size: .92rem; }


/* ==========================================================================
   18. NO-RESULTS STATE
   ========================================================================== */

.no-results {
  padding: 64px 24px;
  margin-block: 16px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--card);
  animation: fade-up .4s var(--ease-out) both;
}

.no-results-ico {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--brand-soft);
  border: 1px solid var(--border-brand);
  color: var(--brand-ink);
  font-size: 1.6rem;
}

.no-results-title { font-size: 1.4rem; margin-bottom: 10px; }

.no-results-text {
  max-width: 440px;
  margin: 0 auto 24px;
  color: var(--text-dim);
  font-size: .93rem;
}

.no-results-text strong { color: var(--brand-ink); }


/* ==========================================================================
   19. RATE US / GOOGLE REVIEWS
   Centred invitation. The stars are an affordance, never a claimed score.
   ========================================================================== */

.rate-section { padding-block: 26px 56px; }

.rate-card {
  position: relative;
  padding: 52px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(760px 300px at 50% -10%, rgba(0, 207, 255, .16), transparent 68%),
    linear-gradient(180deg, #FFFFFF 0%, #F7FCFE 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: center;
}

/* Soft brand bloom behind the headline */
.rate-glow {
  position: absolute;
  top: -160px;
  left: 50%;
  width: 620px;
  height: 380px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 220, .22), transparent 66%);
  filter: blur(50px);
  pointer-events: none;
  animation: pulse-glow 10s ease-in-out infinite;
}

.rate-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-inline: auto;
}

/* Both the badge and the star row are inline-flex, so without an explicit
   width they share a line. Centre each as its own block instead. */
.rate-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 auto 20px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--text-dim);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rate-badge .g-mark { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- Star row: a link, not a rating display ---------------------------- */

.rate-stars {
  display: flex;
  width: fit-content;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 22px;
  padding: 6px 4px;
  font-size: 2rem;
  line-height: 1;
  color: #FFB400;
  border-radius: var(--radius-sm);
  transition: transform var(--dur) var(--ease);
}

.rate-stars .ico {
  display: block;
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease);
}

/* All five respond together — we are inviting a review, not capturing a score */
.rate-stars:hover .ico,
.rate-stars:focus-visible .ico {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 6px 12px rgba(255, 180, 0, .5));
}

.rate-stars:hover { color: #FFA000; }

/* Stagger the entrance the first time the card scrolls into view */
.rate-card.is-in .rate-stars .ico { animation: star-pop .45s var(--ease-out) both; }
.rate-card.is-in .rate-stars .ico:nth-child(1) { animation-delay: .04s; }
.rate-card.is-in .rate-stars .ico:nth-child(2) { animation-delay: .12s; }
.rate-card.is-in .rate-stars .ico:nth-child(3) { animation-delay: .2s; }
.rate-card.is-in .rate-stars .ico:nth-child(4) { animation-delay: .28s; }
.rate-card.is-in .rate-stars .ico:nth-child(5) { animation-delay: .36s; }

/* ---- Copy -------------------------------------------------------------- */

.rate-title {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  margin-bottom: 12px;
}

.rate-text {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 auto 28px;
  max-width: 500px;
}

.rate-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Google-branded review button */
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--navy);
  font-size: .96rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn-google:hover {
  color: var(--navy);
  border-color: var(--border-brand);
  transform: translateY(-2px);
  box-shadow: var(--glow-strong);
}

.btn-google .g-mark { flex: 0 0 auto; width: 20px; height: 20px; }

.btn-google > .ico { font-size: .78rem; color: var(--text-mute); }

/* ---- Reassurance chips ------------------------------------------------- */

.rate-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
}

.rate-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-mute);
  font-size: .85rem;
}

.rate-meta .ico { color: var(--brand-ink); font-size: .82rem; }
.rate-meta li:nth-child(2) .ico { color: #E8506B; }


/* ==========================================================================
   20. CTA & CONTACT
   ========================================================================== */

.contact-section { padding-bottom: 72px; }

.cta-card {
  position: relative;
  padding: 46px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--navy-700) 0%, var(--navy) 55%, var(--navy-900) 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: #fff;
}

.cta-glow {
  position: absolute;
  top: -180px;
  left: -120px;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 207, 255, .3), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
  animation: pulse-glow 11s ease-in-out infinite;
}

.cta-card > .cta-grid { position: relative; z-index: 1; }

.cta-card .hero-eyebrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(0, 207, 255, .45);
  color: var(--brand-bright);
  box-shadow: none;
}

.cta-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 14px; color: #fff; }

.cta-lead { min-width: 0; }

.cta-text { color: rgba(255, 255, 255, .82); font-size: .98rem; margin-bottom: 26px; max-width: 470px; }

.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cta-card .btn-primary-glow { box-shadow: 0 10px 30px -10px rgba(0, 168, 220, .55); }

.contact-list { display: grid; gap: 12px; }

.contact-list li {
  position: relative;   /* anchors the stretched hit area below */
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.contact-list li:hover {
  border-color: rgba(0, 207, 255, .5);
  background: rgba(255, 255, 255, .12);
  transform: translateX(4px);
}

.contact-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-bright) 100%);
  color: var(--navy);
  font-size: .94rem;
}

.contact-lbl {
  display: block;
  color: rgba(255, 255, 255, .62);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-val {
  display: block;
  color: #fff;
  font-size: .94rem;
  font-weight: 500;
  word-break: break-word;
}

a.contact-val:hover { color: var(--brand-bright); }

/* Secondary affordance on the address row — the whole row is the link */
.contact-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--brand-bright);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.contact-list li:hover .contact-hint { opacity: 1; transform: translateX(2px); }

/* The text itself is only ~23px tall — far under a comfortable touch target.
   Stretch each contact link across its whole row so the entire card is
   tappable, without changing the layout. */
a.contact-val::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}


/* WhatsApp glyph keeps its brand green; the button itself stays neutral so
   the label passes contrast. */
.ico--wa { color: #25D366; }

/* Sits on the dark CTA card, so it mirrors the cyan tiles: bright fill,
   navy glyph (7.5:1) rather than dark-teal-on-dark-green. */
.contact-ico--wa {
  background: linear-gradient(150deg, #25D366 0%, #4AE585 100%);
  color: var(--navy);
}
.contact-ico--wa .ico { color: inherit; }

.cta-card .btn-ghost .ico--wa { color: #4AE585; }


/* ==========================================================================
   21. MOBILE ACTION BAR
   Fixed Call / Rate bar — the two things a QR visitor actually needs.
   Hidden on desktop; enabled in responsive.css.
   ========================================================================== */

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1045;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px -14px rgba(4, 41, 64, .4);
}

.mobile-bar a {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius-pill);
  font-size: .92rem;
  font-weight: 600;
}

.mobile-bar .mb-call {
  background: var(--navy);
  color: #fff;
  border: 1px solid transparent;
}

.mobile-bar .mb-rate {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border-strong);
}

.mobile-bar .mb-rate .g-mark { width: 18px; height: 18px; flex: 0 0 auto; }

.mobile-bar .mb-wa {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border-strong);
}

.mobile-bar .mb-wa .ico { font-size: 1.05rem; }


/* ==========================================================================
   22. BACK TO TOP & SCROLL PROGRESS
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--mobile-bar-h));
  z-index: 1040;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--brand-ink);
  font-size: .98rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.9);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out),
              visibility var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.back-to-top:hover {
  background: var(--navy);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 30px -10px rgba(4, 41, 64, .6);
  transform: translateY(-3px) scale(1.05);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transition: width .1s linear;
  pointer-events: none;
}


/* ==========================================================================
   23. BUTTONS
   ========================================================================== */

.btn-primary-glow,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: .93rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* Navy text on cyan — the brand colour, at an accessible contrast */
.btn-primary-glow {
  border: 0;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-bright) 100%);
  color: var(--navy);
  box-shadow: 0 10px 26px -10px rgba(0, 168, 220, .8);
}

.btn-primary-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform .65s var(--ease-out);
}

.btn-primary-glow:hover {
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(0, 168, 220, .95);
}

.btn-primary-glow:hover::before { transform: translateX(110%); }
.btn-primary-glow:active { transform: translateY(0) scale(.985); }

.btn-ghost {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--navy);
}

.btn-ghost:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
  transform: translateY(-2px);
}

/* Ghost buttons sitting on the dark CTA card */
.cta-card .btn-ghost {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}

.cta-card .btn-ghost:hover {
  border-color: var(--brand-bright);
  background: rgba(0, 207, 255, .16);
  color: var(--brand-bright);
}


/* ==========================================================================
   24. SCROLL-REVEAL ANIMATIONS
   ========================================================================== */

/* Only hide reveal targets when JS is available to un-hide them. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}

.js .reveal.is-in { opacity: 1; transform: none; }

/* Fade-only variant — no transform, deliberately.
   A transformed ancestor becomes the containing block for position: sticky
   descendants, which detaches sticky table headers and floats them into the
   middle of the table. Anything wrapping sticky content fades only. */
.js .reveal--fade,
.js .reveal--fade.is-in { transform: none; }


/* ==========================================================================
   25. KEYFRAMES
   ========================================================================== */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(130px, 80px) scale(1.14); }
}

@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-120px, 120px) scale(1.1); }
}

@keyframes drift-c {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(80px, -100px) scale(1.18); }
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

@keyframes star-pop {
  from { opacity: 0; transform: scale(.4) rotate(-25deg); }
  to   { opacity: 1; transform: none; }
}

.price-row.is-refresh { animation: row-in .3s var(--ease-out) both; }


/* ==========================================================================
   26. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1 !important; transform: none !important; }
  .aurora-blob { animation: none; }
}


/* ==========================================================================
   27. PRINT STYLES
   The theme is already light, so printing mostly means stripping chrome.
   ========================================================================== */

@media print {
  @page { margin: 12mm; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    padding-bottom: 0;
  }

  /* The CTA card is navy on screen, so its contents are white. On paper the
     card turns white — force every heading and light-on-dark element black
     rather than listing them individually. */
  h1, h2, h3, h4, h5, h6 { color: #000 !important; }

  .cta-card,
  .cta-card *,
  .cta-title,
  .cta-card .btn-ghost,
  .cta-card .hero-eyebrow { color: #000 !important; }

  /* Screen-only chrome */
  .aurora,
  .site-nav,
  .toolbar,
  .back-to-top,
  .scroll-progress,
  .skip-link,
  .hero-search,
  .search-status,
  .filter-wrap,
  .cta-actions,
  .no-results,
  .mobile-bar,
  .rate-section,
  .hero::before,
  .cta-glow { display: none !important; }

  /* Never print a filtered view — restore anything the search/filter hid.
     Scoped to .is-hidden so it cannot resurrect sections deliberately
     hidden above (a blanket `.price-section { display: revert }` previously
     brought the Rate Us block back onto the page). */
  .price-row.is-hidden { display: table-row !important; }
  .ss-block.is-hidden,
  .why-block.is-hidden,
  .price-note.is-hidden,
  [data-section].is-hidden { display: block !important; }

  .item-cat { display: none !important; }

  .hero { padding: 0 0 14px; text-align: left; }
  .hero-title { font-size: 20pt; }
  .grad { -webkit-text-fill-color: #000; color: #000 !important; background: none; }
  .hero-sub { color: #333 !important; font-size: 10.5pt; margin-bottom: 0; }
  .hero-eyebrow { border: 0; background: none; color: #555; padding: 0; margin-bottom: 6px; box-shadow: none; }

  .price-section { padding-block: 10px; }

  .section-head { gap: 10px; margin-bottom: 10px; }
  .section-icon { display: none; }
  .section-title { font-size: 14pt; }
  .section-blurb { color: #444 !important; font-size: 8.5pt; }
  .section-badge { border-color: #ccc; box-shadow: none; }

  .table-card { border: 1px solid #999; box-shadow: none; }

  .price-table thead { display: table-header-group; }
  .price-table thead th {
    position: static;
    background: #eee !important;
    color: #000 !important;
    border-bottom: 1px solid #999;
    padding: 6px 9px;
    font-size: 7.5pt;
  }

  .price-row { break-inside: avoid; page-break-inside: avoid; }

  .price-row > th,
  .price-row > td {
    padding: 5px 9px;
    border-bottom: 1px solid #ddd;
    color: #000 !important;
  }

  .price-row:nth-child(even) { background: #f7f7f7 !important; }
  .price-row:hover { background: transparent !important; }

  .item-ico { display: none; }
  .cell-item { gap: 0; }
  .cell-item::before { display: none; }
  .item-name { font-size: 9.5pt; }
  .price { font-size: 9.5pt; }
  .price-cur { color: #666 !important; }

  /* Bootstrap's flex grid stretches cards to a shared line height, and that
     height is wrong once a page break intervenes — the last line of text gets
     clipped. CSS columns lay the cards out 2-up without any flex sizing. */
  .why-list { display: block !important; column-count: 2; column-gap: 18px; border-top: 1px solid #ccc; }
  .why { break-inside: avoid; margin-bottom: 8px; }

  .terms-list { column-gap: 24px; }
  .term { padding-block: 8px; break-inside: avoid; }

  .price-note {
    border: 1px solid #bbb;
    background: #fff !important;
    box-shadow: none;
    break-inside: avoid;
    /* Never inherit a stretched flex height */
    height: auto !important;
  }


  .cta-card {
    background: #fff !important;
    border: 1px solid #999;
    color: #000 !important;
    box-shadow: none;
    padding: 18px;
  }
  .cta-text { color: #333 !important; }
  .contact-list li { border-color: #ccc; background: #fff !important; }
  .contact-lbl { color: #666 !important; }
  .contact-val { color: #000 !important; }
  .contact-ico { display: none; }

  .js .reveal { opacity: 1 !important; transform: none !important; }

  a { color: #000 !important; text-decoration: none; }
}