/* THE PHRASE METHOD / intro hero.
   Ported from design/css/hero-shadow.css.

   The original lived in a Shadow DOM purely to stop its generic class names
   (.hero, .nav, .brand, .eyebrow) colliding with main.css on a standalone page.
   Inside a theme that also hides the whole hero from the editor's click-to-select,
   so the isolation is done here with names instead: every class is prefixed pmh,
   which collides with nothing. Values are unchanged from the original.

   Two rules from the source are deliberately gone. `html, body { min-width: 1200px }`
   and `body { font-family: "Neue Montreal" }` were dead inside the shadow root --
   neither html nor body exists in there, so they matched nothing and the hero
   inherited Archivo from the document. Carrying them over would have pinned the
   whole theme to a 1200px minimum width and broken every phone. */

.pmh {
  --yellow: var(--mustard, #f2c94c);
  --quiet: var(--muted-dark, #94a4b5);
  --content-max: 1920px;
  --page-pad: clamp(32px, 5vw, 96px);

  position: relative;
  display: block;
  width: 100%;
  height: clamp(var(--pmh-min-height, 760px), min(62.5vw, 100vh), var(--pmh-max-height, 1200px));
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

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

.pmh__inner {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.pmh__artwork {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(100%, var(--content-max));
  aspect-ratio: 16 / 10;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}

.pmh__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  user-select: none;
}

.pmh__nav {
  position: relative;
  z-index: 2;
  height: clamp(90px, 7vw, 132px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pmh__brand { width: clamp(132px, 9vw, 174px); flex: 0 0 auto; }
.pmh__brand img { display: block; width: 100%; height: auto; }

.pmh__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 48px);
  font-size: clamp(15px, .9vw, 19px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.pmh__links > a:not(.pmh__call) { transition: color 160ms ease; }
.pmh__links > a:not(.pmh__call):hover { color: var(--blue); }

.pmh__call {
  min-height: 54px;
  padding: 0 clamp(20px, 1.6vw, 30px);
  border: 2px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.pmh__call span, .pmh__cta span { font-size: 1.2em; line-height: .75; }

.pmh__menu, .pmh__title-mobile { display: none; }

.pmh__content {
  position: relative;
  z-index: 1;
  padding-top: clamp(92px, 7.2vw, 138px);
}

.pmh__content > * { max-width: 720px; }

.pmh__eyebrow {
  position: relative;
  width: max-content;
  margin: 0 0 clamp(28px, 2.2vw, 42px);
  color: #343b40;
  font-size: clamp(16px, 1.05vw, 21px);
  line-height: 1.1;
  text-transform: uppercase;
}

.pmh__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 31.5%;
  height: 4px;
  background: var(--yellow);
}

.pmh__title {
  margin: 0;
  font-size: clamp(64px, 5.5vw, 116px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.pmh__title span { display: block; white-space: nowrap; }
.pmh__title em { color: var(--blue); font-style: normal; }

.pmh__copy {
  margin: clamp(20px, 1.7vw, 32px) 0 0;
  max-width: 650px;
  color: #41464a;
  font-size: clamp(17px, 1.2vw, 24px);
  line-height: 1.35;
}

.pmh__cta {
  width: max-content;
  margin-top: clamp(24px, 2.25vw, 42px);
  padding: clamp(16px, 1.3vw, 22px) clamp(24px, 2vw, 38px);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--yellow);
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 0 rgba(16, 24, 32, 0);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.pmh__cta span { transition: transform 180ms ease; }

.pmh__cta:hover,
.pmh__cta:focus-visible {
  transform: translateY(-3px);
  background: var(--mustard-soft, #f7d458);
  box-shadow: 0 8px 0 rgba(16, 24, 32, .14);
}

.pmh__cta:hover span,
.pmh__cta:focus-visible span { transform: translateX(5px); }

.pmh__cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 rgba(16, 24, 32, .12);
}

.pmh__benefits {
  margin: clamp(12px, 1vw, 18px) 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(22px, 2vw, 38px);
  list-style: none;
  color: var(--quiet);
  font-size: clamp(14px, .8vw, 17px);
  white-space: nowrap;
}

.pmh__benefits li { display: flex; align-items: center; gap: .48em; }
.pmh__benefit-icon { color: #8da0b3; font-size: 1.05em; font-weight: 700; }
.pmh__benefit-icon--infinity { font-size: 1.55em; line-height: .6; }

/* The hero ships with a placeholder when no artwork is set, so an empty section
   is still a hero and not a hole. */
.pmh__photo.default-image { object-fit: cover; background: var(--paper-2); }

@media (min-width: 2200px) {
  .pmh__content { padding-top: 138px; }
}

@media (max-width: 1439px) {
  .pmh { --page-pad: clamp(32px, 4vw, 58px); }
  .pmh__links { gap: clamp(18px, 2vw, 28px); }
  .pmh__brand { width: 132px; }
  .pmh__content { padding-top: 70px; }
}

@media (max-height: 850px) {
  .pmh__nav { height: 84px; }
  .pmh__content { padding-top: 56px; }
  .pmh__eyebrow { margin-bottom: 28px; }
  .pmh__copy { margin-top: 18px; }
  .pmh__cta { margin-top: 22px; }
  .pmh__benefits { margin-top: 11px; }
}

@media (max-width: 1199px) {
  .pmh {
    --page-pad: clamp(20px, 5.55vw, 32px);
    --mobile-action-width: min(100%, 330px);

    height: 100svh;
    min-height: 568px;
    max-height: none;
    background: #ede4d9;
  }

  .pmh__artwork {
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .pmh__photo {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
  }

  .pmh__nav {
    height: clamp(72px, 14vw, 96px);
    padding-top: clamp(8px, 2vw, 14px);
  }

  .pmh__brand { width: clamp(78px, 21vw, 104px); }
  .pmh__links { display: none; }

  .pmh__menu {
    width: clamp(24px, 6.2vw, 32px);
    height: clamp(22px, 5.6vw, 28px);
    padding: 2px 0;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    cursor: pointer;
  }

  .pmh__menu span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--blue);
  }

  .pmh__content {
    position: absolute;
    top: auto;
    bottom: clamp(24px, 4svh, 44px);
    left: 0;
    width: 100%;
    padding-top: 0;
  }

  .pmh__content > * { max-width: none; }

  .pmh__eyebrow {
    margin-bottom: clamp(24px, 6.2vw, 34px);
    font-size: clamp(14px, 3.2vw, 19px);
  }

  .pmh__eyebrow::after {
    bottom: -9px;
    width: 34%;
    height: 3px;
  }

  .pmh__title { display: none; }

  .pmh__title-mobile {
    display: block;
    font-size: clamp(24px, 6.3vw, 34px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.045em;
    text-transform: uppercase;
  }

  .pmh__title-mobile span { display: block; white-space: nowrap; }
  .pmh__title-mobile em { color: var(--blue); font-style: normal; }

  .pmh__copy {
    margin-top: clamp(18px, 4.4vw, 28px);
    max-width: 100%;
    font-size: clamp(16px, 3.35vw, 20px);
    line-height: 1.35;
  }

  .pmh__copy br { display: none; }

  .pmh__cta {
    width: var(--mobile-action-width);
    margin-top: clamp(22px, 5.5vw, 34px);
    padding: clamp(18px, 4.4vw, 24px) clamp(16px, 4vw, 24px);
    justify-content: center;
    gap: 10px;
    font-size: clamp(16px, 3.45vw, 21px);
  }

  .pmh__benefits {
    width: var(--mobile-action-width);
    margin-top: clamp(12px, 3vw, 17px);
    justify-content: space-between;
    gap: clamp(8px, 2vw, 14px);
    font-size: clamp(12px, 3vw, 14px);
  }

  .pmh__benefits li {
    display: grid;
    grid-template-columns: 1.25em auto;
    align-items: center;
    column-gap: .3em;
  }

  .pmh__benefit-icon {
    width: 1.25em;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .pmh__title-mobile { font-size: 6.3vw; }
  .pmh__copy { font-size: 3.25vw; }
  .pmh__cta { font-size: 3.25vw; }
  .pmh__benefits { font-size: 12px; }
}

@media (max-height: 700px) and (max-width: 1199px) {
  .pmh__content { bottom: 18px; }
  .pmh__eyebrow { margin-bottom: 20px; font-size: 13px; }
  .pmh__title-mobile { font-size: clamp(22px, 6vw, 27px); }
  .pmh__copy { margin-top: 14px; font-size: clamp(12px, 3.1vw, 15px); }
  .pmh__cta { margin-top: 16px; padding-block: 14px; }
  .pmh__benefits { margin-top: 9px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pmh *, .pmh *::before, .pmh *::after { transition: none !important; }
}

.pmh a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }

.pmh__sheet {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 218px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 26px 60px rgba(16, 24, 32, .22);
  backdrop-filter: blur(8px);
}

.pmh__sheet[hidden] { display: none; }

.pmh__sheet a {
  padding: 12px 14px;
  border-radius: 11px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.pmh__sheet a:hover, .pmh__sheet a:focus-visible { background: rgba(16, 24, 32, .07); }

.pmh__sheet-cta {
  margin-top: 4px;
  background: var(--yellow);
  text-align: center;
  font-weight: 850;
}

.pmh__sheet-cta:hover, .pmh__sheet-cta:focus-visible { background: var(--mustard-soft, #f7df7d); }
.pmh__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pmh__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pmh__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.pmh__menu span { transition: transform .22s ease, opacity .18s ease; }

/* hero-bridge.css, ported. The fixed site header stays out of the way until the
   intro hero has scrolled past, so the hero owns the top of the page on its own.

   THE :has() IS LOAD-BEARING. Without it this reads "hide the header until the body
   has pm-past-hero", and only the hero's script ever adds that class -- so on every
   page with no hero the class never arrives and the header sits translated off
   screen forever. That took out the header on Terms, Privacy, Support, cart, search,
   account and 404 alike.

   Scoping it to a page that actually contains a hero fixes all of them at once: no
   hero, no rule, header visible. If :has() is ever unavailable the selector simply
   never matches, which shows the header over the hero -- wrong-looking for a moment,
   but never a missing header, which is the right way round for this to fail. */
body:has(pm-hero):not(.pm-past-hero) .header.pm-site-header {
  transform: translateY(-130%) !important;
  pointer-events: none !important;
}