@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
 --green:#278267;--green2:#63b8a4;--green-dark:#0f5c48;--mint:#dff1e9;
 --cream:#fffdf8;--cream2:#f8f5ed;--orange:#f26a42;--yellow:#f6c85f;
 --ink:#18352b;--muted:#63716b;--line:#e8e3d8;--shadow:0 10px 28px rgba(29,67,53,.08)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#f3f0e9;color:var(--ink);font-family:"Plus Jakarta Sans",Arial,sans-serif}
a{text-decoration:none;color:inherit}
.site{width:min(1180px,calc(100% - 24px));margin:12px auto;background:var(--cream);border:1px solid #e6e1d7;border-radius:18px;overflow:hidden;box-shadow:0 12px 50px rgba(30,55,43,.08)}
.nav{height:72px;padding:0 30px;display:flex;align-items:center;gap:28px;background:rgba(255,253,248,.98);border-bottom:1px solid #eee9df;position:sticky;top:0;z-index:30}
.logo{font-family:Georgia,serif;font-style:italic;font-size:25px;font-weight:700;color:#17705a;line-height:.75;white-space:nowrap}.logo small{display:block;font:700 6.5px/1.2 "Plus Jakarta Sans";letter-spacing:1.5px;margin-left:6px;color:#34836f}
.navlinks{margin-left:auto;display:flex;gap:22px;align-items:center;font-size:9px;color:#253a32}.navlinks a{padding:8px 0;border-bottom:2px solid transparent}.navlinks a:hover,.navlinks a.active{color:var(--green);border-bottom-color:var(--green)}
.btn{border:0;background:var(--green);color:#fff;border-radius:7px;padding:10px 16px;font:700 9px "Plus Jakarta Sans";display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap}.btn.outline{background:#fff;color:var(--orange);border:1px solid var(--orange)}.btn.light{background:#fff;color:var(--green)}
.mobile-toggle{display:none;margin-left:auto;border:0;background:none;font-size:24px;color:var(--green)}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:25px;padding:48px 36px 32px;min-height:390px;align-items:center;background:
 radial-gradient(circle at 84% 30%,#edf5ef 0 17%,transparent 17.5%),
 radial-gradient(circle at 76% 90%,#fff0df 0 6%,transparent 6.5%),var(--cream)}
.kicker{display:inline-block;background:#edf6ef;color:#22735b;border-radius:20px;padding:6px 10px;font-size:7px;font-weight:800}
.hero h1{font-size:42px;line-height:1.07;letter-spacing:-1.8px;margin:15px 0 10px;color:var(--green-dark)}.hero h1 span{color:var(--orange)}
.hero p{font-size:10px;line-height:1.8;color:var(--muted);max-width:390px;margin:0}.actions{display:flex;gap:9px;margin-top:18px}
.hero-art{position:relative;height:290px;display:flex;justify-content:center;align-items:center}.hero-art:before{content:"";position:absolute;width:300px;height:270px;border-radius:50%;background:#e7f1ed}.hero-art img.main-img{width:92%;max-height:290px;object-fit:contain;position:relative;z-index:2;mix-blend-mode:multiply}.decor{position:absolute;z-index:3}.heart{width:34px;right:2%;top:5%}.paw{width:42px;left:0;bottom:12%}
.trust{margin:0 36px 25px;background:#fff;border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow);overflow:hidden}.trust-item{padding:16px 14px;display:flex;gap:10px;border-right:1px solid var(--line);align-items:center}.trust-item:last-child{border-right:0}.trust-icon{width:27px;height:27px;border-radius:50%;background:#eaf5ef;display:grid;place-items:center;color:var(--green);font-size:14px;flex:0 0 auto}.trust b{display:block;font-size:8px;margin-bottom:4px}.trust span{display:block;font-size:7px;color:var(--muted);line-height:1.45}
.section{padding:26px 36px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.section-title{font-size:17px;margin:0 0 4px;color:#1b2822}.section-title:after{content:"";display:block;width:32px;height:2px;background:var(--green);margin-top:5px}.section-head p{font-size:8px;color:var(--muted);margin:0;line-height:1.5}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 5px 16px rgba(30,55,43,.06)}.card img{width:100%;height:112px;object-fit:cover;display:block}.card-body{padding:11px}.card h3{font-size:9px;margin:0 0 5px}.card p{font-size:7px;color:var(--muted);line-height:1.55;min-height:32px;margin:0 0 8px}.link{font-size:7px;color:var(--green);font-weight:800}
.promo{margin:4px 36px 20px;border-radius:11px;min-height:92px;background:linear-gradient(90deg,#9ed9c6,#76bdaa);display:flex;align-items:center;justify-content:space-between;padding:14px 22px;overflow:hidden;color:#fff}.promo h2{font-size:16px;margin:0 0 3px}.promo p{font-size:8px;margin:0 0 9px}.promo img{width:205px;height:100px;object-fit:contain;align-self:flex-end;margin-right:10px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.feature{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px}.feature .ico{width:30px;height:30px;border-radius:50%;background:#eff7f1;display:grid;place-items:center;font-size:15px;color:var(--green)}.feature h3{font-size:8px;margin:8px 0 4px}.feature p{font-size:7px;color:var(--muted);line-height:1.55;margin:0}
.footer{background:linear-gradient(180deg,#58b19a,#2c8069);color:#fff;padding:30px 36px 16px;position:relative}.footer:before{content:"";display:block;position:absolute;left:0;right:0;top:-18px;height:30px;background:var(--cream);border-radius:0 0 50% 50%/0 0 100% 100%}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px}.footer .logo{color:#fff}.footer .logo small{color:#fff}.footer h4{font-size:9px;margin:0 0 10px}.footer p,.footer a{font-size:7px;color:#e9f6f0;line-height:1.7;display:block;margin:3px 0}.copyright{border-top:1px solid rgba(255,255,255,.25);margin-top:20px;padding-top:10px;text-align:center;font-size:6.5px;color:#e6f5ef}
.page-head{padding:38px 36px 18px;display:flex;justify-content:space-between;align-items:center;background:var(--cream)}.page-head h1{font-size:29px;color:var(--green-dark);margin:0 0 7px}.page-head p{font-size:8px;color:var(--muted);max-width:390px;line-height:1.7;margin:0}.page-head-art{width:300px;height:125px;object-fit:contain}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.service-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}.service-card img{width:100%;height:125px;object-fit:cover}.service-card .body{padding:12px}.service-card h3{font-size:9px;margin:0 0 5px}.service-card p{font-size:7px;color:var(--muted);line-height:1.55;min-height:32px;margin:0 0 7px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.price{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px;text-align:center}.price.featured{border:1.5px solid var(--orange)}.tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;border-radius:10px;padding:3px 10px;font-size:6px;font-weight:800}.price h3{font-size:9px}.price strong{font-size:17px;color:#222}.price ul{list-style:none;padding:0;text-align:left;font-size:7px;color:var(--muted);line-height:1.9;margin:12px 0}.price li:before{content:"✓ ";color:var(--green);font-weight:800}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}.about-img{width:100%;height:220px;object-fit:cover;border-radius:12px}.about-copy h2{font-size:22px;margin:0 0 10px;color:var(--green-dark)}.about-copy p{font-size:8px;color:var(--muted);line-height:1.8;margin:7px 0}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.value{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px}.value b{font-size:8px}.value p{font-size:7px;color:var(--muted);line-height:1.55}
.article-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}.article{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}.article img{width:100%;height:105px;object-fit:cover}.article.big{grid-row:span 2}.article.big img{height:210px}.article .body{padding:10px}.article .cat{font-size:6px;color:var(--green);font-weight:800}.article h3{font-size:9px;margin:5px 0}.article p{font-size:7px;color:var(--muted);line-height:1.55;margin:0}
.shop-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:center}.shop-icons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shop-item{display:flex;gap:10px;align-items:center;padding:10px;background:#fff;border:1px solid var(--line);border-radius:9px}.shop-item .ico{width:30px;height:30px;border-radius:8px;background:#fff2e5;color:var(--orange);display:grid;place-items:center}.shop-item b{font-size:8px}.shop-item span{display:block;font-size:6px;color:var(--muted);margin-top:2px}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:14px}.contact-card,.contact-form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px}.contact-card h2,.contact-form h2{font-size:14px;margin:0 0 13px}.contact-row{display:flex;gap:10px;margin:12px 0}.contact-row .ico{width:24px;height:24px;border-radius:50%;background:#eaf5ef;color:var(--green);display:grid;place-items:center;flex:0 0 auto}.contact-row b{font-size:8px}.contact-row span{display:block;font-size:7px;color:var(--muted);line-height:1.55;margin-top:2px}.map{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-top:10px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field label{display:block;font-size:7px;font-weight:700;margin:6px 0}.field input,.field textarea,.field select{width:100%;padding:8px 9px;border:1px solid #e3ded4;border-radius:7px;font:7px "Plus Jakarta Sans";outline:none;background:#fff}.field textarea{height:88px;resize:none}
@media(max-width:900px){.nav{padding:0 18px}.mobile-toggle{display:block}.navlinks{display:none;position:absolute;left:0;right:0;top:71px;background:var(--cream);padding:15px 18px;flex-direction:column;align-items:flex-start;gap:10px;border-bottom:1px solid var(--line)}.navlinks.open{display:flex}.nav>.btn{display:none}.hero{grid-template-columns:1fr;padding:35px 25px}.hero-art{order:-1;height:220px}.trust{grid-template-columns:1fr 1fr;margin:0 25px 20px}.trust-item:nth-child(2){border-right:0}.section{padding:22px 25px}.cards,.features,.service-grid{grid-template-columns:1fr 1fr}.promo{margin-left:25px;margin-right:25px}.footer{padding-left:25px;padding-right:25px}.footer-grid{grid-template-columns:1fr 1fr}.page-head{padding-left:25px;padding-right:25px}.about-grid,.contact-grid{grid-template-columns:1fr}.shop-intro{grid-template-columns:1fr}.article-grid{grid-template-columns:1fr 1fr}.article.big{grid-row:auto}.article.big img{height:160px}}
@media(max-width:560px){.site{width:100%;margin:0;border-radius:0}.hero h1{font-size:34px}.trust,.cards,.features,.service-grid,.price-grid,.values,.article-grid,.footer-grid,.form-row{grid-template-columns:1fr}.trust-item{border-right:0;border-bottom:1px solid var(--line)}.trust-item:last-child{border-bottom:0}.promo{display:block;padding:17px}.promo img{width:180px;display:block;margin:5px auto -18px}.page-head{display:block}.page-head-art{width:200px;margin-top:15px}.section-head{display:block}.section-head p{margin-top:7px}.shop-icons{grid-template-columns:1fr}}

/* FULL WIDTH / LARGE CANVAS — preserve previous visual design */
.site{max-width:1600px;width:calc(100% - 24px);margin:12px auto}
.nav{height:88px;padding:0 64px}
.hero{padding:78px 80px 58px;min-height:650px}
.hero h1{font-size:64px;line-height:1.04}
.hero p{font-size:15px;max-width:600px}
.hero-art{min-height:530px}
.hero-art img{max-height:500px}
.trust{margin:0 80px 52px;padding:28px}
.section{padding:55px 80px}
.section h2{font-size:34px}
.section-head p{font-size:12px;max-width:520px}
.cards{gap:22px}
.card img{height:220px}
.card-body{padding:21px}
.card h3{font-size:15px}
.card p{font-size:10.5px;line-height:1.7}
.promo{margin:28px 80px 55px;padding:42px 52px;min-height:215px}
.promo h2{font-size:30px}
.promo p{font-size:12px}
.promo img{width:330px}
.features{gap:22px}
.feature{padding:26px;min-height:165px}
.feature h3{font-size:14px}
.feature p{font-size:10px}
.page-hero{padding:62px 80px 40px;min-height:300px}
.page-hero h1{font-size:46px}
.page-hero p{font-size:12px;max-width:600px}
.page-hero img{width:380px}
.service-grid{gap:22px}
.service-card img{height:235px}
.service-card .inner{padding:22px}
.service-card h3{font-size:15px}
.service-card p{font-size:10.5px;line-height:1.7}
.price-grid{gap:22px}
.price{padding:32px;min-height:390px}
.price h3{font-size:16px}
.price strong{font-size:30px}
.price ul{font-size:10.5px;line-height:2}
.shop-grid{gap:22px}
.product{padding:18px}
.product img{height:260px}
.product h3{font-size:13px}
.product p{font-size:10px}
.article-grid{gap:22px}
.article img{height:205px}
.article.big img{height:330px}
.article .body{padding:16px}
.about{gap:65px}
.about h2{font-size:36px}
.about p{font-size:11.5px}
.contact-grid{gap:28px}
.contact-box,.form{padding:32px}
.footer{padding:55px 80px 26px}
.footer-grid{gap:65px}

@media(max-width:1100px){
 .site{width:calc(100% - 12px)}
 .nav{padding:0 40px}
 .hero{padding:60px 50px}
 .trust,.section{margin-left:50px;margin-right:50px;padding-left:0;padding-right:0}
 .promo{margin-left:50px;margin-right:50px}
 .page-hero{padding:48px 50px}
 .footer{padding:45px 50px 24px}
}
@media(max-width:700px){
 .site{width:100%;margin:0;border-radius:0}
 .nav{padding:0 22px}
 .hero{padding:42px 24px;min-height:auto}
 .hero h1{font-size:40px}
 .hero-art{min-height:340px}
 .trust,.section{margin-left:22px;margin-right:22px;padding:34px 0}
 .trust{grid-template-columns:1fr 1fr}
 .cards,.features,.service-grid,.price-grid,.shop-grid,.article-grid{grid-template-columns:1fr}
 .promo{margin-left:22px;margin-right:22px;padding:30px;min-height:0}
 .promo img{width:230px}
 .page-hero{padding:38px 22px;min-height:auto}
 .page-hero h1{font-size:36px}
 .page-hero img{width:240px}
 .footer{padding:38px 22px 22px}
}

/* === TRUE FULL WIDTH DESKTOP === */
html,body{width:100%;min-width:100%;margin:0;padding:0}
body{background:#f6f3ec}
.site{
  width:100%;
  max-width:none;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}
.nav{
  width:100%;
  padding-left:5vw;
  padding-right:5vw;
}
.hero{
  width:100%;
  max-width:none;
  padding-left:6vw;
  padding-right:6vw;
  min-height:68vh;
}
.hero-art{width:100%;min-height:55vh}
.hero-art>img:first-child{width:min(48vw,760px);max-width:none}
.trust{
  margin-left:6vw;
  margin-right:6vw;
  width:auto;
}
.section{
  width:100%;
  padding-left:6vw;
  padding-right:6vw;
}
.cards,.features,.service-grid,.price-grid,.shop-grid,.article-grid{
  width:100%;
}
.card img{height:230px}
.promo{
  margin-left:6vw;
  margin-right:6vw;
}
.page-hero{
  width:100%;
  padding-left:6vw;
  padding-right:6vw;
  min-height:32vh;
}
.page-hero img{width:min(28vw,430px)}
.footer{
  width:100%;
  padding-left:6vw;
  padding-right:6vw;
}

/* Keep mobile readable while desktop fills the entire viewport */
@media(max-width:700px){
  .hero{padding-left:24px;padding-right:24px}
  .section{padding-left:22px;padding-right:22px}
  .trust{margin-left:22px;margin-right:22px}
  .promo{margin-left:22px;margin-right:22px}
  .page-hero{padding-left:22px;padding-right:22px}
  .footer{padding-left:22px;padding-right:22px}
  .hero-art>img:first-child{width:100%;max-width:520px}
}


/* =========================================================
   AMORE VET — UI POLISH / READABILITY / CENTERED NAV
   ========================================================= */

:root{
  --green:#25866d;
  --green-dark:#0d5a46;
  --green-soft:#e8f5ef;
  --orange:#ee7048;
  --cream:#fffdf8;
  --cream-soft:#f7f4ec;
  --ink:#17382d;
  --muted:#64756e;
  --line:#e6e3da;
  --shadow:0 18px 50px rgba(23,56,45,.09);
}

body{
  background:#f4f1e9;
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.site{
  min-height:100vh;
  background:var(--cream);
}

/* ---------- NAVBAR ---------- */
.nav{
  height:86px;
  padding:0 clamp(22px,5vw,72px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,253,248,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,227,218,.9);
}

.logo{
  justify-self:start;
  font-size:29px;
  line-height:.78;
  color:#16715a;
  transition:transform .2s ease;
}
.logo:hover{transform:translateY(-1px)}
.logo small{
  font-size:8px !important;
  letter-spacing:1.8px;
  margin-left:7px;
  margin-top:5px;
}

.navlinks{
  margin:0;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,2vw,30px);
  font-size:14px !important;
  font-weight:700;
  color:#294239;
}

.navlinks a{
  position:relative;
  padding:10px 2px;
  border:0 !important;
  white-space:nowrap;
  transition:color .2s ease;
}

.navlinks a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:3px;
  border-radius:99px;
  background:var(--green);
  transform:translateX(-50%);
  transition:width .2s ease;
}

.navlinks a:hover,
.navlinks a.active{
  color:var(--green);
}
.navlinks a:hover::after,
.navlinks a.active::after{
  width:22px;
}

.nav > .btn{
  justify-self:end;
}

.btn{
  min-height:44px;
  padding:11px 19px;
  border-radius:10px;
  font-size:13px !important;
  font-weight:800;
  letter-spacing:.05px;
  box-shadow:0 7px 18px rgba(37,134,109,.18);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(37,134,109,.24);
}
.btn.outline{
  box-shadow:none;
}
.mobile-toggle{
  font-size:28px;
}

/* ---------- HERO ---------- */
.hero{
  padding:clamp(58px,7vw,96px) clamp(24px,7vw,110px) clamp(54px,6vw,82px);
  min-height:650px;
  gap:50px;
}

.kicker{
  padding:8px 13px;
  font-size:12px;
  letter-spacing:.4px;
  font-weight:800;
}

.hero h1{
  font-size:clamp(46px,5.2vw,78px);
  line-height:1.02;
  letter-spacing:-2.8px;
  margin:19px 0 18px;
}

.hero p{
  font-size:17px;
  line-height:1.8;
  max-width:650px;
}

.actions{
  gap:12px;
  margin-top:25px;
}
.actions .btn{min-height:50px;padding:13px 22px;font-size:14px !important}

.hero-art:before{
  width:min(34vw,500px);
  height:min(30vw,440px);
}
.hero-art img.main-img{
  width:min(48vw,720px);
  max-height:500px;
}

/* ---------- TRUST ---------- */
.trust{
  margin:0 clamp(24px,7vw,110px) 58px;
  padding:0;
  border-radius:16px;
}
.trust-item{
  padding:24px 22px;
}
.trust-icon{
  width:42px;height:42px;font-size:19px;
}
.trust b{
  font-size:13px;
  margin-bottom:4px;
}
.trust span{
  font-size:12px;
  line-height:1.55;
}

/* ---------- SECTIONS / CARDS ---------- */
.section{
  padding:clamp(48px,5vw,76px) clamp(24px,7vw,110px);
}
.section-title,
.section h2{
  font-size:clamp(24px,2.4vw,36px);
  line-height:1.2;
  margin-bottom:8px;
}
.section-head{
  margin-bottom:28px;
}
.section-head p{
  font-size:14px;
  line-height:1.7;
}

.cards,
.features,
.service-grid,
.price-grid,
.article-grid{
  gap:22px;
}

.card,
.service-card,
.price,
.article,
.contact-card,
.contact-form,
.feature,
.value,
.shop-item{
  border-radius:16px;
  box-shadow:0 8px 25px rgba(23,56,45,.055);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card:hover,
.service-card:hover,
.price:hover,
.article:hover,
.feature:hover,
.value:hover,
.shop-item:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 38px rgba(23,56,45,.11);
  border-color:#cfe1d8;
}

.card img{height:230px}
.card-body{padding:20px}
.card h3{font-size:17px;margin-bottom:7px}
.card p{font-size:13px;line-height:1.7;min-height:0;margin-bottom:12px}
.link{font-size:12px}

/* ---------- PROMO ---------- */
.promo{
  margin:20px clamp(24px,7vw,110px) 70px;
  padding:38px 48px;
  min-height:210px;
  border-radius:20px;
}
.promo h2{font-size:30px}
.promo p{font-size:14px;line-height:1.6}
.promo img{width:330px}

/* ---------- FEATURES ---------- */
.feature{
  padding:24px;
  min-height:165px;
}
.feature .ico{
  width:42px;height:42px;font-size:20px;
}
.feature h3{font-size:15px;margin:12px 0 6px}
.feature p{font-size:12px;line-height:1.65}

/* ---------- INNER PAGE HEADERS ---------- */
.page-head{
  padding:70px clamp(24px,7vw,110px) 35px;
  min-height:300px;
  gap:45px;
  background:
    radial-gradient(circle at 92% 25%,#edf6f1 0 12%,transparent 12.5%),
    var(--cream);
}
.page-head h1{
  font-size:clamp(38px,4vw,58px);
  line-height:1.08;
  letter-spacing:-1.8px;
  margin:0 0 12px;
}
.page-head p{
  font-size:16px;
  line-height:1.8;
  max-width:650px;
}
.page-head-art{
  width:min(34vw,460px);
  height:190px;
  border-radius:18px;
  object-fit:cover;
}

/* ---------- SERVICE ---------- */
.service-card img{height:245px}
.service-card .body{padding:22px}
.service-card h3{font-size:18px;margin-bottom:8px}
.service-card p{font-size:13px;line-height:1.7;min-height:0}

/* ---------- GROOMING PRICES ---------- */
.price{
  padding:30px;
  min-height:390px;
}
.price h3{font-size:18px}
.price strong{font-size:31px}
.price ul{
  font-size:13px;
  line-height:2;
}
.tag{font-size:10px;padding:5px 12px}

/* ---------- ABOUT ---------- */
.about-grid{gap:45px}
.about-img{
  height:330px;
  border-radius:18px;
}
.about-copy h2{font-size:36px;line-height:1.15}
.about-copy p{font-size:14px;line-height:1.8}
.value{padding:20px}
.value b{font-size:14px}
.value p{font-size:12px;line-height:1.65}

/* ---------- ARTICLES ---------- */
.article img{height:220px}
.article.big img{height:350px}
.article .body{padding:18px}
.article .cat{font-size:10px}
.article h3{font-size:17px;line-height:1.35}
.article p{font-size:12px;line-height:1.65}

/* ---------- PET SHOP ---------- */
.shop-intro{gap:35px}
.shop-intro > div > p{
  font-size:14px !important;
  line-height:1.8 !important;
}
.shop-item{
  padding:16px;
}
.shop-item .ico{width:42px;height:42px}
.shop-item b{font-size:13px}
.shop-item span{font-size:11px;line-height:1.5}

/* ---------- CONTACT ---------- */
.contact-grid{gap:24px}
.contact-card,
.contact-form{padding:28px}
.contact-card h2,
.contact-form h2{font-size:21px}
.contact-row{margin:18px 0}
.contact-row .ico{width:36px;height:36px;font-size:16px}
.contact-row b{font-size:13px}
.contact-row span{font-size:12px;line-height:1.6}
.form-row{gap:14px}
.field label{font-size:12px;margin:8px 0 6px}
.field input,
.field textarea,
.field select{
  padding:12px 13px;
  font-size:13px !important;
  border-radius:9px;
}
.field textarea{height:120px}

/* ---------- FOOTER ---------- */
.footer{
  padding:68px clamp(24px,7vw,110px) 25px;
}
.footer-grid{gap:55px}
.footer h4{font-size:14px}
.footer p,
.footer a{
  font-size:12px;
  line-height:1.8;
}
.copyright{
  font-size:11px;
  padding-top:15px;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1180px){
  .nav{grid-template-columns:auto 1fr auto;gap:18px}
  .navlinks{gap:16px;font-size:13px !important}
  .nav > .btn{font-size:12px !important;padding:10px 14px}
}

@media(max-width:900px){
  .nav{
    height:76px;
    grid-template-columns:auto auto;
    justify-content:space-between;
  }
  .navlinks{
    display:none;
    position:absolute;
    left:16px;
    right:16px;
    top:82px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 16px 40px rgba(23,56,45,.12);
    background:rgba(255,253,248,.98);
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }
  .navlinks.open{display:flex}
  .navlinks a{
    padding:12px 10px;
    border-radius:9px;
  }
  .navlinks a:hover,
  .navlinks a.active{
    background:var(--green-soft);
  }
  .navlinks a::after{display:none}
  .nav>.btn{display:none}

  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    text-align:center;
  }
  .hero p{margin-left:auto;margin-right:auto}
  .actions{justify-content:center}
  .hero-art{order:-1;min-height:360px}
  .hero-art img.main-img{width:min(90vw,620px)}

  .page-head{
    display:grid;
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .page-head p{margin-left:auto;margin-right:auto}
}

@media(max-width:700px){
  .logo{font-size:25px}
  .logo small{font-size:7px !important}
  .hero h1{font-size:42px;letter-spacing:-1.8px}
  .hero p{font-size:15px}
  .kicker{font-size:10px}
  .trust{grid-template-columns:1fr 1fr}
  .trust-item{padding:18px 14px}
  .trust b{font-size:12px}
  .trust span{font-size:10px}
  .section{padding-top:42px;padding-bottom:42px}
  .page-head{padding-top:50px}
  .page-head-art{width:min(100%,420px);height:180px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}

@media(max-width:520px){
  .nav{padding:0 18px}
  .hero{padding:45px 20px}
  .hero h1{font-size:36px}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%}
  .trust{grid-template-columns:1fr}
  .trust-item{border-right:0 !important}
  .footer-grid{grid-template-columns:1fr}
  .footer{padding-left:20px;padding-right:20px}
}

/* =========================================================
   FINAL VISUAL FIXES — screenshot matching
   ========================================================= */

/* Promo banners: make the image a real visual focal point and keep the content vertically balanced. */
.promo{
  min-height:300px;
  padding:44px 64px;
  margin-top:34px;
  margin-bottom:64px;
  border-radius:28px;
  gap:50px;
}
.promo > div{max-width:850px;position:relative;z-index:2}
.promo h2{
  font-size:clamp(28px,2.3vw,40px);
  line-height:1.15;
  margin:0 0 14px;
  letter-spacing:-1px;
}
.promo p{
  font-size:18px;
  line-height:1.55;
  margin:0 0 22px;
}
.promo .btn{
  min-height:56px;
  padding:14px 28px;
  font-size:15px !important;
  border-radius:16px;
}
.promo img{
  flex:0 0 270px;
  width:270px;
  height:210px;
  object-fit:cover;
  object-position:center;
  border-radius:2px;
  margin:0;
  align-self:center;
  display:block;
  filter:saturate(.96) contrast(.98);
}

/* Homepage service cards: taller media area, clearer hierarchy and less cramped copy. */
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.card{border-radius:22px}
.card img{
  height:300px;
  object-fit:cover;
  object-position:center;
}
.card-body{padding:30px 30px 32px}
.card h3{
  font-size:22px;
  line-height:1.3;
  margin:0 0 12px;
  color:var(--ink);
}
.card p{
  font-size:16px;
  line-height:1.75;
  min-height:0;
  margin:0 0 20px;
}
.link{font-size:15px}

/* Layanan page header: reduce the empty feeling and make the visual proportional. */
.page-head{
  min-height:430px;
  padding:64px 6vw 54px;
  gap:70px;
  align-items:center;
  background:
    radial-gradient(circle at 92% 25%,#edf6f1 0 15%,transparent 15.5%),
    var(--cream);
}
.page-head > div{flex:1;max-width:760px}
.page-head h1{
  font-size:clamp(48px,4.4vw,72px);
  line-height:1.06;
  letter-spacing:-2.4px;
  margin:0 0 18px;
}
.page-head p{
  max-width:760px;
  font-size:20px;
  line-height:1.75;
}
.page-head-art{
  flex:0 0 auto;
  width:min(38vw,590px);
  height:320px;
  object-fit:cover;
  object-position:center;
  border-radius:28px;
  display:block;
}

/* Service cards on Layanan page: large image + comfortable text block. */
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.service-card{border-radius:22px}
.service-card img{
  height:330px;
  object-fit:cover;
  object-position:center;
  display:block;
}
.service-card .body{padding:28px 30px 32px}
.service-card h3{font-size:23px;line-height:1.3;margin:0 0 12px}
.service-card p{font-size:16px;line-height:1.75;min-height:0;margin:0 0 20px}
.service-card .link{font-size:15px}

/* Keep the section title and card grid visually aligned with the page edges. */
.section-head{margin-bottom:30px}
.section-title{font-size:34px;line-height:1.2}
.section-head p{font-size:16px;line-height:1.7}

/* Avoid the huge hero-pets crop looking like a separate broken section. */
.page-head + .section{padding-top:42px}

@media(max-width:1200px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card img{height:330px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-card img{height:300px}
  .page-head{gap:40px}
  .page-head-art{width:44vw;height:280px}
}

@media(max-width:700px){
  .promo{
    min-height:0;
    padding:28px 24px;
    margin-top:22px;
    margin-bottom:42px;
    border-radius:22px;
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    text-align:left;
  }
  .promo h2{font-size:30px}
  .promo p{font-size:15px}
  .promo img{
    width:100%;
    max-width:300px;
    height:190px;
    margin:0 auto;
  }
  .cards,.service-grid{grid-template-columns:1fr}
  .card img{height:270px}
  .card-body{padding:24px}
  .card h3{font-size:21px}
  .card p,.service-card p{font-size:15px}
  .page-head{
    min-height:0;
    padding:48px 22px 36px;
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    text-align:center;
  }
  .page-head h1{font-size:44px;letter-spacing:-1.5px}
  .page-head p{font-size:16px;margin:0 auto;max-width:560px}
  .page-head-art{width:min(100%,430px);height:240px;margin:0 auto;border-radius:22px}
  .service-card img{height:250px}
  .service-card .body{padding:24px}
  .service-card h3{font-size:21px}
  .section-title{font-size:29px}
  .section-head p{font-size:14px}
}