/* Wanderlodge concept, light direction.
 * Palette is sampled from the real logo: plate cyan #5FCBEB with pure black marks.
 * Measured contrast, not eyeballed:
 *   ink #0B0F12 on white ............ 18.9:1
 *   body #41505A on white ...........  8.1:1
 *   deep cyan #0E7C9E on white ......  4.78:1  (so small text uses this, never #5FCBEB)
 *   ink #0B0F12 on brand cyan .......  11.1:1  (cyan only ever carries black type)
 *   ink #0B0F12 on wash #F4FBFE .....  18.2:1
 * Green appears exactly once in the whole system, on the WhatsApp control.
 */

:root{
  --ink:#0B0F12;
  --body:#41505A;
  --mute:#6B7A85;
  --cyan:#5FCBEB;
  --cyan-deep:#0E7C9E;
  --cyan-ink:#06556E;
  --wash:#F4FBFE;
  --wash-2:#E7F5FC;
  --paper:#FFFFFF;
  --line:#E2ECF2;
  --wa:#25D366;
  /* their second mark, the circular cat and dog badge, measures #9090b0. It
   * watermarks every photograph, so it earns a place in the system.
   * ink on #9090b0 = 6.23:1, #585889 on white = 6.62:1, ink on #F3F3F9 = 17.4:1 */
  --peri:#9090b0;
  --peri-deep:#585889;
  --peri-wash:#F3F3F9;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --shadow:0 18px 44px rgba(11,60,80,.09), 0 2px 8px rgba(11,60,80,.05);
  --shadow-sm:0 8px 22px rgba(11,60,80,.07);
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:"Inter",system-ui,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-ink);text-decoration:none}
h1,h2,h3,h4{font-family:"Archivo",system-ui,"Segoe UI",sans-serif;color:var(--ink);margin:0;line-height:1.08;letter-spacing:-.022em;font-weight:800}
h1,h2,.quote{text-wrap:balance}
h1{font-size:clamp(2.35rem,4.6vw,4rem)}
h2{font-size:clamp(2rem,3.5vw,3.15rem)}
h3{font-size:1.16rem;line-height:1.32;letter-spacing:-.012em;font-weight:700}
p{margin:0}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:28px;padding-right:28px}
.sec{padding-top:88px;padding-bottom:88px}

/* ---- paw texture --------------------------------------------------------
 * Their own paw, lifted out of the "O" of the wordmark, scattered into a
 * seamless 520px tile and laid under the tinted sections at 5.5% black. At that
 * weight it reads as paper texture rather than as clipart: you notice it on the
 * second look, never on the first. The tile is seamless, so nothing lines up
 * into visible rows at any viewport width. */
.tex{position:relative;overflow:hidden}
.tex::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url("assets/paw-tile.png") 0 0 repeat;background-size:520px 520px;opacity:.055}
.tex>.wrap{position:relative;z-index:1}
/* white sections take the texture lighter still, so the page never has a dead
 * flat expanse but the tinted bands stay the ones carrying the pattern */
.tex--soft::before{opacity:.035}

/* the tinted bands sit in from the edge as big soft cards, so the page reads as
 * stacked surfaces rather than as flat colour changes */
.sec--card{margin-left:22px;margin-right:22px;border-radius:44px}
.sec--wash{background:var(--wash)}
.sec--tint{background:var(--wash-2)}
.lede{font-size:1.06rem;color:var(--body);max-width:56ch}

/* eyebrow -------------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-size:.735rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cyan-deep);margin-bottom:16px}
.eyebrow img{width:19px;height:19px;border-radius:50%}

/* buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:"Inter",sans-serif;font-size:.925rem;font-weight:600;
  padding:14px 24px;border-radius:999px;border:1.5px solid transparent;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn--wa{background:var(--wa);color:#04210F;border-color:var(--wa);box-shadow:0 10px 24px rgba(37,211,102,.28)}
.btn--wa svg{fill:#04210F}
.btn--cyan{background:var(--cyan);color:var(--ink);border-color:var(--cyan);box-shadow:0 10px 24px rgba(95,203,235,.34)}
.btn--ghost{background:transparent;color:var(--ink);border-color:#CBDDE6}
.btn--ghost:hover{border-color:var(--ink)}
.btn--ink{background:var(--ink);color:#fff}
.btn--sm{padding:10px 18px;font-size:.87rem}

/* header --------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:26px;height:74px}
.hdr__logo img{height:27px;width:auto}
.nav{display:flex;align-items:center;gap:23px;margin-left:auto}
.nav a{color:var(--ink);font-size:.9rem;font-weight:500}
.nav a:hover{color:var(--cyan-deep)}
.nav a.on{color:var(--cyan-deep);font-weight:600}
.hdr__tel{font-weight:700;color:var(--ink);font-size:.9rem;font-variant-numeric:tabular-nums}

/* hero ----------------------------------------------------------------- */
/* isolate so the headline highlighter, which sits at z-index -1, paints on top
 * of the section background instead of disappearing behind it. */
.hero{background:var(--wash);border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:60px;align-items:center;padding-top:70px;padding-bottom:78px}
.hero h1{font-size:clamp(2.35rem,4.3vw,3.7rem)}
.hero .lede{margin-top:22px;font-size:1.1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* a marker swipe of brand cyan behind one word. Black on cyan is 11.1:1. */
.swipe{position:relative;display:inline-block;color:var(--ink)}
.swipe::before{content:"";position:absolute;left:-.1em;right:-.1em;top:.1em;bottom:.04em;
  background:var(--cyan);border-radius:.22em;transform:rotate(-1.3deg);z-index:-1}

/* pill eyebrow */
.hero__pill{display:inline-flex;align-items:center;gap:9px;background:var(--cyan);color:var(--ink);
  border-radius:999px;padding:7px 18px 7px 7px;margin-bottom:22px;
  font-size:.735rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.hero__pill img{width:26px;height:26px;border-radius:50%}

/* photo cluster: a flat cyan disc, the main frame tilted one way, a square
 * inset tilted the other, and the rating card sitting across the corner. */
.hero__art{position:relative;padding:26px 8px 30px}
.hero__blob{position:absolute;right:-28px;top:-20px;width:45%;aspect-ratio:1;
  border-radius:50%;background:var(--cyan);z-index:0}
.hero__blob--2{right:auto;left:-4px;bottom:34px;top:auto;width:14%;background:var(--cyan-deep);opacity:.16}
.hero__doodles{position:absolute;z-index:2;right:-60px;top:-90px;width:min(310px,48%);height:auto;
  pointer-events:none;filter:drop-shadow(0 10px 12px rgba(28,35,53,.12));transform:rotate(2deg)}
.hero__frame{position:relative;z-index:1}
.hero__main{position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden;
  transform:rotate(-1.6deg);box-shadow:var(--shadow)}
.hero__main img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;object-position:50% 42%}
.hero__inset{position:absolute;z-index:3;left:-6px;bottom:-6px;width:36%;max-width:182px;
  border-radius:24px;overflow:hidden;border:6px solid #fff;transform:rotate(4.5deg);
  box-shadow:var(--shadow);background:#fff}
.hero__inset img{width:100%;aspect-ratio:1;height:auto;object-fit:cover;object-position:50% 50%}
.rating-chip{position:absolute;z-index:4;right:-6px;bottom:6px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 20px;box-shadow:var(--shadow);max-width:272px;
  display:flex;align-items:flex-start;gap:13px}
.rating-chip__g{width:28px;height:28px;flex:none;margin-top:3px}
.rating-chip__top{display:flex;align-items:center;gap:9px}
.rating-chip b{font-family:"Archivo",sans-serif;font-size:1.6rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
/* Google renders its own review stars in brand yellow #FBBC05. The stars are a
 * graphic, never the only carrier of meaning: the 4.8 beside them is ink on
 * white at 18.9:1, and the count and date are spelled out underneath. */
.stars{color:#FBBC05;font-size:1.06rem;letter-spacing:2px;line-height:1}
.rating-chip span{display:block;font-size:.735rem;color:var(--mute);margin-top:4px;line-height:1.42}

/* the same attribution, inline, for the trust strip and the licence panel.
 * `.trust__i b` sets display:block and outranks a bare class, so this has to
 * carry the element too or the mark stacks above the line. */
.g-inline,.trust__i b.g-inline{display:flex;align-items:center;gap:8px}
.g-inline img{width:17px;height:17px;flex:none}
.eyebrow img.g-mark{width:18px;height:18px;border-radius:0}

/* services strip, the energetic beat between the hero and the proof ------- */
.ticker{background:var(--cyan)}
.ticker__in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:14px 24px;padding:16px 0;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.06rem;
  letter-spacing:-.012em;color:var(--ink)}
.ticker img{width:19px;height:19px;border-radius:50%;opacity:.9}

/* trust strip ---------------------------------------------------------- */
.trust{border-bottom:1px solid var(--line)}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.trust__i{padding:26px 30px;border-left:1px solid var(--line)}
.trust__i:first-child{border-left:0;padding-left:0}
.trust__i b{display:block;font-family:"Archivo",sans-serif;font-size:.98rem;color:var(--ink);letter-spacing:-.01em}
.trust__i span{font-size:.79rem;color:var(--mute);line-height:1.5;display:block;margin-top:4px}

/* section head --------------------------------------------------------- */
.head{max-width:640px;margin-bottom:46px}
.head p{margin-top:16px}

/* service cards -------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card__img{height:186px;width:100%;object-fit:cover;display:block}
.card__b{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card__b p{font-size:.895rem;margin-top:9px;color:var(--body)}
.card__go{margin-top:auto;padding-top:18px;font-size:.755rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cyan-deep)}

/* split with photo ----------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:60px;align-items:center}
.split--flip .split__art{order:-1}
.split__art img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow);display:block}
.split__art--tall img{aspect-ratio:1/1;height:auto;object-fit:cover;object-position:50% 22%}

/* numbered inclusions -------------------------------------------------- */
.incl{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;margin-top:8px}
.incl__i{padding-top:18px;border-top:2px solid var(--cyan)}
.incl__i b{display:block;font-family:"Archivo",sans-serif;font-size:1.02rem;color:var(--ink);margin-bottom:6px}
.incl__i p{font-size:.885rem}

.lede--gap{margin-top:16px}
.cta-row{margin-top:26px}

/* review --------------------------------------------------------------- */
.quote{margin:0;font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.022em;
  font-size:clamp(1.45rem,2.5vw,2.1rem);line-height:1.24;color:var(--ink)}
.quote__mark{display:block;font-size:3.4rem;line-height:.6;color:var(--cyan);margin-bottom:14px}
.attrib{font-size:.83rem;color:var(--mute);margin-top:20px;max-width:46ch}
.proof{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.proof__i{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 18px;box-shadow:var(--shadow-sm);min-width:172px}
.proof__i b{display:block;font-family:"Archivo",sans-serif;font-size:1.5rem;color:var(--cyan-deep);letter-spacing:-.02em}
.proof__i span{font-size:.775rem;color:var(--mute);line-height:1.45;display:block;margin-top:2px}

/* recognition ---------------------------------------------------------- */
.marks{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden}
.mark{flex:1 1 210px;padding:28px 18px;text-align:center;border-left:1px solid var(--line);
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.mark:first-child{border-left:0}

/* visit ---------------------------------------------------------------- */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:56px;align-items:start}
.dl{margin-top:28px;border-top:1px solid var(--line)}
.dl__row{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.dl__row dt{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.dl__row dd{margin:0;font-size:.94rem;color:var(--ink)}
.panel{background:var(--cyan);border-radius:var(--r-lg);padding:34px 32px}
.panel h3{font-size:1.28rem;margin-bottom:18px}
.panel ul{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.panel li{display:flex;gap:12px;font-size:.9rem;color:#08303E;line-height:1.55}
.panel li img{width:20px;height:20px;border-radius:50%;flex:none;margin-top:2px}
.panel li b{color:var(--ink)}

/* footer --------------------------------------------------------------- */
.ftr{background:var(--wash);border-top:1px solid var(--line);padding-top:60px;padding-bottom:34px}
.ftr__trail{position:absolute;right:10px;bottom:-10px;width:min(430px,38vw);opacity:.1;
  pointer-events:none;z-index:0}
.ftr__in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px}
.ftr__logo img{height:26px;margin-bottom:18px}
.ftr p{font-size:.87rem;color:var(--mute);line-height:1.7}
.ftr h4{font-family:"Archivo",sans-serif;font-size:.755rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);margin-bottom:14px;font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr ul a{font-size:.89rem;color:var(--ink)}
.ftr ul a:hover{color:var(--cyan-deep)}
.ftr__base{margin-top:44px;padding-top:20px;border-top:1px solid #D8E8F0;
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.775rem;color:var(--mute)}

/* floating contact controls ------------------------------------------- */
.fabs{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;gap:12px;justify-items:center}
.fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(11,60,80,.26)}
.fab--wa{background:var(--wa)}
.fab--tel{background:var(--ink)}
.fab svg{width:25px;height:25px;fill:#fff}

/* responsive ----------------------------------------------------------- */
@media (max-width:1020px){
  .cards{grid-template-columns:1fr 1fr}
  .trust__in{grid-template-columns:1fr 1fr}
  .trust__i:nth-child(3){border-left:0;padding-left:0}
  .trust__i:nth-child(odd){border-left:0;padding-left:0}
  .hdr__in{flex-wrap:wrap;height:auto;padding-top:13px;gap:12px}
  .hdr__logo img{height:23px}
  .hdr__in .btn--sm{padding:9px 15px;font-size:.82rem}
  .hdr__tel{font-size:.85rem}
  .nav{order:3;width:100%;margin-left:0;gap:16px;justify-content:space-between;
    border-top:1px solid var(--line);padding:9px 0 10px}
  .nav a.hide-m{display:none}
  .hdr__tel{margin-left:auto}
}
@media (max-width:880px){
  .hero__in,.split,.visit,.ftr__in{grid-template-columns:1fr;gap:38px}
  .split--flip .split__art{order:0}
  .hero__main img{aspect-ratio:3/2;height:auto}
  .hero__art{padding:22px 6px 26px}
  .hero__doodles{right:0;top:-52px;width:220px}
  .rating-chip{right:0;bottom:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .sec--card{margin-left:10px;margin-right:10px;border-radius:26px}
  .tex::before{background-size:360px 360px;opacity:.05}
  .wrap{padding-left:18px;padding-right:18px}
  .sec{padding-top:58px;padding-bottom:58px}
  .hero__in{padding-top:44px;padding-bottom:54px}
  .cards,.incl{grid-template-columns:1fr}
  .mark{flex:1 1 100%;border-left:0;border-top:1px solid var(--line);padding:20px 16px}
  .mark:first-child{border-top:0}
  .trust__in{grid-template-columns:1fr}
  .trust__i{border-left:0;padding-left:0;padding-top:18px;padding-bottom:18px;
    border-top:1px solid var(--line)}
  .trust__i:first-child{border-top:0}
  .hero__cta .btn{width:100%}
  .hero__stats{gap:22px}
  .dl__row{grid-template-columns:1fr;gap:3px}
  .proof__i{min-width:0;width:100%}
  .hero__art{padding:18px 0 0}
  .hero__blob{right:0;top:0;width:44%}
  .hero__blob--2{display:none}
  .hero__doodles{right:auto;left:10px;top:-42px;width:180px}
  .hero__inset{width:38%;max-width:132px;left:0;bottom:-12px;border-width:5px}
  .rating-chip{position:static;margin-top:44px;max-width:none;transform:none}
  .ticker__in{gap:10px 16px;font-size:.95rem;padding:14px 0}
  .ftr__base{gap:6px 18px}
}

/* ===== daycare page ===================================================== */
.phead{max-width:800px;padding-top:74px;padding-bottom:44px;isolation:isolate}
.phead .lede{margin-top:20px;max-width:62ch}
.bleed{width:100%;aspect-ratio:3/1;height:auto;object-fit:cover;object-position:50% 50%;display:block}
.bleed-cap{font-size:.775rem;color:var(--mute);padding-top:12px}

.day{display:grid;grid-template-columns:1fr 1fr;gap:38px 48px}
.day__i{display:grid;grid-template-columns:62px 1fr;gap:20px;
  padding-top:22px;border-top:1px solid var(--line)}
.day__n{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.55rem;
  color:var(--cyan-deep);letter-spacing:-.02em;line-height:1}
.day__i h3{margin-bottom:8px}
.day__i p{font-size:.9rem}

.mosaic{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:200px 200px;gap:16px}
.mosaic img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:var(--r-md);display:block}
.mosaic figure:nth-child(1) img{object-position:50% 18%}
.mosaic figure{margin:0;overflow:hidden;border-radius:var(--r-md)}
.mosaic figure:nth-child(1){grid-row:span 2}
.mosaic figure:nth-child(4){grid-column:span 2}

.band{background:var(--cyan);border-radius:var(--r-lg);padding:clamp(34px,4vw,54px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.band h2{max-width:20ch}
.band p{color:#08303E;margin-top:14px;max-width:44ch;font-size:.97rem}
.band__cta{display:grid;gap:12px;justify-items:stretch}
.band .btn--ghost{border-color:var(--ink);color:var(--ink)}

@media (max-width:880px){
  .day{grid-template-columns:1fr;gap:26px}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:170px 170px 170px}
  .mosaic figure:nth-child(1){grid-row:span 1;grid-column:span 2}
  .mosaic figure:nth-child(4){grid-column:span 2}
  .band{grid-template-columns:1fr}
}
@media (max-width:620px){
  .bleed{aspect-ratio:3/2}
  .phead{padding-top:42px;padding-bottom:30px}
  .day__i{grid-template-columns:46px 1fr;gap:14px}
  .mosaic{grid-template-columns:1fr;grid-template-rows:none}
  .mosaic figure{height:210px}
  .mosaic figure:nth-child(1),.mosaic figure:nth-child(4){grid-column:span 1}
}

/* ===== places: the three real locations a day happens in ================= */
.sec--peri{background:var(--peri-wash)}
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.place{background:#fff;border:1px solid #E6E6EF;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease}
.place:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.place img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;display:block}
.place__b{padding:22px 24px 26px}
.place__n{display:inline-block;font-family:"Archivo",sans-serif;font-weight:800;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--peri-deep);margin-bottom:9px}
.place__b p{font-size:.895rem;margin-top:8px}

/* ===== gallery =========================================================== */
.gal{display:grid;grid-template-columns:1fr 1.9fr;grid-auto-rows:340px;gap:16px}
.gal figure{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
/* Two frames, not four. Twelve real photographs exist and the rest are already
 * carrying the services, the places and the review; padding this row would have
 * meant showing the same dog twice. */
@media (max-width:1020px){ .places{grid-template-columns:1fr 1fr} }
@media (max-width:880px){
  .gal{grid-template-columns:1fr 1.6fr;grid-auto-rows:270px}
}
@media (max-width:620px){
  .places{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr;grid-auto-rows:220px}
}