/* Unstoppable Network — global stylesheet. Site-wide typography, palette and resets. */
/* horizontal-overflow guard: nothing may push the page wider than the viewport */
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, iframe { max-width: 100%; }
section { overflow-x: clip; }

:root {
  /* Display serif — headlines, editorial quotes (italic reserved for quotes/taglines) */
  --font-display: 'Playfair Display', serif;
  /* Sans — body copy, UI, CTAs, labels */
  --font-body: 'Figtree', sans-serif;
  /* Script — signatures only */
  --font-script: 'Allura', cursive;

  /* Brand palette — reference values. Change here when rebranding. */
  --c-brown: #A75A32;        /* primary CTA / link */
  --c-brown-dark: #8A4826;   /* link + CTA hover */
  --c-terracotta: #C97E4E;   /* accent on dark backgrounds */
  --c-terracotta-lt: #E09A6C;/* accent hover on dark */
  --c-gold: #D9A552;         /* highlights, rules */
  --c-cream: #F6F2EB;        /* default page background */
  --c-cream-warm: #F4F0E7;   /* alternate section background */
  --c-sand: #F2EDE3;         /* tinted panels */
  --c-ink: #1D1812;          /* headings on light */
  --c-body: #3B342B;         /* body copy on light */
  --c-muted: #5C554A;        /* secondary copy on light */
  --c-dark: #16130E;         /* dark sections */
  --c-dark-copy: #B7AFA2;    /* body copy on dark */
}

/* Site-wide resets — previously repeated in every page. */
body {
  margin: 0;
  font-family: var(--font-body);
  background: #F6F2EB;
  color: #3B342B;
}

h1, h2, h3, p { text-wrap: pretty; }

a { color: #A75A32; text-decoration: none; }
a:hover { color: #8A4826; }

/* Sticky header */
header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

/* Hero sections.
   Wide screens: image and copy share one grid cell, so the section is as tall as
   whichever is taller — the image never letterboxes and the CTA is never clipped.
   Below 1000px they stack: whole image on top, copy beneath it.
   The inline styles on each hero set grid placement, so these overrides need
   !important to win. */
@media (max-width: 1000px) {
  [data-hero]:not([data-hero-wide]) { grid-template-rows: 1fr !important; min-height: 78vh; }
  [data-hero]:not([data-hero-wide]) [data-hero-img] {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  [data-hero]:not([data-hero-wide]) [data-hero-copy] {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: end !important;
    justify-self: stretch !important;
    max-width: none !important;
    z-index: 1;
  }
  [data-hero]:not([data-hero-wide]) > span[style*="linear-gradient"] {
    background: linear-gradient(180deg, rgba(18,16,12,0) 0%, rgba(18,16,12,0.55) 38%, rgba(18,16,12,0.88) 72%, rgba(18,16,12,0.96) 100%) !important;
  }
}

@media (max-width: 1000px) {
  [data-hero-wide] { grid-template-rows: auto auto !important; }
  [data-hero-wide] [data-hero-img] { grid-row: 1 !important; grid-column: 1 !important; align-self: start !important; }
  [data-hero-wide] [data-hero-copy] { grid-row: 2 !important; grid-column: 1 !important; align-self: start !important; max-width: 100% !important; z-index: 1; }
  [data-hero-wide] > span[style*="linear-gradient"] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Phones: never crop a banner. Every hero stacks image (natural ratio) above copy. */
@media (max-width: 700px) {
  [data-hero], [data-hero]:not([data-hero-wide]) {
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
  }
  [data-hero] [data-hero-img],
  [data-hero]:not([data-hero-wide]) [data-hero-img] {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: start !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  [data-hero] [data-hero-copy],
  [data-hero]:not([data-hero-wide]) [data-hero-copy] {
    grid-row: 2 !important;
    grid-column: 1 !important;
    position: static !important;
    align-self: start !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    z-index: 1;
  }
  [data-hero] > span[style*="linear-gradient"] { display: none !important; }
}

/* Phones: image is 100% visible and uncropped, followed cleanly by hero copy without overlapping or cutting the banner */
@media (max-width: 700px) {
  [data-hero]:not([data-hero-wide]) [data-hero-copy],
  [data-hero-wide] [data-hero-copy] {
    margin-top: 0 !important;
    background-image: none !important;
    border-radius: 0 !important;
    padding: clamp(28px, 6vw, 40px) 24px 32px !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: left !important;
  }
  /* CTAs: full width, stacked, comfortably tappable */
  [data-hero-copy] a[style*="padding"],
  [data-hero-copy] button[style*="padding"] {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    justify-content: center !important;
  }
  [data-hero-copy] > div[style*="display:flex"]:has(> a[style*="padding"]) { gap: 12px !important; }
}