/* ============================================================
   LIFTMEDIA — style.css
   ------------------------------------------------------------
   HOW THIS FILE IS ORGANISED
   1. Design tokens   — change colors / spacing / fonts here
   2. Reset & base
   3. Layout helpers  — .container, .section
   4. Header & nav
   5. Buttons
   6. Hero (dark)
   7. Hexagon stats
   8. Audience split cards
   9. Advantage grid
   10. Proof block
   11. Featured location band (dark)
   12. Steps (how it works)
   13. Comparison table
   14. Checklist / feature lists
   15. FAQ
   16. Closing CTA band (dark)
   17. Footer
   18. Page-specific small heroes
   19. Contact page
   20. Responsive (one place, at the bottom)

   All selectors are single flat classes (no nesting wars),
   so overriding anything by hand is safe and predictable.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS — the knobs you'll actually want to turn
   ============================================================ */
:root {
  /* --- Brand colors (from the 2026 offer PDFs) --- */
  --navy:        #16304f;   /* deep navy — hero & dark bands   */
  --navy-soft:   #1d3d63;   /* slightly lighter navy, cards on dark */
  --orange:      #f36f21;   /* brand orange — accents & CTAs   */
  --orange-dark: #d95c12;   /* hover state for orange          */
  --ink:         #1e2430;   /* body text on light backgrounds  */
  --ink-soft:    #5a6474;   /* secondary text                  */
  --paper:       #ffffff;   /* light section background        */
  --paper-alt:   #f4f6f9;   /* alternate light section         */
  --line:        #e3e8ee;   /* subtle borders on light         */
  --on-dark:     #ffffff;   /* text on navy                    */
  --on-dark-soft:#b9c6d6;   /* secondary text on navy          */

  /* --- Type --- */
  --font-display: "Poppins", "Segoe UI", sans-serif;        /* headings */
  --font-body:    "Inter", "Segoe UI", sans-serif;          /* body     */
  --font-logo:    "Space Grotesk", "Poppins", sans-serif;   /* navbar wordmark */

  /* Font sizes: tweak the base and everything scales sensibly */
  --fs-hero:    clamp(2.2rem, 5vw, 3.4rem);
  --fs-h2:      clamp(1.6rem, 3vw, 2.1rem);
  --fs-h3:      1.15rem;
  --fs-body:    1rem;
  --fs-small:   0.85rem;
  --fs-eyebrow: 0.78rem;

  /* --- Spacing scale --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Vertical padding of every big section — the main rhythm knob */
  --section-pad: 4.5rem;

  /* --- Layout --- */
  --container-max: 1080px;  /* page width */
  --radius: 10px;           /* default rounding on cards etc. */

  /* --- Effects --- */
  --shadow: 0 6px 24px rgba(22, 48, 79, 0.10);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.2;
}

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

a {
  color: var(--orange);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}


/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Every big horizontal band on the page is a .section.
   Light by default; add .section--alt or .section--dark. */
.section {
  padding: var(--section-pad) 0;
}

.section--alt {
  background: var(--paper-alt);
}

.section--dark {
  background: var(--navy);
  color: var(--on-dark);
}

/* Small orange all-caps label above headings (like the PDFs) */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--space-2);
}

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-3);
}

/* Narrower intro paragraph under section titles */
.section-intro {
  max-width: 640px;
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}

.section--dark .section-intro {
  color: var(--on-dark-soft);
}


/* ============================================================
   4. HEADER & NAV
   ============================================================ */
.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* Wordmark: LIFT in white, MEDIA in orange */
.logo {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--on-dark);
  text-decoration: none;
}

.logo span {
  color: var(--orange);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.main-nav a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.main-nav a:hover,
.main-nav a.is-active {
  color: var(--on-dark);
}

/* Language toggle placeholder (wire up when NL version exists) */
.lang-toggle {
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  /* Hover changes color/glow only — no movement, so the button
     never shifts out from under the cursor (no wobble). */
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, box-shadow 0.2s ease;
}

.btn--primary {
  background: var(--orange);
  color: #fff;
}

.btn--primary:hover {
  background: var(--orange-dark);
  box-shadow: 0 4px 16px rgba(243, 111, 33, 0.35);
}

/* Outline button for use on dark backgrounds */
.btn--ghost {
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: var(--on-dark);
}

.btn--ghost:hover {
  border-color: var(--on-dark);
  background: rgba(255, 255, 255, 0.08);
}

/* Outline button for use on light backgrounds */
.btn--outline {
  border: 2px solid var(--navy);
  color: var(--navy);
}

.btn--outline:hover {
  background: var(--navy);
  color: #fff;
}


/* ============================================================
   6. HERO (dark, home page)
   ============================================================ */
.hero {
  background: var(--navy);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
  padding: calc(var(--section-pad) + 1rem) 0 var(--section-pad);
}

/* Honeycomb lattice (offset rows, small gaps between cells) on a
   pseudo-element with a gradient mask:
   visible in the upper-right, dissolving toward the text.
   To move the visible region, change the "circle at 85% 15%"
   coordinates (x% y% of the hero area). To make the pattern
   stronger/weaker, adjust stroke-opacity inside the SVG url. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='168' viewBox='0 0 48 84'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.5'%3E%3Cpath d='M24 2 46 15v26L24 54 2 41V15Z'/%3E%3Cpath d='M0 44 22 57v26L0 96l-22-13V57Z'/%3E%3Cpath d='M48 44 70 57v26L48 96 26 83V57Z'/%3E%3Cpath d='M0-40 22-27v26L0 12l-22-13v-26Z'/%3E%3Cpath d='M48-40 70-27v26L48 12 26-1v-26Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(circle at 85% 15%, black 0%, transparent 65%);
  mask-image: radial-gradient(circle at 85% 15%, black 0%, transparent 65%);
}

/* keep hero content above the pattern layer */
.hero .container {
  position: relative;
  z-index: 1;
}

.hero-inner {
  max-width: 680px;
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.hero-title em {
  font-style: normal;
  color: var(--orange);
}

.hero-text {
  font-size: 1.1rem;
  color: var(--on-dark-soft);
  margin-bottom: var(--space-4);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}


/* ============================================================
   7. HEXAGON STATS (the signature element)
   ============================================================ */
.hex-stats {
  /* still on navy, directly under the hero copy */
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--space-5);
}

.hex {
  /* pointy-top hexagon via clip-path */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  width: 200px;
  height: 224px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-3);
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover: grow slightly and brighten — scale instead of movement,
   so the hexagon never slides out from under the cursor. */
.hex-stat-item:hover .hex {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Idle animation: each hexagon drifts up and down very slowly,
   staggered so the three never move in sync. Tune the distance
   in the keyframes and the speed in --hex-float-time. */
.hex-stat-item {
  animation: hex-float var(--hex-float-time, 6s) ease-in-out infinite;
}

.hex-stat-item:nth-child(2) { animation-delay: -2s; }
.hex-stat-item:nth-child(3) { animation-delay: -4s; }

@keyframes hex-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.hex--orange { background: var(--orange); color: #fff; }
.hex--navy   { background: var(--navy-soft); color: var(--on-dark); }
.hex--slate  { background: #46536a; color: var(--on-dark); }

.hex-number {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
}

.hex-label {
  font-size: var(--fs-small);
  line-height: 1.4;
  opacity: 0.9;
}

/* small grey comparison line under each hexagon */
.hex-note {
  width: 200px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
  margin-top: var(--space-1);
}

.hex-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ============================================================
   8. AUDIENCE SPLIT CARDS (I advertise / I manage a building)
   ============================================================ */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.split-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.split-card h3 {
  font-size: 1.3rem;
}

.split-card p {
  color: var(--ink-soft);
  flex-grow: 1;
}


/* ============================================================
   9. ADVANTAGE GRID (the five strong advantages)
   ============================================================ */
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.advantage {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

/* small orange hexagon bullet with a number in it */
.advantage-num {
  flex-shrink: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--orange);
  color: #fff;
  width: 38px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
}

.advantage h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.3rem;
}

.advantage p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}


/* ============================================================
   10. PROOF BLOCK (sourced research numbers)
   ============================================================ */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.proof-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.proof-number {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--navy);
}

.proof-item p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* superscript footnote marks */
.fn {
  color: var(--orange);
  font-size: 0.7em;
  vertical-align: super;
}

.footnotes {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  max-width: 820px;
}


/* ============================================================
   11. FEATURED LOCATION BAND (dark)
   ============================================================ */
.location-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-4);
  align-items: center;
}

.location-badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--space-2);
}

.location-band h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}

.location-band p {
  color: var(--on-dark-soft);
  margin-bottom: var(--space-2);
}

/* Pioneer offer card inside the band */
.pioneer-card {
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-4);
}

.pioneer-card h3 {
  font-size: 1.4rem;
  margin-bottom: var(--space-1);
}

.pioneer-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}


/* ============================================================
   12. STEPS (how it works)
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.step {
  background: var(--navy);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.step-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: var(--space-1);
}

.step h3 {
  margin-bottom: var(--space-1);
  font-size: var(--fs-h3);
}

.step p {
  color: var(--on-dark-soft);
  font-size: 0.95rem;
}


/* ============================================================
   13. COMPARISON TABLE (advertisers page)
   ============================================================ */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}

.compare-table th {
  background: var(--navy);
  color: var(--on-dark);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.9rem 1.2rem;
}

.compare-table td {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

/* our own row, highlighted */
.compare-table .row-us td {
  background: #fdf1e9;
  font-weight: 600;
}

.table-scroll {
  overflow-x: auto;   /* keeps the table usable on small screens */
}


/* ============================================================
   14. CHECKLIST / FEATURE LISTS (turnkey, protections, etc.)
   ============================================================ */
.check-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2) var(--space-4);
}

.check-list li {
  position: relative;
  padding-left: 1.8rem;
}

/* orange hexagon bullet */
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 14px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--orange);
}

/* Simple two-column text block used on service pages */
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.duo-grid h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.duo-grid p {
  color: var(--ink-soft);
}

/* Photo placeholder — swap for a real <img> when you have shots */
.photo-placeholder {
  background: var(--paper-alt);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-3);
}

/* Real photo with caption (portrait-friendly) */
.photo-figure {
  margin: 0;
  max-width: 440px;
  justify-self: center;
}

.photo-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.photo-figure figcaption {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: var(--space-1);
}

/* Text next to a portrait photo (stacks on mobile, see responsive) */
.text-photo-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-4);
  align-items: center;
}

/* Pricing hint strip (partial pricing) */
.price-strip {
  background: var(--paper-alt);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.price-strip strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy);
}


/* ============================================================
   15. FAQ
   ============================================================ */
.faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) 0;
}

.faq summary {
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--orange);
  font-size: 1.3rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2013"; /* en dash as a minus */
}

.faq details p {
  color: var(--ink-soft);
  padding-top: var(--space-1);
  max-width: 720px;
}


/* ============================================================
   16. CLOSING CTA BAND (dark)
   ============================================================ */
.cta-band {
  text-align: center;
}

.cta-band h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}

.cta-band p {
  color: var(--on-dark-soft);
  margin-bottom: var(--space-3);
}


/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer {
  background: #0f2238;   /* darker than the navy sections */
  color: var(--on-dark-soft);
  font-size: var(--fs-small);
  padding: var(--space-4) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.site-footer h4 {
  color: var(--on-dark);
  font-size: 0.95rem;
  margin-bottom: var(--space-1);
}

.site-footer a {
  color: var(--on-dark-soft);
}

.site-footer a:hover {
  color: var(--on-dark);
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-2);
}


/* ============================================================
   18. PAGE-SPECIFIC SMALL HEROES (inner pages)
   ============================================================ */
.page-hero {
  background: var(--navy);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
  padding: var(--space-5) 0;
}

/* same masked lattice as the home hero (see .hero::before notes) */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='168' viewBox='0 0 48 84'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.5'%3E%3Cpath d='M24 2 46 15v26L24 54 2 41V15Z'/%3E%3Cpath d='M0 44 22 57v26L0 96l-22-13V57Z'/%3E%3Cpath d='M48 44 70 57v26L48 96 26 83V57Z'/%3E%3Cpath d='M0-40 22-27v26L0 12l-22-13v-26Z'/%3E%3Cpath d='M48-40 70-27v26L48 12 26-1v-26Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(circle at 85% 20%, black 0%, transparent 65%);
  mask-image: radial-gradient(circle at 85% 20%, black 0%, transparent 65%);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom: var(--space-2);
  max-width: 720px;
}

.page-hero p {
  color: var(--on-dark-soft);
  max-width: 620px;
  font-size: 1.05rem;
}


/* ============================================================
   19. CONTACT PAGE
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* Cal.com goes here — replace the inner placeholder with the embed */
.booking-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-card {
  background: var(--paper-alt);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.contact-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-1);
}

.contact-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}


/* ============================================================
   19b. LEGAL PAGES (privacy policy, terms of use)
   ============================================================ */
.legal-content {
  max-width: 780px;
}

.legal-content h2 {
  font-size: 1.3rem;
  margin: var(--space-4) 0 var(--space-1);
}

.legal-content h3 {
  font-size: 1.05rem;
  margin: var(--space-3) 0 var(--space-1);
}

.legal-content p {
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.legal-content ul {
  margin: 0 0 var(--space-2) 1.3rem;
  color: var(--ink-soft);
}

.legal-content li {
  margin-bottom: 0.35rem;
}

.legal-content strong {
  color: var(--ink);
}

/* "The short version" intro box */
.legal-summary {
  background: var(--paper-alt);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.legal-updated {
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
}


/* ============================================================
   20. RESPONSIVE — all breakpoints live here
   ============================================================ */
@media (max-width: 860px) {
  :root {
    --section-pad: 3rem;   /* tighter rhythm on small screens */
  }

  .split-grid,
  .duo-grid,
  .location-band,
  .contact-grid,
  .text-photo-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .main-nav {
    gap: var(--space-2);
  }

  .main-nav a {
    font-size: 0.85rem;
  }
}

@media (max-width: 560px) {
  .site-header .container {
    flex-direction: column;
    gap: var(--space-1);
  }

  .hex-stats {
    gap: var(--space-3);
  }
}