@import url("../fonts/fonts.css");

/* ============================================================================
   Harry Specters
   Luxury chocolate, made by hand in Ely by a team that includes autistic
   chocolatiers.

   BRAND     Oxblood #460000 is the wordmark's own ink, sampled from the supplied
             logo. Gold #E4A833 and cream #FFF4E9 are lifted from the live store.
             The palette is warm and low-contrast by nature, so the type does the
             work and colour is used sparingly: one gold accent per view.

   MEASURED  computed against every ground each token lands on:

             oxblood #460000 ...... 16.66 white / 15.37 cream
             ink     #2A1E1A ...... 16.17 white / 14.91 cream
             muted   #736559 ....... 5.62 white /  5.19 cream
             white on oxblood ..... 16.66
             oxblood on gold ....... 7.89

             Gold is a FILL, never small text on a light ground: it measures
             2.11 on white. Every gold surface carries oxblood or ink on it.

   TYPE      Montserrat throughout, variable 100-900, self-hosted. The display
             sizes run tight (-0.03em) and the body runs open, which is what
             keeps a geometric sans from feeling like a poster at 16px.

   LAYOUT    A 12-column max-1320 grid, full-bleed bands between. Horizontal
             rails use scroll-snap so a large catalogue stays browsable without
             a mega-menu. That is the single biggest change from the live store,
             which carries roughly forty links in its header.
   ========================================================================== */

:root {
  /* brand */
  --ox:        #460000;
  --ox-deep:   #2E0000;
  --ox-soft:   #6B1A1A;
  --gold:      #E4A833;
  --gold-soft: #F4E3C2;
  --cream:     #FFF4E9;
  --cream-2:   #FBEAD9;
  --white:     #FFFFFF;

  /* ink */
  --ink:    #2A1E1A;
  --ink-2:  #50463E;
  --muted:  #736559;
  --line:   #E7DACB;
  --line-2: #D9C6B2;

  /* surfaces */
  --ground:  #FFFFFF;
  --surface: #FFFFFF;

  /* type */
  --f: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* rhythm */
  --pad:   clamp(20px, 4.4vw, 56px);
  --maxw:  1320px;
  --sec:   clamp(56px, 8vw, 118px);
  --r-sm:  8px;
  --r:     14px;
  --r-lg:  22px;
  --r-pill: 999px;

  --sh:    0 1px 2px rgba(42,30,26,.05), 0 12px 32px -12px rgba(42,30,26,.16);
  --sh-lg: 0 2px 6px rgba(42,30,26,.06), 0 30px 70px -28px rgba(42,30,26,.30);

  --ease: cubic-bezier(.22,1,.36,1);
  --t:    .32s;
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth;
       scroll-padding-top: 104px;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family: var(--f);
  font-size: 16px; line-height: 1.65; font-weight: 400;
  color: var(--ink); background: var(--ground);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
button,input,select,textarea { font:inherit; color:inherit; }
:where(a:link,a:visited){ color:inherit; text-decoration:none; }
:focus-visible { outline:3px solid var(--ox); outline-offset:3px; border-radius:4px; }
ul { list-style:none; padding:0; }

.wrap { width:min(100% - var(--pad)*2, var(--maxw)); margin-inline:auto; }
.wrap-narrow { width:min(100% - var(--pad)*2, 820px); margin-inline:auto; }
.section { padding-block: var(--sec); }
.section--cream { background:var(--cream); }
.section--ox { background:var(--ox); color:var(--white); }
.section--tight { padding-block: clamp(36px,5vw,66px); }

.skip { position:absolute; left:-9999px; top:0; z-index:400; background:var(--ox);
  color:#fff; padding:14px 22px; border-radius:0 0 var(--r) 0; font-weight:600; }
.skip:focus { left:0; }
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ------------------------------------------------------------------ type -- */
h1,h2,h3,h4,.d1,.d2 { font-family:var(--f); font-weight:700; line-height:1.06;
  letter-spacing:-.03em; color:var(--ox); text-wrap:balance; }
.section--ox h1,.section--ox h2,.section--ox h3 { color:var(--white); }
h1,.d1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2,.d2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3      { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height:1.25; font-weight:600;
          letter-spacing:-.02em; }
.lede { font-size: clamp(1.02rem,1.25vw,1.18rem); line-height:1.62; color:var(--ink-2);
  max-width:58ch; text-wrap:pretty; }
.body { color:var(--ink-2); max-width:66ch; text-wrap:pretty; }
.small { font-size:.875rem; color:var(--muted); }
.eyebrow { display:inline-flex; align-items:center; gap:.6rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ox-soft); }
.section--ox .eyebrow { color:var(--gold); }
.eyebrow::before { content:""; width:1.5rem; height:1px; background:currentColor;
  flex:none; opacity:.7; }
.eyebrow--plain::before { display:none; }

/* --------------------------------------------------------------- buttons -- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-weight:600; font-size:.9375rem; line-height:1; padding:1.05rem 1.9rem;
  border:1.5px solid transparent; border-radius:var(--r-pill); cursor:pointer;
  text-align:center; max-width:100%;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease), transform .18s var(--ease); }
.btn:active { transform:translateY(1px); }
.btn svg { width:1.05rem; height:1.05rem; flex:none; }
.btn--primary { background:var(--ox); color:var(--white); border-color:var(--ox); }
.btn--ghost   { background:transparent; color:var(--ox); border-color:var(--line-2); }
.btn--gold    { background:var(--gold); color:var(--ox); border-color:var(--gold); }
.btn--light   { background:var(--white); color:var(--ox); border-color:var(--white); }
.btn--onox    { background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.btn--sm { padding:.72rem 1.15rem; font-size:.8125rem; min-height:44px; }
.btn--wide { width:100%; }
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover { background:var(--ox-deep); border-color:var(--ox-deep); }
  .btn--ghost:hover   { border-color:var(--ox); background:var(--cream); }
  .btn--gold:hover    { background:#D89A22; border-color:#D89A22; }
  .btn--light:hover   { background:var(--cream); border-color:var(--cream); }
  .btn--onox:hover    { background:var(--white); color:var(--ox); border-color:var(--white); }
}
.btnrow { display:flex; gap:.75rem; flex-wrap:wrap; }
.tlink { display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  font-size:.9375rem; color:var(--ox); min-height:44px;
  box-shadow:inset 0 -1.5px 0 0 var(--line-2); transition:box-shadow var(--t) var(--ease); }
.tlink svg { width:.95rem; height:.95rem; transition:transform var(--t) var(--ease); }
@media (hover:hover) and (pointer:fine){
  .tlink:hover { box-shadow:inset 0 -1.5px 0 0 var(--ox); }
  .tlink:hover svg { transform:translateX(2px); }
}

/* ------------------------------------------------------------ load screen -- */
/* The wordmark resolves from hairline to heavy along Montserrat's weight axis:
   the brand introducing itself, once per session. Additive, so the page is
   rendered underneath and a watchdog removes the plate even if a script throws. */
#pre { position:fixed; inset:0; z-index:600; display:grid; place-items:center;
  background:var(--cream); padding:var(--pad); text-align:center;
  transition:opacity .3s var(--ease), transform .34s var(--ease); }
#pre[hidden]{ display:none; }
#pre.is-done { opacity:0; transform:translateY(-1.5%); pointer-events:none; }
.pre__logo { width:clamp(150px,22vw,250px); margin:0 auto clamp(18px,2.4vw,26px); }
.pre__logo img { width:100%; height:auto; }
.pre__word { font-family:var(--f); font-size:clamp(1.6rem,4.6vw,2.6rem); line-height:1;
  letter-spacing:.02em; font-weight:var(--pre-w,200); color:var(--ox); }
.pre__sub { margin-top:.9rem; font-size:clamp(.62rem,1.4vw,.75rem); font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
  opacity:var(--pre-o,0); padding-left:.34em; }
.pre__rule { margin:clamp(20px,2.6vw,28px) auto 0; height:2px; width:min(240px,52vw);
  background:var(--line); border-radius:99px; position:relative; overflow:hidden; }
.pre__rule::after { content:""; position:absolute; inset:0; background:var(--ox);
  transform:scaleX(var(--pre-p,0)); transform-origin:0 50%; }
.is-loading { overflow:hidden; }

/* ---------------------------------------------------------------- header -- */
.util { background:var(--ox); color:var(--white); font-size:.75rem; }
.util__in { display:flex; align-items:center; justify-content:center; gap:1.6rem;
  min-height:38px; text-align:center; }
.util__in span { display:inline-flex; align-items:center; gap:.45rem; }
.util__in svg { width:.9rem; height:.9rem; color:var(--gold); flex:none; }
@media (max-width:760px){ .util__in span:nth-child(n+2){ display:none; } }

.hdr { position:sticky; top:0; z-index:80; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line); }
@media (prefers-reduced-transparency: reduce){ .hdr{ background:var(--white); } }
.hdr__in { display:flex; align-items:center; gap:1.5rem; min-height:78px; }
.logo { display:inline-flex; align-items:center; flex:none; min-height:44px; }
.logo img { width:clamp(122px,13vw,158px); height:auto; }
.nav { margin-left:auto; display:flex; align-items:center; gap:.15rem; }
.nav__link { position:relative; padding:.7rem .95rem; border-radius:var(--r-pill);
  font-size:.9375rem; font-weight:500; color:var(--ink); white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
  transition:color var(--t) var(--ease), background-color var(--t) var(--ease); }
.nav__link::after { content:""; position:absolute; left:.95rem; right:.95rem; bottom:.42rem;
  height:2px; background:var(--ox); border-radius:2px; transform:scaleX(0);
  transform-origin:50%; transition:transform var(--t) var(--ease); }
.nav__link[aria-current="page"]::after { transform:scaleX(1); }
@media (hover:hover) and (pointer:fine){ .nav__link:hover{ color:var(--ox); } }
.hdr__acts { display:flex; align-items:center; gap:.35rem; }
.iconbtn { display:inline-grid; place-items:center; width:44px; height:44px;
  border:0; background:none; border-radius:var(--r-pill); color:var(--ink);
  cursor:pointer; transition:background-color var(--t) var(--ease); }
.iconbtn svg { width:1.2rem; height:1.2rem; }
@media (hover:hover) and (pointer:fine){ .iconbtn:hover{ background:var(--cream); } }
.basket { position:relative; }
.basket__n { position:absolute; top:4px; right:4px; min-width:17px; height:17px;
  padding:0 4px; border-radius:99px; background:var(--gold); color:var(--ox);
  font-size:.625rem; font-weight:800; display:grid; place-items:center; }
.burger { display:none; }
@media (max-width:1000px){
  .burger { display:inline-grid; }
  /* The closed drawer slides up out of view, not sideways. Translated a
     viewport to the RIGHT it grew the document's scrollWidth by a full 375px
     on a phone, and neither overflow-x:hidden on <body> (<html> is the scroll
     container) nor overflow-x:clip on <html> fixes that without breaking the
     sticky header. Off the top costs nothing: content above the viewport never
     extends the scrollable area. */
  .nav { position:fixed; inset:0 0 auto 0; margin:0; z-index:120;
    max-height:100dvh; flex-direction:column; align-items:stretch; gap:0;
    padding:96px var(--pad) 2rem;
    background:var(--white); overflow-y:auto;
    transform:translateY(-100%); transition:transform .36s var(--ease); }
  .nav[data-open="true"] { transform:none; }
  .nav__link { padding:1.05rem .25rem; font-size:1.25rem; font-weight:600;
    border-bottom:1px solid var(--line); border-radius:0; }
  .nav__link::after { display:none; }
  .nav__close { position:absolute; top:22px; right:var(--pad); }
}
@media (min-width:1001px){ .nav__close{ display:none; } }

/* ------------------------------------------------------------------ hero -- */
.hero { position:relative; background:var(--cream); overflow:hidden; }
.hero__grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,5vw,72px); align-items:center;
  padding-block:clamp(48px,7vw,96px); }
.hero h1 { max-width:13ch; }
.hero h1 .b { display:block; color:var(--ox-soft); }
.hero .lede { margin-top:1.5rem; }
.hero .btnrow { margin-top:2rem; }
.hero__note { margin-top:1.6rem; font-size:.8125rem; color:var(--muted); }
.hero__art { position:relative; min-width:0; }
.hero__art img { width:100%; height:auto; border-radius:var(--r-lg);
  aspect-ratio:4 / 5; object-fit:cover; box-shadow:var(--sh-lg); }
/* One gold accent per view: a soft disc behind the photograph, never a gradient. */
.hero__art::before { content:""; position:absolute; z-index:0;
  inset:auto -6% -7% auto; width:46%; aspect-ratio:1; border-radius:50%;
  background:var(--gold); opacity:.22; }
@media (max-width:900px){
  .hero__grid { grid-template-columns:1fr; }
  .hero h1 { max-width:none; }
  .hero__art { order:-1; }
  .hero__art img { aspect-ratio:3 / 2; }
}

/* ----------------------------------------------------------------- proof -- */
.proof { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line); }
.proof__i { padding:clamp(20px,2.6vw,32px) clamp(14px,2vw,26px);
  border-right:1px solid var(--line); min-width:0; }
.proof__i:last-child { border-right:0; }
.proof__i svg { width:1.35rem; height:1.35rem; color:var(--ox-soft); }
.proof__i b { display:block; margin-top:.7rem; font-size:clamp(1.05rem,1.8vw,1.4rem);
  font-weight:700; letter-spacing:-.02em; color:var(--ox); line-height:1.15; }
.proof__i span { display:block; margin-top:.3rem; font-size:.8125rem;
  color:var(--muted); line-height:1.45; }
@media (max-width:880px){
  .proof { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .proof__i:nth-child(2n){ border-right:0; }
  .proof__i:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ------------------------------------------------------- section headers -- */
.shead { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem;
  align-items:end; margin-bottom:clamp(24px,3vw,40px); }
.shead h2 { margin-top:.75rem; }
.shead p { margin-top:.85rem; }
.shead__link { white-space:nowrap; }
@media (max-width:760px){
  .shead { grid-template-columns:1fr; gap:1rem; }
}

/* ------------------------------------------------------------------ rail -- */
/* A horizontal, snap-scrolled rail. This is what replaces the mega-menu: a
   large catalogue stays browsable in place instead of behind forty links. */
.rail { display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(230px, calc((100% - 3*1.25rem) / 4));
  gap:1.25rem; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--pad);
  padding-bottom:.5rem; margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.rail > * { scroll-snap-align:start; }
.rail::-webkit-scrollbar { height:6px; }
.rail::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; }
.rail::-webkit-scrollbar-track { background:transparent; }
@media (max-width:1000px){
  .rail { grid-auto-columns:minmax(210px, calc((100% - 2*1rem) / 2.4)); gap:1rem; }
}
@media (max-width:560px){
  .rail { grid-auto-columns:minmax(180px, 72%); }
}
.railnav { display:flex; gap:.5rem; }
.railnav button { width:44px; height:44px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-2); background:var(--white); color:var(--ox);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.railnav button svg { width:1.05rem; height:1.05rem; }
.railnav button[disabled] { opacity:.34; cursor:default; }
@media (hover:hover) and (pointer:fine){
  .railnav button:not([disabled]):hover { border-color:var(--ox); background:var(--cream); }
}
@media (max-width:760px){ .railnav { display:none; } }

/* ---------------------------------------------------------------- p-card -- */
/* One tap target for the whole card. The title's link is stretched over the
   card rather than the image carrying a second link to the same place: that
   gives a 300px target instead of a 117x39 one, and stops a screen reader
   announcing the same destination twice. The basket button sits above it. */
.pcard { position:relative; display:flex; flex-direction:column; min-width:0; }
.pcard__h a::after { content:""; position:absolute; inset:0; z-index:1;
  border-radius:var(--r); }
.pcard__cta { position:relative; z-index:2; }
.pcard__media { position:relative; border-radius:var(--r); overflow:hidden;
  background:var(--cream); aspect-ratio:1; }
.pcard__media img { width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease); }
.pcard__tag { position:absolute; top:.7rem; left:.7rem; z-index:2;
  padding:.3rem .6rem; border-radius:var(--r-pill); background:var(--gold);
  color:var(--ox); font-size:.625rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; }
.pcard__h { margin-top:.9rem; font-size:.9375rem; font-weight:600; line-height:1.35;
  color:var(--ink); letter-spacing:-.01em; }
.pcard__price { margin-top:.35rem; font-size:.9375rem; font-weight:700; color:var(--ox); }
.pcard__cta { margin-top:.85rem; }
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pcard__media img { transform:scale(1.045); }
}

/* ------------------------------------------------------------------ tabs -- */
.tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:clamp(20px,2.4vw,30px); }
.tab { padding:.72rem 1.25rem; border-radius:var(--r-pill); border:1.5px solid var(--line-2);
  background:transparent; color:var(--ink-2); font-size:.875rem; font-weight:600;
  cursor:pointer; min-height:44px;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease); }
.tab[aria-selected="true"] { background:var(--ox); color:var(--white); border-color:var(--ox); }
@media (hover:hover) and (pointer:fine){
  .tab:not([aria-selected="true"]):hover { border-color:var(--ox); color:var(--ox); }
}
.tabpanel[hidden] { display:none; }

/* ----------------------------------------------------------------- split -- */
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:center; }
.split--wide { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
.split__media img { width:100%; height:auto; border-radius:var(--r-lg);
  object-fit:cover; box-shadow:var(--sh); }
@media (max-width:900px){
  .split,.split--wide { grid-template-columns:1fr; }
  .split__media { order:2; }
}

/* ---------------------------------------------------------------- founder -- */
/* Mona is the brand, so the founder block is a portrait with her name on it,
   not a paragraph with a picture beside it. */
.founder { position:relative; }
.founder__media { position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-lg); }
.founder__media img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.founder__badge { position:absolute; left:clamp(14px,2vw,22px); bottom:clamp(14px,2vw,22px);
  z-index:2; display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1.1rem .7rem .8rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px); box-shadow:var(--sh); }
.founder__badge b { font-size:.9375rem; font-weight:700; color:var(--ox);
  letter-spacing:-.01em; line-height:1.2; display:block; }
.founder__badge span { font-size:.75rem; color:var(--muted); }
.founder__dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--gold);
  flex:none; box-shadow:0 0 0 .3rem rgba(228,168,51,.24); }
.pullquote { margin-top:clamp(24px,3vw,36px); padding-left:clamp(18px,2.4vw,28px);
  border-left:3px solid var(--gold);
  font-size:clamp(1.08rem,1.7vw,1.34rem); line-height:1.5; font-weight:500;
  color:var(--ox); letter-spacing:-.015em; }

/* ----------------------------------------------------------------- stats -- */
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,30px); }
.stat { padding:clamp(20px,2.6vw,30px); border-radius:var(--r);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
.stat b { display:block; font-size:clamp(1.5rem,3vw,2.3rem); font-weight:700;
  letter-spacing:-.03em; color:var(--gold); line-height:1.1; }
.stat span { display:block; margin-top:.4rem; font-size:.875rem; color:rgba(255,255,255,.82);
  line-height:1.5; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- voices -- */
.voices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,26px); }
.voice { padding:clamp(22px,2.8vw,32px); border-radius:var(--r);
  background:var(--white); border:1px solid var(--line); }
.voice p { font-size:.9375rem; line-height:1.65; color:var(--ink-2); }
.voice cite { display:block; margin-top:1.1rem; font-style:normal; font-size:.75rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ox-soft); }
.voice__mark { width:1.6rem; height:1.6rem; color:var(--gold); margin-bottom:.9rem; }
@media (max-width:880px){ .voices{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- tiles ----- */
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px); }
.tile { position:relative; display:block; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4 / 3; background:var(--cream); }
.tile img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
/* A solid floor, not a gradient. A gradient's legibility depends entirely on
   the photograph underneath it, and it cannot be measured: the contrast check
   sees white on white and is right to complain. The band is a known colour, so
   the caption is legible over any product shot. The fade above it is a
   pseudo-element, which keeps the soft edge without the guesswork. */
.tile__cap { position:absolute; inset:auto 0 0 0; z-index:2; padding:1.1rem 1.25rem;
  background:rgba(46,0,0,.88);
  color:var(--white); font-weight:700; font-size:1.02rem; letter-spacing:-.01em;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.tile__cap::before { content:""; position:absolute; inset:auto 0 100% 0; height:3.4rem;
  background:linear-gradient(to top, rgba(46,0,0,.88), rgba(46,0,0,0)); pointer-events:none; }
.tile__cap svg { width:1rem; height:1rem; flex:none; }
@media (hover:hover) and (pointer:fine){ .tile:hover img{ transform:scale(1.05); } }
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .tiles{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ grid -- */
.pgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px) clamp(14px,1.6vw,22px); }
@media (max-width:1000px){ .pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ------------------------------------------------------------------ club -- */
.club { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,5vw,72px); align-items:center; }
.club__pts { display:flex; flex-wrap:wrap; gap:.5rem .75rem; margin-top:1.5rem; }
.club__pts li { display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8125rem; color:rgba(255,255,255,.86); }
.club__pts svg { width:.95rem; height:.95rem; color:var(--gold); flex:none; }
.club__media img { width:100%; height:auto; border-radius:var(--r-lg);
  aspect-ratio:1; object-fit:cover; }
.club__press { margin-top:1.6rem; font-size:.8125rem; color:rgba(255,255,255,.7); }
@media (max-width:900px){ .club{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- footer -- */
.ftr { background:var(--ox); color:rgba(255,255,255,.82); padding-block:clamp(48px,6vw,80px); }
.ftr__top { display:grid; grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(26px,3.4vw,48px); }
.ftr__logo img { width:150px; height:auto; filter:brightness(0) invert(1); }
.ftr__blurb { margin-top:1.1rem; font-size:.875rem; line-height:1.65; max-width:34ch; }
.ftr h4 { font-size:.6875rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); }
.ftr ul { margin-top:1.1rem; display:grid; gap:.15rem; }
.ftr li a { display:inline-flex; align-items:center; min-height:40px; font-size:.9063rem;
  color:rgba(255,255,255,.82); transition:color var(--t) var(--ease); }
@media (hover:hover) and (pointer:fine){ .ftr li a:hover{ color:var(--white); } }
.ftr__bottom { margin-top:clamp(32px,4vw,52px); padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap;
  gap:.75rem 1.5rem; justify-content:space-between; font-size:.78rem;
  color:rgba(255,255,255,.62); }
@media (max-width:900px){ .ftr__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ftr__top{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------- pdp -- */
.pdp { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.5vw,64px); align-items:start; }
.pdp__gal { display:grid; gap:.75rem; }
.pdp__gal img { width:100%; height:auto; border-radius:var(--r-lg); aspect-ratio:1;
  object-fit:cover; background:var(--cream); }
.pdp__thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.pdp__thumbs img { aspect-ratio:1; border-radius:var(--r-sm); }
.pdp__price { margin-top:.9rem; font-size:1.6rem; font-weight:700; color:var(--ox);
  letter-spacing:-.02em; }
.pdp__opts { margin-top:1.6rem; display:grid; gap:1rem; }
.pdp__note { margin-top:1.2rem; display:grid; gap:.55rem; }
.pdp__note li { display:flex; gap:.6rem; align-items:flex-start; font-size:.875rem;
  color:var(--ink-2); }
.pdp__note svg { width:1rem; height:1rem; margin-top:.22rem; color:var(--ox-soft); flex:none; }
@media (max-width:900px){ .pdp{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------- utilities -- */
.stack > * + * { margin-top:1rem; }
.center { text-align:center; margin-inline:auto; }
.center .lede { margin-inline:auto; }
.center .eyebrow::before { display:none; }

/* --------------------------------------------------------------- reveals -- */
/* Elements are only hidden once JS is confirmed running, so a script failure
   can never leave the page blank. */
.reveal { transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.rv .reveal { opacity:0; transform:translateY(18px); }
html.rv .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal { transition:none; }
  html.rv .reveal { opacity:1; transform:none; }
  .pcard__media img,.tile img { transition:none; }
}

/* The proof strip sits between two padded sections, so its own block padding
   stacked with theirs and left about 180px of empty cream under the fold. */
.section--tight.proofband { padding-block: clamp(24px,3vw,40px) 0; }

/* At 320 the logo plus four 44px controls overrun the bar by 39px. Search and
   account are secondary on a phone; basket and menu are not, so those two stay
   and the other two move into the drawer's reach. */
@media (max-width:380px){
  .hdr__acts .iconbtn:nth-child(1),
  .hdr__acts .iconbtn:nth-child(2) { display:none; }
  .logo img { width:112px; }
}

/* Footer columns and the contact cards are h2, not h4: they follow the page's
   h2 sections and jumping two levels is a skipped heading. Styled to match. */
.ftr .ftr__h { font-size:.6875rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); }
.voice .card__h { font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.25;
  font-weight:600; letter-spacing:-.02em; }