/* =====================================================================
   HOME — template layer

   The live homepage, untouched in structure, order, animation, background
   and footer. On top of it: the template's typography (Google Sans Flex for
   text, Google Sans Code for labels) and the template's card language
   (square corners, hairline borders, mono labels with a square accent
   bullet, numbered indexes).

   Scope: only the page content. The header, its dropdown and drawer, and
   the footer keep the live site's own type, as asked.
   ===================================================================== */

:root {
  --tpl-sans: "Google Sans Flex", system-ui, -apple-system, sans-serif;
  --tpl-mono: "Google Sans Code", ui-monospace, SFMono-Regular, monospace;
  --tpl-line: rgba(244, 241, 234, 0.14);
  --tpl-line-strong: rgba(244, 241, 234, 0.22);
}

/* ---------- 1. Typography ------------------------------------------- */

/* Re-point the two font tokens inside the content sections. Everything
   that reads var(--font-display) / var(--font-body) there now resolves
   to the template face; the header and footer keep resolving to the live
   faces because they sit outside these sections. */
body.home .intro-scroll,
body.home .hero,
body.home .team,
body.home .approach,
body.home .build,
body.home .svcx,
body.home .modular-note,
body.home .cases,
body.home .faq,
body.home .booking,
body.home .cta {
  --font-display: var(--tpl-sans);
  --font-body: var(--tpl-sans);
  font-family: var(--tpl-sans);
  letter-spacing: -0.01em;
}

/* Template headings are set light and tight: weight ~450, -2% tracking,
   line-height 1. */
body.home .section__title,
body.home .intro-content h1,
body.home .intro-content h2,
body.home .cta__title,
body.home .wb-panel__title,
body.home .apx__title,
body.home .hcase__brand,
body.home .team-card__name {
  font-family: var(--tpl-sans) !important;
  font-weight: 450 !important;
  letter-spacing: -0.02em !important;
}

body.home .section__title {
  line-height: 1.02 !important;
}

body.home .hero__subtitle,
body.home .section__intro,
body.home .wb-panel__desc,
body.home .apx__desc,
body.home .hcase__did,
body.home .faq__answer,
body.home .faq__answer p,
body.home .cta__text,
body.home .svcx__detail p,
body.home .booking p {
  font-family: var(--tpl-sans) !important;
  letter-spacing: -0.015em;
}

/* Section labels become the template's mono label with its square bullet. */
/* The label is split into one span per letter by the live site's
   letter animation, so no flex gap here: that would space every letter. */
body.home .section__eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--tpl-mono) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(244, 241, 234, 0.82) !important;
}

body.home .section__eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  flex: none;
  background: var(--color-accent);
}

/* Smaller labels that already behave like eyebrows. */
body.home .hero__trust-label,
body.home .apx__eyebrow,
body.home .apx__num,
body.home .hcase__country,
body.home .hcase__tags,
body.home .svcx__link-label,
body.home .intro-scroll-cue__label,
body.home .team-card__role {
  font-family: var(--tpl-mono) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

/* Buttons and form controls follow the text face. */
body.home .hero .btn,
body.home .build .btn,
body.home .cases .btn,
body.home .cta .btn,
body.home .svcx__detail-link,
body.home .wb-tab,
body.home .cta__form input,
body.home .cta__form textarea,
body.home .cta__form label,
body.home .form__note {
  font-family: var(--tpl-sans) !important;
}

/* ---------- 2. Who we are: square tiles --------------------------- */

body.home .team__grid {
  gap: 0 !important;
  border: 1px solid var(--tpl-line);
  border-right: none;
}

body.home .team-card {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--tpl-line) !important;
  box-shadow: none !important;
}

body.home .team-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

body.home .team-card__photo,
body.home .team-card__photo img {
  border-radius: 0 !important;
}

/* Caption bar like the template's section headers: name on the left,
   role in mono on a dashed rule below. */
body.home .team-card__body {
  text-align: center !important;
  padding: 14px 16px 16px !important;
  border-top: 1px dashed var(--tpl-line-strong);
}

body.home .team-card__name {
  font-size: 1.15rem !important;
  margin-bottom: 6px !important;
}

body.home .team-card__role {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
}

/* The P / M / A mark keeps its glow; the face follows the template. */
body.home .team-card[data-initial]::before {
  font-family: var(--tpl-sans) !important;
  font-weight: 600 !important;
}

/* ---------- 3. A clear process: square panels ---------------------- */

body.home .apx {
  gap: 0 !important;
  border: 1px solid var(--tpl-line);
}

body.home .apx__panel {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--tpl-line) !important;
}

body.home .apx__panel:last-child {
  border-right: none !important;
}

body.home .apx__panel.is-active {
  border-color: var(--tpl-line) !important;
  box-shadow: inset 0 0 0 1px rgba(56, 182, 255, 0.45);
}

body.home .apx__num {
  border-radius: 0 !important;
  font-size: 0.8rem !important;
}

/* The step icons are now the template's dithered icons. They replace the
   old outline glyphs, so the round icon well is no longer needed. */
body.home .apx__icon {
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.home .apx__icon img {
  display: block;
  width: 56px;
  height: 56px;
}

@media (max-width: 700px) {
  body.home .apx {
    border: none;
  }

  body.home .apx__panel {
    border: 1px solid var(--tpl-line) !important;
  }
}

/* ---------- 4. What we build: square tabs and panel ---------------- */

body.home .wb-tabs__list {
  gap: 0 !important;
}

body.home .wb-tab {
  border-radius: 0 !important;
  border: 1px solid var(--tpl-line) !important;
  font-family: var(--tpl-mono) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

body.home .wb-tab {
  position: relative;
}

body.home .wb-tab + .wb-tab {
  margin-left: -1px !important;
}

body.home .wb-tab.is-active {
  z-index: 1;
  border-color: rgba(56, 182, 255, 0.55) !important;
  background: rgba(56, 182, 255, 0.12) !important;
  box-shadow: none !important;
}

body.home .wb-tab__icon {
  width: 28px;
  height: 28px;
  flex: none;
}

body.home .wb-panel,
body.home .wb-panels,
body.home .wb-panel__media,
body.home .wb-panel__media img {
  border-radius: 0 !important;
}

body.home .wb-panel {
  border: 1px solid var(--tpl-line) !important;
}

/* ---------- 5. Our services: square slides ------------------------ */

body.home .svcx-slide,
body.home .svcx-slide img,
body.home .svcx-slide picture {
  border-radius: 0 !important;
}

/* The blue outline of the active slide is its own layer on top of the
   image; it still had the old 18px corners, so it no longer matched the
   square image underneath. */
body.home .svcx-slide::before,
body.home .svcx-slide::after {
  border-radius: 0 !important;
}

body.home .svcx-slide__label {
  border-radius: 0 !important;
}

body.home .svcx-slide__icon {
  border-radius: 0 !important;
  background: none !important;
}

body.home .svcx-slide__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

body.home .svcx-slide__name {
  font-family: var(--tpl-sans) !important;
  font-weight: 500 !important;
}

body.home .svcx__btn {
  border-radius: 0 !important;
}

/* ---------- 6. Cases ------------------------------------------------ */

body.home .hcase,
body.home .hcase__media,
body.home .hcase__media img {
  border-radius: 0 !important;
}

body.home .hcase {
  border: 1px solid var(--tpl-line) !important;
}

body.home .hcase__tags span,
body.home .hcase__tags li {
  border-radius: 0 !important;
}

/* ---------- 7. FAQ, booking, contact -------------------------------- */

body.home .faq__item,
body.home .booking__embed-wrap,
body.home .booking__embed-wrap iframe,
body.home .cta__form,
body.home .cta__form input,
body.home .cta__form textarea {
  border-radius: 0 !important;
}

body.home .faq__item summary {
  font-family: var(--tpl-sans) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
}

/* ---------- 8. Intro ------------------------------------------------- */

body.home .intro-content,
body.home .intro-content * {
  font-family: var(--tpl-sans) !important;
}

body.home .intro-content h1,
body.home .intro-content h2 {
  font-weight: 500 !important;
}

/* ---------- 9. Remaining rounded details -------------------------- */

body.home .hcase__country,
body.home .cta__contact-item,
body.home .faq__item summary::after,
body.home .svcx__detail-link,
body.home .cases .hcase__tags > * {
  border-radius: 0 !important;
}

body.home .svcx__detail h3,
body.home .cta__form h3 {
  font-family: var(--tpl-sans) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

body.home .hcase__country {
  font-family: var(--tpl-mono) !important;
  letter-spacing: 0.04em !important;
}

/* Phone: three tiles side by side leave ~110px per caption. The mono
   role has to fit that width ("WEBDEVELOPMENT" is one long word). */
@media (max-width: 700px) {
  body.home .team-card__body {
    padding: 10px 8px 12px !important;
  }

  body.home .team-card__name {
    font-size: 0.86rem !important;
    margin-bottom: 4px !important;
  }

  body.home .team-card__role {
    font-size: 0.56rem !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }
}


/* ---------- 10. Cursor trail ------------------------------------------ */
/* Same as the web design page: a white dithered trail that follows the
   pointer, on the background only. It sits just above the page's soft
   background lights (body::before, also -1, earlier in the page) and
   below every section, card and line of text, and it never takes a
   click. For that the body itself must not paint a background on top of
   it: the page colour comes from <html>, which carries the same colour. */
body.home {
  background-color: transparent !important;
}

.dither-cursor-trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* ---------- 11. Phone menu ------------------------------------------- */
/* The drawer follows the template type as well: Google Sans Flex for the
   links, the button and the contact lines, Google Sans Code for the small
   labels (Close and the service groups). */
@media (max-width: 1100px) {
  /* The nav's inner bar carries a backdrop filter, which turns it into
     the box the "fixed" drawer is measured against: the drawer then
     started under the bar instead of at the top of the screen and ran
     past the bottom. Without the filter while the menu is open the
     drawer covers exactly the screen. */
  body.home.menu-open .nav .container {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* The bar fades its filter over 0.32s. While that ran, the drawer was
       still measured against the bar: it opened 43px down (or far off
       screen after scrolling), showed the announcement bar for a moment
       and then jumped into place. Switching the filter off at once makes
       the drawer cover the screen from the first frame. */
    transition: none !important;
  }

  /* Logo and Close at the top of the screen instead of 88px down; that
     gap is what pushed the menu past the screen and made it scroll. */
  body.home .nav__menu {
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  body.home .nav__menu-head {
    padding: 0 4px !important;
  }

  body.home .nav__menu .nav__menu-close {
    font-family: var(--tpl-mono) !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
  }

  body.home .nav__menu.open > li:not(.nav__menu-head):not(.nav__menu-foot) > a,
  body.home .nav__menu > li:not(.nav__menu-head):not(.nav__menu-foot) > a,
  body.home .nav__menu .nav__menu-trigger,
  body.home .nav__menu.open .nav__menu-trigger {
    font-family: var(--tpl-sans) !important;
    font-weight: 450 !important;
    letter-spacing: -0.03em !important;
  }

  body.home .nav__menu .nav__mobile-cat-trigger,
  body.home .nav__menu .nav__mobile-cat-trigger span {
    font-family: var(--tpl-mono) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
  }

  body.home .nav__menu .nav__mobile-leaf,
  body.home .nav__menu .nav__mobile-sub-link--all {
    font-family: var(--tpl-sans) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
  }

  body.home .nav__menu .nav__lang a,
  body.home .nav__menu .nav__lang a span {
    font-family: var(--tpl-sans) !important;
    font-weight: 450 !important;
    letter-spacing: -0.02em !important;
  }

  body.home .nav__menu a.nav__menu-cta {
    font-family: var(--tpl-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  /* Contact lines keep a finger-sized tap area, but with the text in the
     middle of it instead of at the top, so the two lines read as a pair
     rather than with a 50px hole between them. */
  body.home .nav__menu-contact {
    gap: 0 !important;
  }

  body.home .nav__menu .nav__menu-contact a {
    display: inline-flex !important;
    align-items: center;
    min-height: 40px !important;
    font-family: var(--tpl-sans) !important;
    letter-spacing: 0 !important;
  }
}

/* Short phones (iPhone SE / mini): the same menu, a little more compact,
   so it still fits on one screen without scrolling. */
@media (max-width: 1100px) and (max-height: 760px) {
  body.home .nav__menu {
    gap: 4px !important;
  }

  body.home .nav__menu.open > li:not(.nav__menu-head):not(.nav__menu-foot) > a,
  body.home .nav__menu > li:not(.nav__menu-head):not(.nav__menu-foot) > a,
  body.home .nav__menu .nav__menu-trigger,
  body.home .nav__menu.open .nav__menu-trigger,
  body.home .nav__menu .nav__lang a {
    font-size: clamp(1.5rem, 4.6vh, 2.1rem) !important;
  }

  body.home .nav__menu .nav__lang {
    padding-top: 10px !important;
  }

  body.home .nav__menu-foot {
    gap: 10px !important;
    padding-top: 14px !important;
  }
}

/* ---------- 12. Google reviews ---------------------------------------- */
/* Between the services and the cases. Same language as the other card
   rows: square cards on the dark FAQ / process gradient with a hairline
   edge, mono labels, accent stars. A native scroll-snap row, so it
   swipes on a phone; the arrows reuse the services slider buttons. */
body.home .reviews {
  position: relative;
  padding: 34px 0 54px;
  --font-display: var(--tpl-sans);
  --font-body: var(--tpl-sans);
  font-family: var(--tpl-sans);
}

body.home .reviews .section__header {
  margin-bottom: 18px;
}

/* Score line under the title: 5.0, five stars, count. */
body.home .rvw-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 34px;
  color: #f4f1ea;
  text-decoration: none;
}

body.home .rvw-score__num {
  font-size: 1.6rem;
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1;
}

body.home .rvw-score__stars,
body.home .rvw-card__stars {
  display: inline-flex;
  gap: 3px;
  color: var(--color-accent);
}

body.home .rvw-score__stars svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

body.home .rvw-score__label {
  font-family: var(--tpl-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.7);
  border-bottom: 1px solid rgba(244, 241, 234, 0.3);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.home .rvw-score:hover .rvw-score__label {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* The row */
body.home .rvw__track {
  --rvw-gap: 16px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--rvw-gap)) / 3);
  column-gap: var(--rvw-gap);
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}

body.home .rvw__track::-webkit-scrollbar {
  display: none;
}

body.home .rvw__track:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 4px;
}

body.home .rvw-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 24px 24px 22px;
  border: 1px solid var(--tpl-line);
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(56, 182, 255, 0.07), rgba(0, 0, 0, 0) 52%),
    linear-gradient(165deg, rgb(32, 36, 39) 0%, rgb(21, 24, 26) 100%);
  color: #f4f1ea;
}

body.home .rvw-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.home .rvw-card__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

body.home .rvw-card__src {
  font-family: var(--tpl-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
}

/* Long reviews are cut at seven lines until opened. */
body.home .rvw-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(244, 241, 234, 0.88);
}

body.home .rvw-card.is-open .rvw-card__text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

body.home .rvw-card__text p + p {
  margin-top: 0.8em;
}

body.home .rvw-card__more {
  align-self: flex-start;
  margin-top: -8px;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(56, 182, 255, 0.5);
  color: var(--color-accent);
  font-family: var(--tpl-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

body.home .rvw-card__more[hidden] {
  display: none;
}

/* Name row, pinned to the bottom so every card ends on the same line. */
body.home .rvw-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--tpl-line-strong);
}

body.home .rvw-card__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  background: rgba(56, 182, 255, 0.14);
  border: 1px solid rgba(56, 182, 255, 0.4);
  color: var(--color-accent);
  font-family: var(--tpl-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Same height with or without a company line, so the dashed rule sits
   at the same height in every card. */
body.home .rvw-card__id {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
}

body.home .rvw-card__name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* The reviewer's business, when they wrote on its behalf. */
body.home .rvw-card__org {
  font-family: var(--tpl-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
}

/* Arrows centred under the row, like the services slider, with the
   counter between them. */
body.home .rvw__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

body.home .rvw__count {
  min-width: 6.5em;
  text-align: center;
  font-family: var(--tpl-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(244, 241, 234, 0.6);
}

body.home .rvw__count [data-rvw-current] {
  color: #f4f1ea;
}

body.home .rvw__btn {
  border-radius: 0 !important;
}

body.home .rvw__btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  border-color: rgba(244, 241, 234, 0.2);
  color: #f4f1ea;
}

body.home .rvw-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

body.home .rvw-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 900px) {
  body.home .rvw__track {
    grid-auto-columns: calc((100% - var(--rvw-gap)) / 2);
  }
}

/* Phone: one card at a time with the next one peeking in, so it is
   clear the row can be swiped. */
@media (max-width: 600px) {
  /* The row runs to the screen edges, so the next card slides in from
     the edge instead of being cut off by the page margin. */
  body.home .rvw__track {
    --rvw-gap: 12px;
    grid-auto-columns: calc(100% - 72px);
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }

  body.home .rvw-card {
    padding: 20px 18px 18px;
  }

  body.home .rvw-card__text {
    font-size: 0.95rem;
  }

  body.home .rvw-score {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
}

/* ---------- 13. FAQ title on one line (desktop) ---------------------- */
/* "What you probably want to know." broke over two lines because section
   headers stop at 720px. On desktop there is room for it on one line, in
   all three languages; the phone layout keeps its own wrapping. */
@media (min-width: 1101px) {
  body.home .faq .section__header {
    max-width: none !important;
  }

  body.home .faq .section__title {
    white-space: nowrap;
  }
}

/* ---------- 14. Cases on a phone ------------------------------------ */
/* Two cases side by side: Sal Y Sol and Purple Chord. The photo gets a
   darker wash so the white name and line on top stay easy to read. */
@media (max-width: 600px) {
  body.home .cases__grid > .hcase:nth-child(n + 3) {
    display: none !important;
  }

  body.home .hcase::after {
    background: linear-gradient(
      to top,
      rgba(8, 10, 14, 0.97) 0%,
      rgba(8, 10, 14, 0.88) 45%,
      rgba(8, 10, 14, 0.68) 75%,
      rgba(8, 10, 14, 0.5) 100%
    ) !important;
  }
}

/* ---------- 15. Client logos ------------------------------------------ */
/* Golden Ink and Crown Barbers are square marks; at the same height as
   the wide wordmarks they read much smaller. A little larger, without
   changing the height of the logo strip. */
body.home img[src*="logos/golden-ink"],
body.home img[src*="logos/crown-barbers"] {
  transform: scale(1.4);
}

/* ---------- 16. Services dropdown (desktop) --------------------------- */
/* The live CSS pins the panel with position: fixed to the middle of the
   screen. The header bar has a backdrop filter, though, and that makes
   the bar (not the screen) the box a fixed element is measured from, so
   the panel landed ~120px right of centre and too low. Here the panel
   hangs from the header bar itself: exactly as wide as the bar, 12px
   under it, centred with it at every desktop width and when the bar
   shrinks on scroll. The 12px gap is covered by the existing hover
   bridge (.nav-dd::before), so the menu stays open on the way down. */
@media (min-width: 1101px) {
  /* 48px wider than the old 1200px: on large screens the full-size logo
     made the contents 25px wider than the bar, so the button stuck out on
     the right and nothing (the panel included) looked centred. */
  body.home .nav .container {
    position: relative;
    max-width: 1248px;
    /* Even padding (was 24px left, 12px right), so the logo and the
       button sit symmetrically and line up with the panel under them. */
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.home .nav__item--has-dd {
    position: static !important;
  }

  /* Edge to edge with the bar; on narrower desktops, where the bar runs
     to the screen edges, keep at least 16px free on both sides. */
  body.home .nav-dd {
    --dd-inset: max(0px, calc(16px - max(0px, (100vw - 1248px) / 2)));
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: var(--dd-inset) !important;
    right: var(--dd-inset) !important;
    width: auto !important;
    transform: translateY(-8px) !important;
  }

  body.home .nav__item--has-dd.is-open .nav-dd {
    transform: translateY(0) !important;
  }
}