/* OutGear - editorial outdoor brand. Square corners only. Anton/DM Sans/JetBrains Mono. */

/* === Reset & tokens ====================================================== */
:root {
  --paper:   #EDE4D2;
  --bone:    #F4EEDD;
  --cream:   #F8F3E4;
  --ink:     #1A1C1B;
  --coal:    #262A28;
  --forest:  #1E2E2A;
  --forestD: #142220;
  --rust:    #A8451E;
  --olive:   #4A5238;
  --fog:     #8E8775;
  --line:    rgba(26, 28, 27, 0.18);

  --font-display: "Anton", "Oswald", Impact, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --pad-x: 56px;
  --pad-x-sm: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, textarea, select { font: inherit; }
::selection { background: var(--rust); color: var(--bone); }

/* === Typography ============================================================ */
.display    { font-family: var(--font-display); letter-spacing: 0.005em; line-height: 0.94; text-transform: uppercase; }
.body       { font-family: var(--font-body); }
.mono       { font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.mono-tight { font-family: var(--font-mono); letter-spacing: 0.04em; }
.cyan, .rust { color: var(--rust); }
.muted     { color: var(--fog); }

/* === Top utility bar ====================================================== */
.utilbar {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px var(--pad-x);
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  gap: 16px;
}
.utilbar > span:nth-child(2) { text-align: center; }
.utilbar > span:nth-child(3) { text-align: right; }

/* === Nav =================================================================== */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--pad-x);
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav--dark { color: var(--bone); background: var(--forest); border-bottom-color: rgba(244, 238, 221, 0.15); }
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: uppercase;
}
.nav__links {
  display: flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.nav__links a { transition: color 120ms ease, opacity 120ms ease; }
.nav__links a:hover { color: var(--rust); opacity: 1; }
.nav__right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.nav__cart {
  padding: 6px 12px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__cart-icon { width: 14px; height: 14px; }

/* === Buttons =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
  white-space: nowrap;
}
.btn--primary  { background: var(--ink); color: var(--bone); }
.btn--primary:hover  { background: var(--forest); }
.btn--rust     { background: var(--rust); color: var(--bone); }
.btn--rust:hover     { opacity: 0.92; }
.btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--bone); }
.btn--on-dark  { background: var(--bone); color: var(--ink); }
.btn--on-dark:hover  { background: var(--cream); }
.btn--ghost-dark { background: transparent; color: var(--bone); border: 1px solid var(--bone); }
.btn--ghost-dark:hover { background: var(--bone); color: var(--ink); }
.btn--lg { padding: 16px 26px; font-size: 13px; }

/* === Section primitives =================================================== */
.section { padding: 88px var(--pad-x); }
.section--sm   { padding: 56px var(--pad-x); }
.section--md   { padding: 72px var(--pad-x); }
.section--lg   { padding: 112px var(--pad-x); }
.section--paper  { background: var(--paper); }
.section--bone   { background: var(--bone); }
.section--cream  { background: var(--cream); }
.section--ink    { background: var(--ink);   color: var(--bone); }
.section--forest { background: var(--forest); color: var(--bone); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coal);
  opacity: 0.6;
}
.eyebrow--rust { color: var(--rust); opacity: 1; }
.eyebrow--fog { color: var(--fog); opacity: 1; }
.eyebrow--on-dark { color: var(--bone); opacity: 0.7; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 32px;
  flex-wrap: wrap;
}

/* === Photo placeholder (production: replace with <img>) =================== */
.photo {
  position: relative;
  background: var(--bone);
  overflow: hidden;
  border: 1px solid var(--line);
  display: block;
}
.photo--dark { background: var(--forestD); border: 0; }
.photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
}
.photo--dark .photo__cap { color: var(--bone); opacity: 0.55; }
.photo__cap-label { font-size: 9px; letter-spacing: 0.18em; opacity: 0.6; }
.photo__stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 8px,
    rgba(26, 28, 27, 0.12) 8px,
    rgba(26, 28, 27, 0.12) 9px,
    transparent 9px,
    transparent 17px
  );
}
.photo--dark .photo__stripes {
  background: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 8px,
    rgba(244, 238, 221, 0.12) 8px,
    rgba(244, 238, 221, 0.12) 9px,
    transparent 9px,
    transparent 17px
  );
}
.photo:has(.photo__img[src]:not([src=""])) .photo__stripes,
.photo:has(.photo__img[src]:not([src=""])) .photo__cap { display: none; }

/* === Footer ================================================================ */
.footer {
  background: var(--ink);
  color: var(--bone);
  padding: 56px var(--pad-x) 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  border-bottom: 1px solid rgba(244, 238, 221, 0.18);
  padding-bottom: 36px;
}
.footer__brand-block { display: flex; flex-direction: column; gap: 18px; max-width: 320px; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand-name {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.footer__brand-tag {
  font-family: var(--font-body);
  font-size: 14px;
  opacity: 0.7;
  line-height: 1.55;
}
.footer__brand-est {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.55;
  text-transform: uppercase;
}
.footer__col-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 16px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col li {
  font-family: var(--font-body);
  font-size: 14px;
  transition: color 120ms ease;
}
.footer__col li:hover, .footer__col li a:hover { color: var(--rust); }
.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
  gap: 16px;
}
.footer__legal a:hover { color: var(--rust); opacity: 1; }

/* === Breadcrumb ============================================================ */
.breadcrumb {
  padding: 18px var(--pad-x);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fog);
  border-bottom: 1px solid var(--line);
}
.breadcrumb__current { color: var(--ink); }
.breadcrumb a:hover { color: var(--rust); }

/* === Hero (homepage) ====================================================== */
.hero {
  position: relative;
  height: 780px;
  overflow: hidden;
}
.hero__content {
  position: absolute;
  inset: 0;
  padding: var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}
.hero__top {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 148px);
  color: var(--bone);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 238, 221, 0.35);
  gap: 32px;
  flex-wrap: wrap;
}
.hero__body {
  font-size: 18px;
  color: var(--bone);
  max-width: 520px;
  line-height: 1.55;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* === Category cards (homepage) ============================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cat-card {
  background: var(--bone);
  border: 1px solid var(--line);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
}
.cat-card .photo { height: 300px; }
.cat-card__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fog);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 18px;
}
.cat-card__h {
  font-family: var(--font-display);
  font-size: 32px;
  margin-top: 8px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.cat-card__b {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--coal);
  margin-top: 12px;
  line-height: 1.55;
}
.cat-card__items {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fog);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cat-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rust);
  margin-top: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* === Field log spread ===================================================== */
.fieldlog {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.fieldlog .photo { height: 520px; }

/* === Featured product spotlight =========================================== */
.spotlight {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: stretch;
}
.spotlight .photo { height: 580px; }
.spotlight__card {
  background: var(--forest);
  color: var(--bone);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.spotlight__h {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 78px);
  margin-top: 18px;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.spotlight__body { font-size: 16px; opacity: 0.85; margin-top: 22px; line-height: 1.6; max-width: 380px; }
.spotlight__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.85;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 238, 221, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.spotlight__specs span.k { opacity: 0.6; }
.spotlight__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
.spotlight__price {
  font-family: var(--font-display);
  font-size: 44px;
  text-transform: uppercase;
}

/* === Numbers strip ======================================================== */
.numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  margin-top: 80px;
}
.numbers__n {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.numbers__l {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fog);
  margin-top: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.numbers--on-dark .numbers__n { color: var(--bone); }
.numbers--on-dark .numbers__l { color: rgba(244, 238, 221, 0.7); }

/* === PDP hero ============================================================== */
.pdp-hero {
  padding: 40px var(--pad-x) 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
}
.pdp-hero__gallery .photo { height: 640px; }
.pdp-hero__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.pdp-hero__thumbs .photo { height: 130px; cursor: pointer; }
.pdp-hero__thumbs .photo--active { outline: 2px solid var(--ink); outline-offset: -2px; }

.pdp-hero__buy { display: flex; flex-direction: column; }
.pdp-hero__sku {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pdp-hero__name {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 60px);
  color: var(--ink);
  margin-top: 14px;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.pdp-hero__tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fog);
  margin-top: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pdp-hero__price-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.pdp-hero__price {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--rust);
  text-transform: uppercase;
}
.pdp-hero__price-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fog);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pdp-hero__body {
  font-size: 16px;
  color: var(--coal);
  margin-top: 22px;
  line-height: 1.6;
}
.pdp-hero__qty-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fog);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pdp-hero__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  width: fit-content;
}
.pdp-hero__qty button {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 14px;
  border-right: 1px solid var(--ink);
}
.pdp-hero__qty button:last-child { border-right: 0; border-left: 1px solid var(--ink); }
.pdp-hero__qty button:hover { background: var(--ink); color: var(--bone); }
.pdp-hero__qty-val {
  padding: 12px 22px;
  font-family: var(--font-mono);
  font-size: 14px;
  min-width: 56px;
  text-align: center;
}
.pdp-hero__add-row { display: flex; gap: 10px; margin-top: 22px; }
.pdp-hero__add-row .btn { flex: 1; }
.pdp-hero__save { padding: 16px 18px; border: 1px solid var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }

.pdp-hero__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.pdp-trust-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bone);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pdp-trust-card__k {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--rust);
  text-transform: uppercase;
}
.pdp-trust-card__v {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--coal);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pdp-hero__quickspecs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--coal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pdp-hero__quickspecs span.k { color: var(--fog); }

/* === Features grid (PDP) =================================================== */
.features-h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  margin-top: 8px;
  margin-bottom: 32px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
}
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature .photo { height: 240px; }
.feature__n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fog);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 18px;
}
.feature__h {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.feature__b { font-size: 14px; color: var(--coal); margin-top: 12px; line-height: 1.6; }
.feature__stats {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rust);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* === Full specs + in-the-box ============================================= */
.specs-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
.specs-h {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  margin-top: 8px;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
}
.specs-table { font-family: var(--font-mono); font-size: 13px; color: var(--coal); text-transform: uppercase; letter-spacing: 0.04em; }
.specs-table__row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.specs-table__row span:first-child { color: var(--fog); }
.intheb {
  background: var(--bone);
  border: 1px solid var(--line);
  padding: 8px 22px;
}
.intheb__row {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--coal);
  font-size: 15px;
}
.intheb__row:first-child { border-top: 0; }
.intheb__n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rust);
  letter-spacing: 0.18em;
}
.warranty-card {
  background: var(--forest);
  color: var(--bone);
  padding: 24px 22px;
  margin-top: 18px;
}
.warranty-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.warranty-card__h {
  font-family: var(--font-display);
  font-size: 32px;
  margin-top: 10px;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.warranty-card__b {
  font-size: 13px;
  margin-top: 12px;
  opacity: 0.85;
  line-height: 1.5;
}

/* === Refund strip ========================================================= */
.refund-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.refund-strip__h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  margin-top: 12px;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.refund-strip__body { font-size: 15px; opacity: 0.9; line-height: 1.65; max-width: 340px; }
.refund-strip__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.refund-strip__list > div {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(244, 238, 221, 0.25);
  gap: 16px;
}
.refund-strip__list > div:last-child { border-bottom: 0; }
.refund-strip__k { opacity: 0.7; }

/* === FAQ =================================================================== */
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: flex-start; }
.faq-grid__h {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 72px);
  margin-top: 10px;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.faq-grid__body { font-size: 15px; color: var(--coal); margin-top: 18px; line-height: 1.6; max-width: 380px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq-item:first-child { border-top: 1px solid var(--ink); }
.faq-item__summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__q {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.1;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.faq-item__indicator {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--rust);
  transition: transform 120ms ease;
  flex: 0 0 auto;
}
.faq-item[open] .faq-item__indicator { transform: rotate(45deg); }
.faq-item__a { font-size: 15px; color: var(--coal); margin-top: 12px; line-height: 1.65; max-width: 680px; }

/* === Related products ===================================================== */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card .photo { height: 300px; }
.related-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 14px;
  gap: 12px;
}
.related-card__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fog);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.related-card__name {
  font-family: var(--font-display);
  font-size: 28px;
  margin-top: 6px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.related-card__tag {
  font-size: 13px;
  color: var(--coal);
  margin-top: 6px;
  line-height: 1.45;
}
.related-card__price {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--rust);
  text-transform: uppercase;
}

/* === About / Contact / Field Log specific ================================= */
.about-hero {
  padding: 88px var(--pad-x);
  background: var(--paper);
}
.about-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.about-hero__body {
  font-size: 18px;
  margin-top: 24px;
  max-width: 720px;
  color: var(--coal);
  line-height: 1.6;
}

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value-card { background: var(--bone); border: 1px solid var(--line); padding: 32px; }
.value-card__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.value-card__h {
  font-family: var(--font-display);
  font-size: 32px;
  margin-top: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.value-card__b { font-size: 15px; color: var(--coal); margin-top: 14px; line-height: 1.6; }

.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--bone);
}

.contact-form {
  background: var(--bone);
  border: 1px solid var(--line);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  outline: none;
  color: var(--ink);
  font-family: var(--font-body);
}
.contact-form__textarea { min-height: 140px; resize: vertical; }
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus { border-color: var(--ink); }
.contact-form__success {
  display: none;
  color: var(--forest);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.contact-form.is-sent .contact-form__success { display: block; }

/* === Policy / legal pages ================================================= */
.policy-hero {
  padding: 80px var(--pad-x) 56px;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.policy-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
}
.policy-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 128px);
  margin-top: 18px;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.policy-hero__updated {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  margin-top: 18px;
}
.policy-page {
  background: var(--bone);
  color: var(--ink);
  padding: 72px var(--pad-x) 96px;
}
.policy-shell {
  max-width: 880px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 56px 64px;
}
.policy-shell h2 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
  margin: 36px 0 12px;
}
.policy-shell h2:first-child { margin-top: 0; }
.policy-shell h3 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 24px 0 8px;
  color: var(--ink);
}
.policy-shell p,
.policy-shell li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--coal);
  margin: 0 0 12px;
}
.policy-shell ul,
.policy-shell ol { padding-left: 22px; margin: 8px 0 16px; }
.policy-shell ul { list-style: disc; }
.policy-shell ol { list-style: decimal; }
.policy-shell li { margin-bottom: 6px; }
.policy-shell li::marker { color: var(--rust); }
.policy-shell strong { color: var(--ink); font-weight: 600; }
.policy-shell a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rust);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
.policy-shell a:hover { color: var(--rust); }
.policy-shell table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.policy-shell th,
.policy-shell td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.policy-shell th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}
.policy-shell .payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 20px;
}
.policy-shell .payment-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 8px 14px;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--line);
}
@media (max-width: 768px) {
  .policy-hero { padding: 40px var(--pad-x) 32px; }
  .policy-page { padding: 40px var(--pad-x) 64px; }
  .policy-shell { padding: 28px 20px; }
  .policy-shell h2 { font-size: 22px; }
}

/* === Responsive ============================================================ */
@media (max-width: 1280px) {
  :root { --pad-x: 40px; }
  .hero { height: 640px; }
  .cat-grid, .features, .related-grid, .values { grid-template-columns: 1fr 1fr; }
  .pdp-hero { grid-template-columns: 1fr; gap: 48px; }
  .pdp-hero__gallery .photo { height: 480px; }
  .specs-grid, .fieldlog, .spotlight, .refund-strip, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .spotlight .photo { height: 400px; }
  .fieldlog .photo { height: 400px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .utilbar > span:nth-child(2) { display: none; }
}

@media (max-width: 768px) {
  :root { --pad-x: 20px; }
  .nav { padding: 14px var(--pad-x); flex-wrap: nowrap; gap: 12px; }
  .nav__links { display: none; }
  .nav__right { gap: 10px; font-size: 10px; }
  .nav__brand { gap: 8px; }
  .nav__wordmark { font-size: 19px; }
  .hero { height: 580px; }
  .hero__content { padding: var(--pad-x); }
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1; justify-content: center; }
  .cat-grid, .features, .related-grid, .values, .numbers { grid-template-columns: 1fr; }
  .numbers { gap: 28px; }
  .pdp-hero__buy { padding: 0; }
  .pdp-hero__thumbs { grid-template-columns: repeat(4, 1fr); }
  .pdp-hero__thumbs .photo { height: 70px; }
  .section, .section--lg, .section--md, .section--sm { padding-top: 56px; padding-bottom: 56px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .utilbar { font-size: 9.5px; letter-spacing: 0.1em; padding: 7px var(--pad-x); gap: 8px; }
  .utilbar > span:nth-child(2), .utilbar > span:nth-child(3) { display: none; }
  .pdp-hero__trust { grid-template-columns: 1fr; }
  .pdp-hero__quickspecs { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
  .contact-pill { font-size: 11px; padding: 12px 16px; }
  .specs-table { font-size: 12px; }
}