/* ============================================================
   REIGNING CHOMP - homepage styles
   ============================================================ */

/* ---- Hero direction switching (data-hero on <html>) ---- */
.hero { display: none; }
.hero--2 { display: block; }                 /* default when no attribute (split hero locked in) */
[data-hero="1"] .hero--1 { display:block; }
[data-hero="1"] .hero--2, [data-hero="1"] .hero--3 { display:none; }
[data-hero="2"] .hero--2 { display:block; }
[data-hero="2"] .hero--1, [data-hero="2"] .hero--3 { display:none; }
[data-hero="3"] .hero--3 { display:block; }
[data-hero="3"] .hero--1, [data-hero="3"] .hero--2 { display:none; }

/* ===== Hero 1 - Full-bleed photo, overlaid type ===== */
.hero--1 .hero-media { position: relative; min-height: clamp(520px, 78vh, 760px); }
[data-crop="tall"] .hero--1 .hero-media { min-height: clamp(560px, 88vh, 860px); }
.hero--1 .ph { position:absolute; inset:0; place-items:start end; }
.hero--1 .ph .ph-label { margin: 26px 26px 0 0; max-width: 320px; }
.hero--1 .ph::after { inset: 22px; }
.hero--1 .scrim {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(26,26,46,0.15) 0%, rgba(26,26,46,0.05) 35%, rgba(26,26,46,0.78) 100%);
}
.hero--1 .hero-inner {
  position: relative; height: 100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height: inherit;
  padding-bottom: clamp(40px, 6vw, 76px);
}
.hero--1 .hero-copy { max-width: 720px; }
.hero--1 h1, .hero--3 h1 { color:#fff; }
.hero--1 h1 {
  font-size: clamp(44px, 8vw, 92px); font-weight: 900; line-height: 0.96;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero--1 .hero-sub { color: rgba(255,255,255,0.92); font-size: clamp(17px, 2.2vw, 22px); margin-top: 20px; max-width: 48ch; text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
.hero--1 .hero-cta { margin-top: 30px; display:flex; gap:14px; flex-wrap:wrap; }

/* ===== Hero 2 - Editorial split (type left, image right) ===== */
.hero--2 { background: var(--bg); }
.hero--2 .hero-grid { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,64px); align-items:center; padding-top: clamp(48px,6vw,88px); padding-bottom: clamp(48px,6vw,88px); }
.hero--2 h1 { font-size: clamp(40px, 6vw, 78px); font-weight:900; line-height:0.98; }
.hero--2 h1 .hl { color: var(--accent); }
.hero--2 .hero-sub { font-size: clamp(17px,2vw,21px); color: var(--ink-soft); margin-top: 22px; max-width: 42ch; }
.hero--2 .hero-cta { margin-top: 30px; display:flex; gap:14px; flex-wrap:wrap; }
.hero--2 .hero-art { aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-card); }
@media (min-width: 861px) {
  .hero--2 .hero-art { align-self:start; margin-top:43px; }
}
[data-crop="tall"] .hero--2 .hero-art { aspect-ratio: 3/4.4; }
.hero--2 .hero-art .ph { width:100%; height:100%; }
.hero--2 .hero-badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }

/* ===== Hero 3 - Oversized type, framed image band ===== */
.hero--3 { background: #0c0c0c; color:#fff; padding: clamp(40px,5vw,64px) 0 0; overflow:hidden; }
.hero--3 .hero-top { text-align:center; max-width: 1000px; margin:0 auto; }
.hero--3 h1 { font-size: clamp(46px, 10vw, 128px); font-weight:900; line-height:0.9; letter-spacing:-0.02em; }
.hero--3 h1 .hl { color: var(--gold); }
.hero--3 .hero-sub { color: rgba(255,255,255,0.78); font-size: clamp(17px,2vw,21px); margin: 22px auto 0; max-width: 52ch; }
.hero--3 .hero-cta { margin: 28px 0 40px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero--3 .hero-band { height: clamp(220px, 32vw, 360px); position:relative; }
[data-crop="tall"] .hero--3 .hero-band { height: clamp(300px, 42vw, 480px); }
.hero--3 .hero-band .ph { position:absolute; inset:0; }

/* ===== The Range - product cards ===== */
.range-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pcard {
  background: var(--card); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-card); display:flex; flex-direction:column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  border: 1px solid var(--card-line);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: rgba(201,162,74,0.4); }
.pcard .pcard-media { aspect-ratio: 4/5; position:relative; background: var(--char); container-type:inline-size; }
.pcard .pcard-media .ph { position:absolute; inset:0; }
.pcard .pcard-media .product-photo { position:absolute; inset:0; transition: transform .35s var(--ease); }
.pcard:hover .pcard-media .product-photo { transform: scale(1.04); }
.pcard .pcard-tag {
  position:absolute; top:14px; left:14px; z-index:2;
  background: var(--gold); color: #16120a;
  font-family: var(--font-display); font-weight:600; font-size:12.5px;
  padding:5px 11px; border-radius:999px;
}
/* Keep the taller Omega lid clear in compact cards without changing the crop. */
@container (max-width: 400px) {
  .pcard .pcard-tag { top:8px; left:8px; padding:3px 11px; line-height:1.2; }
  .pcard:hover .pcard-media .product-photo { transform:none; }
}
.pcard-body { padding: 22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.pcard h3 { font-size: 25px; }
.pcard .pcard-benefit { color: var(--ink-soft); margin-top:7px; font-size:15.5px; line-height:1.5; flex:1; }
.pcard .pcard-foot { display:flex; align-items:center; justify-content:space-between; margin-top:20px; gap:12px; }
.pcard .price { font-family: var(--font-display); font-weight:600; font-size:22px; color: var(--gold); }
.pcard .price small { font-size:13px; color:var(--ink-soft); font-weight:500; }
.pcard .btn { padding:11px 18px; font-size:15px; }

/* ===== Manifesto direction switching ===== */
.manifesto { display:none; }
.manifesto--a { display:block; }
[data-manifesto="a"] .manifesto--a { display:block; }
[data-manifesto="a"] .manifesto--b { display:none; }
[data-manifesto="b"] .manifesto--b { display:block; }
[data-manifesto="b"] .manifesto--a { display:none; }

/* Manifesto A - black brand moment with the logo */
.manifesto--a { background: #000; color:#fff; padding: clamp(64px,9vw,120px) 0; }
.manifesto--a .m-logo { width:clamp(280px,40vw,400px); height:auto; display:block; margin:0 auto 30px; }
.manifesto--a .m-inner { max-width: 880px; margin:0 auto; text-align:center; }
.manifesto--a .m-eyebrow { color: var(--accent); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; font-size:13px; }
.manifesto--a blockquote {
  margin: 22px 0 0; font-family: var(--font-display); font-weight:600;
  font-size: clamp(28px, 4.4vw, 50px); line-height:1.08; color:#fff;
}
.manifesto--a blockquote .hl { color: var(--accent); }
.manifesto--a .m-body { margin-top: 26px; color: rgba(255,255,255,0.74); font-size:18px; line-height:1.65; max-width: 60ch; margin-left:auto; margin-right:auto; }
.manifesto--a .m-sign { margin-top: 26px; font-family:var(--font-display); font-weight:500; color: var(--gold); font-size:16px; letter-spacing:0.02em; }

/* Manifesto B - split, the "Nonsense Filter" list */
.manifesto--b { background: #0c0c0c; color:#fff; }
.manifesto--b .m-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; padding-top: clamp(56px,8vw,104px); padding-bottom: clamp(56px,8vw,104px); }
.manifesto--b h2 { color:#fff; font-size: clamp(32px,5vw,58px); }
.manifesto--b h2 .hl { color: var(--accent); }
.manifesto--b .m-lead { margin-top:18px; color: rgba(255,255,255,0.74); font-size:18px; line-height:1.6; max-width:46ch; }
.manifesto--b .filter { list-style:none; padding:0; margin: 0; display:flex; flex-direction:column; gap:2px; }
.manifesto--b .filter li {
  display:flex; align-items:flex-start; gap:14px; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.1); font-size:18px;
}
.manifesto--b .filter li:last-child { border-bottom:none; }
.manifesto--b .filter .x { color: var(--accent); font-family:var(--font-display); font-weight:700; flex:none; }
.manifesto--b .filter b { font-family:var(--font-display); font-weight:600; }
.manifesto--b .filter span { color: rgba(255,255,255,0.6); display:block; font-size:15px; margin-top:2px; }

/* ===== Trust bar ===== */
.trust { background: var(--char); color: var(--bone); padding: clamp(40px,5vw,60px) 0; border-top:1px solid rgba(201,162,74,0.18); border-bottom:1px solid rgba(201,162,74,0.18); }
.trust-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.trust-item { text-align:center; padding: 8px; }
.trust-item .ti-ico { width:48px; height:48px; margin:0 auto 14px; border-radius:13px; background: rgba(201,162,74,0.12); display:grid; place-items:center; }
.trust-item .ti-ico svg { width:24px; height:24px; stroke: var(--gold); fill:none; stroke-width:2; }
.trust-item .ti-stat { font-family:var(--font-display); font-weight:700; font-size: clamp(22px,3vw,30px); color: var(--gold); line-height:1; }
.trust-item .ti-label { color: rgba(242,236,221,0.62); font-size:14px; margin-top:7px; }

/* ===== Social proof placeholder (no fake testimonials) ===== */
.proof { text-align:center; }
.proof .proof-card {
  max-width: 720px; margin: 0 auto; background: var(--card); border:1px dashed rgba(201,162,74,0.4);
  border-radius: var(--radius); padding: clamp(36px,5vw,56px);
}
.proof .stars { color: var(--gold); font-size: 22px; letter-spacing:3px; margin-bottom:16px; }
.proof .proof-card h3 { font-size: clamp(24px,3.4vw,34px); }
.proof .proof-card p { color: var(--ink-soft); margin-top:14px; font-size:17px; line-height:1.6; }
.proof .proof-note { margin-top:18px; font-family: ui-monospace,monospace; font-size:12px; color:rgba(201,162,74,0.6); text-transform:uppercase; letter-spacing:0.06em; }

/* ===== Email capture - Join the Pack ===== */
.pack { background: var(--accent); color: var(--accent-ink); }
[data-accent="golden"] .pack { color: var(--deep-navy); }
.pack-inner { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px,5vw,64px); align-items:center; padding-top: clamp(56px,7vw,92px); padding-bottom: clamp(56px,7vw,92px); }
.pack h2 { color: inherit; font-size: clamp(34px,5vw,60px); }
.pack p { margin-top:14px; font-size:18px; line-height:1.55; opacity:0.92; max-width:42ch; }
.pack-form { background: rgba(255,255,255,0.16); backdrop-filter: blur(4px); border-radius: var(--radius); padding: 26px; }
[data-accent="golden"] .pack-form { background: rgba(26,26,46,0.06); }
.pack-form label { font-family:var(--font-display); font-weight:600; font-size:15px; display:block; margin-bottom:10px; }
.pack-form .seg { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.pack-form .seg button {
  flex:1 1 30%; min-width: 80px; padding:11px 8px; border-radius:10px; cursor:pointer;
  border:2px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.18); color:inherit;
  font-family:var(--font-body); font-weight:600; font-size:14px; transition:.15s var(--ease);
}
[data-accent="golden"] .pack-form .seg button { border-color: rgba(26,26,46,0.2); background:rgba(255,255,255,0.4); }
.pack-form .seg button.active { background:#14110a; color: var(--gold); border-color:#14110a; }
.pack-form .row { display:flex; gap:8px; flex-wrap:wrap; }
.pack-form input {
  flex:1 1 180px; min-width:0; padding:14px 16px; border-radius:999px; border:none;
  font-family:var(--font-body); font-size:16px; color: #16120a; background:#fff;
}
.pack-form input:focus { outline: 3px solid rgba(255,255,255,0.6); }
.pack-form .btn--primary { background: #14110a; color: var(--gold); box-shadow:none; }
.pack-form .btn--primary:hover { background:#000; }
.pack-form .pack-privacy { font-size:13px; margin-top:14px; }
.pack-privacy a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.pack-done { display:none; text-align:center; font-family:var(--font-display); font-weight:600; font-size:20px; padding:20px 0; }
.pack-form.sent .seg, .pack-form.sent .row, .pack-form.sent label { display:none; }
.pack-form.sent .pack-done { display:block; }

/* ===== Badges (used in hero 2) ===== */
.badge { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--gold); background:rgba(201,162,74,0.1); padding:7px 13px; border-radius:999px; border:1px solid rgba(201,162,74,0.2); }
.badge .dot { width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .range-grid { grid-template-columns: 1fr; gap:20px; }
  .hero--2 .hero-grid { grid-template-columns: 1fr; }
  .hero--2 .hero-art { order:-1; aspect-ratio:1; }
  /* Keep both back-row heads and the front-row terrier inside the mobile crop. */
  .hero--2 .hero-art .hero-img { object-position:50% 20%; }
  .manifesto--b .m-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap:28px 16px; }
  .pack-inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pcard .pcard-foot { flex-direction:column; align-items:stretch; }
  .pcard .pcard-foot .btn { justify-content:center; }
}

/* ---- real hero photo ---- */
.hero-art .hero-img { width:100%; height:100%; object-fit:cover; display:block; }