/* ─────────────────────────────────────────────
   TOKENS — auto-updated from C.accentColour
   Upgraded: Manrope font, improved contrast,
   vibrant colours, larger radii, richer shadows
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  --a:    #2c6e49;
  --ad:   #1e4d33;
  --ab:   #3a8f60;
  --alt:  rgba(44,110,73,.14);
  --axlt: rgba(44,110,73,.07);
  --sha:  0 12px 36px rgba(44,110,73,.32);

  --bg:   #f7f6f3;
  --s:    #ffffff;
  --s2:   #f0efe9;
  --s3:   #e8e6df;
  --s4:   #faf9f7;
  --ink:  #111111;
  --i80:  rgba(17,17,17,.80);
  --i60:  rgba(17,17,17,.62);
  --i40:  rgba(17,17,17,.42);
  --i20:  rgba(17,17,17,.20);
  --i12:  rgba(17,17,17,.12);
  --i06:  rgba(17,17,17,.06);
  --dk:   #0e0e0d;

  --serif: 'Oswald', Impact, sans-serif;
  --sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --e:      cubic-bezier(.4,0,.2,1);
  --eo:     cubic-bezier(0,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --r-card: 20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --card-shadow:       0 2px 12px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.07);
  --card-shadow-hover: 0 4px 20px rgba(0,0,0,.08), 0 16px 44px rgba(0,0,0,.11);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden;font-feature-settings:'kern' 1,'liga' 1}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
::selection{background:var(--alt);color:var(--a)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--s2)}
::-webkit-scrollbar-thumb{background:var(--i20);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--a)}
.hidden{display:none!important}

/* ─── LAYOUT ─── */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 1.5rem}

.sec   {padding:7.5rem 0}
.sec-lg{padding:5rem 0}
.sec-sm{padding:4rem 0}

.bg-s {background:var(--s)}
.bg-s2{background:var(--s2)}
.bg-alt{background:var(--s4)}
.bg-dk{background:var(--dk)}
.bg-a {background:var(--a)}

.g2{display:grid;grid-template-columns:1fr;gap:3rem}
.g3{display:grid;grid-template-columns:1fr;gap:1.5rem}
.g4{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:640px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.g2{grid-template-columns:1fr 1fr;align-items:center}}
@media(min-width:780px){.g4{grid-template-columns:repeat(4,1fr)}}

.sh{margin-bottom:3.5rem}
.sh .ol{display:block;margin-bottom:.75rem}
.sh p{margin-top:1.1rem;max-width:520px}
.sh-c{text-align:center}
.sh-c p{margin-left:auto;margin-right:auto}

/* ─── TYPE ─── */
.ol{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--a)}
.d1{font-family:var(--serif);font-size:clamp(3rem,9vw,5.6rem);font-weight:700;line-height:.98;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.6rem);font-weight:700;line-height:1.02;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:600;line-height:1.06;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.18;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.bl{font-size:1.08rem;line-height:1.78;color:var(--i80)}
.bd{font-size:1rem;line-height:1.72;color:var(--i80)}
.sm{font-size:.875rem;line-height:1.6;color:var(--i60)}
em{font-style:normal;color:var(--a);font-weight:700}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.95rem 2rem;
  border-radius:100px;
  font-size:.9rem;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:.01em;
  transition:transform .22s var(--spring),box-shadow .22s var(--e),background .18s var(--e),border-color .18s var(--e)
}
.btn svg{width:16px;height:16px;flex-shrink:0}

.bp{
  background:var(--a);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px rgba(44,110,73,.28);
}
.bp:hover{background:var(--ad);transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.1),0 10px 28px rgba(44,110,73,.38)}
.bs{background:var(--s);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06);border:1.5px solid var(--i12)}
.bs:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.09)}
.bo{background:transparent;color:var(--ink);border:1.5px solid var(--i20)}
.bo:hover{border-color:var(--a);color:var(--a);transform:translateY(-2px)}
.bwa{background:#22c55e;color:#fff;box-shadow:0 4px 14px rgba(34,197,94,.28)}
.bwa:hover{background:#16a34a;transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,197,94,.36)}
.bdk{background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.bdk:hover{background:#2a2a2a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.26)}
.bgl{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.26);backdrop-filter:blur(10px)}
.bgl:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.btn-sm{padding:.62rem 1.25rem;font-size:.82rem}

/* ─── NAV ─── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:1.1rem 1.5rem;
  transition:background .35s var(--e),box-shadow .35s var(--e),padding .28s var(--e)
}
#nav.scrolled{
  background:rgba(247,246,243,.97);
  backdrop-filter:blur(24px) saturate(1.9);
  -webkit-backdrop-filter:blur(24px) saturate(1.9);
  box-shadow:0 1px 0 var(--i12),0 4px 20px rgba(0,0,0,.05);
  padding:.85rem 1.5rem
}

/* ── Mobile: nav is always solid from page load ── */
@media(max-width:768px){
  #nav{
    background:rgba(247,246,243,.97);
    backdrop-filter:blur(20px) saturate(1.8);
    -webkit-backdrop-filter:blur(20px) saturate(1.8);
    box-shadow:0 1px 0 var(--i12),0 2px 12px rgba(0,0,0,.06);
    padding:.9rem 1.25rem
  }
}
.nav-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.nav-logo{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--serif);font-size:1.1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);flex-shrink:0
}
/* Logo image — no box, just the dog mark */
.nav-logo-img{
  height:44px;
  width:auto;
  display:block;
  border-radius:0;
  object-fit:contain;
  /* Black logo on light background — mix-blend-mode darkens it cleanly */
  mix-blend-mode:multiply;
  transition:transform .2s var(--spring),opacity .2s var(--e)
}
.nav-logo:hover .nav-logo-img{transform:scale(1.06);opacity:.85}
.nav-links{display:none;align-items:center;gap:2rem}
.nav-links a{
  font-size:.875rem;font-weight:600;color:var(--i60);padding:.4rem 0;
  position:relative;transition:color .18s
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-2px;
  width:0;height:2px;background:var(--a);border-radius:2px;
  transition:width .22s var(--e)
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:none}

.ham{
  display:flex;flex-direction:column;gap:5px;
  padding:10px;margin:-10px;border-radius:8px;
  transition:background .18s
}
.ham:hover{background:var(--i06)}
.ham span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s var(--e)}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mob{
  position:fixed;inset:0;z-index:190;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  opacity:0;pointer-events:none;transition:opacity .3s var(--e)
}
.mob.open{opacity:1;pointer-events:all}
.mob a{
  font-family:var(--serif);font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);padding:.75rem 2rem;border-radius:12px;
  min-width:180px;text-align:center;
  transition:color .2s,background .2s
}
.mob a:hover{color:var(--a);background:var(--axlt)}
@media(min-height:600px){.mob{gap:1rem}.mob a{font-size:1.2rem}}
@media(min-height:700px){.mob a{font-size:1.4rem;letter-spacing:-.02em}.mob{gap:1.1rem}}
@media(min-width:900px){.nav-links{display:flex}.nav-cta{display:inline-flex}.ham{display:none}}

/* ─── HERO ─── */
#hero{
  min-height:88svh;display:flex;align-items:flex-end;
  padding-bottom:5.5rem;padding-top:90px;
  position:relative;overflow:hidden
}
.hbg{position:absolute;inset:0;z-index:0}

/* Show/hide per breakpoint */
.hbg-mobile{display:none}
.hbg-desktop{display:block}

/* Desktop overlay — sweeps left to right */
.hov{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(247,246,243,.97) 0%,rgba(247,246,243,.88) 42%,rgba(247,246,243,.28) 70%,transparent 100%)
}

/* Mobile overlay — very transparent so image shows through */
.hov-mob{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(247,246,243,.35) 0%,
    rgba(247,246,243,.25) 35%,
    rgba(247,246,243,.45) 65%,
    rgba(247,246,243,.85) 100%
  )
}

.hc{position:relative;z-index:1}

/* Text box — transparent on desktop, frosted glass on mobile */
.h-textbox{}

.hh{
  font-family:var(--serif);
  font-size:clamp(3.5rem,11.5vw,5.6rem);
  font-weight:700;line-height:1.0;letter-spacing:-.032em;color:var(--ink);
  margin-bottom:1.4rem;
  opacity:0;animation:su .8s var(--eo) .15s both
}
.hs{
  max-width:460px;font-size:1.1rem;line-height:1.78;color:var(--i80);
  margin-bottom:2.5rem;
  opacity:0;animation:su .8s var(--eo) .3s both
}
.ha{
  display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:3rem;
  opacity:0;animation:su .8s var(--eo) .45s both
}
.ht{
  display:none;
  opacity:0;animation:su .8s var(--eo) .6s both
}
@media(min-width:640px){.ht{display:flex;flex-wrap:wrap;gap:1.5rem}}
.tp{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--i80)}
.tp::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--a);flex-shrink:0}

/* ─── MOBILE HERO: centred portrait + frosted text box ─── */
@media(max-width:768px){
  #hero{
    min-height:100svh;
    align-items:flex-end;
    padding-bottom:4.5rem;
    padding-top:80px;
    text-align:center
  }
  .hbg-desktop{display:none}
  .hbg-mobile{
    display:block;
    /* Centre the portrait, show trainer from waist up */
    background-position:center 8% !important;
    background-size:cover !important
  }

  /* Transparent text box — subtle shadow for legibility, not a solid box */
  .h-textbox{
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:1.5rem 1rem 1.75rem;
    margin:0 auto;
    max-width:96vw;
    /* Text shadow on children handles legibility instead */
  }
  /* Give text a subtle shadow so it reads over the image */
  .hh{
    font-size:clamp(2.6rem,10vw,3.3rem);
    margin-bottom:.9rem;
    letter-spacing:.02em;
    text-shadow:0 2px 16px rgba(247,246,243,.7),0 1px 4px rgba(247,246,243,.5)
  }
  .hs{
    font-size:.95rem;
    line-height:1.7;
    margin-bottom:1.5rem;
    max-width:100%;
    color:var(--i80);
    text-shadow:0 1px 8px rgba(247,246,243,.8)
  }
  .ha{
    justify-content:center;
    gap:.5rem;
    margin-bottom:0
  }
  .ha .btn{font-size:.82rem;padding:.78rem 1.2rem}
}

/* ─── SERVICE CARDS ─── */
.sc{
  background:var(--s);
  border-radius:var(--r-lg);
  padding:2.25rem 2rem;
  border:1px solid var(--i06);
  position:relative;overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:transform .3s var(--spring),box-shadow .3s var(--e),border-color .3s var(--e)
}
.sc::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(44,110,73,.04) 0%,transparent 60%);
  border-radius:inherit;opacity:0;
  transition:opacity .3s var(--e)
}
.sc:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:var(--alt)}
.sc:hover::after{opacity:1}
.sc-ico{
  width:52px;height:52px;background:var(--alt);border-radius:14px;
  display:grid;place-items:center;font-size:1.5rem;margin-bottom:1.4rem;
  transition:transform .25s var(--spring)
}
.sc:hover .sc-ico{transform:scale(1.08)}
.sc h3{margin-bottom:.45rem;color:var(--ink)}
.sc p{font-size:.9rem;color:var(--i80);line-height:1.68;margin-top:.4rem}
.sc-tag{
  display:inline-block;background:var(--alt);color:var(--a);
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.22rem .72rem;border-radius:100px;margin-top:1.25rem
}

/* ─── ABOUT ─── */
.tphoto{
  border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(145deg,var(--alt) 0%,var(--s3) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 40px rgba(0,0,0,.10)
}
.tphoto-ph{opacity:.3;text-align:center}
.tphoto-ph svg{width:72px;height:72px;color:var(--a)}
.tphoto-ph p{font-size:.78rem;color:var(--i40);margin-top:.75rem}
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
.sb{
  background:var(--axlt);border-radius:16px;padding:1.35rem;text-align:center;
  border:1px solid var(--i06);
  transition:transform .22s var(--spring),background .22s var(--e)
}
.sb:hover{transform:translateY(-2px);background:var(--alt)}
.sn{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--a);letter-spacing:-.04em;line-height:1}
.sl{font-size:.73rem;font-weight:600;color:var(--i60);margin-top:.3rem}
.cw{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.cb{
  display:inline-flex;align-items:center;gap:.35rem;background:var(--alt);color:var(--a);
  border-radius:100px;padding:.32rem .9rem;font-size:.76rem;font-weight:700
}
.cb::before{content:'✓'}

/* ─── PHILOSOPHY ─── */
.ph-wrap{max-width:780px;margin:0 auto;text-align:center}
.ph-q{
  font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.95rem);font-weight:600;
  line-height:1.5;letter-spacing:-.015em;color:var(--ink);font-style:italic;
  padding:2rem 3rem;position:relative
}
.ph-q::before,.ph-q::after{
  font-family:var(--serif);font-size:5rem;color:var(--a);
  opacity:.15;position:absolute;line-height:1;pointer-events:none
}
.ph-q::before{content:'\201C';top:0;left:0}
.ph-q::after{content:'\201D';bottom:-2.5rem;right:0}
.ph-p{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:3rem}
@media(min-width:700px){.ph-p{grid-template-columns:repeat(4,1fr)}}
.pil{
  background:var(--s2);border-radius:16px;padding:1.6rem 1.25rem;text-align:center;
  border:1px solid var(--i06);
  transition:transform .22s var(--spring),background .2s var(--e)
}
.pil:hover{transform:translateY(-3px);background:var(--s)}
.pil-i{font-size:1.55rem;margin-bottom:.75rem}
.pil-n{font-size:.8rem;font-weight:700;color:var(--ink);letter-spacing:.01em}

/* ─── OUTCOMES ─── */
.oc{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:2.25rem;
  transition:background .3s var(--e),transform .28s var(--spring)
}
.oc:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.on{
  font-family:var(--serif);font-size:2.8rem;font-weight:700;line-height:1;
  letter-spacing:-.04em;margin-bottom:1rem;opacity:.3
}
.oc h3{font-family:var(--serif);font-size:1.2rem;color:#fff;margin-bottom:.5rem}
.oc p{font-size:.875rem;color:rgba(255,255,255,.62);line-height:1.68}

/* ─── REVIEWS ─── */
.rev-wrap{overflow:hidden;margin:0 -1.5rem}
.rev-track{
  display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:0 1.5rem 1.25rem;cursor:grab
}
.rev-track::-webkit-scrollbar{display:none}
.rev-track.dragging{cursor:grabbing;user-select:none}
.rc{
  flex:0 0 min(340px,82vw);scroll-snap-align:start;
  background:var(--s);border-radius:var(--r-lg);padding:2rem;
  border:1px solid var(--i06);box-shadow:var(--card-shadow);
  position:relative;display:flex;flex-direction:column
}
.r-stars{color:#f59e0b;font-size:.85rem;letter-spacing:2px;margin-bottom:1rem}
.r-text{font-family:var(--serif);font-size:1.05rem;font-style:italic;line-height:1.62;color:var(--ink);flex:1;margin-bottom:1.5rem}
.r-auth{display:flex;align-items:center;gap:.75rem}
.r-av{width:40px;height:40px;border-radius:50%;background:var(--alt);display:grid;place-items:center;font-weight:700;font-size:.8rem;color:var(--a);flex-shrink:0}
.r-name{font-weight:700;font-size:.875rem;color:var(--ink)}
.r-dog{font-size:.73rem;color:var(--i60)}
.r-src{position:absolute;top:1.25rem;right:1.25rem;font-size:.68rem;color:var(--i40);display:flex;align-items:center;gap:.25rem}
.rev-nav{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-top:2rem}
.rev-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--i20);display:grid;place-items:center;transition:all .2s var(--e);color:var(--ink)}
.rev-btn:hover{border-color:var(--a);color:var(--a);background:var(--axlt)}
.rev-btn svg{width:15px;height:15px}

/* ─── PRICING ─── */
.pw{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:680px){.pw{grid-template-columns:repeat(3,1fr)}}
.pc{
  background:var(--s);border:1px solid var(--i12);
  border-radius:var(--r-xl);padding:2.5rem;position:relative;
  box-shadow:var(--card-shadow);
  transition:transform .25s var(--spring),box-shadow .25s var(--e)
}
.pc:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.pc.feat{background:var(--a);border-color:transparent;box-shadow:var(--sha);color:#fff}
.p-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.28rem .9rem;
  border-radius:100px;white-space:nowrap
}
.pc.feat .p-badge{background:#fff;color:var(--a)}
.p-name{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:1rem;opacity:.6}
.p-h{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:-.022em;margin-bottom:.5rem}
.p-d{font-size:.875rem;line-height:1.68;margin-bottom:1.5rem;opacity:.7}
.p-f{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}
.p-f li{display:flex;gap:.6rem;font-size:.86rem;align-items:flex-start}
.p-f li::before{content:'✓';font-weight:700;flex-shrink:0}
.pc:not(.feat) .p-f li::before{color:var(--a)}
.pc .btn{width:100%;justify-content:center}
.pc.feat .btn-pc{background:#fff;color:var(--a)}
.pc.feat .btn-pc:hover{background:var(--s2)}

/* ─── PROCESS ─── */
.pl{display:flex;flex-direction:column}
.ps{display:flex;gap:1.5rem;align-items:flex-start;padding:2.25rem 0;border-bottom:1px solid var(--i12)}
.ps:last-child{border-bottom:none}
.pn{font-family:var(--serif);font-size:2.8rem;font-weight:700;color:var(--a);opacity:.2;line-height:1;flex-shrink:0;width:52px;letter-spacing:-.04em}
.pb h3{font-family:var(--serif);font-size:1.22rem;font-weight:700;margin-bottom:.45rem;color:var(--ink)}
.pb p{font-size:.88rem;color:var(--i80);line-height:1.72}

/* ─── AREA ─── */
.atags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.atags span{
  display:inline-flex;align-items:center;gap:.38rem;
  background:var(--s);border:1px solid var(--i12);border-radius:100px;
  padding:.36rem .9rem;font-size:.8rem;font-weight:600;
  transition:all .2s var(--e)
}
.atags span:hover{border-color:var(--a);color:var(--a);background:var(--axlt)}
.atags span svg{width:11px;height:11px;color:var(--a)}
.map-ph{
  background:var(--s2);border-radius:var(--r-xl);
  border:1px solid var(--i12);height:320px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;overflow:hidden;color:var(--i40)
}
.map-ph svg{width:36px;height:36px}
.map-ph p{font-size:.82rem}
.map-ph iframe{width:100%;height:100%;border:none}

/* ─── FAQ ─── */
.fi{border-bottom:1px solid var(--i12)}
.fi:first-child{border-top:1px solid var(--i12)}
.fb{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.4rem 0;background:none;border:none;text-align:left;
  font-size:.94rem;font-weight:700;color:var(--ink);transition:color .2s
}
.fb:hover{color:var(--a)}
.fi-ic{
  width:28px;height:28px;border-radius:50%;background:var(--i06);
  display:grid;place-items:center;flex-shrink:0;
  font-size:1.1rem;font-weight:400;color:var(--a);
  transition:all .3s var(--spring);line-height:1
}
.fi.open .fi-ic{transform:rotate(45deg);background:var(--a);color:#fff}
.fb-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s var(--e)}
.fi.open .fb-b{grid-template-rows:1fr}
.fb-bi{overflow:hidden}
.fb-bi p{padding-bottom:1.5rem;font-size:.9rem;color:var(--i80);line-height:1.75}

/* ─── CONTACT ─── */
.cm{
  display:flex;align-items:center;gap:1rem;
  background:var(--s);border:1px solid var(--i12);
  border-radius:16px;padding:1.3rem;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:all .22s var(--e);margin-bottom:.75rem
}
.cm:hover{border-color:var(--alt);background:var(--axlt);transform:translateX(4px)}
.ci{width:44px;height:44px;border-radius:10px;background:var(--a);display:grid;place-items:center;color:#fff;flex-shrink:0}
.ci svg{width:18px;height:18px}
.cl{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--i40);margin-bottom:.15rem}
.cv{font-weight:600;font-size:.9rem;color:var(--ink)}
.fg{margin-bottom:1.3rem}
.fl_{display:block;font-size:.78rem;font-weight:700;color:var(--ink);margin-bottom:.45rem}
.fi-,.fs-,.ft-{
  width:100%;padding:.85rem 1rem;
  border:1.5px solid var(--i12);border-radius:10px;
  font-family:var(--sans);font-size:.9rem;color:var(--ink);background:var(--s);
  outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none
}
.fi-::placeholder,.ft-::placeholder{color:var(--i40)}
.fi-:focus,.fs-:focus,.ft-:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--alt)}
.ft-{resize:vertical;min-height:110px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-sub{width:100%;justify-content:center;padding:1.05rem;font-size:.95rem}
.fn{font-size:.74rem;color:var(--i40);margin-top:.75rem;display:flex;align-items:center;gap:.4rem}
.fn svg{width:12px;height:12px;flex-shrink:0}
.f-ok{display:none;margin-top:1rem;padding:1rem 1.25rem;background:var(--alt);border-radius:10px;color:var(--a);font-weight:700;font-size:.875rem;text-align:center}

/* ─── CTA ring ─── */
.bg-a .ol{color:rgba(255,255,255,.45)}
.bg-a h2,.bg-a .h1{color:#fff}
.bg-a p{color:rgba(255,255,255,.78)}
.cring{position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(255,255,255,.09) 0%,transparent 70%);pointer-events:none}

/* ─── FOOTER ─── */
footer{background:var(--dk);padding:4rem 0 2rem;color:rgba(255,255,255,.45)}
.ft{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
@media(min-width:680px){.ft{grid-template-columns:1.5fr 1fr 1fr}}
.f-logo{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:.75rem}
.f-tag{font-size:.875rem;line-height:1.65;max-width:260px}
.fct{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:1rem}
.fca{display:block;font-size:.875rem;font-weight:500;color:rgba(255,255,255,.42);margin-bottom:.75rem;transition:color .2s}
.fca:hover{color:#fff}
.fbot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding-top:2rem;font-size:.76rem}
.fleg{display:flex;gap:1.25rem}
.fleg a{color:rgba(255,255,255,.28);transition:color .2s}
.fleg a:hover{color:rgba(255,255,255,.7)}

/* ─── STICKY MOBILE BAR ─── */
#scta{
  position:fixed;bottom:0;left:0;right:0;z-index:150;
  background:rgba(247,246,243,.97);backdrop-filter:blur(20px) saturate(1.8);
  border-top:1px solid var(--i12);padding:.8rem 1.25rem;
  display:flex;gap:.65rem;
  box-shadow:0 -4px 24px rgba(0,0,0,.09);
  transform:translateY(100%);transition:transform .4s var(--eo)
}
#scta.vis{transform:translateY(0)}
#scta .btn{flex:1;justify-content:center;padding:.82rem .5rem;font-size:.83rem}
@media(min-width:900px){#scta{display:none}}
@media(max-width:899px){body{padding-bottom:72px}}

/* ─── SCROLL REVEAL ANIMATIONS ─── */
@keyframes su{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.rv{opacity:0;transform:translateY(28px);transition:opacity .65s var(--eo),transform .65s var(--eo)}
.rv.in{opacity:1;transform:none}
.r1{transition-delay:.06s}.r2{transition-delay:.13s}
.r3{transition-delay:.20s}.r4{transition-delay:.27s}

.sc.rv{transform:translateY(20px) scale(.985)}
.sc.rv.in{transform:none}
.oc.rv{transform:translateY(20px) scale(.985)}
.oc.rv.in{transform:none}
.rc.rv{transform:translateY(16px)}
.rc.rv.in{transform:none}
.sb.rv{transform:translateY(14px)}
.sb.rv.in{transform:none}
.pil.rv{transform:translateY(14px)}
.pil.rv.in{transform:none}

img{border-radius:12px}
.tphoto img{border-radius:32px;width:100%;display:block}

/* ════════════════════════════════════════════════════════
   MOBILE-FIRST — Quick Nav + Collapsible Sections
   ════════════════════════════════════════════════════════ */
:root{--qnav-h:44px;--scroll-offset:calc(72px + var(--qnav-h) + 8px)}
@media(min-width:769px){:root{--scroll-offset:80px}}

#services,#about,#philosophy,#outcomes,
#reviews,#process,#pricing,#area,
#faq,#contact{scroll-margin-top:var(--scroll-offset)}

@media(max-width:768px){
  .sec{padding:4.5rem 0}
  .sec-lg{padding:3rem 0}
  .sec-sm{padding:2.5rem 0}
  .sh{margin-bottom:2.25rem}
}

/* ═══ QUICK NAV ═══════════════════════════════════════════ */
#qnav{
  display:none;position:fixed;top:0;left:0;right:0;z-index:195;
  background:rgba(247,246,243,.96);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--i12);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transform:translateY(-100%);transition:transform .35s cubic-bezier(0,.8,.2,1)
}
#qnav.qnav-vis{transform:translateY(0)}
body.qnav-active #nav{top:var(--qnav-h)}
.qnav-inner{
  display:flex;align-items:center;gap:.4rem;padding:.55rem 1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none
}
.qnav-inner::-webkit-scrollbar{display:none}
.qnav-pill{
  display:inline-flex;align-items:center;flex-shrink:0;scroll-snap-align:start;
  padding:.34rem .9rem;border-radius:100px;
  font-size:.78rem;font-weight:700;color:var(--i60);
  background:transparent;border:1.5px solid var(--i12);
  transition:color .18s,background .18s,border-color .18s;text-decoration:none
}
.qnav-pill:hover{color:var(--a);border-color:var(--alt);background:var(--axlt)}
.qnav-pill.qnav-active{background:var(--a);color:#fff;border-color:var(--a)}
.qnav-pill:focus-visible{outline:2px solid var(--a);outline-offset:2px}
@media(max-width:768px){#qnav{display:block}}
@media(max-width:768px){
  body.qnav-active #nav{top:var(--qnav-h);transition:top .35s cubic-bezier(0,.8,.2,1),background .4s var(--e),box-shadow .4s var(--e),padding .3s var(--e)}
}

/* ═══ COLLAPSIBLE SECTIONS ════════════════════════════════ */
.mob-toggle{display:none}
@media(max-width:768px){
  .mob-toggle{
    display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;
    padding:.65rem 1.25rem;border-radius:100px;
    background:var(--s2);border:1.5px solid var(--i12);
    font-size:.82rem;font-weight:700;color:var(--ink);cursor:pointer;
    transition:background .2s,border-color .2s,color .2s
  }
  .mob-toggle:hover{background:var(--axlt);border-color:var(--alt);color:var(--a)}
  .mob-toggle:focus-visible{outline:2px solid var(--a);outline-offset:2px}
  .mob-toggle-ico{width:14px;height:14px;transition:transform .3s var(--e);flex-shrink:0}
  .mob-toggle[aria-expanded="true"] .mob-toggle-ico{transform:rotate(180deg)}
}
.mob-collapse{}
@media(max-width:768px){
  .mob-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}
  .mob-collapse.collapsed{grid-template-rows:0fr;opacity:0}
  .mob-collapse>*{overflow:hidden;min-height:0}
}
.mob-collapse-inner{overflow:hidden;min-height:0}

@media(max-width:768px){
  .sc{padding:1.4rem 1.25rem;border-radius:18px}
  .sc-ico{width:44px;height:44px;border-radius:12px;margin-bottom:.85rem}
  .sc h3{font-size:1rem}
  .sc p{font-size:.84rem;margin-top:.35rem}
  .ps{gap:.75rem;padding:1rem 0}
  .pn{font-size:1.6rem;min-width:2.2rem}
  .ps h3{font-size:.95rem}
  .ps p{font-size:.82rem}
  .atags{margin-top:1rem;gap:.4rem}
  .atags span{font-size:.74rem;padding:.28rem .72rem}
  .pw{gap:1rem}
  .pc{padding:1.6rem}
  .tphoto{max-height:260px;overflow:hidden}
  .tphoto img{object-fit:cover;object-position:center top}
  .sg{gap:.75rem}
}

/* Focus states */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--a);outline-offset:2px}

@media(max-width:899px){body{padding-bottom:72px}}

@media(prefers-reduced-motion:reduce){
  .mob-collapse,#qnav,.mob-toggle-ico,.rv,.sc,.oc,.rc{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}

/* ─── LEGAL PAGES ─── */
.legal-body{padding-top:90px;min-height:100vh;background:var(--bg)}
.legal-wrap{max-width:780px;margin:0 auto;padding:4rem 1.5rem 6rem}
.legal-wrap h1{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.08;letter-spacing:-.022em;color:var(--ink);margin-bottom:.75rem}
.legal-meta{font-size:.8rem;color:var(--i40);margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--i12)}
.legal-disclaimer{background:var(--alt);border-left:3px solid var(--a);border-radius:0 8px 8px 0;padding:1rem 1.25rem;margin-bottom:3rem;font-size:.85rem;color:var(--a);line-height:1.65}
.legal-wrap h2{font-family:var(--serif);font-size:1.45rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:2.5rem 0 .75rem}
.legal-wrap h3{font-size:1rem;font-weight:700;color:var(--ink);margin:1.5rem 0 .4rem}
.legal-wrap p{font-size:.93rem;line-height:1.8;color:var(--i80);margin-bottom:1rem}
.legal-wrap ul{list-style:disc;padding-left:1.4rem;margin-bottom:1rem}
.legal-wrap ul li{font-size:.93rem;line-height:1.8;color:var(--i80);margin-bottom:.3rem}
.legal-wrap a{color:var(--a);text-decoration:underline;text-underline-offset:2px}
.legal-wrap a:hover{color:var(--ad)}
@media(max-width:768px){
  .legal-wrap{padding:2.5rem 1.5rem 5rem}
  .legal-wrap h1{font-size:1.8rem}
  .legal-wrap h2{font-size:1.2rem}
}