/* ===========================================================================
   THE FREEDOM SYSTEM — shared premium design system
   Ridgeside K9 · brand tokens sampled from logo · Oswald / Open Sans
   Premium Web Standard (Clay/VRRB bar). Vanilla CSS, Spline/3D-ready hero slot.
   =========================================================================== */

:root {
  --teal: #31BEB1;
  --navy: #192A4A;
  --navy-dark: #0F1F3D;
  --coral: #E8A15B;
  --sand: #F6C282;
  --bronze: #967355;
  --ink: #0C1730;
  --paper: #F7F9FB;
  --paper-2: #EEF3F6;
  --line: rgba(25, 42, 74, 0.10);
  --white: #FFFFFF;
  --muted: #5A6B82;
  --teal-soft: #E8F8F8;

  --ff-head: 'Oswald', -apple-system, sans-serif;
  --ff-body: 'Open Sans', -apple-system, sans-serif;

  --r-lg: 22px;
  --r-md: 14px;
  --maxw: 1160px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--ff-body); color: var(--ink); background: var(--paper); line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4, .display { font-family: var(--ff-head); font-weight: 600; line-height: 1.04; letter-spacing: -0.01em; text-transform: uppercase; }
.eyebrow { font-family: var(--ff-head); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: 13px; color: var(--teal); }
.lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--muted); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; font-size: 15px; padding: 17px 30px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.btn-primary { color: #08221f; background: linear-gradient(120deg, var(--teal), #5fd8cd); box-shadow: 0 10px 30px -8px rgba(49,190,177,.6), inset 0 0 0 1px rgba(255,255,255,.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -10px rgba(49,190,177,.75); }
.btn-ghost { color: var(--white); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.btn-dark { color: var(--white); background: var(--navy); box-shadow: 0 10px 26px -10px rgba(25,42,74,.6); }
.btn-dark:hover { transform: translateY(-2px); background: var(--navy-dark); }

/* ── Sticky nav ──────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; transition: background .3s, backdrop-filter .3s, box-shadow .3s; }
.nav.solid { background: rgba(15,31,61,.82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.nav .brand { display: flex; align-items: center; gap: 11px; font-family: var(--ff-head); font-weight: 600; letter-spacing: 1px; color: #fff; text-transform: uppercase; font-size: 18px; }
.nav .brand b { color: var(--teal); }
.nav .brand img.logo { height: 42px; width: 42px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.16); }
@media (max-width: 480px){ .nav .brand .wordmark { display:none; } }
.nav .nav-cta { display: flex; gap: 10px; }
.nav .nav-cta .btn { padding: 11px 20px; font-size: 13px; }
@media (max-width: 640px){ .nav .nav-cta .btn.is-call { display:none; } }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; color: #fff; background: radial-gradient(120% 120% at 80% 0%, #15315c 0%, var(--navy-dark) 55%, #081428 100%); overflow: hidden; }
.hero::before { /* aurora */ content:""; position:absolute; inset:-20%; background:
   radial-gradient(40% 50% at 20% 30%, rgba(49,190,177,.45), transparent 60%),
   radial-gradient(35% 45% at 85% 25%, rgba(232,161,91,.35), transparent 60%),
   radial-gradient(45% 55% at 60% 90%, rgba(49,190,177,.25), transparent 60%);
   filter: blur(30px); animation: drift 18s ease-in-out infinite alternate; }
.hero::after { content:""; position:absolute; inset:0; background:
   linear-gradient(transparent, rgba(8,20,40,.65)),
   repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px); pointer-events:none; }
@keyframes drift { from{ transform: translate3d(-3%, -2%, 0) scale(1);} to{ transform: translate3d(4%, 3%, 0) scale(1.12);} }
.hero .container { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 60px; }
.hero h1 { font-size: clamp(40px, 7.4vw, 92px); font-weight: 600; }
.hero h1 .accent { color: var(--teal); }
.hero .sub { margin: 22px 0 30px; max-width: 620px; font-size: clamp(17px, 2.3vw, 22px); color: rgba(255,255,255,.82); text-transform: none; font-family: var(--ff-body); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-3d-slot { position:absolute; right:-3%; bottom:0; width:48%; max-width:760px; height:96%; z-index:1; pointer-events:none;
  background:url('/freedom-assets/hero-dog.png?v=2') right bottom / contain no-repeat;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.55));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%);
          mask-image: linear-gradient(to right, transparent 0%, #000 14%); }
/* Operation Freedom hero uses the service dog instead of the default */
.hero-3d-slot.svc{ background-image:url('/freedom-assets/service-dog.png?v=1'); }
/* Road to Freedom hero — awaiting its dog photo; no default dog */
.hero-3d-slot.r2f{ background-image:none; }
@media (min-width: 981px){ .hero:not(.hero-duo) .sub{ max-width:560px; } }
@media (max-width: 980px){
  /* Mobile: keep the hero clean text. Overlaying the dog behind the headline
     fights for space on a narrow screen. Instead the dog gets its own dedicated
     50/50 feature section below (.feature-split), which reads far better. */
  .hero-3d-slot{ display:none; }
}

/* ── Dog feature: 50/50 image + secondary headline ───────────── */
.feature-split{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; border-radius: var(--r-lg); overflow:hidden; box-shadow: 0 40px 90px -50px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.08); }
.feature-split .fs-copy{ padding: clamp(28px,5vw,52px); display:flex; flex-direction:column; justify-content:center; background: linear-gradient(125deg, var(--navy), var(--navy-dark)); }
.feature-split .fs-copy h2{ color:#fff; }
.feature-split .fs-dog{ min-height: 400px; background-size: cover; background-position: center 35%; background-repeat:no-repeat; }
@media(max-width: 820px){
  .feature-split{ grid-template-columns: 1fr; }
  .feature-split .fs-dog{ min-height: 300px; order: -1; }
}
/* Two-dog hero (puppy-to-freedom): puppy bleeds off the left, grown dog off the right, headline centered between */
.hero-duo .container{ text-align:center; }
.hero-duo .sub{ margin-left:auto; margin-right:auto; }
.hero-duo .hero-cta{ justify-content:center; }
.hero-duo .trust-strip{ justify-content:center; }
.hero-dog-left, .hero-dog-right{ position:absolute; bottom:0; z-index:1; pointer-events:none; filter:drop-shadow(0 22px 42px rgba(0,0,0,.5)); }
.hero-dog-left{ left:-3%; width:32%; max-width:410px; height:80%;
  background:url('/freedom-assets/puppy-left.png?v=1') left bottom / contain no-repeat; }
.hero-dog-right{ right:-3%; width:37%; max-width:480px; height:84%;
  background:url('/freedom-assets/puppy-right.png?v=1') right bottom / contain no-repeat; }
@media (min-width: 981px){ .hero-duo .sub{ max-width:560px; } }
@media (max-width: 980px){ .hero-dog-left, .hero-dog-right{ display:none; } }
.trust-strip { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: rgba(255,255,255,.7); }
.trust-strip b { color: #fff; font-family: var(--ff-head); font-weight: 600; }
.stars { color: var(--sand); letter-spacing: 2px; }

/* ── Section scaffolding ─────────────────────────────────── */
section { position: relative; }
.sec { padding: clamp(72px, 11vw, 128px) 0; }
.sec-dark { background: var(--navy-dark); color: #fff; }
.sec-ink { background: var(--ink); color: #fff; }
.sec-tint { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.sec h2 { font-size: clamp(30px, 5vw, 56px); }
.sec-dark h2, .sec-ink h2 { color: #fff; }
.sec .kicker { margin-bottom: 16px; }
.center { text-align: center; }
.measure { max-width: 760px; }
.center .measure { margin: 0 auto; }

/* ── Reveal on scroll ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1{ transition-delay:.08s;} .reveal.d2{ transition-delay:.16s;} .reveal.d3{ transition-delay:.24s;} .reveal.d4{ transition-delay:.32s;}

/* ── 5/95 bar ────────────────────────────────────────────── */
.split { display:grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
.split-bar { height: 64px; border-radius: 14px; overflow: hidden; display:flex; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.split-bar .b5 { width: 5%; background: rgba(255,255,255,.22); }
.split-bar .b95 { width: 0%; background: linear-gradient(120deg, var(--teal), #5fd8cd); transition: width 1.6s var(--ease); display:flex; align-items:center; padding-left:18px; font-family:var(--ff-head); color:#08221f; font-weight:600; letter-spacing:1px; }
.split-bar.in .b95 { width: 95%; }
.split-legend { display:flex; justify-content:space-between; font-size:14px; color: rgba(255,255,255,.6); }

/* ── Bento / proof grid ──────────────────────────────────── */
/* Proof bento: portrait-aware. Tall feature (matches the 9:16 photos) + four square tiles, fully filled, no empty cells. */
.bento { display: grid; grid-template-columns: 1.04fr 1fr 1fr; gap: 16px; margin-top: 44px; align-items: stretch; }
.bento .cell { border-radius: var(--r-md); background: var(--navy); color:#fff; position: relative; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(25,42,74,.5); display:flex; align-items:flex-end; padding: 20px; aspect-ratio: 1 / 1; }
.bento .cell span { position:relative; z-index:2; font-family: var(--ff-head); font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size: 15px; }
.bento .cell::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(8,20,40,.8)); }
.bento .cell::before{ content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 30% 0%, rgba(49,190,177,.35), transparent 55%); }
.bento .feature { grid-column: 1; grid-row: span 2; aspect-ratio: auto; }
.bento .cell.img { background-size: cover; background-position: center 38%; }
.bento .cell.img::before { background: none; }
.bento .cell.img::after { background: linear-gradient(transparent 35%, rgba(8,20,40,.86)); }
@media(max-width:820px){
  .bento{ grid-template-columns: 1fr 1fr; }
  .bento .feature{ grid-column: 1 / -1; grid-row: auto; width: 100%; aspect-ratio: 4 / 3; }
}
/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 4vmin; background: rgba(8,20,40,.92); backdrop-filter: blur(6px); cursor: zoom-out; opacity: 0; transition: opacity .22s ease; }
.lightbox.show { display: flex; opacity: 1; }
.lightbox img { max-width: min(92vw, 720px); max-height: 90vh; border-radius: var(--r-md); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); cursor: default; }
.lb-close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .15s ease; }
.lb-close:hover { background: rgba(255,255,255,.18); }

/* ── Marquee ─────────────────────────────────────────────── */
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; gap: 14px; width:max-content; animation: scroll 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.chip { font-family:var(--ff-head); text-transform:uppercase; letter-spacing:1px; font-size:14px; color: var(--navy); background:#fff; border:1px solid var(--line); padding:12px 20px; border-radius:999px; white-space:nowrap; }
@keyframes scroll { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ── Offer / value stack card ────────────────────────────── */
.offer-wrap { display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:start; }
.offer-wrap .price-box { margin-top: 0; }
.sec h2 + .lede { margin-top: 16px; }
@media(max-width:880px){ .offer-wrap{ grid-template-columns:1fr; } }
.stack { background:#fff; border-radius: var(--r-lg); padding: 30px; box-shadow: 0 40px 80px -40px rgba(25,42,74,.45); border:1px solid var(--line); }
.stack-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding: 13px 0; border-bottom:1px dashed var(--line); }
.stack-row:last-of-type{ border-bottom:0; }
.stack-row .v { font-family:var(--ff-head); font-weight:600; color: var(--muted); white-space:nowrap; }
.stack-row .v.free { color: var(--teal); }
.stack-total { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:18px; border-top:2px solid var(--navy); }
.stack-total .label { font-family:var(--ff-head); text-transform:uppercase; letter-spacing:1px; }
.stack-total .num { font-family:var(--ff-head); font-size:30px; font-weight:600; }
.price-box { margin-top: 20px; background: var(--navy-dark); color:#fff; border-radius: var(--r-md); padding: 22px 26px; text-align:center; }
.price-box .small { font-size:13px; letter-spacing:2px; text-transform:uppercase; color: rgba(255,255,255,.6); }
.price-box .price { font-family:var(--ff-head); font-size: clamp(44px,8vw,64px); font-weight:600; color: var(--teal); line-height:1; }
.price-box .fin { font-size:13px; color: rgba(255,255,255,.65); margin-top:8px; }

/* ── Feature cards (Freedom Pack / Method) ───────────────── */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:44px; }
@media(max-width:780px){ .cards{ grid-template-columns:1fr; } }
.card { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 26px; transition: transform .3s var(--ease), background .3s; }
.sec-tint .card, body .card.light { background:#fff; border:1px solid var(--line); box-shadow: 0 24px 50px -34px rgba(25,42,74,.4); }
.card:hover { transform: translateY(-4px); }
.card .ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(120deg,var(--teal),#5fd8cd); color:#08221f; font-size:22px; margin-bottom:16px; }
.card h4 { font-size:19px; margin-bottom:8px; }
.card p { font-size:15px; color: var(--muted); }
.sec-dark .card p, .sec-ink .card p { color: rgba(255,255,255,.72); }

/* ── Guarantee ───────────────────────────────────────────── */
.guarantee { position:relative; background: linear-gradient(120deg, var(--navy), var(--navy-dark)); color:#fff; border-radius: var(--r-lg); padding: clamp(34px,5vw,60px); overflow:hidden; box-shadow: 0 50px 90px -50px rgba(25,42,74,.7); }
.guarantee::before{ content:""; position:absolute; right:-60px; top:-60px; width:300px; height:300px; border-radius:50%; background: radial-gradient(circle, rgba(49,190,177,.4), transparent 65%); }
.g-badge { display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-head); text-transform:uppercase; letter-spacing:2px; font-size:13px; color: var(--navy-dark); background: var(--teal); padding:9px 18px; border-radius:999px; margin-bottom:20px; }
.guarantee h3 { font-size: clamp(26px,4vw,40px); position:relative; }
.guarantee p { position:relative; max-width: 720px; margin-top:16px; font-size:18px; color: rgba(255,255,255,.85); }

/* ── Testimonials ────────────────────────────────────────── */
.tcards { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:44px; }
@media(max-width:880px){ .tcards{ grid-template-columns:1fr; } }
.tcard { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding:26px; box-shadow:0 24px 50px -36px rgba(25,42,74,.4); }
.tcard .stars{ margin-bottom:12px; display:block; }
.tcard p { font-size:16px; font-style:italic; color: var(--ink); }
.tcard .who { margin-top:16px; font-family:var(--ff-head); text-transform:uppercase; letter-spacing:1px; font-size:14px; color: var(--navy); }
.tcard .who span{ color: var(--muted); font-family:var(--ff-body); text-transform:none; letter-spacing:0; }

/* ── Authority / origin ──────────────────────────────────── */
.origin { display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:center; }
@media(max-width:880px){ .origin{ grid-template-columns:1fr; } }
.origin .photo { aspect-ratio: 4/5; border-radius: var(--r-lg); background: linear-gradient(160deg, #1d3a63, var(--navy-dark)); position:relative; overflow:hidden; box-shadow: 0 50px 90px -50px rgba(0,0,0,.6); display:flex; align-items:flex-end; padding:26px; }
.origin .photo::before{ content:""; position:absolute; inset:0; background: radial-gradient(120% 100% at 70% 0, rgba(49,190,177,.3), transparent 55%);}
.origin .photo span{ position:relative; z-index:2; font-family:var(--ff-head); text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.92); font-size:14px; }
.origin .photo.img{ background-size:cover; background-position:center 30%; }
.origin .photo.img::before{ background:linear-gradient(transparent 42%, rgba(8,20,40,.82)); }
.pullquote { font-family:var(--ff-head); font-weight:500; text-transform:none; font-size: clamp(22px,3vw,30px); line-height:1.25; color: var(--navy); }
.pullquote .hl{ color: var(--teal); }

/* ── Bonus + countdown ───────────────────────────────────── */
.vault { background: linear-gradient(135deg, #102143, #0a1730); color:#fff; border-radius: var(--r-lg); padding: clamp(34px,5vw,56px); border:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden; }
.vault::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 100% 0, rgba(232,161,91,.25), transparent 60%); }
.vault .vault-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center; position:relative; }
@media(max-width:880px){ .vault .vault-grid{ grid-template-columns:1fr; } }
.vault ul{ list-style:none; margin-top:18px; }
.vault li{ padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:14px; font-size:15px; }
.vault li .v{ color: var(--sand); font-family:var(--ff-head); }
.countdown { text-align:center; }
.cd-grid { display:flex; gap:12px; justify-content:center; margin-top:10px; }
.cd-cell { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px 16px; min-width:74px; }
.cd-cell .n { font-family:var(--ff-head); font-size:38px; font-weight:600; color:#fff; line-height:1; }
.cd-cell .l { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:6px; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { max-width: 820px; margin: 40px auto 0; }
.q { border-bottom:1px solid var(--line); }
.q button { width:100%; text-align:left; background:none; border:0; cursor:pointer; padding: 22px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--ff-head); font-weight:500; text-transform:none; font-size: clamp(17px,2.4vw,21px); color: var(--navy); }
.q .plus{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--teal); transition: transform .3s; }
.q.open .plus{ transform: rotate(45deg); background: var(--teal); color:#08221f; border-color:var(--teal); }
.q .a { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); color: var(--muted); }
.q.open .a { max-height: 560px; }
.q .a p { padding-bottom: 22px; }

/* ── Final CTA ───────────────────────────────────────────── */
.final { text-align:center; background: radial-gradient(120% 120% at 50% 0, #15315c, var(--navy-dark) 60%, #081428); color:#fff; }
.final h2 { font-size: clamp(34px,6vw,68px); }
.final .hero-cta{ justify-content:center; margin-top:28px; }

/* ── Footer ──────────────────────────────────────────────── */
.foot { background: var(--ink); color: rgba(255,255,255,.6); padding: 44px 0; font-size:14px; }
.foot .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; align-items:center; }
.foot a{ color: var(--teal); }

/* ── Sticky mobile CTA bar ───────────────────────────────── */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(15,31,61,.9); backdrop-filter: blur(14px); box-shadow:0 -1px 0 rgba(255,255,255,.08); transform: translateY(120%); transition: transform .4s var(--ease); }
.sticky-cta.show{ transform:none; }
.sticky-cta .btn{ flex:1; padding:15px; font-size:14px; }
@media(min-width:721px){ .sticky-cta{ display:none; } }