/* ═══════════════════════════════════════════════════════════════════
   WELLNEST HAVEN — the home bed
   Light, editorial, photography-led. The palette is taken from the
   room the bed was photographed in: lime plaster, oak, linen. Red is
   reserved — it only ever marks light output, never interface.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Warmed 28 Aug 2026. The old palette was a cool paper white built to argue
     against a category that runs black grounds and red neon. It won that
     argument and read clinical doing it — we sell a wellness object, not a lab
     instrument. Same logic, warmer ground. Red is still photons only. */
  --paper:      #faf7f1;   /* warm bone */
  --paper-deep: #f2ece1;   /* banded sections */
  --linen:      #e7dfd1;
  --ink:        #211b14;   /* warm near-black, was the cool #14120f */
  --graphite:   #5f5648;
  --hairline:   #e6ddcd;
  --hairline-2: #d0c4ae;
  --clay:       #7d5f45;   /* buttons and warm accents */
  --clay-deep:  #614733;   /* hover */
  --cocoa:      #241d16;   /* footer ground */
  --surface:    #f6f1e7;
  --light:      #d8402a;   /* photons only */
  --light-wash: #f7e6e1;

  /* Three faces, three jobs. --display is the high-contrast serif that carries
     headlines; --sans is what body copy is actually set in; --mono is labels.
     Newsreader stayed as --serif for the few places that still want a reading
     serif. Changed 28 Aug 2026 to match the reference Jacob supplied. */
  --display: 'Fraunces', 'Newsreader', Georgia, serif;
  --sans:  'Archivo', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --gut: clamp(1.15rem, 3vw, 2.75rem);
  --max: 90rem;
  /* The height of the fixed header block: announcement bar plus nav. Measured,
     not guessed — getting it wrong slides the first section under the header.
     The breakpoint is 900, not 700, because that is where the nav collapses
     into the drawer and loses its taller desktop padding. */
  --head-h: 128px;   /* bar 46 + nav 82, the stacked-lockup bar */
}
@media(min-width:901px){:root{--head-h:137px}}  /* bar 47 + nav 90 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.02rem,.97rem + .3vw,1.2rem); line-height:1.7;
  overflow-x:hidden;
}
/* `-webkit-font-smoothing:antialiased` was set on body and has been removed
   deliberately. It is widely copied as a polish default, but on macOS it
   thins every glyph — on a light serif over a warm off-white that is most of
   the reason the text read as faint. Subpixel rendering is the default for a
   reason; letting it back gives real weight without changing a single size. */
img{display:block; max-width:100%; height:auto}
a{color:inherit}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.wrap-narrow{max-width:56rem; margin-inline:auto; padding-inline:var(--gut)}

/* ── type ───────────────────────────────────────────────────────── */
.display{
  font-family:var(--sans); font-weight:500; font-stretch:108%;
  text-transform:uppercase; letter-spacing:-.008em; line-height:.95; margin:0;
}
.eyebrow{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--graphite);
  margin:0 0 1.5rem; display:flex; align-items:center; gap:.8rem;
}
.eyebrow::before{content:''; width:1.6rem; height:1px; background:var(--light); flex:none}
.eyebrow.center{justify-content:center}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500}
.lede{font-size:clamp(1.15rem,1rem + .75vw,1.55rem); line-height:1.5; color:var(--graphite); font-weight:400}

/* ── nav ────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:80;
  /* Three tracks, not space-between. The menu is centred on the bar itself,
     so it stays put whether the third slot is empty or fills later; with two
     flex children it would sit hard against the right edge instead. */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:1.9rem clamp(1.15rem,4vw,3rem); gap:1.5rem;
  background:rgba(252,251,249,.92); backdrop-filter:blur(14px);
}
.nav a{color:var(--ink); text-decoration:none}
.switch{display:flex; gap:.25rem; border:1px solid var(--hairline-2); padding:.2rem; border-radius:100px}
.switch a{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.45rem 1rem; border-radius:100px;
  color:var(--graphite); transition:background .25s, color .25s;
}
.switch a:hover{color:var(--ink)}
.switch a.is-on{background:var(--ink); color:var(--paper)}
/* The real wordmark, not a CSS approximation of it. brand/identity.md ships
   `logo/wellnest-wordmark-ink.svg` with the clearspace already inside the
   file, so the element is sized on width and nothing is added around it. The
   180px floor is the documented minimum for this lockup. */
.brand{display:flex; align-items:center; flex:none}
.brand img{height:auto}
/* Desktop carries the horizontal wordmark; phones carry the kit's stacked
   lockup, which is built for exactly this compact centred slot and gives the
   bar the vertical presence the flat wordmark cannot. 112px respects the
   stacked minimum of 110. */
.brand img.brand-word{display:block;width:clamp(188px,15vw,216px)}
.brand img.brand-stack{display:none;width:112px}
@media(max-width:900px){
  .brand img.brand-word{display:none}
  .brand img.brand-stack{display:block}
}

/* ── the menu ────────────────────────────────────────────────────────
   A named menu rather than the two-tab bed switcher it replaced. The
   switcher only ever offered one product's two variants, so a site with
   a home page, a category and a second product line had nowhere to put
   them. Sentence case and sans, because uppercase mono at this length
   reads as a row of labels rather than as somewhere to go.

   Below 900 it collapses into a drawer. The four links did fit on one
   line at 375px, but only at .88rem, which made the menu the smallest
   type on the page — and it pushed the header to 89px, so a phone gave
   up a fifth of the first screen to navigation. */
/* 13px at weight 700, 24px apart. Measured off the reference header rather
   than guessed: the earlier 16px at weight 500 had it backwards, and a menu
   set at body size in a medium weight reads as running text that happens to
   be at the top of the page. Small and bold is what makes it read as chrome. */
.nav-aux{justify-self:end; display:flex; align-items:center; gap:1.6rem}
.nav-region{display:flex; align-items:center; gap:.5rem;
  font-family:'Mulish',var(--sans); font-size:13px; font-weight:700;
  letter-spacing:-.13px; color:#35312e; white-space:nowrap}
.nav-flag{font-size:1.05rem; line-height:1}
.nav-chev{width:10px; height:6px; fill:none; stroke:#35312e;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.nav-cart{display:block; color:#35312e}
.nav-cart svg{display:block; width:24px; height:24px; fill:none;
  stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.nav-cart:hover{opacity:.6}

.nav-menu{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap}
.nav-menu a{font-family:'Mulish',var(--sans); font-weight:700; font-size:13px;
  letter-spacing:-.13px; color:#35312e; text-decoration:none;
  transition:opacity .2s; white-space:nowrap}
.nav-menu a:hover{opacity:.6}

/* ── the drawer, below 900 ───────────────────────────────────────────
   The button is a two-line burger rather than three: at this weight the
   third line closes the gaps up into a solid block. */
.nav-burger{display:none}
.nav-close{display:none}

@media(max-width:900px){
  /* Fixed 44px rails either side so the wordmark is centred on the bar
     itself, not on whatever is left after the button. 44px is also the
     smallest comfortable touch target. */
  /* backdrop-filter makes .nav a containing block for its fixed children,
     which clipped the drawer to the height of the header bar. The bar is
     opaque here instead, and the drawer gets the viewport back. */
  /* z-index above the scrim, because .nav's own z-index makes a stacking
     context: the drawer's 90 is scoped inside it, so without this the scrim
     paints over the drawer it is supposed to sit behind. */
  .nav{display:grid; grid-template-columns:44px 1fr 44px; gap:.5rem;
    padding:.7rem var(--gut); z-index:95;
    backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper)}
  .brand{justify-self:center}
  .nav-burger{display:grid; place-items:center; gap:5px; width:44px; height:44px;
    margin-left:-10px; padding:0; border:0; background:none; cursor:pointer;
    grid-auto-rows:1.5px; align-content:center}
  .nav-burger span{display:block; width:24px; height:2px; background:var(--ink);
    transition:transform .3s, opacity .2s}
  .nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

  /* The reference's drawer is not a side panel. It is a full-width sheet
     under the header, serif links with no dividers, a round white close
     button overlapping the sheet's top edge, and the country picker sitting
     at the bottom. The header stays visible above it, dimmed by the scrim. */
  .nav-menu{position:fixed; top:var(--head-h); left:0; right:0; bottom:0;
    z-index:97; background:var(--paper);
    display:flex; flex-direction:column; align-items:stretch; flex-wrap:nowrap;
    gap:0; padding:2.75rem clamp(1.5rem,6vw,2rem) 1.5rem;
    overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s}
  .nav-menu.is-open{opacity:1; visibility:visible}
  .nav-menu a{font-family:var(--display); font-size:1.7rem; font-weight:400;
    letter-spacing:0; color:var(--ink); padding:.55rem 0; border:0;
    white-space:normal; opacity:1}
  .nav-menu a:hover{opacity:.6}
  .nav-menu a.is-on{color:var(--ink)}

  /* The picker rides at the foot of the sheet; its list opens upward there
     because there is nothing below it but the edge of the screen. */
  .nav-menu .nav-currency{margin-top:auto; padding-top:2rem}
  .nav-menu .nav-currency-menu{top:auto; bottom:calc(100% + .5rem); left:0; right:auto}

  .nav-close{position:fixed; top:calc(var(--head-h) - 28px); left:50%;
    margin-left:-28px; z-index:98; display:grid; place-items:center;
    width:56px; height:56px; padding:0 0 2px; border:0; border-radius:50%;
    background:#fff; box-shadow:0 4px 18px rgba(36,29,22,.16);
    font-size:1.5rem; line-height:1; color:var(--ink); cursor:pointer}

  .nav-scrim{position:fixed; inset:0; z-index:96; background:rgba(36,29,22,.42);
    opacity:0; transition:opacity .3s; border:0; padding:0; cursor:pointer}
  .nav-scrim.is-open{opacity:1}
  /* Stops the page behind scrolling under the open drawer. */
  body.nav-locked{overflow:hidden}

  /* The basket stays in the header on a phone — the drawer is where the
     picker goes (site-nav.js moves it there), so what is left out here is
     exactly the cart, in the right-hand 44px rail. */
  .nav-aux{display:flex; justify-self:end; gap:0}
  .nav-cart{margin-right:-4px}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .nav-menu,.nav-scrim,.nav-burger span{transition:none}
}

/* ── HERO: a product page that still behaves like a magazine ────── */
.hero{padding-top:4.5rem; border-bottom:1px solid var(--hairline)}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:0;
  max-width:var(--max); margin-inline:auto;
}
@media (min-width:60rem){
  .hero-grid{grid-template-columns:1.08fr .92fr; align-items:stretch; min-height:calc(100svh - 4.5rem)}
}
.hero-shot{position:relative; overflow:hidden; background:var(--linen); margin:0}
.hero-shot img{
  width:100%; height:100%; min-height:clamp(18rem,52vw,100%);
  object-fit:cover; object-position:62% center;
  animation:settle 2s cubic-bezier(.16,.84,.24,1) both;
}
@keyframes settle{from{transform:scale(1.05)} to{transform:none}}
.hero-info{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,4.5vw,4rem) var(--gut);
}
@media (min-width:60rem){ .hero-info{padding-right:var(--gut); padding-left:clamp(2rem,4vw,4rem)} }

.for-who{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--graphite); margin:0 0 1.5rem;
}
.for-who span{
  color:var(--ink); background:var(--light-wash);
  padding:.3rem .6rem; margin-right:.35rem;
}
.hero-info h1{font-size:clamp(2.1rem,1.2rem + 3.6vw,3.9rem); margin-bottom:.9rem}
.hero-claim{
  font-family:var(--serif); font-weight:200; font-style:italic;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem); line-height:1.3;
  color:var(--graphite); margin:0 0 2rem; max-width:22ch;
}
.hero-claim em{font-style:italic; display:block; color:var(--light)}

.buy{border-block:1px solid var(--hairline); padding:1.75rem 0; margin-bottom:1.75rem}
.buy-price{
  font-family:var(--sans); font-stretch:108%; font-weight:600;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem); line-height:1;
  letter-spacing:-.02em; margin:0;
}
.buy-note{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--graphite); margin:.6rem 0 1.5rem}
.buy-btn{
  display:block; text-align:center; text-decoration:none;
  background:var(--ink); color:var(--paper);
  padding:1.1rem 2rem; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; transition:background .3s;
}
.buy-btn:hover{background:var(--light)}
.buy-sub{font-family:var(--serif); font-size:.9rem; color:var(--graphite); margin:.9rem 0 0}

/* The second way to buy, deliberately quieter than the first.
   Two black slabs side by side compete and neither wins, and on a $17,000
   bed the phone call is still the path that converts — most people want to
   talk to someone before they spend that. So this is a text link under the
   button: findable by the person who has already decided, invisible to the
   person who hasn't. */
.buy-alt{
  display:inline-block; margin-top:1rem; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--graphite);
  border-bottom:1px solid var(--hairline-2); padding-bottom:.2rem;
  transition:color .25s, border-color .25s;
}
.buy-alt:hover{color:var(--ink); border-color:var(--light)}

.quick{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem 1.5rem; margin:0}
.quick dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:.35rem;
}
.quick dd{margin:0; font-family:var(--sans); font-stretch:108%; font-weight:500; font-size:1.15rem; line-height:1.2}
.quick dd span{display:block; font-family:var(--mono); font-weight:400; font-size:.68rem; color:var(--graphite); margin-top:.25rem}

.statement{
  display:grid; gap:1.5rem; grid-template-columns:1fr;
  border-top:1px solid var(--ink); padding-top:2rem;
}
@media (min-width:56rem){.statement{grid-template-columns:14rem 1fr; gap:3rem; align-items:start}}
.statement .eyebrow{margin:0}
.statement-text{
  margin:0; font-family:var(--serif); font-weight:200;
  font-size:clamp(1.35rem,1rem + 1.5vw,2.15rem); line-height:1.38;
  max-width:34ch; color:var(--ink);
}
.statement-text em{font-style:italic; color:var(--light)}

/* ── which bed ──────────────────────────────────────────────────── */
.which{background:var(--paper-deep)}
.which-grid{display:grid; gap:1px; background:var(--hairline); grid-template-columns:1fr; border:1px solid var(--hairline)}
@media (min-width:56rem){.which-grid{grid-template-columns:1fr 1fr}}
.which-card{background:var(--paper); padding:clamp(1.5rem,3.5vw,2.75rem)}
.which-card.is-this{background:var(--paper); box-shadow:inset 3px 0 0 var(--light)}
.which-tag{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--graphite); margin:0 0 1rem;
}
.which-card.is-this .which-tag{color:var(--light)}
.which-card h3{font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem); margin:0 0 1rem}
.which-card p{color:#3b3831; margin:0 0 1.25rem; font-size:.98rem}
.which-card ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline)}
.which-card li{
  padding:.65rem 0; border-bottom:1px solid var(--hairline);
  font-family:var(--mono); font-size:.78rem; color:var(--graphite);
}
.which-card li b{color:var(--ink); font-weight:500}
.which-link{
  display:inline-block; margin-top:1.25rem; font-family:var(--mono);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid var(--light); padding-bottom:.2rem;
}

/* ── sections ───────────────────────────────────────────────────── */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section.tint{background:var(--paper-deep)}
.section h2{font-size:clamp(1.8rem,1.1rem + 3.2vw,4rem); max-width:20ch; margin-bottom:1.5rem}
.prose p{max-width:56ch; color:#3b3831}
.prose p + p{margin-top:1.15rem}
.prose strong{font-weight:400; color:var(--ink); box-shadow:inset 0 -.42em 0 var(--light-wash)}
.two{display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr; align-items:center}
@media (min-width:56rem){.two{grid-template-columns:1fr 1fr}}
.two.wide-left{grid-template-columns:1fr}
@media (min-width:56rem){.two.wide-left{grid-template-columns:1.15fr .85fr}}

/* ── photography ────────────────────────────────────────────────── */
figure{margin:0}
.bleed{width:100%; margin-block:clamp(2rem,4.5vw,4rem)}
.bleed img{width:100%; height:clamp(20rem,52vw,40rem); object-fit:cover}
figcaption{
  margin-top:.9rem; padding-inline:var(--gut);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.03em;
  color:var(--graphite); line-height:1.6; max-width:46ch;
}
.figure-plain figcaption{padding-inline:0}
.grid-detail{display:grid; gap:1px; background:var(--hairline); grid-template-columns:repeat(2,1fr)}
@media (min-width:60rem){.grid-detail{grid-template-columns:repeat(4,1fr)}}
.grid-detail figure{background:var(--paper)}
.grid-detail img{aspect-ratio:4/3; object-fit:cover; width:100%}
.grid-detail figcaption{padding:1rem 1.1rem 1.4rem; margin:0}

/* ── SIGNATURE: the spectrum, on light ──────────────────────────── */
.spectrum{max-width:60rem}
/* Column count follows the markup rather than being hardcoded. It was
   repeat(5,1fr) against five bands, and when the Home Bed dropped to its
   real four wavelengths the bar kept an empty fifth column. */
.spectrum-bar{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; height:clamp(5rem,9vw,7.5rem)}
.band{position:relative; display:flex; align-items:flex-end; padding:.7rem .6rem; background:var(--paper)}
.band::before{content:''; position:absolute; inset:0; background:var(--c); opacity:var(--o)}
.band > span{position:relative; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em}
.b1{--c:#ff3b1f; --o:1}      .b1 > span{color:#fff}
.b2{--c:#d8402a; --o:1}      .b2 > span{color:#fff}
.b3{--c:#d8402a; --o:.28}    .b3 > span{color:#8a4034}
.b4{--c:#d8402a; --o:.14}    .b4 > span{color:#a8776c}
.b5{--c:#d8402a; --o:.06}    .b5 > span{color:#bfa79f}
.spectrum-key{
  display:flex; justify-content:space-between; margin-top:.8rem;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--graphite);
}

/* ── the physics argument ───────────────────────────────────────── */
.claimbar{display:grid; gap:1.2rem; margin-top:2.25rem}
.claim .lbl{
  font-family:var(--mono); font-size:.72rem; display:flex;
  justify-content:space-between; gap:1rem; color:var(--graphite); margin-bottom:.45rem;
}
.claim .lbl b{color:var(--ink); font-weight:500}
.track{height:.45rem; background:var(--linen)}
.track i{display:block; height:100%; background:var(--f); width:var(--w)}
.c-ceiling{--f:var(--hairline-2); --w:9%}
.c-theirs {--f:repeating-linear-gradient(45deg,var(--light) 0 6px,#e8705c 6px 12px); --w:100%}
.c-ours   {--f:var(--light); --w:18%}

/* ── power point ────────────────────────────────────────────────── */
.plug{border-top:1px solid var(--hairline); margin-top:2rem}
.plug div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:1.1rem 0; border-bottom:1px solid var(--hairline);
  font-family:var(--mono); font-size:.82rem; color:var(--graphite); flex-wrap:wrap;
}
.plug .amp{font-size:1.15rem; color:var(--ink)}
.plug .is-ours{background:linear-gradient(90deg,var(--light-wash),transparent 70%); padding-inline:.9rem; margin-inline:-.9rem}
.plug .is-ours .amp{color:var(--light)}

/* ── spec sheet ─────────────────────────────────────────────────── */
.sheet{border-top:1px solid var(--ink)}
.sheet div{
  display:grid; grid-template-columns:1fr; gap:.2rem;
  padding:.9rem 0; border-bottom:1px solid var(--hairline);
}
@media (min-width:44rem){.sheet div{grid-template-columns:16rem 1fr; gap:2rem; align-items:baseline}}
.sheet dt{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite)}
.sheet dd{margin:0; font-family:var(--mono); font-size:.86rem}

/* ── price ──────────────────────────────────────────────────────── */
.price{
  font-family:var(--sans); font-stretch:108%; font-weight:600;
  font-size:clamp(3.2rem,1.6rem + 9vw,9rem); line-height:.86; letter-spacing:-.025em;
}
.price sup{font-size:.26em; vertical-align:super; letter-spacing:0}

/* ── guarantee ──────────────────────────────────────────────────── */
.guarantee{border:1px solid var(--hairline-2); padding:clamp(1.75rem,4vw,3.25rem); background:var(--paper)}

/* ── CTA + form ─────────────────────────────────────────────────── */
.cta{text-align:center; padding:clamp(4rem,8vw,7rem) 0}
.lead-form{max-width:26rem; margin:2.5rem auto 0; text-align:left}
.lead-form .wh-f label{display:block; margin-bottom:1rem}
.lead-form .wh-f span{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:.4rem;
}
.lead-form .wh-f input{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hairline-2);
  padding:.75rem .1rem; font-family:var(--mono); font-size:.92rem; color:var(--ink);
}
.lead-form .wh-f input:focus{outline:0; border-bottom-color:var(--light)}
.lead-form .wh-f button{
  width:100%; margin-top:1rem; background:var(--ink); color:var(--paper); border:0;
  padding:1.05rem; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  transition:background .3s;
}
.lead-form .wh-f button:hover{background:var(--light)}
.lead-form .wh-consent{font-size:.8rem; color:var(--graphite); margin-top:1rem}
.lead-form .wh-err{color:var(--light)}

footer{
  border-top:1px solid var(--hairline); padding:2.5rem 0 3.5rem;
  font-family:var(--mono); font-size:.7rem; color:var(--graphite);
  display:flex; flex-wrap:wrap; gap:.9rem 2rem; justify-content:space-between;
}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--light); outline-offset:3px}

/* reveal */
@media (prefers-reduced-motion:reduce){.hero-shot img{animation:none}}
.rise{opacity:0; transform:translateY(22px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1; transform:none; transition:none}}

/* ── mobile: the hero image was eating the whole first screen ────── */
@media (max-width:59.99rem){
  .hero{padding-top:3.9rem}
  .hero-shot img{min-height:0; height:clamp(13rem,42vw,20rem)}
  .hero-info{padding-block:1.75rem 2.25rem}
  .hero-info h1{font-size:clamp(1.75rem,6.5vw,2.4rem)}
  .hero-claim{font-size:1.05rem; margin-bottom:1.4rem}
  .buy{padding:1.25rem 0; margin-bottom:1.25rem}
  .quick{gap:1rem}
  .nav{padding:.7rem var(--gut)}
  .switch a{padding:.4rem .75rem; font-size:.62rem}
  .brand{font-size:.66rem; letter-spacing:.12em}
  .nav-cta{display:none}
}

/* ── gallery ────────────────────────────────────────────────────── */
.gallery{display:grid; gap:1px; background:var(--hairline); grid-template-columns:repeat(2,1fr)}
@media (min-width:52rem){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery button{
  display:block; padding:0; border:0; background:var(--paper);
  cursor:zoom-in; position:relative; overflow:hidden; width:100%;
}
.gallery img{aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gallery button:hover img{transform:scale(1.04)}
.gallery figcaption{
  position:absolute; inset:auto 0 0 0; padding:.6rem .8rem; margin:0; text-align:left;
  background:linear-gradient(to top, rgba(20,18,15,.72), transparent);
  color:#fff; font-family:var(--mono); font-size:.62rem; letter-spacing:.04em;
  opacity:0; transition:opacity .35s;
}
.gallery button:hover figcaption,.gallery button:focus-visible figcaption{opacity:1}

.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(14,12,10,.94); padding:clamp(1rem,4vw,3rem);
  align-items:center; justify-content:center;
}
.lightbox[open],.lightbox.is-open{display:flex}
.lightbox img{max-width:100%; max-height:82svh; object-fit:contain}
.lightbox figcaption{
  color:#e8e3dc; text-align:center; margin-top:1rem; padding:0;
  font-family:var(--mono); font-size:.72rem; max-width:52ch; margin-inline:auto;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:none; border:0; color:#fff; cursor:pointer;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; padding:1rem;
}
.lb-close{top:.5rem; right:.5rem; font-size:1.4rem}
.lb-prev{left:.25rem; top:50%; transform:translateY(-50%); font-size:1.8rem}
.lb-next{right:.25rem; top:50%; transform:translateY(-50%); font-size:1.8rem}
.lb-count{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.7rem; color:#a8a19a; letter-spacing:.14em;
}
@media (prefers-reduced-motion:reduce){.gallery img{transition:none}}

/* ── enquiry modal ──────────────────────────────────────────────── */
.whm{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center; padding:1rem;
  background:rgba(20,18,15,.55); backdrop-filter:blur(6px);
}
.whm.is-open{display:flex}
.whm-panel{
  background:var(--paper); width:min(38rem,100%); max-height:92svh; overflow:auto;
  padding:clamp(1.25rem,3.5vw,2.5rem); position:relative;
  box-shadow:0 30px 80px rgba(20,18,15,.28);
}
.whm-top{display:flex; align-items:center; gap:1rem; margin-bottom:2rem}
.whm-track{flex:1; height:2px; background:var(--linen)}
.whm-track i{display:block; height:100%; background:var(--light); width:0; transition:width .45s cubic-bezier(.2,.8,.2,1)}
.whm-count{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; color:var(--graphite); white-space:nowrap}
.whm-x{background:none; border:0; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--graphite); padding:0 .25rem}
.whm-x:hover{color:var(--ink)}

.whm-q{
  font-family:var(--sans); font-stretch:108%; font-weight:500; text-transform:uppercase;
  font-size:clamp(1.15rem,.95rem + 1.1vw,1.75rem); line-height:1.15;
  margin:0 0 1.5rem; letter-spacing:-.005em;
}
.whm-field{display:block; margin-bottom:1.1rem}
.whm-field span{
  display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:.4rem;
}
.whm-field span i{font-style:normal; opacity:.65}
.whm-field input,.whm-field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hairline-2);
  padding:.7rem .1rem; font-family:var(--serif); font-size:1.05rem; color:var(--ink);
}
.whm-field input:focus,.whm-field textarea:focus{outline:0; border-bottom-color:var(--light)}
.whm-field textarea{border:1px solid var(--hairline-2); padding:.75rem; resize:vertical}

.whm-choices{display:grid; gap:.5rem}
.whm-choice{
  display:flex; align-items:center; gap:.85rem; cursor:pointer;
  border:1px solid var(--hairline-2); padding:.85rem 1rem; transition:border-color .2s, background .2s;
}
.whm-choice:hover{border-color:var(--ink)}
.whm-choice.is-on{border-color:var(--light); background:var(--light-wash)}
.whm-choice input{position:absolute; opacity:0; pointer-events:none}
.whm-choice b{
  font-family:var(--mono); font-size:.66rem; font-weight:500; border:1px solid var(--hairline-2);
  width:1.6rem; height:1.6rem; display:grid; place-items:center; flex:none;
}
.whm-choice span{font-family:var(--serif); font-size:1rem}
.whm-choice:has(input:checked) b{background:var(--light); color:#fff; border-color:var(--light)}

.whm-consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:#3b3831; cursor:pointer}
.whm-consent input{margin-top:.35rem; flex:none; accent-color:var(--light)}
.whm-hp{position:absolute!important; left:-9999px!important; opacity:0}
.whm-err{color:var(--light); font-family:var(--mono); font-size:.74rem; min-height:1.2rem; margin:.75rem 0 0}
.whm-done{font-family:var(--serif); font-size:1.15rem; line-height:1.6; color:var(--ink); margin:0}

.whm-foot{display:flex; gap:1rem; align-items:center; margin-top:1.5rem}
.whm-back{
  background:none; border:0; cursor:pointer; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); padding:.5rem 0;
}
.whm-back:hover{color:var(--ink)}
.whm-next{
  margin-left:auto; background:var(--ink); color:var(--paper); border:0; cursor:pointer;
  padding:.95rem 2rem; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; transition:background .3s;
}
.whm-next:hover{background:var(--light)}
.whm-next[disabled]{opacity:.6; cursor:default}
@media (prefers-reduced-motion:reduce){.whm-track i{transition:none}}

/* ── product carousel ───────────────────────────────────────────── */
.pdp{position:relative; display:flex; flex-direction:column; background:var(--linen); min-width:0}
.pdp-viewport{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; flex:1;
}
.pdp-viewport::-webkit-scrollbar{display:none}
.pdp-slide{
  flex:0 0 100%; scroll-snap-align:center; position:relative; margin:0; min-width:0;
}
.pdp-slide img{
  width:100%; height:100%; min-height:clamp(16rem,46vw,34rem);
  object-fit:cover; object-position:62% center; display:block;
}
.pdp-slide figcaption{
  position:absolute; inset:auto 0 0 0; margin:0; padding:2.5rem .9rem .9rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:linear-gradient(to top, rgba(20,18,15,.6), transparent);
}
.pdp-arrow{
  position:absolute; top:calc(50% - 2.5rem); transform:translateY(-50%);
  width:2.75rem; height:2.75rem; border:0; border-radius:50%;
  background:rgba(252,251,249,.92); color:var(--ink); cursor:pointer;
  font-size:1.5rem; line-height:1; display:grid; place-items:center;
  box-shadow:0 2px 14px rgba(20,18,15,.18); transition:background .25s, opacity .25s;
}
.pdp-arrow:hover{background:#fff}
.pdp-prev{left:.75rem}
.pdp-next{right:.75rem}
.pdp-arrow[disabled]{opacity:.35; cursor:default}
.pdp-dots{display:flex; gap:.4rem; justify-content:center; padding:.75rem 0 0}
.pdp-dots button{
  width:.4rem; height:.4rem; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--hairline-2); transition:background .25s, transform .25s;
}
.pdp-dots button.is-on{background:var(--light); transform:scale(1.35)}
.pdp-thumbs{display:none}
@media (min-width:60rem){
  .pdp-dots{display:none}
  .pdp-thumbs{display:flex; gap:.5rem; padding:.6rem; background:var(--paper); flex-wrap:wrap}
  .pdp-thumb{
    width:4.25rem; height:3.2rem; padding:0; border:1px solid transparent; cursor:pointer;
    background:none; overflow:hidden; transition:border-color .25s, opacity .25s; opacity:.6;
  }
  .pdp-thumb img{width:100%; height:100%; object-fit:cover; display:block}
  .pdp-thumb:hover{opacity:1}
  .pdp-thumb.is-on{border-color:var(--light); opacity:1}
}
@media (max-width:59.99rem){
  .pdp-slide img{min-height:0; height:clamp(13rem,52vw,20rem)}
  .pdp-arrow{width:2.25rem; height:2.25rem; font-size:1.2rem; top:calc(50% - 1rem)}
}

.whm-skip{
  background:none; border:0; cursor:pointer; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--graphite); text-decoration:underline; text-underline-offset:3px; padding:.5rem 0;
}
.whm-skip:hover{color:var(--ink)}
.whm-saved{
  font-family:var(--mono); font-size:.68rem; color:var(--graphite);
  margin:1rem 0 0; padding-top:.85rem; border-top:1px solid var(--hairline);
}
.whm-consent{margin-top:1.25rem}

/* consent is a statement now, not a control */
.whm-consent{
  display:block; margin:1.5rem 0 0; padding-top:1rem;
  border-top:1px solid var(--hairline);
  font-family:var(--serif); font-size:.85rem; line-height:1.55; color:var(--graphite);
}

/* the legal pages inherit the site's type, on a narrower measure */
.legal{max-width:44rem; margin-inline:auto; padding:6rem var(--gut) 4rem}
.legal h1{font-family:var(--sans); font-stretch:108%; font-weight:500; text-transform:uppercase;
  font-size:clamp(1.7rem,1.1rem + 2.4vw,2.8rem); line-height:1.05; margin:0 0 .75rem}
.legal h2{font-family:var(--sans); font-stretch:108%; font-weight:500; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.01em; margin:2.5rem 0 .75rem}
.legal p,.legal li{color:#3b3831}
.legal a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}

/* ── /project ─────────────────────────────────────────────────────────────
   The home wellness design-build page. Prefixed .pj- so it cannot collide
   with the product pages, which share this stylesheet.

   Every image is a placeholder until the concept renders exist. They are
   drawn rather than left empty so the page can be judged on layout now, and
   each one names the shot it is waiting for — swap the .pj-ph div for an
   <img> and nothing else needs to move.
   ------------------------------------------------------------------------ */

.pj-ph{position:relative;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--paper-deep) 0 12px,var(--surface) 12px 24px);
  border:1px solid var(--hairline);color:var(--graphite);text-align:center;
  font-family:var(--mono,ui-monospace,monospace);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;padding:1.5rem;line-height:1.6}
.pj-ph::after{content:'placeholder';position:absolute;top:.5rem;left:.5rem;
  font-size:.55rem;letter-spacing:.1em;color:var(--hairline-2)}

.pj-hero{position:relative;min-height:clamp(30rem,72vh,46rem);display:grid}
.pj-hero .pj-ph{min-height:clamp(30rem,72vh,46rem)}
.pj-hero-copy{position:absolute;inset:auto 0 0 0;padding:clamp(1.5rem,5vw,4rem);
  background:linear-gradient(to top,rgba(20,19,15,.82) 0%,rgba(20,19,15,.55) 55%,transparent 100%);
  color:var(--paper)}
.pj-hero-copy h1{color:var(--paper);max-width:18ch;margin:0 0 .75rem}
.pj-hero-copy p{color:var(--paper);opacity:.92;max-width:52ch;margin:0 0 1.5rem}

/* Horizontal snap rather than a JS carousel. The page has one job and does
   not need a slider library to do it, and a native scroller is the behaviour
   a phone already knows. */
/* Banded section. NOT `.band` — that name is already taken further up this
   file by the spectrum bar on the bed page, where it means display:flex. Using
   it here turned every section wrapper into a flex item, and a flex item's
   default min-width:auto let the scroller below force the page 41px wider than
   the viewport. */
.pj-band{background:var(--paper-deep)}

.pj-slides{display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,34rem);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;scrollbar-width:thin;
  /* Belt and braces against the same class of bug: a grid or flex child will
     refuse to shrink below its content without this, whatever the parent is. */
  min-width:0;max-width:100%}
.pj-slide{scroll-snap-align:start}
.pj-slide .pj-ph{aspect-ratio:16/9}
.pj-slide figcaption{margin-top:.75rem;color:var(--graphite);font-size:.95rem}

.pj-cats{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:820px){.pj-cats{grid-template-columns:1fr 1fr}}
.pj-cat .pj-ph{aspect-ratio:4/5;margin-bottom:1.25rem}
.pj-cat h3{margin:0 0 .5rem}
.pj-cat .pj-split{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hairline);
  display:grid;gap:.6rem}
.pj-cat .pj-split b{display:block;font-size:.78rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--graphite);font-weight:600}

.pj-steps{display:grid;gap:2rem;counter-reset:pj}
@media(min-width:820px){.pj-steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.pj-step{counter-increment:pj}
.pj-step::before{content:counter(pj);display:block;font-size:.8rem;letter-spacing:.1em;
  color:var(--graphite);border-top:2px solid var(--ink);padding-top:.6rem;margin-bottom:.9rem;
  font-family:var(--mono,ui-monospace,monospace)}
.pj-step h3{margin:0 0 .4rem}

.pj-ladder{width:100%;border-collapse:collapse;margin-top:1.5rem}
.pj-ladder th,.pj-ladder td{text-align:left;padding:.9rem 0;border-bottom:1px solid var(--hairline);
  vertical-align:baseline}
.pj-ladder td:last-child{text-align:right;white-space:nowrap;
  font-family:var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums}
.pj-ladder tr:last-child td{border-bottom:0}

.pj-ask{text-align:center;padding:clamp(3rem,8vw,6rem) 0}
.pj-ask h2{max-width:20ch;margin-inline:auto}
.pj-ask p{max-width:44ch;margin-inline:auto}
.pj-note{color:var(--graphite);font-size:.85rem;margin-top:1rem}

/* ── product detail page ───────────────────────────────────────────────────
   Ecommerce-style PDP furniture: the trust strip, the key-feature list, the
   inclusions grid and the dimensions block. Prefixed .pd- so it cannot collide
   with the marketing pages or the .pj- sauna page, all of which share this
   stylesheet.
   ------------------------------------------------------------------------ */

/* Three columns on a desktop, one swipeable row on a phone.
   Stacked, the three badges cost three screens of scroll to say three short
   things, and the second and third were below the fold on every phone — which
   is the same as not having them. As a snap-scrolling row they are one glance,
   and the partial fourth edge showing at the right is what tells a thumb there
   is more to the side. */
.pd-trust{display:grid;gap:1.5rem;padding-top:2rem;margin-top:2rem;
  border-top:1px solid var(--hairline)}
@media(max-width:759px){
  .pd-trust.is-badges{grid-auto-flow:column;grid-auto-columns:78%;gap:.75rem;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .pd-trust.is-badges::-webkit-scrollbar{display:none}
  .pd-trust.is-badges > div{scroll-snap-align:start;background:var(--paper);
    border:1px solid var(--hairline);border-radius:10px;padding:1.35rem}
}
@media(min-width:760px){.pd-trust{grid-template-columns:repeat(3,1fr);gap:2rem}}
/* Sized like the reference rather than like a footnote. These were a 22px
   icon over an 11px line of uppercase mono, which reads as small print at the
   bottom of a page; the three things a buyer most wants reassurance about were
   the least visible type in the section. Icon roughly doubles, the label
   becomes a display-sized serif line, and the sentence under it grows enough
   to be read rather than scanned past. */
/* Homepage trust strip: centered cards (the default left-align read as
   off-balance on wide screens). Scoped so product pages keep their look. */
.pd-trust.is-center{text-align:center}
.pd-trust.is-center .ic{margin-inline:auto}
.pd-trust.is-center p{margin-inline:auto;max-width:34ch}
.pd-trust .ic{width:38px;height:38px;display:block;margin:0 0 1.4rem;
  stroke:var(--ink);fill:none;stroke-width:1.35}
.pd-trust h4{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,1.15rem + 1.1vw,1.95rem);line-height:1.15;
  letter-spacing:-.015em;text-transform:none;margin:0 0 .75rem;color:var(--ink)}
.pd-trust p{margin:0;font-size:.95rem;color:var(--graphite);line-height:1.65;
  max-width:34ch}
@media(min-width:760px){.pd-trust{gap:3rem;padding-top:3rem;margin-top:3rem}}

/* Bold lead-in, then the reason. The label alone is a spec; the label plus the
   sentence after it is the benefit, which is the whole point of the pattern. */
.pd-feat{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
@media(min-width:820px){.pd-feat{grid-template-columns:1fr 1fr;gap:1.6rem 3rem}}
.pd-feat li{padding-left:1.2rem;position:relative;line-height:1.65}
.pd-feat li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--ink);border-radius:50%}
.pd-feat b{display:block;font-weight:600}
.pd-feat span{color:var(--graphite);font-size:.95rem}

.pd-incl{display:grid;gap:1.75rem;margin-top:2rem}
@media(min-width:760px){.pd-incl{grid-template-columns:repeat(2,1fr);gap:2rem 3rem}}
.pd-incl h4{margin:0 0 .4rem;font-size:1.02rem}
.pd-incl p{margin:0;color:var(--graphite);font-size:.95rem;line-height:1.65}

.pd-dims{display:grid;gap:2rem;margin-top:2rem}
@media(min-width:700px){.pd-dims{grid-template-columns:1fr 1fr;gap:3rem}}
.pd-dims dl{margin:0;display:grid;gap:.55rem}
.pd-dims dl>div{display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--hairline);padding-bottom:.55rem}
.pd-dims dt{color:var(--graphite);font-size:.92rem}
.pd-dims dd{margin:0;font-family:var(--mono);font-size:.88rem;
  font-variant-numeric:tabular-nums}
.pd-dims h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 1rem}

/* ── product page: comparison, statement, process, proof, FAQ ──────────────
   Added for /beds/home. Same .pd- namespace as the PDP blocks above.
   ------------------------------------------------------------------------ */

/* The comparison carries the page's angle, so it gets the most contrast of
   anything on the page. Own-it column is inked; rent-it column recedes. */
.pd-cmp{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.95rem}
.pd-cmp th,.pd-cmp td{padding:1rem .9rem;border-bottom:1px solid var(--hairline);
  text-align:left;vertical-align:top}
.pd-cmp thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite);border-bottom:1px solid var(--hairline-2)}
.pd-cmp td:first-child{color:var(--graphite);width:34%}
.pd-cmp .is-ours{background:var(--surface);font-weight:600;color:var(--ink)}
.pd-cmp thead .is-ours{color:var(--ink)}
@media(max-width:620px){
  .pd-cmp,.pd-cmp tbody,.pd-cmp tr,.pd-cmp td,.pd-cmp th{display:block}
  .pd-cmp thead{display:none}
  .pd-cmp tr{border-bottom:1px solid var(--hairline-2);padding:.75rem 0}
  .pd-cmp td{border:0;padding:.3rem 0}
  .pd-cmp td:first-child{width:auto;font-family:var(--mono);font-size:.68rem;
    letter-spacing:.1em;text-transform:uppercase}
  .pd-cmp td.is-ours::before{content:'This bed · ';color:var(--graphite);font-weight:400}
  .pd-cmp td.is-theirs::before{content:'Membership · ';color:var(--graphite)}
}

.pd-break{position:relative;min-height:clamp(22rem,48vh,34rem);display:grid;
  align-items:end;overflow:hidden}
.pd-break img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pd-break p{position:relative;margin:0;padding:clamp(1.5rem,5vw,4rem);
  color:var(--paper);font-family:var(--sans);font-stretch:108%;font-weight:500;
  font-size:clamp(1.4rem,1rem + 2.4vw,2.8rem);line-height:1.15;max-width:22ch;
  text-shadow:0 1px 24px rgba(20,19,15,.45)}

.pd-steps{display:grid;gap:2rem;counter-reset:pd;margin-top:2.5rem}
@media(min-width:820px){.pd-steps{grid-template-columns:repeat(4,1fr);gap:2rem}}
.pd-steps>div{counter-increment:pd}
.pd-steps>div::before{content:counter(pd);display:block;font-family:var(--mono);
  font-size:.78rem;color:var(--graphite);border-top:2px solid var(--ink);
  padding-top:.6rem;margin-bottom:.85rem}
.pd-steps h4{margin:0 0 .4rem;font-size:1.02rem}
.pd-steps p{margin:0;color:var(--graphite);font-size:.93rem;line-height:1.65}

/* Deliberately empty. There are no customers yet, and an empty slot that says
   so is honest where a drafted testimonial is not. */
.pd-proof{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:760px){.pd-proof{grid-template-columns:repeat(3,1fr)}}
.pd-proof div{border:1px dashed var(--hairline-2);border-radius:10px;
  padding:1.75rem 1.25rem;text-align:center;color:var(--graphite);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;line-height:1.7}

.pd-faq{margin-top:2rem;border-top:1px solid var(--hairline)}
.pd-faq details{border-bottom:1px solid var(--hairline)}
.pd-faq summary{cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;
  position:relative;font-weight:500;font-size:1.02rem}
.pd-faq summary::-webkit-details-marker{display:none}
.pd-faq summary::after{content:'+';position:absolute;right:.25rem;top:1rem;
  font-family:var(--mono);font-size:1.1rem;color:var(--graphite)}
.pd-faq details[open] summary::after{content:'\2013'}
.pd-faq p{margin:0 0 1.25rem;color:var(--graphite);max-width:64ch;line-height:1.7}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT PAGE — image-forward layer  (.pp-)
   Added 28 Aug 2026. The .pd- blocks above put ecommerce furniture into
   the original editorial layout; this replaces the layout itself for
   product pages, which were reading as an essay with pictures rather
   than a page you buy from.

   What changes: scale, image weight and air. What does not: the palette
   and the typefaces, which are the brand and are already right.

   Headings here are SENTENCE CASE, not the uppercase .display used
   elsewhere. Uppercase at this size reads as a poster, and a product
   page is not a poster.
   ═══════════════════════════════════════════════════════════════════ */

/* Serif at display size. Archivo was set here on 28 Aug and is the colder of
   the two — the reference brand runs a serif headline over sans labels, and it
   is most of why their page reads more expensive than ours did. Sans stays for
   eyebrows, figures, buttons and nav. */
.pp-h{font-family:var(--display);font-weight:400;
  letter-spacing:-.005em;line-height:1.06;margin:0;text-transform:none;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120}
.pp-h1{font-size:clamp(2.6rem,1.7rem + 4vw,5.2rem);line-height:1.02}
.pp-h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3.4rem)}
.pp-h3{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);letter-spacing:-.01em}
.pp-lede{font-size:clamp(1.1rem,1rem + .6vw,1.45rem);line-height:1.55;
  color:var(--graphite);max-width:46ch;margin:1.25rem 0 0}

/* ── hero: the image is the page, the panel sits on it ─────────────── */
.pp-hero{position:relative;min-height:clamp(34rem,86vh,54rem);display:grid;
  align-items:end;background:var(--linen)}
.pp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-hero-in{position:relative;width:100%;padding:clamp(2rem,6vw,5rem) 0
  clamp(2rem,5vw,4rem);
  background:linear-gradient(to top,rgba(20,18,15,.78) 0%,rgba(20,18,15,.34) 52%,transparent 100%)}
.pp-hero-in .wrap{display:grid;gap:1rem}
.pp-hero-in .pp-h1,.pp-hero-in .pp-lede,.pp-hero-in .eyebrow{color:var(--paper)}
.pp-hero-in .eyebrow{margin-bottom:.9rem}
.pp-hero-in .pp-lede{opacity:.94;max-width:38ch}

/* ── buy panel ─────────────────────────────────────────────────────── */
.pp-buy{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(min-width:900px){.pp-buy{grid-template-columns:1fr 24rem}}
/* A stated price, not a slab. It was clamped up to 3.4rem, which made the
   number the loudest thing on the page and pushed everything that earns it —
   the copy, the options, the guarantee — below the fold. The reference sets
   its price at body scale and lets the product name lead. */
/* The price is read, not decoded. The reference sets it plain and large with
   the currency on the same line; ours had a superscript dollar sign and the
   currency exiled to a line of uppercase mono underneath, which made the one
   number people came for the smallest thing in the block. */
.pp-price{font-family:var(--sans);font-weight:400;font-stretch:104%;
  font-size:clamp(1.6rem,1.3rem + 1vw,2rem);line-height:1.2;margin:.7rem 0 0;
  letter-spacing:-.02em;color:var(--ink)}
.pp-price em{font-style:normal;font-weight:400;font-size:.86em;
  color:var(--ink);margin-left:.3em}
.pp-price sup{font-size:.5em;vertical-align:.55em;margin-right:.08em}
.pp-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite);margin:.75rem 0 0}
.pp-cta{display:block;width:100%;text-align:center;background:#5b4a3a;
  color:#fff;text-decoration:none;font-family:'Mulish',var(--sans);
  font-size:1rem;font-weight:700;letter-spacing:-.13px;border-radius:6px;
  padding:1.05rem 1.5rem;border:0;cursor:pointer;margin-top:1.5rem;
  transition:background .2s}
.pp-cta:hover{background:#4a3c2f}
.pp-cta-alt{display:block;text-align:center;margin-top:.9rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite)}

/* ── configurator ──────────────────────────────────────────────────── */
.pp-opt{margin-top:2rem}
.pp-opt>p{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--graphite);margin:0 0 .75rem}
.pp-opt-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.pp-opt label{display:flex;align-items:center;gap:.7rem;border:1px solid var(--hairline-2);
  padding:.8rem .9rem;cursor:pointer;font-size:.92rem;transition:border-color .15s}
.pp-opt label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pp-opt input{position:absolute;opacity:0;pointer-events:none}
.pp-sw{width:1.4rem;height:1.4rem;border-radius:50%;border:1px solid var(--hairline-2);flex:none}

/* ── alternating image + copy blocks ───────────────────────────────── */
/* Feature blocks.
   The picture carries these, so it gets the room: a wider column, a taller
   crop, and an edge that runs out through the gutter instead of stopping on
   the text margin. Blocks alternate, so the bleed alternates with them and the
   reading edge stays put — the text column keeps its margin on both sides
   while the image is the thing that moves.

   The image was 4/3 inside a 1.15fr column, which left it roughly square on a
   laptop and reading as an illustration beside the copy rather than the
   subject of the block. */
.pp-block{display:grid;gap:clamp(1.75rem,4.5vw,4.5rem);align-items:center;
  padding-block:clamp(4rem,10vw,9rem)}
/* Base rules first. These used to sit below the media query, and because
   `.pp-block figure` and `.pp-block>figure` have equal specificity, the later
   `margin:0` quietly cancelled the bleed — but only on the unflipped blocks,
   since `.pp-block.is-flip>figure` carries one more class and outranked it.
   Half the blocks bled and half did not, which reads as a mistake rather than
   a rhythm. */
.pp-block figure{margin:0}
.pp-block img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){
  .pp-block{grid-template-columns:1.45fr 1fr}
  /* Mirrored, not narrowed. `order:2` alone moved the figure into the second
     column while the template kept the wide column first, so every flipped
     block rendered its image a third smaller than its neighbours — an
     alternation that read as inconsistency. Reversing the template puts the
     wide column under whichever side the picture is on. */
  .pp-block.is-flip{grid-template-columns:1fr 1.45fr}
  .pp-block.is-flip>figure{order:2}
  /* Bleed into the gutter on the side the image already sits against. */
  .pp-block>figure{margin-left:calc(var(--gut) * -1)}
  .pp-block.is-flip>figure{margin-left:0;margin-right:calc(var(--gut) * -1)}
  .pp-block>figure img{aspect-ratio:5/4}
}
.pp-block .pp-body{color:var(--graphite);margin:1.15rem 0 0;max-width:42ch;line-height:1.75}
.pp-block .pp-body strong{color:var(--ink);font-weight:600}

/* ── full-bleed statement ──────────────────────────────────────────── */
.pp-full{position:relative;min-height:clamp(24rem,62vh,40rem);display:grid;
  align-items:end;overflow:hidden}
.pp-full>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-full .wrap{position:relative;padding-block:clamp(2rem,5vw,4rem);
  background:linear-gradient(to top,rgba(20,18,15,.72),transparent)}
.pp-full p{margin:0;color:var(--paper);font-family:var(--sans);font-weight:500;
  font-stretch:104%;letter-spacing:-.015em;line-height:1.05;
  font-size:clamp(1.6rem,1.1rem + 2.6vw,3.2rem);max-width:20ch}

/* ── inverse section ───────────────────────────────────────────────── */
.pp-dark{background:var(--ink);color:var(--paper);
  padding-block:clamp(3.5rem,8vw,7rem)}
.pp-dark .pp-h2,.pp-dark .pp-h3{color:var(--paper)}
.pp-dark .eyebrow{color:#a49c90}
.pp-dark p{color:#c9c2b8}
.pp-dark .pd-cmp th,.pp-dark .pd-cmp td{border-color:#332f29}
.pp-dark .pd-cmp thead th{color:#a49c90;border-color:#4a453d}
.pp-dark .pd-cmp td:first-child{color:#a49c90}
.pp-dark .pd-cmp .is-ours{background:#1e1b17;color:var(--paper)}

/* ── sticky buy bar ────────────────────────────────────────────────── */
.pp-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);
  border-top:1px solid var(--hairline-2);transform:translateY(101%);
  transition:transform .22s ease;box-shadow:0 -8px 30px rgba(20,18,15,.07)}
.pp-bar.is-on{transform:none}
/* Phones do not get the bar. The $500 pill already occupies the bottom of a
   phone screen, and two fixed strips stacked there cost more first-screen
   than they earn. */
@media(max-width:900px){.pp-bar{display:none}}
.pp-bar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:.8rem}
.pp-bar b{font-family:var(--sans);font-weight:500;font-stretch:104%;font-size:1.15rem}
.pp-bar span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite);display:block}
.pp-bar .pp-cta{margin:0;width:auto;padding:.85rem 1.6rem}
@media(max-width:560px){.pp-bar span{display:none}}

/* ── gallery ───────────────────────────────────────────────────────
   Horizontal, swipeable, sitting down the page rather than stacked
   beside the buy panel. Native overflow scrolling does the swipe, so
   touch, trackpad, keyboard and screen readers all work without any
   of it being reimplemented in JS — the arrows are the only scripted
   part, and the gallery stays fully usable if that never runs.

   The item width is deliberately under 100%: the next image peeking
   past the right edge is what tells a phone user it scrolls. A strip
   of exactly-full-width images reads as a static picture.        */
.pp-gal{padding-block:clamp(3rem,7vw,6rem);overflow:hidden}
.pp-gal-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(1.25rem,3vw,2.25rem)}
.pp-gal-head .pp-h2{margin:0}
.pp-gal-nav{display:none;gap:.5rem;flex:none}
@media(min-width:900px){.pp-gal-nav{display:flex}}
.pp-gal-nav button{width:2.9rem;height:2.9rem;padding:0;border:1px solid var(--hairline-2);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:border-color .15s,opacity .15s}
.pp-gal-nav button:hover{border-color:var(--ink)}
.pp-gal-nav button[disabled]{opacity:.3;cursor:default;border-color:var(--hairline)}
.pp-gal-nav svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.5}

/* Full-bleed track whose first item still lines up with the page column. */
.pp-gal-track{display:grid;grid-auto-flow:column;grid-auto-columns:84%;
  gap:clamp(.75rem,1.6vw,1.25rem);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:max(var(--gut),(100% - var(--max))/2 + var(--gut));
  scroll-padding-inline-start:max(var(--gut),(100% - var(--max))/2 + var(--gut));
  scrollbar-width:none;-ms-overflow-style:none}
.pp-gal-track::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.pp-gal-track{scroll-behavior:auto}}
@media(min-width:700px){.pp-gal-track{grid-auto-columns:46%}}
@media(min-width:1100px){.pp-gal-track{grid-auto-columns:32%}}
.pp-gal-track figure{margin:0;scroll-snap-align:start}
.pp-gal-track img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--linen)}
/* The base `figcaption` rule sets mono, a tighter size and `padding-inline:
   var(--gut)`. That is right for the technical figures it was written for and
   wrong here: it rendered the captions in monospace and inset them from the
   image they belong to. All three are overridden deliberately. */
.pp-gal-track figcaption{font-family:var(--sans);font-size:.9rem;letter-spacing:0;
  color:var(--graphite);margin-top:.85rem;padding-inline:0;
  line-height:1.5;max-width:34ch}
/* The head sits inside .wrap; the track breaks out of it. */
.pp-gal>.wrap{padding-inline:max(var(--gut),(100% - var(--max))/2 + var(--gut))}

/* ═══════════════════════════════════════════════════════════════════
   PDP LAYER — gallery + sticky buy panel        (.pp-pdp, .pp-acc …)
   Added 28 Aug 2026 against the Kindra reference. The change that
   matters is the first screen: the price used to sit a full viewport
   below a poster hero, and mean scroll depth on paid sessions is 24%,
   so most people who clicked an ad never reached it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── stacked header: announcement bar over nav ─────────────────────── */
.pp-head{position:fixed;inset:0 0 auto;z-index:80}
.pp-head .nav{position:static;inset:auto}
/* Pages that are not a PDP reserve the header's height on the body, because
   the block above is fixed and nothing else holds the space. Without this the
   announcement bar sat underneath the nav and was invisible on every page that
   was not a product page — which was all four of the newest ones. */
body.site{padding-top:var(--head-h)}
/* The announcement bar: three claims on a rotation, at 11px bold in the sans.
   It was IBM Plex Mono, uppercase, 10.5px, .14em tracking, which read as a
   legal strip rather than as something worth saying. */
.pp-top{background:#35312e;color:#fff;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1rem,9vw,9.5rem);min-height:47px;padding:.5rem 1rem;
  font-family:'Mulish',var(--sans);font-size:11px;font-weight:700;
  letter-spacing:-.13px;text-transform:none;line-height:1.4}
/* The track is a fixed box with the messages stacked inside it, so a longer
   line does not shunt the arrows outwards as the rotation runs. */
.pp-top-track{position:relative;flex:0 1 auto;width:min(60vw,300px);height:1.4em}
.pp-top-track span{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;white-space:nowrap;opacity:0;transition:opacity .45s;
  pointer-events:none}
.pp-top-track span.is-on{opacity:1}
.pp-top-nav{flex:none;background:none;border:0;color:inherit;cursor:pointer;
  font-size:1.15rem;line-height:1;padding:.35rem .5rem;opacity:.6;
  transition:opacity .2s}
.pp-top-nav:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.pp-top-track span{transition:none}}
/* 11px sentence case is wider than the uppercase 10.5px it replaced, and the
   longest line runs to 42 characters. */
@media(max-width:560px){
  .pp-top{gap:.35rem;padding:.5rem .5rem;min-height:42px}
  .pp-top-track{width:auto;flex:1 1 auto}
  .pp-top-track span{font-size:.64rem}
}

/* ── the product block ─────────────────────────────────────────────── */
.pp-pdp{padding-top:calc(var(--head-h) + clamp(1rem,3vw,2.5rem));
  padding-bottom:clamp(2.5rem,6vw,5rem)}
.pp-pdp-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;gap:clamp(1.75rem,3.5vw,3.5rem);align-items:start}
/* 28rem, against the reference's 454px. At 24rem the panel could not hold a
   price, a paragraph, two option groups and a payment choice without every one
   of them wrapping, which is what made it read as a stack of controls rather
   than a page. */
@media(min-width:1000px){.pp-pdp-in{grid-template-columns:minmax(0,1fr) 28rem}}

/* Grid on desktop, swipe strip on a phone — a phone should not scroll
   past ten stacked tiles to reach the buy panel underneath them. */
.pp-shots{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:.55rem;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.pp-shots::-webkit-scrollbar{display:none}
.pp-shots>figure{margin:0;scroll-snap-align:start}
/* Square on a phone, portrait from 700px. At 4/5 the strip was 360px tall and
   pushed the price to 825px on an 812px viewport — below the fold on the
   device that is 88% of paid traffic, which is the whole problem this layout
   exists to fix. */
.pp-shots img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--linen)}
@media(min-width:700px){.pp-shots img{aspect-ratio:4/5}}
@media(min-width:700px){
  /* `dense` because a full-width figure cannot start mid-row: whenever an odd
     number of standard tiles precedes one, the tile before it is left alone in
     its row and the cell beside it renders as a hole in the gallery. Dense
     back-fills that cell with the next tile that fits, so the grid stays solid
     however many images the page carries and wherever the wide ones land. */
  .pp-shots{grid-auto-flow:row dense;grid-template-columns:1fr 1fr;grid-auto-columns:auto;
    overflow:visible;scroll-snap-type:none;gap:.6rem}
  .pp-shots>figure.is-wide{grid-column:1/-1}
  .pp-shots>figure.is-wide img{aspect-ratio:16/10}
}

.pp-panel{display:grid;gap:0}
@media(min-width:1000px){.pp-panel{position:sticky;top:calc(var(--head-h) + 1rem)}}
.pp-panel .pp-h{margin:.35rem 0 .6rem}
.pp-panel-desc{color:var(--graphite);font-size:1rem;margin:0 0 1.4rem}

/* Where a competitor puts star ratings. We have no customers yet, and an
   empty review module is worse than none — so the trial carries the slot. */
/* The guarantee is the close, so it is set like one. It used to be a bold
   lead-in inside a small grey paragraph beside a tiny tick, which made the
   strongest thing we offer look like a disclaimer. It is now a centred block
   on its own ground, the same shape as the help block further down, with a
   heading you can read from across the room. */
.pp-vouch{border:1px solid var(--hairline-2);border-radius:10px;
  background:var(--surface,#faf7f2);padding:1.5rem 1.25rem;margin:1.2rem 0 0;
  text-align:center}
.pp-vouch svg{width:26px;height:26px;display:block;margin:0 auto .7rem;
  stroke:var(--clay);fill:none;stroke-width:1.5}
.pp-vouch .pp-vouch-h{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);line-height:1.2;
  letter-spacing:-.015em;color:var(--ink);margin:0 0 .55rem}
.pp-vouch p{margin:0;font-size:.92rem;line-height:1.6;color:var(--graphite);
  max-width:36ch;margin-inline:auto}
.pp-vouch b{color:var(--ink);font-weight:600}

.pp-panel .pp-price{margin-top:.2rem}
.pp-panel .pp-note{margin:.4rem 0 0}
.pp-mini{margin:1.5rem 0 0;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.pp-mini li{display:flex;gap:.7rem;align-items:baseline;padding:.62rem 0;
  border-bottom:1px solid var(--hairline);font-size:.88rem;color:var(--graphite)}
.pp-mini li b{color:var(--ink);font-weight:600;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;flex:none;width:6.6rem}

/* ── accordion ───────────────────────────────────────────────────────
   What makes the reference feel expensive here is space, not decoration.
   Their panel carries roughly 3rem of internal padding and each row is
   about 1.6rem of air above and below its label, so eight rows read as a
   considered list rather than a dense menu. Ours was half that and looked
   like a settings screen.

   The chevron is the other half. Theirs is a filled disc that inverts to
   solid dark when a row is open, so the open row is obvious from the far
   side of the panel. A rotating cross gave no such signal. */
.pp-acc{background:var(--surface,#f6f1e7);border-radius:16px;
  padding:clamp(1rem,2.4vw,2.2rem) clamp(1.15rem,3vw,3rem)}
.pp-acc details{border-top:1px solid rgba(20,18,15,.09)}
.pp-acc details:first-of-type{border-top:0}
.pp-acc summary{cursor:pointer;list-style:none;padding:1.6rem 0;
  display:flex;justify-content:space-between;align-items:center;gap:2rem;
  font-family:var(--sans);font-weight:600;font-size:1.06rem;
  letter-spacing:-.012em;color:var(--ink)}
.pp-acc summary::-webkit-details-marker{display:none}
.pp-acc summary::after{content:'';flex:none;width:2.1rem;height:2.1rem;
  border-radius:50%;background-color:rgba(20,18,15,.06);
  background-repeat:no-repeat;background-position:center;background-size:.66rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2314120f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition:transform .22s ease,background-color .22s ease}
.pp-acc summary:hover::after{background-color:rgba(20,18,15,.11)}
.pp-acc details[open] summary::after{transform:rotate(180deg);
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23faf7f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pp-acc details[open] summary{padding-bottom:1.1rem}
.pp-acc details>*:not(summary){margin:0 0 1.15rem;color:var(--graphite);
  font-size:1rem;line-height:1.75;max-width:62ch}
.pp-acc details>*:last-child{margin-bottom:1.9rem}
.pp-acc dl{display:grid;gap:0;max-width:none}
.pp-acc dl>div{display:flex;justify-content:space-between;gap:2rem;
  padding:.85rem 0;border-bottom:1px solid rgba(20,18,15,.07)}
.pp-acc dl>div:last-child{border-bottom:0}
.pp-acc dt{font-family:var(--sans);font-size:.95rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--graphite)}
.pp-acc dd{margin:0;text-align:right;color:var(--ink);font-size:.95rem;
  font-weight:500;font-variant-numeric:tabular-nums}

/* Spec list inside a feature block. Stacked rather than the accordion's
   space-between pair, because these values are sentence-length — a right
   aligned column would leave the label stranded across a gap. */
/* ── benefit blocks ────────────────────────────────────────────────
   Deliberately not the feature block. A feature block leads with a
   headline and argues; a benefit block leads with the figure, because
   the figure is the claim and the reader came to check figures. The
   citation sits under it so the source is visible without a click. */
/* Delivery card in the buy panel.
   Answers the delivery question in place, the way the reference does, and
   keeps the drawer for the detail underneath rather than hiding the headline
   behind it. Three bands separated by hairlines: when, what is included, and
   the way in. */
.pp-deliv{border:1px solid var(--hairline);border-radius:10px;margin:1rem 0 0;
  background:var(--surface,#faf7f2)}
.pp-deliv-when{margin:0;padding:1rem 1.15rem .9rem;font-family:var(--sans);
  font-stretch:104%;font-weight:600;font-size:1.18rem;letter-spacing:-.015em;
  color:var(--ink);line-height:1.25}
.pp-deliv-row{padding:.95rem 1.15rem;border-top:1px solid var(--hairline)}
.pp-deliv-row b{display:block;font-size:.92rem;font-weight:600;margin-bottom:.2rem}
.pp-deliv-row p{margin:0;color:var(--graphite);font-size:.86rem;line-height:1.55}
.pp-deliv-more{display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:1rem;cursor:pointer;font:inherit;font-size:.88rem;font-weight:600;
  color:var(--ink);background:none;border:0;border-top:1px solid var(--hairline);
  padding:.95rem 1.15rem;text-align:left}
.pp-deliv-more:hover{background:rgba(20,18,15,.03)}
.pp-deliv-more i{font-style:normal;color:var(--graphite);font-size:1.15rem;flex:none}

.pp-stat{font-family:var(--sans);font-stretch:104%;font-weight:500;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.9rem);line-height:1.02;
  letter-spacing:-.022em;color:var(--ink);margin:0 0 1rem;text-wrap:balance}
.pp-cite{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--graphite);line-height:1.75;
  margin:1.35rem 0 0;padding-top:1.1rem;border-top:1px solid var(--hairline)}
.pp-cite a{color:var(--ink)}
/* A feature block's closing line of hard numbers. Not a sentence, so it
   is set as a label rather than as prose. */
.pp-fact{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--graphite);line-height:1.7;
  margin:1.2rem 0 0}

.pp-spec{display:grid;gap:0;margin:1.7rem 0 0}
.pp-spec>div{padding:.75rem 0;border-bottom:1px solid var(--hairline)}
.pp-spec>div:first-child{border-top:1px solid var(--hairline)}
.pp-spec dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite);margin:0 0 .35rem}
.pp-spec dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;
  font-family:var(--serif);font-size:1.02rem;line-height:1.5}

/* ── category page ──────────────────────────────────────────────────
   Built to take a third product without a redesign: the grid is
   auto-fit, so three cards reflow to two-plus-one on a laptop and one
   per row on a phone rather than being squeezed. Each card carries the
   same five specification rows so the two are read against each other
   rather than admired separately. */
.cat-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr))}
.cat-card{display:flex;flex-direction:column;border:1px solid var(--hairline);
  border-radius:14px;overflow:hidden;background:var(--paper)}
.cat-shot{display:block;background:var(--surface,#f6f1e7)}
.cat-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
/* Card images vary in native aspect (landscape heroes vs 4:5 scenes); a fixed
   crop keeps the three range cards the same height and rhythm. */
.cat-card>a>img,.cat-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cat-body{padding:clamp(1.35rem,2.5vw,2rem);display:flex;flex-direction:column;flex:1}
.cat-body .eyebrow{margin-bottom:.75rem}
.cat-body h2{margin:0}
/* Smaller than the product name above it. At the first sizing the price
   came out larger than the heading at both breakpoints, so the card led
   with a number instead of with what the number buys. Roughly four fifths
   of the heading, which is the same relationship the buy panels use. */
.cat-price{font-family:var(--sans);font-stretch:104%;font-weight:400;
  font-size:clamp(.95rem,.85rem + .45vw,1.3rem);letter-spacing:-.02em;
  color:var(--ink);margin:.45rem 0 0}
.cat-price em{font-style:normal;font-size:.84em;margin-left:.3em}
.cat-say{margin:.9rem 0 0;color:var(--graphite);font-size:.98rem;line-height:1.65}
.cat-spec{display:grid;gap:0;margin:1.4rem 0 0}
.cat-spec>div{display:flex;justify-content:space-between;gap:1.25rem;
  padding:.62rem 0;border-bottom:1px solid var(--hairline)}
.cat-spec>div:first-child{border-top:1px solid var(--hairline)}
.cat-spec dt{font-family:var(--sans);font-size:.88rem;color:var(--graphite)}
.cat-spec dd{margin:0;text-align:right;font-size:.88rem;font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums}
.cat-note{margin:1.2rem 0 1.5rem;color:var(--graphite);font-size:.88rem;
  line-height:1.6;flex:1}
.cat-card .pp-cta{margin-top:auto}

/* The comparison table. Two products today, so a column each; a third
   would add a column rather than a new pattern. */
.cat-cmp{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.95rem}
.cat-cmp th,.cat-cmp td{padding:.85rem .9rem;border-bottom:1px solid var(--hairline);
  text-align:left;vertical-align:top}
.cat-cmp thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite);font-weight:500}
.cat-cmp tbody th{color:var(--graphite);font-weight:400;width:34%}
.cat-cmp td{color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:700px){
  .cat-cmp,.cat-cmp tbody,.cat-cmp tr,.cat-cmp td,.cat-cmp th{display:block}
  .cat-cmp thead{display:none}
  .cat-cmp tr{border-bottom:1px solid var(--hairline-2);padding:.9rem 0}
  .cat-cmp tbody th{width:auto;padding:0 0 .5rem;border:0;color:var(--ink);
    font-family:var(--sans);font-weight:600;font-size:1.02rem}
  .cat-cmp td{border:0;padding:.22rem 0;display:flex;justify-content:space-between;gap:1rem}
  .cat-cmp td::before{content:attr(data-l);font-family:var(--mono);font-size:.66rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);flex:none}
}

/* ── two-column "everything you need to know" ──────────────────────── */
.pp-know{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
/* The intro paragraph beside the panel is body copy, not a display line.
   It inherited .lede, which climbs to 1.55rem, and was then squeezed into a
   34-character measure — so fifteen words broke across three short lines and
   the type read as oversized against its own line length. The reference sets
   roughly forty words at 17px across a wide measure. */
.pp-know .lede{font-size:1.06rem;line-height:1.7;max-width:58ch}
@media(min-width:900px){.pp-know{grid-template-columns:1fr 1.2fr}}



/* ── inline enquiry form ───────────────────────────────────────────── */
.pp-form{margin-top:2rem;display:grid;gap:.85rem}
.pp-form .pp-row{display:grid;gap:.85rem}
@media(min-width:620px){.pp-form .pp-row{grid-template-columns:1fr 1fr}}
.pp-form input,.pp-form textarea{width:100%;box-sizing:border-box;
  padding:.9rem 1rem;border:1px solid var(--hairline-2);border-radius:0;
  background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px}
.pp-form textarea{min-height:6.5rem;resize:vertical}
.pp-form input:focus,.pp-form textarea:focus{outline:2px solid var(--clay);
  outline-offset:1px;border-color:var(--ink)}
.pp-form .pp-consent{display:flex;gap:.7rem;align-items:flex-start;
  font-size:.84rem;color:var(--graphite);line-height:1.55;margin-top:.3rem}
.pp-form .pp-consent input{width:1.05rem;height:1.05rem;flex:none;margin-top:.2rem;padding:0}
.pp-form .pp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pp-form-msg{margin:.9rem 0 0;font-size:.9rem}
.pp-form-msg.is-err{color:var(--light)}

/* ── deep footer ───────────────────────────────────────────────────── */
/* The bare `footer` rule further up sets display:flex, mono at .7rem and a
   hairline border — right for the two-line footer the other pages use, and it
   would turn this one into a flex row of mono text. Reset all of it. */
.pp-foot{background:#35312e;color:#cfc9c2;padding-block:clamp(3.5rem,6vw,5.5rem);
  margin-top:clamp(3rem,7vw,6rem);
  display:block;font-family:'Mulish',var(--sans);font-size:1rem;border-top:0;gap:0}
.pp-foot .wrap{display:block}
.foot-grid{display:grid;gap:clamp(2.25rem,4vw,3rem)}
/* The signup column carries a heading and a form, so it needs roughly twice
   the width of a link list. Below 900 the four columns fold to two, which
   keeps the link lists side by side instead of stacking into a long ladder. */
@media(min-width:600px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.foot-grid{grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:clamp(2rem,3.5vw,4rem)}}
@media(min-width:600px) and (max-width:959px){.foot-sign{grid-column:1/-1}}

.pp-foot h4{font-family:'Mulish',var(--sans);font-size:15px;font-weight:700;
  letter-spacing:-.13px;text-transform:none;color:#fff;
  margin:0 0 1.15rem}
.pp-foot p{margin:0 0 .8rem;font-size:15px;line-height:1.75}
.pp-foot ul{list-style:none;margin:0;padding:0}
.pp-foot li{margin-bottom:.8rem;font-size:15px}
.pp-foot a{color:#cfc9c2;text-decoration:none;transition:color .2s}
.pp-foot a:hover{color:#fff}
.foot-about p{max-width:34ch;color:#cfc9c2}

.foot-sign h3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.55rem,1.2rem + 1.2vw,2.1rem);line-height:1.15;
  color:var(--paper);margin:0 0 .9rem;max-width:14ch}
.foot-sign p{max-width:38ch}
.foot-form{display:flex;align-items:center;gap:.5rem;margin-top:1.35rem;
  max-width:390px;border:1px solid #57524d;border-radius:2px;
  padding:.35rem .35rem .35rem 1.1rem;background:transparent}
.foot-form input{flex:1;min-width:0;background:transparent;border:0;
  font-family:var(--sans);font-size:.95rem;color:var(--paper);
  padding:.85rem 0;outline:none}
.foot-form input::placeholder{color:#a39d96}
.foot-form input:focus-visible{outline:none}
.foot-form:focus-within{border-color:#8a847d}
.foot-form button{flex:none;width:38px;height:38px;border:0;border-radius:50%;
  background:#57524d;color:#fff;font-size:1.35rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0 0 .15rem;
  transition:background .2s}
.foot-form button:hover{background:var(--clay)}
.foot-msg{margin:.75rem 0 0;font-size:.85rem;color:#cabda9;min-height:1.2em}

.foot-base{border-top:1px solid #4a4540;margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.5rem}
.foot-legal{margin:0;font-size:13px;line-height:1.75;color:#a39d96;max-width:72ch}
.foot-end{display:flex;flex-direction:column;align-items:flex-end;gap:.9rem;flex:none}
.foot-region{display:flex;align-items:center;gap:.5rem;
  font-family:'Mulish',var(--sans);font-size:13px;font-weight:700;
  letter-spacing:-.13px;color:#cfc9c2;white-space:nowrap}
.foot-region .nav-chev{stroke:#cfc9c2}
.foot-cards{display:flex;align-items:center;gap:.45rem;list-style:none;
  margin:0;padding:0}
.foot-cards li{margin:0}
.foot-cards img{display:block;width:38px;height:auto;background:#fff;
  border-radius:4px;padding:2px}

.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}

/* Caption on the finish tile. It names the swatch you just picked, because
   a silver grey and a white bed in warm light are close enough that seeing
   the change is not the same as being sure of it. */
.pp-shots>figure figcaption{font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
  padding:.6rem 0 0;margin:0;max-width:none}
/* Hidden on phones. There the gallery is a horizontal strip, so this caption
   ends up floating at the right edge under a tile that is mostly off-screen,
   labelling something the reader cannot see. The preview above the swatches
   names the finish instead. */
@media(max-width:999px){.pp-shots>figure figcaption{display:none}}
.pp-opt>p span{color:var(--hairline-2);letter-spacing:.06em}

/* Finish preview, phones only. On desktop the gallery sits beside the buy
   panel, so swapping the gallery tile is visible the instant you choose. On a
   phone the gallery is a strip ABOVE the panel and usually off-screen by the
   time you reach the swatches — so choosing a finish appeared to do nothing,
   which is the same failure as the swatches being decorative. */
.pp-opt-preview{margin:0 0 .7rem;background:var(--linen)}
.pp-opt-preview img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
@media(min-width:1000px){.pp-opt-preview{display:none}}

/* The deposit line in the buy panel. Sits directly under the price because it
   is the number that actually leaves the buyer's account today, and a $17,000
   figure with the deposit hidden three sections down is the wrong first fact. */
.pp-deposit{margin:.85rem 0 0; padding:.8rem .9rem; background:var(--paper-deep);
  border:1px solid var(--hairline); border-radius:6px;
  font-size:.9rem; line-height:1.55; color:var(--graphite)}
.pp-deposit b{color:var(--ink)}

/* Pay in full or deposit, chosen before the buyer leaves the product page.
   A segmented control rather than a link per option: the two are one decision
   with one answer, and the price above changes to match, so the number in the
   panel is always the number they are about to be asked for. */
.pp-plan{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.9rem 0 0}
.pp-plan button{appearance:none;cursor:pointer;text-align:left;
  background:var(--paper);border:1px solid var(--hairline-2);border-radius:7px;
  padding:.7rem .8rem;font-family:var(--sans);color:var(--graphite);
  transition:border-color .12s,box-shadow .12s,background .12s}
.pp-plan button b{display:block;font-weight:600;font-size:.9rem;letter-spacing:-.01em;color:var(--ink)}
.pp-plan button span{display:block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.06em;margin-top:.2rem}
.pp-plan button.is-on{background:#fff;border-color:var(--ink);box-shadow:0 0 0 2px rgba(20,18,15,.06)}
.pp-plan button:hover:not(.is-on){border-color:var(--hairline-2);background:#fff}

/* ── buy panel, arranged as the reference arranges it ───────────────
   Title, price, rule, assurance, prose, rule, options, payment, action,
   specifications, rule, help. The rules do the work: they group the panel into
   blocks that can be read one at a time instead of one continuous column. */
.pp-rule{border:0;border-top:1px solid var(--hairline);margin:1.35rem 0}
.pp-prose{margin:1.1rem 0 0;color:var(--graphite);font-size:.95rem;line-height:1.7}
.pp-prose p{margin:0}
.pp-prose p + p{margin-top:.75rem}
.pp-opt-lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--graphite);margin:0 0 .6rem}
/* Every label after the first opens a new group, so it needs air above it.
   Without this the payment label sat hard against the finish swatches and the
   two groups read as one. */
.pp-opt + .pp-opt-lbl{margin-top:1.5rem}
.pp-plan-note{font-size:.85rem;line-height:1.55;color:var(--graphite);margin:.6rem 0 0}
/* Centred, on its own tinted ground, the way the reference sets it. Left
   aligned it read as another row of panel copy; centred with the icon on the
   line above the text it reads as an offer of help, which is what it is. */
.pp-help{margin:0;text-align:center;background:var(--surface,#faf7f2);
  border-radius:10px;padding:1.35rem 1.25rem}
.pp-help-h{display:flex;align-items:center;justify-content:center;gap:.55rem;
  margin:0 0 .5rem;font-family:var(--sans);font-weight:600;font-size:.95rem;
  letter-spacing:-.01em;color:var(--ink)}
.pp-help-h svg{width:18px;height:18px;flex:none;stroke:var(--clay);fill:none;stroke-width:1.8}
.pp-help p{margin:0;font-size:.88rem;line-height:1.6;color:var(--graphite);
  max-width:34ch;margin-inline:auto}
/* The secondary action is a button here, not the underlined link it is
   elsewhere: it closes the panel the way the reference closes its own, and a
   text link under a block of help copy reads as a footnote rather than a way
   to reach someone. */
.pp-help + .pp-cta-alt{display:block;width:100%;margin-top:.85rem;text-align:center;
  background:var(--clay);border:1px solid var(--clay);border-radius:8px;
  color:var(--paper);text-decoration:none;cursor:pointer;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.95rem 1rem;transition:background .12s,color .12s}
.pp-help + .pp-cta-alt:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ── type, measured against the reference ──────────────────────────
   Their body copy is a serif at 18px and their interface text is a sans at
   12px. Ours was the other way round: sans body at 15px and a 22px price. That
   single inversion is most of why theirs reads warm and considered and ours
   read like a spec sheet — a serif at reading size is what makes a page feel
   written rather than assembled.

   Interface text stays sans and small. The distinction is the point: prose is
   for reading, labels and buttons are for operating, and mixing the two is
   what made our panel look like a form. */

/* Body copy — the paragraphs a buyer actually reads. */
.pp-prose p,
.pp-block .pp-body,
.pp-panel-desc{
  font-family:var(--serif);
  font-size:clamp(1.06rem,1rem + .35vw,1.19rem);
  line-height:1.55;
  letter-spacing:-.005em;
}
.pp-prose p{color:var(--graphite)}

/* On a phone the section heading is the loud thing and the product title is
   not — theirs runs h2 at 32px against an h1 at 24px. Ours ran both at 28.8px,
   so nothing led. */
@media(max-width:700px){
  .pp-panel .pp-h{font-size:1.62rem;line-height:1.16}
  .pp-block h2.pp-h2,
  .section h2.pp-h2{font-size:2rem;line-height:1.1}
}

/* Sized against the reference, properly this time. An earlier pass set this
   to 1.06rem on the belief their price sat at 12px beside a 24px title. It
   does not: it is around 28px under a 40px title, roughly seven tenths of the
   heading. Worse, this rule outranked the newer `.pp-price` one by
   specificity, so the price stayed at body size on both breakpoints while the
   base rule looked correct in the stylesheet. */
.pp-panel .pp-price{font-size:clamp(1.25rem,1.05rem + .9vw,1.8rem);
  font-weight:400;letter-spacing:-.02em}
.pp-panel .pp-price sup{font-size:.62em;vertical-align:.42em}

/* Buttons: sans at 700, as theirs are. Mono at 400 read as a caption. */
.pp-cta,.pp-help + .pp-cta-alt{
  font-family:var(--sans);font-weight:700;font-size:.82rem;
  letter-spacing:.1em;
}


/* ── the currency dropdown ─────────────────────────────────────────── */
.nav-currency{position:relative}
.nav-region{background:none;border:0;padding:0;cursor:pointer}
[data-currency-toggle][aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
.nav-chev{transition:transform .2s}
.nav-currency-menu{position:absolute;top:calc(100% + .8rem);right:0;z-index:99;
  margin:0;padding:.5rem 0;list-style:none;width:248px;background:var(--paper);
  border:1px solid var(--hairline);border-radius:6px;
  box-shadow:0 12px 32px rgba(36,29,22,.14)}
.nav-currency-menu li{margin:0}
.nav-currency-menu [role=option]{display:flex;align-items:center;gap:.65rem;
  width:100%;padding:.6rem 1.1rem;background:none;border:0;cursor:pointer;
  font-family:'Mulish',var(--sans);font-size:13px;font-weight:600;
  letter-spacing:-.13px;color:#35312e;text-align:left}
.nav-currency-menu [role=option]:hover{background:var(--linen)}
.nav-currency-menu [role=option] span{font-size:1.05rem;line-height:1}
.nav-currency-note{padding:.6rem 1.1rem .35rem;font-size:.72rem;
  color:var(--graphite);border-top:1px solid var(--hairline);margin-top:.4rem !important}

/* ── the slide-out cart ────────────────────────────────────────────── */
.cart-scrim{position:fixed;inset:0;z-index:96;background:rgba(36,29,22,.42);
  opacity:0;transition:opacity .3s;border:0;padding:0;cursor:pointer}
.cart-scrim.is-open{opacity:1}
body.cart-locked{overflow:hidden}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:97;
  width:min(92vw,480px);}
@media(max-width:560px){.cart-drawer{width:100vw}}
.cart-drawer{background:var(--paper);
  transform:translateX(101%);transition:transform .34s cubic-bezier(.4,0,.2,1);
  visibility:hidden;display:flex;flex-direction:column}
.cart-drawer.is-open{transform:none;visibility:visible}
.cart-x{position:absolute;top:.9rem;right:.9rem;z-index:1;width:44px;height:44px;
  display:grid;place-items:center;padding:0 0 3px;border:0;background:none;
  font-size:1.7rem;line-height:1;color:var(--ink);cursor:pointer}
.cart-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;
  padding:4.25rem clamp(1.25rem,4vw,2rem) 1.75rem}
.cart-ship{margin:0 0 .8rem;font-size:.95rem;color:var(--ink)}
.cart-rule{border:0;border-top:3px solid #5b4a3a;margin:0 0 1.5rem}
.cart-item{display:flex;gap:1.1rem;align-items:flex-start}
.cart-item img{width:96px;aspect-ratio:1;object-fit:cover;background:var(--linen);flex:none}
.cart-item-info{flex:1}
.cart-item-info h3{margin:0 0 .35rem;font-family:'Mulish',var(--sans);
  font-size:1.02rem;font-weight:700;letter-spacing:-.13px}
.cart-item-price{margin:0 0 .3rem;font-size:.98rem;color:var(--ink)}
.cart-item-var{margin:0 0 .3rem;font-size:.88rem;color:var(--graphite);line-height:1.5}
.cart-item-side{flex:none;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.cart-qty{display:grid;place-items:center;width:56px;height:44px;
  border:1px solid var(--hairline-2);font-size:.95rem}
.cart-remove{background:none;border:0;padding:0;cursor:pointer;
  font-size:.88rem;color:var(--graphite);text-decoration:underline}
.cart-chip{display:inline-flex;align-items:center;gap:.5rem;margin:1.1rem 0 0;
  padding:.55rem .8rem;background:var(--linen);font-size:.88rem;color:var(--ink)}
.cart-chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.cart-foot{margin-top:auto;border-top:1px solid var(--hairline);padding-top:1.4rem}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;
  gap:.75rem 1rem;flex-wrap:wrap;margin:0 0 .5rem}
.cart-total span{font-family:var(--display);font-size:clamp(1.2rem,4.5vw,1.45rem)}
.cart-total b{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,4.5vw,1.45rem)}
.cart-sub{display:flex;justify-content:space-between;margin:0 0 .4rem;
  font-size:.92rem;color:var(--graphite)}
.cart-note{margin:0;font-size:.88rem;color:var(--graphite)}
.cart-checkout{display:flex;align-items:center;justify-content:center;gap:.55rem}
.cart-checkout svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.cart-empty{margin:auto;text-align:center;padding:2rem 1rem}
.cart-empty-ic{position:relative;display:inline-block;color:var(--ink)}
.cart-empty-ic svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:1.3}
.cart-empty-ic b{position:absolute;top:-8px;right:-14px;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;background:#5b4a3a;color:#fff;
  font-family:'Mulish',var(--sans);font-size:.82rem;font-weight:700}
.cart-empty-h{font-family:var(--display);font-size:1.7rem;margin:1.4rem 0 1.6rem}
.cart-continue{width:auto;display:inline-block;padding-inline:2.4rem}
@media(prefers-reduced-motion:reduce){.cart-drawer,.cart-scrim{transition:none}}


.cart-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem;
  font-family:var(--display);font-size:1.6rem}
.cart-head b{display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:#5b4a3a;color:#fff;
  font-family:'Mulish',var(--sans);font-size:.8rem;font-weight:700}


/* ── the checkerboard feature run ──────────────────────────────────────
   The reference's product page gets its feel from one pattern: half-viewport
   photographs running edge to edge, butted against each other with no gutter
   and no radius, alternating sides, each feature owning one image. The same
   blocks used to sit inside .wrap with rounded contained images — catalogue
   rather than editorial, and it read as average against the reference. The
   markup did not change; the frame did. */
.feat-run{width:100%;padding:0;margin:0}
.feat-run .pp-block{padding:0;gap:0;align-items:stretch}
.feat-run .pp-block figure{margin:0;overflow:hidden}
.feat-run .pp-block img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block}
.feat-run .pp-block>div{display:grid;align-content:center;justify-items:start;
  padding:clamp(3rem,7vw,6.5rem) clamp(1.5rem,6vw,6rem)}
.feat-run .pp-block>div>*{max-width:46ch}
/* The reference's eyebrow voice inside the run: small bold sans, sentence
   case, no dash. The mono-and-rule eyebrow stays everywhere else. */
.feat-run .eyebrow{font-family:'Mulish',var(--sans);font-size:13px;font-weight:700;
  letter-spacing:-.13px;text-transform:none;color:var(--graphite);
  margin:0 0 1.1rem;display:block}
.feat-run .eyebrow::before{display:none}
.feat-run .pp-h2{font-size:clamp(1.7rem,1.3rem+1.6vw,2.5rem)}
@media(min-width:900px){
  .feat-run .pp-block{grid-template-columns:1fr 1fr;min-height:clamp(480px,58vh,660px)}
  .feat-run .pp-block>figure{order:0;margin:0}
  .feat-run .pp-block.is-flip{grid-template-columns:1fr 1fr}
  .feat-run .pp-block.is-flip>figure{order:2;margin:0}
}
@media(max-width:899px){
  .feat-run .pp-block img{aspect-ratio:4/3}
  .feat-run .pp-block>div{padding:2.25rem var(--gut) 3rem}
}


/* Labelled stand-ins for the chamber photography, which does not exist yet.
   Deliberately obvious: a placeholder that looks finished is how a page ships
   with a hole in it that nobody notices. */
.hb-ph{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;
  background:var(--linen);color:var(--graphite);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;line-height:2}


/* ── the home hero ─────────────────────────────────────────────────────
   pp-full is a statement break: one line of sans on a gradient, made to
   punctuate the middle of a page. The home page was using it as its hero,
   with a second half-hero stacked underneath — two components doing half a
   job each. This is the whole job in one place: eyebrow, display serif,
   one line of support, two actions, on a scrim that earns the white type. */
.hero{position:relative;min-height:clamp(30rem,90vh,50rem);display:grid;
  align-items:end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-in{position:relative;width:100%;max-width:var(--max);margin-inline:auto;
  padding:clamp(7rem,18vh,12rem) clamp(1.5rem,5vw,4rem) clamp(3rem,7vh,5rem);
  background:linear-gradient(to top,rgba(20,18,15,.62) 0%,rgba(20,18,15,.28) 55%,transparent 100%)}
.hero-eyebrow{margin:0 0 1.1rem;font-family:'Mulish',var(--sans);font-size:13px;
  font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.85);
  text-transform:uppercase}
.hero h1{margin:0;font-family:var(--display);font-weight:380;
  font-size:clamp(2.3rem,1.5rem + 3.6vw,4.3rem);line-height:1.04;
  letter-spacing:-.01em;color:#fff;max-width:16ch;
  text-wrap:balance}
.hero-sub{margin:1.15rem 0 0;font-family:'Mulish',var(--sans);font-size:1.05rem;
  line-height:1.6;color:rgba(255,255,255,.88);max-width:44ch}
.hero-ctas{margin:1.9rem 0 0;display:flex;gap:.9rem;flex-wrap:wrap}
.hero-ctas .pp-cta{width:auto;display:inline-block;padding-inline:2.2rem;margin-top:0}
.pp-cta.is-ghost{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.55)}
.pp-cta.is-ghost:hover{background:rgba(255,255,255,.12)}
@media(max-width:700px){
  .hero{min-height:76vh}
  .hero-sub{font-size:.98rem}
  .hero-ctas .pp-cta{flex:1 1 100%;text-align:center}
}


/* ── the stat trio ─────────────────────────────────────────────────────
   The reference here is the car industry: three numbers set large with a
   five-word label under each, and the measurement condition in fine print
   underneath instead of hedging inside the sentence. Our best numbers were
   living in small mono captions; this is them given the size they earn. */
.stat3{padding-block:clamp(3rem,7vw,5.5rem)}
.stat3-row{display:grid;gap:clamp(2rem,5vw,3rem);text-align:center;
  max-width:60rem;margin-inline:auto;padding-inline:var(--gut)}
@media(min-width:640px){.stat3-row{grid-template-columns:1fr 1fr 1fr}}
.stat3 b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,1.8rem + 3vw,4rem);line-height:1;color:var(--ink);
  letter-spacing:-.01em}
.stat3 b sub,.stat3 b small{font-size:.45em;letter-spacing:0}
.stat3 span{display:block;margin-top:.6rem;font-family:'Mulish',var(--sans);
  font-size:13px;font-weight:700;letter-spacing:-.13px;color:var(--graphite)}
.stat3-fine{margin:clamp(1.75rem,4vw,2.5rem) auto 0;text-align:center;
  font-size:.78rem;color:var(--graphite);max-width:64ch;padding-inline:var(--gut);
  line-height:1.7}

/* ── the micro-feature grid ──────────────────────────────────────────
   One line per feature, never an argument. The checkerboard keeps the five
   big stories; this absorbs everything small that either bloated a block or
   went unsaid. */
.mini-grid{display:grid;gap:1.75rem clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:560px){.mini-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.mini-grid{grid-template-columns:1fr 1fr 1fr}}
.mini-grid h4{margin:0 0 .3rem;font-family:'Mulish',var(--sans);font-size:15px;
  font-weight:700;letter-spacing:-.13px;color:var(--ink)}
.mini-grid p{margin:0;font-size:.92rem;line-height:1.6;color:var(--graphite)}

/* ── the ownership triptych ──────────────────────────────────────────── */
.own3{display:grid;gap:clamp(1.75rem,4vw,2.5rem);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:760px){.own3{grid-template-columns:1fr 1fr 1fr}}
.own3 h4{margin:.2rem 0 .5rem;font-family:var(--display);font-weight:500;
  font-size:1.3rem;color:var(--ink)}
.own3 p{margin:0;font-size:.95rem;line-height:1.65;color:var(--graphite)}
.own3 .step{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--graphite)}