/* ==========================================================================
   Millie's Paws Home Dog Boarding - shared styles
   Colours are taken directly from the original design:
   green #81a969, sage #b3cba5, button green #3c802e, charcoal #3d3b3a,
   warm cream #fff4e1. Paw colours: charcoal #3d3b3a and green #3c802e.
   ========================================================================== */

/* Exact fonts used by the original site: Dreaming Outloud (wordmark),
   Quicksand (headings), Calibri (body). */
@font-face{
  font-family:'Dreaming Outloud';
  src:url('/assets/fonts/DreamingOutloud.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Quicksand';
  src:url('/assets/fonts/Quicksand.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Quicksand';
  src:url('/assets/fonts/Quicksand-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Quicksand';
  src:url('/assets/fonts/Quicksand-Bold.woff2') format('woff2');
  font-weight:600 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Calibri';
  src:url('/assets/fonts/Calibri.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Calibri';
  src:url('/assets/fonts/Calibri-Bold.woff2') format('woff2');
  font-weight:600 700;font-style:normal;font-display:swap;
}

:root{
  --green:#81a969;
  --sage:#b3cba5;
  --btn:#3c802e;
  --btn-hover:#336d27;
  --ink:#3d3b3a;
  --cream:#fff4e1;
  --nav-ink:#304254;
  --maxw:1366px;  /* the original Canva design width; content is centred at this width */
  --body:'Calibri','Carlito','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --display:'Dreaming Outloud','Itim','Comic Sans MS',cursive;
  --heading:'Quicksand','Century Gothic',var(--body);
  /* Fluid type scale. The live site is a fixed 1366px design, so the vw terms are
     tuned to reach full (max) size by ~1200px — full-size across all desktop widths
     (1366/1440/1920) to match the fixed design, scaling down only below that. */
  --fs-display:clamp(3.4rem,9.9vw,7.4rem);  /* hero / contact wordmark ~118px */
  --fs-h2:clamp(1.95rem,4vw,2.67rem);       /* section headings ~42px */
  --fs-h3:clamp(1.55rem,2.7vw,2rem);        /* band sub headings ~32px */
  --fs-lg:clamp(1.25rem,2.45vw,1.83rem);    /* large body: welcome / contact ~29px */
  --fs-md:clamp(1.3rem,2.35vw,1.75rem);     /* info body ~28px */
  --fs-body:clamp(1.12rem,1.92vw,1.44rem);  /* card / review body ~23px */
  --fs-label:clamp(1.15rem,1.92vw,1.44rem); /* card titles, buttons ~23px */
  --fs-sm:15px;                             /* nav, footer value, review name */
  --fs-xs:13px;                             /* footer label */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--green);
  line-height:1.6;font-size:clamp(1rem,0.97rem+0.16vw,1.08rem);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3{margin:0 0 .5em;line-height:1.16;}
p{margin:0 0 1rem;}
ul{margin:0;padding:0;list-style:none;}
figure,figcaption,blockquote{margin:0;}
:focus-visible{outline:3px solid var(--btn);outline-offset:3px;border-radius:4px;}

.skip{position:absolute;left:-9999px;top:0;background:var(--cream);color:var(--ink);
  padding:.7rem 1.1rem;border-radius:0 0 8px 0;z-index:200;font-weight:700;text-decoration:none;}
.skip:focus{left:0;}

/* ---------- Top navigation (sticky, matches original) ---------- */
.topnav{position:sticky;top:0;z-index:100;background:var(--sage);width:100%;}
.topnav__inner{display:flex;justify-content:flex-end;align-items:center;
  gap:clamp(1rem,3vw,2.2rem);padding:.8rem clamp(1rem,3vw,2rem);}
.topnav__link{font-family:var(--body);font-size:15px;font-weight:400;
  text-decoration:none;color:var(--nav-ink);}
.topnav__link[aria-current="page"]{font-weight:700;}
.topnav__link:hover,.topnav__link:focus-visible{text-decoration:underline;}
@media(max-width:430px){
  .topnav__link{font-size:.8rem;}
  .topnav__inner{gap:1rem;padding:.7rem 1rem;}
}

.wrap{max-width:var(--maxw);margin-inline:auto;width:100%;}
.section{padding:clamp(2.75rem,6vw,5rem) 1.25rem;}
.bg-green{background-color:var(--green);}
.bg-sage{background-color:var(--sage);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:var(--btn);color:var(--cream);
  font-family:var(--body);font-weight:700;font-size:var(--fs-label);line-height:1.2;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
  padding:.7em 1.7em;border:0;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover,.btn:focus-visible{background:var(--btn-hover);color:var(--cream);}

/* ---------- Paw sections (hero, cta, contact) ---------- */
/* Small screens: paws softened uniformly so centred text stays legible. */
.paws{
  background-color:var(--green);
  background-image:linear-gradient(rgba(129,169,105,.58),rgba(129,169,105,.58)),url('/assets/img/paws.svg');
  background-size:auto,500px 500px;
  background-repeat:repeat,repeat;
}
/* Larger screens: bold paws on the left, clean green on the right (as original). */
@media(min-width:820px){
  .paws{
    background-image:linear-gradient(90deg,rgba(129,169,105,0) 0,rgba(129,169,105,0) 37%,var(--green) 50%,var(--green) 100%),url('/assets/img/paws.svg');
    background-size:cover,500px 500px;
    background-repeat:no-repeat,repeat;
  }
}
/* Content block: centred on mobile, pushed right on desktop (matches original). */
.paw-content{width:min(660px,100%);margin-inline:auto;text-align:center;position:relative;}
@media(min-width:820px){
  .paw-content{width:min(720px,53%);margin-left:auto;margin-right:8.5%;}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.75rem,6vw,4.5rem);}
.hero__logo{width:clamp(150px,19vw,257px);height:auto;margin:0 auto clamp(.4rem,1.4vw,.9rem);}  /* live site: 257x218 */
.hero__title{display:flex;flex-direction:column;align-items:center;gap:.1em;margin:0 0 1.6rem;font-weight:400;}
.hero__brand{font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:var(--fs-display);line-height:.98;}
@media(min-width:820px){
  .hero{display:flex;align-items:center;min-height:767px;}
}
.hero__tag{font-family:var(--body);font-weight:700;color:var(--ink);text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(1rem,2vw,1.45rem);}
.hero__since{font-family:var(--body);font-style:italic;font-weight:700;color:var(--ink);
  letter-spacing:.05em;font-size:clamp(1.05rem,2vw,1.55rem);margin-top:.2em;}
.hero .btn{margin-top:.4rem;}

/* ---------- Generic centred section heading (live site uses the plain body face, not Quicksand) ---------- */
.heading{font-family:var(--body);font-weight:400;color:var(--ink);line-height:1.2;
  font-size:var(--fs-h2);text-align:center;margin:0 0 clamp(1.75rem,3.5vw,2.6rem);}

/* ---------- Trusted cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:31px;max-width:877px;margin-inline:auto;}
.card{overflow:hidden;display:flex;flex-direction:column;}
.card__img{width:100%;aspect-ratio:423/314;object-fit:cover;display:block;}
.card__body{background:var(--green);color:var(--cream);text-align:center;flex:1 1 auto;
  padding:clamp(1.3rem,2.8vw,1.75rem) clamp(1.25rem,2.6vw,1.7rem) clamp(1.5rem,3vw,2rem);}
.card__title{font-family:var(--heading);font-weight:500;color:var(--cream);text-transform:uppercase;
  letter-spacing:.03em;line-height:1.1;font-size:clamp(1.05rem,1.75vw,1.3rem);margin:0 0 1.1rem;}
.card__body p,.card__list li{color:var(--cream);font-size:var(--fs-body);letter-spacing:.02em;line-height:1.3;margin:0 0 1.05rem;}
.card__list{text-align:left;}   /* qualifications list is left-aligned on the live site (verified: ragged right edge) */
.card__body p:last-child,.card__list li:last-child{margin-bottom:0;}

/* ---------- Full-bleed info band (photo left / text right) ---------- */
.band{display:grid;grid-template-columns:1fr;}
.band__media img{width:100%;height:auto;object-fit:cover;display:block;}
.info .band__media img{aspect-ratio:0.911;object-position:center 14%;}   /* live site true render: 700x768 */
/* Welcome photo fills the band (set by the text column) and is cropped, so the tall
   0.845 image doesn't force the band taller than the live site's ~847px band. */
.welcome .band__media{position:relative;overflow:hidden;min-height:100%;}
.welcome .band__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.info{background:var(--green);}
.info .band__text{background:var(--green);color:var(--cream);
  padding:clamp(1.5rem,4vw,2.75rem) clamp(1.5rem,4vw,3rem) clamp(2rem,5vw,3.5rem) clamp(1.75rem,17vw,16.5rem);
  display:flex;flex-direction:column;justify-content:center;}
.info .band__text h2{font-family:var(--body);font-weight:400;color:var(--cream);
  font-size:clamp(1.7rem,2.8vw,2.1rem);margin:0 0 1.25rem;max-width:24ch;}
.info .band__text p{color:var(--ink);font-weight:500;font-size:clamp(1.4rem,2.47vw,1.85rem);line-height:1.32;margin:0 0 1.35rem;max-width:24ch;}
.info .band__text p:first-of-type{margin-bottom:clamp(2rem,6vh,4rem);}
.info .band__text p.info__loc{display:flex;align-items:center;gap:.5rem;color:var(--cream);
  font-weight:600;margin-bottom:.8rem;}
.info__loc svg{flex:none;width:1.4em;height:1.4em;color:var(--cream);}
.info .band__text p:last-child{margin-bottom:0;}

/* ---------- Full-bleed welcome band (text left / photo right) ---------- */
.welcome{background:var(--sage);}
.welcome .band__text{background:var(--sage);color:var(--ink);text-align:center;
  padding:clamp(2rem,5vw,3rem) clamp(1.5rem,5vw,4.25rem);
  display:flex;flex-direction:column;justify-content:center;align-items:center;}
.welcome .band__text>*{max-width:27.5rem;}   /* live site: centred copy in a ~450px column */
.welcome .band__text h2{font-family:var(--body);font-weight:500;color:var(--ink);line-height:1.33;
  font-size:var(--fs-lg);margin:0 0 1.25rem;}
.welcome .band__text p{font-size:var(--fs-lg);font-weight:500;line-height:1.35;margin:0 0 1.2rem;}
.welcome .band__text p.welcome__sig{font-weight:400;font-style:normal;color:var(--cream);font-size:var(--fs-md);}

/* ---------- Reviews (square photo + sage box) ---------- */
.reviews{display:grid;grid-template-columns:1fr;gap:30px;max-width:1040px;margin-inline:auto;}
.review{display:flex;flex-direction:column;overflow:hidden;background:var(--sage);}
.review__img{width:100%;aspect-ratio:302/314;object-fit:cover;display:block;}       /* live site: 302x314 visible */
.review__box{flex:1;background:var(--sage);text-align:center;padding:1.05rem 1.5rem 1.4rem;}
.review__name{font-family:var(--body);color:var(--cream);text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;font-size:var(--fs-sm);margin:0 0 .6rem;}
.review__box p{color:var(--ink);font-size:16px;line-height:1.3;margin:0 0 .4rem;}
.review__box p:last-child{margin-bottom:0;}

/* ---------- CTA band (button left over paws / contained photo right) ---------- */
.cta{display:grid;grid-template-columns:1fr;align-items:stretch;}
.cta__action{display:flex;align-items:center;justify-content:center;
  padding:clamp(2rem,6vw,3rem) 1.25rem clamp(1.5rem,4vw,2.5rem);}
.cta__media{display:flex;align-items:flex-end;justify-content:center;
  padding:0 clamp(1rem,3vw,2rem) clamp(2rem,4vw,2.75rem);}
.cta__media img{width:min(576px,100%);aspect-ratio:576/608;height:auto;object-fit:cover;object-position:center 40%;display:block;}
/* CTA "Enquire Now" uses the shared solid .btn component, identical to the hero button. */

/* ---------- Contact page ---------- */
.contact{padding-block:clamp(2.75rem,6vw,4.5rem);}
@media(min-width:820px){
  .contact{display:flex;align-items:center;min-height:767px;}
}
.contact__title{font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(2.9rem,9vw,5.4rem);line-height:1;margin:0 0 1.4rem;}
.contact p{color:var(--ink);font-size:var(--fs-lg);line-height:1.35;margin:0 0 .7rem;}
.contact__email{display:inline-block;color:var(--ink);font-weight:700;font-size:var(--fs-md);
  text-decoration:underline;text-underline-offset:3px;margin:.15rem 0 1.1rem;}
.contact__btn{margin:.5rem 0 1.5rem;}
.contact__closer{font-weight:700;}

/* ---------- Footer ---------- */
.footer{padding:clamp(2.25rem,4.5vw,3.05rem) 1.25rem;background:var(--sage);}
.footer__grid{display:grid;grid-template-columns:1fr;gap:1.6rem;text-align:left;max-width:1200px;margin-inline:auto;}
.footer__label{font-family:var(--body);font-weight:700;color:var(--cream);text-transform:uppercase;
  letter-spacing:.08em;font-size:17px;margin:0 0 .5rem;}
.footer__val{color:var(--ink);font-weight:500;font-size:19px;margin:0;}
.footer__val a{color:var(--ink);text-decoration:none;}

/* ---------- Responsive: two/three column layouts ---------- */
@media(min-width:720px){
  .cards{grid-template-columns:1fr 1fr;}
  /* Outer two review cards equal width; middle card wider so the three cards'
     heights stay consistent (approved exception — see CLAUDE.md). Cards stretch
     to equal height; images share a fixed height so their bottoms line up. */
  .reviews{grid-template-columns:1fr 1.34fr 1fr;align-items:stretch;}
  .review__img{height:314px;aspect-ratio:auto;}
  .footer__grid{grid-template-columns:repeat(3,1fr);gap:2rem;}
}
@media(min-width:820px){
  /* Full-width coloured background, but photo + text centred within the 1366px
     design column (outer 1fr columns are the margins that centre the content). */
  .info{grid-template-columns:minmax(0,1fr) calc(min(var(--maxw),100%)*.51) calc(min(var(--maxw),100%)*.49) minmax(0,1fr);}
  .info>.band__media{grid-column:2;}
  .info>.band__text{grid-column:3;}
  .welcome{grid-template-columns:minmax(0,1fr) calc(min(var(--maxw),100%)*.40) calc(min(var(--maxw),100%)*.60) minmax(0,1fr);}
  .welcome>.band__text{grid-column:2;}
  .welcome>.band__media{grid-column:3;}
  .cta{grid-template-columns:minmax(0,1fr) calc(min(var(--maxw),100%)*.5) calc(min(var(--maxw),100%)*.5) minmax(0,1fr);}
  .cta__action{grid-column:2;justify-content:flex-start;
    padding:clamp(2rem,5vw,4rem) 1.25rem clamp(3rem,7vw,6rem) clamp(2rem,6vw,6rem);}
  .cta__media{grid-column:3;justify-content:flex-end;padding:0;}  /* photo flush to the design column edge */
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}