/* ---------- Design tokens ---------- */
:root {
  --color-bg: #0a0a0b;
  --color-surface: #141416;
  --color-surface-alt: #19191c;
  --color-text: #f5f5f2;
  --color-text-muted: #9c9ca1;
  --color-border: #26262a;
  --color-accent: #ad8c1e;
  --color-accent-dark: #8a6f16;
  --radius: 6px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --max-width: 1140px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Archivo Black", "Anton", var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; color: var(--color-text-muted); }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-secondary:hover { background: var(--color-accent); color: #14110a; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}
.main-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.main-nav a {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a.active {
  border-bottom-color: var(--color-accent);
  color: var(--color-text);
}
.header-cta { margin-left: 8px; white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  display: flex;
  align-items: stretch;
  padding: 0 0 56px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.hero-photo {
  position: absolute;
  inset: 0;
  background: url("../images/hero-halftone.png") center 28%/cover;
  opacity: 0.55;
  mix-blend-mode: screen;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-bg) 4%, rgba(10, 10, 11, 0.6) 52%, rgba(10, 10, 11, 0.78) 100%);
}
.hero-stamp {
  position: absolute;
  z-index: 2;
  /* hero-inner now stretches to the full height of .hero (see .hero's
     align-items: stretch), so centering relative to hero-inner is the
     same as centering within the whole hero area. Tuned (via measuring
     both elements' rendered positions at 1600px) so the logo's top edge
     lines up with the headline's top edge -- since the headline's own
     height varies slightly by breakpoint (line-wrap differences), this
     is exact at that reference width and close at others, not a formula
     that's guaranteed pixel-identical everywhere. */
  top: calc(50% - 25.5px);
  transform: translateY(-50%);
  right: 72px;
}
.hero-stamp img { height: 299px; width: auto; filter: drop-shadow(2px 6px 10px rgba(0, 0, 0, 0.6)); }
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.hero-content {
  /* Centered on hero-inner's full-stretched height, then nudged down a
     bit past dead-center per feedback (previously top-aligned with
     .hero-stamp -- see git history for that formula). */
  position: absolute;
  top: calc(50% + 40px);
  transform: translateY(-50%);
  /* Absolute offsets resolve against hero-inner's padding edge, not its
     content edge -- 0/0 here would ignore .container's own 24px padding
     and widen this box by 24px on each side versus normal-flow content,
     which shifted the stat-bar (and its horizontal alignment with the
     logo) by exactly that much. Match the container's padding instead. */
  left: 24px;
  right: 24px;
}
.hero h1 {
  font-size: clamp(3.04rem, 8.55vw, 4.275rem);
  margin: 0 0 0.18em;
  /* Keeps clear of the absolutely-positioned .hero-stamp logo (anchored
     72px + ~179px wide from hero-inner's right edge, plus a buffer) --
     expressed relative to this container so the gap holds as hero-inner
     itself narrows below its 1080px cap, not just at the widest screens. */
  max-width: calc(100% - 260px);
}
.hero h1 .accent { color: var(--color-accent); }
.hero-meta-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.hero-copy { max-width: 460px; }
.hero-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.6em;
  color: #d4d4d8;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; margin-top: 72px; }

/* ---------- Stat bar ---------- */
.stat-bar { display: flex; gap: 28px; flex-wrap: wrap; }
.stat-bar .stat { text-align: right; }
.stat-bar .stat strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-text); }
.stat-bar .stat span { font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-muted); }

/* ---------- Section title ---------- */
.section-title {
  text-align: center;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--color-text);
  margin-bottom: 40px;
}

/* ---------- Platform cards ---------- */
.platforms { padding: 64px 0; background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.platform-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  background: var(--color-surface);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.platform-card:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.platform-card .platform-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin-bottom: 4px;
}
.platform-card .platform-handle { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 14px; }
.platform-card .platform-count { display: block; font-weight: 800; font-size: 1.5rem; color: var(--color-text); }
.platform-card .platform-count-label { display: block; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
.platform-card .platform-follow { display: inline-block; margin-top: 16px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-accent); }

/* ---------- Video feed sections ---------- */
.feed-section { padding: 64px 0; border-bottom: 1px solid var(--color-border); }
.feed-section:nth-child(even) { background: var(--color-surface-alt); }
.feed-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.feed-header h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: var(--color-text); }
.feed-header a { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-accent); white-space: nowrap; }
.video-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.video-tile {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-tile.ratio-wide { aspect-ratio: 16 / 9; }
.video-tile.ratio-tall { aspect-ratio: 9 / 16; width: 100%; max-width: 320px; margin: 0 auto; }
/* TikTok's embed script sets its own inline height on the iframe — fighting it
   with our aspect-ratio crop just clips the widget, so let this one size itself. */
.video-tile:has(.tiktok-embed) { aspect-ratio: auto; overflow: visible; }
.video-tile:has(.tiktok-embed) iframe { position: static; width: 100%; }
.video-tile iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.center-cta { text-align: center; margin-top: 36px; }

/* ---------- About ---------- */
.about { padding: 64px 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.about-inner { max-width: 700px; margin: 0 auto; text-align: center; }

/* ---------- Dual CTA ---------- */
.dual-cta { padding: 64px 0; }
.dual-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dual-cta-card {
  padding: 40px 28px;
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid var(--color-border);
}
.dual-cta-card.quote { background: var(--color-surface); }
.dual-cta-card.collab { background: var(--color-accent); border-color: var(--color-accent); }
.dual-cta-card.collab h3, .dual-cta-card.collab p { color: #fff; }
.dual-cta-card.collab p { color: rgba(255, 255, 255, 0.85); }
.dual-cta-card.collab .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.dual-cta-card.collab .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* ---------- Page header ---------- */
.page-header { padding: 56px 0 24px; text-align: center; }
.page-header h1 { color: var(--color-text); font-size: clamp(2rem, 5vw, 3rem); }
.page-header p { max-width: 560px; margin: 0 auto; }

/* ---------- Category sections (work page) ---------- */
.category-section { padding: 48px 0; border-bottom: 1px solid var(--color-border); }
.category-section:nth-child(even) { background: var(--color-surface-alt); }
.category-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.category-header h2 { margin: 0; color: var(--color-text); font-size: 1.4rem; }
.category-header a { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-accent); white-space: nowrap; }
.category-body { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: center; }
.category-body p { margin-bottom: 0; }
.category-body .video-tile { max-width: none; }

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-align: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--color-border);
}
.final-cta h2 { color: var(--color-text); }
.final-cta p { color: var(--color-text-muted); }

/* ---------- Forms ---------- */
.form-section { padding: 48px 0 80px; }
.lead-form { max-width: 560px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 32px; }
.form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-weight: 600; font-size: 0.85rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.form-row input,
.form-row select,
.form-row textarea {
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-row textarea { resize: vertical; min-height: 100px; }
.form-note { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 16px; text-align: center; }
.form-success {
  display: none;
  background: rgba(173, 140, 30, 0.12);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
}
.form-success.visible { display: block; }
.form-error {
  display: none;
  background: rgba(200, 60, 40, 0.12);
  border: 1px solid #c83c28;
  color: var(--color-text);
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
}
.form-error.visible { display: block; }
.form-error a { color: inherit; text-decoration: underline; }
.lead-form.submitted .form-fields { display: none; }

/* ---------- Media kit stats ---------- */
.mediakit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 40px; }
.mediakit-stat { text-align: center; padding: 28px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.mediakit-stat strong { display: block; font-family: var(--font-heading); font-size: 2.2rem; color: var(--color-text); }
.mediakit-stat span { font-size: 0.85rem; color: var(--color-text-muted); }
.niche-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 24px 0 8px; }
.niche-tag { background: var(--color-surface); border: 1px solid var(--color-border); padding: 8px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--color-text); }

/* ---------- Affiliate landing pages ---------- */
.lp-video { padding: 48px 0 0; }
.lp-products-intro { padding: 56px 0 8px; text-align: center; }
.lp-products-intro p { max-width: 640px; margin: 0 auto; }
.lp-more { padding: 56px 0; border-top: 1px solid var(--color-border); }
.product-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  margin: 48px 0;
}
.product-image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
.product-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.product-info h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.affiliate-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 16px 0 0;
  max-width: 420px;
}
.lp-disclaimer { padding: 32px 0 64px; border-top: 1px solid var(--color-border); }
.lp-disclaimer p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .product-card { grid-template-columns: 1fr; text-align: center; }
  .product-image { max-width: 260px; margin: 0 auto; }
  .affiliate-note { margin-left: auto; margin-right: auto; }
}

/* ---------- Gear hub (blog-style listing) ---------- */
.gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gear-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.gear-card:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.gear-card-thumb {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
.gear-card-body { padding: 22px 24px 26px; }
.gear-card-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.gear-card h2 { font-size: 1.25rem; margin: 0 0 10px; }
.gear-card p { font-size: 0.9rem; margin: 0 0 14px; }
.gear-card-link { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-accent); }
.gear-back-link { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-accent); margin-bottom: 20px; }

@media (max-width: 900px) {
  .gear-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: #000;
  color: #8f8f94;
  padding: 40px 0;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-logo-mark { height: 140px; width: auto; display: block; margin: 0 auto 32px; }
.footer-inner a:hover { color: #fff; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-copy { width: 100%; text-align: center; margin: 24px 0 0; font-size: 0.8rem; color: #55555a; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .platform-grid { grid-template-columns: 1fr; }
  .video-row { grid-template-columns: 1fr; }
  .dual-cta-grid { grid-template-columns: 1fr; }
  .mediakit-stats { grid-template-columns: 1fr; }
  .category-body { grid-template-columns: 1fr; }
  .footer-logo-mark { height: 90px; }
}

@media (max-width: 900px) {
  /* Desktop centers hero-inner's content vertically within the full hero
     height (see the base .hero/.hero-inner rules) -- keep mobile's
     original bottom-anchored, normal-flow stacking instead. */
  .hero { min-height: 560px; padding-bottom: 40px; align-items: flex-end; }
  .hero-content { position: static; transform: none; }
  .hero-meta-row { flex-direction: column; align-items: flex-start; }
  .hero-copy { max-width: none; }
  .hero-actions { justify-content: flex-start; margin-top: 0; }
  .stat-bar { justify-content: flex-start; }
  .stat-bar .stat { text-align: left; }
  .hero-stamp { position: static; display: flex; justify-content: flex-start; margin: 0 0 16px; transform: none; }
  .hero-stamp img { height: 194px; }
  /* The new headline is longer than the old "Fence / Cartel." wordmark --
     at the desktop clamp size it wraps to 5 lines here and buries the CTA
     buttons far down the page, so scale it back at this width. */
  .hero h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); max-width: none; }
}

@media (max-width: 720px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    flex-direction: column;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    display: none;
    gap: 16px;
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
}