/* ============================================
   HARDMATIC — palette
   Change any colour here and it changes everywhere.
   ============================================ */
:root {
  --black: #0a0908;
  --black-rgb: 10, 9, 8;
  --black-deep: #050505;
  --charcoal: #1c1a19;
  --charcoal-light: #2a2725;
  --charcoal-line: #3a3634;
  --white: #f3efe6;
  --white-dim: #cfc9bd;
  --gold: #c9a54c;
  --gold-rgb: 201, 165, 76;
  --gold-bright: #e8c876;
  --gold-dim: #8a713a;
  --cherry: #7c1027;
  --cherry-rgb: 124, 16, 39;
  --cherry-bright: #a5142f;
}

/* ============================================
   HARDMATIC — site stylesheet
   Palette: black / charcoal / white / gold / cherry
   Vibe: golden era x modern luxury gym
   ============================================ */

:root {
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --container: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1.15;
}

p { max-width: 60ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* ============ background texture ============ */
body {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 40px),
    linear-gradient(180deg, var(--black-deep), var(--black) 8%);
}

/* ============ header / nav ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--black-rgb),0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--charcoal-line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  max-width: var(--container);
  margin: 0 auto;
}

.brand {
  color: var(--white);
}


.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  color: var(--white-dim);
  padding: 6px 0;
  transition: color .25s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .25s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  border: 1px solid var(--gold-dim);
  padding: 9px 20px !important;
  color: var(--gold) !important;
}
.nav-cta:hover { background: var(--gold); color: var(--black) !important; }
.nav-cta::after { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--gold);
  display: block;
}

/* ============ buttons ============ */
.btn {
  background: transparent;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 34px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-dim));
  color: var(--black);
  font-weight: 600;
}
.btn-gold:hover { filter: brightness(1.12); transform: translateY(-1px); }

.btn-outline {
  border-color: var(--white-dim);
  color: var(--white);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-cherry {
  background: var(--cherry);
  color: var(--white);
}
.btn-cherry:hover { background: var(--cherry-bright); }

/* ============ hero ============ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--charcoal-line);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--black-rgb),0.35), rgba(var(--black-rgb),0.92) 88%),
    repeating-linear-gradient(45deg, rgba(var(--gold-rgb),0.045) 0 3px, transparent 3px 46px),
    linear-gradient(160deg, #171412, #050505 65%);
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(var(--cherry-rgb),0.11), transparent 55%);
}
.hero-content { position: relative; z-index: 2; padding-block: 100px; }

.hero h1 {
  font-family: var(--font-logo);
  text-transform: none;
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin-bottom: 22px;
  text-shadow: 0 0 40px rgba(var(--gold-rgb),0.18);
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}

.hero-sub {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--white-dim);
  max-width: 42ch;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }

.hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.hero-stats div { border-left: 1px solid var(--charcoal-line); padding-left: 18px; }
.hero-stats strong {
  display: block;
  font-family: var(--font-logo);
  font-size: 2.1rem;
  color: var(--gold);
}
.hero-stats span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
}

/* ============ section framing ============ */
section { padding: 110px 0; }
.section-charcoal { background: var(--charcoal); border-top: 1px solid var(--charcoal-line); border-bottom: 1px solid var(--charcoal-line); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
.section-head p { margin: 18px auto 0; color: var(--white-dim); }

/* ============ placeholder media block ============ */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(var(--gold-rgb),0.06) 0 2px, transparent 2px 26px),
    linear-gradient(150deg, var(--charcoal-light), var(--black-deep));
  border: 1px solid var(--charcoal-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--gold-dim);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(var(--gold-rgb),0.08) 50%, transparent 60%);
}
.ph span { position: relative; z-index: 1; padding: 0 14px; }

/* ============ pillars / feature grid ============ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--charcoal-line);
  border: 1px solid var(--charcoal-line);
}
.pillar {
  background: var(--black);
  padding: 44px 34px;
  transition: background .25s ease;
}
.pillar:hover { background: var(--charcoal); }
.pillar .num {
  font-family: var(--font-logo);
  font-size: 1.6rem;
  color: var(--cherry-bright);
  display: block;
  margin-bottom: 16px;
}
.pillar h3 { font-size: 1.15rem; margin-bottom: 12px; }
.pillar p { font-size: 0.95rem; }

/* ============ product grid (shop) ============ */
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 50px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--charcoal-line);
}
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--charcoal-line);
  color: var(--white-dim);
  cursor: pointer;
  transition: all .2s ease;
}
.chip:hover, .chip.active {
  border-color: var(--gold);
  color: var(--gold);
}
.sort-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.product-card { position: relative; }
.product-media {
  aspect-ratio: 4/5;
  margin-bottom: 18px;
  position: relative;
}
.badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--cherry);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  z-index: 2;
}
.badge.gold { background: var(--gold); color: var(--black); }

.product-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.product-info h4 {
  font-size: 1rem;
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0;
  margin-bottom: 4px;
}
.product-cat {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.price {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1rem;
  white-space: nowrap;
}
.price del { color: var(--white-dim); opacity: 0.6; margin-right: 8px; font-size: 0.85em; }

/* ============ split content ============ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media { aspect-ratio: 1/1; }
.split h2 { margin-bottom: 22px; }
.split p + p { margin-top: 16px; }
.split-list { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.split-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.split-list li::before { content: "—"; color: var(--gold); }

/* ============ timeline (about) ============ */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 30px;
  padding: 34px 0;
  border-bottom: 1px solid var(--charcoal-line);
}
.timeline-item:first-child { padding-top: 0; }
.timeline-year {
  font-family: var(--font-logo);
  font-size: 1.6rem;
  color: var(--cherry-bright);
}
.timeline-item h3 { font-size: 1.1rem; margin-bottom: 8px; }
.timeline-item p { font-size: 0.95rem; }

/* ============ quote / cta banner ============ */
.banner {
  text-align: center;
  padding: 130px 0;
  position: relative;
  border-top: 1px solid var(--charcoal-line);
  border-bottom: 1px solid var(--charcoal-line);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(var(--cherry-rgb),0.07), transparent 58%),
    var(--black-deep);
}
.banner .eyebrow { justify-content: center; }
.banner h2 {
  font-family: var(--font-logo);
  text-transform: none;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 16ch;
  margin: 0 auto 36px;
  color: var(--white);
}
.banner h2 em { font-style: normal; color: var(--gold); }

/* ============ testimonials ============ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.testimonial {
  border: 1px solid var(--charcoal-line);
  padding: 34px 30px;
  background: var(--charcoal);
}
.testimonial p { font-size: 0.98rem; color: var(--white-dim); margin-bottom: 22px; }
.testimonial .who {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; }

/* ============ forms (contact) ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 10px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--charcoal);
  border: 1px solid var(--charcoal-line);
  color: var(--white);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color .2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
}
.field textarea { resize: vertical; min-height: 140px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.info-block { border-left: 2px solid var(--gold); padding-left: 26px; margin-bottom: 40px; }
.info-block h4 { color: var(--white); font-size: 1rem; margin-bottom: 10px; }
.info-block p { font-size: 0.92rem; }

.social-row { display: flex; gap: 16px; margin-top: 8px; }
.social-row a {
  width: 42px; height: 42px;
  border: 1px solid var(--charcoal-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--gold);
  transition: all .2s ease;
}
.social-row a:hover { border-color: var(--gold); background: rgba(var(--gold-rgb),0.08); }

/* ============ footer ============ */
.site-footer {
  background: var(--black-deep);
  border-top: 1px solid var(--charcoal-line);
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
}
.footer-brand .brand { font-size: 1.7rem; }
.footer-brand p { margin-top: 18px; font-size: 0.9rem; max-width: 32ch; }
.footer-col h5 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.92rem; color: var(--white-dim); transition: color .2s ease; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 30px;
  border-top: 1px solid var(--charcoal-line);
  font-size: 0.78rem;
  color: var(--white-dim);
  opacity: 0.75;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============ page header (interior pages) ============ */
.page-header {
  padding: 160px 0 70px;
  text-align: center;
  border-bottom: 1px solid var(--charcoal-line);
  /* A cherry glow sitting behind the heading, and a neutral lift above it.
     This lives on the page header rather than on `body`, so the home page's
     banner never picks it up. */
  background:
    radial-gradient(ellipse 58% 62% at 50% 46%, rgba(var(--cherry-rgb),0.16), transparent 72%),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.022), transparent 55%);
}
.page-header h1 {
  font-family: var(--font-logo);
  text-transform: none;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--white);
}
.page-header h1 em { font-style: normal; color: var(--gold); }
.breadcrumb {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 16px;
}
.breadcrumb .gold { color: var(--gold); }

/* ============ responsive ============ */
@media (max-width: 980px) {
  .pillars { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-media { order: 0; }
  .testimonials { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .product-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-stats { gap: 30px; }
  section { padding: 70px 0; }
  .timeline-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================
   SHOPIFY ADDITIONS — header actions, product,
   cart, forms, pagination, rich text, utilities
   ============================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--black);
  padding: 10px 16px; font-family: var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; font-size: .8rem;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
main:focus { outline: none; }

/* ---------- announcement ---------- */
.announcement {
  background: var(--cherry);
  color: var(--white);
  text-align: center;
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 10px 28px;
}
.announcement a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- header ---------- */
.brand img { display: block; height: auto; }
.header-actions { display: flex; align-items: center; gap: 22px; }
.header-icon {
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white-dim);
  transition: color .25s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.header-icon:hover { color: var(--gold); }
.cart-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--gold); color: var(--black);
  font-size: .72rem; font-weight: 600; letter-spacing: 0;
  border-radius: 11px;
}
.cart-count[data-count="0"] { background: var(--charcoal-line); color: var(--white-dim); }

/* ---------- display headings with [gold] words ---------- */
.gold-text, h1 em, h2 em { font-style: normal; color: var(--gold); }

/* ---------- media ---------- */
.media-fill { position: relative; overflow: hidden; }
.media-fill > img,
.media-fill > video,
.media-fill > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-bg-image { position: absolute; inset: 0; }
.hero-bg-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg.has-image { background: linear-gradient(180deg, rgba(var(--black-rgb),0.35), rgba(var(--black-rgb),0.92) 88%); z-index: 1; }

/* ---------- product card ---------- */
.product-media { display: block; overflow: hidden; }
.product-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .35s ease, transform .6s ease;
}
.product-media .img-hover { opacity: 0; }
.product-card:hover .product-media .img-hover { opacity: 1; }
.product-card:hover .product-media img { transform: scale(1.02); }
.product-info h4 a:hover { color: var(--gold); }
.badge.muted { background: var(--charcoal-line); color: var(--white-dim); }
.badge + .badge { top: 48px; }
.grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  font-family: var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-foot { text-align: center; margin-top: 56px; }

/* ---------- shop toolbar ---------- */
a.chip { display: inline-block; }
.toolbar-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sort-select {
  background: transparent;
  border: 1px solid var(--charcoal-line);
  color: var(--white-dim);
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}
.sort-select option { background: var(--charcoal); }

/* ---------- pagination ---------- */
.pagination {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 64px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em;
}
.pagination a, .pagination span {
  min-width: 42px; padding: 10px 14px; text-align: center;
  border: 1px solid var(--charcoal-line);
}
.pagination a:hover, .pagination .current { border-color: var(--gold); color: var(--gold); }

/* ---------- product page ---------- */
.product-section { padding-top: 70px; }
.product-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}
.gallery-main { position: relative; aspect-ratio: 4/5; border: 1px solid var(--charcoal-line); background: var(--charcoal); }
.gallery-slide { display: none; }
.gallery-slide.is-active { display: block; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.gallery-thumb {
  aspect-ratio: 1/1; padding: 0; cursor: pointer;
  background: var(--charcoal); border: 1px solid var(--charcoal-line);
}
.gallery-thumb.is-active, .gallery-thumb:hover { border-color: var(--gold); }
.product-details { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 26px; }
.product-title {
  font-family: var(--font-logo);
  text-transform: none;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: .01em;
  line-height: 1;
  font-weight: 400;
}
.product-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); letter-spacing: .04em; }
.product-price del { color: var(--white-dim); opacity: .6; font-size: .8em; margin-right: 10px; }
.product-price .badge { position: static; margin-left: 12px; vertical-align: middle; }
.tax-note { font-size: .82rem; opacity: .75; margin-top: 6px; }
.option-group { border: 0; }
.option-group legend, .qty-label {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 12px;
}
.option-group legend b { color: var(--gold); font-weight: 500; }
.option-input { position: absolute; opacity: 0; pointer-events: none; }
.option-input:checked + .chip { border-color: var(--gold); color: var(--black); background: var(--gold); }
.option-input:focus-visible + .chip { outline: 2px solid var(--gold); outline-offset: 2px; }
.qty {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--charcoal-line);
}
.qty button {
  width: 44px; background: none; border: 0; color: var(--white);
  font-size: 1.1rem; cursor: pointer;
}
.qty button:hover { color: var(--gold); }
.qty input {
  width: 56px; text-align: center; background: transparent; border: 0;
  color: var(--white); font-family: var(--font-display); font-size: 1rem;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-buttons { display: flex; flex-direction: column; gap: 12px; }
.buy-buttons .btn { justify-content: center; width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.shopify-payment-button__button { border-radius: 0 !important; min-height: 50px; font-family: var(--font-display) !important; letter-spacing: .12em !important; text-transform: uppercase; }
.shopify-payment-button__button--unbranded { background: transparent !important; border: 1px solid var(--white-dim) !important; color: var(--white) !important; }
.shopify-payment-button__button--unbranded:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.shopify-payment-button__more-options { color: var(--white-dim) !important; }
.form-error { color: var(--cherry-bright); font-size: .9rem; }
.collapsible { border-top: 1px solid var(--charcoal-line); }
.collapsible:last-child { border-bottom: 1px solid var(--charcoal-line); }
.collapsible summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0;
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--white);
}
.collapsible summary::-webkit-details-marker { display: none; }
.collapsible summary::after { content: "+"; color: var(--gold); font-size: 1.2rem; }
.collapsible[open] summary::after { content: "–"; }
.collapsible .rte { padding-bottom: 20px; }

/* ---------- rich text (product descriptions, pages, articles) ---------- */
.rte { color: var(--white-dim); }
.rte > * + * { margin-top: 1em; }
.rte h2, .rte h3, .rte h4 { margin-top: 1.6em; }
.rte a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.rte ul { list-style: none; }
.rte ul li { display: flex; gap: 12px; }
.rte ul li::before { content: "—"; color: var(--gold); }
.rte ol { padding-left: 1.2em; }
.rte img { margin: 1.4em 0; }
.rte table { width: 100%; border-collapse: collapse; }
.rte td, .rte th { border: 1px solid var(--charcoal-line); padding: 8px 12px; text-align: left; }
.rte blockquote { border-left: 2px solid var(--gold); padding-left: 20px; font-style: italic; }
.page-width-narrow { max-width: 760px; margin: 0 auto; }

/* ---------- cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
.cart-line {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--charcoal-line);
  align-items: start;
}
.cart-line:first-child { padding-top: 0; }
.cart-line__media { aspect-ratio: 4/5; position: relative; display: block; }
.cart-line__info h4 { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1rem; margin-bottom: 4px; }
.cart-line__info h4 a:hover { color: var(--gold); }
.cart-line__props { font-size: .85rem; margin-top: 4px; }
.cart-line__actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.link-remove {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--white-dim); text-decoration: underline; text-underline-offset: 4px;
}
.link-remove:hover { color: var(--cherry-bright); }
.cart-summary { background: var(--charcoal); border: 1px solid var(--charcoal-line); padding: 34px 30px; position: sticky; top: 110px; }
.cart-summary h3 { font-size: 1rem; margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.summary-row.total { border-top: 1px solid var(--charcoal-line); margin-top: 8px; padding-top: 18px; color: var(--white); font-size: 1rem; }
.summary-row.total .price { font-size: 1.2rem; }
.cart-summary .btn { width: 100%; justify-content: center; margin-top: 14px; }
.cart-summary .tax-note { margin: 14px 0 4px; }
.additional-checkout-buttons { margin-top: 12px; }
.cart-empty { text-align: center; padding: 40px 0; }
.cart-empty p { margin: 0 auto 30px; }

/* ---------- forms ---------- */
.form-success {
  border-left: 2px solid var(--gold); padding: 14px 18px; margin-bottom: 26px;
  background: var(--charcoal); color: var(--white);
}
.errors, .form-errors { border-left: 2px solid var(--cherry-bright); padding: 14px 18px; margin-bottom: 26px; background: var(--charcoal); color: var(--white); }
.errors ul { list-style: none; }
.signup-form { display: flex; gap: 0; max-width: 520px; margin: 0 auto; }
.signup-form input[type="email"] {
  flex: 1; min-width: 0;
  background: transparent; border: 1px solid var(--charcoal-line); border-right: 0;
  color: var(--white); padding: 15px 18px; font-family: var(--font-body); font-size: .95rem;
}
.signup-form input[type="email"]:focus { outline: none; border-color: var(--gold); }
.signup-note { font-size: .78rem; margin: 16px auto 0; opacity: .75; }
.auth-box { max-width: 460px; margin: 0 auto; }
.auth-box .btn { width: 100%; justify-content: center; }
.auth-links { margin-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .9rem; }
.auth-links a { color: var(--gold); }

/* ---------- tables (account) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--charcoal-line); }
.data-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .92rem; }
.data-table th {
  text-align: left; font-family: var(--font-display); font-weight: 500; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); padding: 14px 16px; border-bottom: 1px solid var(--charcoal-line);
}
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--charcoal-line); }
.data-table a { color: var(--gold); }

/* ---------- collection list / search / blog ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.card-link { display: block; }
.card-link .ph, .card-link .media-fill { aspect-ratio: 4/5; margin-bottom: 16px; }
.card-link h3 { font-size: 1.05rem; }
.card-link:hover h3 { color: var(--gold); }
.card-meta { font-family: var(--font-display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 6px; }
.search-form { display: flex; max-width: 620px; margin: 0 auto 60px; }
.search-form input {
  flex: 1; min-width: 0; background: var(--charcoal); border: 1px solid var(--charcoal-line); border-right: 0;
  color: var(--white); padding: 14px 16px; font-family: var(--font-body); font-size: 1rem;
}
.search-form input:focus { outline: none; border-color: var(--gold); }
.article-hero { aspect-ratio: 16/8; margin-bottom: 50px; }

/* ---------- password ---------- */
.password-page { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 60px 28px; }
.password-page .brand { font-size: 3rem; display: inline-block; margin-bottom: 26px; }
.password-page details { margin-top: 40px; }
.password-page summary { cursor: pointer; font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--gold); }

/* ---------- payment icons ---------- */
.payment-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-icons svg { width: 38px; height: 24px; }

/* ---------- responsive for additions ---------- */
@media (max-width: 980px) {
  .product-layout, .cart-layout { grid-template-columns: 1fr; gap: 44px; }
  .product-details, .cart-summary { position: static; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .header-actions { gap: 14px; }
  .header-actions .header-account { display: none; }
  .nav-links .nav-account { display: block; }
  .card-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 84px 1fr; }
  .cart-line__total { grid-column: 2; }
  .page-header { padding: 110px 0 56px; }
  .signup-form { flex-direction: column; gap: 10px; }
  .signup-form input[type="email"] { border-right: 1px solid var(--charcoal-line); }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 721px) {
  .nav-links .nav-account { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* sticky header: the Shopify section wrapper is what sticks */
.section-header { position: sticky; top: 0; z-index: 100; }
.section-header .site-header { position: relative; }

/* image-with-text: image on the right on desktop */
.split.image-right .split-media { order: 2; }
.split-text p + p { margin-top: 16px; }
@media (max-width: 980px) { .split.image-right .split-media { order: 0; } }
.product-media.ph { display: flex; }
.chip { background: transparent; }
.ph .badge { position: absolute; padding: 6px 12px; }
.qty { height: 46px; }

/* ============================================
   TYPE SYSTEM — condensed sans for display,
   mono for labels, no decorative faces except
   the logo, which is the packaged mark.
   ============================================ */
:root {
  --font-display: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.brand { display: inline-flex; align-items: center; text-shadow: none; line-height: 0; }
.brand img { display: block; max-width: 100%; height: auto; }
.nav-cta { white-space: nowrap; }
.nav-links { gap: 26px; }

.hero h1,
.page-header h1,
.banner h2,
.product-title,
.password-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92;
  text-shadow: none;
  color: var(--white);
}

.hero-stats strong,
.pillar .num,
.timeline-year {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.eyebrow,
.btn,
.badge,
.breadcrumb,
.chip,
.sort-label,
.price,
.product-cat,
.signup-note,
.footer-bottom,
.footer-col h5,
.nav-links,
.header-icon,
.cart-count,
.qty input,
.link-remove,
.summary-row,
.data-table th,
.card-meta,
.pagination,
.collapsible summary,
.option-group legend,
.qty-label,
.field label {
  font-family: var(--font-mono);
}

.eyebrow { font-size: 0.72rem; letter-spacing: 0.3em; font-weight: 500; }
.btn { font-size: 0.75rem; letter-spacing: 0.22em; font-weight: 500; }
.nav-links { font-size: 0.74rem; letter-spacing: 0.18em; }
.badge { font-weight: 500; }

/* ============================================
   FILM BANNER HERO
   ============================================ */
.hero--film {
  align-items: center;
  text-align: center;
  border-bottom: 1px solid var(--charcoal-line);
  background: var(--black-deep);
}
.hero--film.hero--tall { min-height: 100vh; min-height: 100svh; }
.hero--film.hero--medium { min-height: 76vh; }
.hero--film.hero--short { min-height: 54vh; }
.hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--black-deep); }
.hero-media .hero-video,
.hero-media .hero-image,
.hero-media video,
.hero-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  border: 0;
}
.hero-media iframe { width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--black-rgb), 0.55), rgba(var(--black-rgb), calc(0.25 + var(--scrim, 0.55))) 82%),
    radial-gradient(ellipse at 50% 55%, rgba(var(--cherry-rgb), 0.06), transparent 62%);
}
.hero--film .hero-content {
  position: relative;
  z-index: 2;
  padding-block: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero--film .eyebrow { justify-content: center; margin-bottom: 22px; }
.hero--film .eyebrow::before { display: none; }
.hero--film h1 {
  font-size: clamp(2.4rem, 7vw, 6rem);
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}
.hero--film .hero-sub {
  margin: 26px auto 0;
  max-width: 48ch;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--white-dim);
}
.hero--film .hero-actions { justify-content: center; margin-top: 40px; }
.hero--film .btn-outline { border-color: rgba(243, 239, 230, 0.5); padding: 14px 30px; }
.hero--film .hero-stats { justify-content: center; margin-top: 64px; }
.hero--film .hero-stats div { border-left: 0; border-top: 1px solid var(--charcoal-line); padding: 14px 20px 0; }
.hero-sound {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(243, 239, 230, 0.5);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero-sound:hover { border-color: var(--gold); }
.hero-sound__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white); display: block; }
.hero-sound[aria-pressed="true"] .hero-sound__dot { background: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8); }
@media (max-width: 720px) {
  .hero--film .hero-content { padding-block: 90px; }
  .hero--film .hero-stats { gap: 20px; }
  .hero-sound { right: 16px; bottom: 16px; }
}


/* ---------- the dissolve drawn on the GPU (assets/js/hero-dye-gl.js) ------
   The canvas sits exactly over the headline and carries the same sink and
   stretch the headline would have had; the shader does the ink itself, so
   nothing here touches opacity. */
.hero-dye-gl {
  transform: translate3d(0, var(--hero-fall-y, 0px), 0) scale(var(--hero-sx, 1), var(--hero-sy, 1));
  transform-origin: 50% 30%;
  /* No fade. The canvas is drawn from the headline's own pixels and sits
     exactly on top of it, so the swap is invisible - a crossfade would show
     as a dip in brightness at the very moment the dissolve begins. */
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-dye-gl { display: none; }
}

/* ---------- banner: sinks into black, then the headline dissolves ---------- */
.hero-pin {
  position: relative;
  height: calc(100vh + var(--pin-extra, 170vh));
  height: calc(100svh + var(--pin-extra, 170vh));
  /* all of these are written by the scroll handler as plain numbers and
     plain lengths - see the note there */
  --hero-progress: 0;
  --hero-dye: 0;
  --hero-black: 0;
  --hero-lead: 1;
  --hero-lead-y: 0px;
  --hero-mute: 1;
  --hero-fall-y: 0px;
  --hero-sx: 1;
  --hero-sy: 1;
  --hero-ink: 1;
  --hero-lite-blur: 0px;
}
.hero--pinned {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}
.hero-dye-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the photo is gone by 0.45, well before the headline starts to move */
.hero-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--hero-black, 0);
  pointer-events: none;
}

/* the block itself no longer fades - each part leaves on its own clock */
.hero--film .hero-content { opacity: 1; transform: none; }

/* supporting lines step back early and leave the headline on its own */
.hero--pinned .eyebrow,
.hero--pinned .hero-sub,
.hero--pinned .hero-actions {
  opacity: var(--hero-lead, 1);
  transform: translate3d(0, var(--hero-lead-y, 0px), 0);
  will-change: opacity, transform;
}
/* once they have faded out they must stop being clickable - the banner is
   still sticky and filling the screen at that point */
.hero--pinned.is-past .hero-content { pointer-events: none; }

/* the headline: holds full strength through the blackout, then bleeds out */
.hero--pinned h1.hero-dye {
  /* --hero-ink is a cubic that lands on exactly zero as the hold ends, so the
     last of the ink is already gone before the element is switched off. A
     linear fade either greys the ribbons out too early or leaves them visible
     at the cut. */
  opacity: var(--hero-ink, 1);
  /* it sinks, and it stretches as it sinks */
  transform: translate3d(0, var(--hero-fall-y, 0px), 0)
             scale(var(--hero-sx, 1), var(--hero-sy, 1));
  /* deliberately NOT will-change: filter - WebKit promotes the element to
     its own layer and can then drop the filter altogether */
  will-change: opacity, transform;
}
/* the filter only exists while it is dissolving, so the type stays crisp
   at rest and the browser is not asked to run turbulence for nothing */
.hero--pinned h1.hero-dye.is-dissolving {
  /* the ink filter itself is set inline, one built step at a time */
  pointer-events: none;
}
/* the fallback, used only if the ink filter proved too slow for this browser:
   a plain blur, which every engine accelerates. It still sinks, stretches and
   fades - it just loses the filaments. */
.hero--pinned h1.hero-dye.is-lite {
  filter: blur(var(--hero-lite-blur, 0px));
}

.hero-sound { opacity: var(--hero-mute, 1); }

@media (prefers-reduced-motion: reduce) {
  .hero-pin {
    height: auto;
    --hero-progress: 0 !important;
    --hero-dye: 0 !important;
    --hero-black: 0 !important;
    --hero-lead: 1 !important;
    --hero-lead-y: 0px !important;
    --hero-mute: 1 !important;
    --hero-fall-y: 0px !important;
    --hero-sx: 1 !important;
    --hero-sy: 1 !important;
    --hero-ink: 1 !important;
    --hero-lite-blur: 0px !important;
  }
  .hero--pinned { position: static; height: auto; min-height: 100vh; min-height: 100svh; }
  .hero--film .hero-content { transform: none; }
  .hero--pinned .eyebrow,
  .hero--pinned .hero-sub,
  .hero--pinned .hero-actions,
  .hero--pinned h1.hero-dye { opacity: 1; transform: none; filter: none; }
}

/* ---------- brand lockup: mark + blackletter wordmark ---------- */
.brand { gap: 14px; }
.brand__wordmark { display: block; max-width: 100%; height: auto; }
@media (max-width: 900px) {
  .site-header .brand { gap: 10px; }
  .site-header .brand__wordmark { max-width: 34vw; }
}

/* ---------- footer signature ---------- */
.footer-signature {
  display: flex;
  justify-content: center;
  padding: 10px 0 34px;
}
.footer-signature .signature-img {
  height: auto;
  max-width: min(100%, 320px);
  opacity: 0.9;
}

/* ============================================
   CUSTOM SITE ADDITIONS
   ============================================ */

/* size buttons on the product page double as sold-out markers */
.size-row { display: flex; flex-wrap: wrap; gap: 10px; }
.size-btn {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid var(--charcoal-line);
  background: transparent;
  color: var(--white-dim);
  cursor: pointer;
  transition: all .2s ease;
}
.size-btn:hover { border-color: var(--gold); color: var(--gold); }
.size-btn.is-active { background: var(--gold); border-color: var(--gold); color: var(--black); }
.size-btn[disabled] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.product-note { font-size: .86rem; color: var(--white-dim); }
.detail-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.detail-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}
.detail-list li::before { content: "—"; color: var(--gold); }

/* lookbook / gallery strip */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.gallery-strip .media-fill { aspect-ratio: 4/5; }
.gallery-strip figure { margin: 0; }
.gallery-strip figcaption {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dim);
  padding-top: 10px;
}

/* editor link shown only on the local copy */
.edit-hint {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  padding: 9px 14px;
}

/* simple contact form on a static site */
.form-note { font-size: .86rem; color: var(--white-dim); margin-top: 16px; }

/* ============================================
   framed image plate
   A hairline gold rule with a second line set
   inside it — the way a plate is mounted in a
   catalogue, not a drop shadow. Only applied
   where there is a real photo; the dashed
   placeholder keeps its own look.
   ============================================ */
.split-media.media-fill {
  border: 1px solid rgba(var(--gold-rgb), 0.34);
  padding: 0;
  background: var(--black);
  box-shadow:
    0 0 0 1px rgba(var(--black-rgb), 0.9),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
.split-media.media-fill::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 640px) {
  .split-media.media-fill::after { inset: 8px; }
}

/* ============================================================
   2026-09 REFRESH
   Deeper blacks, warmer metal, a real grain layer, and a skin of
   its own for the collection page. Everything here is additive —
   it overrides by source order, so the original rules above stay
   intact and can be read as the baseline.
   ============================================================ */

:root {
  /* the ground, taken down a stop */
  --black-deep: #010101;
  --black: #060505;
  --black-rgb: 6, 5, 5;
  --charcoal: #141212;
  --charcoal-light: #201d1b;
  --charcoal-light: #262220;
  --charcoal-line: #34302c;

  /* metal with more range: a bright edge, a working mid, a dirty low */
  --gold: #c9a44a;
  --gold-rgb: 201, 164, 74;
  --gold-bright: #f0d489;
  --gold-dim: #7d6532;

  /* the red reads as oxblood now — closer to a rack than to a sale sticker */
  --cherry: #6e0f22;
  --cherry-rgb: 110, 15, 34;
  --cherry-bright: #96162f;

  /* one grain source, used by every surface that needs tooth */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  /* Fine grain: the noise tile is gamma-crushed, so most of it is
     transparent and only the peaks land. On a near-black ground that shows
     as texture without lifting the page. */
  --static: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='5' amplitude='1' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* The page background is the original one and stays that way — the
   filigree and the grain belong to the collection page alone. */

/* ============================================================
   THE COLLECTION PAGE
   Its own skin: no diagonals, no red wash. An ornate filigree
   ground, grimed over, fading out from the top.
   ============================================================ */
body.is-collection {
  background-color: var(--black-deep);
  background-image:
    radial-gradient(ellipse at 50% -6%, rgba(255,255,255,0.022), transparent 55%),
    linear-gradient(180deg, var(--black-deep), var(--black) 14%);
}
.page-header--collection {
  position: relative;
  overflow: hidden;
  padding: 190px 0 82px;
  background: none;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.22);
}

/* Three stacked layers, because they need to fade at different rates:
   the ground, the filigree, and the grain on top of both. */
.page-header--collection .page-header-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 46% at 50% 62%, rgba(var(--cherry-rgb),0.13), transparent 74%),
    radial-gradient(ellipse 70% 60% at 50% 58%, rgba(0,0,0,0.78), transparent 72%),
    radial-gradient(ellipse at 50% -18%, rgba(var(--gold-rgb),0.06), transparent 60%),
    var(--black-deep);
}
/* the filigree itself, held well back so the headline always wins */
.page-header--collection .page-header-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pattern-filigree.png") repeat;
  background-size: 620px 620px;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.62) 44%, rgba(0,0,0,0.22) 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.62) 44%, rgba(0,0,0,0.22) 74%, transparent 100%);
}
/* a second pass of grain over the pattern — this is the gym wall, not wallpaper */
.page-header--collection .page-header-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.20;
  mix-blend-mode: overlay;
}
.page-header--collection .wrap { position: relative; z-index: 2; }
.page-header--collection .eyebrow { justify-content: center; margin-bottom: 20px; }
.page-header--collection h1 { font-size: clamp(2.8rem, 6.4vw, 4.6rem); }

.page-header-intro {
  max-width: 54ch;
  margin: 22px auto 0;
  color: var(--white-dim);
  font-size: 1.02rem;
  line-height: 1.65;
}
.page-header .breadcrumb a { color: var(--white-dim); }
.page-header .breadcrumb a:hover { color: var(--gold); }

@media (max-width: 720px) {
  .page-header--collection { padding: 130px 0 60px; }
  .page-header--collection .page-header-pattern { background-size: auto, 420px 420px; }
}

/* ============================================================
   FINISH — cards, buttons, surfaces
   ============================================================ */

/* product cards get a frame and a little lift, so a grid of dark
   garments on a dark page still reads as a grid */
.product-media {
  background: linear-gradient(170deg, var(--charcoal-light), var(--charcoal) 70%);
  border: 1px solid var(--charcoal-line);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.product-media img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.product-card:hover .product-media {
  border-color: rgba(var(--gold-rgb), 0.45);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.product-card:hover .product-media img { transform: scale(1.035); }
.product-info h4 a { transition: color 0.25s ease; }
.product-card:hover .product-info h4 a { color: var(--gold); }
.badge {
  border: 1px solid rgba(0, 0, 0, 0.35);
  font-weight: 600;
  backdrop-filter: none;
}

/* buttons: a hairline that wipes to gold rather than a flat hover */
.btn {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, transform 0.25s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-dim));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-outline { border-color: rgba(var(--gold-rgb), 0.40); }
.btn-outline:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.08); color: var(--gold); }
.btn-cherry { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }
.btn-cherry:hover { background: var(--cherry-bright); transform: translateY(-1px); }

/* the filter chips read as hardware */
.chip {
  border: 1px solid var(--charcoal-line);
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.chip:hover { border-color: rgba(var(--gold-rgb), 0.5); color: var(--gold); }
.chip.active { border-color: var(--gold); color: var(--black); background: var(--gold); }

/* the framed plate picks up the new metal */
.split-media.media-fill { border-color: rgba(var(--gold-rgb), 0.30); }

/* empty product slot: a clean, quiet placeholder rather than a striped one */
.product-media.ph {
  background: linear-gradient(170deg, var(--charcoal-light), var(--charcoal) 70%);
  align-items: center;
  justify-content: center;
}
.product-media.ph span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* ============================================================
   THE COLLECTION PAGE — arrival

   Scrolling off the header takes the title with it, and the
   pieces come up from underneath as they reach the viewport.
   Both are opt-in from script, so with JavaScript off the page
   is simply there, fully readable, nothing hidden.
   ============================================================ */
.page-header--collection .wrap {
  will-change: opacity, transform;
}
.js-fade .page-header--collection .wrap {
  opacity: var(--head-fade, 1);
  transform: translateY(calc(var(--head-rise, 0) * -34px));
}

.js-rise .product-card {
  opacity: 0;
  transform: translateY(46px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.8, 0.2, 1),
    transform 0.75s cubic-bezier(0.22, 0.8, 0.2, 1);
  transition-delay: var(--rise-delay, 0s);
}
.js-rise .product-card.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-fade .page-header--collection .wrap { opacity: 1; transform: none; }
  .js-rise .product-card { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   THE COLLECTION PAGE — static

   Real film grain, not a still texture: a noise tile that jumps
   to a new offset a dozen times a second. Because the noise is
   uniform there is no figure to track, so the cycle reads as
   continuous static with no start and no end. It is a transform
   on a single composited layer, so it costs nothing to run.
   ============================================================ */
/* The static belongs to the run of products, and stops where they stop —
   it is a layer inside that section, not a sheet over the whole page. */
.collection-grid { position: relative; overflow: hidden; }
.collection-grid > .wrap { position: relative; z-index: 1; }

.section-static {
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  background-image: var(--static);
  background-size: 168px 168px;
  /* No blend mode: overlay and soft-light both collapse toward the base on a
     near-black ground, which is exactly where the texture has to show. */
  opacity: 0.40;
  will-change: transform;
  animation: hm-static 1.4s steps(1, end) infinite;
}

/* sixteen irregular offsets — regular ones would beat visibly */
@keyframes hm-static {
  0%     { transform: translate3d(0,       0,      0); }
  6.25%  { transform: translate3d(-7.3%,   3.1%,   0); }
  12.5%  { transform: translate3d( 4.6%,  -8.2%,   0); }
  18.75% { transform: translate3d(-2.1%,  -3.7%,   0); }
  25%    { transform: translate3d( 8.4%,   5.9%,   0); }
  31.25% { transform: translate3d(-5.8%,  -1.4%,   0); }
  37.5%  { transform: translate3d( 1.9%,   7.6%,   0); }
  43.75% { transform: translate3d(-8.7%,  -6.3%,   0); }
  50%    { transform: translate3d( 6.2%,  -2.8%,   0); }
  56.25% { transform: translate3d(-3.4%,   8.9%,   0); }
  62.5%  { transform: translate3d( 7.8%,   1.2%,   0); }
  68.75% { transform: translate3d(-1.6%,  -7.9%,   0); }
  75%    { transform: translate3d( 3.7%,   4.4%,   0); }
  81.25% { transform: translate3d(-6.9%,  -4.6%,   0); }
  87.5%  { transform: translate3d( 2.8%,  -5.1%,   0); }
  93.75% { transform: translate3d(-4.2%,   6.7%,   0); }
}

@media (prefers-reduced-motion: reduce) {
  .section-static { animation: none; }
}

/* ============================================================
   THE DEAL STRIPE

   `position: sticky` is the whole trick: the band scrolls with the
   page until it meets the menu, parks under it, and lets go again on
   the way back up — no scroll listener, no jump, and the browser does
   it on the compositor.
   ============================================================ */
.deal-stripe {
  position: sticky;
  top: var(--header-h, 92px);
  z-index: 90;
  display: block;
  overflow: hidden;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 11px 0;
  text-decoration: none;
  cursor: pointer;
}
.deal-stripe:hover { background: #060505; }
.deal-stripe:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

/* two identical runs end to end; sliding by exactly half the track
   lands the seam on a copy, so the loop has no visible start */
.deal-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: deal-roll var(--deal-speed, 38s) linear infinite;
}
.deal-run { display: flex; flex: none; }

@keyframes deal-roll {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.deal-stripe:hover .deal-track { animation-play-state: paused; }

.deal-item {
  flex: none;
  padding: 0 34px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
}
.deal-item em { font-style: normal; color: #d8232f; }

/* A hairline under the words on hover, so it reads as something you can
   press rather than a banner that happens to move. The rule sits on the
   text itself, not the padded link, so the line is the width of the
   sentence. */
.deal-text {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.deal-item:hover .deal-text,
.deal-item:focus-visible .deal-text { border-bottom-color: #fff; }
.deal-item:focus-visible { outline: none; }

@media (max-width: 720px) {
  .deal-item { font-size: 0.72rem; letter-spacing: 0.16em; padding: 0 22px; }
  .deal-stripe { padding: 9px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .deal-track { animation: none; transform: none; }
}

/* ============================================================
   THE COLLECTIONS INDEX
   ============================================================ */
.col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}
@media (max-width: 820px) { .col-grid { grid-template-columns: 1fr; } }

.col-card {
  position: relative;
  display: block;
  border: 1px solid var(--charcoal-line);
  background: linear-gradient(170deg, var(--charcoal-light), var(--charcoal) 70%);
  text-decoration: none;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.col-card:not(.is-soon):hover {
  border-color: rgba(var(--gold-rgb), 0.5);
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}
.col-card-media { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.col-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.col-card:not(.is-soon):hover .col-card-media img { transform: scale(1.04); }
.col-card-media.ph {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 26px),
    var(--charcoal);
}
.col-card-media.ph span {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-dim);
}

.col-card-body { padding: 30px 32px 34px; }
.col-card-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.col-card-body p { color: var(--white-dim); font-size: 0.94rem; max-width: 46ch; }
.col-card-cue {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.45);
  padding-bottom: 4px;
}

/* the one that isn't out yet: visible, legible, and not a dead link */
.col-card.is-soon { cursor: not-allowed; opacity: 0.55; }
.col-card.is-soon .col-card-cue { color: var(--white-dim); border-bottom-color: var(--charcoal-line); }
.col-card-flag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  background: var(--charcoal-light);
  border: 1px solid var(--charcoal-line);
  color: var(--white-dim);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
}

/* a filter with nothing behind it is shown, but not offered */
.chip.is-empty { opacity: 0.35; cursor: not-allowed; }
.chip.is-empty:hover { border-color: var(--charcoal-line); color: var(--text, var(--white-dim)); }

/* ============================================================
   COLOUR SWATCHES

   Under every product, including the ones that come in a single
   colour — there the square is a statement of fact rather than a
   control, so it is not focusable and does nothing when clicked.
   ============================================================ */
.swatches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 12px;
}
.swatch-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  opacity: 0.75;
}
.swatch-row { display: flex; gap: 7px; }

.swatch {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.22);
  background: var(--sw, #6b6762);
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.swatch:hover { border-color: rgba(255,255,255,0.55); transform: translateY(-1px); }
.swatch.active { box-shadow: 0 0 0 1px var(--black), 0 0 0 2px var(--gold); }
.swatch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* one colour: shown, but not offered as a choice */
.swatch[aria-hidden="true"] { cursor: default; }
.swatch[aria-hidden="true"]:hover { transform: none; border-color: rgba(255,255,255,0.22); }
.swatch[aria-hidden="true"].active { box-shadow: none; }

@media (max-width: 520px) {
  .swatch-label { font-size: 0.6rem; }
  .swatch { width: 14px; height: 14px; }
}

/* ============================================================
   2026-10 — OPTIONS AND THE HAND-OFF TO CHECKOUT
   ============================================================ */

/* Sizes read as a set, so they are laid out as one: equal columns,
   equal width, whatever is written inside them. */
.option-block + .option-block { margin-top: 26px; }
.option-block .qty-label { display: flex; align-items: baseline; gap: 10px; }
.opt-name {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--gold);
}

.size-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 10px;
}
.size-btn {
  width: 100%;
  padding: 13px 10px;
  text-align: center;
  white-space: nowrap;
}

/* the colour row on the product page, a size up from the cards */
.swatch-row--lg { gap: 10px; }
.swatch-row--lg .swatch { width: 30px; height: 30px; }

.buy-note {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white-dim);
  text-align: center;
}

/* the button takes the press */
.btn.js-buy { position: relative; overflow: hidden; }
.btn.js-buy.is-sending { pointer-events: none; }
.btn.js-buy.is-sending > span { opacity: .55; }
.btn.js-buy.is-sending::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .5) 50%, transparent 80%);
  animation: buy-sweep .62s ease-out;
}
@keyframes buy-sweep { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(100%, 0, 0); } }

/* the curtain the checkout arrives behind */
.checkout-veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(var(--cherry-rgb), .14), transparent 70%), var(--black-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s ease, visibility 0s linear .26s;
}
.checkout-veil.is-up {
  opacity: 1;
  visibility: visible;
  transition: opacity .26s ease, visibility 0s;
}
.veil-inner { display: grid; justify-items: center; gap: 20px; padding: 0 24px; }
.veil-mark {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--white);
  transform: translate3d(0, 8px, 0);
  opacity: 0;
}
.checkout-veil.is-up .veil-mark { animation: veil-rise .42s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes veil-rise { to { transform: translate3d(0, 0, 0); opacity: 1; } }

.veil-line { width: min(260px, 60vw); height: 1px; background: var(--charcoal-line); overflow: hidden; }
.veil-line i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); transform: scaleX(0); transform-origin: left; }
.checkout-veil.is-up .veil-line i { animation: veil-fill 1.1s cubic-bezier(.3, .8, .3, 1) forwards; }
@keyframes veil-fill { to { transform: scaleX(1); } }

.veil-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white-dim);
  opacity: 0;
}
.checkout-veil.is-up .veil-note { animation: veil-rise .42s .1s cubic-bezier(.2, .7, .2, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .checkout-veil { display: none; }
  .btn.js-buy.is-sending::after { animation: none; }
}

/* ============================================================
   2026-10 — FRONT AND BACK, AND SHOTS HELD IN PLACE
   ============================================================ */

/* The nudge that brings each photograph into line with the rest of its
   own set, written so the hover zoom multiplies it rather than fighting
   it. A shot with no entry gets 0 / 0 / 1 and is untouched. */
.product-media img,
.gallery-slide img {
  transform: scale(calc(var(--fs, 1) * var(--hs, 1))) translate3d(var(--fx, 0%), var(--fy, 0%), 0);
  transform-origin: 50% 50%;
}
.product-card:hover .product-media img { --hs: 1.035; }

/* front and back, crossfading in place */
.product-media .img-front { opacity: 1; }
.product-media .img-hover { opacity: 0; }
/* the back simply rises over the front, so there is no dip to the
   background between the two shots */
.product-card:hover .product-media .img-hover:not([hidden]) { opacity: 1; }
.product-media img[hidden] { display: none; }

/* A multipack is one thing you buy, so it gets one square, divided into
   the colours that come in it. */
.swatch-pack {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: default;
  background-color: transparent;
  background-size: cover;
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  position: relative;
}
.swatch-pack:hover { transform: none; }

/* ============================================================
   2026-10 — CONTACT IN THE FOOTER
   ============================================================ */

.contact-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--white-dim);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.2;
  transition: color 0.22s ease;
  word-break: break-word;
}
.contact-list a:hover,
.contact-list a:focus-visible { color: var(--gold); }

/* the mark keeps pace with the text it sits beside */
.ci {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--gold-dim);
  transition: color 0.22s ease, transform 0.22s ease;
}
.contact-list a:hover .ci,
.contact-list a:focus-visible .ci { color: var(--gold); transform: translateY(-1px); }

@media (max-width: 720px) {
  .contact-list { gap: 14px; }
  .contact-list a { font-size: 0.95rem; }
}

/* ============================================================
   2026-10 — THE HEADER STOPS COLLIDING

   Five nav items plus the gold button need about 700px of their
   own; the brand lockup wants another 200. Below roughly a
   thousand there is not enough room for both, and the first link
   was landing on top of the wordmark.

   So the menu folds into the burger at 1000px rather than 720,
   and the wordmark is allowed to shrink further before it does.
   These rules sit at the end of the file on purpose: several
   single-class .nav-links rules appear later in the stylesheet
   and would otherwise win on source order.
   ============================================================ */

@media (max-width: 1000px) {
  .section-header .nav-links,
  .site-header .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--black);
    border-bottom: 1px solid var(--charcoal-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .section-header .nav-links.open,
  .site-header .nav-links.open { max-height: 520px; }
  /* the anchors are inline by default, so vertical padding did nothing
     and every row collapsed to the height of its text */
  .section-header .nav-links li,
  .site-header .nav-links li { width: 100%; }
  .section-header .nav-links a,
  .site-header .nav-links a {
    display: block;
    width: 100%;
    padding: 17px 28px;
    border-bottom: 1px solid var(--charcoal-line);
  }
  .section-header .nav-links li:last-child a,
  .site-header .nav-links li:last-child a { border-bottom: 0; }
  .section-header .nav-links a::after,
  .site-header .nav-links a::after { display: none; }
  .nav-toggle { display: flex; }

  /* the lockup gets a little more room back once the links are gone */
  .site-header .brand__wordmark,
  .section-header .brand__wordmark { max-width: 44vw; }
}

/* The gold button is the last item in the menu list, so it travels
   into the burger with everything else — nothing to move. On a phone
   the lockup just gets the leftover width. */
@media (max-width: 620px) {
  .section-header .brand__wordmark,
  .site-header .brand__wordmark { max-width: 52vw; }
  .section-header .nav-links .nav-cta,
  .site-header .nav-links .nav-cta {
    border: 0;
    color: var(--gold) !important;
    background: transparent;
  }
}

/* ============================================================
   2026-10 — CONTACT PANEL ON THE CONTACT PAGE

   A two-column grid rather than a flex row: the first column is a
   fixed width, so every mark lands on the same vertical line, and
   the second column takes whatever the handle or address needs.
   A long email cannot nudge its icon out of the column.
   ============================================================ */

.contact-direct { margin-bottom: 34px; }
.contact-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-rows li { margin: 0; }
.contact-rows a {
  display: grid;
  grid-template-columns: 26px auto;
  justify-content: start;          /* columns pack left, so the text ends where it ends */
  align-items: center;
  gap: 14px;
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.3;
  transition: color 0.22s ease;
}
.contact-rows a > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;         /* a long address wraps rather than pushing the layout */
}
.contact-rows a:hover,
.contact-rows a:focus-visible { color: var(--gold); }
.contact-rows .ci {
  width: 21px;
  height: 21px;
  justify-self: center;
  color: var(--gold);
  transition: transform 0.22s ease;
}
.contact-rows a:hover .ci { transform: translateY(-1px) scale(1.05); }

@media (max-width: 620px) {
  .contact-rows a { font-size: 0.95rem; grid-template-columns: 24px auto; gap: 12px; }
}

/* ---------------------------------------------------------
   THE RESPONSE PROMISE

   Sits under the direct lines, a notch quieter than them: it is
   reassurance, not a thing to click. "Usually" is doing real work
   here — a shop that promises a reply in 1–2 days and takes four
   has broken a promise; one that usually replies in 1–2 days has
   had a busy week.
   --------------------------------------------------------- */
.contact-note {
  margin: 14px 0 0;
  color: var(--white-dim);
  font-size: .86rem;
  line-height: 1.5;
  letter-spacing: .01em;
}
.footer-contact .contact-note { margin-top: 16px; font-size: .82rem; }
.contact-direct .contact-note { margin-top: 16px; max-width: 46ch; }