/* ==========================================================================
   Precision Pro — design system
   Implements the tokens in the Claude Design handoff. Flat, hard-edged:
   no shadows, no gradients, no radius above 4px.
   ========================================================================== */

:root{
  /* colour */
  --red:        #D8232A;
  --red-deep:   #8E1218;
  --black:      #0E0F10;
  --chalk:      #FAFAF8;
  --ash-100:    #F1F1EE;
  --ash-200:    #F5F5F2;
  --ash-300:    #DCDDDA;
  --ash-500:    #8A8D8F;
  --ash-700:    #4A4D4F;
  --ash-label:  #6B6E70;
  --white:      #FFFFFF;
  --blue:       #2B5CFF;
  --blue-tint:  #E7EDFF;
  --on-dark:    #C6C8C9;
  --on-dark-mut:#5A5D5F;
  --hair-dark:  #2A2C2E;

  /* type */
  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --pad-x: 48px;
  --sec-y: 96px;
}

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

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

body{
  margin:0;
  background:var(--chalk);
  color:var(--black);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* height:auto is load-bearing — without it an intrinsic `height` attribute wins
   over the aspect ratio and the image letterboxes inside an oversized box. */
img{ max-width:100%; height:auto; display:block; }

a{ color:var(--red); text-decoration:none; transition:color 140ms ease-out; }
a:hover{ color:var(--red-deep); }

p{ text-wrap:pretty; }

/* Focus is not in the prototype; the handoff specifies this treatment. */
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--black); color:var(--chalk); padding:12px 20px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:0; color:var(--chalk); }

/* ---------- type ---------------------------------------------------------- */

.display{
  font-weight:800;
  font-variation-settings:'wdth' 118;
  text-transform:uppercase;
  letter-spacing:-.025em;
  line-height:.95;
  margin:0;
}
h1.display{ letter-spacing:-.03em; line-height:.9; }

.h-hero{ font-size:clamp(44px,7vw,92px); }
.h1    { font-size:clamp(38px,6vw,80px); }
.h2    { font-size:clamp(32px,4.4vw,58px); }
.h3    { font-size:clamp(27px,3.2vw,40px); }
.h4    { font-size:clamp(25px,3.6vw,46px); }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin:0 0 20px;
}
.eyebrow--light{ color:var(--chalk); opacity:.75; }

.mono{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.mono-sm{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

.lead{ font-size:clamp(19px,2vw,22px); line-height:1.5; color:var(--ash-700); max-width:680px; }
.body{ font-size:19px; line-height:1.55; color:var(--ash-700); max-width:62ch; }
.body--tight{ font-size:17px; line-height:1.55; color:var(--ash-700); }

.price{ font-weight:800; font-variation-settings:'wdth' 112; line-height:1; }
.price--lg{ font-size:clamp(32px,4vw,40px); }
.price--md{ font-size:24px; }

.strike{ font-family:var(--mono); font-size:13px; color:var(--ash-label); text-decoration:line-through; }

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

.wrap{ max-width:1400px; margin:0 auto; }
.wrap--wide{ max-width:1500px; margin:0 auto; }
.section{ padding:var(--sec-y) var(--pad-x); }
.section--tight{ padding:64px var(--pad-x) 40px; }
.section--dark{ background:var(--black); color:var(--chalk); }
.section--ash{ background:var(--ash-100); }
.bt{ border-top:1px solid var(--ash-300); }
.bb{ border-bottom:1px solid var(--ash-300); }

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

.btn{
  display:inline-block; border:0; cursor:pointer;
  font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700;
  padding:18px 38px; border-radius:0;
  transition:background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}
.btn--red    { background:var(--red); color:var(--chalk); }
.btn--red:hover{ background:var(--red-deep); color:var(--chalk); }
.btn--ghost  { background:transparent; color:var(--chalk); border:1px solid var(--ash-700); }
.btn--ghost:hover{ border-color:var(--chalk); color:var(--chalk); }
.btn--dark   { background:var(--black); color:var(--chalk); }
.btn--dark:hover{ background:var(--ash-700); color:var(--chalk); }
.btn--light  { background:var(--chalk); color:var(--black); }
.btn--light:hover{ background:var(--white); color:var(--black); }
.btn--lg     { padding:20px 44px; }
.btn--sm     { padding:12px 20px; font-size:11px; letter-spacing:.14em; }
.btn--block  { display:block; width:100%; text-align:center; }
.btn[disabled]{ background:var(--ash-300); color:var(--ash-500); cursor:not-allowed; }

.link-mono{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red);
}

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

.announce{
  background:var(--black); color:var(--chalk); text-align:center; padding:12px 16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}

.header{
  position:sticky; top:0; z-index:20;
  background:var(--chalk); border-bottom:1px solid var(--ash-300);
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; padding:16px var(--pad-x);
}
.header__left{ display:flex; align-items:center; gap:40px; }
.header__logo{ width:46px; height:46px; object-fit:contain; flex:none; }

.nav{
  display:flex; gap:30px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.nav a{ color:var(--black); display:block; }
.nav a span{ display:block; padding-bottom:6px; }
.nav a::after{
  content:""; display:block; height:2px; background:var(--red);
  opacity:0; transition:opacity 140ms ease-out;
}
.nav a:hover{ color:var(--black); }
.nav a:hover::after{ opacity:.4; }
.nav a[aria-current="page"]::after{ opacity:1; }

.header__right{
  display:flex; align-items:center; gap:24px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash-700);
}
.header__right a{ color:var(--ash-700); }
.header__right a:hover{ color:var(--black); }
.header__cart{ color:var(--black) !important; }

.burger{
  display:none; background:none; border:1px solid var(--ash-300);
  padding:10px 14px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--black);
}

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

.hero{
  position:relative; min-height:620px; display:flex; align-items:flex-end;
  background:var(--black); color:var(--chalk); overflow:hidden;
}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 32%;
}
/* Slight underexposure so display type holds AA and the red edge guard leads. */
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(14,15,16,.92) 0%, rgba(14,15,16,.78) 42%, rgba(14,15,16,.34) 100%);
}
.hero__inner{ position:relative; padding:72px var(--pad-x); max-width:820px; }
.hero .body{ color:var(--on-dark); max-width:520px; font-size:20px; }
.hero__cta{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:36px; }

/* ---------- spec strip ---------------------------------------------------- */

.specstrip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); border-bottom:1px solid var(--ash-300); }
.specstrip > div{
  padding:28px 40px; border-right:1px solid var(--ash-300);
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; line-height:2;
}
.specstrip > div:last-child{ border-right:0; }
.specstrip span{ color:var(--ash-label); }

/* ---------- split --------------------------------------------------------- */

.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); align-items:center; }
.split__media{
  background:var(--white); padding:64px; display:flex; align-items:center; justify-content:center;
  align-self:stretch; border-right:1px solid var(--ash-300);
}
.split__media img{ width:100%; max-width:520px; object-fit:contain; }
.split__body{ padding:80px 64px; min-width:0; }

/* Photographic half of a split: bleeds to the edge and crops rather than
   letterboxing. Needs a definite height — height:100% on the image alone
   resolves against an indefinite grid row and falls back to intrinsic size. */
.split__media--fill{ padding:0; border-right:0; height:clamp(380px,34vw,560px); }
.split__media--fill img{ width:100%; max-width:none; height:100%; object-fit:cover; }

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

.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:28px;
}
.grid--sm{ grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:24px; }

/* Hairline as a shadow on the child, so a short final row never reads as a block. */
.card{
  background:var(--white); box-shadow:0 0 0 1px var(--ash-300);
  display:flex; flex-direction:column; min-width:0;
  transition:box-shadow 140ms ease-out;
}
.card:hover{ box-shadow:0 0 0 1px var(--black); }
/* The media box must stay square whatever the shot's aspect. aspect-ratio alone
   loses to the image's intrinsic height, so the image is taken out of flow. */
.card__media{
  position:relative; aspect-ratio:1; min-height:0; display:flex;
  align-items:center; justify-content:center; padding:24px; background:var(--white);
}
.card__media img{
  position:absolute; inset:24px; width:calc(100% - 48px); height:calc(100% - 48px);
  object-fit:contain;
}
.card__media--placeholder{
  background-image:repeating-linear-gradient(135deg,#EDEDE9 0 10px,#F6F6F3 10px 20px);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash-500); text-align:center; line-height:1.9;
}
.card__badge{
  position:absolute; top:0; left:0; background:var(--red); color:var(--chalk);
  padding:8px 14px; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700;
}
.card__info{
  padding:24px; border-top:1px solid var(--ash-300);
  display:flex; flex-direction:column; gap:14px; flex:1;
}
.card__name{ font-size:20px; font-weight:700; line-height:1.2; color:var(--black); }
a.card__name:hover{ color:var(--red); }
.card__spec{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash-label); line-height:1.7;
}
.card__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 16px; flex-wrap:wrap;
  margin-top:auto; padding-top:8px;
}

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

.table-scroll{ overflow-x:auto; }
.spec-table{ width:100%; border-collapse:collapse; min-width:760px; }
.spec-table th{
  text-align:left; padding:20px 24px; border-bottom:2px solid var(--black);
  font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--ash-label);
}
.spec-table th:first-child{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; font-weight:400;
}
.spec-table th.is-us{ background:var(--black); color:var(--chalk); }
.spec-table td{ padding:20px 24px; border-bottom:1px solid var(--ash-300); font-size:17px; color:var(--ash-700); }
.spec-table td:first-child{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash-label);
}
.spec-table td.is-us{ background:var(--ash-200); font-weight:500; color:var(--black); }
.spec-table tr:last-child td{ border-bottom:0; padding:24px; }
.spec-table tr:last-child td.is-us{
  background:var(--red); color:var(--chalk); font-size:30px; font-weight:800;
  font-variation-settings:'wdth' 112;
}
.spec-table tr:last-child td.is-them{
  font-size:30px; font-weight:800; color:var(--ash-500); font-variation-settings:'wdth' 112;
}
.note{ font-family:var(--mono); font-size:11px; color:var(--ash-500); letter-spacing:.1em; margin-top:20px; }

/* ---------- FAQ ----------------------------------------------------------- */
/* Native <details> — the accordion needs no JS and stays keyboard-operable. */

.faq{ max-width:900px; border-top:1px solid var(--ash-300); }
.faq details{ border-bottom:1px solid var(--ash-300); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:26px 52px 26px 0;
  font-size:clamp(18px,2vw,21px); font-weight:700; line-height:1.35; color:var(--black);
  transition:color 140ms ease-out;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--red); }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:26px;
  font-family:var(--mono); font-size:22px; line-height:1.1; color:var(--red);
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 28px; font-size:18px; line-height:1.6; color:var(--ash-700); max-width:68ch; }

.eyebrow--blue{ color:var(--blue); }

/* ---------- blue information band ---------------------------------------- */
/* Signal Blue is informational only — it never carries a sales message. */
.band-blue{ background:var(--blue); color:var(--chalk); padding:80px var(--pad-x); }
.band-blue .body{ color:var(--chalk); opacity:.9; }

/* ---------- value row ----------------------------------------------------- */

.values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); border-top:1px solid var(--ash-300); }
.values > div{ padding:56px 40px; border-right:1px solid var(--ash-300); border-bottom:1px solid var(--ash-300); }
.values > div:last-child{ border-right:0; }
.values__num{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--red); margin-bottom:16px; }
.values__title{ font-size:21px; font-weight:700; text-transform:uppercase; margin-bottom:12px; }

/* ---------- filter bar ---------------------------------------------------- */

.filterbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:20px var(--pad-x); border-bottom:1px solid var(--ash-300);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.chips{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{
  padding:10px 20px; cursor:pointer; background:transparent; color:var(--black);
  box-shadow:0 0 0 1px var(--ash-300); border:0; font:inherit; letter-spacing:inherit;
  text-transform:inherit; transition:box-shadow 140ms ease-out, background-color 140ms ease-out;
}
.chip:hover{ box-shadow:0 0 0 1px var(--black); }
.chip[aria-pressed="true"]{ background:var(--black); color:var(--chalk); box-shadow:none; }
.sortwrap{ display:flex; align-items:center; gap:10px; color:var(--ash-700); }
.sortwrap select{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  border:0; background:transparent; color:var(--ash-700); cursor:pointer; padding:4px 2px;
}

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

.pdp{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); }
.pdp__gallery{ background:var(--white); border-right:1px solid var(--ash-300); padding:48px; align-self:stretch; }
.pdp__main{ background:var(--white); display:flex; align-items:center; justify-content:center; }
.pdp__main img{ width:100%; max-height:560px; object-fit:contain; }
.pdp__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px; }
.pdp__thumb{
  background:var(--white); box-shadow:0 0 0 1px var(--ash-300); padding:8px; cursor:pointer;
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:0;
  transition:box-shadow 140ms ease-out;
}
.pdp__thumb img{ width:100%; height:100%; min-height:0; object-fit:contain; }
.pdp__thumb:hover,.pdp__thumb[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--black); }
.pdp__body{ padding:64px; min-width:0; }

.speclist{ width:100%; border-collapse:collapse; margin:0; }
.speclist th{
  text-align:left; padding:14px 0; border-bottom:1px solid var(--ash-300); width:44%;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash-label); font-weight:400;
}
.speclist td{ padding:14px 0; border-bottom:1px solid var(--ash-300); font-size:17px; color:var(--black); }

.inbox{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:1px; background:var(--ash-300); }
.inbox > div{ background:var(--white); padding:24px; text-align:center; }
.inbox img{ width:100%; height:auto; aspect-ratio:1; object-fit:contain; margin-bottom:12px; }
.inbox .mono-sm{ color:var(--ash-label); }

.qty{ display:flex; align-items:center; box-shadow:0 0 0 1px var(--ash-300); }
.qty button{
  background:none; border:0; cursor:pointer; padding:14px 18px; font-family:var(--mono);
  font-size:14px; color:var(--black);
}
.qty button:hover{ background:var(--ash-100); }
.qty span{ padding:0 12px; font-family:var(--mono); font-size:13px; min-width:44px; text-align:center; }

/* ---------- editorial / legal -------------------------------------------- */

.cols2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:64px; }
.prose{ max-width:68ch; }
.prose h2{ font-size:clamp(24px,3vw,32px); margin:48px 0 16px; font-weight:800;
  font-variation-settings:'wdth' 118; text-transform:uppercase; letter-spacing:-.02em; line-height:1; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ font-size:18px; line-height:1.6; color:var(--ash-700); }
.prose ul{ padding-left:20px; }
.prose li{ margin-bottom:8px; }

.band-img{ height:clamp(320px,38vw,520px); background:var(--black); position:relative; overflow:hidden; }
.band-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

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

.field{ display:block; margin-bottom:20px; }
.field span{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash-label); margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%; padding:14px 16px; border:1px solid var(--ash-300); border-radius:4px;
  background:var(--white); font-family:var(--sans); font-size:17px; color:var(--black);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ font-family:var(--mono); font-size:13px; color:var(--ash-500); }

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

.cartline{
  display:grid; grid-template-columns:110px 1fr auto; gap:24px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--ash-300);
}
.cartline__img{ background:var(--white); box-shadow:0 0 0 1px var(--ash-300); padding:10px; }
.cartline__img img{ width:100%; aspect-ratio:1; object-fit:contain; }
.cart-summary{ background:var(--ash-100); padding:32px; }
.cart-summary .row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash-700); }
.cart-summary .row--total{ border-top:1px solid var(--ash-300); margin-top:12px; padding-top:20px;
  color:var(--black); font-size:14px; }

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

.footer{ background:var(--black); color:var(--ash-500); padding:64px var(--pad-x) 40px; }
.footer__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:48px;
  padding-bottom:48px; border-bottom:1px solid var(--hair-dark);
}
.footer__plate{
  width:52px; height:52px; background:var(--white); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.footer__plate img{ width:44px; height:44px; object-fit:contain; }
.footer__blurb{ font-size:16px; line-height:1.6; color:var(--on-dark); max-width:220px; }
.footer__col{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; line-height:2.4; }
.footer__col b{ color:var(--chalk); display:block; margin-bottom:8px; font-weight:400; }
.footer__col a{ color:var(--ash-500); display:block; }
.footer__col a:hover{ color:var(--chalk); }
.news{ display:flex; border:1px solid var(--hair-dark); }
.news input{
  flex:1; min-width:0; background:transparent; border:0; padding:14px 16px;
  font-family:var(--mono); font-size:12px; color:var(--chalk);
}
.news input::placeholder{ color:var(--on-dark-mut); }
.news button{
  background:var(--red); color:var(--chalk); border:0; cursor:pointer; padding:14px 20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  transition:background-color 140ms ease-out;
}
.news button:hover{ background:var(--red-deep); }
.news-msg{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; margin-top:12px; min-height:16px; color:var(--on-dark); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:32px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.footer__bottom a{ color:var(--ash-500); }
.footer__bottom a:hover{ color:var(--chalk); }

/* ---------- responsive ---------------------------------------------------- */
/* Not in the handoff — the prototype was desktop-only. Flagged in the README. */

@media (max-width:1100px){
  .split__body{ padding:56px 40px; }
  .pdp__body{ padding:48px 40px; }
  .pdp__gallery{ padding:32px; }
}

@media (max-width:900px){
  :root{ --pad-x:24px; --sec-y:64px; }

  .burger{ display:block; }
  .header{ flex-wrap:wrap; padding:14px var(--pad-x); }
  .header__left{ gap:20px; }
  .nav{
    display:none; order:3; width:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--ash-300); margin-top:14px; padding-top:6px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--ash-300); }
  .nav a span{ padding-bottom:0; }
  .nav a::after{ display:none; }
  .nav a[aria-current="page"]{ color:var(--red); }
  .header__right{ gap:16px; font-size:11px; }

  .hero{ min-height:520px; }
  .hero__inner{ padding:56px var(--pad-x); }
  .hero__scrim{ background:linear-gradient(180deg, rgba(14,15,16,.55) 0%, rgba(14,15,16,.86) 60%, rgba(14,15,16,.94) 100%); }
  .hero .body{ font-size:18px; }
  .hero__cta{ gap:14px; }
  .btn{ padding:16px 28px; font-size:12px; }
  .btn--lg{ padding:18px 32px; }

  .specstrip > div{ padding:20px 24px; }
  .specstrip > div:nth-child(2n){ border-right:0; }
  .specstrip > div:nth-child(-n+2){ border-bottom:1px solid var(--ash-300); }

  .split__media{ padding:40px 24px; border-right:0; border-bottom:1px solid var(--ash-300); }
  .split__body{ padding:48px var(--pad-x); }

  .pdp__gallery{ border-right:0; border-bottom:1px solid var(--ash-300); padding:24px; }
  .pdp__body{ padding:40px var(--pad-x); }

  .cols2{ gap:40px; }
  .values > div{ padding:40px 24px; border-right:0; }

  .cartline{ grid-template-columns:80px 1fr; }
  .cartline > :last-child{ grid-column:1 / -1; }

  .footer{ padding:48px var(--pad-x) 32px; }
  .footer__grid{ gap:36px; padding-bottom:36px; }
}

@media (max-width:600px){
  /* Display type is uppercase and unbreakable — a single long word ("EVERYTHING")
     overflows a narrow phone unless the floor comes down with the viewport. */
  .h-hero{ font-size:clamp(34px,11vw,92px); }
  .h1    { font-size:clamp(28px,8.5vw,80px); }
  .h2    { font-size:clamp(26px,7.5vw,58px); }
  .h3    { font-size:clamp(23px,6.5vw,40px); }
  .h4    { font-size:clamp(23px,6.5vw,46px); }

  .specstrip{ grid-template-columns:1fr 1fr; }
  .pdp__thumbs{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .grid{ gap:20px; }
  .announce{ font-size:10px; letter-spacing:.12em; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}