/* 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.

   pm-page-nav is in the list because it does the same job on a page with no hero:
   it is the Chris Blair masthead on Terms, Privacy and Support, it owns the top of
   those pages, and page-nav.js writes the same pm-past-hero class once it has
   scrolled by. Without it named here the pill would sit on top of the masthead from
   the first paint. */
body:has(pm-hero, pm-page-nav):not(.pm-past-hero) .header.pm-site-header {
  transform: translateY(-130%) !important;
  pointer-events: none !important;
}

/* pmh-mobile-stack: phones/tablets stack the hero instead of overlaying copy on the photo.
   Nav on top, photo in its own box, copy below on the paper background, so longer
   headlines and CTAs can never run into the image. Placed last so it wins over the
   earlier max-width / max-height overlay rules. */
@media (max-width: 1199px) {
  .pmh {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  .pmh__nav { order: 0; }
  .pmh__artwork {
    order: 1;
    position: relative;
    z-index: 0;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .pmh__artwork::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18%;
    background: linear-gradient(to bottom, rgba(237, 228, 217, 0), rgb(237, 228, 217));
    pointer-events: none;
  }
  .pmh__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 12%;
  }
  .pmh__content {
    order: 2;
    position: relative;
    top: auto;
    bottom: auto;
    padding-top: clamp(16px, 4vw, 28px);
    padding-bottom: clamp(32px, 8vw, 48px);
  }
  .pmh__eyebrow {
    width: auto;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }
  .pmh__title-mobile span { white-space: normal; }
}