/* Homepage / storefront sections. */

/* --- Announcement bar ---------------------------------------------------- */

.announcement {
  margin: 0;                 /* it is a <p>; don't inherit the paragraph margin */
  background: var(--c-bg-invert);
  color: var(--c-fg-invert);
  text-align: center;
  font-size: var(--fs-body-xs);
  line-height: var(--announcement-h);
  height: var(--announcement-h);
  overflow: hidden;
}

/* --- Header ---------------------------------------------------------------
   Sticky. Transparent while sitting over the hero, solid white once scrolled
   or whenever the page has no hero to sit over.
   ------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--c-bg);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  gap: var(--sp-4);
}

/* Over-hero state: the header sits transparently on the hero image until the
   page scrolls, then turns solid. It stays in normal flow and sticky the whole
   time — the hero is pulled up underneath it instead, which keeps the
   announcement bar above visible rather than covered by a fixed header. */
.header--over-hero {
  background: transparent;
  color: var(--c-fg-invert);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.header--over-hero:not(.is-stuck) .header__logo img { filter: invert(1) brightness(2) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.header--over-hero:not(.is-stuck) svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5)); }
.header--over-hero.is-stuck { text-shadow: none; }
.header--over-hero.is-stuck {
  background: var(--c-bg);
  color: var(--c-fg);
  border-bottom-color: var(--c-line-soft);
}
.has-over-hero-header .hero,
.has-over-hero-header .work-hero {
  margin-top: calc(-1 * var(--header-h));
  /* Keep hero copy clear of the header that now overlaps it. */
  padding-top: var(--header-h);
}

.header__nav { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.header__nav-link {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  padding-block: var(--sp-2);
}
.header__nav-link:hover { text-decoration: underline; text-underline-offset: 0.35em; }

.header__logo {
  justify-self: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* The lockup is drawn in hairlines and carries a strapline under the wordmark,
   so it needs real height: at 2.5rem it read as a grey smudge. The header is
   5.25rem tall, which leaves room for 3.75rem with breathing space. */
.header__logo img { height: clamp(3rem, 4.2vw, 3.75rem); width: auto; display: block; }
.header--over-hero:not(.is-stuck) .header__logo img,
.on-invert .header__logo img { filter: invert(1) brightness(2); }

.header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.header__icon {
  position: relative;   /* the cart badge anchors to this, not to the header */
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
}
.header__icon svg { width: 1.35rem; height: 1.35rem; stroke: currentColor; fill: none; stroke-width: 1.5; }

.cart-count {
  position: absolute;
  top: 0.9rem;
  left: 1.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 0.2rem;
  background: var(--c-fg);
  color: var(--c-bg);
  border-radius: 999px;
  font-size: 0.6875rem;
  line-height: 1.05rem;
  text-align: center;
}
.header--over-hero:not(.is-stuck) .cart-count { background: var(--c-fg-invert); color: var(--c-fg); }

.header__burger { display: none; }

@media (max-width: 60rem) {
  .header__inner { grid-template-columns: 1fr auto 1fr; }
  .header__nav { display: none; }
  .header__burger { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; }
  .header__burger svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; stroke-width: 1.5; }
}

/* --- Hero -----------------------------------------------------------------
   Full-bleed image, text block right-aligned in the lower third on desktop and
   re-centred on small screens. The CTA is an underlined text link, not a button.
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100svh - var(--announcement-h));
  display: grid;
  align-items: end;
  color: var(--c-fg-invert);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; }

/* Just enough scrim to hold contrast over a bright photograph. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two scrims: one under the copy at the foot, one under the header at the
     top, so white navigation holds up over a bright photograph. */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 9rem, transparent 16rem),
    linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.05) 45%, transparent 70%);
}

.hero__content {
  padding-block: clamp(3rem, 8vh, 7rem);
  display: grid;
  justify-items: end;
  text-align: right;
  gap: var(--sp-4);
}
.hero__title { font-size: var(--fs-display); text-wrap: balance; }
.hero__sub { font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem); }

@media (max-width: 48rem) {
  .hero { align-items: center; }
  .hero__content { justify-items: center; text-align: center; }
  .hero::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.35));
  }
}

/* --- Press row ----------------------------------------------------------- */

.press__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.press__item {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 0.8rem + 1.1vw, 1.6rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.press__item img { height: clamp(1.5rem, 3vw, 2.25rem); width: auto; }
.press__title { color: inherit; text-decoration: none; }
.press__title:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* Partner logos: real marks in their own colours, sized to a common height
   so eight of them read as one row. */
.press__list--logos { gap: clamp(1.25rem, 3.5vw, 3rem); row-gap: var(--sp-5); }
.press__list--logos .press__item img {
  height: clamp(2.25rem, 4.5vw, 3.5rem);
  width: auto;
  max-width: min(11rem, 40vw);
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}
.press__list--logos .press__item:hover img,
.press__list--logos .press__item:focus-within img { transform: translateY(-2px); }
.press__list--logos a { display: block; }

/* --- Must haves ----------------------------------------------------------- */

.must-haves {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
  margin-top: var(--sp-6);
}
@media (max-width: 64rem) { .must-haves { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .must-haves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); } }

/* --- Reviews -------------------------------------------------------------- */

.reviews-head { text-align: center; }
.reviews-head__summary {
  margin: var(--sp-3) auto 0;
  max-width: 40rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}
.stars { display: inline-flex; gap: 0.1em; font-size: 1.1em; line-height: 1; letter-spacing: 0; }
.star { color: var(--c-line); }
.star.is-on { color: var(--c-fg); }

.review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.review {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-5);
  border: 1px solid var(--c-line-soft);
  background: var(--c-bg);
}
.review__body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  quotes: "\201C" "\201D";
}
.review__body::before { content: open-quote; }
.review__body::after { content: close-quote; }
.review__who { margin: 0; font-size: var(--fs-body-sm); color: var(--c-fg-muted); }
.review__ordered { display: block; margin-top: 0.15em; }
.review__verified {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05em 0.5em;
  border: 1px solid var(--c-success);
  border-radius: 999px;
  color: var(--c-success);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.review-toggle { margin-top: var(--sp-6); text-align: center; }
.review-toggle > summary { display: inline-flex; list-style: none; cursor: pointer; }
.review-toggle > summary::-webkit-details-marker { display: none; }
.review-toggle[open] > summary { display: none; }
.review-toggle__body { max-width: 40rem; margin: 0 auto; text-align: left; }
.review-form { display: grid; gap: var(--sp-4); }
.review-form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 52rem) { .review-form-wrap { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* Star picker: the radios sit reversed so a plain sibling selector lights
   every star up to the one hovered or chosen. */
.rating { border: 0; margin: 0; padding: 0; }
.rating legend { font-size: var(--fs-body-sm); margin-bottom: var(--sp-2); }
.rating__stars { display: inline-flex; flex-direction: row-reverse; gap: 0.15em; }
.rating__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__stars label { font-size: 2rem; line-height: 1; color: var(--c-line); cursor: pointer; transition: color 0.12s ease; }
.rating__stars label:hover,
.rating__stars label:hover ~ label,
.rating__stars input:checked ~ label { color: var(--c-fg); }
.rating__stars input:focus-visible + label { outline: 2px solid var(--c-fg); outline-offset: 2px; }

/* --- Catalogue ------------------------------------------------------------ */

.catalogue__actions { margin-bottom: var(--sp-6); }
.catalogue-grid {
  columns: 4 14rem;
  column-gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalogue__cell { break-inside: avoid; margin: 0 0 var(--sp-3); }
.catalogue__cell a { display: block; background: var(--c-placeholder); }
.catalogue__cell img { width: 100%; height: auto; display: block; transition: opacity 0.25s ease; }
.catalogue__cell a:hover img { opacity: 0.88; }

/* --- Rich text ----------------------------------------------------------- */

.richtext { text-align: center; }
.richtext__body { margin-top: var(--sp-4); }
.richtext .btn-row { margin-top: var(--sp-6); }

/* --- Carousel -------------------------------------------------------------
   Scroll-snap rail that starts at the page gutter and runs off the right edge,
   so a partially visible card is the affordance that says "this scrolls".
   ------------------------------------------------------------------------- */

.carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.carousel__label { border-bottom: 2px solid currentColor; padding-bottom: 0.35rem; }

.carousel__controls { display: flex; gap: var(--sp-4); }
.carousel__btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transition: opacity var(--dur-fast) var(--ease);
}
.carousel__btn svg { width: 2rem; height: 1rem; stroke: currentColor; stroke-width: 1.25; fill: none; }
.carousel__btn[disabled] { opacity: 0.25; cursor: default; }

.carousel__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w, clamp(15rem, 22vw, 21rem));
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Escape the wrap on the right only. */
  margin-right: calc(-1 * var(--page-gutter));
  padding-right: var(--page-gutter);
}
.carousel__rail::-webkit-scrollbar { display: none; }
.carousel__rail > * { scroll-snap-align: start; }

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

/* Full-bleed variant: the rail starts at the gutter but bleeds both edges. */
.carousel--bleed .carousel__rail {
  margin-inline: calc(-1 * var(--page-gutter));
  padding-inline: var(--page-gutter);
}

@media (max-width: 48rem) {
  .carousel__rail { --card-w: 72vw; }
}

/* --- Product card -------------------------------------------------------- */

.card { display: grid; gap: var(--sp-3); }
.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--c-placeholder);
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }
.card--paper .card__media { background: var(--c-bg-alt); padding: 8%; }
.card--paper .card__media img {
  object-fit: contain;
  box-shadow: 0 0 0 1px var(--c-line), 0 8px 20px -12px rgba(0, 0, 0, 0.4);
}
.card__free { color: var(--c-fg); font-weight: 600; }

.card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 0.25rem 0.5rem;
  background: var(--c-bg);
  font-family: var(--font-heading);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.card__price { font-size: var(--fs-body-sm); color: var(--c-fg-muted); }

/* --- Countdown bar ------------------------------------------------------- */

.countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-block: var(--sp-6);
  text-align: center;
}
.countdown__title { font-family: var(--font-heading); font-size: var(--fs-h3); }
.countdown__clock { display: flex; gap: var(--sp-4); }
.countdown__unit { min-width: 3.25rem; }
.countdown__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.countdown__unit-label {
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-fg-invert-muted);
}

/* --- Split (image/video with text) --------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.split--media-first .split__media { order: -1; }
.split__media { aspect-ratio: 4 / 5; background: var(--c-placeholder); overflow: hidden; }
.split__media img,
.split__media video { width: 100%; height: 100%; object-fit: cover; }
.split__body { display: grid; gap: var(--sp-4); justify-items: start; }
.split__points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.split__points li { font-family: var(--font-heading); font-size: var(--fs-h3); }

@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
  .split__body { justify-items: center; text-align: center; }
}

/* --- Gallery tile (UGC + case studies) ----------------------------------- */

.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--c-placeholder);
  overflow: hidden;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-4);
  color: var(--c-fg-invert);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
.tile__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  text-transform: uppercase;
}
.tile__meta { font-size: var(--fs-body-sm); color: var(--c-fg-invert-muted); }

/* --- FAQ accordion ------------------------------------------------------- */

.faq { max-width: 44rem; margin-inline: auto; }
.faq__title { margin-bottom: var(--sp-5); }
.faq__item { border-top: 1px solid var(--c-line-soft); }
.faq__item:last-child { border-bottom: 1px solid var(--c-line-soft); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding-block: var(--sp-5);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
}
.faq__sign { position: relative; flex: 0 0 auto; width: 1rem; height: 1rem; }
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset-block: 50%;
  inset-inline: 0;
  border-top: 1.5px solid currentColor;
  transition: transform var(--dur) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(0deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--sp-5); color: var(--c-fg-muted); }

/* --- Newsletter ---------------------------------------------------------- */

.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.newsletter__form .field { flex: 1 1 14rem; }
.newsletter__note { margin-top: var(--sp-3); font-size: var(--fs-body-xs); color: var(--c-fg-muted); }

@media (max-width: 52rem) {
  .newsletter { grid-template-columns: 1fr; }
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  background: var(--c-bg-invert);
  color: var(--c-fg-invert);
  padding-block: var(--section-pad-tight);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.footer__list a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.footer__mission { color: var(--c-fg-invert-muted); max-width: 32ch; }

.footer__subscribe {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--c-line-invert);
  padding-bottom: var(--sp-2);
}
.footer__subscribe input {
  flex: 1;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: var(--sp-2) 0;
}
.footer__subscribe input::placeholder { color: var(--c-fg-invert-muted); }
.footer__subscribe button {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer__social { display: flex; gap: var(--sp-4); margin-top: var(--sp-5); }
.footer__social svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line-invert);
  font-size: var(--fs-body-xs);
  color: var(--c-fg-invert-muted);
}

@media (max-width: 62rem) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* --- Desktop dropdown ----------------------------------------------------
   Opens on hover and on keyboard focus, so it is reachable without a pointer.
   ------------------------------------------------------------------------- */

.header__nav-list > li { position: relative; }

/* Shared caret for the nav dropdown and the currency switcher. */
.caret {
  display: inline-block;
  width: 0.62em;
  height: auto;
  margin-left: 0.4em;
  vertical-align: baseline;
  transition: transform var(--dur-fast) var(--ease);
}

.header__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  min-width: 13rem;
  margin: 0;
  padding: var(--sp-3) 0;
  list-style: none;
  background: var(--c-bg);
  color: var(--c-fg);
  border: 1px solid var(--c-line-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    visibility var(--dur-fast);
}
.header__nav-list > li:hover > .header__submenu,
.header__nav-list > li:focus-within > .header__submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.header__submenu a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body-sm);
}
.header__submenu a:hover { background: var(--c-bg-alt); }

/* The mega menu spans the header's full width, so its anchor is the header
   rather than the nav item. */
.header__nav-list > li.has-mega { position: static; }
.header__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--c-bg);
  color: var(--c-fg);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  box-shadow: 0 24px 40px -30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    visibility var(--dur-fast);
}
.header__nav-list > li:hover > .header__mega,
.header__nav-list > li:focus-within > .header__mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.header__mega-inner {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr)) 18rem;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
}
.header__mega-col ul { margin: 0; padding: 0; list-style: none; columns: var(--col-count, 1); column-gap: var(--sp-5); }
.header__mega-col--wide { grid-column: span 2; }
.header__mega-col--wide ul { columns: 2; }
.header__mega-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.header__mega-title a { color: inherit; }
.header__mega-col li a {
  display: block;
  padding-block: 0.3rem;
  font-size: var(--fs-body-sm);
  break-inside: avoid;
}
.header__mega-col li a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.header__mega-promo {
  display: grid;
  align-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--c-bg-alt);
  text-decoration: none;
  color: inherit;
}
.header__mega-promo:hover { background: var(--c-placeholder); }
.header__mega-promo-kicker {
  font-family: var(--font-heading);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.header__mega-promo-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4, 1.35rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.header__mega-promo-text { font-size: var(--fs-body-sm); color: var(--c-fg-muted); }
.header__mega-promo .btn-text { justify-self: start; margin-top: var(--sp-2); }

/* --- Mobile drawer -------------------------------------------------------- */

.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(22rem, 86vw);
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--c-bg);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.drawer__title {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.drawer__close { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; }
.drawer__close svg { width: 1.35rem; height: 1.35rem; stroke: currentColor; stroke-width: 1.5; fill: none; }

.drawer__list, .drawer__sublist { margin: 0; padding: 0; list-style: none; }
.drawer__list > li { border-bottom: 1px solid var(--c-line-soft); }

.drawer__link {
  display: block;
  padding-block: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.drawer__sublist { padding-bottom: var(--sp-4); }
.drawer__subtitle {
  padding: var(--sp-2) 0 var(--sp-1) var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.drawer__sublink {
  display: block;
  padding-block: var(--sp-2);
  padding-left: var(--sp-4);
  color: var(--c-fg-muted);
  font-size: var(--fs-body-sm);
}

.drawer__foot { margin-top: auto; padding-top: var(--sp-6); }

/* The drawer is mobile-only; on wide screens the inline nav is used instead. */
@media (min-width: 60.0625rem) {
  .drawer { display: none; }
}

/* Locks background scroll while the drawer is open. */
body.is-drawer-open { overflow: hidden; }

/* --- Numbered steps -------------------------------------------------------
   The numeral is authored in the markup rather than left to list-style, so it
   can be typeset in the heading face at display size. That means the UA marker
   has to go or the step is numbered twice.
   ------------------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  justify-content: center;
  text-align: center;
}
.steps > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 22rem;
  margin-inline: auto;
}
.steps__n {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1;
  color: var(--c-fg);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid currentColor;
}

/* The lockup in the footer's black band. It sits first in the base row, so the
   copyright and the city flow after it. */
.footer__logo {
  height: 2.6rem;
  width: auto;
  display: block;
  margin-right: auto;
}
@media (max-width: 44rem) {
  .footer__logo { margin-right: 0; }
}