/* ==========================================================
   POKHARA PET HOSPITAL — style.css (v29)
   Palette taken from the reference: lime, deep forest, cream.
   New: Mitra assistant panel, hero ask bar, happier pets.
   ========================================================== */

/* ---------- DESIGN TOKENS ---------- */
:root{
    /* Brand — sampled from the logo */
    --navy:#104469;          /* logo blue: structure, panels, text */
    --navy-deep:#0b3251;
    --navy-soft:#2f6288;
    --orange:#d77127;        /* logo orange: accents, fills */
    --orange-bright:#f09a52;   /* text on navy: 4.6:1 */
    --orange-text:#a8500f;     /* text on light surfaces: 5.7:1 */
    --logo-cream:#fdfbd4;

    /* Natural surfaces: sand and cream carry the warmth quietly;
       amber survives only as an accent (buttons, stars, highlights). */
    --sand:#f4e7d2;
    --amber:#f2a54c;
    --amber-bright:#f7b96b;
    --amber-deep:#e08f34;

    --cream:#fdf3e0;         /* warm soft sections */
    --cream-dim:#e7ddd0;     /* muted text on navy */
    --paper:#fffdf8;         /* warm white for cards and page */
    --white:#ffffff;
    --ink:#2b2117;           /* warm near-black body text */
    --ink-soft:#5e5145;
    --border:#eaded0;
    --ember:#a8291c;         /* emergency only — deeper than the brand orange */

    /* Aliases so every existing rule keeps working */
    --lime:var(--amber);
    --lime-bright:var(--amber-bright);
    --lime-deep:var(--amber-deep);
    --forest:var(--navy);
    --forest-deep:var(--navy-deep);
    --forest-soft:var(--navy-soft);

    --radius:18px;
    --radius-lg:28px;
    --shadow:0 14px 40px rgba(43,33,23,0.10);
    --shadow-lift:0 22px 60px rgba(43,33,23,0.20);
    --font-display:'Lora',Georgia,serif;
    --font-body:'Open Sans','Segoe UI',Arial,sans-serif;
}

/* ---------- RESET ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }

html{
    scroll-behavior:smooth;
    scroll-padding-top:120px;
}

body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

:focus-visible{
    outline:3px solid var(--forest);
    outline-offset:3px;
    border-radius:6px;
}

/* ---------- SHARED ---------- */
.container{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
}

.section{ padding:104px 0; }

.section-lime{ background:var(--sand); }
.section-cream{ background:var(--cream); }

h1,h2,h3,h4{
    font-family:var(--font-display);
    color:var(--forest);
    line-height:1.1;
    font-weight:600;
    letter-spacing:-0.015em;
}

h1{ font-size:clamp(38px, 5.4vw, 66px); }
h2{ font-size:clamp(30px, 4vw, 46px); margin-bottom:16px; }
h3{ font-size:24px; }

.section-head{
    text-align:center;
    margin-bottom:56px;
}

.eyebrow{
    font-family:var(--font-body);
    color:var(--orange-text);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-size:12px;
    margin-bottom:14px;
}

.eyebrow-light{ color:var(--orange-bright); }

/* On the amber surfaces, orange all but disappears — navy carries it */
.section-lime .eyebrow,
.pet-caption .eyebrow{ color:var(--navy); }

.section-text{
    font-size:17.5px;
    color:var(--ink-soft);
    margin-bottom:16px;
    max-width:60ch;
}

/* ---------- BUTTONS ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 26px;
    border-radius:999px;
    font-family:var(--font-body);
    font-weight:700;
    font-size:15.5px;
    text-decoration:none;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.btn:hover{ transform:translateY(-2px); }

.btn-primary{ background:var(--forest); color:var(--cream); }
.btn-primary:hover{ background:var(--forest-deep); }

.btn-forest{ background:var(--forest); color:var(--cream); }
.btn-forest:hover{ background:var(--forest-deep); }

.btn-lime{ background:var(--amber); color:var(--navy); }
.btn-lime:hover{ background:var(--amber-bright); }

.btn-ghost-light{ background:transparent; color:var(--cream); border-color:rgba(246,244,233,0.45); }
.btn-ghost-light:hover{ background:rgba(246,244,233,0.12); border-color:var(--cream); }

.btn-white{ background:var(--white); color:var(--ember); }
.btn-white:hover{ background:var(--cream); }

.btn-full{ width:100%; }

/* ---------- TOP STRIP ---------- */
.top-strip{
    background:var(--forest-deep);
    color:var(--cream);
    font-size:13.5px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 22px;
    padding:9px 24px;
    text-align:center;
}

.top-strip a{
    color:var(--orange-bright);
    font-weight:700;
    text-decoration:none;
}

.top-strip a:hover{ text-decoration:underline; }

.top-strip-phones{ display:flex; gap:10px; }

/* ---------- NAVBAR ---------- */
.site-header{
    position:sticky;
    top:0;
    z-index:70;
    background:var(--paper);
    border-bottom:1px solid var(--border);
    transition:box-shadow .25s ease;
}

.site-header.scrolled{ box-shadow:0 8px 26px rgba(28,63,30,0.10); }

.nav{
    max-width:1180px;
    margin:0 auto;
    padding:12px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:var(--forest);
    font-family:var(--font-display);
    font-size:21px;
    line-height:1.1;
}

.logo img{
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    background:var(--logo-cream);
    border:2.5px solid var(--navy);
    box-shadow:0 4px 14px rgba(16,68,105,.20);
    transition:transform .25s ease;
}

.logo:hover img{ transform:scale(1.05) rotate(-3deg); }

.logo span{ font-size:22px; }

.nav-links{
    list-style:none;
    display:flex;
    align-items:center;
    gap:6px;
}

.nav-links a{
    text-decoration:none;
    color:var(--ink);
    font-weight:600;
    font-size:15px;
    padding:9px 13px;
    border-radius:999px;
    transition:background .18s ease, color .18s ease;
}

.nav-links a:hover{ background:var(--amber); color:var(--navy); }

.nav-links .nav-cta{ margin-left:8px; color:var(--cream); }
.nav-links .nav-cta:hover{ background:var(--forest-deep); color:var(--cream); }

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:46px;
    height:42px;
    background:none;
    border:0;
    cursor:pointer;
}

.nav-toggle span{
    display:block;
    height:2.5px;
    width:24px;
    margin:0 auto;
    background:var(--forest);
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
}

.nav-toggle.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{
    background:var(--sand);
    padding:56px 0 72px;
    position:relative;
    overflow:hidden;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:26px;
    align-items:stretch;
}

.hero-panel{
    background:var(--forest);
    color:var(--cream);
    border-radius:var(--radius-lg);
    padding:44px 44px 40px;
}

.hero-panel h1{
    color:var(--cream);
    margin-bottom:18px;
}

.hero-sub{
    font-size:17px;
    color:var(--cream-dim);
    max-width:46ch;
    margin-bottom:26px;
}

/* The hero ask bar — the page's signature interaction */
.hero-ask{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--white);
    border-radius:999px;
    padding:7px 7px 7px 22px;
    box-shadow:0 10px 30px rgba(0,0,0,0.18);
    margin-bottom:24px;
}

.hero-ask input{
    flex:1;
    border:0;
    outline:none;
    font-family:var(--font-body);
    font-size:15.5px;
    color:var(--ink);
    background:transparent;
    min-width:0;
    padding:8px 0;
}

.hero-ask input::placeholder{ color:#8b9689; }

.hero-ask button{
    flex:0 0 auto;
    width:42px;
    height:42px;
    border-radius:50%;
    border:0;
    background:var(--orange);
    color:var(--white);
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:background .18s ease, transform .18s ease;
}

.hero-ask button:hover{ background:var(--orange-bright); transform:scale(1.06); }
.hero-ask button svg{ width:19px; height:19px; }

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.hero-media{
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--forest-soft);
    min-height:340px;
    position:relative;
}

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-media-fallback{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:rgba(246,244,233,0.35);
}

.hero-media-fallback svg{ width:110px; height:110px; }

/* ---------- PET ROW ---------- */
.pet-row{
    display:grid;
    grid-template-columns:200px 1fr 200px;
    align-items:end;
    gap:24px;
    margin-top:52px;
}

.pet-caption{ text-align:center; padding-bottom:18px; }
.pet-caption h2{ margin-bottom:14px; }
.pet-caption > p{ color:var(--forest-soft); max-width:46ch; margin:0 auto 18px; }

.hero-trust{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-bottom:22px;
}

.hero-trust li{
    background:rgba(16,68,105,0.08);
    color:var(--forest);
    font-weight:600;
    font-size:13.5px;
    padding:6px 15px;
    border-radius:999px;
}

/* ---------- THE CLINIC PETS ---------- */
.clinic-pet{
    width:100%;
    max-width:200px;
    cursor:pointer;
    filter:drop-shadow(0 12px 18px rgba(28,63,30,0.20));
}

.clinic-dog{ animation:petFloat 5s ease-in-out infinite; }
.clinic-cat{ animation:petFloat 6s ease-in-out infinite .8s; justify-self:end; }

@keyframes petFloat{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-7px); }
}

/* Eyes close for a blink and squeeze shut happily when petted */
.pet-eye{
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .1s ease;
}

.pet-eye.blink,
.clinic-pet.happy .pet-eye{ transform:scaleY(0.08); }

/* Brows lift a touch when petted — reads as delight */
.pet-brow{
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .25s ease;
}

.clinic-pet.happy .pet-brow{ transform:translateY(-3px); }

/* Blush deepens when petted */
.pet-blush{ transition:opacity .3s ease; }
.clinic-pet.happy .pet-blush{ opacity:0.85; }

.pet-body{
    transform-box:fill-box;
    transform-origin:50% 100%;
    animation:breathe 4s ease-in-out infinite;
}

@keyframes breathe{
    0%,100%{ transform:scaleY(1); }
    50%    { transform:scaleY(1.014); }
}

.pet-head{
    transform-box:fill-box;
    transform-origin:50% 92%;
}

.clinic-dog .pet-head{ transition:transform .3s ease; }
.clinic-dog:hover .pet-head{ transform:rotate(6deg); }

.cat-tail{
    transform-box:fill-box;
    transform-origin:12% 10%;
    animation:tailSway 4.5s ease-in-out infinite;
}

@keyframes tailSway{
    0%,100%{ transform:rotate(0deg); }
    50%    { transform:rotate(-5deg); }
}

.dog-tail{
    transform-box:fill-box;
    transform-origin:88% 92%;
    animation:tailWag .7s ease-in-out infinite;
}

@keyframes tailWag{
    0%,100%{ transform:rotate(-9deg); }
    50%    { transform:rotate(12deg); }
}

.clinic-dog.happy .dog-tail{ animation-duration:.3s; }

.ear-l,.ear-r{
    transform-box:fill-box;
    transition:transform .25s ease;
}

.clinic-cat .ear-l{ transform-origin:80% 95%; animation:earTwitch 7s infinite; }
.clinic-cat .ear-r{ transform-origin:20% 95%; animation:earTwitch 9.5s infinite 3s; }

@keyframes earTwitch{
    0%,91%,100%{ transform:rotate(0deg); }
    93%        { transform:rotate(-8deg); }
    96%        { transform:rotate(4deg); }
}

.clinic-dog .ear-l{ transform-origin:60% 8%; }
.clinic-dog .ear-r{ transform-origin:40% 8%; }
.clinic-dog:hover .ear-l,.clinic-dog.happy .ear-l{ transform:rotate(-9deg); }
.clinic-dog:hover .ear-r,.clinic-dog.happy .ear-r{ transform:rotate(9deg); }

/* Tongue stays slightly out; drops fully when petted */
.dog-tongue{
    transform-box:fill-box;
    transform-origin:50% 0%;
    transform:scaleY(0.45);
    transition:transform .18s ease;
}

.clinic-dog.happy .dog-tongue{ transform:scaleY(1); }

.pet-whiskers{
    transform-box:fill-box;
    transition:transform .2s ease;
}

.clinic-cat.happy .pet-whiskers{ transform:translateY(-3px); }

.pet-heart{ opacity:0; transform-box:fill-box; }
.clinic-pet.happy .pet-heart{ animation:heartRise 1.3s ease-out; }

@keyframes heartRise{
    0%  { opacity:0; transform:translateY(8px) scale(.5); }
    25% { opacity:1; }
    100%{ opacity:0; transform:translateY(-34px) scale(1.05); }
}

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease, transform .7s ease;
}

.reveal.visible{ opacity:1; transform:none; }

/* ---------- ABOUT ---------- */
.about-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:56px;
    align-items:start;
}

.why-card{
    background:var(--forest);
    color:var(--cream);
    border-radius:var(--radius-lg);
    padding:38px 34px;
}

.why-card h3{ color:var(--orange-bright); margin-bottom:20px; }

.check-list{ list-style:none; display:grid; gap:14px; }

.check-list li{
    position:relative;
    padding-left:30px;
    color:var(--cream-dim);
    font-size:16px;
}

.check-list li::before{
    content:"";
    position:absolute;
    left:0; top:10px;
    width:12px; height:12px;
    border-radius:50%;
    background:var(--orange);
}

/* ---------- SERVICES ---------- */
.service-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:22px;
}

.service-card{
    background:var(--paper);
    border-radius:var(--radius);
    padding:32px 28px;
    border:1px solid rgba(28,63,30,0.12);
    transition:transform .22s ease, box-shadow .22s ease;
}

.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }

.icon-circle{
    width:56px; height:56px;
    border-radius:50%;
    background:var(--navy);
    color:var(--orange-bright);
    display:grid;
    place-items:center;
    margin-bottom:20px;
}

.icon-circle svg{ width:26px; height:26px; }

.service-card h3{ margin-bottom:8px; }
.service-card p{ color:var(--ink-soft); font-size:15.5px; }

/* ---------- DOCTORS ---------- */
.doctor-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:26px;
    max-width:720px;
    margin:0 auto;
}

.doctor-card{
    background:var(--cream);
    border-radius:var(--radius);
    padding:30px;
    text-align:center;
    border:1px solid var(--border);
}

.doctor-photo{
    width:150px; height:150px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 18px;
    border:5px solid var(--orange);
    background:var(--logo-cream);
}

.doctor-degree{ color:var(--forest-soft); font-weight:700; font-size:14px; }
.doctor-role{ color:var(--ink-soft); font-size:15px; }

/* ---------- GALLERY ---------- */
.gallery-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.gallery-box,
.gallery-img{
    aspect-ratio:4/3;
    border-radius:var(--radius);
    width:100%;
}

.gallery-img{ object-fit:cover; }

.gallery-box{
    background:var(--paper);
    border:2px dashed var(--border);
    display:grid;
    place-items:center;
    gap:8px;
    color:var(--forest-soft);
    align-content:center;
}

.gallery-box svg{ width:52px; height:52px; opacity:.35; }
.gallery-box span{ font-size:14px; font-weight:600; }

/* ---------- EMERGENCY ---------- */
.emergency{
    background:var(--ember);
    color:var(--white);
    padding:56px 0;
}

.emergency-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:26px;
}

.emergency h2{
    color:var(--white);
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:6px;
}

.emergency p{ color:rgba(255,255,255,.88); }

.emergency-numbers{ display:flex; flex-wrap:wrap; gap:12px; }

.pulse-dot{
    width:13px; height:13px;
    border-radius:50%;
    background:var(--white);
    display:inline-block;
    animation:pulse 1.6s ease-out infinite;
}

@keyframes pulse{
    0%  { box-shadow:0 0 0 0 rgba(255,255,255,.7); }
    70% { box-shadow:0 0 0 14px rgba(255,255,255,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- APPOINTMENT ---------- */
.appointment-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:56px;
    align-items:start;
}

.appointment-intro .btn{ margin-top:8px; }

.appointment-form{
    background:var(--cream);
    border-radius:var(--radius-lg);
    padding:36px 32px;
    border:1px solid var(--border);
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:18px;
}

.form-field{ margin-bottom:18px; }

.form-field label{
    display:block;
    font-weight:600;
    font-size:14px;
    color:var(--forest);
    margin-bottom:7px;
}

.form-field input,
.form-field textarea{
    width:100%;
    padding:13px 16px;
    border:1.5px solid var(--border);
    border-radius:12px;
    font-family:var(--font-body);
    font-size:15.5px;
    color:var(--ink);
    background:var(--paper);
    transition:border-color .18s ease;
}

.form-field input:focus,
.form-field textarea:focus{
    outline:none;
    border-color:var(--forest);
}

.form-field textarea{ min-height:130px; resize:vertical; }

.appointment-form button:disabled,
.mitra-card-actions button:disabled{
    opacity:.6;
    cursor:wait;
}
.booking-status{
    margin-top:18px;
    padding:16px;
    border:1px solid var(--forest);
    border-radius:var(--radius);
    line-height:1.6;
}
.booking-fallback{ margin-top:14px; }
.booking-fallback p{ margin-top:10px; font-size:14px; line-height:1.6; }
.mitra-booking-status{ margin-top:12px; font-size:13px; line-height:1.6; }
.mitra-booking-status:empty{ display:none; }
.form-success-hint a{ color:inherit; text-decoration:underline; }

.form-success{
    margin-top:20px;
    background:var(--navy);
    color:var(--cream);
    padding:28px 26px;
    border-radius:var(--radius);
    text-align:center;
    animation:successIn .4s cubic-bezier(.2,.8,.3,1);
}

@keyframes successIn{
    from{ opacity:0; transform:translateY(14px) scale(.97); }
    to  { opacity:1; transform:none; }
}

.form-success-icon{
    width:52px; height:52px;
    margin:0 auto 14px;
    border-radius:50%;
    background:var(--orange);
    color:var(--white);
    display:grid;
    place-items:center;
}

.form-success-icon svg{ width:26px; height:26px; }

.form-success h3{
    color:var(--cream);
    font-size:26px;
    margin-bottom:8px;
}

.form-success-text{
    font-size:15.5px;
    color:var(--cream);
    margin-bottom:12px;
}

.form-success-hint{
    font-size:13.5px;
    color:var(--cream-dim);
    line-height:1.55;
}

.form-success-hint strong{ color:var(--orange-bright); }

/* ---------- CONTACT ---------- */
.contact-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
    margin-bottom:44px;
}

.contact-box{
    background:var(--paper);
    border-radius:var(--radius);
    padding:30px 26px;
    border:1px solid var(--border);
}

.contact-box h3{ margin-bottom:12px; font-size:21px; }
.contact-box p{ color:var(--ink-soft); font-size:15.5px; }

.contact-box a{
    color:var(--forest);
    font-weight:600;
    text-decoration:none;
}

.contact-box a:hover{ text-decoration:underline; }

.map-wrap{
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--border);
    height:400px;
}

.map-wrap iframe{ width:100%; height:100%; border:0; display:block; }

.map-btn-wrap{ text-align:center; margin-top:28px; }

/* ---------- FOOTER ---------- */
footer{
    background:var(--forest-deep);
    color:var(--cream-dim);
    padding-top:64px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:40px;
    padding-bottom:44px;
}

footer h3{ color:var(--cream); margin-bottom:10px; font-size:24px; }
footer h4{ color:var(--orange-bright); margin-bottom:14px; font-size:19px; }
footer p{ font-size:15px; margin-bottom:6px; }

footer a{ color:var(--cream-dim); text-decoration:none; }
footer a:hover{ color:var(--orange-bright); }

.footer-links{ list-style:none; display:grid; gap:8px; }

.socials{ display:flex; gap:10px; margin-top:14px; }

.socials a{
    width:40px; height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(246,244,233,.10);
    color:var(--cream);
    transition:background .18s ease, color .18s ease;
}

.socials a:hover{ background:var(--orange); color:var(--white); }
.socials svg{ width:19px; height:19px; }

.footer-bottom{
    border-top:1px solid rgba(246,244,233,.14);
    text-align:center;
    padding:20px 24px;
    font-size:14px;
}

/* ==========================================================
   MITRA — AI PET CARE ASSISTANT
   ========================================================== */

.mitra-fab{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:90;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 22px 12px 12px;
    border:0;
    border-radius:999px;
    background:var(--forest);
    color:var(--cream);
    font-family:var(--font-body);
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    box-shadow:var(--shadow-lift);
    transition:transform .2s ease, background .2s ease;
}

.mitra-fab:hover{ transform:translateY(-3px); background:var(--forest-deep); }

.mitra-fab-avatar{
    width:34px; height:34px;
    border-radius:50%;
    background:var(--orange);
    color:var(--white);
    display:grid;
    place-items:center;
}

.mitra-fab-avatar svg{ width:19px; height:19px; }

.mitra-fab.hidden{ opacity:0; pointer-events:none; transform:scale(.9); }

.mitra-panel{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:95;
    width:min(400px, calc(100vw - 32px));
    height:min(620px, calc(100vh - 44px));
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:0 30px 80px rgba(18,43,20,.34);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    animation:mitraIn .26s cubic-bezier(.2,.8,.3,1);
}

.mitra-panel[hidden]{ display:none; }

@keyframes mitraIn{
    from{ opacity:0; transform:translateY(18px) scale(.97); }
    to  { opacity:1; transform:none; }
}

.mitra-head{
    background:var(--forest);
    color:var(--cream);
    padding:16px 16px 16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex:0 0 auto;
}

.mitra-id{ display:flex; align-items:center; gap:12px; }

.mitra-avatar{
    width:40px; height:40px;
    border-radius:50%;
    background:var(--orange);
    color:var(--white);
    display:grid;
    place-items:center;
    flex:0 0 auto;
}

.mitra-avatar svg{ width:22px; height:22px; }

.mitra-head h2{
    font-family:var(--font-body);
    color:var(--cream);
    font-size:16.5px;
    font-weight:700;
    line-height:1.2;
}

.mitra-head p{ font-size:12.5px; color:rgba(246,244,233,.7); }

.mitra-close{
    background:rgba(246,244,233,.12);
    border:0;
    color:var(--cream);
    width:34px; height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    cursor:pointer;
    flex:0 0 auto;
    transition:background .18s ease;
}

.mitra-close:hover{ background:rgba(246,244,233,.24); }
.mitra-close svg{ width:16px; height:16px; }

.mitra-log{
    flex:1 1 auto;
    overflow-y:auto;
    padding:20px 18px 6px;
    background:var(--cream);
    display:flex;
    flex-direction:column;
    gap:12px;
    scroll-behavior:smooth;
}

.mitra-msg{
    max-width:86%;
    padding:12px 16px;
    border-radius:18px;
    font-size:15px;
    line-height:1.55;
    white-space:pre-wrap;
    word-wrap:break-word;
    animation:msgIn .22s ease;
}

@keyframes msgIn{
    from{ opacity:0; transform:translateY(6px); }
    to  { opacity:1; transform:none; }
}

.mitra-msg.bot{
    align-self:flex-start;
    background:var(--paper);
    color:var(--ink);
    border-bottom-left-radius:6px;
    border:1px solid var(--border);
}

.mitra-msg.user{
    align-self:flex-end;
    background:var(--forest);
    color:var(--cream);
    border-bottom-right-radius:6px;
}

.mitra-msg.alert{
    align-self:stretch;
    max-width:100%;
    background:#fdece8;
    border:1.5px solid var(--ember);
    color:#7d2313;
    font-weight:600;
}

.mitra-msg.alert a{
    display:inline-block;
    margin-top:8px;
    background:var(--ember);
    color:var(--white);
    text-decoration:none;
    font-weight:700;
    padding:9px 18px;
    border-radius:999px;
}

/* Typing dots */
.mitra-typing{
    align-self:flex-start;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:18px;
    border-bottom-left-radius:6px;
    padding:14px 18px;
    display:flex;
    gap:5px;
}

.mitra-typing span{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--forest-soft);
    opacity:.4;
    animation:typing 1.2s infinite;
}

.mitra-typing span:nth-child(2){ animation-delay:.18s; }
.mitra-typing span:nth-child(3){ animation-delay:.36s; }

@keyframes typing{
    0%,60%,100%{ transform:translateY(0); opacity:.35; }
    30%        { transform:translateY(-5px); opacity:1; }
}

/* Booking summary card */
.mitra-card{
    align-self:stretch;
    background:var(--white);
    border:2px solid var(--forest);
    border-radius:18px;
    padding:18px;
    animation:msgIn .22s ease;
}

.mitra-card h4{
    font-family:var(--font-body);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1.6px;
    color:var(--forest-soft);
    margin-bottom:12px;
}

.mitra-card dl{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:7px 14px;
    font-size:14.5px;
    margin-bottom:16px;
}

.mitra-card dt{ color:var(--ink-soft); font-weight:600; }
.mitra-card dd{ color:var(--ink); font-weight:600; }

.mitra-card-actions{ display:flex; gap:9px; flex-wrap:wrap; }

.mitra-card-actions button{
    flex:1 1 auto;
    border:0;
    border-radius:999px;
    padding:11px 16px;
    font-family:var(--font-body);
    font-weight:700;
    font-size:14.5px;
    cursor:pointer;
    transition:background .18s ease;
}

.mitra-confirm{ background:var(--forest); color:var(--cream); }
.mitra-confirm:hover{ background:var(--forest-deep); }

.mitra-edit{ background:var(--border); color:var(--forest); }
.mitra-edit:hover{ background:var(--cream-dim); }

/* Quick reply chips */
.mitra-chips{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding:12px 18px 4px;
    background:var(--cream);
    flex:0 0 auto;
}

.mitra-chips:empty{ display:none; }

.mitra-chip{
    background:var(--white);
    border:1.5px solid var(--border);
    color:var(--forest);
    font-family:var(--font-body);
    font-weight:600;
    font-size:13.5px;
    padding:8px 15px;
    border-radius:999px;
    cursor:pointer;
    transition:background .18s ease, border-color .18s ease;
}

.mitra-chip:hover{ background:var(--amber); border-color:var(--amber); }

.mitra-composer{
    display:flex;
    align-items:center;
    gap:9px;
    padding:14px 16px 10px;
    background:var(--cream);
    flex:0 0 auto;
}

.mitra-composer input{
    flex:1;
    min-width:0;
    border:1.5px solid var(--border);
    border-radius:999px;
    padding:12px 18px;
    font-family:var(--font-body);
    font-size:15px;
    color:var(--ink);
    background:var(--white);
    outline:none;
    transition:border-color .18s ease;
}

.mitra-composer input:focus{ border-color:var(--forest); }

.mitra-composer button{
    width:44px; height:44px;
    flex:0 0 auto;
    border:0;
    border-radius:50%;
    background:var(--forest);
    color:var(--cream);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:background .18s ease, transform .18s ease;
}

.mitra-composer button:hover:not(:disabled){ background:var(--forest-deep); transform:scale(1.05); }
.mitra-composer button:disabled{ opacity:.45; cursor:not-allowed; }
.mitra-composer button svg{ width:19px; height:19px; }

.mitra-disclaimer{
    background:var(--cream);
    color:var(--ink-soft);
    font-size:11.5px;
    line-height:1.5;
    text-align:center;
    padding:0 20px 14px;
    flex:0 0 auto;
}

.mitra-disclaimer a{ color:var(--forest); font-weight:700; }

/* ---------- FLOATING CALL BUTTON ---------- */
.call-fab{
    display:none;
    position:fixed;
    left:18px;
    bottom:22px;
    z-index:88;
    width:56px; height:56px;
    border-radius:50%;
    background:var(--ember);
    color:var(--white);
    place-items:center;
    box-shadow:var(--shadow-lift);
}

.call-fab svg{ width:24px; height:24px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1000px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-media{ min-height:240px; order:-1; }
    .about-grid,
    .appointment-grid{ grid-template-columns:1fr; gap:36px; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .pet-row{ grid-template-columns:1fr; justify-items:center; }
    .pet-caption{ order:-1; }
    .clinic-pet{ max-width:160px; }
    .clinic-cat{ justify-self:center; }
}

@media (max-width:820px){
    .nav-toggle{ display:flex; }

    .nav-links{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        background:var(--paper);
        border-bottom:1px solid var(--border);
        padding:10px 18px 20px;
        box-shadow:0 18px 30px rgba(28,63,30,.10);
        display:none;
    }

    .nav-links.open{ display:flex; }

    .nav-links a{ padding:13px 14px; }
    .nav-links .nav-cta{ margin:8px 0 0; text-align:center; justify-content:center; }

    .section{ padding:72px 0; }
    .hero{ padding:36px 0 56px; }
    .hero-panel{ padding:32px 26px 30px; }
    .hero-ask{ padding:6px 6px 6px 18px; }
    .appointment-form{ padding:28px 22px; }
    .call-fab{ display:grid; }
    .mitra-fab-label{ display:none; }
    .mitra-fab{ padding:12px; }
    .emergency-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:520px){
    .footer-grid{ grid-template-columns:1fr; gap:30px; }
    .map-wrap{ height:300px; }
    .clinic-pet{ max-width:130px; }
    .pet-row{ grid-template-columns:1fr 1fr; align-items:end; }
    .pet-caption{ grid-column:1 / -1; }

    .mitra-panel{
        right:0; bottom:0; left:0;
        width:100%;
        height:100dvh;
        border-radius:0;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }

    .clinic-pet,
    .pet-body,
    .dog-tail,
    .cat-tail,
    .clinic-cat .ear-l,
    .clinic-cat .ear-r,
    .pulse-dot,
    .mitra-panel,
    .mitra-msg,
    .mitra-typing span{
        animation:none !important;
    }

    .reveal{ opacity:1; transform:none; transition:none; }
    .btn:hover{ transform:none; }
}


/* ==========================================================
   BRAND — logo treatments and the paw watermark
   ========================================================== */

/* Logo badge inside the hero panel */
.hero-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
}

.hero-brand img{
    width:76px; height:76px;
    border-radius:50%;
    object-fit:cover;
    background:var(--logo-cream);
    border:3px solid var(--orange);
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    flex:0 0 auto;
}

.hero-brand-text strong{
    display:block;
    font-family:var(--font-display);
    font-size:21px;
    color:var(--cream);
    line-height:1.15;
    font-weight:400;
}

.hero-brand-text span{
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--orange-bright);
    font-weight:700;
}

/* Footer logo */
.footer-logo{
    width:72px; height:72px;
    border-radius:50%;
    object-fit:cover;
    background:var(--logo-cream);
    border:3px solid var(--orange);
    margin-bottom:16px;
}

/* The paw-and-cross mark, lifted from the logo and used large.
   It bleeds off the edge rather than sitting politely in the middle —
   a cropped mark reads as confident, a centred ghost reads as a
   watermark someone forgot to remove. Kept faint enough that text
   contrast is untouched. */
.brand-mark{
    position:absolute;
    pointer-events:none;
    z-index:0;
    line-height:0;
}

.brand-mark svg{
    width:100%;
    height:100%;
    display:block;
}

.brand-mark-about{
    right:-90px;
    top:-40px;
    width:340px; height:340px;
    color:var(--navy);
    opacity:.055;
}

.brand-mark-emergency{
    right:-60px;
    bottom:-110px;
    width:300px; height:300px;
    color:var(--white);
    opacity:.10;
}

.brand-mark-footer{
    left:-70px;
    bottom:-80px;
    width:290px; height:290px;
    color:var(--orange);
    opacity:.07;
}

.brand-mark-hero{
    right:-40px;
    bottom:-70px;
    width:260px; height:260px;
    color:var(--navy);
    opacity:.09;
}

/* Sections that host a bleeding mark need to clip and stack correctly */
.about,
.emergency,
footer{
    position:relative;
    overflow:hidden;
}

.about .container,
.emergency .container,
footer .container,
footer .footer-bottom{
    position:relative;
    z-index:1;
}

@media (max-width:820px){
    .brand-mark-about,
    .brand-mark-hero{ display:none; }

    .brand-mark-emergency,
    .brand-mark-footer{ width:200px; height:200px; }

    .hero-brand img{ width:60px; height:60px; }
    .hero-brand-text strong{ font-size:18px; }
    .logo img{ width:54px; height:54px; }
    .logo span{ font-size:18px; }
}

/* ==========================================================
   LIGHTBOX — click any logo, doctor, or gallery photo to enlarge
   ========================================================== */

.logo img,
.hero-brand img,
.footer-logo,
.doctor-photo,
.gallery-img{ cursor:zoom-in; }

.lightbox{
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(11,50,81,.88);
    display:grid;
    place-items:center;
    padding:24px;
    animation:lbFade .22s ease;
}

.lightbox[hidden]{ display:none; }

@keyframes lbFade{ from{ opacity:0 } to{ opacity:1 } }

.lightbox figure{
    margin:0;
    text-align:center;
    max-width:min(920px, 94vw);
}

.lightbox img{
    max-width:100%;
    max-height:78vh;
    border-radius:var(--radius);
    box-shadow:0 30px 90px rgba(0,0,0,.5);
    background:var(--logo-cream);
    animation:lbZoom .3s cubic-bezier(.2,.8,.3,1);
}

@keyframes lbZoom{
    from{ transform:scale(.92); opacity:0 }
    to  { transform:none; opacity:1 }
}

.lightbox figcaption{
    margin-top:14px;
    color:var(--cream);
    font-family:var(--font-display);
    font-size:23px;
}

.lightbox figcaption:empty{ display:none; }

.lightbox-close{
    position:absolute;
    top:18px; right:18px;
    width:46px; height:46px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    color:var(--cream);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:background .18s ease;
}

.lightbox-close:hover{ background:var(--orange); }
.lightbox-close svg{ width:20px; height:20px; }

@media (prefers-reduced-motion:reduce){
    .lightbox,
    .lightbox img{ animation:none !important; }
}


/* ==========================================================
   REVIEWS — honest social proof for a young clinic
   ========================================================== */

.review-cta{
    text-align:center;
    max-width:62ch;
    margin:0 auto;
}

.review-cta p{
    color:var(--ink-soft);
    font-size:17px;
    margin-bottom:24px;
}

.review-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:22px;
    margin-top:48px;
}

.review-card{
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px 26px;
}

.review-stars{
    display:flex;
    gap:3px;
    margin-bottom:14px;
}

.review-stars svg{
    width:19px; height:19px;
    fill:var(--amber-deep);
}

.review-text{
    color:var(--ink);
    font-size:15.5px;
    margin-bottom:16px;
}

.review-name{
    font-weight:800;
    color:var(--navy);
    font-size:15px;
}

.review-source{
    color:var(--ink-soft);
    font-size:13px;
}


/* ==========================================================
   v15 — header address, hero media card, natural surfaces
   ========================================================== */

.logo-text{ display:flex; flex-direction:column; line-height:1.15; }

.logo-address{
    font-family:var(--font-body);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.2px;
    color:var(--ink-soft);
    margin-top:3px;
}

/* Real photo slot: hidden by JS if the file doesn't exist yet */
.hero-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.hero-media-fallback{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cellipse cx='48' cy='60' rx='15' ry='12'/%3E%3Cellipse cx='30' cy='42' rx='7' ry='9' transform='rotate(-20 30 42)'/%3E%3Cellipse cx='42' cy='32' rx='7' ry='9' transform='rotate(-6 42 32)'/%3E%3Cellipse cx='54' cy='32' rx='7' ry='9' transform='rotate(6 54 32)'/%3E%3Cellipse cx='66' cy='42' rx='7' ry='9' transform='rotate(20 66 42)'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-media-card{
    text-align:center;
    padding:24px;
}

.hero-media-card img{
    width:88px;
    height:88px;
    border-radius:50%;
    object-fit:cover;
    background:var(--logo-cream);
    border:3px solid var(--orange);
    margin:0 auto 16px;
    box-shadow:0 10px 28px rgba(0,0,0,.3);
}

.hero-media-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:22px;
    color:var(--cream);
    margin-bottom:6px;
}

.hero-media-sub{
    font-size:13px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-weight:700;
    color:var(--orange-bright);
}

@media (max-width:820px){
    .logo-address{ font-size:10px; }
    .logo span, .logo-text{ font-size:17px; }
}


/* ==========================================================
   v16 — decorative animals, drifting paws, review score
   ==========================================================
   Silhouettes bleed off section edges at low opacity: presence
   without noise. All are hidden on phones, where screen space
   is too precious to spend on decoration. */

.deco{
    position:absolute;
    pointer-events:none;
    z-index:0;
    line-height:0;
}

.deco svg{ width:100%; height:100%; display:block; }

.services,
.doctors,
.gallery,
.reviews,
.appointment,
.contact{
    position:relative;
    overflow:hidden;
}

.services .container,
.doctors .container,
.gallery .container,
.reviews .container,
.appointment .container,
.contact .container{
    position:relative;
    z-index:1;
}

/* Each one is cropped by its section edge — deliberate, not accidental */
.deco-cat-services{
    left:-70px; top:40px;
    width:230px; height:230px;
    color:var(--navy);
    opacity:.05;
    transform:rotate(-8deg);
}

.deco-bone-services{
    right:-40px; bottom:30px;
    width:210px; height:126px;
    color:var(--orange);
    opacity:.07;
    transform:rotate(14deg);
}

.deco-dog-doctors{
    left:-80px; bottom:-30px;
    width:250px; height:250px;
    color:var(--navy);
    opacity:.045;
}

.deco-cat-gallery{
    right:-60px; top:60px;
    width:220px; height:220px;
    color:var(--navy);
    opacity:.05;
    transform:scaleX(-1) rotate(6deg);
}

.deco-dog-reviews{
    right:-70px; top:30px;
    width:230px; height:230px;
    color:var(--orange);
    opacity:.06;
    transform:scaleX(-1);
}

.deco-bone-reviews{
    left:-50px; bottom:40px;
    width:190px; height:114px;
    color:var(--navy);
    opacity:.05;
    transform:rotate(-12deg);
}

.deco-cat-appointment{
    left:-60px; bottom:-20px;
    width:210px; height:210px;
    color:var(--orange);
    opacity:.055;
}

.deco-dog-contact{
    right:-80px; bottom:-40px;
    width:240px; height:240px;
    color:var(--navy);
    opacity:.045;
    transform:scaleX(-1);
}

/* A trail of paw prints walking down the sand hero, as if a pet
   just wandered across the page. Pure CSS, no images. */
.paw-trail{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

.paw-trail span{
    position:absolute;
    width:26px;
    height:26px;
    opacity:.10;
    color:var(--navy);
    animation:pawDrift 9s ease-in-out infinite;
}

.paw-trail span svg{ width:100%; height:100%; fill:currentColor; }

@keyframes pawDrift{
    0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); opacity:.10; }
    50%    { transform:translateY(-9px) rotate(var(--rot,0deg)); opacity:.16; }
}

/* Review score summary */
.review-score{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin-bottom:24px;
}

.review-score-num{
    font-family:var(--font-display);
    font-size:52px;
    font-weight:700;
    color:var(--navy);
    line-height:1;
}

.review-score-stars{ display:flex; gap:4px; }

.review-score-stars svg{
    width:24px; height:24px;
    fill:var(--amber-deep);
}

.review-score-count{
    font-size:14px;
    font-weight:600;
    color:var(--ink-soft);
}

.review-card{
    display:flex;
    flex-direction:column;
    transition:transform .22s ease, box-shadow .22s ease;
}

.review-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lift);
}

.review-text{ flex:1 1 auto; }

@media (max-width:900px){
    .deco{ display:none; }
    .paw-trail{ display:none; }
}

@media (prefers-reduced-motion:reduce){
    .paw-trail span{ animation:none !important; }
}


/* ==========================================================
   v16 — decorative artwork + review rating summary
   ========================================================== */

/* Artwork sits behind content, never intercepts a tap, and is
   faint enough that text contrast is untouched. Each piece bleeds
   off a section edge so it reads as intentional illustration
   rather than a sticker dropped in the middle. */
.art{
    position:absolute;
    pointer-events:none;
    z-index:0;
    line-height:0;
}

.art svg{ width:100%; height:100%; display:block; }

.services,
.doctors,
.gallery,
.reviews,
.appointment{
    position:relative;
    overflow:hidden;
}

.services .container,
.doctors .container,
.gallery .container,
.reviews .container,
.appointment .container{
    position:relative;
    z-index:1;
}

/* Dog bounding out of the left edge of Services */
.art-dog-services{
    left:-70px;
    bottom:-28px;
    width:300px; height:200px;
    color:var(--navy);
    opacity:.07;
}

/* Float lives on the inner svg so scroll-parallax can own the
   wrapper's transform without the two fighting each other */
.art-dog-services svg{ animation:artBob 7s ease-in-out infinite; }

/* Cat stretching on the right of the Doctors section */
.art-cat-doctors{
    right:-60px;
    top:40px;
    width:290px; height:194px;
    color:var(--navy);
    opacity:.06;
}

.art-cat-doctors svg{ animation:artBob 9s ease-in-out infinite 1.2s; }

/* Paw trails wandering across a section */
.art-paws-gallery{
    left:2%;
    top:14px;
    width:min(460px, 60vw); height:138px;
    color:var(--navy);
    opacity:.06;
}

.art-paws-appointment{
    right:2%;
    bottom:10px;
    width:min(420px, 55vw); height:126px;
    color:var(--orange);
    opacity:.09;
    transform:scaleX(-1);
}

/* A bone in the corner of Reviews */
.art-bone-reviews{
    right:36px;
    top:52px;
    width:150px; height:60px;
    color:var(--orange);
    opacity:.10;
    transform:rotate(-16deg);
}

@keyframes artBob{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-10px); }
}

/* Rating summary above the review cards */
.review-summary{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:40px;
}

.review-summary[hidden]{ display:none; }

.review-summary-score{
    font-family:var(--font-display);
    font-size:44px;
    font-weight:700;
    color:var(--navy);
    line-height:1;
}

.review-summary-stars{
    display:flex;
    gap:3px;
}

.review-summary-stars svg{
    width:23px; height:23px;
    fill:var(--amber-deep);
}

.review-summary-count{
    width:100%;
    text-align:center;
    color:var(--ink-soft);
    font-size:14.5px;
}

@media (max-width:820px){
    /* Phones: keep only the quietest pieces so nothing crowds the text */
    .art-dog-services,
    .art-cat-doctors,
    .art-bone-reviews{ display:none; }

    .art-paws-gallery,
    .art-paws-appointment{ opacity:.05; }
}

@media (prefers-reduced-motion:reduce){
    .art-dog-services svg,
    .art-cat-doctors svg{ animation:none !important; }
}
/* ==========================================================
   v18 — PREMIUM LAYER
   Mobile-first: glass navigation, swipe carousels, richer
   typography, micro-interactions, ambient depth.
   Appended last so it wins over earlier rules.
   ========================================================== */

/* ---------- TYPOGRAPHY ---------- */

:root{
    --font-display:'Plus Jakarta Sans','Segoe UI',sans-serif;
    --font-body:'Manrope','Segoe UI',Arial,sans-serif;
}

h1,h2,h3,h4{
    font-weight:800;
    letter-spacing:-0.03em;
    line-height:1.06;
}

h1{
    font-size:clamp(40px, 7.4vw, 68px);
    letter-spacing:-0.04em;
}

h2{ font-size:clamp(30px, 4.4vw, 46px); }
h3{ font-size:21px; letter-spacing:-0.02em; }

body{
    font-weight:400;
    letter-spacing:-0.005em;
    line-height:1.7;
}

.hero-sub,
.section-text{ letter-spacing:-0.01em; }

.eyebrow{
    font-weight:700;
    font-size:11.5px;
    letter-spacing:1.8px;
}

.btn{
    font-weight:700;
    letter-spacing:-0.01em;
}

/* ---------- AMBIENT DEPTH ---------- */

.ambient{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

/* Soft light pools — gradient wash, costs nothing to paint */
.ambient::before,
.ambient::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
}

.ambient::before{
    width:44vw; height:44vw;
    max-width:520px; max-height:520px;
    top:-14%; right:-8%;
    background:radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
}

.ambient::after{
    width:36vw; height:36vw;
    max-width:420px; max-height:420px;
    bottom:-16%; left:-10%;
    background:radial-gradient(circle, rgba(215,113,39,.20), transparent 70%);
}

.ambient-paw{
    position:absolute;
    color:var(--navy);
    opacity:.05;
    animation:drift linear infinite;
    will-change:transform;
}

.ambient-paw svg{ width:100%; height:100%; display:block; }

@keyframes drift{
    from{ transform:translateY(20px) rotate(0deg); }
    to  { transform:translateY(-120px) rotate(24deg); }
}

.hero .container{ position:relative; z-index:1; }

/* ---------- SCROLL REVEALS ---------- */

.reveal{
    transform:translateY(26px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1),
               transform .75s cubic-bezier(.16,1,.3,1);
}

/* Staggered cascade within a group */
.swipe-row > *:nth-child(1){ transition-delay:.00s; }
.swipe-row > *:nth-child(2){ transition-delay:.07s; }
.swipe-row > *:nth-child(3){ transition-delay:.14s; }
.swipe-row > *:nth-child(4){ transition-delay:.21s; }
.swipe-row > *:nth-child(5){ transition-delay:.28s; }
.swipe-row > *:nth-child(6){ transition-delay:.35s; }

/* Hero entrance */
.hero-panel,
.hero-media{
    animation:heroIn 1s cubic-bezier(.16,1,.3,1) both;
}

.hero-media{ animation-delay:.12s; }

@keyframes heroIn{
    from{ opacity:0; transform:translateY(24px) scale(.985); }
    to  { opacity:1; transform:none; }
}

/* ---------- MICRO-INTERACTIONS ---------- */

.btn{
    position:relative;
    overflow:hidden;
    transition:transform .28s cubic-bezier(.16,1,.3,1),
               box-shadow .28s ease,
               background .2s ease;
}

.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(16,68,105,.22);
}

.btn:active{ transform:translateY(-1px) scale(.985); }

.service-card{
    transition:transform .4s cubic-bezier(.16,1,.3,1),
               box-shadow .4s ease,
               border-color .3s ease;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 50px rgba(16,68,105,.16);
    border-color:rgba(215,113,39,.45);
}

.service-card .icon-circle{
    transition:transform .4s cubic-bezier(.16,1,.3,1), background .3s ease;
}

.service-card:hover .icon-circle{
    transform:scale(1.08) rotate(-6deg);
    background:var(--orange);
}

.doctor-card{
    transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}

.doctor-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 50px rgba(16,68,105,.16);
}

.doctor-photo{
    transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}

.doctor-card:hover .doctor-photo{
    transform:scale(1.05);
    border-color:var(--navy);
}

.review-card{
    transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}

.review-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 44px rgba(16,68,105,.13);
}

/* Animated underline on text links */
.contact-box a,
.footer-links a{
    position:relative;
    text-decoration:none;
}

.contact-box a::after,
.footer-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:100%; height:1.5px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}

.contact-box a:hover::after,
.footer-links a:hover::after{
    transform:scaleX(1);
    transform-origin:left;
}

.contact-box a:hover{ text-decoration:none; }

/* Gallery zoom */
.gallery-img{
    transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.gallery-container > *{ overflow:hidden; border-radius:var(--radius); }
.gallery-img:hover{ transform:scale(1.06); }

/* ---------- FORM: native-app feel ---------- */

.form-field input,
.form-field textarea{
    min-height:52px;
    font-size:16px;                /* 16px stops iOS zooming on focus */
    border-radius:14px;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.form-field input:focus,
.form-field textarea:focus{
    box-shadow:0 0 0 4px rgba(16,68,105,.10);
}

.form-field input:invalid:not(:placeholder-shown){
    border-color:#c0603f;
}

.form-field label{
    font-size:13px;
    letter-spacing:.2px;
    text-transform:uppercase;
    font-weight:700;
    color:var(--ink-soft);
}

/* ==========================================================
   MOBILE — treated as its own design, not a squeezed desktop
   ========================================================== */

@media (max-width:820px){

    /* ---------- GLASS NAVIGATION ---------- */

    .site-header{
        position:sticky;
        overflow-x:clip;
        overflow-y:visible;
        background:rgba(255,253,248,.72);
        backdrop-filter:saturate(180%) blur(18px);
        -webkit-backdrop-filter:saturate(180%) blur(18px);
        border-bottom:1px solid rgba(16,68,105,.08);
        transition:transform .4s cubic-bezier(.16,1,.3,1),
                   box-shadow .3s ease,
                   background .3s ease;
    }

    .nav{ padding:10px 18px; transition:padding .3s ease; }

    /* Shrinks when scrolling down, expands coming back up */
    .site-header.compact .nav{ padding:5px 18px; }
    .site-header.compact .logo img{ width:42px; height:42px; }
    .site-header.compact .logo-address{ opacity:0; height:0; margin:0; overflow:hidden; }

    .logo img,
    .logo-address{ transition:all .3s cubic-bezier(.16,1,.3,1); }

    .site-header.hidden-up{ transform:translateY(-100%); }

    .nav-toggle{ width:48px; height:48px; }

    /* ---------- FLOATING MENU PANEL ---------- */

    .nav-links{
        position:absolute;
        top:0; right:0;
        left:auto;
        width:min(84vw, 340px);
        height:100dvh;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:4px;
        padding:96px 22px 32px;
        background:rgba(255,253,248,.92);
        backdrop-filter:saturate(180%) blur(24px);
        -webkit-backdrop-filter:saturate(180%) blur(24px);
        border-left:1px solid rgba(16,68,105,.10);
        box-shadow:-20px 0 60px rgba(16,68,105,.18);
        transform:translateX(102%);
        transition:transform .42s cubic-bezier(.16,1,.3,1);
        display:flex;
        overflow-y:auto;
        z-index:80;
    }

    .nav-links.open{ transform:none; }

    .nav-links li{
        opacity:0;
        transform:translateX(18px);
        transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
    }

    .nav-links.open li{ opacity:1; transform:none; }

    .nav-links.open li:nth-child(1){ transition-delay:.10s; }
    .nav-links.open li:nth-child(2){ transition-delay:.15s; }
    .nav-links.open li:nth-child(3){ transition-delay:.20s; }
    .nav-links.open li:nth-child(4){ transition-delay:.25s; }
    .nav-links.open li:nth-child(5){ transition-delay:.30s; }
    .nav-links.open li:nth-child(6){ transition-delay:.35s; }
    .nav-links.open li:nth-child(7){ transition-delay:.40s; }

    .nav-links a{
        display:flex;
        align-items:center;
        min-height:52px;
        padding:12px 16px;
        font-size:17px;
        font-weight:600;
        border-radius:14px;
    }

    .nav-links .nav-cta{
        justify-content:center;
        margin-top:14px;
        min-height:54px;
    }

    .nav-backdrop{
        position:absolute;
        top:0; right:0;
        width:100vw;
        height:100dvh;
        z-index:75;
        background:rgba(11,50,81,.42);
        backdrop-filter:blur(2px);
        opacity:0;
        transition:opacity .35s ease;
    }

    .nav-backdrop.show{ opacity:1; }
    .nav-backdrop[hidden]{ display:none; }

    /* ---------- HERO ---------- */

    .hero{ padding:22px 0 44px; }

    .hero-grid{ gap:16px; }

    .hero-panel{
        padding:30px 24px 32px;
        border-radius:26px;
    }

    .hero-panel h1{
        font-size:clamp(34px, 9.4vw, 46px);
        letter-spacing:-0.035em;
        line-height:1.04;
        margin-bottom:14px;
    }

    .hero-sub{
        font-size:15.5px;
        margin-bottom:22px;
    }

    .hero-brand img{ width:56px; height:56px; }
    .hero-brand-text strong{ font-size:17px; }
    .hero-brand-text span{ font-size:10.5px; }

    /* Media block below the words on a phone: the message comes first */
    .hero-media{
        order:1;
        min-height:190px;
        border-radius:26px;
    }

    .hero-media-card img{ width:66px; height:66px; margin-bottom:12px; }
    .hero-media-title{ font-size:18px; }
    .hero-media-sub{ font-size:11px; }

    .hero-ask{ padding:6px 6px 6px 18px; }
    .hero-ask input{ font-size:16px; padding:12px 0; }
    .hero-ask button{ width:46px; height:46px; }

    .hero-buttons{ gap:10px; }
    .hero-buttons .btn{ flex:1 1 auto; min-height:52px; }

    /* ---------- BREATHING ROOM ---------- */

    .section{ padding:64px 0; }
    .container{ padding:0 18px; }
    .section-head{ margin-bottom:34px; }

    h2{ font-size:clamp(27px, 7.6vw, 34px); }

    .section-text{ font-size:16px; }

    /* ---------- SWIPE CAROUSELS ---------- */

    .swipe-row{
        display:flex;
        gap:14px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        /* Cards bleed to the screen edge — a native-app cue */
        margin:0 -18px;
        padding:4px 18px 18px;
        grid-template-columns:none;
    }

    .swipe-row::-webkit-scrollbar{ display:none; }

    .swipe-row > *{
        flex:0 0 82%;
        max-width:82%;
        scroll-snap-align:center;
    }

    .service-card{ padding:26px 22px; }
    .service-card h3{ font-size:19px; }

    .doctor-card{ padding:26px 22px; }
    .doctor-photo{ width:132px; height:132px; }

    .review-card{ padding:24px 22px; }

    /* Hint that there is more to swipe */
    .swipe-hint{
        display:block;
        text-align:center;
        font-size:12.5px;
        font-weight:600;
        letter-spacing:.4px;
        color:var(--ink-soft);
        margin-top:2px;
    }

    /* ---------- TOUCH TARGETS ---------- */

    .btn{
        min-height:52px;
        padding:15px 26px;
        font-size:16px;
    }

    .review-buttons .btn,
    .emergency-numbers .btn{ flex:1 1 auto; }

    .mitra-fab{ min-height:56px; min-width:56px; }
    .call-fab{ width:60px; height:60px; }

    .socials a{ width:48px; height:48px; }

    /* ---------- FORM ---------- */

    .appointment-form{ padding:26px 20px; border-radius:24px; }
    .form-grid{ gap:14px; }
    .form-field{ margin-bottom:16px; }
    .form-field textarea{ min-height:120px; }

    /* ---------- REVIEWS + CONTACT ---------- */

    .review-summary-score{ font-size:38px; }
    .contact-box{ padding:24px 20px; }
    .map-wrap{ height:280px; border-radius:22px; }

    /* ---------- MITRA ---------- */

    .mitra-composer input{ font-size:16px; min-height:50px; }
    .mitra-chip{ min-height:42px; }
}

@media (max-width:520px){
    .swipe-row > *{ flex:0 0 86%; max-width:86%; }
    .pet-row{ margin-top:36px; }
}

/* Desktop keeps the grid; the hint is mobile-only */
.swipe-hint{ display:none; }

/* ---------- MOTION SAFETY ---------- */

@media (prefers-reduced-motion:reduce){
    .hero-panel,
    .hero-media,
    .ambient-paw{ animation:none !important; }

    .btn:hover,
    .service-card:hover,
    .doctor-card:hover,
    .review-card:hover{ transform:none; }

    .nav-links{ transition:none; }
}
/* ==========================================================
   v19 — ATMOSPHERE, STORYTELLING, TRUST
   Pokhara mountains and light in the hero, rare creature
   moments while scrolling, doctor credibility badges, and
   the last of the premium micro-interactions.
   ========================================================== */

/* ---------- POKHARA ATMOSPHERE ---------- */

/* Soft sunlight falling across the hero */
.sky-rays{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(112deg, transparent 34%, rgba(255,255,255,.42) 40%, transparent 46%),
        linear-gradient(112deg, transparent 52%, rgba(255,255,255,.28) 57%, transparent 62%),
        linear-gradient(112deg, transparent 66%, rgba(255,255,255,.20) 70%, transparent 75%);
    animation:raysShift 22s ease-in-out infinite alternate;
    opacity:.75;
}

@keyframes raysShift{
    from{ transform:translateX(-3%) scaleY(1); opacity:.55; }
    to  { transform:translateX(3%)  scaleY(1.04); opacity:.85; }
}

/* The Annapurna skyline the clinic actually sits under */
.mountains{
    position:absolute;
    left:0; right:0; bottom:0;
    height:min(230px, 34vh);
    z-index:0;
    pointer-events:none;
}

.mountains svg{ width:100%; height:100%; display:block; }

.ridge-far{ fill:var(--navy); opacity:.055; }
.ridge-near{ fill:var(--navy); opacity:.085; }

/* ---------- HERO TRUST BADGES ---------- */

.hero-badges{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:22px;
}

.hero-badges li{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    color:var(--cream);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.2px;
    padding:7px 14px;
    border-radius:999px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.hero-badge-dot{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--orange-bright);
    box-shadow:0 0 0 0 rgba(240,154,82,.6);
    animation:badgePulse 2.6s ease-out infinite;
}

@keyframes badgePulse{
    0%  { box-shadow:0 0 0 0 rgba(240,154,82,.55); }
    70% { box-shadow:0 0 0 7px rgba(240,154,82,0); }
    100%{ box-shadow:0 0 0 0 rgba(240,154,82,0); }
}

/* ---------- DOCTOR SECTION: credibility ---------- */

.doctor-container{ max-width:820px; }

.doctor-card{
    padding:34px 28px 30px;
    border-radius:24px;
}

.doctor-photo-wrap{
    position:relative;
    width:168px;
    margin:0 auto 20px;
}

.doctor-photo{
    width:168px;
    height:168px;
    margin:0;
    border-width:4px;
}

/* Quiet "on duty" dot — the clinic never closes */
.doctor-status{
    position:absolute;
    right:10px; bottom:10px;
    width:20px; height:20px;
    border-radius:50%;
    background:#3f9d63;
    border:3px solid var(--paper);
    box-shadow:0 0 0 0 rgba(63,157,99,.55);
    animation:badgePulse 3s ease-out infinite;
}

.doctor-role{
    color:var(--ink-soft);
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;
    text-transform:uppercase;
    margin-top:4px;
}

.doctor-badges{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
    margin-top:16px;
}

.doctor-badge{
    background:var(--navy);
    color:var(--cream);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.3px;
    padding:7px 15px;
    border-radius:999px;
}

.doctor-badge-soft{
    background:rgba(215,113,39,.12);
    color:var(--orange-text);
    font-weight:600;
}

/* ---------- SCROLL STORYTELLING ---------- */

/* A cat leaning in from the edge of the Doctors section.
   It only slides in once that section is actually reached. */
.peek-cat{
    position:absolute;
    left:-130px;
    bottom:0;
    width:120px; height:140px;
    color:var(--navy);
    opacity:.10;
    z-index:0;
    pointer-events:none;
    transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}

.doctors.in-view .peek-cat{ transform:translateX(122px); }

.peek-cat-tail{
    transform-box:fill-box;
    transform-origin:0% 90%;
    animation:tailFlick 5s ease-in-out infinite;
}

@keyframes tailFlick{
    0%,100%{ transform:rotate(0deg); }
    50%    { transform:rotate(-12deg); }
}

/* Butterflies crossing the gallery — rare, slow, easily missed */
.butterflies{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.butterfly{
    position:absolute;
    left:-6%;
    top:22%;
    width:34px; height:26px;
    color:var(--orange);
    opacity:0;
    animation:flutter 26s ease-in-out infinite;
}

.butterfly-2{
    top:64%;
    width:24px; height:18px;
    color:var(--navy);
    animation-duration:34s;
    animation-delay:12s;
}

.butterfly svg{ width:100%; height:100%; display:block; animation:wingBeat 1.1s ease-in-out infinite; }

@keyframes flutter{
    0%   { transform:translate(0,0) rotate(-4deg); opacity:0; }
    8%   { opacity:.30; }
    50%  { transform:translate(52vw,-56px) rotate(6deg); opacity:.30; }
    88%  { transform:translate(108vw,26px) rotate(-3deg); opacity:0; }
    100% { transform:translate(112vw,30px); opacity:0; }
}

@keyframes wingBeat{
    0%,100%{ transform:scaleX(1); }
    50%    { transform:scaleX(.62); }
}

/* A dog asleep in the footer, breathing */
.sleeping-dog{
    position:absolute;
    right:26px;
    bottom:0;
    width:210px; height:96px;
    color:var(--cream);
    opacity:.07;
    z-index:0;
    pointer-events:none;
}

.sleeping-dog svg{ width:100%; height:100%; display:block; }

.dog-breath{
    transform-box:fill-box;
    transform-origin:50% 100%;
    animation:breathSlow 4.6s ease-in-out infinite;
}

@keyframes breathSlow{
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.03); }
}

.dog-zzz{ animation:zzzFloat 4.6s ease-in-out infinite; }

@keyframes zzzFloat{
    0%,100%{ transform:translateY(0); opacity:.5; }
    50%    { transform:translateY(-8px); opacity:1; }
}

/* ---------- MASONRY GALLERY ---------- */

@media (min-width:821px){
    .gallery-container{
        display:block;
        column-count:3;
        column-gap:18px;
    }

    .gallery-container > *{
        break-inside:avoid;
        margin-bottom:18px;
        display:block;
        width:100%;
    }

    /* Varied heights so it reads as a real masonry wall */
    .gallery-container > *:nth-child(3n+1){ aspect-ratio:4/5; }
    .gallery-container > *:nth-child(3n+2){ aspect-ratio:4/3; }
    .gallery-container > *:nth-child(3n+3){ aspect-ratio:1/1; }
}

/* ---------- REVIEWS: quote styling ---------- */

.review-card{
    position:relative;
    padding-top:34px;
}

.review-card::before{
    content:"“";
    position:absolute;
    top:6px; left:22px;
    font-family:var(--font-display);
    font-size:64px;
    line-height:1;
    color:var(--orange);
    opacity:.20;
}

.review-name{
    display:flex;
    align-items:center;
    gap:10px;
}

/* Initial avatar, generated from the reviewer's name by JS */
.review-avatar{
    width:36px; height:36px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--navy);
    color:var(--cream);
    display:grid;
    place-items:center;
    font-size:14px;
    font-weight:800;
    letter-spacing:0;
}

.review-source{ margin-left:46px; }

/* ---------- MAGNETIC BUTTONS + CARD TILT ---------- */

.btn{
    will-change:transform;
}

.btn::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
               rgba(255,255,255,.28), transparent 62%);
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
}

.btn:hover::after{ opacity:1; }

.tilt{
    transform-style:preserve-3d;
    will-change:transform;
}

/* Labels remain above the fields at every width so entered details stay readable. */

/* ---------- STACKING ---------- */

.doctors,
.gallery,
footer{ position:relative; overflow:hidden; }

.doctors .container,
.gallery .container,
footer .container,
footer .footer-bottom{ position:relative; z-index:1; }

/* ---------- MOBILE TUNING ---------- */

@media (max-width:820px){
    .mountains{ height:150px; }
    .sky-rays{ opacity:.5; }

    .hero-badges{ gap:6px; margin-bottom:20px; }
    .hero-badges li{ font-size:11.5px; padding:6px 12px; }

    .doctor-photo-wrap,
    .doctor-photo{ width:148px; }
    .doctor-photo{ height:148px; }

    /* The rarer flourishes step aside on small screens */
    .peek-cat,
    .butterflies{ display:none; }

    .sleeping-dog{ width:150px; height:70px; right:12px; opacity:.06; }

    .review-card::before{ font-size:52px; top:2px; left:18px; }
}

/* ---------- MOTION SAFETY ---------- */

@media (prefers-reduced-motion:reduce){
    .sky-rays,
    .hero-badge-dot,
    .doctor-status,
    .peek-cat-tail,
    .butterfly,
    .butterfly svg,
    .dog-breath,
    .dog-zzz{ animation:none !important; }

    .butterfly{ opacity:0 !important; }
    .doctors.in-view .peek-cat{ transform:none; }
    .tilt{ transform:none !important; }
}
/* ==========================================================
   v21 — TYPOGRAPHY AS BRAND
   Outfit ExtraBold headlines against Manrope body text.
   Big, confident headings; quiet, comfortable paragraphs.
   The contrast between the two IS the visual identity.
   ========================================================== */

:root{
    --font-display:'Outfit','Segoe UI',sans-serif;
    --font-body:'Manrope','Segoe UI',Arial,sans-serif;
}

/* ---------- HEADINGS: loud and tight ---------- */

h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:-0.035em;
    line-height:1.02;
    text-wrap:balance;          /* stops lonely words on their own line */
}

h1{
    /* Capped at 72px: the hero headline sits in a half-width panel,
       and past this it wraps to four cramped lines. */
    font-size:clamp(44px, 5.4vw, 72px);
    font-weight:900;
    letter-spacing:-0.042em;
    line-height:1.04;
}

h2{
    font-size:clamp(36px, 5.2vw, 62px);
    letter-spacing:-0.04em;
    margin-bottom:20px;
}

h3{
    font-size:23px;
    font-weight:700;
    letter-spacing:-0.025em;
    line-height:1.18;
}

h4{
    font-size:20px;
    font-weight:700;
    letter-spacing:-0.02em;
}

/* ---------- BODY: calm counterweight ---------- */

body{
    font-family:var(--font-body);
    font-weight:400;
    font-size:17px;
    line-height:1.72;
    letter-spacing:-0.006em;
}

p{ text-wrap:pretty; }

.section-text{
    font-size:18.5px;
    line-height:1.75;
    color:var(--ink-soft);
    max-width:56ch;             /* the readable measure */
}

.hero-sub{
    font-size:18.5px;
    line-height:1.68;
    max-width:44ch;
    font-weight:500;
}

/* ---------- EYEBROWS: small, wide, deliberate ---------- */

.eyebrow{
    font-family:var(--font-body);
    font-weight:800;
    font-size:12px;
    letter-spacing:2.6px;
    text-transform:uppercase;
    margin-bottom:18px;
}

/* ---------- RHYTHM: more air between things ---------- */

.section{ padding:128px 0; }

.section-head{ margin-bottom:64px; }

.section-head h2{ margin-bottom:14px; }

.section-head .eyebrow{ margin-bottom:16px; }

.hero-panel h1{ margin-bottom:22px; }

.hero-sub{ margin-bottom:30px; }

/* ---------- COMPONENT TYPE ---------- */

.btn{
    font-family:var(--font-body);
    font-weight:800;
    font-size:16px;
    letter-spacing:-0.01em;
}

.logo-text{
    font-family:var(--font-display);
    font-weight:800;
    font-size:24px;
    letter-spacing:-0.035em;
}

.logo-address{
    font-family:var(--font-body);
    font-weight:600;
    letter-spacing:0;
}

.hero-brand-text strong{
    font-family:var(--font-display);
    font-weight:800;
    font-size:23px;
    letter-spacing:-0.03em;
}

.nav-links a{
    font-family:var(--font-body);
    font-weight:700;
    letter-spacing:-0.01em;
}

.service-card h3{ margin-bottom:10px; }

.service-card p{
    font-size:16px;
    color:var(--ink-soft);
    line-height:1.65;
}

.doctor-card h3{
    font-size:26px;
    letter-spacing:-0.03em;
}

.review-text{
    font-size:16.5px;
    line-height:1.68;
    font-weight:500;
    color:var(--ink);
}

.review-name{
    font-family:var(--font-display);
    font-weight:800;
    font-size:16px;
    letter-spacing:-0.02em;
}

.review-summary-score{
    font-family:var(--font-display);
    font-weight:900;
    font-size:60px;
    letter-spacing:-0.045em;
}

.emergency h2{ font-size:clamp(32px, 4.4vw, 50px); }

.why-card h3{
    font-size:27px;
    margin-bottom:24px;
}

.check-list li{ font-size:16.5px; }

.contact-box h3{ font-size:23px; }

footer h3{
    font-family:var(--font-display);
    font-weight:800;
    font-size:27px;
    letter-spacing:-0.03em;
}

footer h4{
    font-family:var(--font-display);
    font-weight:800;
    font-size:19px;
    letter-spacing:-0.02em;
}

.form-field label{
    font-family:var(--font-body);
    font-weight:600;
}

.mitra-head h2{
    font-family:var(--font-display);
    font-weight:800;
    font-size:18px;
    letter-spacing:-0.02em;
}

.hero-media-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:25px;
    letter-spacing:-0.03em;
}

.pet-caption h2{ font-size:clamp(32px, 4.6vw, 54px); }

/* ---------- MOBILE: still bold, just fitted ---------- */

@media (max-width:820px){

    body{ font-size:16.5px; line-height:1.7; }

    h1,
    .hero-panel h1{
        font-size:clamp(38px, 10.2vw, 52px);
        letter-spacing:-0.042em;
        line-height:1.05;
    }

    h2{
        font-size:clamp(31px, 8.4vw, 42px);
        letter-spacing:-0.04em;
    }

    h3{ font-size:21px; }

    .section{ padding:88px 0; }
    .section-head{ margin-bottom:42px; }

    .section-text,
    .hero-sub{ font-size:16.5px; line-height:1.68; }

    .eyebrow{ font-size:11px; letter-spacing:2.2px; margin-bottom:14px; }

    .logo-text{ font-size:19px; }
    .doctor-card h3{ font-size:23px; }
    .review-summary-score{ font-size:46px; }
    .why-card h3{ font-size:24px; }
    footer h3{ font-size:23px; }
}

@media (max-width:520px){
    h1,
    .hero-panel h1{ font-size:clamp(36px, 11.5vw, 46px); }
    .section{ padding:76px 0; }
}

/* ==========================================================
   v22 — THE LAST REFINEMENTS
   A dog crossing the distant ridge, paw prints that press
   themselves into the page, parallax on the mountains, and a
   navbar that behaves on desktop as well as on phones.
   ========================================================== */

/* ---------- DISTANT DOG ON THE RIDGE ----------
   Crosses roughly once every two minutes, at the size of a
   speck. Most visitors will never consciously see it; the ones
   who do get a small private moment. */

.walking-dog{
    position:absolute;
    bottom:78px;
    left:-8%;
    width:56px; height:38px;
    z-index:0;
    color:var(--navy);
    opacity:0;
    pointer-events:none;
    animation:crossRidge 118s linear infinite;
}

.walking-dog svg{ width:100%; height:100%; display:block; }

@keyframes crossRidge{
    0%   { transform:translateX(0)      scaleX(1); opacity:0; }
    3%   { opacity:.13; }
    46%  { transform:translateX(112vw)  scaleX(1); opacity:.13; }
    50%  { transform:translateX(112vw)  scaleX(1); opacity:0; }
    100% { transform:translateX(112vw)  scaleX(1); opacity:0; }
}

/* Legs alternate — the detail that makes it read as walking */
.leg{ transform-box:fill-box; transform-origin:50% 0%; }
.leg-a,.leg-d{ animation:step 0.9s ease-in-out infinite; }
.leg-b,.leg-c{ animation:step 0.9s ease-in-out infinite 0.45s; }

@keyframes step{
    0%,100%{ transform:rotate(11deg); }
    50%    { transform:rotate(-11deg); }
}

/* ---------- PAW PRINTS PRESSING INTO THE SERVICES SECTION ----------
   They print one after another when the section is reached, then
   slowly fade — like something walked past a moment ago. */

.paw-walk{
    position:absolute;
    left:0; right:0;
    top:34px;
    height:110px;
    z-index:0;
    pointer-events:none;
}

.paw-step{
    position:absolute;
    width:30px; height:30px;
    color:var(--navy);
    opacity:0;
    transform:scale(.6);
}

.paw-step svg{ width:100%; height:100%; display:block; }

.paw-step:nth-child(1){ left:6%;  top:56px; transform:rotate(-14deg) scale(.6); }
.paw-step:nth-child(2){ left:20%; top:16px; transform:rotate(6deg)   scale(.6); }
.paw-step:nth-child(3){ left:36%; top:62px; transform:rotate(-9deg)  scale(.6); }
.paw-step:nth-child(4){ left:52%; top:20px; transform:rotate(11deg)  scale(.6); }
.paw-step:nth-child(5){ left:68%; top:58px; transform:rotate(-6deg)  scale(.6); }
.paw-step:nth-child(6){ left:84%; top:22px; transform:rotate(9deg)   scale(.6); }

.services.in-view .paw-step{ animation:pressPaw 9s ease-out forwards; }

.services.in-view .paw-step:nth-child(1){ animation-delay:.10s; }
.services.in-view .paw-step:nth-child(2){ animation-delay:.42s; }
.services.in-view .paw-step:nth-child(3){ animation-delay:.74s; }
.services.in-view .paw-step:nth-child(4){ animation-delay:1.06s; }
.services.in-view .paw-step:nth-child(5){ animation-delay:1.38s; }
.services.in-view .paw-step:nth-child(6){ animation-delay:1.70s; }

@keyframes pressPaw{
    0%  { opacity:0;    }
    14% { opacity:.085; }
    62% { opacity:.085; }
    100%{ opacity:0;    }
}

/* ---------- AMBIENT LAYERS IN QUIETER SECTIONS ---------- */

.ambient-soft::before{
    width:34vw; height:34vw;
    max-width:400px; max-height:400px;
    background:radial-gradient(circle, rgba(215,113,39,.10), transparent 70%);
}

.ambient-soft::after{
    width:28vw; height:28vw;
    max-width:340px; max-height:340px;
    background:radial-gradient(circle, rgba(16,68,105,.08), transparent 70%);
}

.about,
.appointment{ position:relative; overflow:hidden; }

.about .container,
.appointment .container{ position:relative; z-index:1; }

/* ---------- DESKTOP NAVBAR: shrink on scroll ---------- */

@media (min-width:821px){
    .site-header{
        background:rgba(255,253,248,.78);
        backdrop-filter:saturate(180%) blur(16px);
        -webkit-backdrop-filter:saturate(180%) blur(16px);
        transition:background .3s ease, box-shadow .3s ease;
    }

    .nav{ transition:padding .35s cubic-bezier(.16,1,.3,1); }

    .site-header.compact .nav{ padding:6px 24px; }

    .site-header.compact .logo img{
        width:50px; height:50px;
    }

    .site-header.compact .logo-address{
        opacity:0;
        max-height:0;
        margin-top:0;
        overflow:hidden;
    }

    /* The logo animates its size. The address line collapses its
       height. They must NOT share a max-height — that squashed the
       logo flat. */
    .logo img{
        transition:width .35s cubic-bezier(.16,1,.3,1),
                   height .35s cubic-bezier(.16,1,.3,1);
    }

    .logo-address{
        transition:opacity .25s ease,
                   max-height .35s ease,
                   margin-top .35s ease;
        max-height:20px;
    }

    /* Nav links get an animated underline instead of a pill */
    .nav-links > li > a:not(.nav-cta){
        position:relative;
        background:none;
    }

    .nav-links > li > a:not(.nav-cta)::after{
        content:"";
        position:absolute;
        left:13px; right:13px;
        bottom:4px;
        height:2px;
        border-radius:2px;
        background:var(--orange);
        transform:scaleX(0);
        transform-origin:right;
        transition:transform .35s cubic-bezier(.16,1,.3,1);
    }

    .nav-links > li > a:not(.nav-cta):hover{
        background:none;
        color:var(--navy);
    }

    .nav-links > li > a:not(.nav-cta):hover::after{
        transform:scaleX(1);
        transform-origin:left;
    }
}

/* ---------- MOBILE ---------- */

@media (max-width:820px){
    /* The ridge dog and paw trail need width to read; on a phone
       they'd just be clutter beside the text. */
    .walking-dog,
    .paw-walk{ display:none; }
}

/* ---------- MOTION SAFETY ---------- */

@media (prefers-reduced-motion:reduce){
    .walking-dog,
    .leg,
    .services.in-view .paw-step{ animation:none !important; }

    .walking-dog{ opacity:0 !important; }
}

/* ==========================================================
   v24 — THE GARDEN
   A calm garden living behind the content: grass in the breeze,
   flowers nodding, birds passing, a dog playing fetch, sunset
   warmth in the footer. Everything under 12% opacity, everything
   waits for its section to be reached, everything behind text.
   ========================================================== */

/* ---------- GRASS ---------- */

.grass{
    position:absolute;
    left:0; right:0;
    bottom:0;
    height:60px;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.blade{
    position:absolute;
    bottom:-4px;
    width:3px;
    border-radius:3px 3px 0 0;
    background:linear-gradient(to top, var(--navy), transparent);
    opacity:.075;
    transform-origin:50% 100%;
    animation:sway 5.5s ease-in-out infinite;
}

.blade:nth-child(even){ animation-duration:7s; opacity:.055; }
.blade:nth-child(3n){ animation-duration:6.2s; width:2px; }

@keyframes sway{
    0%,100%{ transform:rotate(-4deg) scaleY(1); }
    50%    { transform:rotate(5deg)  scaleY(1.04); }
}

.grass-hero{ height:56px; }
.grass-gallery{ height:48px; }

/* ---------- FLOWERS ---------- */

.flowers{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.flower{
    position:absolute;
    bottom:-6px;
    color:var(--orange);
    opacity:0;
    transform-origin:50% 100%;
}

.flower svg{ width:100%; height:100%; display:block; }

/* Flowers only wake when the section is reached */
.services.in-view .flower{
    animation:bloom 1.6s cubic-bezier(.16,1,.3,1) forwards,
              nod 6.5s ease-in-out infinite 1.6s;
}

@keyframes bloom{
    from{ opacity:0; transform:translateY(16px) scale(.86); }
    to  { opacity:.10; transform:none; }
}

@keyframes nod{
    0%,100%{ transform:rotate(-3.5deg); }
    50%    { transform:rotate(3.5deg); }
}

/* ---------- BIRDS ---------- */

.bird{
    position:absolute;
    width:44px; height:22px;
    color:var(--navy);
    opacity:0;
    z-index:0;
    pointer-events:none;
}

.bird svg{ width:100%; height:100%; display:block; }

.bird-hero{
    top:16%;
    left:-8%;
    animation:flyAcross 74s linear infinite;
}

.bird-gallery{
    top:14%;
    left:-8%;
    width:34px; height:17px;
    animation:flyAcross 58s linear infinite 8s;
}

.bird-gallery-2{
    top:30%;
    left:-8%;
    width:26px; height:13px;
    animation:flyAcross 66s linear infinite 26s;
}

/* Crosses, then stays away for most of the cycle — rare by design */
@keyframes flyAcross{
    0%  { transform:translate(0,0); opacity:0; }
    2%  { opacity:.16; }
    14% { transform:translate(40vw,-26px); opacity:.16; }
    28% { transform:translate(84vw,10px); opacity:.16; }
    32% { transform:translate(116vw,-14px); opacity:0; }
    100%{ transform:translate(116vw,-14px); opacity:0; }
}

.wing-up{ transform-box:fill-box; transform-origin:100% 100%; animation:flap .42s ease-in-out infinite; }
.wing-dn{ transform-box:fill-box; transform-origin:0% 100%; animation:flap .42s ease-in-out infinite; }

@keyframes flap{
    0%,100%{ transform:rotate(-13deg); }
    50%    { transform:rotate(13deg); }
}

/* ---------- GALLERY: a game of fetch ---------- */

.garden-scene{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.fetch-dog{
    position:absolute;
    left:-14%;
    bottom:14px;
    width:132px; height:88px;
    color:var(--navy);
    opacity:0;
}

.fetch-dog svg{ width:100%; height:100%; display:block; }

.gallery.in-view .fetch-dog{ animation:runFetch 40s ease-in-out infinite 3s; }

/* Runs in, pauses, trots back — a full little story */
@keyframes runFetch{
    0%  { transform:translateX(0)      scaleX(1); opacity:0; }
    4%  { opacity:.085; }
    26% { transform:translateX(62vw)   scaleX(1); opacity:.085; }
    32% { transform:translateX(64vw)   scaleX(1); opacity:.085; }
    36% { transform:translateX(64vw)   scaleX(-1); opacity:.085; }
    60% { transform:translateX(-4vw)   scaleX(-1); opacity:.085; }
    66% { transform:translateX(-14vw)  scaleX(-1); opacity:0; }
    100%{ transform:translateX(-14vw)  scaleX(-1); opacity:0; }
}

.fetch-ball{
    position:absolute;
    left:66vw;
    bottom:22px;
    width:13px; height:13px;
    border-radius:50%;
    background:var(--orange);
    opacity:0;
}

.gallery.in-view .fetch-ball{ animation:ballRest 40s ease-in-out infinite 3s; }

@keyframes ballRest{
    0%,30% { opacity:.16; transform:none; }
    34%    { opacity:.16; transform:translateY(-16px) scale(.9); }
    38%    { opacity:0;   transform:translateY(0) scale(.8); }
    100%   { opacity:0; }
}

.fetch-tail{
    transform-box:fill-box;
    transform-origin:100% 90%;
    animation:wagFast .34s ease-in-out infinite;
}

@keyframes wagFast{
    0%,100%{ transform:rotate(-16deg); }
    50%    { transform:rotate(18deg); }
}

.fetch-leg-a,.fetch-leg-d{ transform-box:fill-box; transform-origin:50% 0%; animation:step .38s ease-in-out infinite; }
.fetch-leg-b,.fetch-leg-c{ transform-box:fill-box; transform-origin:50% 0%; animation:step .38s ease-in-out infinite .19s; }

/* ---------- DOCTORS: the cat blinks ---------- */

.peek-cat svg{ position:relative; }

.peek-cat::after,
.peek-cat::before{
    content:"";
    position:absolute;
    top:31px;
    width:9px; height:9px;
    border-radius:50%;
    background:var(--paper);
    opacity:.85;
    animation:catBlink 7.5s ease-in-out infinite;
}

.peek-cat::before{ left:44px; }
.peek-cat::after{ left:66px; }

@keyframes catBlink{
    0%,92%,100%{ transform:scaleY(1); }
    95%        { transform:scaleY(.06); }
    97%        { transform:scaleY(1); }
}

/* ---------- FOOTER: sunset ---------- */

.sunset-glow{
    position:absolute;
    left:0; right:0;
    bottom:0;
    height:280px;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse 60% 100% at 78% 100%, rgba(240,154,82,.22), transparent 70%),
        radial-gradient(ellipse 50% 90% at 20% 100%, rgba(215,113,39,.12), transparent 70%);
    animation:sunsetBreathe 14s ease-in-out infinite;
}

@keyframes sunsetBreathe{
    0%,100%{ opacity:.75; }
    50%    { opacity:1; }
}

/* ---------- STACKING: content always sits above the garden ---------- */

.hero .container,
.services .container,
.doctors .container,
.gallery .container,
footer .container,
footer .footer-bottom{ position:relative; z-index:1; }

/* ---------- MOBILE: keep the calm, drop the traffic ---------- */

@media (max-width:820px){
    /* Grass and sunset stay — they're atmosphere, not motion.
       The moving creatures step aside on a small screen. */
    .flowers,
    .garden-scene,
    .bird{ display:none; }

    .grass{ height:38px; }
    .blade{ opacity:.055; }
    .sunset-glow{ height:180px; }
}

/* ---------- MOTION SAFETY ---------- */

@media (prefers-reduced-motion:reduce){
    .blade,
    .flower,
    .bird,
    .wing-up,
    .wing-dn,
    .fetch-dog,
    .fetch-ball,
    .fetch-tail,
    .fetch-leg-a,.fetch-leg-b,.fetch-leg-c,.fetch-leg-d,
    .peek-cat::before,
    .peek-cat::after,
    .sunset-glow{ animation:none !important; }

    .bird,
    .fetch-dog,
    .fetch-ball{ opacity:0 !important; }

    .services.in-view .flower{ opacity:.10; }
}

/* ==========================================================
   v25 — NATURE, NOT DECORATION
   Three ridgelines at three depths, trees framing the edges,
   leaves on the air, and pets redrawn as real silhouettes
   moving through the landscape rather than sitting on it.
   ========================================================== */

/* ---------- RIDGELINES: atmospheric perspective ----------
   Distant things are paler and move less. That single rule is
   what makes a landscape read as deep rather than flat. */

.ridge{
    position:absolute;
    left:0; right:0;
    bottom:0;
    z-index:0;
    pointer-events:none;
}

.ridge svg{ width:100%; height:100%; display:block; }
.ridge path{ fill:var(--navy); }

.ridge-l3{                      /* furthest: highest, palest */
    height:min(240px, 36vh);
    opacity:.045;
}

.ridge-l2{
    height:min(190px, 29vh);
    opacity:.075;
}

.ridge-l1{                      /* nearest: lowest, strongest */
    height:min(150px, 22vh);
    opacity:.11;
}

/* ---------- TREES ---------- */

.tree{
    position:absolute;
    z-index:0;
    pointer-events:none;
    color:var(--navy);
}

.tree svg{ width:100%; height:100%; display:block; }

.tree-hero-l{
    left:-72px;
    bottom:0;
    width:190px; height:310px;
    opacity:.07;
    transform-origin:50% 100%;
    animation:treeSway 11s ease-in-out infinite;
}

.tree-hero-r{
    right:-86px;
    bottom:0;
    width:230px; height:370px;
    opacity:.05;
    transform-origin:50% 100%;
    animation:treeSway 14s ease-in-out infinite 2.5s;
}

.tree-doctors{
    right:-70px;
    bottom:-30px;
    width:200px; height:325px;
    opacity:.055;
    transform-origin:50% 100%;
    animation:treeSway 13s ease-in-out infinite 1.2s;
}

/* Whole canopy leaning, not shaking — slow enough to be felt, not watched */
@keyframes treeSway{
    0%,100%{ transform:rotate(-0.7deg); }
    50%    { transform:rotate(0.7deg); }
}

/* ---------- LEAVES ON THE AIR ---------- */

.leaves{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.leaf{
    position:absolute;
    top:-8%;
    color:var(--orange);
    opacity:0;
    animation-name:leafFall;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

.leaf svg{ width:100%; height:100%; display:block; }

/* Falls while turning and drifting sideways — the way a leaf actually falls */
@keyframes leafFall{
    0%  { transform:translate(0,0) rotate(0deg); opacity:0; }
    8%  { opacity:.16; }
    35% { transform:translate(46px,34vh) rotate(150deg); }
    70% { transform:translate(-26px,72vh) rotate(300deg); opacity:.16; }
    92% { opacity:0; }
    100%{ transform:translate(30px,104vh) rotate(430deg); opacity:0; }
}

.leaves-gallery .leaf{ color:var(--navy); }

/* ---------- PET SILHOUETTES ---------- */

.sil-tail{
    transform-box:fill-box;
    transform-origin:100% 100%;
    animation:silWag 1.5s ease-in-out infinite;
}

@keyframes silWag{
    0%,100%{ transform:rotate(-7deg); }
    50%    { transform:rotate(9deg); }
}

.sil-leg-f,
.sil-leg-b{
    transform-box:fill-box;
    transform-origin:50% 0%;
    animation:silStep 1.05s ease-in-out infinite;
}

.sil-leg-b{ animation-delay:.52s; }

@keyframes silStep{
    0%,100%{ transform:rotate(9deg); }
    50%    { transform:rotate(-9deg); }
}

.sil-cat-tail{
    transform-box:fill-box;
    transform-origin:0% 90%;
    animation:silCatTail 7s ease-in-out infinite;
}

@keyframes silCatTail{
    0%,100%{ transform:rotate(0deg); }
    50%    { transform:rotate(-6deg); }
}

/* The ridge walker is now a proper profile, so it can be larger */
.walking-dog{
    width:88px; height:52px;
    bottom:96px;
}

/* The sitting cat leans in beside the doctors */
.peek-cat{
    width:112px; height:136px;
    left:-124px;
}

.doctors.in-view .peek-cat{ transform:translateX(118px); }

/* ---------- GARDEN PATH THROUGH THE GALLERY ---------- */

.garden-path{
    position:absolute;
    left:0; right:0;
    bottom:26px;
    height:2px;
    background:linear-gradient(90deg,
        transparent, var(--navy) 18%, var(--navy) 82%, transparent);
    opacity:.06;
    border-radius:2px;
}

.path-dog{
    position:absolute;
    left:-12%;
    bottom:20px;
    width:118px; height:70px;
    color:var(--navy);
    opacity:0;
}

.path-dog svg{ width:100%; height:100%; display:block; }

/* Walks the path, unhurried, once every fifty seconds */
.gallery.in-view .path-dog{ animation:walkPath 52s linear infinite 4s; }

@keyframes walkPath{
    0%  { transform:translateX(0); opacity:0; }
    4%  { opacity:.075; }
    56% { transform:translateX(112vw); opacity:.075; }
    62% { transform:translateX(122vw); opacity:0; }
    100%{ transform:translateX(122vw); opacity:0; }
}

/* ---------- BIRDS: paler, further, quieter ---------- */

.bird{ opacity:0; }

.wing-up{ transform-box:fill-box; transform-origin:100% 100%; }
.wing-dn{ transform-box:fill-box; transform-origin:0% 100%; }

.wing-up,
.wing-dn{ animation:flap .5s ease-in-out infinite; }

/* ---------- MOBILE ---------- */

@media (max-width:820px){
    .ridge-l3{ height:150px; }
    .ridge-l2{ height:120px; }
    .ridge-l1{ height:96px; }

    /* One tree, anchoring the corner. The rest is air. */
    .tree-hero-r,
    .tree-doctors{ display:none; }

    .tree-hero-l{
        width:130px; height:210px;
        left:-56px;
        opacity:.05;
    }

    .leaves-gallery{ display:none; }
    .leaves .leaf:nth-child(n+3){ display:none; }
}

/* ---------- MOTION SAFETY ---------- */

@media (prefers-reduced-motion:reduce){
    .tree,
    .leaf,
    .sil-tail,
    .sil-leg-f,
    .sil-leg-b,
    .sil-cat-tail,
    .path-dog{ animation:none !important; }

    .leaf,
    .path-dog{ opacity:0 !important; }
}

/* ==========================================================
   v26 — POKHARA ITSELF
   Machhapuchhre's fishtail summit as the signature ridge,
   clouds crossing behind it, and butterflies that pause to
   rest instead of sailing straight past.
   ========================================================== */

/* ---------- CLOUDS ---------- */

.clouds{
    position:absolute;
    left:0; right:0;
    top:0;
    height:52%;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.cloud{
    position:absolute;
    border-radius:100px;
    background:rgba(255,255,255,.55);
    filter:blur(18px);
}

/* Three different sizes and speeds — the sky is never uniform */
.cloud-1{
    width:280px; height:56px;
    top:14%; left:-24%;
    animation:driftCloud 96s linear infinite;
}

.cloud-2{
    width:200px; height:42px;
    top:32%; left:-20%;
    opacity:.7;
    animation:driftCloud 132s linear infinite 22s;
}

.cloud-3{
    width:340px; height:64px;
    top:6%; left:-30%;
    opacity:.5;
    animation:driftCloud 168s linear infinite 58s;
}

@keyframes driftCloud{
    from{ transform:translateX(0); }
    to  { transform:translateX(150vw); }
}

/* ---------- BUTTERFLIES THAT REST ---------- */

.butterfly{
    position:absolute;
    width:30px; height:22px;
    color:var(--orange);
    opacity:0;
    z-index:0;
    pointer-events:none;
}

.butterfly svg{ width:100%; height:100%; display:block; }

/* Wings beat, then still while it rests */
.bf-wing-l,
.bf-wing-r{
    transform-box:fill-box;
    animation:beat .34s ease-in-out infinite;
}

.bf-wing-l{ transform-origin:100% 50%; }
.bf-wing-r{ transform-origin:0% 50%; }

@keyframes beat{
    0%,100%{ transform:scaleX(1); }
    50%    { transform:scaleX(.42); }
}

.butterfly-hero{
    top:52%;
    left:-6%;
    animation:restingFlight 64s ease-in-out infinite 6s;
}

.butterflies{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.butterflies .butterfly{
    top:26%;
    left:-6%;
    animation:restingFlight 72s ease-in-out infinite 4s;
}

.butterflies .butterfly-2{
    top:62%;
    width:22px; height:16px;
    color:var(--navy);
    animation:restingFlight 88s ease-in-out infinite 34s;
}

/* Flies, settles for a few seconds, lifts off again, moves on.
   The pauses are what make it read as alive rather than scripted. */
@keyframes restingFlight{
    0%   { transform:translate(0,0);            opacity:0; }
    3%   { opacity:.28; }
    12%  { transform:translate(22vw,-40px);     opacity:.28; }
    18%  { transform:translate(31vw,10px);      opacity:.28; }  /* settling */
    26%  { transform:translate(32vw,14px);      opacity:.28; }  /* rests */
    30%  { transform:translate(32vw,14px);      opacity:.28; }
    38%  { transform:translate(52vw,-34px);     opacity:.28; }
    46%  { transform:translate(68vw,8px);       opacity:.28; }  /* rests again */
    54%  { transform:translate(69vw,10px);      opacity:.28; }
    68%  { transform:translate(96vw,-30px);     opacity:.28; }
    76%  { transform:translate(114vw,4px);      opacity:0; }
    100% { transform:translate(114vw,4px);      opacity:0; }
}

/* Wings go still during the two resting phases */
.butterfly .bf-wing-l,
.butterfly .bf-wing-r{
    animation:beat .34s ease-in-out infinite,
              restWings 72s linear infinite 4s;
}

@keyframes restWings{
    0%,17%   { animation-play-state:running; }
    18%,30%  { animation-play-state:paused; }
    31%,45%  { animation-play-state:running; }
    46%,55%  { animation-play-state:paused; }
    56%,100% { animation-play-state:running; }
}

/* ---------- MOBILE ---------- */

@media (max-width:820px){
    .clouds{ height:38%; }
    .cloud-2,
    .cloud-3{ display:none; }
    .cloud-1{ width:180px; height:38px; }

    .butterfly-hero{ display:none; }
}

/* ---------- MOTION SAFETY ---------- */

@media (prefers-reduced-motion:reduce){
    .cloud,
    .butterfly,
    .bf-wing-l,
    .bf-wing-r{ animation:none !important; }

    .butterfly{ opacity:0 !important; }
}

/* ==========================================================
   v27 — REALISM AND DEPTH
   The hero pets are now gradient-shaded artwork, so the old
   cartoon rules (flat squash blinks, blush, tongue) are retired
   and replaced with subtler behaviour. Plus atmospheric haze,
   light dust, and better gallery placeholders.
   ========================================================== */

/* ---------- PETS: softer, more natural behaviour ---------- */

.clinic-pet{
    max-width:230px;
    filter:drop-shadow(0 16px 26px rgba(16,68,105,.16));
}

/* A real eyelid closes downward over the eye rather than the whole
   eye flattening to a line — a small change that removes most of
   the cartoon feel from the blink. */
.pet-eye{
    transform-box:fill-box;
    transform-origin:center top;
    transition:transform .09s ease;
}

.pet-eye.blink,
.clinic-pet.happy .pet-eye{ transform:scaleY(0.12); }

/* Petting: a gentle settle rather than a bounce */
.clinic-pet.happy .pet-head{ transform:rotate(3deg) translateY(2px); }
.clinic-pet .pet-head{ transition:transform .45s cubic-bezier(.16,1,.3,1); }

/* Tail movement calmed right down */
@keyframes tailWag{
    0%,100%{ transform:rotate(-5deg); }
    50%    { transform:rotate(7deg); }
}

.dog-tail{ animation:tailWag 1.6s ease-in-out infinite; }
.clinic-dog.happy .dog-tail{ animation-duration:.7s; }

.cat-tail{ animation:tailSway 7s ease-in-out infinite; }

/* Breathing, barely perceptible */
@keyframes breathe{
    0%,100%{ transform:scaleY(1); }
    50%    { transform:scaleY(1.008); }
}

.pet-body{ animation:breathe 5.2s ease-in-out infinite; }

/* Float slowed; real animals don't bob */
.clinic-dog{ animation:petFloat 9s ease-in-out infinite; }
.clinic-cat{ animation:petFloat 11s ease-in-out infinite 1.4s; }

@keyframes petFloat{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-4px); }
}

/* Ear response, gentler */
.clinic-dog:hover .ear-l,.clinic-dog.happy .ear-l{ transform:rotate(-5deg); }
.clinic-dog:hover .ear-r,.clinic-dog.happy .ear-r{ transform:rotate(5deg); }
.clinic-dog:hover .pet-head{ transform:rotate(3deg); }

/* ---------- ATMOSPHERIC HAZE ----------
   A pale band sitting between the far ridge and the near ones.
   This is what real distance looks like: not smaller, but hazier. */

.haze{
    position:absolute;
    left:0; right:0;
    bottom:0;
    height:min(260px, 38vh);
    z-index:0;
    pointer-events:none;
    background:linear-gradient(to top,
        rgba(253,243,224,0) 0%,
        rgba(253,243,224,.55) 42%,
        rgba(253,243,224,.85) 72%,
        rgba(253,243,224,0) 100%);
}

/* ---------- LIGHT DUST ----------
   Motes catching the sun. Tiny, slow, almost subliminal. */

.dust{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.mote{
    position:absolute;
    border-radius:50%;
    background:#ffffff;
    opacity:0;
    animation:floatMote linear infinite;
}

@keyframes floatMote{
    0%  { transform:translateY(0) translateX(0); opacity:0; }
    12% { opacity:.55; }
    50% { transform:translateY(-46vh) translateX(24px); opacity:.55; }
    88% { opacity:0; }
    100%{ transform:translateY(-92vh) translateX(-14px); opacity:0; }
}

/* ---------- GALLERY: elegant waiting state ---------- */

.gallery-box{
    background:linear-gradient(145deg,
        rgba(255,253,248,1) 0%,
        rgba(244,231,210,.6) 100%);
    border:1px solid rgba(16,68,105,.10);
    border-radius:20px;
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(16,68,105,.06);
    transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}

.gallery-box:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 48px rgba(16,68,105,.12);
}

/* A slow sheen passing over, so the empty state still feels alive */
.gallery-box::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg, transparent 38%,
               rgba(255,255,255,.5) 50%, transparent 62%);
    transform:translateX(-100%);
    animation:sheen 7s ease-in-out infinite;
}

@keyframes sheen{
    0%,70% { transform:translateX(-100%); }
    100%   { transform:translateX(100%); }
}

.gallery-box svg{ opacity:.16; }

.gallery-box span{
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--ink-soft);
    opacity:.65;
}

/* ---------- DEPTH ACROSS THE PAGE ---------- */

.service-card,
.doctor-card,
.review-card,
.contact-box{
    box-shadow:0 4px 12px rgba(16,68,105,.04),
               0 14px 34px rgba(16,68,105,.05);
}

.hero-panel{
    box-shadow:0 30px 70px rgba(16,68,105,.20),
               0 8px 20px rgba(16,68,105,.10);
}

.hero-media{
    box-shadow:0 24px 60px rgba(16,68,105,.16);
}

.appointment-form{
    box-shadow:0 18px 46px rgba(16,68,105,.07);
}

/* ---------- MOBILE ---------- */

@media (max-width:820px){
    .clinic-pet{ max-width:150px; }
    .haze{ height:170px; }
    .mote{ display:none; }        /* battery over sparkle */
}

/* ---------- MOTION SAFETY ---------- */

@media (prefers-reduced-motion:reduce){
    .mote,
    .gallery-box::after,
    .pet-body,
    .dog-tail,
    .cat-tail{ animation:none !important; }
}

/* ==========================================================
   v28 — HAPPINESS, HONESTLY
   Real animals show pleasure through open mouths, lifted
   cheeks, raised brows and forward ears — not drawn-on grins.
   ========================================================== */

/* The dog's tongue rests just visible, and drops when petted */
.dog-tongue{
    transform-box:fill-box;
    transform-origin:50% 0%;
    transform:scaleY(0.62);
    transition:transform .3s cubic-bezier(.16,1,.3,1);
}

.clinic-dog:hover .dog-tongue{ transform:scaleY(0.85); }
.clinic-dog.happy .dog-tongue{ transform:scaleY(1); }

/* Cheeks push up under the eyes — the real tell of a happy face.
   They ride slightly higher on hover and higher still when petted. */
.cheek-lift{
    transform-box:fill-box;
    transform-origin:50% 100%;
    transform:translateY(1px);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}

.clinic-pet:hover .cheek-lift{ transform:translateY(-1.5px); }
.clinic-pet.happy .cheek-lift{ transform:translateY(-3px); }

/* Brows lift a touch — dogs raise these when pleased to see someone */
.pet-brow{
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}

.clinic-pet:hover .pet-brow{ transform:translateY(-1.5px); }
.clinic-pet.happy .pet-brow{ transform:translateY(-3px); }

/* Ears come forward — an alert, interested animal, not a bored one */
.clinic-dog .ear-l,
.clinic-dog .ear-r{ transition:transform .4s cubic-bezier(.16,1,.3,1); }

.clinic-dog:hover .ear-l{ transform:rotate(-7deg) translateY(-2px); }
.clinic-dog:hover .ear-r{ transform:rotate(7deg)  translateY(-2px); }

.clinic-cat:hover .ear-l{ transform:rotate(-4deg); }
.clinic-cat:hover .ear-r{ transform:rotate(4deg); }

/* Whiskers rise with the cheeks */
.clinic-cat:hover .pet-whiskers,
.clinic-cat.happy .pet-whiskers{ transform:translateY(-2px); }

/* A happy dog wags more, and keeps going a moment after petting */
.dog-tail{ animation:tailWag 1.15s ease-in-out infinite; }
.clinic-dog:hover .dog-tail{ animation-duration:.62s; }
.clinic-dog.happy .dog-tail{ animation-duration:.34s; }

@keyframes tailWag{
    0%,100%{ transform:rotate(-7deg); }
    50%    { transform:rotate(11deg); }
}

/* The cat's tail curls upright — cats do this when they're pleased */
.cat-tail{ animation:tailSway 6s ease-in-out infinite; }

@keyframes tailSway{
    0%,100%{ transform:rotate(0deg); }
    50%    { transform:rotate(-7deg); }
}

.clinic-cat:hover .cat-tail{ animation-duration:3.4s; }

@media (prefers-reduced-motion:reduce){
    .dog-tail,
    .cat-tail{ animation:none !important; }
}

/* ==========================================================
   v29 — DESIGN REVIEW FIXES
   Section rhythm, a full-bleed trust band, a clearer emergency
   action, a first-visit label on Mitra, and a map that always
   shows something useful.
   ========================================================== */

/* ---------- FULL-BLEED TRUST BAND ----------
   The page's breathing point: dark, edge to edge, breaking the
   run of light sections stacked at the same width. */

.stats-band{
    background:var(--navy);
    padding:64px 24px;
    position:relative;
    overflow:hidden;
}

.stats-band::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 50% 120% at 15% 0%, rgba(240,154,82,.14), transparent 70%),
        radial-gradient(ellipse 50% 120% at 85% 100%, rgba(255,255,255,.07), transparent 70%);
}

.stats-inner{
    position:relative;
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.stat{ text-align:center; }

.stat-figure{
    display:block;
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(34px, 3.6vw, 50px);
    letter-spacing:-0.04em;
    line-height:1;
    color:var(--cream);
    margin-bottom:10px;
}

.stat-unit{
    font-size:.44em;
    font-weight:700;
    letter-spacing:0;
    margin-left:2px;
    color:var(--orange-bright);
}

.stat-label{
    display:block;
    font-size:14px;
    font-weight:600;
    line-height:1.45;
    color:rgba(253,243,224,.72);
    max-width:20ch;
    margin:0 auto;
}

/* ---------- SECTION RHYTHM ----------
   Alternate the surfaces and vary the padding so dense sections
   and light ones stop feeling identical. */

.about{ background:var(--paper); padding:132px 0; }
.services{ padding:116px 0; }
.doctors{ background:var(--paper); padding:120px 0; }
.reviews{ background:var(--cream); padding:110px 0; }
.appointment{ background:var(--paper); padding:132px 0; }
.contact{ padding:116px 0; }

/* ---------- EMERGENCY: distinct from "Book appointment" ---------- */

.top-strip a{
    color:var(--orange-bright);
    border-bottom:1.5px solid rgba(240,154,82,.4);
    padding-bottom:1px;
}

.call-fab{
    background:var(--orange);
    box-shadow:0 10px 30px rgba(215,113,39,.42);
}

.call-fab::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:2px solid var(--orange);
    opacity:.5;
    animation:callPulse 2.4s ease-out infinite;
}

@keyframes callPulse{
    0%  { transform:scale(1);    opacity:.5; }
    70% { transform:scale(1.45); opacity:0; }
    100%{ transform:scale(1.45); opacity:0; }
}

/* A permanent emergency button on desktop too — a panicking owner
   should never have to scroll to find the number. */
@media (min-width:821px){
    .call-fab{
        display:flex;
        align-items:center;
        gap:10px;
        left:22px;
        bottom:22px;
        width:auto;
        height:auto;
        padding:14px 22px 14px 18px;
        border-radius:999px;
        font-family:var(--font-body);
        font-weight:800;
        font-size:15.5px;
        text-decoration:none;
        color:var(--white);
    }

    .call-fab::before{
        content:"Emergency 9802859465";
        white-space:nowrap;
    }

    .call-fab svg{ width:20px; height:20px; flex:0 0 auto; }
}

/* ---------- MITRA: first-visit label ---------- */

.mitra-hint{
    position:fixed;
    right:24px;
    bottom:92px;
    z-index:89;
    max-width:250px;
    display:flex;
    align-items:flex-start;
    gap:8px;
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px 12px 14px 16px;
    box-shadow:0 18px 44px rgba(16,68,105,.20);
    animation:hintIn .5s cubic-bezier(.16,1,.3,1);
}

.mitra-hint[hidden]{ display:none; }

.mitra-hint::after{
    content:"";
    position:absolute;
    right:34px; bottom:-7px;
    width:14px; height:14px;
    background:var(--paper);
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    transform:rotate(45deg);
}

.mitra-hint p{
    font-size:13.5px;
    font-weight:600;
    line-height:1.45;
    color:var(--ink);
}

.mitra-hint-close{
    flex:0 0 auto;
    width:22px; height:22px;
    border:0;
    background:none;
    color:var(--ink-soft);
    cursor:pointer;
    display:grid;
    place-items:center;
    border-radius:50%;
}

.mitra-hint-close:hover{ background:var(--border); }
.mitra-hint-close svg{ width:12px; height:12px; }

@keyframes hintIn{
    from{ opacity:0; transform:translateY(10px) scale(.95); }
    to  { opacity:1; transform:none; }
}

/* ---------- MAP: always show something ---------- */

.map-wrap{ position:relative; background:var(--cream); }

.map-fallback{
    position:absolute;
    inset:0;
    z-index:0;              /* the iframe covers this when it loads */
    display:grid;
    place-content:center;
    justify-items:center;
    gap:16px;
    text-align:center;
    padding:24px;
}

.map-fallback p{
    color:var(--ink-soft);
    font-size:15.5px;
    line-height:1.6;
}

.map-fallback strong{
    font-family:var(--font-display);
    font-weight:800;
    font-size:20px;
    color:var(--navy);
}

.map-wrap iframe{ position:relative; z-index:1; }

/* ---------- MOBILE ---------- */

@media (max-width:820px){
    .stats-band{ padding:44px 18px; }
    .stats-inner{ grid-template-columns:repeat(2,1fr); gap:26px 16px; }
    .stat-label{ font-size:12.5px; }

    .about,
    .doctors,
    .appointment{ padding:88px 0; }

    .services,
    .reviews,
    .contact{ padding:80px 0; }

    /* Mitra becomes a proper full-height sheet, not a corner box */
    .mitra-panel{
        right:0; bottom:0; left:0;
        width:100%;
        height:100dvh;
        border-radius:0;
    }

    .mitra-hint{
        right:16px;
        bottom:84px;
        max-width:210px;
        padding:12px 10px 12px 14px;
    }

    .mitra-hint p{ font-size:12.5px; }
}

@media (prefers-reduced-motion:reduce){
    .call-fab::after,
    .mitra-hint{ animation:none !important; }
}