:root{
  /* color: accent = surfaces/blobs/icons; accent-strong = text and button fills (AA on cream/white) */
  --color-bg:#FFF8F2;
  --color-surface:#FFFFFF;
  --color-fg:#1E1A17;
  --color-muted:#6B5F57;
  --color-tint:#FDE4D0;
  --color-line:#FDE4D0;
  --color-accent:#F26A10;
  --color-accent-strong:#BF4E08;
  --color-accent-press:#A64307;

  /* spacing: 4pt base, 8pt scale (4 8 12 16 24 32 40 48 56 64 80 96) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-14:3.5rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  /* component heights: 40 / 48 / 56 */
  --h-sm:2.5rem; --h-md:3rem; --h-lg:3.5rem;

  /* icon sizes: 16 / 24 / 32 / 40 / 64 */
  --icon-sm:1rem; --icon-md:1.5rem; --icon-lg:2rem; --icon-xl:2.5rem; --icon-2xl:4rem;

  /* radius by role: chip 8, card 16, panel 24, pill */
  --r-sm:.5rem; --r-md:1rem; --r-lg:1.5rem; --r-pill:9999px;

  /* elevation: only for things that float (header pills, perks bar) */
  --shadow-float:0 8px 24px rgba(30,26,23,.08);

  /* type scale, ratio 1.25 (+ one in-between step for captions) */
  --fs-xs:.8rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.25rem;
  --fs-lg:1.5625rem; --fs-xl:1.953rem; --fs-2xl:2.441rem; --fs-hero:clamp(2.5rem,5.4vw,4rem);

  --f-head:"Baloo 2",system-ui,sans-serif;
  --f-body:"Nunito",system-ui,sans-serif;
  --f-script:"Caveat Brush","Segoe Script",cursive;

  /* layout */
  --container:70rem;
  --gutter:var(--space-6);
  --w:min(100% - 2 * var(--gutter), var(--container));
  --header-pad:var(--space-6);
  --header-h:var(--h-lg);
  --hero-min:30rem;
  --media-min:22rem;
  --cta-media-min:12rem;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--color-bg);color:var(--color-fg);font:400 var(--fs-base)/1.5 var(--f-body);overflow-x:hidden}
img,svg{display:block}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--color-fg);outline-offset:var(--space-1)}
h1,h2,h3{font-family:var(--f-head);line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
svg use{pointer-events:none}

/* buttons: 48 default, 56 for the main action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--h-md);padding-inline:var(--space-6);font:700 var(--fs-base)/1 var(--f-head);border-radius:var(--r-pill);transition:transform .15s,background-color .15s}
.btn svg{width:var(--icon-md);height:var(--icon-md)}
.btn:hover{transform:translateY(-2px)}
.btn--lg{height:var(--h-lg);padding-inline:var(--space-8)}
.btn--solid{background:var(--color-accent-strong);color:#fff}
.btn--solid:hover{background:var(--color-accent-press)}
.btn--round{width:var(--h-lg);padding:0;background:var(--color-surface);color:var(--color-accent-strong);border:2px solid var(--color-line)}
.btn--white{background:var(--color-surface);color:var(--color-fg)}
.btn--white svg:last-child{color:var(--color-accent-strong)}

/* header */
.top{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4);width:var(--w);margin-inline:auto;padding-top:var(--header-pad)}
.brand{display:flex;align-items:center;gap:var(--space-2);font:700 var(--fs-md)/1 var(--f-head)}
.brand__paw{width:var(--icon-lg);height:var(--icon-lg);color:var(--color-accent)}
.top__brand{justify-self:start;height:var(--header-h);padding-inline:var(--space-6);background:var(--color-surface);border-radius:var(--r-pill);box-shadow:var(--shadow-float)}
.nav{justify-self:center;display:flex;align-items:center;gap:var(--space-8);height:var(--header-h);padding-inline:var(--space-8);background:var(--color-surface);border-radius:var(--r-pill);box-shadow:var(--shadow-float);font-weight:600;font-size:var(--fs-sm)}
.nav a{padding-block:var(--space-2);border-bottom:3px solid transparent}
.nav a[aria-current]{color:var(--color-accent-strong);border-color:var(--color-accent-strong)}
.nav a:hover{color:var(--color-accent-strong)}
.top__cta{justify-self:end;height:var(--header-h)}

/* hero */
.hero{position:relative;width:var(--w);margin-inline:auto;padding-block:var(--space-10) var(--space-16);display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-6);align-items:center;min-height:var(--hero-min)}
/* organic blobs on the hero edges (curves only, no hard rectangles) */
.hero::before{content:"";position:absolute;z-index:-1;inset:calc(-1 * (var(--header-pad) + var(--header-h) + var(--space-4))) calc(50% - 50vw) 0 calc(50% - 50vw);pointer-events:none;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 90'%3E%3Cpath fill='%23F26A10' d='M0 0H150C142 26 108 42 74 37C38 32 14 52 0 88Z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E%3Cpath fill='%23F26A10' d='M40 0H140V120C112 118 88 96 78 66C68 36 58 12 40 0Z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 180'%3E%3Cpath fill='%23F26A10' d='M0 36C44 20 96 52 102 100C108 142 60 178 0 172Z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%23F26A10' d='M300 70C252 58 206 92 186 138C170 176 122 186 90 214C62 238 52 266 78 284C112 306 214 296 300 288Z'/%3E%3C/svg%3E");background-position:0 0,100% 0,0 78%,100% 96%;background-size:11rem auto,6rem auto,min(6.5rem,max(var(--space-6),calc((100vw - var(--container)) / 2))) auto,min(24vw,19rem) auto}
.hero h1{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.02em;max-width:9em}
.hero__tag{margin-top:var(--space-6);font:700 clamp(var(--fs-lg),2.6vw,var(--fs-xl))/1.1 var(--f-head);color:var(--color-accent-strong);max-width:14em}
.u{background:linear-gradient(var(--color-accent-strong),var(--color-accent-strong)) 0 100%/100% 3px no-repeat;padding-bottom:var(--space-1)}
.hero__sub{margin-top:var(--space-4);max-width:24em;font-weight:600;font-size:var(--fs-md)}
.hero__actions{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-8)}
.hero__media{position:relative;align-self:stretch;min-height:var(--media-min)}
.deco{position:absolute;fill:var(--color-accent);color:var(--color-accent)}
.deco--heart{width:var(--space-12);height:var(--space-12);top:12%;right:4%}
.deco--paw1{width:var(--icon-xl);height:var(--icon-xl);top:6%;right:26%;opacity:.25}
.hero__media::after{content:"";position:absolute;top:4%;left:-1%;width:var(--space-14);height:var(--space-14);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23F26A10' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M6 30 24 22M10 48 32 44M26 8 38 24'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.deco--paw2{width:var(--icon-xl);height:var(--icon-xl);top:44%;right:0;opacity:.25}

/* photo placeholders (TODO(content): replace with real photos) */
.ph{display:grid;place-items:center;text-align:center;color:var(--color-muted);background:var(--color-tint);font:700 var(--fs-sm)/1.2 var(--f-body);border:2px dashed color-mix(in srgb,var(--color-accent) 45%,transparent)}
.ph--hero{position:absolute;inset:0;border-radius:var(--r-lg) var(--r-lg) 0 0;font-size:var(--fs-base)}
.ph--card{aspect-ratio:5/4;border-radius:var(--r-md) var(--r-md) 0 0}
.ph--avatar{flex:none;width:var(--space-24);height:var(--space-24);border-radius:50%}
.ph--cta{align-self:end;min-height:var(--cta-media-min);border-radius:var(--r-lg) var(--r-lg) 0 0;background:color-mix(in srgb,#fff 18%,transparent);color:var(--color-fg);border-color:color-mix(in srgb,#fff 60%,transparent)}

/* perks */
.perks{position:relative;z-index:2;width:var(--w);margin:calc(var(--space-10) * -1) auto 0;background:var(--color-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-float);padding:var(--space-4) var(--space-6);display:grid;grid-template-columns:repeat(4,1fr)}
.perk{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);font:700 var(--fs-base)/1.2 var(--f-head)}
.perk+.perk{border-left:1px solid var(--color-line)}
.perk__ic{flex:none;width:var(--h-lg);height:var(--h-lg);border-radius:50%;background:var(--color-tint);display:grid;place-items:center;color:var(--color-accent-strong);fill:var(--color-accent-strong)}
.perk__ic svg{width:var(--icon-lg);height:var(--icon-lg)}

/* sections: 96 / 80 / 96 / 80 so they do not all breathe the same */
.sec-head{text-align:center;margin-bottom:var(--space-10)}
.sec-head h2{font-size:var(--fs-xl);font-weight:700}
.sec-head p{margin-top:var(--space-2);color:var(--color-muted);font-weight:600}

.services{width:var(--w);margin:var(--space-24) auto 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.card{position:relative;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--r-md);text-align:center;padding-bottom:var(--space-6)}
.card__ic{position:relative;z-index:1;margin:calc(var(--space-6) * -1) auto 0;width:var(--h-md);height:var(--h-md);border-radius:50%;background:var(--color-accent);color:#fff;fill:#fff;display:grid;place-items:center;border:var(--space-1) solid var(--color-surface)}
.card__ic svg{width:var(--icon-md);height:var(--icon-md)}
.card h3{margin-top:var(--space-3);font-size:var(--fs-md);font-weight:700}
.card p{margin-top:var(--space-2);padding-inline:var(--space-4);font-size:var(--fs-sm);color:var(--color-muted)}

.why{width:var(--w);margin:var(--space-20) auto 0;background:var(--color-tint);border-radius:var(--r-lg);padding:var(--space-6) var(--space-10);display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-10);align-items:center}
.why__title{display:flex;align-items:center;gap:var(--space-4);padding-right:var(--space-10);border-right:1px solid color-mix(in srgb,var(--color-accent) 50%,transparent)}
.why__medal{width:var(--icon-2xl);height:var(--icon-2xl);color:var(--color-accent-strong)}
.why h2{font-size:var(--fs-lg);font-weight:700}
.why__list{display:grid;gap:var(--space-2);font-weight:700}
.why__list li{display:flex;align-items:center;gap:var(--space-3)}
.why__list svg{flex:none;width:var(--icon-md);height:var(--icon-md);padding:var(--space-1);border-radius:50%;background:var(--color-accent-strong);color:#fff}
.why__script{font:400 var(--fs-xl)/1.1 var(--f-script);transform:rotate(-4deg);max-width:9em}

.reviews{width:var(--w);margin:var(--space-24) auto 0}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.quote{display:flex;align-items:center;gap:var(--space-4);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--r-md);padding:var(--space-4);font-size:var(--fs-sm);font-weight:600}
.stars{display:flex;gap:var(--space-1);margin-top:var(--space-2);color:var(--color-accent)}
.stars svg{width:var(--icon-sm);height:var(--icon-sm)}
.quote__by{margin-top:var(--space-1);color:var(--color-muted);font-size:var(--fs-xs);font-weight:700}

.cta{position:relative;width:var(--w);margin:var(--space-20) auto 0;background:var(--color-accent);color:#fff;border-radius:var(--r-lg);padding:var(--space-10);display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-6)}
.cta h2{font-size:var(--fs-2xl);font-weight:700;max-width:14em}
.cta p{margin:var(--space-2) 0 var(--space-8);font:700 var(--fs-md)/1.3 var(--f-body)}
.cta .ph--cta{margin:calc(var(--space-10) * -1) calc(var(--space-10) * -1) calc(var(--space-10) * -1) 0}

.foot{width:var(--w);margin:var(--space-12) auto 0;padding-block:var(--space-6);display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-6);font-size:var(--fs-sm);font-weight:600}
.brand--sm{font-size:var(--fs-base)}
.brand--sm .brand__paw{width:var(--icon-md);height:var(--icon-md)}
.foot__name{padding-left:var(--space-6);border-left:1px solid var(--color-accent);margin-right:auto}
.foot__social{display:flex;gap:var(--space-2)}
.foot__social a{display:grid;place-items:center;width:var(--h-sm);height:var(--h-sm);border-radius:50%;background:var(--color-fg);color:#fff;font:700 var(--fs-xs) var(--f-head)}
.foot__social svg{width:var(--icon-md);height:var(--icon-md)}
.foot__social a:hover{background:var(--color-accent-strong)}
.foot__line{display:flex;align-items:center;gap:var(--space-2)}
.foot__line svg{width:var(--icon-md);height:var(--icon-md);color:var(--color-accent-strong)}

/* tablet and below: no menu, logo + CTA on one row; section gaps scale ~0.6 */
@media (max-width:960px){
  :root{--gutter:var(--space-4);--header-pad:var(--space-4);--header-h:var(--h-md);--media-min:18rem}
  .top{display:flex;justify-content:space-between;gap:var(--space-2)}
  .top__brand{min-width:0;white-space:nowrap;padding-inline:var(--space-4)}
  .brand{font-size:var(--fs-base)}
  .nav{display:none}
  .top__cta{flex:none;padding-inline:var(--space-4);font-size:var(--fs-sm)}
  .top__cta svg{display:none}
  .hero{grid-template-columns:1fr;padding-block:var(--space-8) var(--space-10);min-height:0}
  .hero::before{background-size:8rem auto,4.5rem auto,5rem auto,min(46vw,14rem) auto}
  .perks{grid-template-columns:repeat(2,1fr);margin-top:var(--space-6)}
  .perk:nth-child(3){border-left:0}
  .sec-head{margin-bottom:var(--space-8)}
  .services,.reviews{margin-top:var(--space-16)}
  .why,.cta{margin-top:var(--space-12)}
  .foot{margin-top:var(--space-10)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr;gap:var(--space-6)}
  .why__title{border-right:0;padding-right:0}
  .quotes{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cta .ph--cta{margin:0 calc(var(--space-10) * -1) calc(var(--space-10) * -1)}
}
/* mobile 390 */
@media (max-width:520px){
  :root{--media-min:16rem;--cta-media-min:10rem}
  .hero{padding-top:var(--space-6)}
  .hero h1{font-size:var(--fs-2xl)}
  .hero__sub{font-size:var(--fs-base)}
  .perks{grid-template-columns:1fr;padding:var(--space-2) var(--space-4)}
  .perk+.perk,.perk:nth-child(3){border-left:0;border-top:1px solid var(--color-line)}
  .cards{grid-template-columns:1fr}
  .why{padding:var(--space-6)}
  .why__title{flex-wrap:wrap}
  .why__script{max-width:none}
  .quote{align-items:flex-start}
  .ph--avatar{width:var(--space-16);height:var(--space-16)}
  .cta{padding:var(--space-6)}
  .cta h2{font-size:var(--fs-xl)}
  .cta .ph--cta{margin:0 calc(var(--space-6) * -1) calc(var(--space-6) * -1)}
  .foot{flex-direction:column;align-items:flex-start}
  .foot__name{border-left:0;padding-left:0}
}