/* ==========================================================================
   Drop Pillow — design system
   Palette, type and spacing follow DROP_Pillow_Design_Guideline.docx.
   Sage Deep (#5F7268) is an addition for CTA fills: white on #aec8bb is
   1.6:1 and unusable. Charcoal on sage is the alternative if the client
   prefers to keep a single sage.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */

:root {
  --ink:        #3f3a37;
  --ink-90:     rgba(63, 58, 55, .9);
  --ink-60:     rgba(63, 58, 55, .6);
  --ink-15:     rgba(63, 58, 55, .15);
  --sage:       #aec8bb;
  --sage-deep:  #5F7268;
  --sage-light: #d5e0da;
  --white:      #ffffff;
  --gray:       #5b5a56;

  --on-dark-dim: #d5e0da;
  --hairline:    #d5e0da;
  --hairline-dark: rgba(255, 255, 255, .18);

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter:  clamp(20px, 5vw, 64px);
  --shell:   1240px;
  --measure: 62ch;

  --sec-y:   clamp(56px, 8vw, 108px);
  --sec-y-s: clamp(40px, 5vw, 68px);

  --header-h: 68px;
  --bar-h:    38px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .28s;

  --z-header: 60;
  --z-mega:   55;
  --z-drawer: 90;
  --z-sticky: 40;
}

@media (max-width: 899px) {
  :root { --header-h: 60px; }
}

/* ------------------------------------------------------------------ reset */

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

/* Many elements here are display:grid/flex, which beats the UA's
   [hidden]{display:none}. Everything we toggle uses the hidden attribute,
   so make it authoritative. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

/* height:auto so intrinsic `height` attributes can't beat our aspect-ratios.
   Every override below is class-based, so it still wins. */
img, video { max-width: 100%; display: block; }
img { height: auto; }
svg { display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: var(--sage-deep); text-underline-offset: 4px; }
a:hover { color: var(--ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.on-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.is-dark  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--white);
}

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--sage); color: var(--ink); }

/* Everything on this brand honours reduced motion. It is a relaxation
   product bought largely by neurodivergent people; this is not optional. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------ typography */

.display,
h1.display { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; }

.t-hero   { font-family: var(--serif); font-size: clamp(44px, 6.2vw, 86px); line-height: 1.02; letter-spacing: -.015em; }
.t-1      { font-family: var(--serif); font-size: clamp(36px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -.012em; }
.t-2      { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1;  letter-spacing: -.008em; }
.t-3      { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.t-4      { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px);   line-height: 1.2; }

.quote    { font-family: var(--serif); font-style: italic; line-height: 1.32; text-wrap: pretty; }
.quote-xl { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 40px); line-height: 1.25; text-wrap: pretty; }

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray);
}
.on-dark .eyebrow, .is-dark .eyebrow { color: var(--sage); }

.lede  { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.62; text-wrap: pretty; }
.body  { font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.55; }
.fine  { font-size: 13px; line-height: 1.5; color: var(--gray); }
.on-dark .fine, .is-dark .fine { color: var(--on-dark-dim); }

.measure { max-width: var(--measure); }
.measure-s { max-width: 46ch; }

.dim { color: var(--gray); }
.on-dark .dim, .is-dark .dim { color: var(--on-dark-dim); }

.serif-num { font-family: var(--serif); line-height: 1; color: var(--sage-deep); }
.on-dark .serif-num, .is-dark .serif-num { color: var(--sage); }

/* --------------------------------------------------------------- layout */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { max-width: 860px; }
.shell-text   { max-width: 720px; }

.section { padding-block: var(--sec-y); }
.section-s { padding-block: var(--sec-y-s); }
.section-tight { padding-block: clamp(28px, 3vw, 44px); }

.bg-sage  { background: var(--sage-light); }
.bg-ink   { background: var(--ink); color: var(--white); }
.bg-ink a { color: var(--sage); }
.bg-ink a:hover { color: var(--white); }
.rule-top { border-top: 1px solid var(--hairline); }

.stack   { display: grid; gap: 20px; }
.stack-s { display: grid; gap: 12px; }
.stack-l { display: grid; gap: 32px; }
.stack-xl{ display: grid; gap: clamp(32px, 5vw, 56px); }

.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Icon + text that must never wrap the text under the icon. */
.icon-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.icon-row > .icon { margin-top: 2px; }
.row-between { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }

.split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center;
}
.split-top { align-items: start; }
.split-media-first > :first-child { order: -1; }

.grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
/* Fixed three-up. Six products land as two full rows rather than four plus a
   stranded pair, which is what auto-fill gives at desktop widths. */
.grid-tri { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .grid-tri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .grid-tri { grid-template-columns: minmax(0, 1fr); } }

.center { text-align: center; justify-items: center; }

/* Grid and flex items default to min-width:auto, so one wide descendant
   (a min-width table, a long nowrap button) pushes the whole track past the
   viewport. Letting the layout primitives shrink is what keeps every page
   free of horizontal scroll down to 320px. */
.stack > *, .stack-s > *, .stack-l > *, .stack-xl > *,
.split > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-tri > *,
.pdp > *, .cart-layout > *, .checkout > *, .features > *,
.footer__grid > *, .mega__inner > * { min-width: 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 12px 18px; text-decoration: none;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; color: var(--white); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1; text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary   { background: var(--sage-deep); color: var(--white); border-color: var(--sage-deep); }
.btn--primary:hover   { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--white); }
.btn--ghost     { background: transparent; color: var(--sage-deep); border-color: transparent; padding: 0 4px; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
.btn--ghost:hover { color: var(--ink); }
.on-dark .btn--secondary, .is-dark .btn--secondary, .btn--secondary.on-dark { color: var(--white); border-color: var(--white); }
.on-dark .btn--secondary:hover, .is-dark .btn--secondary:hover, .btn--secondary.on-dark:hover { background: var(--white); color: var(--ink); }
.on-dark .btn--ghost, .is-dark .btn--ghost, .btn--ghost.on-dark { color: var(--sage); }
.on-dark .btn--ghost:hover, .is-dark .btn--ghost:hover, .btn--ghost.on-dark:hover { color: var(--white); }
.btn--sage { background: var(--sage); color: var(--ink); border-color: var(--sage); }
.btn--sage:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--block { width: 100%; }
/* Long CTA labels ("Shop the pillow — from $149") beat a 320px viewport if
   they stay on one line. Below the small-phone breakpoint, let them wrap. */
@media (max-width: 479px) {
  .btn { white-space: normal; max-width: 100%; padding-inline: 20px; line-height: 1.3; padding-block: 10px; }
}
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 12px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; }

.link-caps {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage-deep); text-decoration: underline; text-underline-offset: 5px;
}
.link-caps:hover { color: var(--ink); }
.on-dark .link-caps, .is-dark .link-caps { color: var(--sage); }
.on-dark .link-caps:hover, .is-dark .link-caps:hover { color: var(--white); }

/* ------------------------------------------------------------------ misc */

.badge {
  display: inline-block; padding: 6px 10px; line-height: 1;
  background: var(--sage); color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.badge--quiet { background: var(--sage-light); }
.badge--ink { background: var(--ink); color: var(--white); }

.pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--hairline); background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pill:hover { border-color: var(--sage-deep); }
.pill[aria-pressed="true"], .pill[aria-selected="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.on-dark .pill { color: var(--white); border-color: rgba(255,255,255,.35); }
.on-dark .pill[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--white); }

.stars { color: var(--sage-deep); letter-spacing: 2px; line-height: 1; font-size: 15px; }
.on-dark .stars, .is-dark .stars { color: var(--sage); }

/* Icons are an inline <symbol> sprite; stroke follows currentColor. */
.icon { display: block; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 30px; height: 30px; stroke-width: 1.5; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.media { display: block; width: 100%; object-fit: cover; background: var(--sage-light); }
.media--sq   { aspect-ratio: 1; }
/* Product footage shot on white. Multiplying drops the white frame into
   whatever the section's ground is — sage, white, anything light — so it reads
   as a cut-out rather than a video sitting in a box. The parent must not carry
   a background of its own, or that becomes the backdrop and the blend is a
   no-op. */
.media--plate {
  background: transparent;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.media--4x5  { aspect-ratio: 4 / 5; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }

.overline-rule { border-top: 1px solid var(--hairline); padding-top: 20px; }
.on-dark .overline-rule { border-color: var(--hairline-dark); }

.note {
  padding: 22px 24px;
  background: var(--sage-light);
  display: grid; gap: 10px;
}
.on-dark .note, .is-dark .note { background: rgba(255,255,255,.07); }

.card {
  display: grid; gap: 14px; align-content: start;
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid var(--hairline);
}
/* A card whose last child is a link pinned to the bottom edge. */
.card--nav {
  align-content: stretch;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease);
}
.card--nav:hover { border-color: var(--sage-deep); color: inherit; }
.card--nav:hover .link-caps { color: var(--ink); }
/* Reserve two lines for the title so a wrapping one ("Sensory & autism")
   doesn't push its body copy out of line with its neighbours. The 1fr body
   row then lands the CTA on the same baseline across the whole row. */
.card--nav > .t-4 { min-height: 2.4em; }
@media (max-width: 599px) { .card--nav > .t-4 { min-height: 0; } }
.bg-sage .card { border-color: transparent; }
.on-dark .card { background: rgba(255,255,255,.07); border-color: transparent; color: var(--white); }

/* ------------------------------------------------------- announcement bar */

.announce {
  background: var(--ink); color: var(--white);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  min-height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  padding: 8px var(--gutter); text-align: center;
}
.announce a { color: var(--sage); text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--white); }
.announce__sep { color: var(--sage); margin-inline: 10px; }
@media (max-width: 719px) {
  .announce { font-size: 11px; letter-spacing: .08em; }
  .announce__opt { display: none; }
  .announce__sep { margin-inline: 8px; }
}

/* ---------------------------------------------------------------- header */

.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}

.header__bar {
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; gap: 20px;
}

/* The client's own wordmark, inlined and driven by currentColor so the same
   file serves the white header, the charcoal footer and the mobile drawer. */
.logo {
  display: block; flex: none;
  color: var(--ink); text-decoration: none;
  padding: 4px 2px;
  transition: color var(--dur) var(--ease);
}
.logo__mark { display: block; height: 30px; width: auto; }
.logo:hover { color: var(--sage-deep); }
@media (max-width: 899px) { .logo__mark { height: 26px; } }

.nav { display: flex; align-items: stretch; gap: clamp(4px, 1.4vw, 18px); margin-inline: auto; height: 100%; }
@media (max-width: 1079px) { .nav { display: none; } }

.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 8px;
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--sage-deep); border-bottom-color: var(--sage-deep); }
.nav__link[aria-current="page"] { border-bottom-color: var(--ink); }
.nav__caret { width: 13px; height: 13px; opacity: .8; transition: transform var(--dur) var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.header__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
@media (min-width: 1080px) { .header__tools { margin-left: 0; } }

.iconbtn {
  width: 44px; height: 44px; display: grid; place-content: center;
  color: var(--ink); position: relative;
  transition: color var(--dur) var(--ease);
}
.iconbtn:hover { color: var(--sage-deep); }

.cart-count {
  position: absolute; top: 5px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-content: center;
  background: var(--sage-deep); color: var(--white);
  font-size: 11px; font-weight: 600; line-height: 1; border-radius: 9px;
}
.cart-count[hidden] { display: none; }

/* The nav carries the client's own long labels ("Mental Health Pledge"), so
   the header CTA is the first thing to go as the viewport narrows, then the
   nav's own tracking. Below 1080 the whole thing becomes the drawer. */
.header__cta { margin-left: 6px; }
@media (max-width: 1339px) { .header__cta { display: none; } }
@media (max-width: 1199px) {
  .nav { gap: 6px; }
  .nav__link { font-size: 12px; letter-spacing: .09em; padding: 0 6px; }
  .nav__caret { width: 11px; height: 11px; }
}

.burger { display: none; }
@media (max-width: 1079px) { .burger { display: grid; } }
.burger span { display: block; width: 20px; height: 1.5px; background: currentColor; }
.burger span + span { margin-top: 5px; }

/* -------------------------------------------------------------- megamenu */

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 24px 48px -32px rgba(63, 58, 55, .45);
  z-index: var(--z-mega);
  overflow: hidden;
  visibility: hidden; opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mega.is-open { visibility: visible; opacity: 1; transform: none; }
.mega[hidden] { display: none; }

.mega__inner {
  max-width: var(--shell); margin-inline: auto; padding: 34px var(--gutter) 38px;
  display: grid; gap: clamp(24px, 3vw, 44px);
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(210px, .85fr);
  grid-template-rows: auto auto;
  align-items: start;
}
@media (max-width: 1179px) {
  .mega__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__feature { display: none; }
}
/* Every column shares the parent's two row tracks, so a heading that wraps to
   two lines ("Four reasons people reach for it") lifts the whole row rather
   than pushing its own rule and links out of line with its neighbours. */
.mega__col {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 14px;
  align-content: start;
}
.mega__feature { grid-row: span 2; }
.mega__links { display: grid; gap: 13px; align-content: start; }
.mega__title {
  display: flex; align-items: flex-end;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gray); padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
@supports not (grid-template-rows: subgrid) {
  .mega__col { grid-template-rows: auto auto; }
  .mega__title { min-height: 2.5em; }
}
.mega__link {
  display: grid; gap: 3px;
  color: var(--ink); text-decoration: none; padding: 5px 0;
}
.mega__link strong { font-size: 15px; font-weight: 500; line-height: 1.35; }
.mega__link span   { font-size: 13px; line-height: 1.45; color: var(--gray); }
.mega__link:hover  { color: var(--sage-deep); }
.mega__link:hover strong { text-decoration: underline; text-underline-offset: 4px; }

.mega__feature {
  display: grid; gap: 12px; align-content: start;
  color: var(--ink); text-decoration: none;
}
.mega__feature img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--sage-light); }
.mega__feature-meta { display: grid; gap: 3px; }
.mega__feature-meta strong { font-size: 15px; font-weight: 500; }
.mega__feature:hover strong { text-decoration: underline; text-underline-offset: 4px; }

.mega__foot {
  border-top: 1px solid var(--hairline);
  background: var(--sage-light);
  padding: 14px var(--gutter);
}
.mega__foot-inner {
  max-width: var(--shell); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  font-size: 13px;
}

/* ------------------------------------------------------------ mobile nav */

.mnav {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
}
.mnav[hidden] { display: none; }
.mnav__scrim { background: rgba(63, 58, 55, .45); border: 0; }
.mnav__panel {
  width: min(400px, 88vw); background: var(--white);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  box-shadow: -24px 0 60px rgba(63, 58, 55, .2);
  animation: slide-in var(--dur) var(--ease);
}
.mnav__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--hairline); }
.mnav__body { overflow-y: auto; padding: 8px 20px 24px; }
.mnav__foot { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); display: grid; gap: 12px; }

.mnav__group { border-bottom: 1px solid var(--hairline); }
.mnav__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 2px; text-align: left;
  font-size: 14px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
}
.mnav__toggle .icon { width: 16px; height: 16px; color: var(--sage-deep); }
.mnav__sub { display: grid; gap: 2px; padding: 0 2px 16px; }
.mnav__sub[hidden] { display: none; }
.mnav__sub a { display: block; padding: 10px 0 10px 14px; border-left: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 15px; }
.mnav__sub a:hover { color: var(--sage-deep); border-left-color: var(--sage-deep); }
.mnav__flat { display: block; padding: 16px 2px; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 14px; letter-spacing: .13em; text-transform: uppercase; }
.mnav__flat:hover { color: var(--sage-deep); }

@keyframes slide-in { from { transform: translateX(20px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ----------------------------------------------------------- search modal */

.search {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: rgba(63, 58, 55, .45);
}
.search[hidden] { display: none; }
.search__panel { background: var(--white); padding: 20px var(--gutter) 28px; display: grid; gap: 18px; }
.search__row { max-width: var(--shell); margin-inline: auto; width: 100%; display: flex; gap: 12px; align-items: center; }
.search__input {
  flex: 1; height: 54px; padding: 0 4px;
  background: none; border: 0; border-bottom: 1px solid var(--ink);
  font-family: var(--serif); font-size: clamp(22px, 3vw, 32px);
}
.search__input:focus { outline: none; border-bottom-color: var(--sage-deep); }
.search__results { max-width: var(--shell); margin-inline: auto; width: 100%; display: grid; gap: 4px; }
.search__hit { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 6px; color: var(--ink); text-decoration: none; }
.search__hit:hover { background: var(--sage-light); }
.search__hit img { width: 56px; height: 56px; object-fit: cover; background: var(--sage-light); }
.search__hit strong { font-weight: 500; font-size: 15px; }
.search__hit span { display: block; font-size: 13px; color: var(--gray); }
.search__scrim { border: 0; background: none; }

/* ------------------------------------------------------------ cart drawer */

.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.drawer[hidden] { display: none; }
.drawer__scrim { background: rgba(63, 58, 55, .45); border: 0; }
.drawer__panel {
  width: min(460px, 100vw); background: var(--white);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  box-shadow: -24px 0 60px rgba(63, 58, 55, .2);
  animation: slide-in var(--dur) var(--ease);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 16px 24px; border-bottom: 1px solid var(--hairline); }
.drawer__body { overflow-y: auto; padding: 20px 24px; display: grid; gap: 24px; align-content: start; }
.drawer__foot { padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); display: grid; gap: 14px; }

.ship-meter { display: grid; gap: 8px; }
.ship-meter__track { height: 4px; background: var(--sage-light); overflow: hidden; }
.ship-meter__fill { height: 100%; background: var(--sage-deep); width: 0; transition: width .4s var(--ease); }

.line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; }
.line img { width: 84px; height: 84px; object-fit: cover; background: var(--sage-light); }
.line__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.line__name { font-size: 15px; font-weight: 500; line-height: 1.35; }
.line__price { font-size: 15px; white-space: nowrap; }
.line__meta { font-size: 13px; color: var(--gray); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); }
.qty button { width: 34px; height: 34px; display: grid; place-content: center; color: var(--ink); }
.qty button:hover { background: var(--sage-light); }
.qty output { min-width: 34px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }

.bumps { display: grid; gap: 14px; padding: 20px; background: var(--sage-light); }
.bump { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.bump__was { text-decoration: line-through; color: var(--gray); }

/* --------------------------------------------------------------- product */

.pdp { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }

.gallery { display: grid; gap: 10px; }
@media (min-width: 900px) { .gallery { position: sticky; top: calc(var(--header-h) + 16px); } }
.gallery__stage { position: relative; aspect-ratio: 1; background: var(--sage-light); overflow: hidden; }
.gallery__track {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track > * { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.gallery__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 4px; }
.gallery__dot { width: 28px; height: 28px; display: grid; place-content: center; }
.gallery__dot i { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); background: rgba(255,255,255,.85); }
.gallery__dot[aria-selected="true"] i { background: var(--ink); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery__thumb { aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; background: var(--sage-light); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-selected="true"] { border-color: var(--sage-deep); }
@media (max-width: 899px) { .gallery__thumbs { display: none; } }

.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price__now { font-size: 28px; font-weight: 500; line-height: 1; }
.price__was { font-size: 15px; color: var(--gray); text-decoration: line-through; }
.price__save { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); }

.tier {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start;
  width: 100%; text-align: left; padding: 18px 18px 18px 16px;
  background: var(--white); border: 2px solid var(--hairline);
  transition: border-color var(--dur) var(--ease);
}
.tier:hover { border-color: var(--sage); }
.tier[aria-checked="true"] { border-color: var(--sage-deep); }
.tier__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--gray); background: var(--white); margin-top: 3px; transition: border var(--dur) var(--ease); }
.tier[aria-checked="true"] .tier__dot { border: 6px solid var(--sage-deep); }
.tier__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tier__name { font-size: 17px; font-weight: 600; line-height: 1.2; }
.tier__items { font-size: 14px; line-height: 1.5; color: var(--gray); text-wrap: pretty; }
.tier__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.tier__price b { font-size: 20px; font-weight: 500; }

/* Fixed two columns rather than auto-fit: with four items, auto-fit lands on
   three-plus-one at most container widths and the orphan reads as a mistake.
   2x2 is stable everywhere this appears — cart aside, PDP column, wide band. */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.trust li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; }
.trust .icon { width: 18px; height: 18px; color: var(--sage-deep); }
.on-dark .trust .icon, .is-dark .trust .icon { color: var(--sage); }

/* Boxed version of the trust row, for standalone sections. Four equal
   columns, halving twice rather than ever leaving a single orphan. */
.trust-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 439px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }

.trust-card {
  display: grid; gap: 10px; align-content: start;
  padding: 26px 24px 28px;
  background: var(--white);
  border: 1px solid var(--hairline);
  text-align: left;
}
.trust-card__icon { display: block; color: var(--sage-deep); margin-bottom: 4px; }
.trust-card__glyph { width: 32px; height: 32px; stroke-width: 1.4; }
.trust-card b { font-size: 16px; font-weight: 500; line-height: 1.3; }
.bg-sage .trust-card { border-color: transparent; }
.on-dark .trust-card, .is-dark .trust-card {
  background: rgba(255, 255, 255, .07); border-color: transparent; color: var(--white);
}
.on-dark .trust-card__icon, .is-dark .trust-card__icon { color: var(--sage); }

.features { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
/* Centred within each column: the three pillars read as a set rather than as
   the start of three left-aligned paragraphs. */
.feature { display: grid; gap: 12px; align-content: start; justify-items: center; text-align: center; }
/* The client's own icons, inlined so currentColor drives them. They ship at
   different intrinsic ratios (the speaker mark is 77x26), so render each at
   its natural size rather than squashing them all into one box. */
.feature__icon { display: flex; align-items: center; min-height: 38px; color: var(--sage-deep); }
.feature__icon svg { width: auto; height: auto; max-width: 100%; }
.feature__icon--lg { min-height: 44px; }
.on-dark .feature__icon, .is-dark .feature__icon { color: var(--sage); }
.feature .feature__icon { justify-content: center; }
.feature b { font-size: 15px; font-weight: 500; max-width: 24ch; text-wrap: balance; }

.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 24px rgba(63, 58, 55, .08);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.sticky-bar.is-visible { transform: none; }
.sticky-bar__meta { display: grid; gap: 2px; min-width: 0; }
.sticky-bar__meta span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-bar__meta b { font-size: 18px; font-weight: 500; line-height: 1; }
@media (min-width: 900px) { .sticky-bar { display: none; } }

/* ----------------------------------------------------------- product card */

/* Rows are media / meta / action so add-to-cart buttons line up across a grid
   of cards whose descriptions run to different lengths.
   The hairlines top and bottom give the card an edge: product shots are white
   on white, so without them a "Most popular" badge reads as floating in space
   rather than sitting on anything. */
.pcard {
  display: grid; gap: 12px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--hairline);
  transition: border-color var(--dur) var(--ease);
}
.pcard:hover { border-color: var(--sage); }
.pcard__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--sage-light); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.03); }
.pcard__badge { position: absolute; top: 12px; left: 12px; }
.pcard__meta { display: grid; gap: 4px; }
.pcard__cat { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.pcard__name { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); text-decoration: none; }
.pcard__name:hover { text-decoration: underline; text-underline-offset: 4px; }
.pcard__blurb { font-size: 14px; line-height: 1.5; color: var(--gray); }
.pcard__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; font-size: 16px; }

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

.acc { border-top: 1px solid var(--hairline); }
.acc__item { border-bottom: 1px solid var(--hairline); }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 2px; text-align: left;
  font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ink);
}
.acc__btn:hover { color: var(--sage-deep); }
.acc__btn .icon { width: 18px; height: 18px; color: var(--sage-deep); }
.acc__panel { padding: 0 2px 22px; font-size: 15px; line-height: 1.7; color: var(--gray); max-width: 68ch; text-wrap: pretty; }
.acc__panel[hidden] { display: none; }
.on-dark .acc, .on-dark .acc__item { border-color: var(--hairline-dark); }
.on-dark .acc__btn { color: var(--white); }
.on-dark .acc__panel { color: var(--on-dark-dim); }

/* ---------------------------------------------------------------- review */

.review {
  display: grid; gap: 16px; align-content: start; height: 100%;
  padding: 28px 26px; background: var(--white); border: 1px solid var(--hairline);
}
.on-dark .review, .is-dark .review { background: rgba(255,255,255,.07); border-color: transparent; color: var(--white); }
.bg-sage .review { border-color: transparent; }
.review blockquote { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.38; text-wrap: pretty; }
.review figcaption { display: grid; gap: 4px; }
.review__who { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.review__role { font-size: 13px; color: var(--gray); }
.on-dark .review__role, .is-dark .review__role { color: var(--on-dark-dim); }
.review--lg blockquote { font-size: clamp(22px, 2.4vw, 30px); }

.review-wall { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* ----------------------------------------------------------------- table */

.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { min-width: 640px; font-size: 15px; }
.tbl caption { text-align: left; padding-bottom: 16px; }
.tbl th, .tbl td { padding: 15px 12px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.tbl thead th { border-bottom: 1px solid var(--ink); font-weight: 500; }
.tbl thead th:first-child, .tbl tbody th { padding-left: 0; }
.tbl th[scope="row"] { font-weight: 500; }
/* Row labels stay left; every comparison column centres under its heading. */
.tbl thead th + th, .tbl tbody td { text-align: center; }
.tbl .is-hero { background: var(--sage-light); font-weight: 500; }
/* The hairline is the same colour as the highlight, so the row dividers
   vanish inside the selected column. Darken them just in that column. */
.tbl tbody .is-hero { border-bottom-color: rgba(63, 58, 55, .2); }
.tbl .is-muted { color: var(--gray); }
.tbl__colhead { font-family: var(--serif); font-size: 21px; font-weight: 400; }

.dl-specs { display: grid; grid-template-columns: minmax(130px, auto) minmax(0, 1fr); border-top: 1px solid var(--hairline); }
.dl-specs dt { padding: 15px 18px 15px 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); border-bottom: 1px solid var(--hairline); }
.dl-specs dd { margin: 0; padding: 15px 0; font-size: 15px; line-height: 1.55; border-bottom: 1px solid var(--hairline); }
.on-dark .dl-specs, .on-dark .dl-specs dt, .on-dark .dl-specs dd { border-color: var(--hairline-dark); }
.on-dark .dl-specs dt { color: var(--sage); }

/* ----------------------------------------------------------------- forms */

.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 14px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--ink-15); border-radius: 0;
  font-size: 16px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field--half { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.on-dark .field > span { color: var(--sage); }

.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sage-deep); }

.form-note { font-size: 13px; color: var(--gray); }

/* ---------------------------------------------------------------- footer */

.footer { background: var(--ink); color: var(--white); }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { color: var(--sage); text-decoration: underline; }
.footer__grid { display: grid; gap: 44px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); }
@media (min-width: 1060px) { .footer__grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } }
.footer__brand { display: grid; gap: 16px; align-content: start; }
.footer__logo { padding-left: 0; }
.footer__logo .logo__mark { height: 42px; }
.footer__col { display: grid; gap: 11px; align-content: start; font-size: 15px; }
.footer__title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.footer__sub { border-top: 1px solid var(--hairline-dark); padding-top: 32px; display: grid; gap: 18px; }
.footer__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; max-width: 580px; }
.footer__form .field { flex: 1 1 240px; }
.footer__form .field > span { color: var(--sage); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--on-dark-dim); }
.footer__address { white-space: nowrap; }
@media (max-width: 599px) { .footer__address { white-space: normal; } }
.footer__credit { white-space: nowrap; }
.footer__credit a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sage); }
.footer__credit a:hover { color: var(--sage); }
.footer__sponsors { font-size: 13px; line-height: 1.7; color: var(--on-dark-dim); max-width: 80ch; }

/* ------------------------------------------------------------ cart page */

.cart-layout { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1.6fr) minmax(min(100%, 300px), .9fr); align-items: start; }
@media (max-width: 899px) { .cart-layout { grid-template-columns: minmax(0, 1fr); } }
.summary { display: grid; gap: 16px; padding: 28px 26px; background: var(--sage-light); position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 899px) { .summary { position: static; } }
.summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(63,58,55,.2); }
.summary__total b { font-size: 24px; font-weight: 500; }

.cart-lines { display: grid; }
.cart-lines > li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.cart-lines > li:first-child { border-top: 1px solid var(--hairline); }
.cart-lines img { width: 110px; height: 110px; object-fit: cover; background: var(--sage-light); }
@media (max-width: 499px) { .cart-lines > li { grid-template-columns: 78px minmax(0, 1fr); gap: 14px; } .cart-lines img { width: 78px; height: 78px; } }

.empty { display: grid; gap: 16px; justify-items: start; padding: 40px 0; }

/* ---------------------------------------------------------------- checkout */

.checkout { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: minmax(0, 1.15fr) minmax(min(100%, 320px), .85fr); align-items: start; }
@media (max-width: 899px) { .checkout { grid-template-columns: minmax(0, 1fr); } }
.steps { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.steps li[data-done="true"] { color: var(--sage-deep); }
.co-panel { display: grid; gap: 20px; }
.co-panel[hidden] { display: none; }
.co-review { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--hairline); font-size: 15px; }
.co-review__row { display: flex; gap: 16px; justify-content: space-between; align-items: baseline; }
.co-radio { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--hairline); cursor: pointer; }
.co-radio:has(input:checked) { border-color: var(--sage-deep); border-width: 2px; padding: 17px; }
.co-radio input { width: 20px; height: 20px; accent-color: var(--sage-deep); margin: 0; }

/* -------------------------------------------------------------- parallax */

/* Full-bleed bands whose photograph drifts against the scroll. The drift is
   pure decoration — it never carries meaning, and it is switched off entirely
   under prefers-reduced-motion (see the block at the end of this section).
   The image layer is taller than its frame by --px-travel at top and bottom,
   which is exactly the distance the script is allowed to move it. */

.px {
  /* Per-band travel arrives as --px-travel-lg on the element; the breakpoint
     rules below re-derive --px-travel so they can override it without
     !important, which an inline custom property would otherwise win. */
  --px-travel: var(--px-travel-lg, 110px);
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: var(--px-h, clamp(440px, 62vh, 680px));
  padding-block: var(--sec-y);
  background: var(--ink);
  color: var(--white);
}

.px__media {
  position: absolute;
  top: calc(var(--px-travel) * -1);
  bottom: calc(var(--px-travel) * -1);
  left: 0; right: 0;
  z-index: 0;
}
.px__media picture { display: block; width: 100%; height: 100%; }
.px__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--px-pos, center);
}

.px__scrim { position: absolute; inset: 0; z-index: 1; }
.px--strong .px__scrim { background: linear-gradient(180deg, rgba(63,58,55,.62) 0%, rgba(63,58,55,.5) 45%, rgba(63,58,55,.74) 100%); }
.px--soft   .px__scrim { background: linear-gradient(180deg, rgba(63,58,55,.28) 0%, rgba(63,58,55,.12) 40%, rgba(63,58,55,.7) 100%); }
.px--sage   .px__scrim { background: linear-gradient(180deg, rgba(63,58,55,.5) 0%, rgba(95,114,104,.55) 100%); }
/* Nothing across the photograph itself — the greens and stone go untouched.
   Only the last third carries a wash, and only enough to hold the copy at AA
   against the mat. */
.px--clear  .px__scrim { background: linear-gradient(180deg, rgba(63,58,55,0) 52%, rgba(63,58,55,.3) 76%, rgba(63,58,55,.66) 100%); }

.px__inner { position: relative; z-index: 2; }
.px--bottom { align-items: end; }
.px--center .px__inner { text-align: center; justify-items: center; }

/* Full-height hero: the viewport minus the sticky header and announcement bar,
   so it fills the screen without pushing them off it. svh rather than vh so
   mobile browser chrome doesn't crop the bottom. */
.px--full { --px-h: calc(100vh - var(--header-h) - var(--bar-h)); padding-block: clamp(28px, 5vh, 64px); }
@supports (height: 100svh) {
  .px--full { --px-h: calc(100svh - var(--header-h) - var(--bar-h)); }
}

/* At full height the frame is taller than the photograph's own proportions, so
   the crop needs re-centring on the person rather than the empty foreground. */
.px--hero .px__media img { object-position: center 30%; }
@media (min-width: 760px) { .px--hero .px__media img { object-position: center 58%; } }

/* ------------------------------------------------------- layered hero ---- */

/* Three layers on one shared 1640x959 canvas: the photograph, the wordmark,
   and the same photograph with everything above the mat cut away. Because all
   three are <img> with identical object-fit and object-position, they crop as
   one at every viewport and can't drift out of register — which is the whole
   trick that lets the wordmark rise from behind the foreground.

   The transforms are nested rather than stacked on one element, so each stage
   composes instead of overwriting the last:
     .px__media  parallax drift   (JS)
       .hero-zoom  slow push-in   (CSS)
         .hero-logo  sink on scroll (JS)
           img         rise on load  (CSS) */
.hero-zoom { position: absolute; inset: 0; display: grid; }
.hero-plate { grid-area: 1 / 1; display: block; width: 100%; height: 100%; }
.hero-plate > picture { display: block; width: 100%; height: 100%; }
.hero-layer {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--px-pos, center);
}
.hero-plate--front { z-index: 1; }
.hero-logo { will-change: transform; }

/* With the wash pulled back off the photograph, the hero copy carries its own
   contrast rather than borrowing it from a tint over the whole image. */
.px--hero .px__inner h1 { text-shadow: 0 2px 24px rgba(63, 58, 55, .55); }

/* Below the layered breakpoint the sources are a 1x1 transparent pixel, so
   the wordmark and cut-out cost nothing on phones — the portrait crop there
   already carries the mark. */
@media (max-width: 759px) {
  .hero-logo, .hero-plate--front { display: none; }
}

/* The rise. Starts far enough down to sit entirely behind the cut-out, even
   on an ultrawide crop, then eases up into place. */
@keyframes hero-logo-rise {
  from { transform: translate3d(0, 48%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.hero-logo img {
  animation: hero-logo-rise 1.9s cubic-bezier(.16, 1, .3, 1) 260ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo img, .hero-zoom { animation: none !important; }
  .hero-logo, .hero-logo img, .hero-zoom { transform: none !important; }
}

/* A phone-width frame has to over-scale the image layer to cover it, and every
   pixel of parallax travel makes that layer taller and the horizontal crop
   worse. Trim the travel on small screens, and drop it entirely on the
   full-height hero, where the burned-in wordmark would lose its edges.
   The script reads these values, so the layer can still never expose a gap. */
@media (max-width: 759px) {
  .px { --px-travel: 60px; }
  .px--hero { --px-travel: 0px; }
}

/* Slow push-in. Sits on the image so it composes with the parallax transform
   on the wrapper rather than fighting it. */
@keyframes px-zoom { from { transform: scale(1); } to { transform: scale(1.13); } }
/* Single-image bands zoom the image itself; the layered hero zooms the whole
   stack so its three layers stay locked together. */
.px--zoom:not(.hero-stack) .px__media img,
.px--zoom .hero-zoom {
  animation: px-zoom 30s cubic-bezier(.25, .5, .35, 1) forwards;
  transform-origin: var(--px-pos, center);
}
/* Anchored to the top edge on the layered hero, so the push-in can't crop the
   wordmark sitting near it. Both plates scale together, so the wordmark keeps
   its exact relationship to the mat it rises from. */
.px--zoom.hero-stack .hero-zoom { transform-origin: center top; }

/* A quieter drift on in-flow section photography. */
[data-parallax-soft] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .px__media, [data-parallax-soft] { transform: none !important; }
  /* Not just "instant" — no push-in at all, and no residual scale. */
  .px--zoom .px__media img { animation: none !important; transform: none !important; }
}

/* --------------------------------------------------------------- utility */

.hide-desktop { display: none; }
@media (max-width: 899px) { .hide-mobile { display: none; } .hide-desktop { display: revert; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  z-index: 120; padding: 14px 22px;
  background: var(--ink); color: var(--white);
  font-size: 14px; letter-spacing: .04em;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }