/* =============================================================================
   ESPRESSÉMENT, design system
   Warm ivory, espresso near-black, restrained caramel. Editorial typography,
   generous whitespace, a fluted texture borrowed from the cart front.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Warmer and a shade richer than before. The old ivory was close to grey at
     the top of the page; this one reads as cream under a warm light, which is
     what a café looks like. The accent moved from a flat caramel to a deeper
     amber with more red in it — closer to crema than to sand — so it carries
     as a real brand colour rather than a tint of the background.
     Every text pair below is measured for WCAG AA. */
  --ivory:        #F6F1E8;   /* page */
  --ivory-raised: #FEFCF8;   /* cards */
  --ivory-deep:   #EDE3D4;   /* alternating bands */
  --espresso:     #1E1712;   /* darkest surface + primary text */
  --espresso-2:   #30231A;
  --ink:          #241C16;
  --muted:        #66564A;   /* 7.4:1 on ivory */
  --muted-soft:   #71604F;   /* 5.4:1 on ivory, 4.9:1 on ivory-deep */
  --caramel:      #B0692C;   /* decorative amber */
  --caramel-ink:  #8A4E1E;   /* 5.3:1 on ivory — text-safe */
  --caramel-soft: #E8D3B4;
  --line:         rgba(30, 23, 18, 0.15);
  --line-strong:  rgba(30, 23, 18, 0.30);
  --line-dark:    rgba(246, 241, 232, 0.20);
  --success:      #3F6B4A;
  --warning-bg:   #F6EEDF;
  --danger:       #8E3B2F;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(48,35,26,.06), 0 6px 18px -12px rgba(48,35,26,.28);
  --shadow:    0 2px 6px rgba(48,35,26,.06), 0 18px 40px -26px rgba(48,35,26,.38);

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.7vw, 1.8rem);
  --step-3:  clamp(1.7rem, 1.42rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-5:  clamp(2.35rem, 1.75rem + 2.6vw, 3.9rem);

  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 7.5rem);
  --maxw: 1180px;
  --maxw-text: 62ch;
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky, so an anchor jump lands the target underneath it.
     Without this, "Voir les prix" scrolls the price table so that its
     2 h / 3 h / 4 h column headings sit behind the header and the visitor
     cannot tell which column is which duration. */
  scroll-padding-top: 110px;
}
@media (max-width: 760px) { html { scroll-padding-top: 86px; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, picture { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; color: var(--espresso); margin: 0 0 .5em; letter-spacing: -0.005em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; }
p  { margin: 0 0 1.1em; max-width: var(--maxw-text); }
a  { color: var(--caramel-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--espresso); }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
small { font-size: var(--step--1); }
:focus-visible { outline: 2.5px solid var(--caramel-ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--caramel-soft); color: var(--espresso); }

/* ---------------------------------------------------------------- utilities */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 780px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -130%; top: .5rem; z-index: 200;
  background: var(--espresso); color: var(--ivory); padding: .7rem 1.2rem; border-radius: var(--radius);
  text-decoration: none; transition: translate .18s ease;
}
.skip-link:focus { translate: -50% 0; color: var(--ivory); }
.text-muted { color: var(--muted); }
.stack > * + * { margin-top: 1rem; }
.flow-tight p { margin-bottom: .6em; }
.nowrap { white-space: nowrap; }

.eyebrow {
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  color: var(--caramel-ink); font-weight: 600; margin: 0 0 1rem; display: block;
}
.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head p { font-size: var(--step-1); color: var(--muted); line-height: 1.5; }
.lede { font-size: var(--step-1); color: var(--muted); line-height: 1.55; }

/* fluted texture — the cart front */
.fluted {
  background-image: repeating-linear-gradient(90deg,
    rgba(33,26,20,.045) 0 1px, transparent 1px 22px);
}
.fluted-dark {
  background-image: repeating-linear-gradient(90deg,
    rgba(247,243,236,.06) 0 1px, transparent 1px 22px);
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: inherit; font-weight: 600; font-size: var(--step-0);
  padding: .85em 1.6em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .12s ease, box-shadow .12s ease;
  min-height: 48px;
}
/* Raised, with a soft cast shadow and a lighter top edge, so the button reads
   as a physical thing. Pressing it drops it onto the page and shortens the
   shadow, which is what makes the relief legible rather than decorative. */
.btn--primary,
.btn--secondary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 1px rgba(48,35,26,.10),
    0 4px 10px -2px rgba(48,35,26,.28),
    0 10px 22px -10px rgba(48,35,26,.34);
}
.btn--primary:hover,
.btn--secondary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 2px rgba(48,35,26,.10),
    0 7px 16px -3px rgba(48,35,26,.30),
    0 16px 30px -12px rgba(48,35,26,.36);
}
.btn--primary:active,
.btn--secondary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(48,35,26,.28),
    0 1px 2px rgba(48,35,26,.18);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  color: var(--ivory); border-color: var(--espresso);
  background: linear-gradient(180deg, #2C211A 0%, var(--espresso) 55%, #171109 100%);
}
.btn--primary:hover {
  color: var(--ivory);
  background: linear-gradient(180deg, #3A2B21 0%, var(--espresso-2) 55%, #1C140D 100%);
}
.btn--secondary {
  color: var(--espresso); border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--ivory-raised) 0%, #F4EEE3 100%);
}
.btn--secondary:hover {
  color: var(--espresso); border-color: var(--espresso);
  background: linear-gradient(180deg, #FFFFFF 0%, #EFE7D9 100%);
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover, .btn--secondary:hover,
  .btn--primary:active, .btn--secondary:active { transform: none; }
}
.btn--ghost { background: transparent; color: var(--espresso); border-color: transparent; padding-inline: .6em; }
.btn--ghost:hover { color: var(--caramel-ink); }
.btn--light { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.btn--light:hover { background: var(--ivory-deep); color: var(--espresso); }
.btn--outline-light { background: transparent; color: var(--ivory); border-color: var(--line-dark); }
.btn--outline-light:hover { background: rgba(247,243,236,.1); color: var(--ivory); border-color: var(--ivory); }
.btn--sm { padding: .6em 1.15em; min-height: 40px; font-size: var(--step--1); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: .32em .8em; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted);
  background: transparent;
}
.badge--decaf { border-color: var(--caramel-soft); color: var(--caramel-ink); background: rgba(168,111,54,.07); }
.badge--signature { border-color: var(--espresso); color: var(--espresso); background: rgba(33,26,20,.05); }
.badge--pending { border-color: var(--line-strong); color: var(--muted); background: var(--warning-bg); }
.badge--preview { border-color: var(--caramel-ink); color: var(--caramel-ink); background: var(--ivory-raised); }

/* ------------------------------------------------------------ preview note */
.preview-banner {
  background: var(--espresso); color: var(--ivory);
  font-size: var(--step--1); line-height: 1.5; padding: .7rem 0;
}
.preview-banner .container { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.preview-banner strong { letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.preview-banner span { color: rgba(247,243,236,.82); }

.note {
  font-size: var(--step--1); color: var(--muted); line-height: 1.55;
  border-left: 2px solid var(--caramel-soft); padding-left: .9rem; margin: 1.2rem 0; max-width: var(--maxw-text);
}
.note--box {
  border-left: 0; background: var(--ivory-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem;
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,243,236,.93);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem; min-height: 74px;
  justify-content: space-between;
}
/* The artwork is 34px tall, which is under the 44px a thumb wants. Vertical
   padding gives the link a real tap target without moving the logo. */
.brand {
  display: inline-flex; align-items: center; gap: .8rem; text-decoration: none;
  flex-shrink: 0; padding-block: .3rem; min-height: 44px;
}
.brand img.brand__mark { width: auto; height: 58px; }
.brand img.brand__word { width: auto; height: 22px; margin-top: 2px; }
/* On a phone the wordmark is sized by WIDTH, not height: scaling it by height
   let it grow wider than the space beside the menu button and pushed the whole
   header off-screen at 390px and 430px. */
@media (max-width: 899px) {
  .brand img.brand__mark { height: clamp(36px, 11vw, 46px); }
  .brand img.brand__word { height: auto; width: min(40vw, 172px); }
  .brand { gap: .55rem; }
}

.brand__tag {
  display: none; font-size: .58rem; letter-spacing: .24em; color: var(--muted-soft);
  text-transform: uppercase; margin-top: 4px;
}
@media (min-width: 900px) { .brand__tag { display: block; } .brand img.brand__word { height: 24px; } }

.nav { display: none; }
@media (min-width: 980px) {
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
  .nav a {
    color: var(--ink); text-decoration: none; font-size: .93rem; letter-spacing: .01em;
    padding: .4rem 0; border-bottom: 1.5px solid transparent;
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--espresso); border-bottom-color: var(--caramel); }
}
.header-actions { display: flex; align-items: center; gap: .6rem; }
.lang-switch {
  display: inline-flex; align-items: center; border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden; font-size: .78rem; font-weight: 600; letter-spacing: .06em;
}
.lang-switch a, .lang-switch span {
  padding: .42em .75em; text-decoration: none; color: var(--muted); min-height: 34px;
  display: inline-flex; align-items: center;
}
.lang-switch [aria-current="true"] { background: var(--espresso); color: var(--ivory); }
.header-quote { display: none; }
@media (min-width: 640px) { .header-quote { display: inline-flex; } }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; cursor: pointer; color: var(--espresso);
}
@media (min-width: 980px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 20px; height: 20px; }

.mobile-nav {
  display: none; border-top: 1px solid var(--line); background: var(--ivory-raised);
  padding: 1rem var(--gutter) 1.5rem;
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 980px) { .mobile-nav { display: none !important; } }
/* :not(.btn) matters — this rule out-specifies .btn--primary, so without it
   the quote button in the open menu renders espresso-on-espresso and the
   label disappears entirely. */
.mobile-nav a:not(.btn) {
  display: block; padding: .85rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--espresso); font-size: 1.06rem;
}
.mobile-nav .btn { margin-top: 1.1rem; }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(165deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.02fr .98fr; } }
.hero__content { max-width: 46ch; }
/* On a phone the hero is the whole first screen, so centring it reads as a
   title page rather than a column pushed against the left edge. */
@media (max-width: 899px) {
  .hero__content { max-width: 100%; text-align: center; margin-inline: auto; }
  .hero__content .eyebrow { display: block; text-align: center; }
  .hero__content .btn-row { justify-content: center; }
}
.hero h1 { font-size: var(--step-5); margin-bottom: .45em; overflow-wrap: normal; hyphens: none; }
.hero__art { margin: 0; position: relative; }
.hero__art img {
  width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow);
  aspect-ratio: 8 / 5; object-fit: cover;
}
@media (max-width: 899px) { .hero__art img { aspect-ratio: 4 / 3; } }
.hero__art figcaption {
  position: absolute; left: .75rem; bottom: .75rem;
  background: rgba(247,243,236,.92); color: var(--muted); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .3em .7em; border-radius: 999px;
  border: 1px solid var(--line);
}
.hero__lead { font-size: var(--step-1); color: var(--ink); max-width: 44ch; margin-bottom: 1rem; }
.hero__clarify {
  font-size: var(--step-0); color: var(--espresso); font-weight: 600;
  border-left: 2px solid var(--caramel); padding-left: .9rem; max-width: 42ch; margin-bottom: 1rem;
}
.hero__support { font-size: var(--step--1); color: var(--muted); max-width: 44ch; margin-bottom: 1.9rem; }
.hero .btn-row { margin-bottom: 1.25rem; }
.hero__meta { font-size: var(--step--1); color: var(--muted-soft); letter-spacing: .04em; }

/* --------------------------------------------------------------- estimator */
.estimator {
  background: var(--ivory-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(1.35rem, 3vw, 2.25rem);
}
.estimator--float { margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem)); position: relative; z-index: 5; }
/* Columns are formed by available width, not by a fixed count at a viewport
   breakpoint. The quote form sits in a ~600px column beside the summary panel
   even on a wide screen, so a hard "4 columns above 1000px" rule crammed four
   fields into 137px each and wrapped every label onto two lines, which is what
   made the row look scattered. auto-fit means a column only exists when it can
   hold a label on one line: four across on the home page, two in the quote
   form, one on a phone. */
.estimator__grid {
  display: grid; gap: 1rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: start;
}
.estimator__grid > .field {
  display: grid;
  /* minmax(0, 1fr), not 1fr: the implicit column would otherwise be sized to
     the widest child's max-content and a long label would spill into the
     next field instead of wrapping. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-content: start;
  row-gap: .4rem;
}
/* Label on row 1, control on row 2, everything else flows under. The label row
   reserves one line's height and sits on its baseline, so a label that does
   wrap pushes its own control down without dragging the row's others with it. */
.estimator__grid > .field > label:first-child {
  grid-row: 1; align-self: end; min-height: 1.35em;
}
.estimator__grid > .field > input,
.estimator__grid > .field > select,
.estimator__grid > .field > textarea { grid-row: 2; }
.estimator__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ------------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field > label, .fieldset__legend {
  font-size: var(--step--1); font-weight: 600; color: var(--espresso); letter-spacing: .02em;
}
.field__help { font-size: .78rem; color: var(--muted-soft); line-height: 1.4; }
.field__error { font-size: .78rem; color: var(--danger); font-weight: 600; display: none; }
.field[data-invalid="true"] .field__error { display: block; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--danger); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--ivory-raised);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  padding: .72em .85em; width: 100%; min-height: 48px; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: var(--muted-soft); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--espresso); box-shadow: 0 0 0 3px rgba(168,111,54,.18);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B5B4D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9em center; background-size: 12px; padding-right: 2.4em;
}
.checkbox, .radio { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: var(--step--1); line-height: 1.5; }
.checkbox input, .radio input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--espresso); flex-shrink: 0; }
/* The label is the tap target, so give the row enough height for a thumb.
   Coarse pointers only — on a mouse the tighter row reads better. */
@media (pointer: coarse) {
  .checkbox, .radio { min-height: 44px; align-items: center; }
  .checkbox input, .radio input { margin-top: 0; }
}
fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.fieldset__legend { display: block; margin-bottom: .6rem; }
.fieldset__help { font-size: .85rem; color: var(--muted); margin: -.3rem 0 .8rem; max-width: 46ch; }
.fieldset--inline { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ivory-deep); }
.fieldset--inline .fieldset__legend { margin-bottom: .4rem; }

/* selectable option cards (event type, format, interests) */
.option-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.option {
  position: relative; display: flex; gap: .7rem; align-items: flex-start;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--ivory-raised);
  padding: .9rem 1rem; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.option:hover { border-color: var(--muted-soft); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__box {
  width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 4px;
  flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; background: var(--ivory);
}
.option--radio .option__box { border-radius: 50%; }
.option__box::after {
  content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--ivory); transform: scale(0);
  transition: transform .15s ease;
}
.option--radio .option__box::after { border-radius: 50%; }
.option input:checked ~ .option__box { background: var(--espresso); border-color: var(--espresso); }
.option input:checked ~ .option__box::after { transform: scale(1); }
.option input:focus-visible ~ .option__box { outline: 2.5px solid var(--caramel-ink); outline-offset: 3px; }
.option:has(input:checked) { border-color: var(--espresso); background: rgba(33,26,20,.035); }
.option__text { min-width: 0; }
.option__title { font-weight: 600; font-size: .96rem; color: var(--espresso); display: block; }
.option__desc { font-size: .82rem; color: var(--muted); line-height: 1.45; display: block; margin-top: .15rem; }
.option__price { font-size: .82rem; color: var(--caramel-ink); font-weight: 600; margin-top: .3rem; display: block; }
/* A one-line choice (yes / no / later) needs none of the card's breathing room,
   and three of them should sit on one row wherever they fit. */
.option-grid--tight { gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.option--compact { padding: .65rem .8rem; align-items: center; background: var(--ivory); }
.option--compact .option__box { margin-top: 0; }

.error-summary {
  border: 1.5px solid var(--danger); background: #FBF0EE; border-radius: var(--radius);
  padding: 1rem 1.15rem; margin-bottom: 1.5rem;
}
.error-summary h2 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--danger); margin-bottom: .4rem; }
.error-summary ul { margin: 0; padding-left: 1.1em; font-size: var(--step--1); }
.error-summary a { color: var(--danger); }

/* ------------------------------------------------------------ estimate out */
.estimate {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--ivory-raised); padding: clamp(1.25rem, 3vw, 2rem);
}
.estimate__lines { list-style: none; padding: 0; margin: 0 0 1rem; }
.estimate__line {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; margin: 0;
}
.estimate__line span:first-child { color: var(--ink); }
.estimate__amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--espresso); }
.estimate__amount--pending { color: var(--muted); font-weight: 500; font-style: italic; }
.estimate__line-note { display: block; font-size: .78rem; color: var(--muted-soft); margin-top: .2rem; font-style: normal; }
.estimate__totals { margin-top: .4rem; }
.estimate__total {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding-top: .9rem; margin-top: .3rem; border-top: 2px solid var(--espresso);
  font-family: var(--serif); font-size: var(--step-2); color: var(--espresso);
}
.estimate__total .estimate__amount { font-family: var(--serif); font-weight: 400; }
.estimate__sub { font-size: var(--step--1); color: var(--muted); display: flex; justify-content: space-between; padding: .3rem 0; margin: 0; }
.assumptions { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.assumptions h4 { font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: .6rem; }
.assumptions ul { list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--muted); }
.assumptions li { padding-left: 1.2rem; position: relative; margin-bottom: .35rem; }
.assumptions li::before { content: '·'; position: absolute; left: .35rem; color: var(--caramel); font-weight: 700; }

/* ---------------------------------------------------------------- pillars */
.pillars { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 860px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { border-top: 2px solid var(--espresso); padding-top: 1.2rem; }
.pillar h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.pillar p { color: var(--muted); margin-bottom: 0; font-size: .97rem; }

/* The three promises, folded under the price grid rather than given a section
   of their own — they restate what the grid and the two sections below it
   already show, so they are set quieter than a standalone pillar row. */
.promises {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promises > * { min-width: 0; }
.promise h3 {
  font-size: var(--step-0); margin-bottom: .45rem;
  letter-spacing: -.01em;
}
.promise p { color: var(--muted); margin-bottom: 0; font-size: .92rem; line-height: 1.6; }

/* The long tail of event types. Text only, deliberately — eight of these with
   artwork would outweigh the two that carry the page. */
.other-events { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem) clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 640px) { .other-events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .other-events { grid-template-columns: repeat(4, 1fr); } }
.other-events > * { min-width: 0; }
.other-event { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.other-event h3 { font-size: .97rem; line-height: 1.3; margin-bottom: .4rem; text-wrap: balance; }
.other-event p { color: var(--muted); font-size: .88rem; line-height: 1.55; margin-bottom: 0; }

/* The paid travel tiers, one per line so the distance and the fee stay paired
   however narrow the screen gets. */
.travel-tiers { display: block; margin-top: .6rem; }
.travel-tiers > span {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .3rem 0; border-top: 1px solid var(--line);
  font-size: .87rem;
}
.travel-tiers > span:first-child { border-top: 0; }
.travel-tiers strong { white-space: nowrap; }

/* --------------------------------------------------------------- included */
.included-grid { display: grid; gap: 1.6rem 2.5rem; }
@media (min-width: 700px) { .included-grid { grid-template-columns: repeat(2, 1fr); } }
.included-item { display: flex; gap: 1rem; align-items: flex-start; }
.included-item__num {
  font-family: var(--serif); font-size: 1.5rem; color: var(--caramel); line-height: 1; flex-shrink: 0;
  width: 2.2rem; border-top: 1.5px solid var(--caramel-soft); padding-top: .5rem;
}
.included-item h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.included-item p { font-size: .94rem; color: var(--muted); margin: 0; }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } .split--reverse > :first-child { order: 2; } }
.figure { position: relative; margin: 0; }
.figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.figure figcaption {
  position: absolute; left: .75rem; bottom: .75rem;
  background: rgba(247,243,236,.92); color: var(--muted); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .3em .7em; border-radius: 999px;
  border: 1px solid var(--line);
}

/* --------------------------------------------------------------- packages */
.packages { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .packages { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.package {
  background: var(--ivory-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; height: 100%;
}
.package--feature { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }
.package--feature h3, .package--feature .package__price { color: var(--ivory); }
.package--feature .package__tagline, .package--feature .package__desc { color: rgba(247,243,236,.78); }
.package--feature .package__meta { border-color: var(--line-dark); color: rgba(247,243,236,.72); }
.package--feature .package__list li::before { background: var(--caramel-soft); }
.package--feature .package__list { color: rgba(247,243,236,.9); }
.package--feature .badge { border-color: var(--line-dark); color: rgba(247,243,236,.85); }
.package h3 { font-size: var(--step-2); margin-bottom: .25rem; }
.package__tagline { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; min-height: 2.6em; }
.package__price { font-family: var(--serif); font-size: var(--step-3); color: var(--espresso); line-height: 1; margin-bottom: .2rem; }
.package__price small { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .35rem; }
.package__price-note { font-size: .78rem; color: var(--muted); margin-bottom: 1.1rem; }
.package__meta {
  display: grid; gap: .5rem; padding: 1rem 0; margin-bottom: 1rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}
.package__meta div { display: flex; justify-content: space-between; gap: 1rem; }
.package__meta dt { font-weight: 400; }
.package__meta dd { margin: 0; color: var(--espresso); font-weight: 600; text-align: right; }
.package--feature .package__meta dd { color: var(--ivory); }
.package__desc { font-size: .92rem; color: var(--muted); margin-bottom: 1.1rem; }
.package__list { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: .9rem; }
.package__list li { position: relative; padding-left: 1.3rem; margin-bottom: .5rem; }
.package__list li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--caramel);
}
.package__list--excluded li::before {
  background: none; width: 9px; height: 1.5px; top: .78em; background: var(--muted-soft);
}
.package__foot { margin-top: auto; padding-top: .5rem; }

/* --------------------------------------------------------------- signature */
.signature-feature { background: var(--espresso); color: var(--ivory); }
.signature-feature h2, .signature-feature h3 { color: var(--ivory); }
.signature-feature p { color: rgba(247,243,236,.82); }
.signature-feature .eyebrow { color: var(--caramel-soft); }
.signature-feature .figure figcaption { background: rgba(33,26,20,.86); border-color: var(--line-dark); color: rgba(247,243,236,.75); }
.signature-feature .lede { color: rgba(247,243,236,.92); }

/* -------------------------------------------------------------------- menu */
.menu-nav {
  display: flex; gap: .5rem; overflow-x: auto; padding: .35rem 0 .9rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line); scrollbar-width: thin;
}
.menu-nav a {
  flex-shrink: 0; font-size: .85rem; letter-spacing: .04em; text-decoration: none;
  padding: .5em 1em; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink);
  white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center;
}
.menu-nav a:hover, .menu-nav a[aria-current="true"] { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }

.menu-category { margin-bottom: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 110px; }
.menu-category__head { margin-bottom: 1.6rem; }
.menu-category__head h2 { font-size: var(--step-2); margin-bottom: .3rem; }
.menu-category__head p { color: var(--muted); font-size: .95rem; margin: 0; }
.menu-items { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .menu-items { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .menu-items { grid-template-columns: repeat(3, 1fr); } }
.menu-item {
  display: flex; flex-direction: column; background: var(--ivory-raised);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.menu-item__media { position: relative; aspect-ratio: 1 / 1; background: var(--ivory-deep); }
.menu-item__media img { width: 100%; height: 100%; object-fit: cover; }
.menu-item__flag {
  position: absolute; left: .55rem; bottom: .55rem; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; background: rgba(247,243,236,.92); border: 1px solid var(--line);
  color: var(--muted); padding: .25em .6em; border-radius: 999px;
}
/* This label is the site telling the visitor the picture is not a real event.
   At 9.6px it was too small to read on a phone, which defeats the point. */
@media (max-width: 720px) { .menu-item__flag { font-size: .72rem; } }
.menu-item__body { padding: 1.05rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.menu-item__body h3, .menu-item__body h4 { font-family: var(--serif); font-size: var(--step-1); margin: 0; color: var(--espresso); line-height: 1.2; }
.menu-item__body p { font-size: .88rem; color: var(--muted); margin: 0; }
.menu-item__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .5rem; }
.menu-item--signature { border-color: var(--espresso); border-width: 1.5px; }
@media (min-width: 640px) { .menu-item--signature { grid-column: span 2; flex-direction: row; } .menu-item--signature .menu-item__media { width: 42%; aspect-ratio: auto; } }

/* ----------------------------------------------------------------- builder */
.builder { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 900px) { .builder { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.builder__summary {
  background: var(--ivory-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem); position: sticky; top: 100px;
}
.builder__summary h3 { font-size: var(--step-1); margin-bottom: .8rem; }
.builder__list { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: .9rem; }
.builder__list li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.builder__list .tag { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-soft); white-space: nowrap; }
.builder__empty { color: var(--muted); font-size: .9rem; font-style: italic; }

/* ---------------------------------------------------------------- process */
.process { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 820px) { .process { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.process__step { border-top: 1px solid var(--line-strong); padding-top: 1.1rem; }
/* caramel-ink, not caramel: step-2 can shrink to 22px on a phone, which is
   under the 24px "large text" threshold, so these numbers need the 4.5:1
   text ratio (caramel-ink gives 5.85:1 on ivory) rather than the 3:1 one. */
.process__num { font-family: var(--serif); font-size: var(--step-2); color: var(--caramel-ink); display: block; margin-bottom: .4rem; line-height: 1; }
.process__step h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.process__step p { font-size: .93rem; color: var(--muted); margin: 0; }

/* -------------------------------------------------------------- events/faq */
.event-card {
  background: var(--ivory-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.event-card__media { aspect-ratio: 4 / 3; position: relative; background: var(--ivory-deep); }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; }
.event-card__body { padding: clamp(1.25rem, 3vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.event-card__body h3 { font-size: var(--step-2); margin-bottom: .3rem; }
.event-card__lead { font-size: var(--step-1); color: var(--caramel-ink); font-family: var(--serif); margin-bottom: .9rem; }
.event-card ul { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: .9rem; }
.event-card li { position: relative; padding-left: 1.3rem; margin-bottom: .45rem; color: var(--muted); }
.event-card li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--caramel-soft); }
.two-col { display: grid; gap: 1.5rem; }
@media (min-width: 880px) { .two-col { grid-template-columns: repeat(2, 1fr); } }

.faq-list { border-top: 1px solid var(--line); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
  font-family: var(--serif); font-size: var(--step-1); color: var(--espresso); line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: .5rem; top: 1.55rem; width: 11px; height: 11px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item__body { padding: 0 2.5rem 1.4rem 0; }
.faq-item__body p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ------------------------------------------------------------------ venue */
.venue-grid { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .venue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .venue-grid { grid-template-columns: repeat(3, 1fr); } }
.venue-item { background: var(--ivory-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; }
.venue-item h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--caramel-ink); margin-bottom: .45rem; }
.venue-item p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------------ areas */
.areas { display: grid; gap: 1rem; }
@media (min-width: 760px) { .areas { grid-template-columns: repeat(3, 1fr); } }
.area {
  border-top: 2px solid var(--espresso); padding-top: 1rem;
}
.area h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.area p { font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; }
.area__list { font-size: .82rem; color: var(--muted-soft); line-height: 1.6; }

/* ------------------------------------------------------------------ quote */
.stepper { display: flex; gap: .5rem; margin-bottom: 2rem; list-style: none; padding: 0; }
.stepper li { flex: 1; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-soft); }
.stepper__bar { display: block; height: 3px; background: var(--line); border-radius: 2px; margin-bottom: .5rem; }
.stepper li[data-state="done"] .stepper__bar,
.stepper li[data-state="current"] .stepper__bar { background: var(--espresso); }
.stepper li[data-state="current"] { color: var(--espresso); font-weight: 700; }
.step-panel[hidden] { display: none; }
.quote-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 980px) { .quote-layout { grid-template-columns: 1.15fr .85fr; } }
.quote-aside {
  background: var(--ivory-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem);
}
@media (min-width: 980px) { .quote-aside { position: sticky; top: 100px; } }
.summary-list { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.summary-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.summary-list dt, .summary-list .k { color: var(--muted); }
.summary-list .v { color: var(--espresso); font-weight: 600; text-align: right; }
.form-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; align-items: center; }
.result-panel { border: 1.5px solid var(--espresso); border-radius: var(--radius-lg); padding: clamp(1.35rem, 3vw, 2.25rem); background: var(--ivory-raised); }
.result-panel--preview { border-color: var(--caramel); background: var(--warning-bg); }
.result-panel--error { border-color: var(--danger); background: #FBF0EE; }
.result-ref {
  font-family: var(--serif); font-size: var(--step-2); letter-spacing: .05em; color: var(--espresso);
  background: var(--ivory); border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: .5rem 1rem; display: inline-block; margin-bottom: 1rem;
}

/* --------------------------------------------------------------- final cta */
.final-cta { background: var(--espresso); color: var(--ivory); text-align: center; }
.final-cta h2 { color: var(--ivory); }
.final-cta p { color: rgba(247,243,236,.8); margin-inline: auto; }
.final-cta .btn-row { justify-content: center; }
/* The copyable summary on the quote result panel. Pre-formatted, so it has to
   be told to wrap or it scrolls the page sideways on a phone. */
.result-panel__summary {
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  font-size: .85rem; line-height: 1.55; background: var(--ivory);
  padding: 1rem; border-radius: 8px; border: 1px solid var(--line);
  max-width: 100%; margin: 1rem 0;
}
.final-cta__links {
  margin: 2rem 0 0; font-size: .88rem;
  color: rgba(247,243,236,.62);
  display: flex; flex-wrap: wrap; gap: .3rem .7rem;
  align-items: baseline; justify-content: center;
}
.final-cta__links a { color: rgba(247,243,236,.92); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.final-cta__links a:hover { color: var(--ivory); }
.final-cta__links span { color: rgba(247,243,236,.4); }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--espresso-2); color: rgba(247,243,236,.75); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.site-footer h2, .site-footer h3 { color: var(--ivory); font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(247,243,236,.78); text-decoration: none; }
.site-footer a:hover { color: var(--ivory); text-decoration: underline; }
.footer-grid { display: grid; gap: 2.5rem; text-align: center; justify-items: center; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; text-align: left; justify-items: start; }
  .footer-brand { text-align: center; justify-self: start; }
}
.footer-brand { max-width: 360px; display: flex; flex-direction: column; align-items: center; }
/* The artwork is dark on transparent, so it needs a light panel behind it.
   That panel used to be painted before a lazy-loaded image arrived, which read
   as a blank white card — hence the logo "staying white". The image now loads
   eagerly and the panel reserves its exact height, so there is no empty state
   and no layout shift. */
/* The mark and the wordmark are stacked here rather than using the combined
   lockup artwork, because that artwork carries its own baked-in subline. */
.footer-logo {
  background: var(--ivory); border-radius: var(--radius); padding: 1.6rem 1.75rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; margin-bottom: 1.25rem; min-height: 11.5rem;
}
.footer-logo img { height: auto; display: block; }
.footer-logo__mark { width: 62px; }
.footer-logo__word { width: 208px; }
.footer-list { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.footer-list li { margin-bottom: .1rem; }
/* These are navigation, not fine print. At 16px tall they were a miss more
   often than a hit, which reads as a link that does not work. */
.footer-list a, .footer-list li { display: block; }
.footer-list a { padding-block: .55rem; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 759px) { .footer-list a { justify-content: center; } }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  align-items: center; font-size: .8rem; color: rgba(247,243,236,.55);
}
@media (max-width: 759px) { .footer-bottom { justify-content: center; text-align: center; } }
.footer-bottom__legal { display: flex; gap: .5rem 1rem; flex-wrap: wrap; justify-content: center; }
/* Fine print still has to be tappable — padding, not font size, gets it there. */
.footer-bottom__legal a {
  color: rgba(247,243,236,.72);
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .25rem;
}
.footer-bottom__legal a:hover { color: var(--ivory); }

/* -------------------------------------------------------------- sticky cta */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(247,243,236,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: .6rem var(--gutter);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  transform: translateY(110%); transition: transform .25s ease; visibility: hidden;
}
.sticky-cta[data-visible="true"] { transform: translateY(0); visibility: visible; }
.sticky-cta__text {
  font-size: .8rem; color: var(--muted); line-height: 1.3; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 400px) { .sticky-cta__text { display: none; } .sticky-cta .btn { width: 100%; } }
.sticky-cta .btn { flex-shrink: 0; }
@media (min-width: 980px) { .sticky-cta { display: none; } }
body.has-sticky-cta { padding-bottom: 0; }
@media (max-width: 979px) { body.sticky-active { padding-bottom: 76px; } }

/* ------------------------------------------------------------------- print */
.print-only { display: none; }
@media print {
  .site-header, .site-footer, .sticky-cta, .preview-banner, .btn, .menu-nav, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .print-only { display: block; }
  .section { padding-block: 0; }
  .print-sheet { padding: 0; }
  .print-sheet h1 { font-size: 22pt; }
  a[href]::after { content: ''; }
  .menu-item, .estimate, .package { break-inside: avoid; border-color: #ccc; }
}

/* print preview sheet (also used on screen inside the preview dialog) */
.print-sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); }
.print-sheet__head { text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; margin-bottom: 1.75rem; }
.print-sheet__head img { width: 190px; margin: 0 auto 1rem; }
.print-sheet__event { font-family: var(--serif); font-size: var(--step-2); color: var(--espresso); margin: 0; }
.print-sheet__cat { margin-bottom: 1.5rem; break-inside: avoid; }
.print-sheet__cat h3 { font-size: 1.05rem; letter-spacing: .04em; border-bottom: 1px solid var(--line); padding-bottom: .35rem; margin-bottom: .7rem; }
.print-sheet__drink { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; }
.print-sheet__drink span:last-child { color: var(--muted-soft); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.print-sheet__foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); text-align: center; }

dialog {
  border: 0; border-radius: var(--radius-lg); padding: 0; max-width: min(760px, 94vw); width: 100%;
  background: transparent; color: inherit;
}
dialog::backdrop { background: rgba(33,26,20,.55); backdrop-filter: blur(3px); }
.dialog__inner { background: var(--ivory); border-radius: var(--radius-lg); max-height: 88vh; overflow: auto; padding: clamp(1.25rem, 3vw, 2rem); }
.dialog__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ------------------------------------------------------------- owner sheet */
.owner-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 1.5rem; }
.owner-table th, .owner-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.owner-table th { font-weight: 600; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.owner-table td:last-child, .owner-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.owner-flag { padding: 1rem 1.15rem; border-radius: var(--radius); font-size: .9rem; font-weight: 600; }
.owner-flag--ok { background: #E8F0E9; color: var(--success); }
.owner-flag--no { background: #FBF0EE; color: var(--danger); }

/* ----------------------------------------------------------- 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;
  }
  .sticky-cta { transition: none; }
}

/* ------------------------------------------------------------ small screens */
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .estimator--float { margin-top: 0; }
  .package__tagline { min-height: 0; }
  .faq-item summary { font-size: 1.08rem; }
}

/* ------------------------------------------------------------- page heads */
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.page-head .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.page-head + section, .page-head + .section { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.package__price--text { font-size: var(--step-1); line-height: 1.25; }

/* --------------------------------------------- small-screen header + focus */
@media (max-width: 380px) {
  :root { --gutter: .85rem; }
  .site-header__inner { gap: .5rem; min-height: 64px; }

  .brand { gap: .45rem; }
  .lang-switch a, .lang-switch span { padding: .35em .5em; font-size: .72rem; }
  .menu-toggle { width: 42px; height: 42px; }
  .header-actions { gap: .4rem; }
  .preview-banner { font-size: .75rem; }
}
/* Keyboard focus must stay obvious on every control, including the custom
   option cards where the real input is visually hidden behind its box. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid var(--caramel-ink); outline-offset: 2px;
}
.option:has(input:focus-visible) { border-color: var(--espresso); box-shadow: 0 0 0 3px rgba(168,111,54,.28); }

/* -------------------------------------------------------------- price grid */
.price-layout { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.price-layout > * { min-width: 0; }   /* let the scrolling grid shrink inside its column */
@media (min-width: 960px) { .price-layout { grid-template-columns: 1.05fr .95fr; } }

.price-grid {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--ivory-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; margin: 1rem 0 .75rem;
}
.price-grid th, .price-grid td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.price-grid thead th {
  background: var(--espresso); color: var(--ivory); font-family: var(--sans);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  border-bottom: 0; white-space: nowrap;
}
.price-grid tbody th {
  font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--espresso);
  background: var(--ivory-deep); white-space: nowrap;
}
.price-grid tbody tr:last-child th, .price-grid tbody tr:last-child td { border-bottom: 0; }
.price-grid__staff { display: block; font-weight: 400; font-size: .74rem; color: var(--muted); margin-top: .2rem; }
.price-grid__price {
  display: block; font-family: var(--serif); font-size: var(--step-2); color: var(--espresso);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.price-grid__per { display: block; font-size: .72rem; color: var(--muted); margin-top: .15rem; }
/* The "3 h minimum" cell. Deliberately quiet: it is a rule, not a price, and
   it must not read as a missing number next to the figures beside it. */
.price-grid__min {
  display: block; font-size: clamp(.72rem, 2.2vw, .82rem); line-height: 1.3;
  color: var(--caramel-ink); font-style: italic;
}
/* The whole grid has to be readable without dragging it sideways. Four
   columns of tabular figures fit a 320px screen once the padding, the label
   wrap and the figure size are allowed to shrink with the viewport — so they
   are set in vw-aware clamps rather than fixed rems, and the guest label is
   allowed to wrap onto two lines instead of forcing the table wide. */
.price-grid { table-layout: fixed; }
.price-grid thead th:first-child, .price-grid tbody th { width: 34%; }
.price-grid th, .price-grid td {
  padding: clamp(.5rem, 1.6vw, .9rem) clamp(.35rem, 1.4vw, 1rem);
}
.price-grid thead th { font-size: clamp(.73rem, 2vw, .8rem); letter-spacing: .04em; white-space: normal; }
.price-grid tbody th { font-size: clamp(.8rem, 2.2vw, .95rem); white-space: normal; }
.price-grid__staff { font-size: clamp(.73rem, 1.9vw, .78rem); }
.price-grid__price { font-size: clamp(1rem, 3.4vw, var(--step-2)); white-space: nowrap; }
@media (max-width: 380px) {
  .price-grid thead th:first-child, .price-grid tbody th { width: 30%; }
}

.included-panel {
  background: var(--ivory-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.35rem, 3vw, 2rem);
}
.included-panel h3 { font-size: var(--step-2); margin-bottom: .4rem; }
.included-panel--compact { background: var(--ivory-deep); }
.package__list--two { columns: 1; }
@media (min-width: 620px) { .included-panel--compact .package__list--two { columns: 2; column-gap: 2rem; } }
.package__list--two li { break-inside: avoid; }

/* The grid scrolls sideways on small screens — say so, and fade the edge. */
.price-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-scroll__hint { display: none; }

/* Homepage pillar column (stacked beside the cart image) */
.pillars--stacked { grid-template-columns: 1fr !important; gap: 1.5rem; }
.pillars--stacked .pillar h3 { font-size: var(--step-1); }
.pillars--stacked .pillar { border-top-width: 1px; padding-top: .9rem; }

/* =============================================================================
   MOTION — only ever applied once the page has told us it is safe.
   Without JS, or with reduced motion, everything is simply visible.
   ========================================================================== */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  /* Was .55s with up to 350ms of stagger, so the last card in a row landed
     nearly a second after coming into view — on a phone that reads as the page
     lagging behind your thumb rather than as polish. */
  transition: opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Header condenses on scroll */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header__inner { transition: min-height .25s ease; }
.site-header.is-condensed { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(33,26,20,.5); }
.site-header.is-condensed .site-header__inner { min-height: 62px; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner { transition: none; }
}

/* Cards lift a little on hover — pointer devices only */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .menu-item, .event-card {
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  .menu-item:hover, .event-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--line-strong);
  }
  .menu-item__media img, .event-card__media img, .figure img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
  .menu-item:hover .menu-item__media img, .event-card:hover .event-card__media img { transform: scale(1.03); }
}

/* =============================================================================
   COLD DRINKS, FLAVOURS AND MENU EXTRAS
   ========================================================================== */
.cold-feature {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  background: var(--espresso); color: var(--ivory);
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  background-image: repeating-linear-gradient(90deg, rgba(247,243,236,.05) 0 1px, transparent 1px 22px);
}
@media (min-width: 860px) { .cold-feature { grid-template-columns: 1.05fr .95fr; } }
.cold-feature__text { padding: clamp(1.5rem, 4vw, 2.75rem); }
.cold-feature__text .eyebrow { color: var(--caramel-soft); }
.cold-feature__text h3 { font-family: var(--serif); font-size: var(--step-2); color: var(--ivory); margin-bottom: .6rem; }
.cold-feature__text p { color: rgba(247,243,236,.82); font-size: .97rem; }
.cold-feature__foam { font-size: .9rem; border-top: 1px solid var(--line-dark); padding-top: 1rem; margin-top: 1.2rem; }
.cold-feature__foam strong { color: var(--ivory); }
/* The lead time. Stated plainly, because it is the one thing a host has to do
   in advance — not a caveat about the price. */
.cold-feature__lead {
  font-size: .88rem; border-top: 1px solid var(--line-dark);
  padding-top: 1rem; margin-top: 1.2rem; margin-bottom: 0;
}
.cold-feature__lead strong { color: var(--ivory); }
.cold-feature__art { margin: 0; position: relative; align-self: stretch; }
.cold-feature__art img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.cold-feature__art figcaption {
  position: absolute; left: .75rem; bottom: .75rem;
  background: rgba(33,26,20,.86); color: rgba(247,243,236,.78); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .3em .7em; border-radius: 999px;
  border: 1px solid var(--line-dark);
}
@media (max-width: 859px) { .cold-feature__art { order: -1; } .cold-feature__art img { min-height: 200px; } }

.flavours { margin-top: 1rem; }
.flavours__list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.flavour-chip {
  font-size: .8rem; letter-spacing: .02em; padding: .38em .85em; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink);
  background: var(--ivory-raised); white-space: nowrap;
}
.cold-feature .flavour-chip {
  border-color: var(--line-dark); color: rgba(247,243,236,.9); background: rgba(247,243,236,.07);
}

.menu-extras { display: grid; gap: 1.75rem; }
@media (min-width: 760px) { .menu-extras { grid-template-columns: repeat(3, 1fr); } }
.menu-extra h2 { font-size: var(--step-1); margin-bottom: .35rem; }
.menu-extra p { font-size: .92rem; margin-bottom: .5rem; }

.badge--foam { border-color: #BFD3DC; color: #3D5B66; background: #EDF4F7; }
/* Not a price badge — a timing one. Deliberately the quietest of the three so
   it never reads as "extra". Contrast on #F4F1EC: 5.4:1. */
.badge--lead { border-color: var(--line); color: var(--muted); background: transparent; }
.menu-item__note { font-size: .8rem; color: var(--muted-soft); margin: 0; }
.menu-item__long { font-size: .88rem; color: var(--muted); margin: 0; }
.menu-item__pending { font-size: .8rem; color: var(--caramel-ink); margin: 0; }
.menu-item--signature { border-color: var(--espresso); border-width: 1.5px; }
@media (min-width: 640px) {
  .menu-item--wide { grid-column: span 2; flex-direction: row; }
  .menu-item--wide .menu-item__media { width: 42%; aspect-ratio: auto; }
}

/* ------------------------------------------------------ oversized statement */
.statement {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background: var(--ivory);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.statement__text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.9rem);
  line-height: 1.22; color: var(--espresso);
  max-width: 22ch; margin: 0 auto .9rem; text-wrap: balance;
}
.statement__by {
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted-soft); margin: 0;
}
/* Same oversized voice, but opening a section instead of standing alone, so
   it runs a little wider and needs no rules of its own. */
.statement__text--inline {
  max-width: 30ch; margin-bottom: 0;
  font-size: clamp(1.4rem, 1rem + 1.9vw, 2.5rem);
  text-align: center;
}

/* ------------------------------------------------------- signature creations */
.signature-grid { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 720px) { .signature-grid { grid-template-columns: repeat(3, 1fr); } }
.signature-card {
  background: rgba(247,243,236,.06); border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
}
.signature-card__art { margin: 0; position: relative; aspect-ratio: 1/1; background: var(--ivory-deep); }
.signature-card__art img { width: 100%; height: 100%; object-fit: cover; }
.signature-card__art figcaption {
  position: absolute; left: .6rem; bottom: .6rem; background: rgba(33,26,20,.86);
  color: rgba(247,243,236,.75); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .25em .6em; border-radius: 999px; border: 1px solid var(--line-dark);
}
.signature-card__body { padding: 1.1rem 1.25rem 1.4rem; }
.signature-card__body h3 { font-size: var(--step-1); color: var(--ivory); margin-bottom: .4rem; }
.signature-card__body p { font-size: .9rem; color: rgba(247,243,236,.78); margin: 0; }
.signature-card__pending { font-size: .78rem; color: var(--caramel-soft) !important; margin-top: .5rem !important; }
.signature-foot { max-width: 60ch; }
.signature-foot p { color: rgba(247,243,236,.82); }

/* The menu planner reads better as a two-up list beside its summary.
   Both columns need min-width:0 or the summary's long drink list sets a wide
   min-content and squeezes the choices into a narrow strip. */
.builder > * { min-width: 0; }
@media (min-width: 620px) {
  .builder > div:first-child .option-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .builder { grid-template-columns: 1.15fr .85fr; }
}
.builder__summary .builder__list li { align-items: flex-start; }
.builder__list li > span:first-child { min-width: 0; }
.builder__drinks {
  display: block; font-size: .78rem; color: var(--muted); line-height: 1.45;
  margin-top: .15rem; white-space: normal; overflow-wrap: break-word;
}

/* House coffee and kit — the two facts worth keeping from the page that was
   removed, set quietly beside the menu rather than given a page of their own. */
.house-note {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.house-note h3 { font-size: var(--step-0); margin-bottom: .45rem; }
.house-note p { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-bottom: .6rem; }
.house-note p:last-child { margin-bottom: 0; }

/* Example municipalities under each travel tier, so a distance means something */
.travel-tiers__zone { display: block; min-width: 0; }
.travel-tiers__zone em {
  display: block; font-style: normal; font-size: .78rem;
  color: var(--muted-soft); line-height: 1.4; margin-top: .1rem;
}
.note--sub { display: block; margin-top: .55rem; font-size: .84rem; color: var(--muted); }

/* Cold brew is the one menu choice that costs the owner a night's work before
   the event, so it is the one that has to be chosen rather than assumed. The
   card is marked so it does not read as an oversight that it starts unticked. */
.option--optin { border-style: dashed; }
.option--optin:has(input:checked) { border-style: solid; }
.option__optin {
  display: inline-block; margin-top: .45rem; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--caramel-ink); font-weight: 600;
}
.option--optin:has(input:checked) .option__optin { display: none; }

/* A lone yes/no card inside a fieldset — no grid needed for one item. */
.option--single { max-width: 22rem; }
.fieldset__foot {
  margin: .9rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.6;
  padding-top: .85rem; border-top: 1px solid var(--line);
}

/* Signature drinks are one item served two ways, not two items. */
.badge--hoticed { border-color: var(--caramel-soft); color: var(--caramel-ink); background: rgba(168,111,54,.06); }
.motion [data-reveal].is-in--instant { transition: none; }

/* -------------------------------------------------------------- menu board */
/* Category headings with the drinks named beneath — a menu, not a gallery. */
.menu-board { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 5vw, 4rem); }
@media (min-width: 680px) { .menu-board { grid-template-columns: repeat(2, 1fr); } }
.menu-board > * { min-width: 0; }
/* align-self keeps a short group from being stretched to the height of the
   tallest one in its row, which left a wide empty gap under "À base
   d'espresso" before the next rule began. */
.menu-board__group {
  border-top: 1.5px solid var(--espresso); padding-top: .9rem; align-self: start;
}
.menu-board__group h3 {
  font-family: var(--serif); font-size: var(--step-1); margin-bottom: .5rem;
  color: var(--espresso); line-height: 1.2;
  display: flex; align-items: center; gap: .6rem;
}
.menu-board__icon {
  width: 1.45em; height: 1.45em; flex-shrink: 0;
  color: var(--caramel-ink); opacity: .9;
}
.menu-board__drinks {
  margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.7;
  overflow-wrap: break-word;
}
.menu-board__note {
  margin: .5rem 0 0; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--caramel-ink); font-weight: 600;
}
.menu-board__foot {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted);
}

/* Brand phrase on its own line, the places beneath it. */
/* The hero eyebrow sits above a very large headline, so it reads smaller than
   the section eyebrows elsewhere rather than competing with the title. */
.eyebrow--stacked {
  display: block;
  font-size: clamp(.68rem, .62rem + .18vw, .76rem);
  letter-spacing: .18em;
}
.eyebrow--stacked em { display: block; font-style: normal; margin-top: .3rem; }

/* Why choose us — three short lines, before anything is asked of the reader. */
.why__title {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--caramel-ink); margin-bottom: 1.4rem; font-family: var(--sans); font-weight: 600;
}
.why { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why > * { min-width: 0; }
.why__item { border-top: 1.5px solid var(--espresso); padding-top: .85rem; }
.why__item h3 { font-size: var(--step-0); margin-bottom: .35rem; letter-spacing: -.01em; }
.why__item p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

/* Service areas: one promise, then a short distance table. The free zone does
   not list its 45 municipalities — "Grand Montréal" is the point. */
.area--free {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: baseline;
  justify-content: space-between;
  border: 1.5px solid var(--espresso); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; margin-bottom: 2rem;
}
.area--free h3 { font-size: var(--step-1); margin: 0; }
.area__sub { margin: .25rem 0 0; color: var(--muted); font-size: .92rem; }
.area__fee { margin: 0; font-weight: 600; color: var(--espresso); white-space: nowrap; }
.area__beyond { font-size: .95rem; color: var(--muted); margin-bottom: 1.1rem; }
.areas--paid { display: grid; gap: .1rem; }
.areas--paid .area {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  padding: .85rem 0; border-top: 1px solid var(--line);
}
.areas--paid .area h3 { font-size: .97rem; margin: 0; font-family: var(--sans); font-weight: 600; }
.areas--paid .area__fee { grid-row: 1; grid-column: 2; }
.areas--paid .area__list {
  grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--muted-soft); line-height: 1.5;
}