/* ===========================================================
 Lanes Vets homepage concept
 =========================================================== */

:root{
 --blue: #2E6AB2;
 --blue-deep: #1F4E89;
 --blue-ink: #112E55;
 --green: #3EAF3C;
 --green-deep: #2E8C2C;
 --cream: #FDF9EF;
 --tint: #F6F2EA; /* warm cream page wash, more editorial */
 --tint-2: #F0F4ED; /* warm-leaning soft section wash */
 --tint-blue: #EAF2FA; /* legacy light-blue, kept for occasional accents */
 --ink: #16223A;
 --ink-soft: #475167;
 --rule: rgba(46,106,178,.14);
 --shadow-sm: 0 6px 18px rgba(31,78,137,.08);
 --shadow: 0 18px 50px rgba(31,78,137,.12);
 --shadow-lg: 0 40px 90px rgba(17,46,85,.18);
 --display: "adelle", "Bookman Old Style", Georgia, serif;
 --sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 --radius: 22px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
 font-family: var(--sans);
 color: var(--ink);
 background: var(--tint);
 line-height: 1.65;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:var(--blue-deep);text-decoration:none}
a:hover{color:var(--blue)}

.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

h1,h2,h3,h4{
 font-family: var(--display);
 font-weight: 400;
 letter-spacing: 0;
 line-height: 1.1;
 color: var(--blue-ink);
}
h1{font-size:clamp(2.5rem, 5.2vw, 5rem); font-weight: 400; letter-spacing: -0.005em}
h2.lead-head{font-size:clamp(1.95rem, 3.8vw, 3.4rem); font-weight: 400}
h2{font-size:clamp(1.7rem, 3vw, 2.6rem); font-weight: 400}
h3{font-size:clamp(1.15rem, 1.6vw, 1.45rem); font-weight:400}
h1 em{font-style:italic; color:var(--green-deep); font-weight: 400}

.eyebrow{
 display:inline-block;
 font-family: var(--sans);
 font-weight:700;
 font-size:.78rem;
 text-transform:uppercase;
 letter-spacing:.2em;
 color: var(--green-deep);
 padding: 8px 14px;
 background: rgba(62,175,60,.12);
 border-radius: 99px;
 margin-bottom: 18px;
}

.section-intro{
 max-width: 640px;
 color: var(--ink-soft);
 font-size: 1.05rem;
 margin-top: 14px;
}

/* ===========================================================
 Buttons
 =========================================================== */
.btn{
 display:inline-flex;
 align-items:center;
 gap:10px;
 padding: 16px 26px;
 font-family: var(--sans);
 font-weight: 700;
 font-size: .98rem;
 border-radius: 99px;
 border: 2px solid transparent;
 cursor: pointer;
 transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
 white-space: nowrap;
}
.btn svg{width:18px; height:18px}
.btn-primary{background: var(--blue); color:#fff; box-shadow: var(--shadow-sm)}
.btn-primary:hover{background: var(--blue-deep); color:#fff; transform: translateY(-2px); box-shadow: var(--shadow)}
.btn-green{background: var(--green); color:#fff; box-shadow: var(--shadow-sm)}
.btn-green:hover{background: var(--green-deep); color:#fff; transform: translateY(-2px); box-shadow: var(--shadow)}
.btn-ghost{background: rgba(255,255,255,.16); color:#fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(8px)}
.btn-ghost:hover{background: rgba(255,255,255,.28); color:#fff}
.btn-outline{background: transparent; color: var(--blue-deep); border-color: var(--blue-deep)}
.btn-outline:hover{background: var(--blue-deep); color:#fff}

/* ===========================================================
 Header
 =========================================================== */
.site-header{
 position: fixed;
 top: 0; left: 0; right: 0;
 z-index: 50;
 background: #fff;
 padding: 20px 0;
 transition: padding .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{padding: 8px 0; box-shadow: 0 2px 18px rgba(17,46,85,.08)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:32px}
.logo{display:block; line-height:0; flex-shrink:0}
.logo img{height:78px; width:auto; transition: height .3s ease}
.site-header.scrolled .logo img{height: 56px}

/* Quiet inline emergency line in the nav */
.emergency-link{
 display:inline-flex;
 align-items: center;
 gap: 10px;
 color: var(--blue-ink);
 text-decoration: none;
 padding-left: 16px;
 border-left: 1px solid var(--rule);
 white-space: nowrap;
 transition: color .25s ease;
}
.emergency-link:hover{color: var(--blue)}
.emergency-link svg{
 width: 18px; height: 18px;
 color: var(--green-deep);
 flex-shrink: 0;
}
.emergency-link .when{
 font-family: var(--sans);
 font-size: .68rem;
 font-weight: 700;
 letter-spacing: .18em;
 text-transform: uppercase;
 color: var(--ink-soft);
}
.emergency-link .num{
 font-family: var(--sans);
 font-weight: 700;
 font-size: 1rem;
 letter-spacing: 0;
 color: var(--blue-ink);
}
.emergency-link:hover .num{color: var(--blue)}

.main-nav{display:flex; gap: 4px; list-style:none; align-items:center}
.main-nav > li{position:relative}
.main-nav > li > a{
 display:block;
 white-space: nowrap;
 padding: 12px 14px;
 font-weight: 600;
 font-size: .95rem;
 color: var(--ink);
 border-radius: 99px;
 transition: background .2s ease, color .2s ease;
}
.main-nav > li > a:hover{background: var(--tint); color: var(--blue-deep)}
.main-nav .has-sub > a::after{
 content:"";
 display:inline-block;
 margin-left:6px;
 width:6px; height:6px;
 border-right:2px solid currentColor;
 border-bottom:2px solid currentColor;
 transform: rotate(45deg) translateY(-2px);
}
.submenu{
 position:absolute;
 top: calc(100% - 4px);
 left: 50%;
 transform: translateX(-50%);
 background:#fff;
 border-radius: 16px;
 box-shadow: var(--shadow);
 padding: 10px;
 min-width: 220px;
 list-style:none;
 opacity:0;
 visibility:hidden;
 transform: translateX(-50%) translateY(8px);
 transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.main-nav > li:hover .submenu{
 opacity:1; visibility:visible;
 transform: translateX(-50%) translateY(0);
}
.submenu li a{
 display:block;
 padding: 10px 14px;
 border-radius: 10px;
 font-weight:600;
 font-size:.92rem;
 color: var(--ink);
}
.submenu li a:hover{background: var(--tint); color: var(--blue-deep)}
.submenu li.sub-title{
 display:block;
 padding: 12px 14px 4px;
 font-weight:800;
 font-size:.72rem;
 letter-spacing:.08em;
 text-transform:uppercase;
 color: var(--ink-soft, #7a8899);
 border-top: 1px solid var(--rule, #e7ecf0);
 margin-top: 6px;
}
.submenu li.sub-title:first-child{border-top:0; margin-top:0; padding-top: 6px;}
/* Widen the Services mega-list to fit content */
.main-nav > li.has-sub:nth-child(3) .submenu{min-width: 260px;}

.burger{
 display:none;
 flex-direction:column;
 gap:5px;
 background:transparent;
 border:0;
 cursor:pointer;
 padding: 8px;
}
.burger span{
 display:block;
 width: 28px;
 height: 3px;
 background: var(--blue-ink);
 border-radius:2px;
}

.mobile-menu{
 position: fixed;
 inset: 0;
 background: var(--blue-ink);
 z-index: 60;
 padding: 100px 32px 40px;
 transform: translateX(100%);
 transition: transform .35s ease;
 display:flex;
 flex-direction:column;
 gap: 18px;
 overflow-y:auto;
}
.mobile-menu.open{transform: translateX(0)}
.mobile-menu > a{
 color:#fff;
 font-size:1.3rem;
 font-weight:600;
 padding: 14px 0;
 border-bottom: 1px solid rgba(255,255,255,.12);
 text-decoration: none;
}
.mobile-menu > a:hover{color: var(--green)}
.mobile-menu .btn{justify-content:center; font-size:1rem; border-bottom:0; padding: 16px 26px; margin-top: 4px}
.mm-close{
 position: absolute; top: 20px; right: 24px;
 background: transparent; border: 0; color:#fff;
 font-size: 2.4rem; cursor:pointer; line-height:1;
}
/* Mobile menu group (collapsible) */
.mm-group{
 border-bottom: 1px solid rgba(255,255,255,.12);
}
.mm-group > summary{
 list-style: none;
 cursor: pointer;
 color: #fff;
 font-size: 1.3rem;
 font-weight: 600;
 padding: 14px 0;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.mm-group > summary::-webkit-details-marker{display: none}
.mm-group > summary::after{
 content: "";
 display: inline-block;
 width: 12px; height: 12px;
 border-right: 2px solid currentColor;
 border-bottom: 2px solid currentColor;
 transform: rotate(45deg) translate(-2px, -2px);
 transition: transform .25s ease;
}
.mm-group[open] > summary::after{
 transform: rotate(-135deg) translate(-2px, -2px);
}
.mm-group > a{
 display: block;
 color: rgba(255,255,255,.82);
 font-size: 1.05rem;
 font-weight: 500;
 padding: 10px 0 10px 18px;
 text-decoration: none;
}
.mm-group > a:hover{color: var(--green)}
.mm-group > a:last-of-type{padding-bottom: 16px}

/* Mobile menu emergency line */
.mm-emergency{
 display: inline-flex;
 align-items: center;
 gap: 10px;
 margin-top: 24px;
 padding: 14px 18px;
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(255,255,255,.18);
 border-radius: 12px;
 color: #fff;
 font-weight: 600;
 font-size: .95rem;
 text-decoration: none;
}
.mm-emergency:hover{color: #fff; background: rgba(255,255,255,.14)}
.mm-emergency svg{color: var(--green); flex-shrink: 0}

/* ===========================================================
 Hero
 =========================================================== */
.hero{
 position: relative;
 min-height: 100vh;
 padding-top: 140px;
 padding-bottom: 80px;
 overflow: hidden;
 color:#fff;
 display:flex;
 align-items:center;
 background: var(--blue-ink);
}
.hero-bg{
 position:absolute; inset:0;
 width:100%; height:100%;
 object-fit:cover;
 z-index:0;
}

/* Hero slideshow. 5 images cross-fading on a 30s loop */
.hero-slideshow{
 position:absolute; inset:0;
 z-index:0;
 overflow:hidden;
}
.hero-slideshow img{
 position:absolute; inset:0;
 width:100%; height:100%;
 object-fit:cover;
 opacity:0;
 animation: heroFade 30s infinite;
 /* Subtle Ken Burns zoom for depth */
 transform-origin: center;
}
.hero-slideshow img:nth-child(1){animation-delay: 0s}
.hero-slideshow img:nth-child(2){animation-delay: 6s}
.hero-slideshow img:nth-child(3){animation-delay: 12s}
.hero-slideshow img:nth-child(4){animation-delay: 18s}
.hero-slideshow img:nth-child(5){animation-delay: 24s}

@keyframes heroFade{
 0% { opacity: 0; transform: scale(1.02) }
 4% { opacity: 1; transform: scale(1.04) }
 20% { opacity: 1; transform: scale(1.08) }
 24% { opacity: 0; transform: scale(1.10) }
 100% { opacity: 0; transform: scale(1.02) }
}
@media (prefers-reduced-motion: reduce){
 .hero-slideshow img{animation-duration: 0s}
 .hero-slideshow img:nth-child(1){opacity:1}
}
.hero-overlay{
 position:absolute; inset:0;
 background:
 linear-gradient(105deg, rgba(17,46,85,.78) 0%, rgba(17,46,85,.55) 40%, rgba(17,46,85,.25) 80%),
 linear-gradient(180deg, rgba(17,46,85,.2) 0%, rgba(17,46,85,.0) 30%, rgba(17,46,85,.55) 100%);
 z-index:1;
}
.hero .wrap{position:relative; z-index:2; width:100%}
.hero-content{max-width: 880px}
.hero .eyebrow{
 background: rgba(255,255,255,.16);
 color: #fff;
 backdrop-filter: blur(8px);
}
.hero h1{color:#fff; margin-bottom: 24px}
.hero h1 em{color:#A6E0A4}
.hero .lede{
 font-size: 1.15rem;
 max-width: 560px;
 margin-top: 28px;
 color: rgba(255,255,255,.92);
}
.hero-actions{
 display:flex;
 flex-wrap:wrap;
 gap: 14px;
 margin-top: 44px;
}
.hero-actions .btn-primary{background:#fff; color: var(--blue-ink)}
.hero-actions .btn-primary:hover{background: var(--tint); color: var(--blue-ink)}

/* ============== Section curves ==============
 Sections after the welcome pull up over the previous and curve
 their top corners, so the page reads as a soft stack of cards
 rather than flat slabs. */
.branches,
.different,
.club,
.team,
.news,
.reviews,
.cta-band{
 position: relative;
 z-index: 1;
 border-radius: 60px 60px 0 0;
 margin-top: -60px;
 padding-top: 130px;
}
/* Dark "feature" sections float as fully rounded cards inside the cream wash. */
.referrals,
.export-bridge{
 position: relative;
 z-index: 1;
 border-radius: 60px;
 margin: -40px 18px 0;
 padding-top: 110px;
}
/* The old branches::before ellipse clip is replaced by the shared curve rule. */
.branches::before{display: none}

/* Small silhouette accent dot, can sit in section corners */
.paw-accent{
 position: absolute;
 width: 80px; height: 80px;
 opacity: .06;
 pointer-events: none;
}

/* ============== Inner page hero ============== */
.page-hero{
 position: relative;
 padding: 180px 0 90px;
 background: linear-gradient(140deg, var(--blue-ink) 0%, var(--blue-deep) 100%);
 color: #fff;
 overflow: hidden;
}
.page-hero::before{
 content:"";
 position:absolute; inset:0;
 background:
 radial-gradient(circle at 85% 20%, rgba(62,175,60,.18), transparent 50%),
 radial-gradient(circle at 10% 90%, rgba(46,106,178,.4), transparent 50%);
}
.page-hero .wrap{position: relative}
.page-hero .crumbs{
 font-family: var(--sans);
 font-size: .78rem;
 letter-spacing: .14em;
 text-transform: uppercase;
 font-weight: 700;
 color: rgba(255,255,255,.6);
 margin-bottom: 18px;
}
.page-hero .crumbs a{color: rgba(255,255,255,.85)}
.page-hero .crumbs a:hover{color:#fff}
.page-hero .crumbs span{margin: 0 8px; opacity: .4}
.page-hero h1{color:#fff; max-width: 880px; font-size: clamp(2.2rem, 4.5vw, 4.2rem); margin: 0}
.page-hero .lede{
 max-width: 660px;
 margin-top: 26px;
 font-size: 1.1rem;
 color: rgba(255,255,255,.88);
}
.page-hero-curve{
 position: absolute;
 bottom: -1px; left:0; right:0;
 width: 100%; height: 60px;
 color: #fff;
}
/* The first section directly under the hero is always white so the curve blends */
.page-hero + .page-section{ background: #fff; }

/* Inner page sections (cards) */
.page-section{
 padding: 100px 0;
 background: var(--tint);
 position: relative;
}
.page-section.alt{background: #fff}
.page-section.alt-2{background: var(--tint-2)}
.page-section.dark{background: var(--blue-ink); color: #fff}
.page-section.dark h2, .page-section.dark h3, .page-section.dark h4{color: #fff}
.page-section.dark p{color: rgba(255,255,255,.88)}

.page-grid-2{
 display: grid;
 grid-template-columns: 1.05fr 1fr;
 gap: 80px;
 align-items: flex-start;
}
.page-grid-2.media-right{grid-template-columns: 1fr 1fr}
.prose p{font-size: 1.05rem; color: var(--ink-soft); margin-top: 16px; line-height: 1.65}
.prose p:first-child{margin-top: 0}
.prose ul{margin-top: 18px; padding-left: 0; list-style: none}
.prose ul li{
 position: relative;
 padding-left: 28px;
 margin-bottom: 12px;
 color: var(--ink-soft);
}
.prose ul li::before{
 content: "";
 position: absolute;
 left: 0; top: 12px;
 width: 14px; height: 2px;
 background: var(--green);
}
.prose h2{
 font-size: clamp(1.6rem, 2.6vw, 2.2rem);
 line-height: 1.15;
 margin-top: 0;
 margin-bottom: 18px;
 color: var(--blue-ink);
}
.prose h2:not(:first-child){ margin-top: 48px; }
.prose h3{
 font-size: 1.2rem;
 font-weight: 700;
 line-height: 1.3;
 margin-top: 34px;
 margin-bottom: 6px;
 color: var(--blue-ink);
}
.prose h3 + p{ margin-top: 4px; }
.prose h3:first-child{ margin-top: 0; }

.info-card{
 background:#fff;
 border-radius: 20px;
 padding: 36px;
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--rule);
}
.info-card h3{margin-bottom: 10px}
.info-card p{color: var(--ink-soft); font-size: .98rem; margin-top: 10px}

.simple-card-grid{display:grid; gap: 22px; grid-template-columns: repeat(3, 1fr)}
.simple-card-grid.two{grid-template-columns: 1fr 1fr}
.simple-card-grid.four{grid-template-columns: repeat(4, 1fr)}
.simple-card{
 background:#fff;
 border-radius: 18px;
 padding: 30px;
 border: 1px solid var(--rule);
 transition: transform .3s ease, box-shadow .3s ease;
}
.simple-card:hover{transform: translateY(-4px); box-shadow: var(--shadow)}
.simple-card .icn{
 width: 48px; height: 48px;
 display:flex; align-items:center; justify-content:center;
 background: var(--tint);
 color: var(--blue-deep);
 border-radius: 14px;
 margin-bottom: 18px;
}
.simple-card.green .icn{background: rgba(62,175,60,.14); color: var(--green-deep)}
.simple-card h3{margin-bottom: 8px; font-size: 1.15rem}
.simple-card p{color: var(--ink-soft); font-size: .94rem}
.simple-card .more{
 display: inline-flex; align-items: center; gap: 6px;
 margin-top: 18px;
 font-size: .85rem;
 font-weight: 700;
 color: var(--blue-deep);
}
.simple-card .more::after{content: "→"; transition: transform .25s ease}
.simple-card:hover .more::after{transform: translateX(4px)}

/* Generic form */
.form-card{
 background:#fff;
 border-radius: 28px;
 padding: 48px;
 box-shadow: var(--shadow);
}
.form-row{display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px}
.form-row.single{grid-template-columns: 1fr}
.form-field label{
 display:block;
 font-size:.78rem;
 font-weight: 700;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--ink-soft);
 margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea{
 width: 100%;
 padding: 14px 16px;
 border: 1px solid var(--rule);
 border-radius: 12px;
 font-family: var(--sans);
 font-size: 1rem;
 color: var(--ink);
 background: var(--tint);
 transition: border-color .2s ease, background .2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
 outline: none;
 border-color: var(--blue);
 background: #fff;
}
.form-field textarea{min-height: 140px; resize: vertical; font-family: var(--sans)}
.form-foot{margin-top: 14px; font-size: .85rem; color: var(--ink-soft)}

/* Branch detail card */
.branch-detail{
 background:#fff;
 border-radius: 28px;
 padding: 0;
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 display: grid;
 grid-template-columns: 1fr 1fr;
 margin-bottom: 28px;
}
.branch-detail .ph{
 background: var(--blue-ink);
 aspect-ratio: 1/1;
 position: relative;
 overflow: hidden;
}
.branch-detail .ph img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover}
.branch-detail .body{padding: 44px}
.branch-detail .tag{
 display: inline-block;
 font-size: .72rem;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--green-deep);
 margin-bottom: 12px;
}
.branch-detail h2{font-size: 2.2rem; margin-bottom: 14px}
.branch-detail .addr{color: var(--ink-soft); margin-bottom: 22px; line-height: 1.6}
.branch-detail .contacts{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 padding: 20px 0;
 border-top: 1px solid var(--rule);
 border-bottom: 1px solid var(--rule);
 margin-bottom: 22px;
}
.branch-detail .contacts .k{font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft)}
.branch-detail .contacts .v{font-family: var(--display); font-size: 1.15rem; color: var(--blue-ink); font-weight: 400; margin-top: 4px}
.branch-detail .contacts a.v:hover{color: var(--blue)}
.branch-detail .hours{display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: .95rem}
.branch-detail .hours .day{color: var(--ink-soft)}
.branch-detail .hours .time{color: var(--ink); font-weight: 600}
.branch-detail .hours .closed{color: var(--ink-soft); font-style: italic}

/* Team filter strip */
.team-filter{
 background: #fff;
 border: 1px solid var(--rule);
 border-radius: 22px;
 padding: 26px 28px;
 margin-bottom: 36px;
 box-shadow: var(--shadow-sm);
}
.filter-row{
 display: grid;
 grid-template-columns: 140px 1fr;
 gap: 22px;
 align-items: center;
 padding: 12px 0;
 border-bottom: 1px dashed var(--rule);
}
.filter-row:last-of-type{border-bottom: 0}
.filter-label{
 font-size: .72rem;
 letter-spacing: .14em;
 text-transform: uppercase;
 font-weight: 700;
 color: var(--ink-soft);
}
.chips{display: flex; flex-wrap: wrap; gap: 8px}
.chip{
 font-family: var(--sans);
 font-size: .88rem;
 font-weight: 600;
 padding: 8px 16px;
 border-radius: 99px;
 border: 1px solid var(--rule);
 background: transparent;
 color: var(--ink);
 cursor: pointer;
 transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover{background: var(--tint); border-color: var(--blue-deep)}
.chip.active{background: var(--blue-ink); color: #fff; border-color: var(--blue-ink)}
.filter-meta{
 margin-top: 16px;
 padding-top: 14px;
 border-top: 1px solid var(--rule);
 font-size: .85rem;
 color: var(--ink-soft);
}
.filter-meta [data-count]{color: var(--blue-ink); font-weight: 700}
.empty-state{
 text-align: center;
 padding: 60px 20px;
 color: var(--ink-soft);
}

/* Team people grid (used on team.html with real photos) */
.team-people-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px}
.team-card{
 background: #fff;
 border-radius: 18px;
 overflow: hidden;
 border: 1px solid var(--rule);
 display: flex; flex-direction: column;
 transition: transform .3s ease, box-shadow .3s ease;
}
.team-card:hover{transform: translateY(-4px); box-shadow: var(--shadow)}
.team-card .ph{
 aspect-ratio: 4/5;
 background: var(--tint);
 overflow: hidden;
}
.team-card .ph img{width: 100%; height: 100%; object-fit: cover; display: block}
.team-card .info{padding: 20px 22px}
.team-card .info h3{font-size: 1.05rem; margin-bottom: 4px}
.team-card .info .role{
 font-size: .78rem;
 color: var(--green-deep);
 font-weight: 700;
 letter-spacing: .04em;
 line-height: 1.3;
}
.team-card .info .quals{
 font-size: .72rem;
 color: var(--ink-soft);
 margin-top: 8px;
 font-family: "SFMono-Regular", Menlo, monospace;
 line-height: 1.4;
}
.team-card .info .branch-tag{
 display: inline-block;
 margin-top: 10px;
 padding: 3px 10px;
 background: var(--tint);
 color: var(--blue-deep);
 font-size: .68rem;
 font-weight: 700;
 letter-spacing: .12em;
 text-transform: uppercase;
 border-radius: 99px;
}

.team-card[hidden]{display: none}

@media (max-width: 1080px){
 .team-people-grid{grid-template-columns: repeat(3, 1fr)}
 .filter-row{grid-template-columns: 1fr; gap: 10px}
}
@media (max-width: 820px){
 .team-people-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 480px){
 .team-people-grid{grid-template-columns: 1fr}
 .team-filter{padding: 22px 20px}
}

/* Team grid (legacy, kept for compatibility) */
.team-grid-page{display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px}
.team-person{
 background: #fff;
 border-radius: 18px;
 padding: 28px 24px;
 border: 1px solid var(--rule);
 text-align: center;
}
.team-person .av{
 width: 78px; height: 78px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
 color: #fff;
 font-family: var(--display);
 font-size: 1.8rem;
 font-weight: 400;
 display: flex; align-items: center; justify-content: center;
 margin: 0 auto 16px;
}
.team-person:nth-child(3n+2) .av{background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%)}
.team-person:nth-child(3n+3) .av{background: linear-gradient(135deg, #6E8FB8 0%, var(--blue-ink) 100%)}
.team-person h3{font-size: 1.05rem; margin-bottom: 4px}
.team-person .role{font-size: .8rem; color: var(--green-deep); font-weight: 700; letter-spacing: .04em}
.team-person .quals{font-size: .72rem; color: var(--ink-soft); margin-top: 8px; font-family: "SFMono-Regular", Menlo, monospace}

/* Price list */
.price-block{margin-bottom: 50px}
.price-block h2{margin-bottom: 16px}
.price-table{
 width: 100%;
 background:#fff;
 border-radius: 18px;
 border-collapse: separate;
 border-spacing: 0;
 overflow: hidden;
 box-shadow: var(--shadow-sm);
}
.price-table th, .price-table td{
 padding: 18px 24px;
 text-align: left;
 border-bottom: 1px solid var(--rule);
}
.price-table th{
 background: var(--tint-2);
 font-size: .72rem;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--ink-soft);
 font-weight: 700;
}
.price-table td.amount{
 text-align: right;
 font-family: var(--display);
 font-size: 1.1rem;
 color: var(--blue-ink);
 font-weight: 400;
}
.price-table tr:last-child td{border-bottom: 0}

@media (max-width: 1080px){
 .page-grid-2, .page-grid-2.media-right{grid-template-columns: 1fr; gap: 60px}
 .simple-card-grid, .simple-card-grid.four{grid-template-columns: 1fr 1fr}
 .branch-detail{grid-template-columns: 1fr}
 .branch-detail .ph{aspect-ratio: 16/9}
 .team-grid-page{grid-template-columns: 1fr 1fr}
 .form-row{grid-template-columns: 1fr}
}
@media (max-width: 720px){
 .simple-card-grid, .simple-card-grid.two, .simple-card-grid.four{grid-template-columns: 1fr}
 .branch-detail .body{padding: 32px 24px}
 .branch-detail .contacts{grid-template-columns: 1fr}
 .team-grid-page{grid-template-columns: 1fr}
 .form-card{padding: 32px 24px}
}

/* Hero curved divider */
.hero-curve{
 position: absolute;
 bottom: -2px; left:0;
 width: 100%;
 height: 80px;
 z-index: 2;
 color: var(--tint);
}

/* Scroll cue */
.scroll-cue{
 position:absolute;
 left: 50%; bottom: 96px;
 transform: translateX(-50%);
 z-index: 3;
 display:flex; flex-direction:column; align-items:center; gap: 8px;
 color: rgba(255,255,255,.75);
 font-size: .78rem;
 letter-spacing: .18em; text-transform:uppercase;
}
.scroll-cue .line{
 width: 1px; height: 38px; background: rgba(255,255,255,.5);
 position: relative; overflow: hidden;
}
.scroll-cue .line::after{
 content:""; position:absolute; top:-100%; left:0;
 width:100%; height:50%; background:#fff;
 animation: scrollLine 2.2s ease infinite;
}
@keyframes scrollLine{
 0%{top:-50%}
 100%{top:100%}
}

/* ===========================================================
 Reveal (used everywhere)
 =========================================================== */
.reveal{opacity:0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform: translateY(0)}
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ===========================================================
 Promise band (just below hero)
 =========================================================== */
.promise{
 background: var(--tint);
 padding: 60px 0 0;
 position: relative;
}
.promise-quote{
 background:#fff;
 border-radius: 28px;
 padding: 44px 56px;
 box-shadow: var(--shadow);
 display:grid;
 grid-template-columns: auto 1fr;
 gap: 36px;
 align-items: center;
 position: relative;
 margin-top: -120px;
 z-index: 5;
}
.promise-mark{
 font-family: var(--display);
 font-size: 6rem;
 line-height: .7;
 color: var(--green);
 font-weight:700;
}
.promise-text{font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.25; color: var(--blue-ink); font-weight:600}
.promise-text small{display:block; margin-top: 14px; font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .14em; text-transform:uppercase}

/* ===========================================================
 Welcome section
 =========================================================== */
.welcome{
 background: var(--tint);
 padding: 110px 0 130px;
 position: relative;
}
.welcome-grid{
 display:grid;
 grid-template-columns: 1.05fr 1fr;
 gap: 80px;
 align-items: center;
}
.welcome-copy p{margin-top: 16px; color: var(--ink-soft); font-size: 1.05rem}
.welcome-copy .btn{margin-top: 30px}

.welcome-media{position:relative}
.welcome-media .photo{
 border-radius: 28px;
 overflow:hidden;
 aspect-ratio: 4/5;
 box-shadow: var(--shadow-lg);
}
.welcome-media .photo img{width:100%; height:100%; object-fit:cover}
.welcome-media .photo-2{
 position: absolute;
 bottom: -40px; right: -40px;
 width: 55%;
 aspect-ratio: 4/3;
 border-radius: 22px;
 overflow: hidden;
 box-shadow: var(--shadow);
 border: 6px solid var(--tint);
}
.welcome-media .photo-2 img{width:100%; height:100%; object-fit:cover}
.welcome-media .badge{
 position:absolute;
 top: -28px; left: -28px;
 background: var(--green);
 color: #fff;
 border-radius: 50%;
 width: 130px; height: 130px;
 display:flex; flex-direction:column; justify-content:center; align-items:center;
 text-align: center;
 padding: 14px;
 box-shadow: var(--shadow);
 transform: rotate(-8deg);
 animation: gentleBob 6s ease-in-out infinite;
}
@keyframes gentleBob{
 0%,100%{transform: rotate(-8deg) translateY(0)}
 50%{transform: rotate(-6deg) translateY(-6px)}
}
.welcome-media .badge .num{font-family: var(--display); font-size: 2.4rem; font-weight:700; line-height: 1}
.welcome-media .badge .lbl{font-size: .7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-top:4px}

/* ===========================================================
 Stats strip
 =========================================================== */
.stats{
 display:grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 margin-top: 90px;
 background:#fff;
 border-radius: 28px;
 padding: 36px;
 box-shadow: var(--shadow);
}
.stat{padding: 8px 16px; border-right: 1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat .num{font-family: var(--display); font-weight: 700; font-size: 2.6rem; color: var(--blue-deep); line-height:1}
.stat .num small{font-size: 1.4rem; color: var(--green-deep)}
.stat .lbl{margin-top: 6px; font-size:.86rem; color: var(--ink-soft); font-weight:600}

/* ===========================================================
 Branches: four cards with hero-style image
 =========================================================== */
.branches{
 background: #fff;
 padding: 130px 0 130px;
 position: relative;
}
.branches::before{
 content:"";
 position: absolute;
 top: -1px; left:0; right:0; height: 80px;
 background: var(--tint);
 clip-path: ellipse(70% 100% at 50% 0%);
}
.branches-head{display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:end; margin-bottom: 60px}
.branches-grid{
 display:grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
}
.branch{
 position: relative;
 border-radius: 24px;
 overflow: hidden;
 aspect-ratio: 3/4;
 box-shadow: var(--shadow-sm);
 transition: transform .35s ease, box-shadow .35s ease;
 cursor: pointer;
 background: var(--blue-ink);
}
.branch img{
 position:absolute; inset:0;
 width:100%; height:100%; object-fit:cover;
 transition: transform .9s ease;
}
.branch::after{
 content:"";
 position:absolute; inset:0;
 background: linear-gradient(180deg, rgba(17,46,85,0) 30%, rgba(17,46,85,.85) 100%);
}
.branch:hover{transform: translateY(-6px); box-shadow: var(--shadow)}
.branch:hover img{transform: scale(1.06)}
.branch-tag{
 position:absolute; top: 18px; left: 18px;
 background: rgba(255,255,255,.16);
 color: #fff;
 padding: 6px 12px;
 border-radius: 99px;
 font-size: .72rem; letter-spacing: .14em; text-transform:uppercase; font-weight:700;
 backdrop-filter: blur(8px);
 z-index: 2;
}
.branch-tag.hq{background: var(--green); color:#fff}
.branch-body{
 position:absolute; left: 22px; right: 22px; bottom: 22px;
 color:#fff; z-index: 2;
}
.branch-body h3{color:#fff; font-size: 1.5rem; margin-bottom: 6px}
.branch-body .meta{
 display:flex; flex-direction:column; gap: 4px;
 font-size: .85rem;
 color: rgba(255,255,255,.85);
}
.branch-body .more{
 margin-top: 14px;
 display:inline-flex; align-items:center; gap:6px;
 font-size: .82rem;
 font-weight: 700;
 color: #fff;
 letter-spacing: .04em;
}
.branch-body .more::after{
 content:"→";
 transition: transform .3s ease;
}
.branch:hover .branch-body .more::after{transform: translateX(4px)}

/* ===========================================================
 What makes us different: pillars
 =========================================================== */
.different{
 background: var(--tint-2);
 padding: 130px 0;
 position: relative;
 overflow: hidden;
}
.different-head{
 display:grid;
 grid-template-columns: 1fr 1fr;
 gap: 60px;
 align-items: end;
 margin-bottom: 60px;
}
.pillars{
 display:grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 18px;
}
.pillar{
 background:#fff;
 border-radius: 22px;
 padding: 32px 26px;
 position: relative;
 box-shadow: var(--shadow-sm);
 transition: transform .3s ease, box-shadow .3s ease;
}
.pillar:hover{transform: translateY(-6px); box-shadow: var(--shadow)}
.pillar .icn{
 width: 54px; height: 54px;
 display:flex; align-items:center; justify-content:center;
 background: var(--tint);
 color: var(--blue-deep);
 border-radius: 16px;
 margin-bottom: 18px;
}
.pillar:nth-child(2) .icn{background: rgba(62,175,60,.14); color: var(--green-deep)}
.pillar:nth-child(3) .icn{background: rgba(217,140,40,.16); color: #b8651a}
.pillar:nth-child(4) .icn{background: rgba(149,98,202,.14); color: #6d3b9b}
.pillar h3{margin-bottom: 8px; font-size:1.15rem}
.pillar p{color: var(--ink-soft); font-size:.96rem}

/* ===========================================================
 Referrals + CT scanner banner
 =========================================================== */
.referrals{
 background: var(--blue-ink);
 color:#fff;
 padding: 110px 0;
 position: relative;
 overflow: hidden;
}
.referrals::before{
 content:"";
 position: absolute;
 inset: 0;
 background:
 radial-gradient(circle at 80% 20%, rgba(62,175,60,.18) 0%, transparent 50%),
 radial-gradient(circle at 10% 80%, rgba(46,106,178,.4) 0%, transparent 50%);
 z-index: 0;
}
.referrals .wrap{position:relative; z-index:1}
.ref-grid{
 display:grid;
 grid-template-columns: 1fr 1fr;
 gap: 80px;
 align-items: center;
}
.ref-copy h2{color:#fff}
.ref-copy .eyebrow{background: rgba(62,175,60,.22); color:#A6E0A4}
.ref-copy p{color: rgba(255,255,255,.86); margin-top: 16px; font-size: 1.05rem}
.ref-list{
 display:grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 margin: 32px 0;
 list-style: none;
}
.ref-list li{
 display:flex; gap:12px;
 font-size:.95rem;
 color: rgba(255,255,255,.9);
 align-items: flex-start;
}
.ref-list .dot{
 width: 8px; height: 8px;
 background: var(--green);
 border-radius:50%;
 margin-top: 7px;
 flex-shrink: 0;
}

.ref-card{
 background:#fff;
 color: var(--ink);
 border-radius: 28px;
 padding: 36px;
 box-shadow: var(--shadow-lg);
 position:relative;
}
.ref-card .ribbon{
 display:inline-flex; align-items:center; gap:6px;
 background: var(--green);
 color:#fff;
 padding: 6px 12px;
 border-radius: 99px;
 font-size: .7rem; font-weight:700;
 letter-spacing: .14em; text-transform:uppercase;
}
.ref-card h3{margin-top: 18px; font-size: 1.8rem; color: var(--blue-ink)}
.ref-card p{color: var(--ink-soft); margin-top: 12px}
.ref-card .specs{
 display:grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 margin-top: 24px;
 padding-top: 24px;
 border-top: 1px solid var(--rule);
}
.ref-card .spec .k{font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color: var(--ink-soft); font-weight:700}
.ref-card .spec .v{font-family: var(--display); font-size: 1.2rem; color: var(--blue-deep); font-weight: 700; margin-top: 2px}

/* ===========================================================
 Health Plan
 =========================================================== */
.club{padding: 130px 0; background: var(--tint)}
.club-card{
 background: linear-gradient(135deg, #fff 0%, #F5FAF4 100%);
 border-radius: 36px;
 padding: 56px;
 display:grid;
 grid-template-columns: 1.2fr 1fr;
 gap: 60px;
 align-items: center;
 position: relative;
 box-shadow: var(--shadow);
 overflow: hidden;
}
.club-card::before{
 content:"";
 position:absolute;
 width: 280px; height: 280px;
 background: var(--green);
 border-radius:50%;
 top: -120px; right: -100px;
 opacity: .08;
}
.club-text .eyebrow{background: rgba(62,175,60,.16); color: var(--green-deep)}
.club-text p{margin-top: 16px; color: var(--ink-soft); font-size: 1.05rem}
.club-list{list-style:none; margin: 28px 0; display:grid; gap: 12px}
.club-list li{display:flex; gap: 12px; align-items:center; font-weight: 600; color: var(--ink)}
.club-list .tick{
 display:inline-flex; align-items:center; justify-content:center;
 width: 28px; height: 28px;
 background: var(--green);
 color: #fff;
 border-radius:50%;
 flex-shrink: 0;
}
.club-list .tick svg{width: 16px; height: 16px}
.club-media{position:relative}
.club-media img{
 border-radius: 22px;
 width:100%;
 aspect-ratio: 4/5;
 object-fit: cover;
 box-shadow: var(--shadow);
}
.club-price{
 position:absolute;
 bottom: -16px; left: -16px;
 background: var(--blue);
 color: #fff;
 padding: 18px 22px;
 border-radius: 18px;
 box-shadow: var(--shadow-lg);
 transform: rotate(-4deg);
}
.club-price .lbl{font-size: .68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; opacity:.85}
.club-price .amt{font-family: var(--display); font-size: 1.8rem; font-weight:700; line-height: 1.1; margin-top: 4px}

/* ===========================================================
 Team
 =========================================================== */
.team{padding: 130px 0; background:#fff; position: relative}
.team-grid{
 display:grid;
 grid-template-columns: 1fr 1.1fr;
 gap: 70px;
 align-items:center;
}
.team-media{position:relative}
.team-media .photo{
 border-radius: 28px;
 overflow:hidden;
 aspect-ratio: 4/5;
 box-shadow: var(--shadow-lg);
}
.team-media .photo img{width:100%; height:100%; object-fit:cover}
.team-media .float{
 position:absolute;
 background:#fff;
 border-radius: 18px;
 padding: 14px 18px;
 box-shadow: var(--shadow);
 display:flex; gap: 12px; align-items:center;
}
.team-media .float.f1{top: 18%; left: -36px}
.team-media .float.f2{bottom: 12%; right: -36px}
.team-media .float img{width: 44px; height: 44px; border-radius:50%; object-fit:cover}
.team-media .float .badge-icon{
 width: 44px; height: 44px;
 border-radius: 12px;
 display:flex; align-items:center; justify-content:center;
 background: var(--tint);
 color: var(--blue-deep);
 flex-shrink: 0;
}
.team-media .float .badge-icon.green{background: rgba(62,175,60,.14); color: var(--green-deep)}
.team-media .float .nm{font-weight:700; font-size: .9rem; color: var(--blue-ink)}
.team-media .float .rl{font-size: .76rem; color: var(--ink-soft)}

.team-copy p{margin-top: 16px; color: var(--ink-soft); font-size: 1.05rem}
.role-tabs{
 display:flex; flex-wrap:wrap; gap: 10px;
 margin: 28px 0 6px;
}
.role-tabs span{
 display:inline-flex; align-items:center; gap:8px;
 padding: 10px 16px;
 background: var(--tint);
 color: var(--blue-deep);
 border-radius: 99px;
 font-size: .85rem; font-weight: 700;
}
.role-tabs span strong{color: var(--green-deep); font-weight: 700}

/* ===========================================================
 Export bridge
 =========================================================== */
.export-bridge{
 background:
 linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
 padding: 110px 0;
 color:#fff;
 position: relative;
 overflow:hidden;
}
.export-bridge::before{
 content:"";
 position:absolute;
 width: 600px; height: 600px;
 background: rgba(62,175,60,.16);
 border-radius:50%;
 top: -250px; right: -150px;
}
.export-bridge::after{
 content:"";
 position:absolute;
 width: 400px; height: 400px;
 background: rgba(255,255,255,.06);
 border-radius:50%;
 bottom: -200px; left: -100px;
}
.export-bridge .wrap{position: relative; z-index:1}
.export-grid{
 display:grid;
 grid-template-columns: 1.2fr 1fr;
 gap: 60px;
 align-items:center;
}
.export-grid .eyebrow{background: rgba(255,255,255,.18); color:#fff}
.export-grid h2{color:#fff}
.export-grid p{color: rgba(255,255,255,.88); font-size: 1.05rem; margin-top: 16px}
.export-grid .btn-green{margin-top: 30px}
.export-emblem{
 background: rgba(255,255,255,.1);
 backdrop-filter: blur(14px);
 border-radius: 28px;
 padding: 40px;
 border: 1px solid rgba(255,255,255,.18);
}
.export-emblem .strap{font-size:.72rem; letter-spacing:.18em; text-transform: uppercase; font-weight:700; opacity:.7}
.export-emblem h3{
 font-family: var(--display);
 font-size: 2.4rem;
 color:#fff;
 margin: 8px 0 18px;
}
.export-emblem .url{
 display:inline-block;
 padding: 10px 16px;
 background: rgba(255,255,255,.12);
 border-radius: 10px;
 font-family: "SFMono-Regular", "Menlo", monospace;
 font-size: .92rem;
 color:#A6E0A4;
}
.export-features{
 list-style:none;
 margin-top: 24px;
 display:grid;
 gap: 10px;
}
.export-features li{
 display:flex; gap:10px;
 font-size:.95rem;
 color: rgba(255,255,255,.9);
}
.export-features li::before{
 content:"→";
 color: #A6E0A4;
 font-weight: 700;
}

/* ===========================================================
 News
 =========================================================== */
.news{padding: 130px 0; background: var(--tint)}
.news-head{
 display:flex; justify-content:space-between; align-items:end;
 margin-bottom: 60px;
 gap: 40px;
}
.news-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px}
.news-card{
 background:#fff;
 border-radius: 22px;
 overflow:hidden;
 box-shadow: var(--shadow-sm);
 transition: transform .3s ease, box-shadow .3s ease;
}
.news-card:hover{transform: translateY(-6px); box-shadow: var(--shadow)}
.news-card img{width:100%; aspect-ratio: 16/10; object-fit:cover}
.news-body{padding: 26px}
.news-body .cat{
 font-size:.72rem; font-weight:700;
 text-transform:uppercase; letter-spacing:.14em;
 color: var(--green-deep);
}
.news-body h3{margin-top: 8px; font-size: 1.2rem; line-height: 1.2}
.news-body .date{
 margin-top: 12px;
 font-size: .82rem;
 color: var(--ink-soft);
}

/* ===========================================================
 Reviews
 =========================================================== */
.reviews{padding: 130px 0; background: #fff}
.reviews-head{text-align: center; margin-bottom: 60px}
.reviews-head .eyebrow{display:inline-block}
.reviews-head .rate-row{
 display: inline-flex; gap: 14px; align-items: center;
 margin-top: 24px;
 font-size: .95rem;
 color: var(--ink-soft);
}
.reviews-head .rate-row .stars{display:inline-flex; gap: 2px}
.reviews-head .rate-row .stars svg{width:22px; height:22px; color: #F5B921}
.reviews-head .rate-row strong{color: var(--blue-ink); font-weight: 700; font-family: var(--display); font-size: 1.4rem}

.rev-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px}
.rev{
 background: var(--tint);
 border-radius: 22px;
 padding: 32px;
 position: relative;
}
.rev .stars{display:flex; gap: 2px; color: #F5B921; margin-bottom: 14px}
.rev .stars svg{width:18px; height:18px}
.rev blockquote{
 font-family: var(--display);
 font-size: 1.1rem;
 line-height: 1.45;
 color: var(--blue-ink);
 font-weight: 600;
}
.rev .who{
 display:flex; gap: 10px; align-items:center;
 margin-top: 22px;
 padding-top: 22px;
 border-top: 1px solid var(--rule);
}
.rev .who .av{
 width: 42px; height: 42px;
 border-radius: 50%;
 background: var(--blue);
 color:#fff;
 font-weight: 700;
 display:flex; align-items:center; justify-content:center;
}
.rev .who .nm{font-weight:700; color: var(--blue-ink)}
.rev .who .pl{font-size:.82rem; color: var(--ink-soft)}

/* ===========================================================
 CTA band
 =========================================================== */
.cta-band{
 background: var(--green-deep);
 padding: 90px 0;
 position: relative;
 overflow: hidden;
 color:#fff;
}
.cta-band::before{
 content:"";
 position:absolute; inset:0;
 background: radial-gradient(circle at 80% 50%, rgba(255,255,255,.16) 0%, transparent 50%);
}
.cta-inner{
 position: relative;
 display:grid;
 grid-template-columns: 1fr auto;
 gap: 60px;
 align-items: center;
}
.cta-inner .eyebrow{background: rgba(255,255,255,.16); color:#fff}
.cta-inner h2{color:#fff}
.cta-inner p{color: rgba(255,255,255,.92); margin-top: 12px; max-width: 520px}
.cta-phone{text-align: right; display:flex; flex-direction:column; gap: 10px; align-items:flex-end}
.cta-phone .sm{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; opacity:.8}
.cta-phone .tel{
 font-family: var(--display);
 font-size: 2.6rem;
 color: #fff;
 font-weight: 700;
 letter-spacing:-.02em;
}
.cta-phone .btn-primary{background:#fff; color: var(--green-deep)}
.cta-phone .btn-primary:hover{background: var(--cream); color: var(--green-deep)}

/* ===========================================================
 Footer
 =========================================================== */
.site-footer{
 background: var(--blue-ink);
 color: rgba(255,255,255,.78);
 padding: 90px 0 30px;
}
.foot-grid{
 display:grid;
 grid-template-columns: 1.5fr 1fr 1fr 1fr;
 gap: 50px;
 padding-bottom: 50px;
 border-bottom: 1px solid rgba(255,255,255,.1);
}
.foot-col h4{color:#fff; font-family: var(--sans); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 22px}
.foot-col ul{list-style:none; display:grid; gap: 10px}
.foot-col a{color: rgba(255,255,255,.78); font-size:.93rem}
.foot-col a:hover{color:#fff}
.foot-logo img{height: 64px; margin-bottom: 18px; background:#fff; padding: 6px; border-radius: 10px}
.foot-blurb{font-size:.92rem; color: rgba(255,255,255,.7); max-width: 320px; line-height: 1.7}
.foot-credentials{
 display:flex;
 align-items:center;
 gap: 28px;
 padding: 30px 0;
 border-bottom: 1px solid rgba(255,255,255,.1);
 flex-wrap: wrap;
}
.foot-cred-label{
 font-size:.74rem;
 font-weight:700;
 letter-spacing:.18em;
 text-transform:uppercase;
 color: rgba(255,255,255,.55);
}
.foot-creds{display:flex; gap: 24px; align-items:center; flex-wrap: wrap}
.foot-creds img{
 height: 64px; width: auto;
 background: #fff;
 padding: 8px 14px;
 border-radius: 10px;
 transition: transform .25s ease;
}
.foot-creds img:hover{transform: translateY(-2px)}

.foot-bottom{
 display:flex; justify-content:space-between; align-items:center;
 padding-top: 26px;
 gap: 30px;
 flex-wrap: wrap;
}
.foot-bottom .smallprint{font-size: .82rem; color: rgba(255,255,255,.55)}
.foot-bottom .smallprint a{color: rgba(255,255,255,.85)}
.foot-bottom .smallprint a:hover{color:#fff}
.foot-legal{display:flex; gap: 20px; font-size:.82rem}
.foot-legal a{color: rgba(255,255,255,.7)}
.socials{display:flex; gap: 10px}
.socials a{
 display:inline-flex; align-items:center; justify-content:center;
 width: 38px; height:38px;
 border-radius:50%;
 background: rgba(255,255,255,.08);
 color: #fff;
}
.socials a:hover{background: var(--green)}
.socials svg{width: 18px; height: 18px}

/* ===========================================================
 Floating helpers (deprecated, kept for safety; never shown)
 =========================================================== */
.float-cta{display: none !important}

/* VidiVet floating side button
 Sticks to the right edge of every page, vertical orientation,
 opens a small panel with per-branch sign-up links. */
.vidivet-fab{
 position: fixed;
 top: 50%;
 right: 0;
 transform: translateY(-50%);
 z-index: 45;
 pointer-events: auto;
}
.vidivet-fab-btn{
 display: flex;
 align-items: center;
 gap: 8px;
 background: var(--green-deep);
 color: #fff;
 font-family: var(--sans);
 font-weight: 700;
 font-size: .82rem;
 letter-spacing: .12em;
 text-transform: uppercase;
 padding: 14px 8px;
 border: 0;
 cursor: pointer;
 border-radius: 14px 0 0 14px;
 box-shadow: -6px 6px 24px rgba(20,33,58,.18);
 writing-mode: vertical-rl;
 text-orientation: mixed;
 transition: background .25s ease, padding-right .25s ease;
}
.vidivet-fab-btn:hover{background: var(--green); padding-right: 12px}
.vidivet-fab-btn svg{transform: rotate(90deg); width: 18px; height: 18px}
.vidivet-fab-panel{
 position: absolute;
 right: 100%;
 top: 50%;
 transform: translateY(-50%) translateX(8px);
 width: 280px;
 background: #fff;
 border-radius: 18px 0 0 18px;
 box-shadow: -10px 10px 40px rgba(20,33,58,.18);
 padding: 24px;
 opacity: 0;
 visibility: hidden;
 transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.vidivet-fab.open .vidivet-fab-panel{
 opacity: 1;
 visibility: visible;
 transform: translateY(-50%) translateX(0);
}
.vidivet-fab-panel h4{
 font-family: var(--display);
 font-size: 1.1rem;
 margin-bottom: 6px;
}
.vidivet-fab-panel p{
 font-size: .85rem;
 color: var(--ink-soft);
 margin-bottom: 16px;
}
.vidivet-fab-panel ul{
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: 8px;
}
.vidivet-fab-panel a{
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 14px;
 background: var(--tint);
 border-radius: 10px;
 color: var(--blue-ink);
 font-weight: 700;
 font-size: .9rem;
 text-decoration: none;
}
.vidivet-fab-panel a:hover{background: var(--green); color: #fff}
.vidivet-fab-panel a::after{content: "→"; opacity: .6}
.vidivet-fab-panel .more-link{
 display: block;
 margin-top: 12px;
 font-size: .82rem;
 color: var(--blue-deep);
 text-align: center;
 text-decoration: underline;
}
@media (max-width: 720px){
 .vidivet-fab-btn{padding: 12px 6px; font-size: .72rem}
 .vidivet-fab-panel{width: 260px; padding: 20px}
}

/* ===========================================================
 Responsive
 =========================================================== */
@media (max-width: 1180px){
 .main-nav{display:none}
 .burger{display:flex}
 .emergency-link .when{display:none}
 .emergency-link{padding-left: 14px}
 .emergency-link .num{font-size: 1.05rem}
 .welcome-grid, .team-grid, .ref-grid, .export-grid{grid-template-columns: 1fr; gap: 60px}
 .different-head, .branches-head{grid-template-columns: 1fr}
 .pillars{grid-template-columns: 1fr 1fr}
 .branches-grid{grid-template-columns: 1fr 1fr}
 .stats{grid-template-columns: 1fr 1fr; gap: 24px}
 .stat{border-right:0; border-bottom: 1px solid var(--rule); padding-bottom: 20px}
 .news-grid{grid-template-columns: 1fr 1fr}
 .rev-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
 .emergency-link .num{display:none}
 .emergency-link{border-left: 0; padding-left: 0}
 .emergency-link svg{width: 22px; height: 22px}
}
@media (max-width: 720px){
 .promise-quote{grid-template-columns: 1fr; padding: 32px 28px; gap: 18px; margin-top: -40px}
 .pillars, .branches-grid, .news-grid, .rev-grid{grid-template-columns: 1fr}
 .club-card{grid-template-columns: 1fr; padding: 36px 28px}
 .ref-list{grid-template-columns: 1fr}
 .cta-inner{grid-template-columns: 1fr; gap: 30px}
 .cta-phone{align-items: flex-start; text-align:left}
 .foot-grid{grid-template-columns: 1fr 1fr; gap: 30px}
 .welcome-media .badge{width: 100px; height: 100px; top: -16px; left: -16px}
 .welcome-media .photo-2{display:none}
 .hero{min-height: auto; padding-top: 120px; padding-bottom: 60px}
 .hero h1{font-size: 2.5rem}
 .scroll-cue{display:none}
 .ref-card{padding: 28px}
 .team-media .float{display:none}

 /* Hero CTAs stack full-width on mobile so all three are always visible */
 .hero-actions{
 flex-direction: column;
 align-items: stretch;
 width: 100%;
 gap: 10px;
 margin-top: 32px;
 }
 .hero-actions .btn{
 width: 100%;
 justify-content: center;
 padding: 14px 20px;
 }
 /* Page-hero on inner pages tightens on mobile */
 .page-hero{padding: 130px 0 60px}
 .page-hero h1{font-size: 1.9rem}
 .page-hero .lede{font-size: 1rem}
 /* Team filter chips wrap cleanly on mobile */
 .filter-label{margin-bottom: 4px; display: block}
 .chip{font-size: .82rem; padding: 7px 12px}
 /* Branch detail card scales down */
 .branch-detail .body{padding: 28px 22px}
 /* Mobile menu padding adjustment */
 .mobile-menu{padding: 90px 28px 32px}
}

/* =====================================================
 BOOK FAB. pinned right edge, stacked above VidiVet
 ===================================================== */
.book-fab{
 position: fixed;
 top: 50%;
 right: 0;
 /* sits above the VidiVet button which is centered at top:50% */
 transform: translateY(calc(-50% - 130px));
 z-index: 46;
 display: flex;
 align-items: center;
 gap: 8px;
 background: var(--blue-deep);
 color: #fff;
 font-family: var(--sans);
 font-weight: 700;
 font-size: .82rem;
 letter-spacing: .12em;
 text-transform: uppercase;
 padding: 14px 8px;
 border: 0;
 cursor: pointer;
 border-radius: 14px 0 0 14px;
 box-shadow: -6px 6px 24px rgba(20,33,58,.18);
 writing-mode: vertical-rl;
 text-orientation: mixed;
 text-decoration: none;
 transition: background .25s ease, padding-right .25s ease;
}
.book-fab:hover{ background: var(--blue); padding-right: 12px; color: #fff; }
.book-fab svg{ transform: rotate(90deg); width: 18px; height: 18px; }

@media (max-width: 720px){
 .book-fab{
 padding: 12px 6px;
 font-size: .72rem;
 transform: translateY(calc(-50% - 110px));
 }
}

/* =====================================================
 VALUES CAROUSEL (about page, dark section)
 ===================================================== */
.values-carousel{
 position: relative;
 margin-top: 50px;
}
.vc-track{
 display: flex;
 gap: 18px;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scroll-behavior: smooth;
 scrollbar-width: none;
 padding: 6px 4px 24px;
 -webkit-overflow-scrolling: touch;
}
.vc-track::-webkit-scrollbar{ display: none; }
.vc-slide{
 flex: 0 0 calc((100% - 36px) / 3);
 scroll-snap-align: start;
 background: rgba(255,255,255,.06);
 border: 1px solid rgba(255,255,255,.1);
 border-radius: 22px;
 padding: 32px;
 min-height: 200px;
}
.vc-slide h3{
 color: #fff;
 font-family: var(--display);
 font-size: 1.3rem;
 margin-bottom: 12px;
}
.vc-slide p{
 color: rgba(255,255,255,.78);
 line-height: 1.6;
 margin: 0;
}

/* Nav buttons */
.vc-nav{
 position: absolute;
 top: calc(50% - 24px);
 width: 54px; height: 54px;
 border-radius: 50%;
 border: 0;
 background: var(--green-deep);
 color: #fff;
 display: flex; align-items: center; justify-content: center;
 cursor: pointer;
 z-index: 2;
 box-shadow: 0 6px 20px rgba(0,0,0,.25);
 transition: background .2s ease, transform .2s ease;
}
.vc-nav:hover{ background: var(--green); transform: scale(1.05); }
.vc-nav:disabled{ opacity: .35; cursor: default; transform: none; }
.vc-prev{ left: -18px; }
.vc-next{ right: -18px; }

/* Dots (built by JS) */
.vc-dots{
 display: flex;
 justify-content: center;
 gap: 8px;
 margin-top: 18px;
}
.vc-dot{
 width: 8px; height: 8px;
 border-radius: 50%;
 background: rgba(255,255,255,.25);
 border: 0;
 padding: 0;
 cursor: pointer;
 transition: background .2s ease, transform .2s ease;
}
.vc-dot.active{
 background: var(--green);
 transform: scale(1.3);
}

@media (max-width: 880px){
 .vc-slide{ flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 640px){
 .vc-slide{ flex-basis: 100%; }
 .vc-prev{ left: 4px; }
 .vc-next{ right: 4px; }
 .vc-nav{ width: 44px; height: 44px; top: calc(50% - 28px); }
}

/* =====================================================
 PRICES. JUMP NAV + SUB-HEADING ROWS
 ===================================================== */
.price-jump-nav{
 background: #fff;
 border: 1px solid var(--rule);
 border-radius: 18px;
 padding: 24px 28px;
 margin-bottom: 50px;
 box-shadow: 0 3px 14px rgba(20,33,58,.05);
 position: sticky;
 top: 90px;
 z-index: 5;
}
.pjn-label{
 font-size: .72rem;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: var(--ink-soft);
 font-weight: 700;
 margin-bottom: 12px;
}
.pjn-items{
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.pjn-items a{
 display: inline-flex;
 align-items: center;
 padding: 8px 14px;
 border: 1px solid var(--rule);
 border-radius: 100px;
 font-size: .82rem;
 font-weight: 600;
 color: var(--blue-ink);
 text-decoration: none;
 background: var(--tint);
 transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pjn-items a:hover{
 background: var(--blue-deep);
 color: #fff;
 border-color: var(--blue-deep);
}
.pjn-items a.ext{
 background: var(--green-deep);
 color: #fff;
 border-color: var(--green-deep);
}
.pjn-items a.ext:hover{
 background: var(--green);
 border-color: var(--green);
}

/* Sub-heading rows inside a price table (Dog / Cat / Rabbit) */
.price-table tr.sub td{
 background: var(--tint);
 font-family: var(--display);
 font-weight: 700;
 color: var(--blue-ink);
 font-size: .95rem;
 letter-spacing: .04em;
 padding: 12px 24px;
}

/* Ensure sections scroll into view below the sticky header */
.price-block{ scroll-margin-top: 110px; }

@media (max-width: 720px){
 .price-jump-nav{
 position: static;
 padding: 18px 20px;
 }
 .pjn-items a{ font-size: .78rem; padding: 7px 12px; }
}

/* =====================================================
 REFERRAL FORM. expanded fields, groups, uploads
 ===================================================== */
.form-group{
 border-top: 1px solid var(--rule);
 padding-top: 24px;
 margin-top: 22px;
}
.form-group:first-of-type{
 border-top: 0;
 padding-top: 0;
 margin-top: 0;
}
.form-group-heading{
 font-family: var(--sans);
 font-size: .72rem;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: var(--green-deep);
 font-weight: 800;
 margin-bottom: 18px;
}
.req{
 color: var(--green-deep);
 font-weight: 700;
 margin-left: 2px;
}
.field-hint{
 font-size: .78rem;
 color: var(--ink-soft);
 margin-top: 6px;
}
.radio-row{
 display: flex;
 gap: 22px;
 margin-top: 6px;
 flex-wrap: wrap;
}
.radio-opt{
 display: inline-flex;
 align-items: center;
 gap: 8px;
 cursor: pointer;
 font-weight: 500;
 color: var(--ink);
 padding: 8px 14px;
 border: 1px solid var(--rule);
 border-radius: 100px;
 background: var(--tint);
 transition: background .2s ease, border-color .2s ease;
}
.radio-opt:has(input:checked){
 background: var(--green-deep);
 color: #fff;
 border-color: var(--green-deep);
}
.radio-opt input[type="radio"]{
 accent-color: var(--green-deep);
 width: 16px;
 height: 16px;
}
/* File input styling */
.form-field input[type="file"]{
 padding: 12px 14px;
 border: 1.5px dashed var(--rule);
 border-radius: 12px;
 background: var(--tint);
 cursor: pointer;
 width: 100%;
 font-family: var(--sans);
 font-size: .9rem;
 color: var(--ink-soft);
 transition: border-color .2s ease, background .2s ease;
}
.form-field input[type="file"]:hover{
 border-color: var(--green-deep);
 background: #fff;
}
.form-field input[type="file"]:valid{
 border-color: var(--green-deep);
 color: var(--ink);
}

/* =====================================================
 NOTICE STRIP (accessibility + parking on branches page)
 ===================================================== */
.notice-strip{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 24px;
 background: var(--tint);
 border-radius: 22px;
 padding: 28px;
 border-left: 4px solid var(--green-deep);
}
.notice-item{
 display: flex;
 gap: 16px;
 align-items: flex-start;
}
.notice-ic{
 flex: 0 0 44px;
 width: 44px; height: 44px;
 border-radius: 50%;
 background: #fff;
 color: var(--blue-deep);
 display: flex; align-items: center; justify-content: center;
 box-shadow: 0 2px 8px rgba(20,33,58,.08);
}
.notice-item h4{
 font-family: var(--display);
 font-size: 1.1rem;
 color: var(--blue-ink);
 margin-bottom: 4px;
}
.notice-item p{
 font-size: .95rem;
 line-height: 1.5;
 color: var(--ink-soft);
 margin: 0;
}
@media (max-width: 720px){
 .notice-strip{ grid-template-columns: 1fr; padding: 22px; }
}

/* Optional-field marker */
.optional{
 color: var(--ink-soft);
 font-weight: 500;
 text-transform: none;
 letter-spacing: 0;
 margin-left: 4px;
 font-size: .78rem;
}

/* =====================================================
 BODY-COPY LINKS. bolder so they stand out
 ===================================================== */
/* Targets links inside paragraphs, list items in prose/info-cards,
 and prose blocks. Nav, footer, buttons and price-jump-nav all use
 their own class-based selectors and are unaffected. */
p a:not(.btn),
.prose a:not(.btn),
.info-card p a:not(.btn),
.info-card li a:not(.btn),
.form-foot a:not(.btn),
.field-hint a:not(.btn),
td a:not(.btn),
.price-block a:not(.btn){
 color: var(--blue-deep);
 font-weight: 700;
 text-decoration: none;
}
p a:not(.btn):hover,
.prose a:not(.btn):hover,
.info-card p a:not(.btn):hover,
.info-card li a:not(.btn):hover,
.form-foot a:not(.btn):hover,
td a:not(.btn):hover,
.price-block a:not(.btn):hover{
 color: var(--blue-ink);
 text-decoration: none;
}

/* =====================================================
 PAGE-GRID-2 IMAGES. fill column height to match text
 The trick is flex:1 on the image + the grid itself
 having align-items: stretch (which it does by default,
 stated explicit for clarity).
 ===================================================== */
.page-grid-2{ align-items: stretch; }
.page-grid-2 > * { min-height: 0; }
.page-grid-2 > div:last-child{
 display: flex;
 flex-direction: column;
}
.page-grid-2 > div:last-child > img{
 flex: 1 1 auto;
 width: 100%;
 min-height: 360px;
 max-height: 640px;
 object-fit: cover;
 border-radius: 22px;
 display: block;
}
.page-grid-2 > div:last-child > .info-card{
 flex: 1;
}

/* Any image that sits INSIDE a prose column (e.g. contact page,
 book-appointment page): render as a proper landscape banner
 instead of the tiny intrinsic size */
.prose > img{
 width: 100%;
 aspect-ratio: 3 / 2;
 object-fit: cover;
 border-radius: 22px;
 display: block;
 margin-top: 24px;
}
@media (max-width: 880px){
 .page-grid-2 > div:last-child > img{ min-height: 260px; max-height: 420px; }
}

/* =====================================================
 GOOGLE ADS LANDING PAGE. join.html
 ===================================================== */
.lp-body{ background: #fff; }

/* Header. logo + phone only, no nav */
.lp-header{
 background: #fff;
 border-bottom: 1px solid var(--rule);
 padding: 18px 0;
 position: sticky;
 top: 0;
 z-index: 40;
 box-shadow: 0 1px 6px rgba(20,33,58,.04);
}
.lp-header-inner{
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.lp-logo img{ height: 54px; width: auto; display: block; }
.lp-phone-cta{
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 20px;
 background: var(--green-deep);
 color: #fff;
 border-radius: 100px;
 font-weight: 700;
 text-decoration: none;
 transition: background .2s ease, transform .2s ease;
}
.lp-phone-cta:hover{ background: var(--green); transform: translateY(-1px); color: #fff; }
.lp-phone-lbl{ font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.lp-phone-num{ font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
@media (max-width: 600px){
 .lp-phone-lbl{ display: none; }
 .lp-phone-num{ font-size: .95rem; }
 .lp-logo img{ height: 42px; }
 .lp-phone-cta{ padding: 10px 16px; gap: 8px; }
}

/* Hero */
.lp-hero{
 background: linear-gradient(140deg, var(--blue-ink) 0%, var(--blue-deep) 100%);
 color: #fff;
 padding: 80px 0 100px;
 position: relative;
 overflow: hidden;
}
.lp-hero::before{
 content: "";
 position: absolute; inset: 0;
 background:
 radial-gradient(circle at 85% 20%, rgba(62,175,60,.18), transparent 50%),
 radial-gradient(circle at 10% 90%, rgba(46,106,178,.4), transparent 50%);
 pointer-events: none;
}
.lp-hero-grid{
 display: grid;
 grid-template-columns: 1.1fr .9fr;
 gap: 60px;
 align-items: start;
 position: relative;
}
.lp-hero-copy h1{
 font-family: var(--display);
 font-size: clamp(2.2rem, 4.2vw, 3.8rem);
 line-height: 1.05;
 color: #fff;
 margin: 20px 0 20px;
 letter-spacing: -.01em;
}
.lp-lede{
 font-size: 1.15rem;
 line-height: 1.55;
 color: rgba(255,255,255,.88);
 margin-bottom: 32px;
}
.lp-hero-flag{
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 8px 16px;
 background: rgba(62, 175, 60, .18);
 color: #A6E0A4;
 border-radius: 100px;
 font-size: .82rem;
 font-weight: 700;
 letter-spacing: .04em;
 border: 1px solid rgba(62,175,60,.35);
}
.lp-trust-points{
 list-style: none;
 padding: 0;
 margin: 0 0 32px;
 display: grid;
 gap: 12px;
}
.lp-trust-points li{
 display: flex;
 align-items: center;
 gap: 12px;
 color: rgba(255,255,255,.9);
 font-size: 1rem;
}
.lp-trust-points li svg{
 color: #A6E0A4;
 flex: 0 0 18px;
}
.lp-credentials{
 display: flex;
 gap: 20px;
 align-items: center;
 flex-wrap: wrap;
}
.lp-credentials img{
 height: 62px;
 width: auto;
 background: #fff;
 border-radius: 10px;
 padding: 8px 12px;
 box-shadow: 0 3px 12px rgba(0,0,0,.15);
}

/* Form card */
.lp-form-card{
 padding: 36px;
 background: #fff;
 color: var(--ink);
 border-radius: 22px;
 box-shadow: 0 20px 60px rgba(0,0,0,.2);
 position: sticky;
 top: 100px;
}
.lp-form-card h2{
 font-family: var(--display);
 font-size: 1.6rem;
 color: var(--blue-ink);
 margin-bottom: 10px;
}
.lp-form-sub{
 color: var(--ink-soft);
 font-size: .95rem;
 line-height: 1.5;
 margin-bottom: 24px;
}
.lp-form .form-field{ margin-bottom: 14px; }
.lp-submit{
 width: 100%;
 margin-top: 8px;
 padding: 16px 24px;
 font-size: 1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
}
.lp-form-foot{
 font-size: .82rem;
 color: var(--ink-soft);
 margin-top: 14px;
 text-align: center;
}

@media (max-width: 900px){
 .lp-hero{ padding: 50px 0 70px; }
 .lp-hero-grid{ grid-template-columns: 1fr; gap: 40px; }
 .lp-form-card{ position: static; padding: 28px; }
 .lp-hero-copy h1{ font-size: 2rem; }
 .lp-credentials img{ height: 50px; }
}

/* Trust strip */
.lp-trust-strip{
 background: var(--tint);
 padding: 40px 0;
 border-bottom: 1px solid var(--rule);
}
.lp-trust-grid{
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 30px;
 text-align: center;
}
.lp-trust-item .num{
 font-family: var(--display);
 font-size: clamp(2.2rem, 4vw, 3.2rem);
 font-weight: 700;
 color: var(--blue-deep);
 line-height: 1;
 margin-bottom: 8px;
}
.lp-trust-item .lbl{
 font-size: .9rem;
 color: var(--ink-soft);
 line-height: 1.4;
}
@media (max-width: 720px){
 .lp-trust-grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* Sections */
.lp-section{
 padding: 80px 0;
 background: #fff;
}
.lp-section.alt{ background: var(--tint); }

/* Why grid */
.lp-why-grid{
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 24px;
}
.lp-why-card{
 background: #fff;
 border: 1px solid var(--rule);
 border-radius: 22px;
 padding: 32px;
 transition: transform .3s ease, box-shadow .3s ease;
}
.lp-why-card:hover{
 transform: translateY(-4px);
 box-shadow: var(--shadow);
}
.lp-why-ic{
 width: 52px; height: 52px;
 border-radius: 50%;
 background: var(--tint);
 display: flex; align-items: center; justify-content: center;
 color: var(--blue-deep);
 margin-bottom: 18px;
}
.lp-section.alt .lp-why-card{ background: #fff; }
.lp-why-card h3{
 font-family: var(--display);
 font-size: 1.3rem;
 color: var(--blue-ink);
 margin-bottom: 10px;
}
.lp-why-card p{
 color: var(--ink-soft);
 line-height: 1.6;
 margin: 0;
}
@media (max-width: 720px){
 .lp-why-grid{ grid-template-columns: 1fr; }
}

/* Steps */
.lp-steps{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 30px;
}
.lp-step{
 text-align: center;
 padding: 24px;
}
.lp-step-num{
 width: 64px; height: 64px;
 border-radius: 50%;
 background: var(--green-deep);
 color: #fff;
 font-family: var(--display);
 font-size: 1.6rem;
 font-weight: 700;
 display: flex; align-items: center; justify-content: center;
 margin: 0 auto 22px;
 box-shadow: 0 8px 20px rgba(62,175,60,.35);
}
.lp-step h3{
 font-family: var(--display);
 font-size: 1.35rem;
 color: var(--blue-ink);
 margin-bottom: 10px;
}
.lp-step p{
 color: var(--ink-soft);
 line-height: 1.6;
 margin: 0;
}
@media (max-width: 720px){
 .lp-steps{ grid-template-columns: 1fr; gap: 20px; }
}

/* Branches grid */
.lp-branches{
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 18px;
}
.lp-branch{
 background: var(--tint);
 border-radius: 18px;
 padding: 26px;
 position: relative;
}
.lp-branch-tag{
 position: absolute;
 top: 14px;
 right: 14px;
 background: var(--green-deep);
 color: #fff;
 font-size: .68rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
 padding: 4px 10px;
 border-radius: 100px;
}
.lp-branch h3{
 font-family: var(--display);
 font-size: 1.3rem;
 color: var(--blue-ink);
 margin-bottom: 8px;
}
.lp-branch p{
 color: var(--ink-soft);
 font-size: .9rem;
 line-height: 1.4;
 margin-bottom: 14px;
}
.lp-branch-tel{
 font-family: var(--display);
 font-size: 1.05rem;
 color: var(--blue-deep);
 font-weight: 700;
 text-decoration: none;
}
@media (max-width: 720px){
 .lp-branches{ grid-template-columns: 1fr 1fr; }
}

/* Pet Health Plan callout */
.lp-hp-grid{
 display: grid;
 grid-template-columns: 1.2fr .8fr;
 gap: 50px;
 align-items: center;
}
.lp-hp-points{
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: 12px;
}
.lp-hp-points li{
 padding-left: 28px;
 position: relative;
 color: var(--ink-soft);
 line-height: 1.5;
}
.lp-hp-points li::before{
 content: "✓";
 position: absolute;
 left: 0; top: 0;
 color: var(--green-deep);
 font-weight: 700;
}
.lp-hp-card{
 background: #fff;
 border-radius: 22px;
 padding: 36px;
 box-shadow: var(--shadow);
 border: 1px solid var(--rule);
}
.lp-hp-label{
 font-size: .72rem;
 text-transform: uppercase;
 letter-spacing: .16em;
 color: var(--ink-soft);
 font-weight: 700;
 margin-bottom: 16px;
}
.lp-hp-plans{
 display: grid;
 gap: 12px;
 margin-bottom: 24px;
}
.lp-hp-plan{
 padding: 18px 22px;
 background: var(--tint);
 border-radius: 14px;
 border: 1px solid var(--rule);
}
.lp-hp-plan.platinum{
 background: linear-gradient(135deg, var(--blue-ink), var(--blue-deep));
 color: #fff;
 border: 0;
}
.lp-hp-plan-name{
 font-family: var(--display);
 font-size: 1.2rem;
 font-weight: 700;
}
.lp-hp-plan-sub{
 font-size: .85rem;
 color: var(--ink-soft);
 margin-top: 2px;
}
.lp-hp-plan.platinum .lp-hp-plan-sub{ color: rgba(255,255,255,.75); }
.lp-hp-btn{ width: 100%; text-align: center; justify-content: center; display: flex; }
@media (max-width: 720px){
 .lp-hp-grid{ grid-template-columns: 1fr; gap: 32px; }
}

/* Final CTA */
.lp-final-cta{
 background: linear-gradient(140deg, var(--blue-ink) 0%, var(--blue-deep) 100%);
 color: #fff;
 text-align: center;
 padding: 90px 0;
 position: relative;
 overflow: hidden;
}
.lp-final-cta::before{
 content: "";
 position: absolute; inset: 0;
 background: radial-gradient(circle at 50% 100%, rgba(62,175,60,.2), transparent 60%);
 pointer-events: none;
}
.lp-final-cta h2{
 font-family: var(--display);
 color: #fff;
 font-size: clamp(2rem, 4vw, 3rem);
 margin-bottom: 14px;
 position: relative;
}
.lp-final-cta p{
 color: rgba(255,255,255,.85);
 font-size: 1.1rem;
 margin-bottom: 30px;
 position: relative;
}
.lp-final-buttons{
 display: flex;
 gap: 18px;
 justify-content: center;
 flex-wrap: wrap;
 position: relative;
}
.lp-btn-tel{
 display: inline-flex;
 align-items: center;
 gap: 10px;
}

/* Footer */
.lp-footer{
 background: var(--blue-ink);
 color: rgba(255,255,255,.75);
 padding: 40px 0;
 font-size: .9rem;
}
.lp-footer-inner{
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 30px;
 align-items: center;
}
.lp-footer-logo{
 height: 40px;
 margin-bottom: 12px;
 filter: brightness(0) invert(1);
}
.lp-footer-legal{
 display: flex;
 gap: 20px;
 align-items: center;
 flex-wrap: wrap;
}
.lp-footer-legal a{
 color: rgba(255,255,255,.75);
 text-decoration: none;
 font-weight: 600;
}
.lp-footer-legal a:hover{ color: #fff; }
.lp-footer-copy{
 color: rgba(255,255,255,.5);
 font-size: .82rem;
 flex-basis: 100%;
 margin-top: 8px;
}
@media (max-width: 720px){
 .lp-footer-inner{ grid-template-columns: 1fr; }
 .lp-final-cta{ padding: 60px 0; }
 .lp-section{ padding: 60px 0; }
}

/* =====================================================
 LP. HERO POLAROID (subtle floating photo card)
 ===================================================== */
.lp-hero-polaroid{
 position: absolute;
 right: 45%;
 top: 60%;
 transform: rotate(-4deg);
 background: #fff;
 padding: 10px 10px 14px;
 border-radius: 10px;
 box-shadow: 0 20px 50px rgba(0,0,0,.35);
 width: 190px;
 z-index: 1;
 pointer-events: none;
}
.lp-hero-polaroid img{
 width: 100%;
 aspect-ratio: 1 / 1;
 object-fit: cover;
 border-radius: 4px;
 display: block;
}
.lp-hero-polaroid-note{
 display: block;
 font-family: "Caveat", cursive;
 font-size: 1.25rem;
 color: var(--blue-ink);
 text-align: center;
 margin-top: 6px;
 line-height: 1;
}
@media (max-width: 1100px){
 .lp-hero-polaroid{ display: none; }
}

/* =====================================================
 LP. TEAM BAND (full-width team image)
 ===================================================== */
.lp-team-band{
 position: relative;
 height: 380px;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}
.lp-team-band-img{
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 40%;
 z-index: 0;
}
.lp-team-band-overlay{
 position: absolute;
 inset: 0;
 background: linear-gradient(140deg, rgba(14,39,71,.85) 0%, rgba(31,78,137,.75) 100%);
 z-index: 1;
}
.lp-team-band-content{
 position: relative;
 z-index: 2;
 color: #fff;
 max-width: 720px;
}
.lp-team-band-content h2{
 font-family: var(--display);
 font-size: clamp(2rem, 4vw, 3rem);
 color: #fff;
 margin-bottom: 14px;
}
.lp-team-band-content p{
 font-size: 1.15rem;
 color: rgba(255,255,255,.9);
 line-height: 1.5;
}
@media (max-width: 720px){
 .lp-team-band{ height: 320px; }
}

/* =====================================================
 LP. GALLERY BAND ("A snapshot of Lanes")
 ===================================================== */
.lp-gallery{
 padding: 80px 0;
 background: #fff;
}
.lp-gallery-head{
 text-align: center;
 max-width: 720px;
 margin: 0 auto 50px;
}
.lp-gallery-head h2{ margin-bottom: 12px; }
.lp-gallery-head p{
 color: var(--ink-soft);
 font-size: 1.05rem;
}
.lp-gallery-grid{
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: 220px 220px;
 gap: 14px;
}
.lp-gallery-item{
 position: relative;
 border-radius: 18px;
 overflow: hidden;
 box-shadow: 0 8px 28px rgba(20,33,58,.12);
}
.lp-gallery-item img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform .5s ease;
}
.lp-gallery-item:hover img{ transform: scale(1.05); }
.lp-gallery-item.tall{ grid-column: span 2; grid-row: span 2; }
.lp-gallery-item.wide{ grid-column: span 2; }
.lp-gallery-cap{
 position: absolute;
 bottom: 0; left: 0; right: 0;
 padding: 16px 20px;
 background: linear-gradient(to top, rgba(14,39,71,.85), rgba(14,39,71,0));
 color: #fff;
 font-family: var(--display);
 font-size: 1.05rem;
 font-weight: 500;
}
@media (max-width: 900px){
 .lp-gallery-grid{
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 220px 220px 220px 220px;
 }
 .lp-gallery-item.tall{ grid-column: span 2; grid-row: span 2; }
 .lp-gallery-item.wide{ grid-column: span 2; }
}
@media (max-width: 560px){
 .lp-gallery-grid{
 grid-template-columns: 1fr;
 grid-template-rows: repeat(4, 200px);
 }
 .lp-gallery-item.tall,
 .lp-gallery-item.wide{ grid-column: span 1; grid-row: span 1; }
}

/* =====================================================
 LP. PHP CALLOUT PHOTO
 ===================================================== */
.lp-hp-photo{
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-radius: 14px;
 margin-bottom: 22px;
 display: block;
}

/* =====================================================
 SERVICES INDEX (bottom of services.html - link list)
 ===================================================== */
.services-index{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 40px;
}
.services-index-col h3{
 font-family: var(--display);
 font-size: 1.2rem;
 font-weight: 700;
 color: var(--blue-ink);
 margin-bottom: 14px;
 padding-bottom: 10px;
 border-bottom: 2px solid var(--green);
}
.services-index-col ul{
 list-style: none;
 padding: 0;
 margin: 0;
}
.services-index-col li{
 padding: 8px 0;
 border-bottom: 1px solid var(--rule);
}
.services-index-col li:last-child{ border-bottom: 0; }
.services-index-col a{
 color: var(--blue-ink);
 font-weight: 600;
 text-decoration: none;
}
.services-index-col a:hover{
 color: var(--green-deep);
}
@media (max-width: 760px){
 .services-index{ grid-template-columns: 1fr; gap: 24px; }
}

/* =====================================================
 SERVICES SIDEBAR (right column on every service page)
 ===================================================== */
.services-layout{
 display: grid;
 grid-template-columns: minmax(0, 1fr) 280px;
 gap: 60px;
 align-items: start;
}
.services-layout > .prose{ min-width: 0; }
.services-nav{
 position: sticky;
 top: 90px;
 max-height: calc(100vh - 110px);
 overflow-y: auto;
 background: var(--tint);
 border-radius: 18px;
 padding: 24px 22px;
 border: 1px solid var(--rule);
}
.services-nav-inner{ display: flex; flex-direction: column; }
.services-nav-head{
 font-family: var(--display);
 font-weight: 700;
 font-size: 1.15rem;
 color: var(--blue-ink);
 margin-bottom: 8px;
 padding-bottom: 12px;
 border-bottom: 2px solid var(--green);
}
/* Collapsible category groups */
.services-nav-group{
 margin-top: 4px;
 border-bottom: 1px solid var(--rule);
}
.services-nav-group:last-of-type{ border-bottom: 0; }
.services-nav-group > summary{
 list-style: none;
 cursor: pointer;
 padding: 12px 4px 12px 8px;
 font-family: var(--sans);
 font-size: .82rem;
 font-weight: 700;
 letter-spacing: .04em;
 color: var(--blue-ink);
 display: flex;
 justify-content: space-between;
 align-items: center;
 user-select: none;
 transition: color .15s ease;
}
.services-nav-group > summary::-webkit-details-marker{ display: none; }
.services-nav-group > summary::after{
 content: "";
 width: 8px;
 height: 8px;
 border-right: 2px solid currentColor;
 border-bottom: 2px solid currentColor;
 transform: rotate(45deg);
 transition: transform .2s ease;
 margin-left: 8px;
 opacity: .55;
}
.services-nav-group[open] > summary::after{
 transform: rotate(-135deg);
}
.services-nav-group > summary:hover{ color: var(--blue-deep); }
.services-nav-group ul{
 list-style: none;
 padding: 0 0 8px 0;
 margin: 0;
}
.services-nav-group li{ margin-bottom: 2px; }
.services-nav-group a{
 display: block;
 padding: 7px 10px;
 border-radius: 8px;
 font-size: .92rem;
 color: var(--ink);
 font-weight: 500;
 text-decoration: none;
 line-height: 1.35;
 transition: background .18s ease, color .18s ease;
}
.services-nav-group a:hover{
 background: #fff;
 color: var(--blue-deep);
}
.services-nav-group a.active,
.services-nav-group li.active a{
 background: var(--blue-deep);
 color: #fff;
 font-weight: 700;
}
.services-nav-back{
 display: block;
 margin-top: 22px;
 padding-top: 16px;
 border-top: 1px solid var(--rule);
 font-size: .82rem;
 font-weight: 700;
 color: var(--blue-deep);
 text-decoration: none;
}
.services-nav-back:hover{ color: var(--blue-ink); }

@media (max-width: 1024px){
 .services-layout{ grid-template-columns: 1fr; gap: 40px; }
 .services-nav{ position: static; max-height: none; overflow: visible; }
}

/* =====================================================
 NEWSLETTER ARCHIVE (news.html)
 ===================================================== */
.newsletter-grid{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
}
.newsletter-card{
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 18px 20px;
 background: #fff;
 border: 1px solid var(--rule);
 border-radius: 14px;
 text-decoration: none;
 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.newsletter-card:hover{
 transform: translateY(-2px);
 box-shadow: var(--shadow-sm);
 border-color: var(--green);
}
.nl-icon{
 width: 44px; height: 44px;
 flex: 0 0 44px;
 background: var(--tint);
 color: var(--blue-deep);
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.nl-body{ flex: 1; min-width: 0; }
.nl-date{
 font-family: var(--display);
 font-size: 1rem;
 font-weight: 700;
 color: var(--blue-ink);
 line-height: 1.2;
}
.nl-label{
 font-size: .78rem;
 color: var(--ink-soft);
 letter-spacing: .04em;
 margin-top: 2px;
}
.nl-open{
 font-size: .82rem;
 font-weight: 700;
 color: var(--blue-deep);
 white-space: nowrap;
}
@media (max-width: 900px){ .newsletter-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .newsletter-grid{ grid-template-columns: 1fr; } }

/* ===========================================================
   Mobile header: phone number hugs the burger button
   =========================================================== */
@media (max-width: 1180px){
 .header-inner{justify-content:flex-start; gap: 14px}
 .emergency-link{margin-left:auto; border-left:0; padding-left: 0}
 .burger{flex-shrink:0}
}

/* ===========================================================
   Price tables on small screens: compact, everything visible
   =========================================================== */
@media (max-width: 720px){
 .price-table th, .price-table td{padding: 12px 10px; font-size: .9rem}
 .price-table td.amount{font-size: .95rem; white-space: nowrap}
 .price-table th{font-size: .62rem; letter-spacing: .1em}
 .price-block h2{font-size: 1.3rem}
 .table-wrap{overflow-x:auto; -webkit-overflow-scrolling: touch}
}
@media (max-width: 420px){
 .price-table th, .price-table td{padding: 10px 8px; font-size: .84rem}
 .price-table td.amount{font-size: .9rem}
}

/* ===========================================================
   Gravity Forms: match the Lanes form styling
   =========================================================== */
.gform_wrapper.gravity-theme .gfield input[type="text"],
.gform_wrapper.gravity-theme .gfield input[type="email"],
.gform_wrapper.gravity-theme .gfield input[type="tel"],
.gform_wrapper.gravity-theme .gfield input[type="number"],
.gform_wrapper.gravity-theme .gfield select,
.gform_wrapper.gravity-theme .gfield textarea{
 width: 100%;
 padding: 13px 16px;
 border: 1px solid var(--rule);
 border-radius: 12px;
 background: var(--tint);
 font-family: var(--sans);
 font-size: .95rem;
 color: var(--ink);
 transition: border-color .2s ease, box-shadow .2s ease;
}
.gform_wrapper.gravity-theme .gfield input:focus,
.gform_wrapper.gravity-theme .gfield select:focus,
.gform_wrapper.gravity-theme .gfield textarea:focus{
 outline: none;
 border-color: var(--blue);
 box-shadow: 0 0 0 3px rgba(46,106,178,.14);
 background: #fff;
}
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label{
 font-weight: 600;
 font-size: .9rem;
 color: var(--ink);
 margin-bottom: 6px;
}
.gform_wrapper.gravity-theme .gfield_required{color: var(--green)}
.gform_wrapper.gravity-theme .gsection{
 border-bottom: 1px solid var(--rule);
 margin: 26px 0 6px;
 padding-bottom: 8px;
}
.gform_wrapper.gravity-theme .gsection_title{
 font-family: var(--display);
 font-size: 1.25rem;
 color: var(--blue-ink);
 font-weight: 700;
}
.gform_wrapper.gravity-theme .gfield{margin-bottom: 6px}
.gform_wrapper.gravity-theme .gfield_radio label,
.gform_wrapper.gravity-theme .gfield_checkbox label,
.gform_wrapper.gravity-theme .gfield_consent_label{
 font-size: .92rem;
 color: var(--ink);
 font-weight: 500;
}
.gform_wrapper.gravity-theme input[type="radio"],
.gform_wrapper.gravity-theme input[type="checkbox"]{
 accent-color: var(--green);
 width: 18px; height: 18px;
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button,
.gform_wrapper.gravity-theme .gform-button{
 display: inline-block;
 padding: 15px 30px;
 border: 0;
 border-radius: 99px;
 background: var(--green);
 color: #fff;
 font-family: var(--sans);
 font-weight: 700;
 font-size: .98rem;
 cursor: pointer;
 transition: background .2s ease, transform .15s ease;
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform-button:hover{
 background: var(--blue);
 transform: translateY(-1px);
}
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message{
 background: #fdf2f2;
 border: 1px solid #e8b4b4;
 border-radius: 10px;
 color: #9b3535;
 font-size: .88rem;
 padding: 8px 12px;
 margin-top: 6px;
}
.gform_wrapper.gravity-theme .gform_validation_errors{
 background: #fdf2f2;
 border: 1px solid #e8b4b4;
 border-radius: 14px;
 padding: 16px 20px;
}
.gform_confirmation_message{
 background: var(--tint);
 border-left: 5px solid var(--green);
 border-radius: 16px;
 padding: 26px 30px;
 font-size: 1.02rem;
 color: var(--ink);
}
.gform_wrapper.gravity-theme .ginput_complex label{
 font-size: .78rem;
 color: var(--ink-soft);
 font-weight: 600;
}