/* =========================================================
   AdventureSafe Theme — “Warm Ivory” Executive System
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* Base Surfaces */
  --bg:#F8F7F4;
  --bg-alt:#F2F4F5;
  --card:#FFFFFF;

  /* Text */
  --text:#0F1E27;
  --text-muted:#5B6A72;
  --line:#E3E7EA;

  /* Brand */
  --copper:#C96A2C;
  --copper-900:#B45D27;
  --copper-200:#F1A56E;

  --sage:#2F6B57;
  --sage-900:#285B4B;
  --sage-200:#AFC4B7;

  --navy:#153C59;
  --navy-tint:#E8EFF4;

  /* Spacing & Radii */
  --radius-sm:8px;
  --radius-md:12px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* Shadow */
  --shadow-sm:0 2px 8px rgba(15,30,39,0.08);
}

/* ---------- BASE ---------- */
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  margin:0;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--navy); text-decoration:none;}
a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4{margin:0 0 var(--space-3) 0; line-height:1.2;}
h1{font-size: clamp(28px, 4.6vw, 44px); font-weight:700;}
h2{font-size: clamp(26px, 3.2vw, 32px); font-weight:700;}
h3{font-size: clamp(20px, 2.2vw, 24px); font-weight:600;}
p{margin:0 0 var(--space-4) 0; color:var(--text);}
.lead{font-size:clamp(16px, 2.2vw, 18px); color:var(--text-muted);}

/* ---------- LAYOUT ---------- */
.container{
  width:100%;
  max-width:1360px;               /* single source of truth */
  padding:0 16px;
  margin:0 auto;
}
@media (min-width:640px){ .container{ padding:0 24px; } }

.section{padding: var(--space-7) 0;}
.section.alt{background:var(--bg-alt);}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--card);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex; align-items:center; gap:18px;
  padding: var(--space-3) 0;
}

.brand-logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.brand-logo img{
  max-height:clamp(96px, 11vw, 152px); /* desktop/tablet */
  height:auto; width:auto !important; max-width:none; object-fit:contain;
}
@media (max-width:640px){ .brand-logo img{ max-height:64px; } }

.header-tagline{ flex:1 1 auto; display:flex; justify-content:center; }
.header-tagline .tagline-pill{
  display:inline-block; background:var(--navy-tint); color:var(--navy);
  border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-weight:600; letter-spacing:.02em;
}
@media (max-width:1040px){ .header-tagline{ display:none; } }

.nav{ display:flex; align-items:center; gap:16px; }
.nav a{ color:var(--text); font-weight:500; padding:6px 10px; border-radius:8px; }
.nav a:hover{ background:var(--navy-tint); }
.nav a.active{ background:var(--navy-tint); color:var(--navy); font-weight:700; }

/* Mobile nav */
.menu-toggle{ display:none; }
@media (max-width:992px){
  .menu-toggle{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; color:#0F1E27; border:1px solid var(--line);
    padding:8px 10px; border-radius:10px; font-weight:600;
  }
  .nav{
    position:absolute; top:100%; right:16px; left:16px;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 10px 24px rgba(15,30,39,.12);
    padding:12px; display:none; flex-direction:column; gap:8px;
  }
  .nav.open{ display:flex; }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:var(--radius-sm);
  border:1px solid transparent; font-weight:600; line-height:1;
  cursor:pointer; transition:.15s ease-in-out; text-align:center;
}
.btn-primary{ background:var(--copper); color:#fff; }
.btn-primary:hover{ background:var(--copper-900); }
.btn-primary:focus{ outline:2px solid var(--copper-200); outline-offset:2px; }
.btn-secondary{ background:transparent; color:var(--sage); border-color:var(--sage); }
.btn-secondary:hover{ background:var(--sage); color:#fff; }

/* ---------- HERO ---------- */
.hero{
  padding: clamp(48px, 10vw, 96px) 0; position:relative;
}
.hero.hero--accent{
  background:
    radial-gradient(1100px 520px at 85% -120px, rgba(21,60,89,0.08), transparent 60%),
    radial-gradient(900px 480px at -200px 60%, rgba(201,106,44,0.06), transparent 60%);
}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--space-4);}

/* Two-column grid on desktop; stack on mobile */
@media (min-width:992px){
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);
    gap:28px; align-items:start;
  }
}
@media (max-width:992px){ .hero-grid{ display:block; } }

/* ---------- Audience “chips” (link-badges) ---------- */
.audience-chips{
  display:flex; gap:10px; margin-top:14px;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
}
.audience-chips::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--sage); color:#fff; border:1px solid var(--sage-900);
  border-radius:999px; padding:7px 11px; font-weight:600; letter-spacing:.005em;
  text-decoration:none; white-space:nowrap; transition:background .15s ease, transform .05s ease;
}
.chip:hover{ background:var(--sage-900); }
.chip:active{ transform:translateY(1px); }
.chip:focus-visible{ outline:2px solid var(--copper-200); outline-offset:2px; }
.chip.active{ background:var(--sage-900); }
.chip .icon-sm{ width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; }
.chip .icon-sm svg{ width:14px; height:14px; stroke:#FFFFFF; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:640px){ .audience-chips{ flex-wrap:wrap; } .chip{ padding:6px 10px; } }

/* ---------- Assurance row & photo ---------- */
.assurance{ margin-top:14px; display:grid; gap:10px; }
@media (min-width:992px){ .assurance{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.assurance-item{
  display:flex; align-items:flex-start; gap:10px;
  background:#FFFFFF; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; box-shadow:var(--shadow-sm); font-weight:500; color:var(--text);
}
.assurance-item .icon{ width:22px; height:22px; flex:0 0 22px; display:inline-flex; align-items:center; justify-content:center; color:var(--sage); margin-top:2px; }
.assurance-item .icon--navy{ color:var(--navy); }
.assurance-item .icon--copper{ color:var(--copper); }
.assurance-item .icon svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* Taller photo strip to balance the hero */
.assurance-photo{ margin-top:12px; }
.assurance-photo img{
  width:100%; height:320px; object-fit:cover; border-radius:12px;
  box-shadow:var(--shadow-sm); filter:saturate(.88) contrast(1.04);
}
@media (max-width:992px){ .assurance-photo img{ height:260px; } }
@media (max-width:640px){ .assurance-photo img{ height:220px; } }

/* ---------- Cards / panels ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:var(--space-5); }
.card.hero-card{ padding:16px; }

/* ---------- Bands ---------- */
.band{ background:var(--navy); color:#fff; padding: var(--space-6) 0; }
.band--subtle{
  background: linear-gradient(135deg, rgba(21,60,89,0.06) 0%, rgba(21,60,89,0.0) 60%), var(--bg-alt);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], textarea, select{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; font:inherit;
}
input:focus, textarea:focus, select:focus{
  outline:2px solid var(--copper-200); outline-offset:2px;
}

}/* =========================================================
   AdventureSafe Theme — “Warm Ivory” Executive System
   Global: use for EVERY page (index + subpages)
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* Surfaces */
  --bg:#F8F7F4;          /* Warm Ivory */
  --bg-alt:#F2F4F5;      /* Light gray band */
  --card:#FFFFFF;        /* Cards / header / nav */
  --line:#E3E7EA;        /* Hairlines / borders */

  /* Text */
  --text:#0F1E27;        /* Blue-gray */
  --text-muted:#5B6A72;  /* Secondary text */

  /* Brand */
  --copper:#C96A2C;      /* Primary action */
  --copper-900:#B45D27;  /* Hover */
  --copper-200:#F1A56E;  /* Focus ring/tint */

  --sage:#2F6B57;        /* Secondary / affirmations */
  --sage-900:#285B4B;    /* Hover */
  --sage-200:#AFC4B7;    /* Tint */

  --navy:#153C59;        /* Links / accents */
  --navy-tint:#E8EFF4;   /* Very light navy tint */

  /* Radii / spacing / shadow */
  --radius-sm:8px; --radius-md:12px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --shadow-sm:0 2px 8px rgba(15,30,39,0.08);
}

/* ---------- BASE ---------- */
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6; margin:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  scroll-behavior:smooth;      /* smooth scroll globally */
}

img{max-width:100%;height:auto;display:block;}
a{color:var(--navy);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:2px;}

.container{width:100%;max-width:1360px;padding:0 16px;margin:0 auto;}
@media (min-width:640px){ .container{padding:0 24px;} }

.section{padding: var(--space-7) 0;}
.section.alt{background:var(--bg-alt);}

/* ---------- HEADINGS ---------- */
h1,h2,h3,h4{margin:0 0 var(--space-3) 0;line-height:1.2}
h1{font-size:clamp(28px,4.6vw,44px);font-weight:700}
h2{font-size:clamp(26px,3.2vw,32px);font-weight:700}
h3{font-size:clamp(20px,2.2vw,24px);font-weight:600}
p{margin:0 0 var(--space-4);color:var(--text)}
.lead{font-size:clamp(16px,2.2vw,18px);color:var(--text-muted)}

/* ---------- HEADER / NAV ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:18px;padding:12px 0}
.brand-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.brand-logo img{
  max-height:clamp(96px,11vw,152px); height:auto; width:auto !important; max-width:none; object-fit:contain;
}

.header-tagline{flex:1 1 auto;display:flex;justify-content:center}
.header-tagline .tagline-pill{
  display:inline-block;background:#FFF3EA;color:#B45D27;border:1px solid #F1A56E;
  border-radius:999px;padding:6px 12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
@media (max-width:1040px){ .header-tagline{display:none} }

.nav{display:flex;align-items:center;gap:16px}
.nav a{padding:6px 10px;border-radius:8px;line-height:1.2}
.nav a:hover{background:var(--navy-tint)}
.nav a.active{color:var(--navy);border-bottom:2px solid var(--copper);padding-bottom:6px}

/* Mobile menu */
.menu-toggle{display:none}
@media (max-width:992px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0F1E27;border:1px solid var(--line);padding:8px 10px;border-radius:10px;font-weight:600}
  .nav{position:absolute;top:100%;right:16px;left:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(15,30,39,.12);padding:12px;display:none;flex-direction:column;gap:8px}
  .nav.open{display:flex}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;line-height:1;cursor:pointer;transition:.15s}
.btn-primary{background:var(--copper);color:#fff}
.btn-primary:hover{background:var(--copper-900)}
.btn-primary:focus{outline:2px solid var(--copper-200);outline-offset:2px}
.btn-secondary{background:transparent;color:var(--sage);border-color:var(--sage)}
.btn-secondary:hover{background:var(--sage);color:#fff}

/* ---------- HERO (landing) ---------- */
.hero{padding: clamp(48px, 10vw, 96px) 0;position:relative}
.hero.hero--accent{
  background:
    radial-gradient(1100px 520px at 85% -120px, rgba(21,60,89,0.06), transparent 60%),
    radial-gradient(900px 480px at -200px 60%, rgba(47,107,87,0.05), transparent 60%);
}

/* ---------- SUB-HERO (subpages) ---------- */
.subhero{
  padding: clamp(36px, 8vw, 72px) 0;
  background:
    radial-gradient(900px 420px at 90% -100px, rgba(21,60,89,0.06), transparent 60%),
    linear-gradient(0deg, var(--bg-alt), var(--bg-alt));
  border-bottom:1px solid var(--line);
}
.breadcrumbs{color:var(--text-muted);font-weight:600;margin-bottom:8px}
.page-intro{max-width:880px}

/* ---------- CARDS / PANELS ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-5)}
.card.hero-card{padding:16px;margin-bottom:12px}

/* ---------- UTIL ---------- */
.eyebrow{display:inline-block;background:var(--navy-tint);color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-weight:600;letter-spacing:.02em}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line)}
.site-footer .inner{padding: var(--space-6) 0;color:var(--text-muted);font-weight:600}


}

/* Momentum scrolling for chip row (iOS) */
.audience-chips{ -webkit-overflow-scrolling: touch; }

/* Ensure anchor targets don't hide under the sticky header */
section{ scroll-margin-top: 84px; }       /* tweak if header height changes */

/* --- About page helpers --- */
.photo-card .media{ aspect-ratio:16/10; }
.photo-card img.img-fieldops{ object-position:50% 30% !important; }

.section--tight{ padding-top: var(--space-2) !important; }

/* =========================================================
   Mobile + image refinements
   ========================================================= */

/* 1. Hero CTAs: stack full-width on mobile */
@media (max-width:768px){
  .hero .actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero .actions .btn{
    width:100%;
    text-align:center;
  }
}

/* 2. Assurance photo strip: let it breathe on small screens
      (avoid harsh top/bottom cropping) */
@media (max-width:768px){
  .assurance-photo img{
    height:auto;
    max-height:none;
    object-fit:cover;      /* still tidy but not overly cropped */
  }
}

/* 3. Service / story cards: keep photos readable on mobile */
.photo-card .media{
  overflow:hidden;
  border-radius:var(--radius-md);
}

.photo-card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* On mobile, drop the strict aspect-ratio so more of the
   image shows instead of cropping out key elements. */
@media (max-width:768px){
  .photo-card .media{
    aspect-ratio:auto;
  }
  .photo-card .media img{
    height:auto;
  }
}

/* 4. Temporarily hide old footer nav (Pricing / Resources row) */
.site-footer nav,
.site-footer .footer-nav,
.site-footer .footer-links{
  display:none;
}

/* ============================
   MOBILE NAV FIX
   - Always show nav on small screens
   - Hide unused hamburger toggle
   ============================ */
@media (max-width: 992px) {
  /* We’re not using JS to open the menu, so hide the toggle */
  .menu-toggle{
    display: none !important;
  }

  /* Keep the header tidy but let nav wrap under the logo if needed */
  .site-header .bar{
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .nav{
    position: static !important;
    right: auto;
    left: auto;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .nav a{
    padding: 4px 6px;
    font-size: 14px;
  }
}

/* ============================
   HERO CTA STACKING ON MOBILE
   ============================ */
@media (max-width: 640px) {
  .hero .actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero .actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* ============================
   CARD IMAGE CROPPING TWEAKS
   ============================ */

/* Make the media area taller so less vertical content is lost */
.photo-card .media{
  aspect-ratio: 4 / 3;              /* taller than 16:10 → more image shown */
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* Default behavior: show slightly more of the lower part of the image */
.photo-card .media img,
.photo-card > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;         /* 55% = a little below center */
}

/* If you have per-image classes, these give extra control.
   (Safe to leave in even if the classes don’t exist yet.) */
.photo-card img.img-stage{
  /* For the “speaking on stage” photo: show more of the body */
  object-position: 50% 75% !important;
}

.photo-card img.img-playbook{
  /* For the First 24™ book image: pull the book higher into view */
  object-position: 50% 45% !important;
}

/* ============================
   HIDE LEGACY BOTTOM NAV LINKS
   (old Home / First 24 / Summit / Pricing / Resources row)
   ============================ */

/* Most likely the old row is a <nav> inside the footer */
.site-footer nav{
  display: none;
}

/* Belt-and-suspenders: catch common class names if they exist */
.footer-cta-row,
.section-nav,
.bottom-nav{
  display: none;
}

/* --- Image framing tweaks for specific photos --- */

/* 1) Stage photo: assets/about/present.jpg
   Show more of your body and the slide, not just your head */
img[src$="present.jpg"]{
  object-fit: cover;
  object-position: 50% 55% !important; /* move focus a bit lower */
}

/* 2) First-24 book photo: assets/first-23-herobook.jpg
   Center the book so the cover is clearly visible */
img[src$="first-24-herobook.jpg"]{
  object-fit: cover;
  object-position: 50% 65% !important; /* push frame down toward the book */
}

/* 3) Police / hero shot on About page: assets/about/police.jpg
   Show more of the full body instead of just waist-up */
img[src$="police.jpg"]{
  object-fit: cover;
  object-position: 50% 60% !important;
}
/* Force the site to stay in light mode even when the OS prefers dark */
@media (prefers-color-scheme: dark) {
  :root{
    /* Just reuse the normal light theme tokens */
    --bg:#F8F7F4;
    --bg-alt:#F2F4F5;
    --card:#FFFFFF;
    --line:#E3E7EA;

    --text:#0F1E27;
    --text-muted:#5B6A72;

    --copper:#C96A2C;
    --copper-900:#B45D27;
    --copper-200:#F1A56E;

    --sage:#2F6B57;
    --sage-900:#285B4B;
    --sage-200:#AFC4B7;

    --navy:#153C59;
    --navy-tint:#E8EFF4;
  }

  /* Keep nav + buttons using the light theme too */
  .nav a.active{ color: var(--navy); }
  .btn-secondary{
    border-color: var(--sage);
    color: var(--sage);
  }
}