.source-note {
  margin-top: 14px;
  color: rgba(81, 72, 63, 0.8);
  font-size: 11px;
}

.comparison-row {
  background: rgba(236, 223, 206, 0.42);
  border-radius: 17px 17px 0 0;
}

.route-dot.horseshoe {
  bottom: -2px;
}

.route-dot.lions-bay {
  bottom: 98px;
}

.route-dot.squamish {
  top: 92px;
}

.horseshoe-place {
  right: 10%;
  bottom: 36px;
}

.lions-bay-place {
  left: 10%;
  bottom: 135px;
  text-align: right;
}

.squamish-place {
  left: 13%;
  top: 122px;
  text-align: right;
}

.location-directory {
  display: grid;
  padding-top: 50px;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(50px, 9vw, 120px);
}

.location-links {
  display: grid;
  border-top: 1px solid var(--line);
}

.location-link {
  display: grid;
  min-height: 78px;
  padding: 16px 4px;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease, padding 160ms ease;
}

.location-link:hover {
  padding-right: 10px;
  padding-left: 10px;
  color: var(--green);
}

.location-link > span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
}

.location-link small {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.location-link strong {
  font-size: 19px;
}

.local-pledge {
  max-width: none;
  padding-right: max(24px, calc((100vw - 900px) / 2));
  padding-left: max(24px, calc((100vw - 900px) / 2));
  color: var(--cream);
  background:
    radial-gradient(circle at 90% 20%, rgba(229, 165, 58, 0.18), transparent 20rem),
    var(--green);
  text-align: center;
}

.local-pledge .eyebrow {
  justify-content: center;
}

.local-pledge > p:last-child {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(247, 240, 229, 0.82);
  font-size: 17px;
}

.fulfillment-message {
  margin: -6px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  color: var(--ink-soft);
  background: var(--cream-deep);
  font-size: 11px;
}

.delivery-fields {
  display: grid;
  gap: 15px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(236, 223, 206, 0.34);
}

/* Location landing pages */
.location-page {
  background: var(--cream);
}

.location-hero {
  padding: 96px max(24px, calc((100vw - 1040px) / 2));
  color: var(--cream);
  background:
    radial-gradient(circle at 85% 15%, rgba(229, 165, 58, 0.24), transparent 20rem),
    linear-gradient(135deg, #2b241d, var(--ink));
}

.breadcrumbs {
  margin-bottom: 42px;
  color: rgba(247, 240, 229, 0.58);
  font-size: 11px;
  font-weight: 750;
}

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

.location-hero h1 {
  max-width: 800px;
  margin-bottom: 25px;
  font-size: clamp(50px, 7vw, 84px);
}

.location-hero > p:last-of-type {
  max-width: 660px;
  margin-bottom: 32px;
  color: rgba(247, 240, 229, 0.7);
  font-size: 18px;
}

.location-content {
  display: grid;
  max-width: 1040px;
  margin: 0 auto;
  padding: 90px 24px;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(48px, 8vw, 100px);
}

.location-article h2,
.location-aside h2 {
  margin-bottom: 20px;
  font-size: clamp(36px, 5vw, 52px);
}

.location-article h3 {
  margin: 38px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
}

.location-article p,
.location-aside p {
  color: var(--ink-soft);
}

.location-aside {
  align-self: start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 18px 60px rgba(61, 41, 24, 0.08);
}

.service-facts {
  display: grid;
  margin: 0 0 26px;
}

.service-facts div {
  display: grid;
  padding: 14px 0;
  grid-template-columns: 0.8fr 1.2fr;
  border-bottom: 1px solid var(--line);
}

.service-facts dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-facts dd {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
}

.location-faq {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 90px;
}

.location-faq h2 {
  font-size: clamp(36px, 5vw, 52px);
}

.related-locations {
  padding: 76px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.related-locations h2 {
  font-size: clamp(36px, 5vw, 50px);
}

.related-locations nav {
  display: flex;
  max-width: 860px;
  margin: 28px auto 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.related-locations a {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 760px) {
  .location-directory,
  .location-content {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .location-link {
    grid-template-columns: 1fr auto;
  }

  .location-link small {
    grid-row: 2;
  }

  .location-link strong {
    grid-row: 1 / 3;
    grid-column: 2;
  }

  .location-hero {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .breadcrumbs {
    margin-bottom: 30px;
  }

  .location-content {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .lions-bay-place {
    left: 5%;
  }

  .squamish-place {
    left: 8%;
  }
}

/* ---------------------------------------------------------------
   Bountiful Food Delivery — partner menu, request block, partners
   --------------------------------------------------------------- */

.menu-partner + .menu-partner {
  margin-top: 56px;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}

.partner-tag {
  display: grid;
  max-width: 760px;
  margin: 0 0 34px;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
}

.partner-tag > span {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.menu-partner .product-group:first-of-type {
  margin-top: 0;
}

.menu-partner .product-group + .product-group {
  margin-top: 54px;
}

/* "Name any local business" card under the priced menu */
.anything-card {
  display: grid;
  margin-top: 46px;
  padding: clamp(26px, 4vw, 44px);
  grid-template-columns: 1.35fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 12%, rgba(229, 165, 58, 0.16), transparent 18rem),
    var(--cream);
}

.anything-card h3 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 400;
  line-height: 1.06;
}

.anything-card h3 em {
  color: var(--green);
  font-style: italic;
}

.anything-card p:not(.eyebrow) {
  max-width: 560px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.anything-card .button {
  white-space: nowrap;
}

/* Partner categories */
.partners-section {
  display: grid;
  gap: clamp(34px, 5vw, 56px);
}

.honest-note {
  margin-top: 16px;
  padding: 13px 15px;
  border-left: 3px solid var(--green);
  border-radius: 0 10px 10px 0;
  background: rgba(72, 99, 58, 0.08);
  font-size: 13px;
}

.partner-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
  list-style: none;
}

.partner-chip {
  display: grid;
  padding: 17px 18px;
  align-content: start;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
}

.partner-chip strong {
  font-size: 14px;
  font-weight: 750;
}

.partner-chip small {
  color: var(--ink-soft);
  font-size: 11.5px;
}

.partner-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 8px;
}

.partner-cta p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

/* Request-a-business fields inside the order dialog */
.request-block {
  display: grid;
  gap: 13px;
  padding: 17px;
  border: 1px dashed rgba(27, 67, 50, 0.42);
  border-radius: 15px;
  background: rgba(229, 165, 58, 0.09);
}

.request-block h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 400;
}

.request-block > p {
  margin: -6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.request-block textarea {
  min-height: 74px;
}

@media (max-width: 760px) {
  .anything-card {
    grid-template-columns: 1fr;
  }

  .anything-card .button {
    justify-self: start;
  }

  .partner-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.aside-note {
  margin: 16px 0 0;
  font-size: 11.5px;
}

.aside-note a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The footer link row grew a fourth entry; let it stack and wrap on phones
   instead of forcing the page into a horizontal scroll. */
@media (max-width: 760px) {
  footer {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 22px;
  }

  footer > div {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

/* ---------------------------------------------------------------
   "Ask for anything" — bring-it-up list and the three ask cards
   --------------------------------------------------------------- */

.bring-up-section {
  display: grid;
  gap: clamp(34px, 5vw, 56px);
}

.ask-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.ask-card {
  display: grid;
  padding: clamp(22px, 3vw, 30px);
  align-content: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.ask-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
}

.ask-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.ask-card .button {
  justify-self: start;
  margin-top: 4px;
}

/* Final call to action */
.final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
}

.final-contact {
  margin: 22px 0 0;
  color: rgba(247, 240, 229, 0.7);
  font-size: 13px;
}

.final-contact a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Contact row shared by the static pages */
.page-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 20px;
  font-size: 13px;
}

.page-contact a {
  color: var(--green);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   Skip link — first focusable element on every page
   --------------------------------------------------------------- */

.skip-link {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  color: var(--cream);
  background: var(--ink);
  font-size: 13px;
  font-weight: 750;
  transform: translateY(-120%);
  transition: transform 140ms ease;
}

/* A skip link is only ever reached by keyboard, so plain :focus is correct
   here — :focus-visible alone can leave it invisible in some engines. */
.skip-link:focus,
.skip-link:focus-visible {
  color: var(--cream);
  transform: translateY(0);
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

/* Skip destinations take focus programmatically; they are not tab stops, so
   an outline on the whole region would be noise rather than a focus cue. */
[tabindex="-1"]:focus {
  outline: none;
}

/* ---------------------------------------------------------------
   Policies page
   --------------------------------------------------------------- */

.policy-layout {
  display: grid;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 90px) 24px;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}

.policy-nav {
  position: sticky;
  top: 96px;
}

.policy-nav ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 2px;
  list-style: none;
}

.policy-nav a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  transition: background 140ms ease, color 140ms ease;
}

.policy-nav a:hover {
  color: var(--green);
  background: var(--cream-deep);
}

.policy-article h2 {
  margin: 52px 0 16px;
  font-size: clamp(28px, 3.6vw, 38px);
  scroll-margin-top: 96px;
}

.policy-article h2:first-child {
  margin-top: 0;
}

.policy-article p {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.62;
}

.policy-article strong {
  color: var(--ink);
}

.policy-article a:not(.button) {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-article code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--cream-deep);
  font-size: 13px;
}

.policy-steps {
  max-width: 68ch;
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.62;
}

.policy-steps li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.policy-callout {
  padding: 16px 18px;
  border-left: 3px solid var(--red);
  border-radius: 0 12px 12px 0;
  background: rgba(159, 52, 40, 0.07);
}

/* p.policy-note, not .policy-note: it needs to match .policy-article p's
   specificity (element+class) to win by source order alone, rather than
   needing !important to beat a same-specificity-tier compound selector. */
p.policy-note {
  margin-top: 22px;
  font-size: 12.5px;
  font-style: italic;
}

@media (max-width: 760px) {
  .policy-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .policy-nav {
    position: static;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }

  .policy-nav ul {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* Inline field errors: only take up space once they say something. */
.field-error:empty {
  display: none;
}

.field-error {
  color: var(--red);
}

/* Phones get a 960px-wide hero: 54KB rather than 111KB, and it is still
   larger than the box it paints into. Declared after styles.css so it wins. */
@media (max-width: 760px) {
  .hero-image {
    background:
      linear-gradient(90deg, rgba(33, 27, 22, 0.25), transparent 36%),
      url("assets/samosa-hero.jpg") 59% center / cover no-repeat;
  }
}

@supports (background-image: image-set(url("assets/samosa-hero.webp") type("image/webp"))) {
  @media (max-width: 760px) {
    .hero-image {
      background:
        linear-gradient(90deg, rgba(33, 27, 22, 0.25), transparent 36%),
        image-set(
          url("assets/samosa-hero-960.webp") type("image/webp"),
          url("assets/samosa-hero.jpg") type("image/jpeg")
        ) 59% center / cover no-repeat;
    }
  }
}

/* Eyebrow text on the saturated panels: the brand gold measures 3.1:1 on the
   green pledge and 3.9:1 on the red call to action, both short of AA for
   11px type. The lighter tint clears it at 4.6:1 and 5.6:1. */
.local-pledge .eyebrow,
.final-cta .eyebrow {
  color: var(--gold-on-colour);
}

/* ---------------------------------------------------------------
   Order form: iOS zoom, focus visibility, error placement
   --------------------------------------------------------------- */

/* iOS Safari zooms the whole page when a focused control is under 16px,
   which throws the customer out of the layout halfway through ordering. */
#order-form input,
#order-form select,
#order-form textarea {
  font-size: 16px;
}

/* styles.css sets outline: 0 on these controls and relies on a box-shadow.
   A shadow is discarded in forced-colours mode, so keyboard users can lose
   the focus indicator entirely. Restore a real outline for keyboard focus. */
#order-form input:focus-visible,
#order-form select:focus-visible,
#order-form textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* The cart error sits above the form; when it is the only thing wrong the
   customer is at the bottom of a long dialog and sees nothing happen. */
.cart-error:not(:empty) {
  scroll-margin-top: 20px;
}

.mailto-notice {
  display: grid;
  gap: 4px;
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--ink-soft);
  background: var(--cream-deep);
  font-size: 12px;
}

.mailto-notice strong {
  color: var(--ink);
  font-size: 12.5px;
}

.mailto-notice a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

/* ---------------------------------------------------------------
   Mobile navigation and a persistent way to order
   styles.css hides every nav link and the cart button below 760px, which
   left a phone with no navigation at all and — on an empty cart, since the
   sticky bar only appeared once something was in it — no way to open the
   order dialog without scrolling to the middle of the page.
   --------------------------------------------------------------- */

@media (max-width: 760px) {
  .site-header {
    height: auto;
    padding-top: 10px;
    padding-bottom: 8px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Bring the links back as a compact scrollable strip. */
  .site-header nav {
    width: 100%;
    overflow-x: auto;
    gap: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-header nav::-webkit-scrollbar {
    display: none;
  }

  .site-header nav > a {
    display: inline-block;
    padding: 4px 0;
    font-size: 12px;
    white-space: nowrap;
  }

  /* The sticky bar is now always present; its content changes with the cart. */
  .mobile-cart-bar[hidden] {
    display: flex !important;
  }

  .mobile-cart-bar.is-empty > div {
    display: grid;
    gap: 1px;
  }

  .mobile-cart-bar.is-empty strong {
    font-size: 13px;
  }

  .mobile-cart-bar.is-empty span {
    font-size: 11px;
  }
}

.mailto-warning {
  margin: 0 0 4px;
  padding: 11px 13px;
  border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0;
  color: var(--ink-soft);
  background: rgba(159, 52, 40, 0.07);
  font-size: 12.5px;
  text-align: left;
}

/* ---------------------------------------------------------------
   Approved Bountiful identity — September 2026
   All logo assets are crops/resizes of Steve's supplied artwork, not redraws.
   White logo surfaces preserve the snow, lettering and original colours.
   Existing copy, menu, cart, validation and accessibility rules stay intact.
   --------------------------------------------------------------- */
:root {
  --green: #104b31;
  --green-dark: #0b3524;
  --cream: #f8f5ed;
  --paper: #fffdf8;
  --cream-deep: #eee6d6;
  --gold: #ddb45f;
  --gold-ink: #856019;
  --gold-on-colour: #f3dba6;
  --ink: #202e26;
  --ink-soft: #505c53;
  --line: rgba(16, 75, 49, 0.15);
}

html {
  scroll-padding-top: 100px;
}

body {
  background: var(--cream);
}

.site-header {
  height: 92px;
  gap: 24px;
  background: #fff;
  border-bottom-color: var(--line);
}

/* Keep the existing link and its accessible text. Only the presentation is
   replaced, on EVERY page using the shared stylesheet, with the actual
   wordmark crop. No JS, remote image host, filter or synthetic lettering. */
.brand {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  width: 220px;
  height: 64px;
  background: #fff url("/assets/bountiful-wordmark.webp") center / contain no-repeat;
}

.brand > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.site-header nav {
  min-width: 0;
  gap: clamp(16px, 2vw, 28px);
}

.site-header nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.cart-button {
  background: var(--green);
}

.hero {
  background: var(--green-dark);
}

.hero-content {
  padding: 64px max(28px, calc((100vw - var(--max-width)) / 2));
  padding-right: clamp(28px, 5vw, 76px);
  background: linear-gradient(145deg, var(--green), var(--green-dark));
}

.hero h1 {
  font-size: clamp(60px, 6.3vw, 94px);
  line-height: 1.02;
}

.hero h1 em,
.location-hero h1 em,
.local-pledge h2 em,
.final-cta h2 em {
  color: var(--gold-on-colour);
}

.hero .eyebrow,
.location-hero .eyebrow {
  color: var(--gold-on-colour);
}

.hero-copy {
  max-width: 510px;
  color: #e2e9df;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
}

.hero-actions {
  flex-wrap: wrap;
  gap: 16px 24px;
}

.hero .button.primary,
.location-hero .button.primary {
  color: var(--green-dark);
  background: var(--gold-on-colour);
  box-shadow: none;
}

.hero .button.primary:hover,
.location-hero .button.primary:hover {
  background: #fff4d9;
}

.hero .text-link:not([hidden]),
.final-cta .text-link:not([hidden]) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hero-notes {
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 34px;
  color: #d4e0d5;
  letter-spacing: 0.02em;
}

.hero-notes li + li::before {
  left: -14px;
}

/* The original food photograph and its accurate aria-label remain in place.
   The upper panel repeats the identity decoratively; the header link already
   exposes the business name. Reserve the space so loading cannot shift it. */
/* The hero photograph fills its half of the grid at `cover`, as it always
   has. An earlier revision shrank it to a 310px strip and painted a white
   logo panel over the rest; the logo lives in the header wordmark instead,
   so the photograph gets the full column back. */
.hero-image {
  position: relative;
  background-color: var(--green-dark);
}

.hero-stamp {
  z-index: 2;
  bottom: 28px;
  right: 28px;
  width: 112px;
  height: 112px;
  background: var(--paper);
  transform: rotate(4deg);
}

.route-strip {
  padding-top: 32px;
  padding-bottom: 32px;
}

.route-strip strong {
  font-size: 36px;
}

.section h2 {
  color: var(--green-dark);
}

.bundle-card,
.value-board,
.location-aside,
.ask-card {
  box-shadow: 0 10px 32px rgba(16, 75, 49, 0.045);
}

.bundle-card.best {
  border-color: var(--green);
}

.location-hero {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
}

.breadcrumbs,
.location-hero > p:last-of-type {
  color: #e2e9df;
}

.local-pledge,
.final-cta {
  background: var(--green-dark);
}

.local-pledge h2,
.final-cta h2 {
  color: var(--cream);
}

footer {
  background: #fff;
  border-top: 1px solid var(--line);
}

.footer-brand {
  width: 220px;
  height: 64px;
}

@media (max-width: 1080px) {
  html { scroll-padding-top: 146px; }
  .site-header {
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: wrap;
    gap: 2px;
  }
  .site-header nav {
    width: 100%;
    overflow-x: auto;
    gap: 22px;
    scrollbar-width: none;
  }
  .site-header nav > a { white-space: nowrap; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .hero-content { padding: 48px 28px; }
  .hero h1 { font-size: 64px; }
}

@media (max-width: 760px) {
  .site-header { padding-left: 20px; padding-right: 20px; }
  .brand { width: 190px; height: 56px; }
  .site-header nav { gap: 22px; }
  .site-header nav > a { padding: 0; min-height: 44px; }
  .hero { min-height: 0; grid-template-columns: 1fr; }
  .hero-content { padding: 42px 24px 38px; }
  .hero h1 { font-size: clamp(56px, 14vw, 76px); }
  .hero-copy { margin-bottom: 24px; }
  .hero-notes { margin-top: 24px; font-size: 10px; }
  .hero-image {
    min-height: 440px;
  }
  .hero-stamp { width: 98px; height: 98px; bottom: 20px; right: 24px; }
  .route-strip { padding: 26px 16px; }
  .route-strip > div { gap: 8px; }
  .route-strip strong { font-size: 28px; }
  .route-strip span { font-size: 9px; letter-spacing: 0; }
  .footer-brand { width: 220px; height: 64px; }
}

@media (max-width: 360px) {
  .hero-notes { gap: 10px 20px; }
  .route-strip > div { flex-direction: column; text-align: center; }
}

/* Background artwork is decorative. Restore real brand text when a user's
   high-contrast settings or print output suppress background images. */
@media (forced-colors: active), print {
  .brand { background: none; width: auto; min-height: 56px; }
  .brand > span:last-child {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
    overflow: visible;
    white-space: normal;
  }
  .brand small { color: inherit; }
}