/* ==========================================================================
   Your Wedding My Job
   Single stylesheet for the whole site. Navy and gold, premium Los Angeles.

   Sections, in order:
     1.  Tokens
     2.  Reset and base
     3.  Typography
     4.  Utilities
     5.  Buttons
     6.  Header and nav
     7.  Hero
     8.  Sections
     9.  Cards
     10. Package detail
     11. Add-ons
     12. Products and store
     13. Quantity and fields
     14. Cart drawer and order review
     15. Toast, notes and misc
     16. Footer
     17. Responsive overrides
     18. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Brand palette */
  --ink: #0f2438;
  --navy: #1b3a5c;
  --navy-700: #24507c;
  --navy-050: #eef2f7;
  /* Two golds, split by job. --gold-700 is the one that carries text and
     focus rings on cream, white and navy-050; --gold and --gold-400 stay on
     fills, rules, bullets and gold sitting on navy. */
  --gold-700: #826621;
  --gold: #b8912f;
  --gold-400: #d4ac4a;
  --gold-050: #f7efdc;
  --cream: #fbf8f2;
  --paper: #ffffff;
  --text: #1c2733;
  --muted: #5f6b78;
  --line: #e7e1d5;
  --shadow: rgba(15, 36, 56, .10);

  /* Type families. The Google Fonts link lives in each page head, the
     fallbacks keep proportions close when the site runs offline. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing, 8pt-ish scale */
  --space-1: .25rem;   /*  4px */
  --space-2: .5rem;    /*  8px */
  --space-3: .75rem;   /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 3.5rem;   /* 56px */
  --space-10: 4rem;    /* 64px */
  --space-11: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */

  /* Shape and measure */
  --radius: .5rem;
  --radius-lg: 1rem;
  --container: 1180px;

  /* Internal helpers. Not part of the shared token contract: only this file
     reads them, so page authors never need to know they exist. */
  --shadow-sm: 0 1px 2px var(--shadow);
  --shadow-md: 0 10px 30px var(--shadow);
  --shadow-lg: 0 24px 64px rgba(15, 36, 56, .24);
  --ease: cubic-bezier(.2, .6, .3, 1);
  --speed: 220ms;
  --tap: 44px;
  --measure: 68ch;
  --z-header: 40;
  --z-backdrop: 50;
  --z-drawer: 60;
  --z-toast: 80;
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets land below the sticky header instead of under it. */
  scroll-padding-top: 6rem;
  /* Opening the drawer or the nav panel locks the page by turning the
     viewport scrollbar off, and on a classic scrollbar that handed 15px back
     to the layout mid-interaction: everything centred jumped sideways.
     Reserving the gutter here fixed the jump but left a band outside the
     scrollport that nothing can paint into, so the open drawer and its
     backdrop stopped 15px short of the window edge. The lock now compensates
     in JavaScript instead (ui.js lockScroll adds the measured scrollbar width
     as body padding), which holds the layout still AND lets the drawer reach
     the edge. */
}

body {
  /* Lining figures everywhere, so no digit set in the serif sits below the
     baseline the way old-style numerals do. */
  font-variant-numeric: lining-nums;
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Overflow declared on body (not html) propagates to the viewport, so a
     stray wide child cannot scroll the page sideways and sticky still works. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; }

img, picture, video, svg, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

a {
  color: var(--navy);
  text-decoration-color: rgba(184, 145, 47, .55);
  text-underline-offset: .18em;
  transition: color var(--speed) var(--ease);
}

a:hover { color: var(--gold-700); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

table { border-collapse: collapse; }

hr {
  border: 0;
  height: 1px;
  background: var(--line);
}

::selection {
  background: var(--gold-050);
  color: var(--ink);
}

/* One focus treatment for the whole site: a gold ring that never hides. The
   outline-offset paints it 3px outside the box, so it lands on the surface
   behind the control, and the dark gold is what clears 3:1 there. */
:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: 3px;
  border-radius: 3px;
}

/* On dark ground the lighter gold holds its contrast. The buttons are not in
   this list: .btn--primary and .btn--gold sit on cream, white and navy-050,
   so their ring is drawn on a light surface and keeps the dark gold above. */
.hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold-400); }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}

h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

h1 { font-size: clamp(2.375rem, 1.55rem + 3.6vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.875rem); }
h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.0625rem; }

h6 {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

p { text-wrap: pretty; }

p + p { margin-top: var(--space-4); }

strong, b { font-weight: 600; color: var(--ink); }

small { font-size: .875rem; }

blockquote { font-family: var(--font-display); }

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}


/* ==========================================================================
   4. UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

/* Column counts arrive with the breakpoints, see section 17. */

.divider {
  height: 1px;
  border: 0;
  background: var(--line);
  margin-block: var(--space-8);
}

.text-center { text-align: center; }

.muted { color: var(--muted); }

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

.sr-only {
  position: absolute;
  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;
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: .75rem var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  /* A long label can shorten the button but never widen the page. */
  max-width: 100%;
  transition:
    background-color var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    color var(--speed) var(--ease),
    transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--paper);
  box-shadow: var(--shadow-md);
}

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn--gold:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

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

.btn--ghost:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.btn--quiet {
  padding-inline: var(--space-2);
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}

.btn--quiet:hover {
  color: var(--gold-700);
  text-decoration-color: var(--gold-700);
}

/* Reads as a secondary control but keeps the full 44px touch target. */
.btn--sm {
  min-height: var(--tap);
  padding: .5rem var(--space-4);
  font-size: .8125rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

.btn--primary[disabled]:hover { background: var(--navy); border-color: var(--navy); }
.btn--gold[disabled]:hover { background: var(--gold); border-color: var(--gold); }
.btn--ghost[disabled]:hover { background: transparent; color: var(--navy); }

/* Brief confirmation state after a line lands in the order. */
.btn.is-added {
  background: var(--gold-050);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

.btn.is-added::before {
  content: "\2713";
  line-height: 1;
}


/* ==========================================================================
   6. HEADER AND NAV
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--navy);
  color: var(--paper);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

/* The focus ring is 2px drawn 3px out, so it needs 5px of room above the
   link. At top: 0 the top segment fell off the viewport and the ring read as
   three sides. Half a step down clears it with 3px to spare. */
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-2);
  color: var(--paper);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(251, 248, 242, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.5rem;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  min-height: var(--tap);
}

.brand:hover { color: var(--ink); }

.brand__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--gold-050);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.brand__sub {
  display: block;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* Below 900px the nav is a panel hanging off the sticky header. JS adds
   .is-open on .nav and flips aria-expanded on the toggle. */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-5) var(--space-5);
  max-height: calc(100vh - 4.5rem);
  overflow-y: auto;
}

.nav.is-open { display: block; }

/* ui.js puts .nav-open on <body> when the panel opens. Without this the page
   kept scrolling behind the open menu. The panel only exists below 900px, so
   the lock is scoped the same way and cannot outlive a resize past it. */
@media (max-width: 899px) {
  body.nav-open { overflow: hidden; }
}

.nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav__item { border-bottom: 1px solid var(--line); }
.nav__item:last-child { border-bottom: 0; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-3) 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: .01em;
}

.nav__link:hover { color: var(--gold-700); }

.nav__link.is-active {
  color: var(--navy);
  font-weight: 600;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* The header row is over-subscribed on phones. Without flex: none and the
     min-width floor the toggle is the item that gives, and it collapsed to a
     couple of pixels at 320px, which put the whole mobile nav out of reach. */
  flex: none;
  width: var(--tap);
  min-width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--navy);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.nav-toggle:hover { border-color: var(--gold-700); color: var(--gold-700); }

.nav-toggle[aria-expanded="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Last item in the header row, so it was the one pushed off the screen on
     narrow phones. It keeps its size now and the brand gives instead. */
  flex: none;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: transparent;
  color: var(--navy);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.cart-button:hover {
  background: var(--navy);
  color: var(--paper);
}

.cart-button__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 720px);
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
  overflow: hidden;
}

.hero--page { min-height: min(52vh, 440px); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Two stacked gradients: a floor for the copy, a wash for the whole frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(15, 36, 56, .92) 0%, rgba(15, 36, 56, .55) 45%, rgba(15, 36, 56, .18) 100%),
    linear-gradient(to right, rgba(15, 36, 56, .55), rgba(15, 36, 56, .12));
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-11) var(--space-5) var(--space-9);
}

.hero__eyebrow {
  margin-bottom: var(--space-4);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.hero__title {
  max-width: 18ch;
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--paper);
}

.hero__lede {
  max-width: 52ch;
  margin-bottom: var(--space-7);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The ghost button carries navy on navy everywhere else, which is the right
   pairing on cream, white and navy-050 but reads as 1.36:1 on the hero, so
   the second call to action was there and invisible. On dark ground it takes
   the light label and a light rule instead, and hover fills white rather than
   navy so the shape does not dissolve into the scrim. Light sections keep the
   navy treatment, since this only bites inside .hero. */
.hero .btn--ghost {
  border-color: rgba(255, 255, 255, .72);
  color: var(--paper);
}

.hero .btn--ghost:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

.hero__meta a { color: inherit; }
.hero__meta a:hover { color: var(--gold-400); }

.hero--page .hero__title { max-width: 22ch; }
.hero--page .hero__inner { padding-block: var(--space-10) var(--space-8); }


/* ==========================================================================
   8. SECTIONS
   ========================================================================== */

.section {
  padding-block: var(--space-10);
}

.section--alt {
  background: var(--navy-050);
  border-block: 1px solid var(--line);
}

.section--tight { padding-block: var(--space-7); }

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--space-8);
}

.section__head.text-center {
  margin-inline: auto;
}

.section__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.875rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}

.section__lede {
  max-width: 62ch;
  margin-top: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
}

.section__head.text-center .section__lede { margin-inline: auto; }


/* ==========================================================================
   9. CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}

.card--link { cursor: pointer; }

.card--link:hover,
.card--link:focus-within {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy-050);
  overflow: hidden;
}

.card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: .3rem var(--space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-5);
}

.card__eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover { color: var(--navy-700); }

.card__meta {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.card__text {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.65;
}

.card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: .9375rem;
  color: var(--text);
}

.card__list li {
  position: relative;
  padding-left: var(--space-5);
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}


/* ==========================================================================
   10. PACKAGE DETAIL
   ========================================================================== */

.pkg {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-9);
  border-top: 1px solid var(--line);
}

.pkg:first-of-type { border-top: 0; }

.pkg__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-050);
  box-shadow: var(--shadow-md);
}

.pkg__number {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-md);
}

.pkg__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pkg__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pkg__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.375rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--ink);
}

.pkg__range {
  order: -1;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.pkg__bestfor {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.pkg__bestfor strong {
  color: var(--ink);
  font-weight: 600;
}

.pkg__pricing {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}

.pkg__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px dotted var(--line);
}

.pkg__price-row:last-of-type { border-bottom: 0; }

.pkg__price-amount {
  /* Prices set in the body sans with lining, tabular digits, matching the tier
     numerals: the display serif's old-style figures made "$85" sit unevenly. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--navy);
  font-variant-numeric: lining-nums tabular-nums;
}

.pkg__price-note {
  font-size: .875rem;
  color: var(--muted);
}

.pkg__example {
  padding: var(--space-3) var(--space-4);
  background: var(--gold-050);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.55;
}

.pkg__example strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pkg__inherits {
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--gold);
  background: var(--navy-050);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--navy);
}

.pkg__specs {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.spec {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}

.spec:last-child { border-bottom: 1px solid var(--line); }

.spec__term {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}

.spec__desc {
  margin: 0;
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.65;
}

.pkg__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Tier panel

   The seven package photos are not being produced, so the slot they were
   holding carries a numeral panel instead: the package number, a gold rule and
   the short form of the package name. One component in two sizes, the small
   .card__media slot on the home page and the large .pkg__media block above,
   and it sits inside those containers rather than resizing them, so the card
   rhythm and the alternating detail layout are untouched. The number and the
   name are both in the heading beside it, so the markup carries aria-hidden
   and nothing here is announced twice.
   ------------------------------------------------------------------------ */

/* Both slots become query containers so the numeral can be measured against
   the panel it sits in instead of against the viewport: the same component
   then fills a 260px card slot and a 620px detail block without a breakpoint
   for each, and on a phone, where the two slots are the same width, it draws
   at the same size in both. Inline-size containment leaves the block axis alone,
   which is what .card__media (its own 4/3) and .pkg__media (height from its
   content) each rely on, and it changes no containing block: both boxes are
   already position: relative for the badge and the number that overlay them. */
.card__media,
.pkg__media { container-type: inline-size; }

.tier-panel {
  /* Solid ground under the gradient layers, so the panel is never transparent while
     an image-less background is still resolving or if gradients are unsupported. */
  background-color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  /* Two containers, one rule. .card__media already has a height, so height
     fills it and the ratio is ignored; .pkg__media took its height from the
     photo, so there the height resolves to auto and the 4/3 the photo used to
     supply comes from here instead. */
  height: 100%;
  aspect-ratio: 4 / 3;
  padding: var(--space-5);
  /* The faint 45 degree hairlines the generated placeholders are drawn with,
     over a vertical navy gradient. The hairlines are listed first because the
     first image in a background list is the one painted on top. */
  background-image:
    repeating-linear-gradient(135deg,
      rgba(240, 233, 220, .07) 0, rgba(240, 233, 220, .07) 1.5px,
      transparent 1.5px, transparent 14px,
      rgba(184, 145, 47, .1) 14px, rgba(184, 145, 47, .1) 15.5px,
      transparent 15.5px, transparent 28px),
    linear-gradient(180deg, var(--navy-700) 0%, var(--navy) 46%, var(--ink) 100%);
  text-align: center;
}

.tier-panel__num {
  /* The display serif sets old-style figures, so "01" reads as "0I". The sans
     has even, lining digits and keeps the panel feeling deliberate. */
  font-family: var(--font-body);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--gold-400);
  font-variant-numeric: lining-nums tabular-nums;
  /* The viewport line is the fallback for a browser without container query
     units, which drops the line below it as invalid and keeps this one. */
  font-size: clamp(2.5rem, 16vw, 5.5rem);
  font-size: clamp(2.5rem, 30cqw, 5.5rem);
}

/* Percentage width, so the rule tracks the panel the same way the numeral
   does. flex: none keeps the 2px from being squeezed in the column. */
.tier-panel__rule {
  flex: none;
  width: 32%;
  max-width: 6rem;
  height: 2px;
  background: var(--gold-400);
}

.tier-panel__label {
  max-width: 100%;
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .2em;
  /* The tracking is added to the right of every glyph including the last, so
     the line would sit half a step left of centre. The matching pad on the
     left puts it back. */
  padding-left: .2em;
  text-transform: uppercase;
  font-size: .6875rem;
  font-size: clamp(.625rem, 3cqw, .8125rem);
}

/* The detail block runs from 1.3x to 1.8x the card slot at desktop widths,
   the wider figure on the reversed rows where the media takes the 7fr track,
   so the numeral gets a higher ceiling and the stack a wider gap there.
   Everything else, including the container measure that does the actual
   scaling, is shared. */
.pkg__media .tier-panel { gap: var(--space-4); }

.pkg__media .tier-panel__num {
  font-size: clamp(3.25rem, 24vw, 9rem);
  font-size: clamp(3.25rem, 30cqw, 9rem);
}


/* ==========================================================================
   11. ADD-ONS
   ========================================================================== */

.addons {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.addon-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.addon-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

/* Gold rule that fills whatever space is left beside the title. */
.addon-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.addon-group__intro {
  max-width: 62ch;
  margin-top: calc(var(--space-3) * -1);
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.65;
}

.addon-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  list-style: none;
}

.addon {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.addon:hover,
.addon:focus-within {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}

.addon__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.addon__name {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.addon__desc {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.6;
}

.addon__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.addon__price {
  /* Prices set in the body sans with lining, tabular digits, matching the tier
     numerals: the display serif's old-style figures made "$85" sit unevenly. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--navy);
  font-variant-numeric: lining-nums tabular-nums;
}

.addon__unit {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.addon__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.addon__action .btn { flex: 1 1 auto; }


/* ==========================================================================
   12. PRODUCTS AND STORE
   Equipment the company sells outright. One expensive item to a card, so the
   card runs taller than a package card and hands the price and the specs more
   room than .card gives them. Built as a sibling of .card and .addon: same
   paper ground, same hairline border, same 4/3 media, same gold hover.
   ========================================================================== */

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

/* The same quiet shift .addon uses, not the lift .card--link uses: the card is
   not itself a link, only the control in its foot is, so it should not behave
   like something you can click anywhere. */
.product-card:hover,
.product-card:focus-within {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy-050);
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-5);
}

.product-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

/* Pulled up out of the body gap so the line under the title reads as part of
   the title block rather than as the first line of the description. */
.product-card__tagline {
  margin-top: calc(var(--space-1) * -1);
  color: var(--navy);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.product-card__text {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.65;
}

/* A list, not a paragraph: this is the part buyers scan, so every line item
   gets its own row and its own gold marker. */
.product-card__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  list-style: none;
}

.product-card__spec {
  position: relative;
  padding-left: var(--space-4);
  color: var(--text);
  font-size: .875rem;
  line-height: 1.55;
}

.product-card__spec::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* Price on its own full-width row with the control under it. At every card
   width this grid produces, the two cannot sit side by side without one of
   them being squeezed, so they never try: the order is fixed here instead of
   collapsing a different way at every breakpoint. */
.product-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  /* The same inset .product-card__body carries, so the price and the buy
     controls line up with the copy above them instead of running to the card
     edge, and the focus ring, drawn 3px outside each control, has room to
     land inside a card that clips its overflow. The rule above the foot stays
     full bleed: it is the border box that divides the two blocks, and padding
     sits inside it. */
  padding: var(--space-5);
  border-top: 1px solid var(--line);
}

.product-price {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 100%;
  min-width: 0;
}

/* The largest price treatment on the site, above .pkg__price-amount at 1.75rem
   and .total-row--grand at 1.5rem. The display face, the tight leading and the
   tabular figures are what keep it confident rather than loud. */
.product-price__amount {
  /* Prices set in the body sans with lining, tabular digits, matching the tier
     numerals: the display serif's old-style figures made "$85" sit unevenly. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.5rem + .9vw, 2.125rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
  font-variant-numeric: lining-nums tabular-nums;
}

.product-price__note {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* The buy control fills whatever is left of its row and a stepper beside it
   keeps its measured width. Same split .addon__action uses. */
.product-card__foot .btn { flex: 1 1 auto; }
.product-card__foot .qty { flex: none; }


/* ==========================================================================
   13. QUANTITY AND FIELDS
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}

.field__hint {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.guest-field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.guest-input,
.qty__input {
  min-height: var(--tap);
  padding: .625rem var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.guest-input {
  width: 100%;
  max-width: 10rem;
}

.guest-input:hover,
.qty__input:hover { border-color: var(--gold); }

/* No outline reset here: the global gold focus ring stays visible and the
   border shift is the extra hint, not the only one. */
.guest-input:focus,
.qty__input:focus {
  border-color: var(--gold);
}

/* No overflow clip here. The focus ring is drawn 3px outside each control, so
   an ancestor clip erased it on every stepper button and on the number field.
   The rounding lives on the two end buttons instead. */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.qty__btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: var(--navy-050);
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.qty__btn:hover {
  background: var(--navy);
  color: var(--paper);
}

.qty__btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.qty__btn[disabled]:hover {
  background: var(--navy-050);
  color: var(--navy);
}

/* Inside the 1px border of .qty, so the fills follow its rounded corners. */
.qty__btn:first-child {
  border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px);
}

.qty__btn:last-child {
  border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
}

.qty__input {
  width: 3.75rem;
  min-height: var(--tap);
  padding-inline: var(--space-2);
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  font-weight: 600;
  /* Spinners would break the fixed width and the two flanking buttons
     already cover increment and decrement. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ==========================================================================
   14. CART DRAWER AND ORDER REVIEW
   ========================================================================== */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(15, 36, 56, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease);
}

.backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(26rem, 100%);
  /* Hidden by visibility as well as transform so nothing inside the closed
     drawer can take focus from a keyboard user. */
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 300ms var(--ease), visibility 300ms var(--ease);
}

.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.cart-drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

.cart-drawer__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.cart-drawer__close {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.cart-drawer__close:hover {
  background: var(--navy-050);
  color: var(--ink);
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) var(--space-5);
}

.cart-drawer__foot {
  padding: var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--cream);
}

.cart-empty {
  padding: var(--space-9) var(--space-4);
  text-align: center;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.6;
}

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.cart-line:first-child { padding-top: var(--space-2); }

.cart-line__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.cart-line__name {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.cart-line__meta {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cart-line__price {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cart-line__remove {
  grid-column: 2;
  justify-self: end;
  display: inline-grid;
  place-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  margin-right: calc(var(--space-2) * -1);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.cart-line__remove:hover {
  background: var(--navy-050);
  color: var(--ink);
}

.cart-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-1);
  font-size: .9375rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.total-row--sub {
  font-size: .875rem;
  color: var(--muted);
}

.total-row--grand {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

.total-row--deposit {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--gold-050);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
}


/* ==========================================================================
   15. TOAST, NOTES AND MISC
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: var(--z-toast);
  max-width: min(28rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, .75rem);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.note {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--navy-050);
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.65;
}

.note--warn {
  border-left-color: var(--gold);
  background: var(--gold-050);
  color: var(--ink);
}

/* Says which of the two kinds of order is open, and that the cart holds one or
   the other and never both. That is a fact the visitor needs before they
   choose, not a failure, so it takes the gold informational treatment: no red,
   no alarm, nothing that reads as something having gone wrong. Quieter than
   .note--warn on purpose, since it sits alongside real copy rather than
   interrupting it. */
.mode-note {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--gold-050);
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.6;
}

.mode-note strong {
  font-weight: 600;
  color: var(--ink);
}

/* Inverted in the drawer. That panel is already paper over cream, so a third
   light strip sank into it; navy with the light gold rule reads as a labelled
   band instead. The margin lives here rather than on the base rule because the
   drawer stacks plain blocks, while every page context puts .mode-note inside
   a .card__body or a .stack that already carries the gap. */
.cart-drawer .mode-note {
  margin-bottom: var(--space-4);
  border-color: transparent;
  border-left-color: var(--gold-400);
  background: var(--navy);
  color: rgba(255, 255, 255, .9);
}

.cart-drawer .mode-note strong { color: var(--gold-400); }

.cart-drawer .mode-note a { color: var(--paper); }
.cart-drawer .mode-note a:hover { color: var(--gold-400); }

/* Dark ground, so the ring takes the light gold here the same way it does in
   the hero and the footer. */
.cart-drawer .mode-note :focus-visible { outline-color: var(--gold-400); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: .25rem var(--space-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--navy-050);
  color: var(--navy);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
}

.badge--gold {
  border-color: var(--gold);
  background: var(--gold-050);
  color: var(--ink);
}

.steps {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  list-style: none;
  counter-reset: step;
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.step__num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--gold-050);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.step__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.step__text {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.65;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}

.contact-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
}

.contact-list__item:last-child { border-bottom: 0; }

.contact-list__item strong {
  min-width: 6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.contact-list__item a {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 145, 47, .45);
}

.value-props {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.value-prop {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--gold);
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.65;
}

.value-prop__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.quote {
  max-width: 34ch;
  padding-left: var(--space-5);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

.quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}

.price-table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--navy);
  color: var(--navy);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.price-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}

.price-table tbody tr:hover td { background: var(--navy-050); }

.price-table td:first-child {
  font-weight: 600;
  color: var(--ink);
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer {
  margin-top: var(--space-11);
  padding-block: var(--space-10) var(--space-6);
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
  font-size: .9375rem;
}

.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--gold-400); }

.footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-8);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__title {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.footer__text {
  max-width: 42ch;
  color: rgba(255, 255, 255, .72);
  line-height: 1.7;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}

.footer__link:hover {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
}

/* The footer brand block sits on dark ground, so its lockup flips. The dark
   gold that carries the sub-line on cream is too dark on ink, so it takes the
   light gold here instead. */
.site-footer .brand__name { color: var(--paper); }
.site-footer .brand__sub { color: var(--gold-400); }
.site-footer .brand__mark {
  background: transparent;
  color: var(--gold-400);
  border-color: var(--gold-400);
}


/* ==========================================================================
   17. RESPONSIVE OVERRIDES
   Mobile first. Breakpoints at 640px, 900px and 1180px.
   ========================================================================== */

@media (min-width: 640px) {
  .container { padding-inline: var(--space-6); }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .addon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .steps,
  .value-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Term beside description once there is room for two columns. */
  .spec {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }

  .site-header__inner { padding-inline: var(--space-6); }
  .nav { padding-inline: var(--space-6); }
  .hero__inner { padding-inline: var(--space-6); }

  .guest-input { max-width: 12rem; }

  .cart-drawer__body,
  .cart-drawer__head { padding-inline: var(--space-6); }
}

/* The one grid that cannot take the shared two column step. The store ships
   exactly three products, so two columns leave the third card alone in a half
   empty row for this whole band, and three columns here would be about 176px
   a card, which is narrower than a spec line can be read at. One centred
   column instead, capped so the media does not blow up to 835px wide on the
   way to the three up layout at 900px. Keyed off the attribute the store grid
   already carries for page-store.js, because the two column rule this
   overrides is shared with the package grid and the add-on grid on the home
   page and both card grids on the about and cart pages, and every one of
   those wants its two columns here. */
@media (min-width: 640px) and (max-width: 899px) {
  [data-product-grid] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .section { padding-block: var(--space-12); }
  .section--tight { padding-block: var(--space-9); }

  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .value-props { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Three tracks for the three .footer__col every page ships. Contact holds
     the full email address, so it takes the wider of the two link columns. */
  .footer__grid { grid-template-columns: 1.4fr 1.2fr 1fr; }

  /* Full nav bar. The toggle and the mobile panel step aside. */
  .nav-toggle { display: none; }

  /* flex: none because the header row is at its tightest right here, from 900
     to 1180px, where five links share it with the lockup, the call link and
     the order button. Without it the bar is a shrink candidate and the links
     run into each other; the brand gives instead, exactly as it does on
     phones. */
  .nav {
    display: block;
    position: static;
    flex: none;
    padding: 0;
    max-height: none;
    overflow: visible;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }

  /* The fifth link is what put the 2rem rhythm out of reach in this band. At
     900px the row wanted about 853px of an 836px track: the lockup wrapped to
     a second line and the links squeezed onto three. Four 1rem gaps instead of
     four 2rem ones hand back 64px, which brings the row to 789px and leaves 47
     spare here, 32 at the narrowest width that still shows the bar. The wider
     rhythm comes back at 1180px. */
  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }

  .nav__item { border-bottom: 0; }

  .nav__link {
    position: relative;
    padding: var(--space-2) 0;
    font-size: .9375rem;
    font-weight: 500;
  }

  /* Gold rule that grows from the centre under the current page. */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--speed) var(--ease);
  }

  .nav__link:hover::after,
  .nav__link.is-active::after { transform: scaleX(1); }

  .header__actions { gap: var(--space-4); }

  .hero__inner { padding-block: var(--space-12) var(--space-10); }
  .hero--page .hero__inner { padding-block: var(--space-11) var(--space-9); }

  .pkg {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    padding-block: var(--space-11);
  }

  /* Image on the right for alternating rows, source order unchanged. */
  .pkg--reverse .pkg__media { order: 2; }
  .pkg--reverse .pkg__body { order: 1; }

  .pkg__media { position: sticky; top: 6rem; }

  .pkg__pricing { padding: var(--space-6); }

  .addon { padding: var(--space-6); }

  .cart-drawer { width: min(28rem, 100%); }
}

@media (min-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Past the tight band the header has hundreds of pixels spare, so the nav
     goes back to the spacing the rest of the site is set in. */
  .nav__list { gap: var(--space-6); }

  /* Matches the .addon padding step. Held back until here because a three-up
     product grid at 900px is only about 262px per column, and the wider inset
     would have cost every spec line a wrap. */
  .product-card__body,
  .product-card__foot { padding: var(--space-6); }

  .hero__title { max-width: 16ch; }

  .footer__grid { grid-template-columns: 2fr 1.2fr 1fr; }

  .spec { grid-template-columns: 13rem minmax(0, 1fr); }
}

@media (max-width: 639px) {
  /* Wide tables scroll inside their own box so the page never does. */
  .price-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .footer__bottom { justify-content: flex-start; }

  /* The phone header has to hold the brand, the 44px toggle and both actions
     inside 320px. Tighter gaps and a one-size-smaller lockup buy that room. */
  .site-header__inner { gap: var(--space-2); }

  .brand { gap: var(--space-2); }

  .brand__mark {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }

  /* The second line of the lockup is what wrapped to three rows and pushed the
     header from 4.5rem to 118px. The mark still carries the identity. */
  .site-header .brand__sub { display: none; }

  /* 1rem at 1.1 keeps even a four-line worst case at 70.4px, inside the 4.5rem
     that top: 4.5rem, calc(100vh - 4.5rem) and scroll-padding-top assume. The
     overflow lets the name shrink so the row never widens the page. */
  .site-header .brand__name {
    font-size: 1rem;
    line-height: 1.1;
    overflow: hidden;
  }

  /* Count moves to the corner: the button keeps a 44px square target and hands
     the 30px back to the wordmark. */
  .cart-button { padding-inline: var(--space-3); }

  .cart-button__count {
    position: absolute;
    top: calc(var(--space-1) * -1);
    right: calc(var(--space-1) * -1);
  }

  /* A long call label wraps here rather than shoving the order button off. */
  .header__actions .btn--quiet { white-space: normal; }
}

/* Below this a full-width button label cannot fit on one line, and nowrap made
   the page 10px wider than the viewport instead of wrapping. */
@media (max-width: 400px) {
  .btn { white-space: normal; }
}


/* ==========================================================================
   18. REDUCED MOTION
   ========================================================================== */

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

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

  /* Movement is what these people asked us to drop, not visibility, so the
     drawer, toast and card lifts switch to plain appearance instead. */
  .btn:hover,
  .card--link:hover,
  .card--link:focus-within { transform: none; }

  .cart-drawer { transform: translateX(102%); }
  .cart-drawer.is-open { transform: translateX(0); }

  .toast { transform: translate(-50%, 0); }
  .toast.is-visible { transform: translate(-50%, 0); }

  .nav__link::after { transition: none; }
}