/* Proxima Nova (self-hosted). Repo ships 400 + 700 only, no italics.
   ponytail: 500/600 collapse to nearest (500→400, 600→700); add mid-weight woff2 if the ladder needs it. */
@font-face{
  font-family:'Proxima Nova';
  src:url('/fonts/proxima-nova.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Proxima Nova';
  src:url('/fonts/proxima-nova-bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --forest:#1B3F6B;
  --forest-2:#234E80;
  --forest-3:#2C5E97;
  --sage:#5A88B8;
  --sage-2:#A3C3DC;
  --sage-3:#C8DFF0;
  --sage-4:#EBF4FB;
  --gold:#3B7DD8;
  --gold-2:#5A95E8;
  --gold-3:#B8D5F5;
  --gold-4:#EBF3FD;
  --cream:#F5F8FC;
  --cream-2:#EDF3FA;
  --white:#FFFFFF;
  --ink:#080F18;
  --ink-2:#152030;
  --ink-3:#2C3E52;
  --ink-4:#526070;
  --line:rgba(27,63,107,0.10);
  --line-2:rgba(27,63,107,0.18);
}

html{scroll-behavior:smooth;background:#0A1626}

body{
  font-family:'Proxima Nova',sans-serif;
  background:var(--white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* clip (not hidden) so position:sticky still works */
}



/* REVEAL ANIMATIONS */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

/* ───── NAV ───── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:96px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 64px;
  transition:background 0.4s, border-color 0.4s, height 0.4s;
}
nav.scrolled{
  height:72px;
  background:rgba(245,248,252,0.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}

.logo{display:flex;align-items:center;gap:16px;text-decoration:none}
.logo-mark{
  width:52px;height:52px;
  background:var(--forest);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:width 0.4s,height 0.4s;
  box-shadow:0 4px 16px rgba(27,63,107,0.25);
}
nav.scrolled .logo-mark{width:40px;height:40px}
nav.scrolled .logo-mark svg{width:20px;height:20px}
.logo-mark svg{width:28px;height:28px;fill:var(--white);transition:width 0.4s,height 0.4s}
.logo-text{
  font-family:'Proxima Nova',sans-serif;
  font-size:28px;font-weight:600;
  color:var(--forest);letter-spacing:0.01em;
  line-height:1.05;
  transition:font-size 0.4s;
}
nav.scrolled .logo-text{font-size:20px}
.logo-sub{
  display:block;font-family:'Proxima Nova',sans-serif;
  font-size:10.5px;font-weight:400;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-3);margin-top:3px;
  transition:opacity 0.3s;
}
nav.scrolled .logo-sub{opacity:0}

/* Nav changes colour on dark hero */
nav.hero-mode .logo img{filter:brightness(0) invert(1)}
nav.scrolled.hero-mode .logo img{filter:none}
nav.hero-mode .logo-text{color:var(--cream)}
nav.hero-mode .logo-sub{color:var(--sage-2)}
nav.hero-mode .nav-link{color:rgba(255,255,255,0.75)}
nav.hero-mode .nav-link:hover{color:#fff}
nav.hero-mode .nav-cta{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3);color:#fff}
nav.hero-mode .nav-cta:hover{background:#fff;color:var(--forest)}

nav.scrolled.hero-mode .logo-text{color:var(--forest)}
nav.scrolled.hero-mode .logo-sub{color:var(--ink-3)}
nav.scrolled.hero-mode .nav-link{color:var(--ink-2)}
nav.scrolled.hero-mode .nav-cta{background:var(--forest);border-color:var(--forest);color:var(--cream)}

.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
.nav-link{
  font-size:14px;font-weight:400;letter-spacing:0.02em;
  color:var(--ink-2);text-decoration:none;
  transition:color 0.2s;
}
.nav-link:hover{color:var(--forest)}
.nav-cta{
  font-size:13.5px;font-weight:500;letter-spacing:0.04em;
  color:var(--white);background:var(--forest);
  padding:12px 26px;border-radius:100px;
  text-decoration:none;border:1px solid var(--forest);
  transition:all 0.2s;
}
.nav-cta:hover{background:var(--forest-3);transform:translateY(-1px)}


/* ───── PAW PRINT PATTERN ───── */
.paw-bg {
  position: relative;
  overflow: hidden;
}
.paw-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* minimal brand wash: two faint navy/sage glows, no motif */
  background:
    radial-gradient(640px 420px at 88% 6%, rgba(90,136,184,0.09), transparent 65%),
    radial-gradient(720px 480px at 4% 96%, rgba(27,63,107,0.06), transparent 65%);
}
.paw-bg > * {
  position: relative;
  z-index: 1;
}

/* ───── HERO ───── */
.hero{
  position:relative;
  height:100vh;
  min-height:780px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  z-index:1;
}
.hero-bg{
  position:absolute;inset:0;
  background:#0A1626;
}
/* <picture> wraps the img for the mobile source swap; keep the img sizing
   against .hero-bg, not the inline picture box */
.hero-bg picture{display:contents}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;
  opacity:0.82;
  transform:scale(1.04);
  transition:transform 8s ease-out;
}
.hero-bg img.loaded{transform:scale(1)}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(8,18,35,0.55) 0%, rgba(8,18,35,0.15) 45%, rgba(8,18,35,0) 65%),
    linear-gradient(
      to bottom,
      rgba(8,18,35,0.55) 0%,
      rgba(8,18,35,0.05) 35%,
      rgba(8,18,35,0.15) 60%,
      rgba(8,18,35,0.80) 100%
    );
}

.hero-content{
  position:relative;z-index:2;
  padding:0 80px 60px;
}

.hero-left{}
.hero-h1{
  font-family:'Proxima Nova',sans-serif;
  font-size:clamp(48px,6vw,90px);
  font-weight:300;
  color:#fff;
  line-height:0.95;
  letter-spacing:-0.02em;
  margin-bottom:100px;
  margin-left:-6px;
}
.hero-h1 em{
  font-style:normal;
  color:var(--gold-2);
}
@media (min-width:901px){
  .hero-h1{transform:translateY(45px)}
}

/* Hero entrance — headline lines rise out of overflow masks, then the sub,
   buttons and stats fade up behind them. Runs once on load. */
.hero-line{
  display:block;overflow:hidden;
  /* mask breathing room so ascenders/descenders survive line-height 0.95 */
  padding:0.14em 0 0.24em;margin:-0.14em 0 -0.24em;
}
.hero-line>span{
  display:inline-block;
  transform:translateY(115%);
  animation:hero-line-up 1s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}
.hero-line:nth-child(2)>span{animation-delay:0.24s}
.hero-line:nth-child(3)>span{animation-delay:0.38s}
@keyframes hero-line-up{to{transform:translateY(0)}}

.hero-sub,.hero-btns,.hero-card{
  opacity:0;
  animation:hero-rise 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-sub{animation-delay:0.6s}
.hero-btns{animation-delay:0.74s}
.hero-card{animation-delay:0.88s}
@keyframes hero-rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
/* Hand-drawn swash under "Confident" — draws itself once its line has landed */
.hero-line>span{position:relative}
.hero-swash{
  position:absolute;left:0;bottom:-0.16em;
  width:100%;height:auto;overflow:visible;
  color:var(--gold-2);pointer-events:none;
}
.hero-swash path{
  stroke-dasharray:225;stroke-dashoffset:225;
  animation:swash-draw 0.7s cubic-bezier(0.65,0,0.35,1) 1.4s forwards;
}
@keyframes swash-draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .hero-line>span{transform:none;animation:none}
  .hero-sub,.hero-btns,.hero-card{opacity:1;animation:none}
  .hero-swash path{animation:none;stroke-dashoffset:0}
}

.hero-sub{
  font-size:16px;font-weight:300;
  color:rgba(255,255,255,0.78);
  letter-spacing:0.01em;
  margin-bottom:32px;
}

.hero-btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn-hero-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold-2);color:#fff;
  font-size:14px;font-weight:500;
  padding:13px 26px;border-radius:100px;
  text-decoration:none;letter-spacing:0.03em;
  transition:all 0.2s;
}
.btn-hero-primary:hover{background:var(--gold);transform:translateY(-2px)}
.btn-hero-ghost{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.10);color:#fff;
  font-size:14px;font-weight:400;
  padding:13px 26px;border-radius:100px;
  text-decoration:none;letter-spacing:0.03em;
  border:1px solid rgba(255,255,255,0.25);
  transition:all 0.2s;
}
.btn-hero-ghost:hover{background:rgba(255,255,255,0.18)}

/* Hero metrics strip */
.hero-card{
  display:inline-flex;align-items:center;
  padding:20px 0;
  margin-top:20px;
}
.hero-card-num{
  font-family:'Proxima Nova',sans-serif;
  font-size:30px;font-weight:500;
  color:#fff;line-height:1;
  letter-spacing:-0.02em;
}
.hero-card-label{
  font-size:11px;font-weight:400;
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.68);
  margin-top:4px;
}
.hero-card-div{
  width:1px;height:40px;
  background:rgba(255,255,255,0.16);
  margin:0 32px;flex-shrink:0;
}

/* ───── TRUST STRIP ───── */
.trust{
  background:var(--forest);
  padding:18px 80px;
  display:flex;align-items:center;justify-content:center;
  gap:48px;overflow:hidden;
  position:relative;
  z-index:10;
}
.trust-item{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:400;letter-spacing:0.05em;
  color:var(--sage-2);white-space:nowrap;
}
.trust-item svg{width:14px;height:14px;fill:var(--gold-2);flex-shrink:0}
.trust-sep{color:rgba(255,255,255,0.15);font-size:18px;line-height:1}

/* ───── ABOUT ───── */
.about{
  padding:104px 0 88px;
  background:var(--white);
  position:relative;
  z-index:10;
  overflow:hidden; /* clips the drifting photo strip */
}
.about-inner{
  max-width:720px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}
.about-inner .eyebrow{justify-content:center}
.about-portrait{
  width:150px;height:150px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%; /* portrait crop — keep the face in frame */
  margin:4px auto 28px;
  display:block;
  border:4px solid var(--sage-4);
  box-shadow:0 10px 30px rgba(27,63,107,0.15);
}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.eyebrow-text{
  font-size:11px;font-weight:500;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--gold);
}
.section-h2{
  font-family:'Proxima Nova',sans-serif;
  font-size:clamp(48px,5vw,66px);
  font-weight:500;
  color:var(--forest);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin-bottom:28px;
}
.section-h2 em{font-style:normal;color:var(--gold)}

.about-body{
  font-size:16.5px;color:var(--ink);
  line-height:1.85;font-weight:400;
  margin-bottom:16px;
  text-align:left;
}
.about-pills{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;
  justify-content:center;
}
.pill{
  background:var(--sage-4);color:var(--forest);
  font-size:12px;font-weight:500;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:7px 15px;border-radius:100px;
  border:1px solid var(--sage-3);
}

/* About photo strip — two rows of cards, translated by initAboutStrip() on scroll.
   Rows are centered and ~3× wider than any viewport, so a ±shift never shows a gap. */
.about-strip{
  margin-top:72px;
  display:flex;flex-direction:column;gap:20px;
}
.about-strip-row{
  display:flex;gap:20px;
  justify-content:center;
  will-change:transform;
}
.ab-card{
  flex-shrink:0;
  height:clamp(150px,22vw,220px);
  border-radius:22px;
  overflow:hidden;
  background:var(--sage-4);
  box-shadow:0 14px 34px rgba(27,63,107,0.12);
}
.ab-card img{width:100%;height:100%;object-fit:cover;display:block}
.ab-card--sm{width:clamp(170px,24vw,280px)}
.ab-card--md{width:clamp(230px,34vw,400px)}
.ab-card--lg{width:clamp(300px,46vw,560px)}
.ab-card--quote{
  display:flex;align-items:center;justify-content:center;
  background:var(--forest);
  padding:0 clamp(20px,3vw,40px);
}
.ab-card--quote p{
  font-family:'Proxima Nova',sans-serif;
  font-size:clamp(19px,2.3vw,29px);
  color:#fff;text-align:center;line-height:1.35;
}
.ab-card--quote em{font-style:normal;color:var(--gold-3)}

/* ───── SERVICES ───── */
.services{
  padding:104px 80px;
  background:var(--cream);
}
.services-head{
  display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:end;
  margin-bottom:64px;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.svc{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  cursor:default;
  transition:transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s;
}
.svc:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(26,51,40,0.10);
}
.svc-img{
  height:320px;overflow:hidden;background:var(--sage-4);
}
.svc-img img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 20%;
  transition:transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.svc:hover .svc-img img{transform:scale(1.07)}
.svc{display:flex;flex-direction:column}
.svc-body{padding:24px 22px 44px;display:flex;flex-direction:column;flex:1}
.svc-num{
  font-family:'Proxima Nova',sans-serif;
  font-size:11px;color:var(--ink-4);
  margin-bottom:12px;letter-spacing:0.06em;
}
.svc-title{
  font-family:'Proxima Nova',sans-serif;
  font-size:25px;font-weight:600;
  color:var(--forest);margin-bottom:10px;
  line-height:1.15;
  min-height:2.3em;
}
.svc-desc{
  font-size:14.5px;color:var(--ink);
  line-height:1.75;font-weight:400;
}
.svc-tag{
  display:inline-block;
  margin-top:auto;
  font-size:11px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);
  padding-top:14px;
  border-top:1px solid var(--line);
  width:100%;
}

/* Card reveal: keyframe (not transition) so it survives .svc's own hover transform transition.
   Desktop/tablet only — mobile carousel cards just appear. */
@keyframes svcReveal{
  from{opacity:0;transform:translateY(30px) scale(0.985)}
  to{opacity:1;transform:none}
}
@media (min-width:769px){
  .svc.reveal.visible{animation:svcReveal 1s cubic-bezier(0.22,1,0.36,1) backwards}
  .svc.reveal-delay-1{animation-delay:0.08s}
  .svc.reveal-delay-2{animation-delay:0.22s}
  .svc.reveal-delay-3{animation-delay:0.36s}
  .svc.reveal-delay-4{animation-delay:0.50s}
}
@media (max-width:768px){
  .svc.reveal{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .svc.reveal{opacity:1;transform:none}
  .svc.reveal.visible{animation:none}
}

/* ───── MARQUEE ───── */
.marquee-wrap{
  background:var(--forest);
  padding:16px 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.marquee-track{
  display:flex;gap:0;
  animation:marquee 28s linear infinite;
  width:max-content;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{
  display:flex;align-items:center;gap:20px;
  padding:0 28px;
  font-size:13px;font-weight:400;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--sage-2);white-space:nowrap;
}
.marquee-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);flex-shrink:0}

/* ───── PROCESS ───── */
.process{
  padding:104px 80px;
  background:var(--cream-2);
}
.process-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:72px;align-items:start;
}
/* Left column pins while the cards scroll past */
.process-left{
  position:sticky;top:120px;
}
.process-h2{margin-top:16px;text-align:left}
.process-lead{
  font-size:15.5px;color:var(--ink-2);
  line-height:1.75;font-weight:400;
  margin-top:22px;max-width:360px;
}
.process-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:32px;
  background:var(--forest);color:var(--cream);
  font-size:14px;font-weight:500;letter-spacing:0.03em;
  padding:14px 28px;border-radius:100px;
  text-decoration:none;border:1px solid var(--forest);
  transition:background 0.2s, transform 0.2s;
}
.process-cta:hover{background:var(--forest-3);transform:translateY(-2px)}

.process-right{
  display:flex;flex-direction:column;gap:16px;
}
.pstep{
  display:flex;gap:22px;align-items:flex-start;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 30px;
}
.pstep-num{
  flex-shrink:0;
  width:48px;height:48px;
  border-radius:14px;
  background:var(--forest);
  display:flex;align-items:center;justify-content:center;
  font-family:'Proxima Nova',sans-serif;
  font-size:22px;font-weight:600;line-height:1;
  font-feature-settings:"lnum" 1,"tnum" 1; /* lining tabular figures sit centred */
  color:var(--cream);
  box-shadow:0 8px 20px rgba(27,63,107,0.18);
}
.pstep h3{
  font-family:'Proxima Nova',sans-serif;
  font-size:24px;font-weight:600;
  color:var(--forest);margin-bottom:8px;
  line-height:1.15;
}
.pstep p{
  font-size:14.5px;color:var(--ink);
  line-height:1.75;font-weight:400;
}

/* ───── PRICING ───── */
.pricing{
  padding:104px 80px;
  background:var(--white);
}
.pricing-head{
  text-align:center;max-width:520px;margin:0 auto 64px;
}
.pricing-head p{
  font-size:15px;color:var(--ink-2);
  line-height:1.75;font-weight:400;margin-top:16px;
}
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px;max-width:1020px;margin:0 auto;
  align-items:stretch;
}
/* Sketchbook cards adapted from 21st.dev kokonutd/creative-pricing:
   tilted cards + hard offset shadow that grows on hover */
.pcard{
  --tilt:0deg;
  background:var(--white);
  border:2px solid var(--forest);
  border-radius:14px;
  padding:32px 28px;
  display:flex;flex-direction:column;
  position:relative;
  box-shadow:4px 4px 0 0 var(--forest);
  transition:opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.3s, box-shadow 0.3s;
}
.pcard:nth-child(1){--tilt:-1deg}
.pcard:nth-child(2){--tilt:1deg}
.pcard:nth-child(3){--tilt:-2deg}
.pcard.visible{transform:rotate(var(--tilt));transition-delay:0s}
.pcard.visible:hover{
  transform:rotate(var(--tilt)) translate(-4px,-4px);
  box-shadow:8px 8px 0 0 var(--forest);
}
.best-badge{
  position:absolute;top:-15px;right:-13px;transform:rotate(12deg);
  background:var(--gold-3);color:var(--forest);
  border:2px solid var(--forest);
  font-size:12px;font-weight:600;letter-spacing:0.02em;
  padding:4px 14px;border-radius:100px;white-space:nowrap;
}
.pcard-icon{
  width:48px;height:48px;border-radius:50%;
  border:2px solid var(--forest);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.pcard-icon svg{
  width:22px;height:22px;fill:none;
  stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.pcard-name{
  font-family:'Proxima Nova',sans-serif;
  font-size:26px;font-weight:500;
  color:var(--forest);margin-bottom:4px;
}
.pcard-sub{font-size:13px;color:var(--ink-3);margin-bottom:22px}
.pcard-price{
  display:flex;align-items:baseline;gap:3px;
  margin-bottom:24px;
}
.pcard-curr{font-size:18px;color:var(--ink-3);font-weight:300}
.pcard-amt{
  font-family:'Proxima Nova',sans-serif;
  font-size:52px;font-weight:500;
  color:var(--forest);line-height:1;letter-spacing:-0.02em;
}
.pcard-features{list-style:none;flex:1;margin-bottom:26px}
.pcard-features li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;color:var(--ink-2);
  padding:7px 0;
  line-height:1.5;font-weight:400;
}
.fcheck{
  width:19px;height:19px;border-radius:50%;
  border:2px solid var(--forest);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.fcheck svg{width:9px;height:9px;stroke:var(--forest);stroke-width:2.5;fill:none}
/* Card CTAs get the same hard-shadow treatment */
.pcard .btn-pkg-gold,.pcard .btn-pkg-outline{
  border:2px solid var(--forest);
  border-radius:12px;
  box-shadow:4px 4px 0 0 var(--forest);
  transition:transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.pcard .btn-pkg-gold{background:var(--gold-2);color:#fff}
.pcard .btn-pkg-outline{background:var(--cream);color:var(--forest)}
.pcard .btn-pkg-gold:hover,.pcard .btn-pkg-outline:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 0 var(--forest);
  opacity:1;
}
.pcard .btn-pkg-outline:hover{background:var(--white)}

.btn-pkg-gold{
  display:block;text-align:center;
  background:var(--gold-2);color:#fff;
  font-size:14px;font-weight:500;
  padding:13px;border-radius:100px;
  text-decoration:none;letter-spacing:0.04em;
  transition:opacity 0.2s,transform 0.2s;
}
.btn-pkg-gold:hover{opacity:0.88;transform:translateY(-1px)}
.btn-pkg-outline{
  display:block;text-align:center;
  background:transparent;color:var(--forest);
  font-size:14px;font-weight:500;
  padding:13px;border-radius:100px;
  text-decoration:none;letter-spacing:0.04em;
  border:1.5px solid var(--line-2);
  transition:all 0.2s;
}
.btn-pkg-outline:hover{border-color:var(--forest);background:var(--sage-4)}

/* ───── TESTIMONIALS ───── */
.testimonials{
  padding:104px 80px;
  background:var(--cream);
}
.test-head{margin-bottom:56px}
/* Auto-scrolling marquee: track = three identical .test-set copies, reset by
   one set width (-100%/3) so the loop wraps seamlessly. Full-bleed out of the
   section padding. ponytail: 3 copies keep it gap-free up to ~2x one set
   (~4176px); add a 4th copy if it ever runs on a wider-than-4K display. */
.test-marquee{
  overflow:hidden;
  margin:0 -80px;
  padding:0 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
}
.test-track{
  display:flex;width:max-content;
  animation:test-scroll 55s linear infinite;
}
.test-track:hover{animation-play-state:paused}
.test-set{display:flex;gap:18px;padding-right:18px}
@keyframes test-scroll{to{transform:translateX(calc(-100% / 3))}}
@media (prefers-reduced-motion:reduce){
  .test-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .test-track{animation:none}
  .test-set[aria-hidden]{display:none}
}
.tcard{
  position:relative;
  width:330px;height:440px;
  border-radius:20px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--forest);
}
.tcard img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:brightness(0.92) saturate(0.95);
}
.tcard-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 24px 24px;
  /* navy-tinted gradient keeps overlaid text legible on any photo */
  background:linear-gradient(180deg,rgba(8,15,24,0.14) 0%,rgba(8,15,24,0.06) 24%,rgba(8,15,24,0.62) 42%,rgba(8,15,24,0.94) 62%,rgba(8,15,24,0.98) 100%);
}
.tcard-stars{
  color:var(--gold-3);
  font-size:14px;letter-spacing:3px;
  margin-bottom:12px;
  text-shadow:0 1px 4px rgba(8,15,24,0.5);
}
.tcard-quote{
  font-size:14px;font-weight:400;
  color:#fff;line-height:1.65;
  margin-bottom:16px;
  text-shadow:0 1px 3px rgba(8,15,24,0.9),0 2px 10px rgba(8,15,24,0.6);
}
.tcard-meta{
  display:flex;align-items:baseline;gap:8px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.22);
}
.tcard-name{font-size:14px;font-weight:500;color:#fff}
.tcard-loc{font-size:12px;color:rgba(255,255,255,0.65)}

/* ───── BOOKING ───── */
.booking{
  padding:104px 80px;
  background:var(--cream);
}
.bk-wrap{max-width:1160px;margin:0 auto}
.bk-grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;
  gap:72px;align-items:stretch;
  margin-bottom:28px;
}
.bk-h1{
  font-family:'Proxima Nova',sans-serif;
  font-size:clamp(44px,4.6vw,64px);
  font-weight:400;color:var(--forest);
  line-height:1.04;letter-spacing:-0.01em;
  margin-top:14px;
}
.bk-h1 em{font-style:normal;color:var(--gold-2)}
.bk-sub{
  font-size:15px;color:var(--ink-2);
  line-height:1.75;font-weight:400;
  margin:14px 0 34px;
}
.bk-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:6px 22px;
  transition:border-color 0.2s;
}
.bk-panel:focus-within{border-color:var(--line-2)}
.bk-field{display:flex;align-items:center;gap:14px}
.bk-ic{
  width:36px;height:36px;flex-shrink:0;
  background:var(--sage-4);border:1px solid var(--sage-3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--forest);
}
.bk-field input{
  width:100%;background:none;border:none;outline:none;
  font-family:'Proxima Nova',sans-serif;
  font-size:15.5px;color:var(--ink);
  padding:19px 0;
}
.bk-field input::placeholder{color:var(--ink-4)}
.bk-line{height:1px;background:var(--line-2);margin-left:50px}
.bk-pills{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.bk-pill{
  position:relative;
  display:flex;align-items:center;gap:11px;
  background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:0 16px;
  font-size:17px;color:var(--forest);
  cursor:pointer;transition:border-color 0.2s;
}
.bk-pill:focus-within{border-color:var(--line-2)}
.bk-pill select{
  width:100%;appearance:none;-webkit-appearance:none;
  background:none;border:none;outline:none;cursor:pointer;
  font-family:'Proxima Nova',sans-serif;
  font-size:14px;font-weight:500;color:var(--ink-2);
  padding:16px 18px 16px 0;
}
.bk-pill::after{
  content:'';position:absolute;right:16px;top:50%;
  transform:translateY(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--ink-3);
  pointer-events:none;
}
.bk-actions{display:flex;align-items:center;gap:28px;margin-top:26px}
.bk-cta{
  background:var(--forest);color:var(--cream);
  font-family:'Proxima Nova',sans-serif;font-size:15px;font-weight:500;
  padding:17px 32px;border-radius:12px;border:none;cursor:pointer;
  letter-spacing:0.03em;
  transition:background 0.2s,transform 0.15s;
}
.bk-cta:hover{background:var(--forest-3);transform:translateY(-1px)}
.bk-alt{
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  text-decoration:none;transition:color 0.2s;
}
.bk-alt:hover{color:var(--forest)}
.bk-img{border-radius:20px;overflow:hidden;min-height:460px;max-height:640px}
.bk-img img{width:100%;height:100%;object-fit:cover;display:block}

/* FORM (lead-capture modal) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fgrp{display:flex;flex-direction:column;gap:6px}
.fgrp label{
  font-size:11px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.fgrp input,.fgrp textarea,.fgrp select{
  background:var(--cream);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:11px 14px;
  font-family:'Proxima Nova',sans-serif;
  font-size:14px;color:var(--ink);
  outline:none;
  transition:border-color 0.2s,background 0.2s;
  width:100%;appearance:none;-webkit-appearance:none;
}
.fgrp input:focus,.fgrp textarea:focus,.fgrp select:focus{
  border-color:var(--forest);background:var(--white);
}
.fgrp input::placeholder,.fgrp textarea::placeholder{color:var(--ink-4)}
.fgrp textarea{resize:vertical;min-height:96px;line-height:1.6}
.ffull{margin-bottom:14px}

/* Honeypot field for spam bots - visually hidden, still in the tab/DOM but ignored by real users */
.hp-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}

.btn-send{
  width:100%;background:var(--forest);color:var(--cream);
  font-family:'Proxima Nova',sans-serif;font-size:14.5px;font-weight:500;
  padding:15px;border-radius:100px;border:none;cursor:pointer;
  letter-spacing:0.04em;
  transition:background 0.2s,transform 0.15s;
}
.btn-send:hover{background:var(--forest-3);transform:translateY(-2px)}

/* ───── FOOTER ───── */
footer{
  background:var(--ink);
  padding:24px 24px 0;
}
.footer-card{
  background:linear-gradient(135deg,var(--forest) 0%,var(--forest-2) 55%,var(--forest-3) 100%);
  border-radius:40px;
  padding:72px 80px;
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:56px;
}
.footer-logo{margin-bottom:22px}
.footer-brand p{
  font-size:14px;color:var(--sage-2);
  line-height:1.75;font-weight:400;max-width:340px;
  margin-bottom:28px;
}
.footer-col h3{
  font-size:16px;font-weight:500;color:var(--white);margin-bottom:22px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.footer-col ul a,.footer-col p a{
  font-size:14px;color:var(--sage-2);
  text-decoration:none;font-weight:300;
  transition:color 0.2s;
}
.footer-col ul a:hover,.footer-col p a:hover{color:var(--white)}
.footer-col p{font-size:14px;color:var(--sage-2);line-height:1.85;font-weight:300}
.footer-bottom{text-align:center;padding:32px 20px 36px}
.footer-copy{font-size:13px;color:var(--sage);font-weight:300}
.footer-copy-link{color:var(--sage-2);text-decoration:none;transition:color 0.2s}
.footer-copy-link:hover{color:var(--white)}
.footer-socials{display:flex;gap:12px}
.fsoc{
  width:44px;height:44px;border-radius:50%;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:transform 0.2s,background 0.2s;
}
.fsoc:hover{transform:translateY(-2px);background:var(--cream)}
.fsoc svg{width:20px;height:20px;fill:var(--forest)}


/* ───── BOOKING SELECTOR WIZARD (breed selector options) ───── */
.bsopt{
  background:var(--white);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:16px 12px;
  text-align:center;
  cursor:pointer;
  transition:border-color 0.2s, transform 0.15s;
}
.bsopt:hover{border-color:var(--forest);transform:translateY(-2px)}
.bsopt.bsselected{border:2px solid var(--gold-2);background:var(--gold-4);}

/* Quiz card hidden behind the "Don't know where to start?" toggle */
.bs-collapse{max-height:0;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.22,1,0.36,1);}
.bs-collapse.open{max-height:1100px;}
#bs-toggle i{transition:transform 0.3s;}
#bs-toggle[aria-expanded="true"] i{transform:rotate(180deg);}

/* Step transitions — the display:none→block flip restarts the animation
   each time bsGoTo() shows a step, so no JS choreography needed */
@keyframes bs-step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bs-step-outer,#bs-result{animation:bs-step-in 0.4s cubic-bezier(0.22,1,0.36,1);}
.bs-pip{transition:background 0.35s ease;}
@media (prefers-reduced-motion:reduce){
  .bs-step-outer,#bs-result{animation:none}
}

/* ───── FAQ — chat-style (ported from amtec-uikit blocks/faq-2) ─────
   Questions are left-aligned pill bubbles with a +/− circle; answers
   drop in as right-aligned forest bubbles, like a chat thread. */
.faq-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.7fr;
  gap:72px;align-items:start;
}
.faq-intro{position:sticky;top:120px;}
.faq-btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px;}
.faq-list{display:flex;flex-direction:column;gap:18px;}
.faq-q{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:0;background:none;border:none;cursor:pointer;text-align:left;
}
.faq-bubble{
  max-width:85%;
  padding:14px 22px;border-radius:100px;
  background:var(--cream-2);border:1px solid var(--line);
  font-family:'Proxima Nova',sans-serif;
  font-size:15px;font-weight:500;color:var(--forest);
  line-height:1.5;
  transition:background 0.2s,border-color 0.2s;
}
.faq-q:hover .faq-bubble,
.faq-item.open .faq-bubble{background:var(--gold-4);border-color:var(--gold-2);}
.faq-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Proxima Nova',sans-serif;
  font-size:16px;font-weight:400;color:var(--sage);
  transition:transform 0.25s,color 0.2s,border-color 0.2s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--forest);border-color:var(--forest);}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height 0.35s cubic-bezier(0.22,1,0.36,1);
}
.faq-item.open .faq-a{max-height:500px;}
.faq-a-bubble{
  width:fit-content;max-width:85%;
  margin:14px 40px 6px auto;
  padding:16px 22px;border-radius:20px;border-bottom-right-radius:6px;
  background:var(--forest);
  transform:translateY(-8px) scale(0.97);opacity:0;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),opacity 0.3s;
}
.faq-item.open .faq-a-bubble{transform:none;opacity:1;}
.faq-a-bubble p{
  font-size:14.5px;color:#fff;
  line-height:1.8;font-weight:300;
}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr;gap:28px;}
  .faq-intro{position:static;}
  /* decorative thinker eats ~250px and pushes every question below the fold */
  .faq-mascot{display:none;}
  /* full-width rows: pill stretches, + pins to a consistent right edge */
  .faq-bubble{max-width:none;flex:1;}
  .faq-a-bubble{max-width:100%;margin-right:0;}
}

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

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE STYLES
   Desktop (>1024px) is completely untouched by everything below —
   these are pure additive overrides layered in three tiers:

     1) max-width:1024px  → light density pass (small laptop / large
        tablet). Trims oversized gutters and tightens the nav so
        nothing gets close to overflowing before the main collapse.
     2) max-width:768px   → main mobile collapse (tablet portrait
        down to phones). Every multi-column grid becomes 1 column,
        the hero restructures, nav shrinks, headings scale down.
     3) max-width:600px   → phone-only refinements: tighter nav
        padding and a smaller logo.
   ════════════════════════════════════════════════════════════════ */

/* ───── TIER 1: max-width 1024px — light density pass ───── */
@media (max-width:1024px){
  nav{padding:0 32px}
  .nav-links{gap:20px}
  .nav-cta{padding:13px 18px;font-size:13px}

  .hero-content{padding:0 40px 56px}
  .trust{padding:16px 40px;gap:28px}

  .services,.process,.pricing,.testimonials,.booking{padding:72px 40px}
  .test-marquee{margin:0 -40px}
  footer{padding:20px 20px 0}
  .footer-card{padding:56px 48px;gap:40px}
  section[style*="104px 80px"]{padding:72px 40px !important}
  /* mascot/quiz section: desktop trims top padding; restore original on tablet/mobile */
  section[style*="8px 80px 72px"]{padding:72px 80px !important}

  .about{padding:80px 0 72px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  /* booking info strip: 4-across → 2×2 */
  div[style*="grid-template-columns:repeat(4,auto)"]{grid-template-columns:repeat(2,auto) !important}
  .bk-grid{gap:40px}
}

/* ───── TIER 2: max-width 768px — main mobile collapse ───── */
@media (max-width:768px){

  /* NAV — logo shrinks; links + CTA collapse into the burger-driven
     full-screen menu (see MOBILE MENU at the end of this file) */
  nav{padding:0 20px;height:64px}
  nav.scrolled{height:58px}
  .logo img{height:44px !important;width:auto !important}
  .nav-links,.nav-cta{display:none}

  /* HERO — stack copy above the stats card instead of clipping it
     off the right edge; let the section grow with its content
     rather than forcing a fixed 100vh that would crop the headline.
     padding-top clears the fixed nav (64px) — needed because on very
     narrow screens the tag/heading can wrap enough that content
     height overtakes min-height, and flex-end would otherwise pin
     the top of the copy flush behind the nav bar. */
  .hero{height:auto;min-height:100vh;min-height:100svh}
  /* Sunlit mobile image runs at full opacity — the 0.82 dim + navy underlay
     is a desktop treatment for the moody still and its video loop.
     hero-mobile.jpg has the dog composed in the right third; 80% keeps him
     there on narrow crops without clipping the tulip off the right edge. */
  .hero-bg img{opacity:1;object-position:85% 30%}
  /* Left fade keeps the headline on a dark ground (trees/fence), bottom
     scrim covers the copy over the pale stone paving */
  .hero-overlay{
    background:
      linear-gradient(to right, rgba(8,18,35,0.62) 0%, rgba(8,18,35,0.26) 45%, rgba(8,18,35,0) 72%),
      linear-gradient(
        to bottom,
        rgba(8,18,35,0.50) 0%,
        rgba(8,18,35,0.10) 30%,
        rgba(8,18,35,0.30) 52%,
        rgba(8,18,35,0.92) 100%
      );
  }
  /* Text halo: tight shadow defines the letter edge, wide diffuse one buys
     local contrast where a line crosses the dog's bright coat */
  .hero-h1{text-shadow:0 2px 8px rgba(8,18,35,0.40), 0 10px 44px rgba(8,18,35,0.50)}
  /* Mid-blue accent disappears against the sunlit coat — the halo only
     rescues light colours, so step the accent up to the pale blue */
  .hero-h1 em,.hero-swash{color:var(--gold-3)}
  .hero-sub{
    color:rgba(255,255,255,0.96);font-weight:400;
    text-shadow:0 1px 3px rgba(8,18,35,0.55), 0 4px 26px rgba(8,18,35,0.55);
  }
  .hero-card-num,.hero-card-label{text-shadow:0 1px 3px rgba(8,18,35,0.5)}
  .hero-content{padding:96px 24px calc(28px + env(safe-area-inset-bottom))}
  .hero-h1{font-size:clamp(44px,13vw,60px);margin-bottom:18px}
  .hero-sub{font-size:15px;line-height:1.6;margin-bottom:28px;max-width:32ch}
  .hero-sub br{display:none}
  .hero-btns{flex-direction:column;align-items:flex-start;gap:10px}
  .btn-hero-primary,.btn-hero-ghost{justify-content:center;font-size:15px;padding:15px 30px}
  .btn-hero-primary{width:auto}
  /* One CTA on phones — pricing is a swipe away and the quiz/WhatsApp cover
     the undecided; keep the ghost on desktop where the pair sits inline */
  .hero-btns .btn-hero-ghost{display:none}
  .hero-card{
    width:100%;display:flex;
    padding:20px 4px 0;
    margin-top:26px;
    border-top:1px solid rgba(255,255,255,0.16);
  }
  .hero-card-stat{flex:1;text-align:center}
  .hero-card-div{height:34px;margin:0}
  .hero-card-num{font-size:21px}
  .hero-card-label{font-size:10.5px;letter-spacing:0.08em}

  /* TRUST STRIP — desktop-only. On mobile it repeated hero info and pushed
     the services fold down; the about pills carry the same claims. */
  .trust{display:none}

  /* WhatsApp float — held back while the hero is on screen (main.js toggles
     .wa-hidden) so it doesn't sit on the stats row. !important beats the
     button's inline styles. */
  #whatsapp-btn{transition:opacity .35s ease, transform .35s ease !important}
  #whatsapp-btn.wa-hidden{opacity:0;pointer-events:none;transform:scale(0.7) !important}

  /* Shared heading scale-down for every h2 */
  .section-h2{font-size:clamp(30px,9vw,42px);margin-bottom:20px}

  /* ABOUT — tighten spacing; card sizes already shrink via clamp() */
  .about{padding:56px 0 48px}
  .about-inner{padding:0 20px}
  .about-portrait{width:120px;height:120px;margin-bottom:22px}
  .about-strip{margin-top:44px;gap:12px}
  .about-strip-row{gap:12px}

  /* SERVICES — grid → swipeable scroll-snap cards, head → stacked/left-aligned */
  .services{padding:56px 0 56px 20px}
  .services-head{grid-template-columns:1fr;gap:20px;margin-bottom:32px;padding-right:20px}
  .services-grid{
    display:flex;grid-template-columns:none;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 20px 4px 0;
    scrollbar-width:none;
  }
  .services-grid::-webkit-scrollbar{display:none}
  .svc{flex:0 0 82%;scroll-snap-align:start}
  .svc-img{height:220px}

  /* PROCESS — 2-col → stacked, drop sticky */
  .process{padding:56px 20px}
  .process-inner{grid-template-columns:1fr;gap:36px}
  .process-left{position:static;top:auto}
  .process-lead{max-width:100%}
  .pstep{padding:22px 22px;gap:16px}
  .pstep-num{width:44px;height:44px;font-size:20px}

  /* Breed selector / FAQ / Store — these three sections use inline
     `style="padding:104px 80px"` in the HTML, matched here by
     attribute selector since the HTML can't be edited */
  section[style*="104px 80px"]{padding:56px 20px !important}
  /* quiz section — undoes the 1024px tier's 80px gutters (!important vs !important,
     later in cascade wins) which were crushing the card to ~230px on phones */
  section[style*="8px 80px 72px"]{padding:40px 20px 56px !important}
  div[style*="border-radius:24px;padding:40px"]{padding:24px !important}
  div[style*="repeat(5,1fr)"]{gap:8px !important;margin-bottom:32px !important}

  /* PRICING — 3-col → 1 col, neutralise the "best value" scale-up */
  .pricing{padding:56px 20px}
  .pricing-grid{grid-template-columns:1fr;gap:16px;max-width:420px;margin:0 auto}
  .pcard{padding:28px 22px;--tilt:0deg}  /* stacked full-width: straighten the tilt, it reads as wonky */
  .pcard.best:hover{transform:translateY(-2px)}

  /* TESTIMONIALS — marquee cards shrink */
  .testimonials{padding:56px 20px}
  .test-head{margin-bottom:32px}
  .test-marquee{margin:0 -20px}
  .tcard{width:270px;height:390px}

  /* CONTACT / BOOKING — the info strip is inline-styled in the HTML; stack it */
  .booking{padding:56px 20px}
  div[style*="grid-template-columns:repeat(4,auto)"]{grid-template-columns:1fr !important;gap:16px !important;padding:20px !important}
  .bk-grid{grid-template-columns:1fr;gap:28px}
  .bk-img{min-height:0;height:240px}
  .bk-actions{flex-direction:column;align-items:stretch;gap:16px;text-align:center}

  /* FOOTER — 3-col → 1 col, smaller logo */
  footer{padding:14px 14px 0}
  .footer-card{grid-template-columns:1fr;gap:36px;padding:44px 28px;border-radius:28px}
  .footer-brand p{max-width:100%}
  .footer-bottom{padding:24px 16px 28px}
  img[style*="height:110px"]{height:70px !important}
}

/* ───── TIER 3: max-width 600px — phone-only refinements ───── */
@media (max-width:600px){
  nav{padding:0 14px}
  .logo img{height:38px !important;width:auto !important}

  /* booking pills: side-by-side runs out of room for the longer option labels */
  .bk-pills{grid-template-columns:1fr}

  .bk-img{display:none}

  /* QUIZ — 2/3-across option cards (inline grid-template-columns) are
     unreadable at phone width; stack them as rows, icon left / text right */
  .bs-step-outer > div + div{grid-template-columns:1fr !important}
  .bsopt{
    display:grid;grid-template-columns:34px 1fr;column-gap:12px;
    align-items:center;text-align:left;padding:14px 16px;
  }
  .bsopt > div:first-child{grid-row:span 2;margin-bottom:0 !important}
  /* taller single-column steps need more collapse headroom */
  .bs-collapse.open{max-height:1500px}
}

/* ───── DOG ANIMATIONS (Higgsfield-generated loops) ─────
   Every video is muted + loop + playsinline; the underlying <img> stays as
   poster/fallback, so a missing or unloadable mp4 degrades to the static site. */

/* Living hero: video fades in over the hero img once actually playing */
.hero-bg video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-bg video.playing{opacity:0.82}
/* fade the still OUT as the video fades in — at 0.82 opacity the two layers
   ghost into each other wherever their framing differs */
.hero-bg img{transition:transform 8s ease-out, opacity 1.2s ease}
.hero-bg img.video-live{opacity:0}
/* Mobile living hero (hero-mobile.mp4, swapped in main.js): a 3:4 loop with
   the same right-third composition as the sunlit still — 88% keeps the dog
   right of centre without clipping the tulip. No dim: the grade is already
   right. Sits after the base rules above so it wins the cascade. */
@media (max-width:768px){
  .hero-bg video{object-position:88% 30%}
  .hero-bg video.playing{opacity:1}
}

/* Service cards: video plays + fades in on hover, img beneath otherwise */
.svc-img{position:relative}
.svc-img video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  opacity:0;transition:opacity 0.45s ease;
}
.svc-img video.playing{opacity:1}

/* Cartoon clips ship as alpha video (.mov HEVC / .webm VP9) — regenerate with
   scripts/make-alpha.py if the source clips change. No colour-matching
   filters needed. */

/* Quiz mascot */
.quiz-mascot{width:170px;margin:0 auto 4px}
.quiz-mascot video,.quiz-mascot img{width:100%;display:block}
.quiz-mascot img{display:none}

/* Booking peek: wrapper crops the clip's empty margins so the pup's chin sits
   exactly on the form panel's top edge. ponytail: px crop tuned to the one
   generated clip; regenerate the clip → retune these three numbers. */
.bk-peek{
  display:flex;justify-content:flex-end;align-items:flex-start;
}
.bk-peek video{width:210px;display:block;margin-top:-29px;margin-bottom:-56px}

/* Celebration clip injected into the quiz result card */
.bs-celebrate{width:110px;display:block;margin:0 auto 4px}

/* FAQ thinker: sits under the buttons in the sticky intro column */
.faq-mascot{width:180px;margin-top:32px}
.faq-mascot video{width:100%;display:block}

/* Pricing sleeper: centered nap under the price cards */
.pricing-sleeper{width:200px;margin:40px auto 0}
.pricing-sleeper video{width:100%;display:block}

/* Walker: mascot trots across the full page width above the footer.
   The clip is a treadmill walk-in-place; this animation provides the travel. */
.dog-walker{position:relative;height:110px;margin-top:40px;overflow:hidden}
.dog-walker video{
  position:absolute;bottom:0;left:0;width:150px;
  transform:translateX(-160px);
  animation:dog-walk 30s linear infinite;
}
/* crosses in ~18s (matches the trot pace), then rests off-screen ~12s */
@keyframes dog-walk{
  0%{transform:translateX(-160px)}
  60%{transform:translateX(100vw)}
  100%{transform:translateX(100vw)}
}

/* Drifting paw prints layered over the existing .paw-bg wash */
.paw-bg::after{
  content:'';
  position:absolute;inset:-160px 0 -160px 0;
  pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='%231B3F6B' transform='translate(48 48) rotate(-18)'%3E%3Cellipse cx='0' cy='14' rx='11' ry='9'/%3E%3Cellipse cx='-15' cy='-2' rx='4.5' ry='6.5'/%3E%3Cellipse cx='-5' cy='-9' rx='4.5' ry='6.5'/%3E%3Cellipse cx='6' cy='-9' rx='4.5' ry='6.5'/%3E%3Cellipse cx='16' cy='-2' rx='4.5' ry='6.5'/%3E%3C/g%3E%3Cg fill='%231B3F6B' transform='translate(118 120) rotate(14)'%3E%3Cellipse cx='0' cy='14' rx='11' ry='9'/%3E%3Cellipse cx='-15' cy='-2' rx='4.5' ry='6.5'/%3E%3Cellipse cx='-5' cy='-9' rx='4.5' ry='6.5'/%3E%3Cellipse cx='6' cy='-9' rx='4.5' ry='6.5'/%3E%3Cellipse cx='16' cy='-2' rx='4.5' ry='6.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:0.022;
  animation:paw-drift 46s linear infinite;
}
@keyframes paw-drift{to{transform:translateY(-160px)}}

/* WhatsApp button: little wiggle every ~9s (on the svg so it doesn't fight
   the button's inline hover transform) */
@keyframes wa-wiggle{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(-10deg)}
  90%{transform:rotate(9deg)}
  92%{transform:rotate(-7deg)}
  94%{transform:rotate(5deg)}
  96%{transform:rotate(-2deg)}
}
#whatsapp-btn svg{animation:wa-wiggle 9s ease-in-out infinite}

/* WhatsApp float is mobile-only (desktop has the Facebook chat widget).
   On phones main.js reveals it past the hero via .wa-hidden; here we just
   hide it above the phone breakpoint. !important beats the inline display. */
@media (min-width:769px){
  #whatsapp-btn,#wa-tooltip{display:none !important}
}

/* ───── MOBILE MENU (burger + full-screen overlay, ≤768px only) ───── */

/* Burger: three lines that morph into an X when aria-expanded flips */
.nav-burger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
  width:44px;height:44px;padding:0;
  background:none;border:none;cursor:pointer;
  color:var(--forest);
}
.nav-burger span{
  width:24px;height:2px;border-radius:2px;
  background:currentColor;
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease;
}
nav.hero-mode .nav-burger{color:#fff}
nav.scrolled.hero-mode .nav-burger{color:var(--forest)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0.4)}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{display:none}

@media (max-width:768px){
  .nav-burger{display:flex}

  /* Overlay wipes in as a circle growing out of the burger's corner */
  .mobile-menu{
    position:fixed;inset:0;z-index:190; /* under the nav (200) so logo + burger stay on top */
    background:var(--forest);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;padding:80px 24px 32px;
    clip-path:circle(0 at calc(100% - 42px) 32px);
    visibility:hidden;
    transition:clip-path 0.55s cubic-bezier(0.22,1,0.36,1), visibility 0s 0.55s;
  }
  body.menu-open .mobile-menu{
    clip-path:circle(142% at calc(100% - 42px) 32px);
    visibility:visible;
    transition:clip-path 0.55s cubic-bezier(0.22,1,0.36,1);
  }

  /* Nav bar goes transparent over the navy overlay; logo flips to white.
     #nav id beats the nav.scrolled/.hero-mode class variants above. */
  body.menu-open #nav{background:transparent;border-color:transparent;backdrop-filter:none}
  body.menu-open #nav .logo img{filter:brightness(0) invert(1)}
  body.menu-open #nav .nav-burger{color:var(--cream)}
  body.menu-open #whatsapp-btn{opacity:0;pointer-events:none}

  .mobile-menu-link{
    font-family:'Proxima Nova',sans-serif;
    font-size:34px;font-weight:500;letter-spacing:0.01em;
    color:var(--cream);text-decoration:none;
    padding:10px 16px;
  }
  .mobile-menu .btn-hero-primary{width:auto;margin-top:18px} /* undo the hero's width:100% */
  .mobile-menu-mascot{width:150px;margin-top:26px}
  .mobile-menu-mascot video,.mobile-menu-mascot img{width:100%;display:block}
  .mobile-menu-mascot img{display:none}

  /* Items rise in one after another as the wipe lands */
  .mobile-menu>*{
    opacity:0;transform:translateY(22px);
    transition:opacity 0.4s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
  }
  body.menu-open .mobile-menu>*{opacity:1;transform:none}
  body.menu-open .mobile-menu>:nth-child(1){transition-delay:0.10s}
  body.menu-open .mobile-menu>:nth-child(2){transition-delay:0.16s}
  body.menu-open .mobile-menu>:nth-child(3){transition-delay:0.22s}
  body.menu-open .mobile-menu>:nth-child(4){transition-delay:0.28s}
  body.menu-open .mobile-menu>:nth-child(5){transition-delay:0.34s}
  body.menu-open .mobile-menu>:nth-child(6){transition-delay:0.40s}
}

@media (prefers-reduced-motion:reduce){
  .hero-bg video,.svc-img video,.bk-peek,.quiz-mascot video,.bs-celebrate,
  .faq-mascot,.pricing-sleeper,.dog-walker,.mobile-menu-mascot video{display:none}
  .quiz-mascot img,.mobile-menu-mascot img{display:block}
  .paw-bg::after,#whatsapp-btn svg{animation:none}
  .mobile-menu,.mobile-menu>*,.nav-burger span{transition:none}
}