:root { --bg:#eef7f2; --panel:rgba(255,255,255,.88); --line:rgba(66,122,93,.12); --text:#1f3429; --muted:#60786a; --deep:#2e6d50; --accent:#6ab78f; --shadow:0 24px 60px rgba(44,95,68,.10); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:"Manrope",sans-serif; color:var(--text); background:radial-gradient(circle at top left, rgba(106,183,143,.18), transparent 24%), linear-gradient(180deg,#f9fdf9 0%,#edf6f0 100%); } a { color:inherit; } .shell { width:min(1400px, calc(100% - 32px)); margin:18px auto 46px; } .topbar,.hero-copy,.hero-panel,.service-card,.guide-card,.contact-card,.vet-stat-card,.care-path { border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); } .topbar { position:sticky; top:12px; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; border-radius:24px; backdrop-filter:blur(16px); } .brand { display:inline-flex; align-items:center; gap:14px; text-decoration:none; } .brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,var(--deep),var(--accent)); color:#fff; font-weight:800; } .brand-copy { display:flex; flex-direction:column; } .brand-copy strong { font-size:1rem; text-transform:uppercase; letter-spacing:.04em; } .brand-copy span,.nav a,.hero-text,.service-card p,.contact-card p,.guide-card p,.vet-stat-card p,.care-path p { color:var(--muted); } .nav { display:flex; flex-wrap:wrap; gap:18px; } .nav a,.btn,.header-cta { text-decoration:none; } .header-cta,.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:999px; font-weight:700; } .header-cta,.btn-primary { background:linear-gradient(135deg,var(--deep),var(--accent)); color:#fff; } .btn-secondary { background:rgba(255,255,255,.68); border:1px solid var(--line); color:var(--text); } .hero { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; padding:42px 0 24px; align-items:start; } .hero-copy,.hero-panel { border-radius:34px; padding:38px; } .hero-panel { display:grid; gap:16px; } .eyebrow { margin:0 0 14px; color:var(--deep); text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:800; } .hero-copy h1,.section-head h2,.contact-card h2,.vet-stat-card h3 { margin:0; font-family:"Fraunces",serif; line-height:.98; } .hero-copy h1 { font-size:clamp(3rem,5.8vw,5.4rem); } .hero-text { margin:18px 0 24px; line-height:1.75; max-width:60ch; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; } .hero-metrics,.service-grid,.guide-grid,.care-path-grid { display:grid; gap:18px; } .hero-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:28px; } .hero-metrics div { padding:16px; border-radius:20px; background:rgba(236,247,241,.84); } .vet-stat-card { padding:22px; border-radius:24px; } .vet-stat-card h3 { font-size:1.8rem; } .care-path { padding:18px 20px; border-radius:22px; } .care-path-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:18px; } .section { padding:26px 0; } .page-main { padding:34px 0 20px; } .page-hero { padding:20px 0 14px; max-width:860px; } .page-hero h1 { margin:0; font-family:"Fraunces",serif; font-size:clamp(2.8rem,5vw,4.8rem); line-height:.97; } .page-hero p:last-child { color:var(--muted); line-height:1.75; margin-top:16px; } .service-grid,.guide-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .service-card,.guide-card,.contact-card { border-radius:28px; padding:24px; } .featured { background:linear-gradient(180deg, rgba(106,183,143,.14), rgba(255,255,255,.92)); } .service-card h3,.guide-card h3 { margin:0 0 10px; font-size:1.3rem; } .contact-card { display:flex; align-items:center; justify-content:space-between; gap:20px; } @media (max-width:1100px) { .hero,.service-grid,.guide-grid,.contact-card,.care-path-grid { grid-template-columns:1fr; display:grid; } } @media (max-width:780px) { .shell { width:min(100% - 20px,100%); margin:10px auto 32px; } .topbar { top:8px; border-radius:18px; padding:14px; } .nav { display:none; } .hero-copy,.hero-panel,.service-card,.guide-card,.contact-card { border-radius:22px; padding:20px; } .hero-metrics { grid-template-columns:1fr; } }