@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Zilla+Slab:wght@400;500;600;700&display=swap');

:root{
  --ivory:#E7ECDA;
  --ivory-deep:#D9E2C6;
  --paper:#FAF8EC;
  --ink:#232E1B;
  --ink-soft:#4E5B3C;
  --maroon:#4A6A3F;
  --maroon-deep:#2E4826;
  --mustard:#A67C3D;
  --mustard-deep:#7C5A28;
  --green:#3B5730;
  --line:#C3D0A4;
  --line-soft:#DAE3C3;
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Zilla Slab',Georgia,serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  color:var(--maroon-deep);
  margin:0 0 .4em;
  letter-spacing:.01em;
}
h1{font-size:3.2rem; line-height:1.08;}
h2{font-size:2.2rem;}
h3{font-size:1.5rem;}
p{margin:0 0 1em; max-width:64ch; color:var(--ink-soft);}
a{color:var(--maroon-deep);}
img,svg{max-width:100%;}
.icon{width:100%; height:100%; color:inherit;}

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

/* skip link */
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:200;}
.skip-link:focus{left:12px; top:12px;}

/* ---------- top strip ---------- */
.topstrip{
  background:var(--ink);
  color:var(--ivory-deep);
  font-family:'Zilla Slab',serif;
  font-size:.86rem;
}
.topstrip .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; gap:16px; flex-wrap:wrap;
}
.topstrip a{color:var(--ivory-deep); text-decoration:none;}
.topstrip a:hover{color:#fff;}
.topstrip .divider{opacity:.5; margin:0 8px;}

/* ---------- header / nav ---------- */
header.site-head{
  background:var(--paper);
  border-bottom:3px double var(--line);
}
.head-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; gap:20px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);}
.brand .mark{
  width:52px; height:52px; color:var(--maroon-deep);
  border:1.5px solid var(--maroon-deep); border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:9px;
  flex-shrink:0;
}
.brand .name{display:flex; flex-direction:column; line-height:1.15;}
.brand .name strong{font-family:'Cormorant Garamond',serif; font-size:1.55rem; font-weight:700; color:var(--maroon-deep);}
.brand .name span{font-size:.78rem; letter-spacing:.06em; color:var(--ink-soft); font-family:'Zilla Slab',serif;}

nav.main-nav ul{list-style:none; display:flex; gap:30px; margin:0; padding:0;}
nav.main-nav a{
  text-decoration:none; color:var(--ink); font-size:1rem;
  font-family:'Zilla Slab',serif; padding-bottom:4px; border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{
  border-bottom-color:var(--mustard-deep); color:var(--maroon-deep);
}

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--maroon-deep); color:var(--paper);
  padding:10px 20px; text-decoration:none;
  font-family:'Zilla Slab',serif; font-size:.95rem; font-weight:600;
  border-radius:999px; white-space:nowrap;
}
.nav-cta:hover{background:var(--maroon);}

.nav-toggle{display:none;}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(ellipse at 85% 20%, rgba(46,72,38,.08), transparent 55%),
    var(--ivory-deep);
  border-bottom:1px solid var(--line);
  padding:64px 0 56px;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.eyebrow-plain{font-family:'Zilla Slab',serif; color:var(--maroon-deep); font-size:.95rem; margin-bottom:14px;}
.hero p.lede{font-size:1.15rem; color:var(--ink-soft);}
.hero-cta{display:flex; gap:16px; margin-top:26px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:13px 26px; text-decoration:none;
  font-family:'Zilla Slab',serif; font-weight:600; font-size:1rem;
  border-radius:2px; border:1.5px solid var(--maroon-deep);
}
.btn-solid{background:var(--maroon-deep); color:var(--paper);}
.btn-solid:hover{background:var(--maroon);}
.btn-line{background:transparent; color:var(--maroon-deep);}
.btn-line:hover{background:rgba(46,72,38,.09);}

.hero-art{
  border:1.5px solid var(--line); background:var(--paper);
  padding:30px; display:flex; align-items:center; justify-content:center;
  aspect-ratio:5/4;
}
.hero-art .icon{color:var(--green); width:78%;}

/* ---------- divider ---------- */
.divider{
  display:flex; justify-content:center; color:var(--mustard-deep);
  margin:8px 0 0; opacity:.85;
}
.divider .icon{width:120px; height:24px;}

/* ---------- sections ---------- */
section{padding:64px 0;}
section.tint{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .eyebrow-plain{margin-bottom:8px;}

.tri-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line);}
.tri-grid > div{padding:30px 28px; border-right:1px solid var(--line);}
.tri-grid > div:last-child{border-right:none;}
.tri-grid .num-icon{width:40px; height:40px; color:var(--maroon-deep); margin-bottom:14px;}

.trust-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 40px;}
.trust-list li{
  padding-left:30px; position:relative; color:var(--ink-soft); font-size:1.02rem;
}
.trust-list li::before{
  content:"—"; position:absolute; left:0; color:var(--mustard-deep); font-weight:700;
}

/* ---------- breed cards (home preview + gallery) ---------- */
.breed-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.breed-card{background:var(--paper); padding:28px 26px; display:flex; flex-direction:column; gap:10px;}
.breed-card .row{display:flex; align-items:center; gap:14px;}
.breed-card .icon-box{width:46px; height:46px; color:var(--green); flex-shrink:0;}
.breed-card h3{margin:0;}
.breed-card .origin{font-size:.82rem; letter-spacing:.02em; color:var(--mustard-deep); font-family:'Zilla Slab',serif; font-weight:600;}
.breed-card p{font-size:.94rem; margin:0;}
.breed-card .trait{font-size:.86rem; color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:10px; margin-top:2px;}

.gallery-intro{max-width:720px;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--maroon-deep); color:var(--ivory-deep); text-align:center;
  padding:56px 0;
}
.cta-band h2{color:var(--paper);}
.cta-band p{color:var(--ivory-deep); margin-left:auto; margin-right:auto;}
.cta-band .btn-solid{background:var(--mustard-deep); border-color:var(--mustard-deep); color:var(--ink);}
.cta-band .btn-solid:hover{background:var(--mustard);}
.cta-band .btn-line{border-color:var(--ivory-deep); color:var(--ivory-deep);}
.cta-band .btn-line:hover{background:rgba(255,255,255,.08);}

/* ---------- about page bits ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:10px;}
.pillars > div{background:var(--paper); padding:24px;}
.pillars .icon-box{width:36px; height:36px; color:var(--maroon-deep); margin-bottom:10px;}

blockquote.saying{
  border-left:3px solid var(--mustard-deep); margin:32px 0; padding:4px 0 4px 24px;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.35rem; color:var(--maroon-deep);
}

/* ---------- contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.info-block{border:1px solid var(--line); background:var(--paper); padding:30px;}
.info-block h3{margin-bottom:10px;}
.info-block .addr{font-size:1.05rem; color:var(--ink); line-height:1.65;}
.info-list{list-style:none; margin:20px 0 0; padding:20px 0 0; border-top:1px dashed var(--line);}
.info-list li{display:flex; gap:14px; margin-bottom:14px; align-items:flex-start;}
.info-list .lbl{width:96px; flex-shrink:0; font-family:'Zilla Slab',serif; font-weight:600; color:var(--mustard-deep); font-size:.86rem; letter-spacing:.02em; padding-top:2px;}
.map-frame{border:1px solid var(--line); overflow:hidden; height:100%; min-height:360px;}
.map-frame iframe{width:100%; height:100%; min-height:360px; border:0; display:block; filter:sepia(12%) saturate(88%);}

.hours-table{width:100%; border-collapse:collapse; margin-top:6px;}
.hours-table td{padding:6px 0; border-bottom:1px dashed var(--line-soft); font-size:.95rem; color:var(--ink-soft);}
.hours-table td:last-child{text-align:right; color:var(--ink); font-weight:600;}

/* ---------- photo hero (homepage) ---------- */
.hero-photo{
  background-size:cover; background-position:center 30%;
  min-height:600px; display:flex; align-items:center;
  border-bottom:1px solid var(--line);
}
.hero-photo-inner{max-width:640px; padding-top:70px; padding-bottom:70px;}
.hero-photo h1{font-size:3.1rem; text-shadow:0 2px 18px rgba(0,0,0,.28);}
.btn-photo-line{
  display:inline-block; padding:13px 26px; text-decoration:none;
  font-family:'Zilla Slab',serif; font-weight:600; font-size:1rem;
  border-radius:2px; border:1.5px solid rgba(255,255,255,.75); color:#fff; background:rgba(255,255,255,.06);
}
.btn-photo-line:hover{background:rgba(255,255,255,.16);}
@media (max-width:640px){
  .hero-photo{min-height:460px;}
  .hero-photo h1{font-size:2.1rem;}
}

/* ---------- homepage photo strip ---------- */
.photo-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.photo-strip-item{
  display:block; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
}
.photo-strip-item img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; transition:transform .4s ease;}
.photo-strip-item:hover img{transform:scale(1.06);}
@media (max-width:760px){ .photo-strip{grid-template-columns:repeat(2,1fr);} }

/* ---------- real photo gallery (uniform grid + lightbox) ---------- */
.photo-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
  gap:28px;
}
.photo-frame{
  background:var(--paper); border:1px solid var(--line);
  padding:10px 10px 4px; cursor:zoom-in;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.photo-frame:hover{
  border-color:var(--mustard-deep);
  box-shadow:0 10px 24px rgba(35,46,24,.14);
  transform:translateY(-2px);
}
.photo-frame:focus-visible{outline:2px solid var(--maroon-deep); outline-offset:3px;}
.photo-frame .thumb{
  position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--ivory-deep);
}
.photo-frame .thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%; display:block;
  transition:transform .4s ease;
}
.photo-frame:hover .thumb img{transform:scale(1.05);}
.photo-frame .cap{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1rem; color:var(--ink-soft); text-align:center;
  padding:10px 4px 8px; border-top:1px dashed var(--line-soft); margin-top:8px;
}

@media (max-width:640px){ .photo-gallery{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:16px;} }

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(20,15,9,.92);
  display:none; align-items:center; justify-content:center;
  z-index:500; padding:40px 20px;
}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:min(90vw,900px); max-height:90vh; text-align:center;}
.lightbox-inner img{max-width:100%; max-height:78vh; width:auto; border:2px solid var(--ivory-deep); box-shadow:0 10px 40px rgba(0,0,0,.4);}
.lightbox-cap{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--ivory-deep);
  font-size:1.15rem; margin-top:16px;
}
.lightbox-close, .lightbox-nav{
  position:absolute; background:none; border:1px solid rgba(243,235,216,.5);
  color:var(--ivory-deep); border-radius:50%; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  cursor:pointer;
}
.lightbox-close{top:24px; right:24px;}
.lightbox-close:hover, .lightbox-nav:hover{background:rgba(243,235,216,.12);}
.lightbox-nav.prev{left:16px; top:50%; transform:translateY(-50%);}
.lightbox-nav.next{right:16px; top:50%; transform:translateY(-50%);}
@media (max-width:640px){ .lightbox-nav{width:38px; height:38px; font-size:1.1rem;} }

/* ---------- footer ---------- */
footer.site-foot{background:var(--ink); color:var(--ivory-deep); padding:52px 0 24px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
.foot-grid h4{color:var(--ivory-deep); font-family:'Cormorant Garamond',serif; font-size:1.2rem; margin-bottom:14px;}
.foot-grid p, .foot-grid a{color:#AEBD95; font-size:.92rem; text-decoration:none;}
.foot-grid a:hover{color:var(--ivory-deep);}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.foot-bottom{
  border-top:1px solid #384629; margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:#87966C;
}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.foot-brand .mark{width:40px; height:40px; color:var(--ivory-deep); border:1px solid #445434; border-radius:50%; padding:7px;}
.foot-brand strong{font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--ivory-deep);}

/* ---------- responsive ---------- */
@media (max-width:860px){
  h1{font-size:2.3rem;}
  .hero-grid, .about-grid, .contact-grid{grid-template-columns:1fr;}
  .hero-grid{gap:34px;}
  .hero-art{order:-1;}
  .tri-grid{grid-template-columns:1fr;}
  .tri-grid > div{border-right:none; border-bottom:1px solid var(--line);}
  .tri-grid > div:last-child{border-bottom:none;}
  .trust-list{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr; gap:28px;}
  nav.main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:10px 28px 20px;
  }
  nav.main-nav.open{display:block;}
  nav.main-nav ul{flex-direction:column; gap:14px;}
  .head-row{position:relative;}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border:1.5px solid var(--maroon-deep); background:none;
    color:var(--maroon-deep); border-radius:50%; cursor:pointer; font-size:1.3rem;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}


/* ---------- floating WhatsApp button ---------- */
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1000;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:0 18px 0 14px;
  background:#25D366;
  color:#fff !important;
  border-radius:999px;
  text-decoration:none;
  font-family:'Zilla Slab',serif;
  font-size:.98rem;
  font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  border:2px solid rgba(255,255,255,.9);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.whatsapp-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  font-family:Arial,sans-serif;
  font-size:20px;
  line-height:1;
  transform:rotate(-20deg);
}
.whatsapp-label{line-height:1;}

/* ---------- enhanced mobile layout ---------- */
@media (max-width:860px){
  .wrap{padding-left:18px; padding-right:18px;}
  .topstrip .wrap{align-items:flex-start; font-size:.8rem; line-height:1.35;}
  .topstrip .wrap > div:first-child{max-width:100%;}
  .head-row{padding:12px 0;}
  .brand .mark{width:46px; height:46px;}
  .brand .name strong{font-size:1.3rem;}
  .brand .name span{font-size:.7rem;}
  .nav-cta{padding:9px 14px; font-size:.88rem;}
  nav.main-nav{
    z-index:1100;
    box-shadow:0 10px 22px rgba(35,46,24,.10);
  }
  .hero{padding:42px 0 38px;}
  .hero-grid{gap:26px;}
  .hero-art{padding:18px;}
  .tri-grid > div{padding:24px 20px;}
  .contact-grid{gap:24px;}
  .info-block{padding:22px;}
  .map-frame{min-height:330px;}
  .map-frame iframe{min-height:330px;}
  .photo-strip{gap:10px;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}

@media (max-width:640px){
  body{font-size:16px; padding-bottom:78px;}
  h1{font-size:2rem;}
  h2{font-size:1.8rem;}
  h3{font-size:1.35rem;}
  .topstrip .wrap{gap:6px;}
  .topstrip .wrap > div:last-child{width:100%; display:flex; gap:6px; align-items:center;}
  .head-row{gap:10px;}
  .brand{min-width:0;}
  .brand .name strong{font-size:1.18rem; white-space:nowrap;}
  .brand .name span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;}
  .nav-cta{display:none;}
  .nav-toggle{margin-left:auto;}
  .hero-photo{min-height:410px !important;}
  .hero-photo-inner{padding-top:42px !important; padding-bottom:42px !important;}
  .hero-photo h1{font-size:2rem !important;}
  .hero-photo p.lede{font-size:1rem;}
  .hero-cta{gap:10px;}
  .btn{width:100%; text-align:center;}
  .trust-list{gap:12px;}
  .photo-strip{grid-template-columns:1fr 1fr; gap:10px;}
  .photo-gallery{grid-template-columns:1fr 1fr; gap:12px;}
  .photo-frame{padding:6px 6px 3px;}
  .photo-frame .cap{font-size:.88rem; padding:7px 2px 5px;}
  .info-list li{display:block;}
  .info-list .lbl{display:block; width:auto; margin-bottom:3px;}
  .hours-table{font-size:.9rem;}
  .hours-table td{padding:6px 3px;}
  .map-frame{min-height:300px;}
  .map-frame iframe{min-height:300px;}
  .whatsapp-float{
    right:14px;
    bottom:14px;
    min-height:52px;
    padding:0 15px 0 12px;
  }
  .whatsapp-label{font-size:.92rem;}
}

@media (max-width:380px){
  .brand .name strong{font-size:1.05rem;}
  .brand .name span{max-width:150px;}
  .whatsapp-float{right:10px; bottom:10px;}
}