:root{--ink:#153f36;--lime:#d7ff62;--cream:#fff9ef;--coral:#ff6f4f;--paper:#f3efe6;--white:#fff;--shadow:0 24px 60px rgba(21,63,54,.15)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"IBM Plex Sans Thai",sans-serif;font-size:18px;line-height:1.65}a{color:inherit}img{width:100%;height:100%;display:block;object-fit:cover}.topbar{height:78px;padding:0 clamp(22px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(21,63,54,.14);position:relative;z-index:10}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;font-weight:700}.brand-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;font-family:"Pridi",serif;font-size:14px}.nav-cta{text-decoration:none;font-weight:700;border-bottom:2px solid var(--ink)}.nav-cta span{margin-left:8px}.hero{min-height:720px;display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(30px,5vw,88px);padding:clamp(54px,7vw,108px) clamp(22px,5vw,76px) 90px;overflow:hidden}.hero-copy{align-self:center;max-width:650px}.eyebrow{font-weight:700;letter-spacing:.15em;font-size:.8rem;margin:0 0 20px}.hero h1,.story h2,.visit h2{font-family:"Pridi",serif;font-weight:600;line-height:1.05;letter-spacing:-.035em;margin:0}.hero h1{font-size:clamp(3.3rem,6.2vw,7.4rem)}.lead{max-width:600px;font-size:clamp(1.1rem,1.45vw,1.4rem);margin:30px 0}.actions{display:flex;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:13px 24px;border-radius:100px;text-decoration:none;font-weight:700;transition:.2s transform,.2s box-shadow}.btn:hover{transform:translateY(-3px)}.primary{background:var(--ink);color:#fff;box-shadow:0 12px 28px rgba(21,63,54,.24)}.secondary{border:1.5px solid var(--ink)}.trust{margin-top:34px;display:flex;align-items:center;gap:10px}.trust strong{font-size:1.4rem}.trust span{color:#eea900;letter-spacing:.08em}.trust small{color:#517269}.hero-gallery{position:relative;min-height:610px}.photo{position:absolute;margin:0;overflow:hidden;border-radius:32px;box-shadow:var(--shadow);background:#ddd}.photo.main{width:58%;height:78%;left:0;top:8%;transform:rotate(-3deg);z-index:2}.photo.top{width:43%;height:46%;right:2%;top:0;transform:rotate(4deg)}.photo.bottom{width:43%;height:45%;right:0;bottom:0;transform:rotate(-2deg);z-index:3}.float-note{position:absolute;z-index:4;left:47%;top:43%;width:145px;height:145px;border-radius:50%;background:var(--lime);display:grid;place-items:center;text-align:center;font-weight:700;line-height:1.25;transform:rotate(7deg);box-shadow:0 14px 34px rgba(21,63,54,.17)}.promise{background:var(--ink);color:#fff;display:grid;grid-template-columns:repeat(3,1fr);padding:65px clamp(22px,5vw,76px);gap:42px}.promise>div{border-top:1px solid rgba(255,255,255,.35);padding-top:24px}.promise span{color:var(--lime);font-weight:700}.promise h2{font-size:1.6rem;margin:12px 0 8px}.promise p{margin:0;color:#d8e3df}.story{padding:120px clamp(22px,7vw,130px);display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}.story h2,.visit h2{font-size:clamp(3rem,5vw,6rem)}.story-text{font-size:1.25rem;padding-top:38px}.story-text a{display:inline-flex;gap:20px;margin-top:24px;text-decoration:none;font-weight:700;border-bottom:2px solid var(--coral)}.pet-wall{display:grid;grid-template-columns:repeat(6,1fr);height:420px;gap:8px;padding:0 8px}.pet-wall img{filter:saturate(.92);transition:.25s transform,.25s filter}.pet-wall img:nth-child(even){transform:translateY(28px)}.pet-wall img:hover{filter:saturate(1.15);transform:scale(1.02)}.pet-wall img:nth-child(even):hover{transform:translateY(28px) scale(1.02)}.visit{margin-top:110px;background:var(--coral);padding:90px clamp(22px,7vw,130px);display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.visit-card{background:var(--cream);padding:clamp(28px,4vw,56px);border-radius:32px;box-shadow:var(--shadow);font-size:1.2rem}.visit-card p{margin-top:0}.facebook{width:100%;background:#1769e0;color:#fff;margin:15px 0}.visit-card small{display:block;color:#58716c;text-align:center}footer{padding:28px clamp(22px,5vw,76px);display:flex;justify-content:space-between;gap:20px;font-size:.9rem;font-weight:600}
@media(max-width:900px){body{font-size:16px}.topbar{height:68px}.brand-mark{width:45px;height:45px}.nav-cta{font-size:.86rem}.hero{grid-template-columns:1fr;padding-top:58px}.hero-gallery{min-height:560px}.promise{grid-template-columns:1fr}.story{grid-template-columns:1fr;gap:20px;padding-top:85px;padding-bottom:85px}.story-text{padding-top:0}.pet-wall{grid-template-columns:repeat(3,1fr);height:700px}.pet-wall img:nth-child(even){transform:none}.visit{grid-template-columns:1fr;margin-top:70px}footer{flex-direction:column}}
@media(max-width:560px){.brand>span:last-child{display:none}.hero h1{font-size:3.25rem}.lead{font-size:1.08rem}.actions{display:grid}.hero-gallery{min-height:445px}.photo{border-radius:22px}.photo.main{height:72%;width:61%}.photo.top,.photo.bottom{width:44%;height:43%}.float-note{width:105px;height:105px;font-size:.86rem;left:45%;top:42%}.trust{flex-wrap:wrap}.pet-wall{height:580px}.visit{padding-top:68px;padding-bottom:68px}.visit-card{border-radius:24px}footer{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.pet-wall img{transition:none}}