:root {
            --forest: #1b3a2d;
            --forest-mid: #2a5240;
            --forest-light: #3d7a5e;
            --cream: #f7f2ea;
            --warm-white: #fdfaf5;
            --gold: #c8a96e;
            --gold-light: #e8d5a8;
            --text-dark: #1a2318;
            --text-mid: #4a5c4e;
            --text-soft: #7a8c7e;
            --card-bg: rgba(255,255,255,0.85);
            --shadow: 0 20px 60px rgba(27,58,45,0.12);
        }
 
        * { margin: 0; padding: 0; box-sizing: border-box; }
 
        body {
            font-family: 'DM Sans', sans-serif;
            background-color: var(--warm-white);
            color: var(--text-dark);
            overflow-x: hidden;
        }
 
        
        .custom-navbar {
            background: rgba(253,250,245,0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(200,169,110,0.2);
            padding: 18px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            transition: box-shadow 0.3s;
        }
        .custom-navbar.scrolled {
            box-shadow: 0 4px 30px rgba(27,58,45,0.1);
        }
        .brand-logo {
            font-family: 'Playfair Display', serif;
            color: var(--forest) !important;
            font-size: 26px;
            font-weight: 700;
            letter-spacing: -0.5px;
            text-decoration: none;
        }
        .brand-logo span {
            color: var(--gold);
        }
        .nav-link {
            color: var(--text-mid) !important;
            font-weight: 400;
            font-size: 15px;
            letter-spacing: 0.3px;
            padding: 6px 16px !important;
            position: relative;
            transition: color 0.2s;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0; left: 16px;
            width: 0; height: 1.5px;
            background: var(--gold);
            transition: width 0.3s;
        }
        .nav-link:hover { color: var(--forest) !important; }
        .nav-link:hover::after { width: calc(100% - 32px); }
 
        .btn-nav {
            background: var(--forest);
            color: var(--cream) !important;
            border-radius: 40px;
            padding: 8px 22px !important;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.3px;
            transition: background 0.3s, transform 0.2s;
            border: none;
            text-decoration: none;
        }
        .btn-nav:hover {
            background: var(--forest-light);
            transform: translateY(-1px);
        }
 
       
        .hero-section {
            min-height: 88vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: var(--cream);
        }
 
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: -120px; right: -100px;
            width: 600px; height: 600px;
            border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
            background: radial-gradient(ellipse at center, rgba(61,122,94,0.18), transparent 70%);
            animation: morph 10s ease-in-out infinite alternate;
        }
        .hero-section::after {
            content: '';
            position: absolute;
            bottom: -80px; left: -80px;
            width: 450px; height: 450px;
            border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%;
            background: radial-gradient(ellipse at center, rgba(200,169,110,0.2), transparent 70%);
            animation: morph 13s ease-in-out infinite alternate-reverse;
        }
        @keyframes morph {
            0%   { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
            100% { border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; }
        }
 
       
        .hero-dots {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(27,58,45,0.08) 1px, transparent 1px);
            background-size: 36px 36px;
            pointer-events: none;
        }
 
        .hero-content {
            position: relative;
            z-index: 2;
        }
        .hero-badge {
            display: inline-block;
            background: rgba(200,169,110,0.15);
            border: 1px solid rgba(200,169,110,0.4);
            color: var(--gold);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 6px 18px;
            border-radius: 40px;
            margin-bottom: 24px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.7s 0.2s forwards;
        }
        .main-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(42px, 6vw, 76px);
            font-weight: 700;
            line-height: 1.1;
            color: var(--forest);
            margin-bottom: 24px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s 0.35s forwards;
        }
        .main-title em {
            font-style: italic;
            color: var(--gold);
        }
        .hero-text {
            font-size: 18px;
            font-weight: 300;
            color: var(--text-mid);
            max-width: 480px;
            line-height: 1.7;
            margin-bottom: 40px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s 0.5s forwards;
        }
        .hero-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s 0.65s forwards;
        }
        .btn-primary-custom {
            background: var(--forest);
            color: var(--cream);
            border-radius: 50px;
            padding: 14px 34px;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 0.3px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
            border: none;
        }
        .btn-primary-custom:hover {
            background: var(--forest-light);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(27,58,45,0.25);
            color: var(--cream);
        }
        .btn-secondary-custom {
            background: transparent;
            color: var(--forest);
            border-radius: 50px;
            padding: 13px 30px;
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1.5px solid rgba(27,58,45,0.3);
            transition: border-color 0.3s, background 0.3s, transform 0.2s;
        }
        .btn-secondary-custom:hover {
            border-color: var(--forest);
            background: rgba(27,58,45,0.05);
            transform: translateY(-2px);
            color: var(--forest);
        }
 
        
        .hero-stats {
            display: flex;
            gap: 40px;
            margin-top: 60px;
            padding-top: 40px;
            border-top: 1px solid rgba(27,58,45,0.12);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s 0.85s forwards;
        }
        
        .stat-num {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            font-weight: 700;
            color: var(--forest);
            display: block;
        }
        .stat-label {
            font-size: 13px;
            color: var(--text-soft);
            font-weight: 400;
        }
 
        
        .hero-image-panel {
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: translateX(40px);
            animation: fadeLeft 0.9s 0.5s forwards;
        }
        .hero-img-frame {
            border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
            overflow: hidden;
            width: 100%;
            aspect-ratio: 4/5;
            max-width: 420px;
           
            margin-left: auto;
            box-shadow: var(--shadow);
            position: relative;
        }
        .hero-img-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            mix-blend-mode: multiply;
            opacity: 0.85;
        }
        .hero-img-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.5);
            font-size: 80px;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        .float-icon {
            width: 40px; height: 40px;
            background: rgba(200,169,110,0.15);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .float-text-main {
            font-weight: 600;
            font-size: 14px;
            color: var(--forest);
            display: block;
        }
        .float-text-sub {
            font-size: 11px;
            color: var(--text-soft);
            display: block;
        }
 
        @keyframes fadeUp {
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeLeft {
            to { opacity: 1; transform: translateX(0); }
        }
 
       
        .vets-section {
            padding: 100px 0;
            background: var(--warm-white);
            position: relative;
        }
        .vets-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(200,169,110,0.4), transparent);
        }
 
        .section-eyebrow {
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 12px;
        }
        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 700;
            color: var(--forest);
            line-height: 1.2;
        }
        .section-title em {
            font-style: italic;
            color: var(--gold);
        }
        .section-desc {
            font-size: 16px;
            font-weight: 300;
            color: var(--text-soft);
            max-width: 420px;
            line-height: 1.7;
            margin-top: 16px;
        }
 
      
        .vet-card {
            background: var(--card-bg);
            border: 1px solid rgba(27,58,45,0.08);
            border-radius: 24px;
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(.22,.61,.36,1), box-shadow 0.4s;
            position: relative;
        }
        .vet-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(27,58,45,0.14);
        }
        .vet-image-wrap {
            position: relative;
            overflow: hidden;
            height: 280px;
        }
        .vet-image-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(27,58,45,0.5) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.4s;
        }
        .vet-card:hover .vet-image-wrap::after {
            opacity: 1;
        }
        .vet-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
        }
        .vet-card:hover .vet-image {
            transform: scale(1.06);
        }
        .vet-tag {
            position: absolute;
            top: 16px; left: 16px;
            background: rgba(200,169,110,0.9);
            color: white;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 5px 12px;
            border-radius: 20px;
            z-index: 2;
            backdrop-filter: blur(8px);
        }
        .vet-card-body {
            padding: 24px;
        }
        .vet-name {
            font-family: 'Playfair Display', serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--forest);
            margin-bottom: 4px;
        }
        .vet-specialty {
            font-size: 13px;
            font-weight: 400;
            color: var(--text-soft);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .vet-specialty::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 1.5px;
            background: var(--gold);
        }
        .btn-vet {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--cream);
            border: 1.5px solid rgba(27,58,45,0.12);
            color: var(--forest);
            border-radius: 12px;
            padding: 12px 18px;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.3s, border-color 0.3s, color 0.3s;
        }
        .btn-vet:hover {
            background: var(--forest);
            border-color: var(--forest);
            color: var(--cream);
        }
        .btn-vet svg {
            transition: transform 0.3s;
        }
        .btn-vet:hover svg {
            transform: translateX(4px);
        }
 
        
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal.visible {
            opacity: 1;
            transform: none;
        }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
 
        
        .footer-strip {
            background: var(--forest);
            color: rgba(247,242,234,0.6);
            padding: 24px 0;
            font-size: 13px;
            text-align: center;
        }
        .footer-strip a {
            color: var(--gold-light);
            text-decoration: none;
        }
 
       
        @media (max-width: 768px) {
            .hero-image-panel { display: none; }
            .hero-stats { gap: 24px; flex-wrap: wrap; }
            .hero-float-card { display: none; }
        }

       
        :root { --forest:#1b3a2d; --forest-mid:#2a5240; --forest-light:#3d7a5e; --cream:#f7f2ea; --warm-white:#fdfaf5; --gold:#c8a96e; --gold-light:#e8d5a8; --text-dark:#1a2318; --text-mid:#4a5c4e; --text-soft:#7a8c7e; }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--text-dark); min-height:100vh; display:flex; flex-direction:column; }

        .custom-navbar { background:rgba(253,250,245,0.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(200,169,110,0.2); padding:18px 0; }
        .brand-logo { font-family:'Playfair Display',serif; color:var(--forest)!important; font-size:26px; font-weight:700; text-decoration:none; }
        .brand-logo span { color:var(--gold); }
        .nav-link { color:var(--text-mid)!important; font-size:15px; padding:6px 16px!important; position:relative; transition:color 0.2s; }
        .nav-link::after { content:''; position:absolute; bottom:0; left:16px; width:0; height:1.5px; background:var(--gold); transition:width 0.3s; }
        .nav-link:hover { color:var(--forest)!important; }
        .nav-link:hover::after { width:calc(100% - 32px); }
        .btn-nav { background:var(--forest); color:var(--cream)!important; border-radius:40px; padding:8px 22px!important; font-size:14px; font-weight:500; text-decoration:none; }

        .auth-wrapper { flex:1; display:flex; align-items:center; justify-content:center; padding:60px 16px; position:relative; overflow:hidden; }
        .auth-wrapper::before { content:''; position:absolute; top:-100px; left:-100px; width:500px; height:500px; border-radius:50%; background:radial-gradient(ellipse,rgba(27,58,45,0.07),transparent 70%); pointer-events:none; }
        .auth-wrapper::after { content:''; position:absolute; bottom:-80px; right:-80px; width:400px; height:400px; border-radius:50%; background:radial-gradient(ellipse,rgba(200,169,110,0.1),transparent 70%); pointer-events:none; }

        .auth-card { background:white; border-radius:28px; box-shadow:0 30px 80px rgba(27,58,45,0.12); width:100%; max-width:460px; padding:48px 44px; position:relative; z-index:2; animation:fadeUp 0.7s ease forwards; opacity:0; transform:translateY(24px); }
        @keyframes fadeUp { to { opacity:1; transform:none; } }

        .auth-logo { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--forest); margin-bottom:4px; }
        .auth-logo span { color:var(--gold); }
        .auth-greeting { font-size:13px; color:var(--text-soft); margin-bottom:32px; display:flex; align-items:center; gap:8px; }
        .auth-greeting svg { color:var(--gold); flex-shrink:0; }

        .auth-tabs { display:flex; background:var(--cream); border-radius:14px; padding:4px; margin-bottom:32px; }
        .auth-tab { flex:1; text-align:center; padding:10px; font-size:14px; font-weight:500; border-radius:10px; cursor:pointer; transition:all 0.3s; color:var(--text-soft); user-select:none; }
        .auth-tab.active { background:white; color:var(--forest); box-shadow:0 2px 12px rgba(27,58,45,0.1); }

        .form-panel { display:none; }
        .form-panel.active { display:block; }

        .form-group { margin-bottom:18px; }
        .form-label { font-size:13px; font-weight:500; color:var(--text-mid); margin-bottom:6px; display:block; }
        .form-control-custom { width:100%; background:var(--warm-white); border:1.5px solid rgba(27,58,45,0.12); border-radius:12px; padding:12px 16px; font-size:14px; font-family:'DM Sans',sans-serif; color:var(--text-dark); outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
        .form-control-custom:focus { border-color:var(--forest-light); box-shadow:0 0 0 3px rgba(61,122,94,0.12); }
        .form-control-custom::placeholder { color:var(--text-soft); }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

        .forgot-link { font-size:12px; color:var(--gold); text-decoration:none; float:right; margin-top:-14px; margin-bottom:14px; display:block; }
        .forgot-link:hover { color:var(--forest); }

        .btn-auth { width:100%; background:var(--forest); color:var(--cream); border:none; border-radius:12px; padding:14px; font-size:15px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background 0.3s,transform 0.2s; margin-top:8px; }
        .btn-auth:hover { background:var(--forest-light); transform:translateY(-1px); }
        .btn-auth.outlined { background:var(--cream); color:var(--forest); border:1.5px solid rgba(27,58,45,0.15); display:flex; align-items:center; justify-content:center; gap:10px; }
        .btn-auth.outlined:hover { background:rgba(27,58,45,0.05); transform:translateY(-1px); }

        .divider { display:flex; align-items:center; gap:12px; margin:20px 0; font-size:12px; color:var(--text-soft); }
        .divider::before, .divider::after { content:''; flex:1; height:1px; background:rgba(27,58,45,0.1); }

        .terms-text { font-size:12px; color:var(--text-soft); text-align:center; margin-top:16px; line-height:1.6; }
        .terms-text a { color:var(--gold); text-decoration:none; }

        .footer-strip { background:var(--forest); color:rgba(247,242,234,0.6); padding:20px 0; font-size:13px; text-align:center; }
        

          :root { --forest:#1b3a2d; --forest-mid:#2a5240; --forest-light:#3d7a5e; --cream:#f7f2ea; --warm-white:#fdfaf5; --gold:#c8a96e; --gold-light:#e8d5a8; --text-dark:#1a2318; --text-mid:#4a5c4e; --text-soft:#7a8c7e; --shadow:0 20px 60px rgba(27,58,45,0.12); }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'DM Sans',sans-serif; background:var(--warm-white); color:var(--text-dark); overflow-x:hidden; }

        .custom-navbar { background:rgba(253,250,245,0.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(200,169,110,0.2); padding:18px 0; position:sticky; top:0; z-index:100; transition:box-shadow 0.3s; }
        .custom-navbar.scrolled { box-shadow:0 4px 30px rgba(27,58,45,0.1); }
        .brand-logo { font-family:'Playfair Display',serif; color:var(--forest)!important; font-size:26px; font-weight:700; text-decoration:none; }
        .brand-logo span { color:var(--gold); }
        .nav-link { color:var(--text-mid)!important; font-size:15px; padding:6px 16px!important; position:relative; transition:color 0.2s; }
        .nav-link::after { content:''; position:absolute; bottom:0; left:16px; width:0; height:1.5px; background:var(--gold); transition:width 0.3s; }
        .nav-link:hover, .nav-link.active { color:var(--forest)!important; }
        .nav-link.active::after, .nav-link:hover::after { width:calc(100% - 32px); }
        .btn-nav { background:var(--forest); color:var(--cream)!important; border-radius:40px; padding:8px 22px!important; font-size:14px; font-weight:500; transition:background 0.3s,transform 0.2s; text-decoration:none; }
        .btn-nav:hover { background:var(--forest-light); transform:translateY(-1px); }

        .page-header { background:var(--cream); padding:80px 0 60px; position:relative; overflow:hidden; }
        .page-header::before { content:''; position:absolute; top:-60px; right:-80px; width:400px; height:400px; border-radius:50%; background:radial-gradient(ellipse,rgba(200,169,110,0.15),transparent 70%); pointer-events:none; }
        .page-header-inner { position:relative; z-index:2; }
        .breadcrumb-nav { font-size:13px; color:var(--text-soft); margin-bottom:16px; }
        .breadcrumb-nav a { color:var(--gold); text-decoration:none; }
        .page-title { font-family:'Playfair Display',serif; font-size:clamp(38px,5vw,60px); font-weight:700; color:var(--forest); line-height:1.1; }
        .page-title em { font-style:italic; color:var(--gold); }
        .page-subtitle { font-size:17px; font-weight:300; color:var(--text-mid); max-width:500px; line-height:1.7; margin-top:14px; }

        .services-section { padding:60px 0 80px; }

        .service-card { background:white; border:1px solid rgba(27,58,45,0.08); border-radius:24px; padding:36px 30px; height:100%; transition:transform 0.4s cubic-bezier(.22,.61,.36,1),box-shadow 0.4s,border-color 0.3s; position:relative; overflow:hidden; }
        .service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.4s; }
        .service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow); border-color:rgba(200,169,110,0.3); }
        .service-card:hover::before { transform:scaleX(1); }

        .service-icon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:var(--forest); }
        .service-name { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--forest); margin-bottom:10px; }
        .service-desc { font-size:14px; font-weight:300; color:var(--text-soft); line-height:1.7; margin-bottom:24px; }
        .service-features { list-style:none; margin-bottom:28px; }
        .service-features li { font-size:13px; color:var(--text-mid); padding:5px 0; display:flex; align-items:center; gap:8px; }
        .service-features li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }
        .service-price { font-family:'Playfair Display',serif; font-size:13px; color:var(--text-soft); margin-bottom:16px; }
        .service-price strong { font-size:24px; color:var(--forest); font-weight:700; }
        .btn-service { display:flex; align-items:center; justify-content:space-between; background:var(--cream); border:1.5px solid rgba(27,58,45,0.12); color:var(--forest); border-radius:12px; padding:11px 16px; font-size:13px; font-weight:500; text-decoration:none; transition:all 0.3s; }
        .btn-service:hover { background:var(--forest); border-color:var(--forest); color:var(--cream); }

        .cta-banner { background:var(--forest); border-radius:32px; padding:60px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:80px; position:relative; overflow:hidden; }
        .cta-banner::before { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; background:rgba(200,169,110,0.12); pointer-events:none; }
        .cta-text { position:relative; z-index:2; }
        .cta-eyebrow { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:10px; }
        .cta-title { font-family:'Playfair Display',serif; font-size:36px; font-weight:700; color:var(--cream); line-height:1.2; }
        .cta-sub { font-size:15px; font-weight:300; color:rgba(247,242,234,0.65); margin-top:10px; }
        .btn-cta { background:var(--gold); color:white; border-radius:50px; padding:14px 32px; font-size:15px; font-weight:500; text-decoration:none; transition:all 0.3s; white-space:nowrap; position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; }
        .btn-cta:hover { background:#b8945a; color:white; transform:translateY(-2px); }

        .reveal { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
        .reveal.visible { opacity:1; transform:none; }
        .reveal-delay-1 { transition-delay:0.08s; }
        .reveal-delay-2 { transition-delay:0.16s; }
        .reveal-delay-3 { transition-delay:0.24s; }
        .reveal-delay-4 { transition-delay:0.32s; }
        .reveal-delay-5 { transition-delay:0.40s; }

        .footer-strip { background:var(--forest); color:rgba(247,242,234,0.6); padding:24px 0; font-size:13px; text-align:center; }
        

    
        :root { --forest:#1b3a2d; --forest-mid:#2a5240; --forest-light:#3d7a5e; --cream:#f7f2ea; --warm-white:#fdfaf5; --gold:#c8a96e; --gold-light:#e8d5a8; --text-dark:#1a2318; --text-mid:#4a5c4e; --text-soft:#7a8c7e; --shadow:0 20px 60px rgba(27,58,45,0.12); }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'DM Sans',sans-serif; background:var(--warm-white); color:var(--text-dark); overflow-x:hidden; }

        .custom-navbar { background:rgba(253,250,245,0.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(200,169,110,0.2); padding:18px 0; position:sticky; top:0; z-index:100; transition:box-shadow 0.3s; }
        .custom-navbar.scrolled { box-shadow:0 4px 30px rgba(27,58,45,0.1); }
        .brand-logo { font-family:'Playfair Display',serif; color:var(--forest)!important; font-size:26px; font-weight:700; text-decoration:none; }
        .brand-logo span { color:var(--gold); }
        .nav-link { color:var(--text-mid)!important; font-size:15px; padding:6px 16px!important; position:relative; transition:color 0.2s; }
        .nav-link::after { content:''; position:absolute; bottom:0; left:16px; width:0; height:1.5px; background:var(--gold); transition:width 0.3s; }
        .nav-link:hover, .nav-link.active { color:var(--forest)!important; }
        .nav-link.active::after, .nav-link:hover::after { width:calc(100% - 32px); }
        .btn-nav { background:var(--forest); color:var(--cream)!important; border-radius:40px; padding:8px 22px!important; font-size:14px; font-weight:500; transition:background 0.3s,transform 0.2s; text-decoration:none; }
        .btn-nav:hover { background:var(--forest-light); transform:translateY(-1px); }

        .page-header { background:var(--cream); padding:80px 0 60px; position:relative; overflow:hidden; }
        .page-header::before { content:''; position:absolute; top:-60px; right:-80px; width:400px; height:400px; border-radius:50%; background:radial-gradient(ellipse,rgba(61,122,94,0.12),transparent 70%); pointer-events:none; }
        .page-header-inner { position:relative; z-index:2; }
        .breadcrumb-nav { font-size:13px; color:var(--text-soft); margin-bottom:16px; }
        .breadcrumb-nav a { color:var(--gold); text-decoration:none; }
        .page-title { font-family:'Playfair Display',serif; font-size:clamp(38px,5vw,60px); font-weight:700; color:var(--forest); line-height:1.1; }
        .page-title em { font-style:italic; color:var(--gold); }
        .page-subtitle { font-size:17px; font-weight:300; color:var(--text-mid); max-width:500px; line-height:1.7; margin-top:14px; }

        .filter-bar { padding:40px 0 10px; }
        .filter-btn { background:transparent; border:1.5px solid rgba(27,58,45,0.18); color:var(--text-mid); border-radius:40px; padding:8px 20px; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.25s; font-family:'DM Sans',sans-serif; }
        .filter-btn:hover, .filter-btn.active { background:var(--forest); border-color:var(--forest); color:var(--cream); }

        .vets-grid { padding:20px 0 80px; }

        .vet-card { background:white; border:1px solid rgba(27,58,45,0.08); border-radius:24px; overflow:hidden; transition:transform 0.4s cubic-bezier(.22,.61,.36,1),box-shadow 0.4s; }
        .vet-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(27,58,45,0.13); }
        .vet-image-wrap { position:relative; overflow:hidden; height:260px; background:var(--cream); }
        .vet-image-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(27,58,45,0.45) 0%,transparent 55%); opacity:0; transition:opacity 0.4s; }
        .vet-card:hover .vet-image-wrap::after { opacity:1; }
        .vet-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s cubic-bezier(.22,.61,.36,1); }
        .vet-card:hover .vet-img { transform:scale(1.05); }
        .vet-tag { position:absolute; top:14px; left:14px; background:rgba(200,169,110,0.92); color:white; font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:20px; z-index:2; }
        .vet-avail { position:absolute; top:14px; right:14px; background:rgba(27,58,45,0.85); color:var(--gold-light); font-size:11px; font-weight:500; padding:4px 12px; border-radius:20px; z-index:2; }

        
        .vet-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
        .vet-img-placeholder svg { opacity:0.35; }

        .vet-body { padding:22px; }
        .vet-name { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--forest); margin-bottom:4px; }
        .vet-spec { font-size:13px; color:var(--text-soft); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
        .vet-spec::before { content:''; display:inline-block; width:16px; height:1.5px; background:var(--gold); flex-shrink:0; }
        .vet-exp { font-size:12px; color:var(--text-soft); margin-bottom:18px; }
        .vet-actions { display:flex; gap:8px; }
        .btn-profile { flex:1; display:flex; align-items:center; justify-content:space-between; background:var(--cream); border:1.5px solid rgba(27,58,45,0.12); color:var(--forest); border-radius:12px; padding:10px 16px; font-size:13px; font-weight:500; text-decoration:none; transition:all 0.3s; }
        .btn-profile:hover { background:var(--forest); border-color:var(--forest); color:var(--cream); }
        .btn-book { background:var(--gold); border:none; color:white; border-radius:12px; padding:10px 16px; font-size:13px; font-weight:500; text-decoration:none; transition:all 0.3s; white-space:nowrap; }
        .btn-book:hover { background:#b8945a; color:white; }

        .reveal { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
        .reveal.visible { opacity:1; transform:none; }
        .reveal-delay-1 { transition-delay:0.08s; }
        .reveal-delay-2 { transition-delay:0.16s; }
        .reveal-delay-3 { transition-delay:0.24s; }
        .reveal-delay-4 { transition-delay:0.32s; }
        .reveal-delay-5 { transition-delay:0.40s; }

        .footer-strip { background:var(--forest); color:rgba(247,242,234,0.6); padding:24px 0; font-size:13px; text-align:center; }
    
        :root { --forest:#1b3a2d; --forest-mid:#2a5240; --forest-light:#3d7a5e; --cream:#f7f2ea; --warm-white:#fdfaf5; --gold:#c8a96e; --gold-light:#e8d5a8; --text-dark:#1a2318; --text-mid:#4a5c4e; --text-soft:#7a8c7e; }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'DM Sans',sans-serif; background:var(--warm-white); color:var(--text-dark); }

        .custom-navbar { background:rgba(253,250,245,0.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(200,169,110,0.2); padding:18px 0; position:sticky; top:0; z-index:100; }
        .brand-logo { font-family:'Playfair Display',serif; color:var(--forest)!important; font-size:26px; font-weight:700; text-decoration:none; }
        .brand-logo span { color:var(--gold); }
        .nav-link { color:var(--text-mid)!important; font-size:15px; padding:6px 16px!important; position:relative; transition:color 0.2s; }
        .nav-link::after { content:''; position:absolute; bottom:0; left:16px; width:0; height:1.5px; background:var(--gold); transition:width 0.3s; }
        .nav-link:hover { color:var(--forest)!important; }
        .nav-link:hover::after { width:calc(100% - 32px); }
        .btn-nav { background:var(--forest); color:var(--cream)!important; border-radius:40px; padding:8px 22px!important; font-size:14px; font-weight:500; text-decoration:none; }

        .page-header { background:var(--cream); padding:60px 0 50px; position:relative; overflow:hidden; }
        .page-header::before { content:''; position:absolute; top:-60px; right:-80px; width:350px; height:350px; border-radius:50%; background:radial-gradient(ellipse,rgba(61,122,94,0.1),transparent 70%); pointer-events:none; }
        .page-header-inner { position:relative; z-index:2; }
        .breadcrumb-nav { font-size:13px; color:var(--text-soft); margin-bottom:16px; }
        .breadcrumb-nav a { color:var(--gold); text-decoration:none; }
        .page-title { font-family:'Playfair Display',serif; font-size:clamp(34px,5vw,52px); font-weight:700; color:var(--forest); }
        .page-title em { font-style:italic; color:var(--gold); }
        .page-subtitle { font-size:16px; font-weight:300; color:var(--text-mid); max-width:460px; line-height:1.7; margin-top:10px; }

        .progress-wrap { padding:40px 0 10px; }
        .steps { display:flex; align-items:center; max-width:600px; }
        .step { display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; position:relative; }
        .step:not(:last-child)::after { content:''; position:absolute; top:20px; left:50%; width:100%; height:2px; background:rgba(27,58,45,0.1); z-index:0; transition:background 0.4s; }
        .step.completed:not(:last-child)::after { background:var(--forest); }
        .step-dot { width:40px; height:40px; border-radius:50%; border:2px solid rgba(27,58,45,0.15); background:white; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--text-soft); position:relative; z-index:1; transition:all 0.3s; }
        .step.active .step-dot { background:var(--forest); border-color:var(--forest); color:white; }
        .step.completed .step-dot { background:var(--forest-light); border-color:var(--forest-light); color:white; }
        .step-label { font-size:11px; font-weight:500; color:var(--text-soft); text-align:center; letter-spacing:0.3px; transition:color 0.3s; }
        .step.active .step-label { color:var(--forest); }
        .step.completed .step-label { color:var(--forest-light); }

        .booking-section { padding:30px 0 80px; }
        .booking-card { background:white; border-radius:24px; border:1px solid rgba(27,58,45,0.08); padding:40px; box-shadow:0 10px 40px rgba(27,58,45,0.06); }
        .step-panel { display:none; }
        .step-panel.active { display:block; animation:fadeIn 0.4s ease; }
        @keyframes fadeIn { from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }

        .step-title { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; color:var(--forest); margin-bottom:6px; }
        .step-desc { font-size:14px; color:var(--text-soft); margin-bottom:28px; }

        .option-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
        .option-card { border:1.5px solid rgba(27,58,45,0.12); border-radius:16px; padding:20px 16px; cursor:pointer; transition:all 0.25s; text-align:center; }
        .option-card:hover { border-color:var(--gold); background:rgba(200,169,110,0.05); }
        .option-card.selected { border-color:var(--forest); background:rgba(27,58,45,0.04); }
        .opt-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--forest); }
        .opt-name { font-size:14px; font-weight:500; color:var(--forest); display:block; }
        .opt-price { font-size:12px; color:var(--text-soft); margin-top:4px; display:block; }

        .vet-option { display:flex; align-items:center; gap:16px; border:1.5px solid rgba(27,58,45,0.12); border-radius:16px; padding:16px 20px; cursor:pointer; transition:all 0.25s; margin-bottom:10px; }
        .vet-option:hover { border-color:var(--gold); }
        .vet-option.selected { border-color:var(--forest); background:rgba(27,58,45,0.03); }
        .vet-avatar { width:48px; height:48px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--forest-mid); }
        .vet-opt-name { font-size:15px; font-weight:500; color:var(--forest); }
        .vet-opt-spec { font-size:12px; color:var(--text-soft); }
        .vet-opt-avail { margin-left:auto; font-size:12px; color:var(--forest-light); font-weight:500; white-space:nowrap; }

        .date-grid { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
        .date-chip { border:1.5px solid rgba(27,58,45,0.12); border-radius:10px; padding:10px 16px; cursor:pointer; font-size:13px; font-weight:500; transition:all 0.2s; text-align:center; }
        .date-chip:hover { border-color:var(--gold); color:var(--forest); }
        .date-chip.selected { background:var(--forest); border-color:var(--forest); color:white; }
        .date-chip .day { font-size:11px; color:inherit; opacity:0.7; display:block; }

        .form-group { margin-bottom:16px; }
        .form-label { font-size:13px; font-weight:500; color:var(--text-mid); margin-bottom:6px; display:block; }
        .form-control-custom { width:100%; background:var(--warm-white); border:1.5px solid rgba(27,58,45,0.12); border-radius:12px; padding:12px 16px; font-size:14px; font-family:'DM Sans',sans-serif; color:var(--text-dark); outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
        .form-control-custom:focus { border-color:var(--forest-light); box-shadow:0 0 0 3px rgba(61,122,94,0.12); }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

        .summary-box { background:var(--cream); border-radius:16px; padding:24px; margin-bottom:24px; }
        .summary-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(27,58,45,0.08); }
        .summary-row:last-child { border:none; }
        .summary-key { font-size:13px; color:var(--text-soft); }
        .summary-val { font-size:13px; font-weight:500; color:var(--forest); }

        .confirm-screen { text-align:center; padding:30px 0; }
        .confirm-icon { width:80px; height:80px; border-radius:50%; background:rgba(61,122,94,0.1); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; color:var(--forest-light); animation:pop 0.5s cubic-bezier(.22,.61,.36,1); }
        @keyframes pop { from{ transform:scale(0.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
        .confirm-title { font-family:'Playfair Display',serif; font-size:28px; color:var(--forest); margin-bottom:10px; }
        .confirm-sub { font-size:15px; color:var(--text-soft); line-height:1.7; }

        .booking-actions { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
        .btn-next { background:var(--forest); color:var(--cream); border:none; border-radius:12px; padding:13px 28px; font-size:15px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:8px; }
        .btn-next:hover { background:var(--forest-light); transform:translateY(-1px); }
        .btn-back { background:transparent; color:var(--text-mid); border:1.5px solid rgba(27,58,45,0.15); border-radius:12px; padding:12px 24px; font-size:15px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.3s; }
        .btn-back:hover { border-color:var(--forest); color:var(--forest); }

        .booking-sidebar { background:var(--forest); border-radius:24px; padding:32px; position:sticky; top:100px; color:var(--cream); }
        .sidebar-title { font-family:'Playfair Display',serif; font-size:20px; margin-bottom:20px; }
        .sidebar-item { display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; }
        .sidebar-icon { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold-light); margin-top:2px; }
        .sidebar-label { font-size:12px; color:rgba(247,242,234,0.5); margin-bottom:2px; }
        .sidebar-value { font-size:14px; color:var(--cream); font-weight:500; }
        .sidebar-divider { height:1px; background:rgba(247,242,234,0.1); margin:20px 0; }
        .sidebar-total-label { font-size:13px; color:rgba(247,242,234,0.5); margin-bottom:4px; }
        .sidebar-total { font-family:'Playfair Display',serif; font-size:28px; color:var(--gold-light); }

        .sidebar-note { margin-top:24px; padding:16px; background:rgba(255,255,255,0.06); border-radius:12px; display:flex; gap:10px; align-items:flex-start; }
        .sidebar-note svg { color:var(--gold-light); flex-shrink:0; margin-top:1px; }
        .sidebar-note p { font-size:12px; color:rgba(247,242,234,0.5); line-height:1.6; }

        .footer-strip { background:var(--forest); color:rgba(247,242,234,0.6); padding:24px 0; font-size:13px; text-align:center; }