:root{--cyan:#66cce6;--ink:#07172d;--blue:#087da9;--pale:#edf5f8;--line:#d6e0e5;--green:#159a65}*{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}a{color:inherit}.wrap{max-width:1320px;margin:auto;padding:0 38px}.top{background:var(--cyan);min-height:104px}.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:104px}.brand{display:flex;align-items:center;gap:15px;font-weight:800;letter-spacing:.035em}.brand-link{text-decoration:none}.brand img{width:68px;height:68px;object-fit:contain}.brand span{line-height:1.08;font-size:17px}.nav{display:flex;align-items:center;gap:20px}.nav>span{font-size:16px}.btn{display:inline-block;padding:14px 25px;border:1px solid #08121f;border-radius:3px;text-decoration:none;font-weight:700;background:#fff;cursor:pointer;font-size:15px}.btn.dark{background:#050b12;color:#fff}.btn.small{padding:11px 18px}.hero{display:grid;grid-template-columns:minmax(460px,48%) 1fr;min-height:460px}.hero-copy{padding:60px max(38px,calc((100vw - 1320px)/2));padding-right:55px;align-self:center}.hero h1{font-size:55px;line-height:1.02;margin:0 0 20px;letter-spacing:-.02em}.hero h1 span{color:var(--blue)}.hero p{font-size:20px;line-height:1.48;max-width:650px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-img{background-image:url('../images/hero.jpg');background-size:cover;background-position:center;min-height:460px}.muted{font-size:15px!important;color:#465466}.features{background:var(--pale);padding:44px 0 52px}.section-title{font-size:32px;margin:0 0 28px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid #cbd7dc;padding:15px;min-height:330px}.card>img,.card-icon-art{width:100%;height:150px;object-fit:cover}.card-icon-art{background:#f5fbfd;display:grid;place-items:center;overflow:hidden}.card-icon-art img{width:84px;height:84px;object-fit:contain}.card h3{font-size:18px;margin:17px 0 9px}.card p{font-size:16px;line-height:1.48;margin-bottom:8px}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:65px;padding:58px 38px 64px;text-align:center}.value-icon{width:92px;height:92px;margin:0 auto 14px;display:grid;place-items:center}.value-icon img{max-width:88px;max-height:88px;object-fit:contain}.value h3{font-size:19px;margin:10px 0 9px}.value p{font-size:15px;line-height:1.5;color:#39495c;max-width:330px;margin:0 auto}.footer{background:#020303;color:#fff;padding:38px 0 52px}.footer-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #566066;padding-bottom:26px}.footer-links{display:flex;gap:24px;font-size:14px}.disabled{opacity:.58;pointer-events:none}.follow{font-size:13px}.social{display:flex;gap:15px;margin-top:10px;font-size:19px}.footer-bottom{display:grid;grid-template-columns:330px 1fr;gap:70px;align-items:center;padding-top:28px}.footer-brand{display:flex;align-items:center;gap:17px;font-weight:800;font-size:18px;line-height:1.05}.footer-brand img{width:92px;height:92px;object-fit:contain}.ack{font-size:13px;line-height:1.55;max-width:760px}.form-page{max-width:820px;margin:58px auto;padding:0 28px}.form-page h1{font-size:38px}.panel{border:1px solid var(--line);padding:30px;background:#fff}.field{margin:0 0 20px}.field label{display:block;font-weight:700;margin-bottom:8px}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid #8e9aa5;font:inherit}.field textarea{min-height:140px}.notice{padding:13px 15px;background:#eaf7ef;border-left:4px solid var(--green);margin-bottom:20px}.error{background:#fff0f0;border-left-color:#b3261e}.auth-body{background:#f5f8fa;min-height:100vh}.auth-page{max-width:760px;margin:0 auto;padding:72px 28px 100px}.auth-card{background:#fff;border:1px solid #dce4e8;box-shadow:0 12px 32px rgba(7,23,45,.07);padding:42px}.auth-card h1{font-size:38px;margin:0 0 12px}.auth-card>p{font-size:17px;line-height:1.5;color:#405064;margin:0 0 26px}.auth-panel{padding:0;border:0}.auth-panel .btn{min-width:180px}.admin-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.side{background:#07172d;color:#fff;padding:30px}.side h2{margin-top:0}.side a{display:block;padding:11px 0;text-decoration:none}.main{padding:38px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat{border:1px solid var(--line);padding:20px;background:#fff}.stat b{font-size:30px;display:block}.table{width:100%;border-collapse:collapse;margin-top:22px}.table th,.table td{padding:11px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}.badge{padding:4px 8px;border-radius:12px;background:#e6eef2;font-size:12px}.badge.on{background:#dcf5e8;color:#08623c}.mapbox{height:360px;border:1px solid var(--line);margin-top:18px}@media(max-width:900px){.wrap{padding:0 25px}.hero{grid-template-columns:1fr}.hero-copy{padding:44px 25px}.hero h1{font-size:45px}.hero-img{min-height:360px}.cards,.values,.stats{grid-template-columns:1fr 1fr}.nav>span{display:none}.admin-shell{grid-template-columns:1fr}.side{display:flex;gap:16px;flex-wrap:wrap}.footer-bottom{grid-template-columns:260px 1fr;gap:35px}}@media(max-width:620px){.top,.top .wrap{min-height:86px}.brand img{width:56px;height:56px}.brand span{display:none}.nav{gap:8px}.nav .btn{font-size:13px;padding:10px 11px}.hero h1{font-size:38px}.hero p{font-size:18px}.cards,.values,.stats{grid-template-columns:1fr}.values{padding-left:25px;padding-right:25px}.footer-top,.footer-bottom{display:block}.footer-links{flex-wrap:wrap;margin-bottom:28px}.footer-brand{margin-bottom:26px}.auth-page{padding:38px 18px 70px}.auth-card{padding:28px 22px}.auth-card h1{font-size:32px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}.signin-icon{width:22px;height:22px;object-fit:cover;border-radius:50%;flex:0 0 22px}.social-icon{display:inline-grid;place-items:center;width:30px;height:30px}.social-icon img{max-width:28px;max-height:28px;object-fit:contain;display:block}.footer-brand img{width:108px;height:108px}.footer-links,.ack{font-size:14px}@media(max-width:620px){.signin-icon{width:19px;height:19px;flex-basis:19px}.footer-brand img{width:92px;height:92px}}
/* Final visual refinement pass */
@media(min-width:901px){.brand img{width:76px;height:76px}.brand span{font-size:18px}.card{padding:18px;min-height:350px}.card h3{margin-top:19px}.features{padding-top:50px;padding-bottom:58px}}


/* 21 Sep final visual corrections */
/* Matched CTA dimensions */
.nav .btn{width:190px;min-height:46px;padding:10px 14px;white-space:nowrap}
.hero-actions .btn{width:250px;min-height:50px;padding:12px 16px;white-space:nowrap}
/* New white sign-in symbol; no circular crop */
.signin-icon{width:25px;height:25px;flex:0 0 25px;object-fit:contain;border-radius:0}
/* Reframe hero: favour dog + female practitioner, crop background man */
.hero-img{background-position:72% center}
/* Clinic map uses the same photographic treatment as other feature cards */
.card>img.clinic-map{width:100%;height:150px;object-fit:cover;object-position:center}
/* Optical balance across lower benefit icons */
.value-icon{width:96px;height:96px}
.value-icon img{width:82px;height:82px;max-width:82px;max-height:82px;object-fit:contain}
.value:nth-child(3) .value-icon img{width:88px;height:88px;max-width:88px;max-height:88px}
/* Footer readability and high-contrast social assets */
.footer-links,.ack,.follow{font-size:15px;line-height:1.5}
.footer-links a{line-height:1.5}
.social{gap:18px;margin-top:11px;align-items:center}
.social-icon{width:34px;height:34px;opacity:1}
.social-icon img{width:30px;height:30px;max-width:30px;max-height:30px;object-fit:contain;display:block}
.footer .disabled{opacity:.78}
.ack{color:#fff;max-width:780px}
@media(max-width:900px){.nav .btn{width:auto;min-width:150px}.hero-actions .btn{width:230px}.hero-img{background-position:70% center}}
@media(max-width:620px){.nav .btn{width:auto;min-width:0}.hero-actions .btn{width:100%;max-width:320px}.signin-icon{width:23px;height:23px;flex-basis:23px}.footer-links,.ack,.follow{font-size:14px}.social-icon{width:32px;height:32px}.social-icon img{width:28px;height:28px}}

/* 21 Sep — corrections matched to supplied visual reference */
/* Paired CTAs: identical dimensions within each pair. */
.nav .btn{
  width:158px;
  min-height:46px;
  padding:10px 14px;
  white-space:nowrap;
}
.hero-actions .btn{
  width:208px;
  min-height:50px;
  padding:12px 16px;
  white-space:nowrap;
}
/* Sign-in treatment: text first, supplied white enter icon on the right. */
.btn.dark .signin-icon{
  order:2;
  width:24px;
  height:24px;
  flex:0 0 24px;
  object-fit:contain;
  border-radius:0;
  margin-left:2px;
}
/* Hero composition follows supplied reference: retain dog + practitioner together. */
.hero-img{
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* Clinic map fills the same visual frame as the other three card images. */
.card>img.clinic-map{
  width:100%;
  height:150px;
  object-fit:cover;
  object-position:center center;
}
/* Lower icons: match optical mass, with extra scale for the lighter clinical icon. */
.value-icon{
  width:96px;
  height:96px;
}
.value-icon img{
  width:82px;
  height:82px;
  max-width:82px;
  max-height:82px;
  object-fit:contain;
}
.value:nth-child(3) .value-icon img{
  width:94px;
  height:94px;
  max-width:94px;
  max-height:94px;
}
/* Footer: readable navigation/acknowledgement and visible supplied social icons. */
.footer-links,.ack,.follow{
  font-size:15px;
  line-height:1.5;
}
.footer-links a{line-height:1.5}
.ack{color:#fff;max-width:780px}
.footer .disabled{opacity:.82}
.social{
  display:flex;
  gap:16px;
  margin-top:10px;
  align-items:center;
}
.social-icon{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  opacity:1;
}
.social-icon img{
  width:30px;
  height:30px;
  max-width:30px;
  max-height:30px;
  object-fit:contain;
  display:block;
}
@media(max-width:900px){
  .nav .btn{width:158px;min-width:158px}
  .hero-actions .btn{width:208px}
  .hero-img{background-position:center center}
}
@media(max-width:620px){
  .nav .btn{width:auto;min-width:0}
  .hero-actions .btn{width:100%;max-width:320px}
  .btn.dark .signin-icon{width:22px;height:22px;flex-basis:22px}
  .footer-links,.ack,.follow{font-size:14px}
  .social-icon{width:32px;height:32px}
  .social-icon img{width:28px;height:28px}
}

/* 21 Sep — final reference-locked hero/footer corrections */
/* Hero CTA pair: exact reference dimensions. */
.hero-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.hero-actions .btn{
  width:210px;
  height:44px;
  min-height:44px;
  padding:0 18px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  border-radius:2px;
}
.hero-actions .btn.dark .signin-icon{
  order:2;
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-left:10px;
  object-fit:contain;
  border-radius:0;
}
/* Reference composition: preserve the full horizontal subject group.
   The source image already places the man at the far left, dog centrally,
   and practitioner on the right. Scale to panel width and crop vertically. */
.hero-img{
  background-image:url('../images/hero.jpg');
  background-size:100% auto;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#eef3f5;
}
/* Footer acknowledgement is intentionally shifted into the right-hand area. */
.footer-bottom .ack{
  justify-self:end;
  width:min(100%,680px);
  max-width:680px;
  margin-left:auto;
  text-align:left;
  font-size:15px;
  line-height:1.5;
}
@media(max-width:900px){
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{width:210px;height:44px;min-height:44px}
  .hero-img{background-size:cover;background-position:center center}
  .footer-bottom .ack{justify-self:stretch;width:100%;max-width:none;margin-left:0}
}
@media(max-width:620px){
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .btn{width:100%;max-width:320px;height:44px;min-height:44px}
  .hero-actions .btn.dark .signin-icon{width:20px;height:20px;flex-basis:20px;margin-left:10px}
}

/* 21 Sep — authoritative hero CTA + prepared hero asset.
   This block is intentionally last. Do not add hero button geometry elsewhere. */
.hero-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.hero-actions > .hero-cta {
  box-sizing:border-box;
  width:210px;
  min-width:210px;
  max-width:210px;
  height:44px;
  min-height:44px;
  max-height:44px;
  padding:0 18px;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 210px;
  font-size:14px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  border-radius:2px;
}
.hero-actions > .hero-cta--signin .hero-cta__icon {
  order:2;
  display:block;
  width:20px;
  min-width:20px;
  max-width:20px;
  height:20px;
  min-height:20px;
  max-height:20px;
  margin:0 0 0 10px;
  flex:0 0 20px;
  object-fit:contain;
  border-radius:0;
}
.hero-img {
  background-image:url('../images/hero-final.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}
@media (max-width:900px) {
  .hero-img { background-position:center center; }
}
@media (max-width:620px) {
  .hero-actions { display:grid; grid-template-columns:1fr; gap:10px; }
  .hero-actions > .hero-cta {
    width:100%; min-width:0; max-width:320px;
    height:44px; min-height:44px; max-height:44px;
    flex:0 0 44px;
  }
}

/* 21 Sep final reference corrections — authoritative hero treatment. */
/* Hero CTAs intentionally match the already-correct header buttons. */
.hero-actions {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}
.hero-actions > .hero-cta {
  box-sizing:border-box;
  width:190px;
  min-width:190px;
  max-width:190px;
  height:46px;
  min-height:46px;
  max-height:46px;
  padding:10px 14px;
  margin:0;
  flex:0 0 190px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  border-radius:3px;
}
.hero-actions > .hero-cta--signin .hero-cta__icon {
  order:2;
  width:22px;
  min-width:22px;
  max-width:22px;
  height:22px;
  min-height:22px;
  max-height:22px;
  flex:0 0 22px;
  margin:0 0 0 9px;
  object-fit:contain;
  border-radius:0;
}
/* Prepared crop removes most of the background man while retaining the dog and practitioner. */
.hero-img {
  background-image:url('../images/hero-final.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}
@media (max-width:620px) {
  .hero-actions { display:grid; grid-template-columns:1fr; gap:10px; }
  .hero-actions > .hero-cta {
    width:100%; min-width:0; max-width:320px;
    height:46px; min-height:46px; max-height:46px;
    flex:0 0 46px;
  }
}

/* 21 Sep — final hero framing and CTA lock.
   This is the sole final override for the landing-page hero. */
/* Match the hero CTA pair to the already-approved header CTA geometry. */
.hero-actions {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}
.hero-actions > .hero-cta {
  box-sizing:border-box;
  width:158px;
  min-width:158px;
  max-width:158px;
  height:46px;
  min-height:46px;
  max-height:46px;
  padding:10px 14px;
  margin:0;
  flex:0 0 158px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  border-radius:3px;
}
.hero-actions > .hero-cta--signin .hero-cta__icon {
  order:2;
  width:22px;
  min-width:22px;
  max-width:22px;
  height:22px;
  min-height:22px;
  max-height:22px;
  flex:0 0 22px;
  margin:0 0 0 9px;
  object-fit:contain;
  border-radius:0;
}
/* Desktop: preserve the successful left crop, but anchor the prepared image
   to the TOP so the dog's ears and the practitioner's head cannot be clipped. */
.hero-img {
  background-image:url('../images/hero-final.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
}
/* Once the hero stacks, give the image its own natural aspect ratio rather
   than forcing it into a fixed-height cover box. This prevents renewed
   top/bottom cropping on tablets and phones. */
@media (max-width:900px) {
  .hero-img {
    min-height:0;
    height:auto;
    aspect-ratio:1054 / 756;
    background-size:100% 100%;
    background-position:center top;
  }
}
@media (max-width:620px) {
  .hero-actions {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
  }
  .hero-actions > .hero-cta {
    width:158px;
    min-width:0;
    max-width:158px;
    height:46px;
    min-height:46px;
    max-height:46px;
    flex:0 1 158px;
    padding:10px 10px;
    font-size:13px;
  }
  .hero-actions > .hero-cta--signin .hero-cta__icon {
    width:20px;
    min-width:20px;
    max-width:20px;
    height:20px;
    min-height:20px;
    max-height:20px;
    flex-basis:20px;
    margin-left:7px;
  }
}
@media (max-width:360px) {
  .hero-actions { gap:6px; }
  .hero-actions > .hero-cta {
    font-size:12px;
    padding-left:8px;
    padding-right:8px;
  }
}

/* 21 Sep 08:xx — final physical hero crop.
   Desktop and mobile use dedicated source crops. This replaces framing-by-object-position. */
.hero-img {
  background-image:url('../images/hero-desktop.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
}
@media (max-width:900px) {
  .hero-img {
    min-height:0;
    height:auto;
    aspect-ratio:919 / 756;
    background-image:url('../images/hero-mobile.jpg');
    background-size:100% 100%;
    background-position:center top;
  }
}