:root{
    --ivory:#F6FBFB;
    --paper-alt:#EAF6F6;
    --ink:#23264F;
    --ink-soft:#4B5578;
    --teal:#0EA8B3;
    --teal-dark:#0B8890;
    --teal-tint:#E3F6F6;
    --red:#E8342B;
    --red-dark:#C92A22;
    --red-tint:#FDECEB;
    --line:#D7E8E9;
    --shadow: 0 20px 40px -20px rgba(35,38,79,0.20);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    line-height:1.08;
    margin:0;
    color:var(--ink);
  }
  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  img,svg{ display:block; max-width:100%; }
  button{ font-family:inherit; cursor:pointer; }

  .wrap{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Work Sans', sans-serif;
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--teal-dark);
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background:var(--red);
    flex:none;
  }

  section{ position:relative; }
  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:14px 26px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
    border:2px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn svg{ width:18px; height:18px; flex:none; }
  .btn-primary{ background:var(--teal); color:var(--ivory); box-shadow:0 12px 24px -10px rgba(14,168,179,.55); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(14,168,179,.6); background:var(--teal-dark); }
  .btn-marigold{ background:var(--red); color:#FFFFFF; box-shadow:0 12px 24px -10px rgba(232,52,43,.6); }
  .btn-marigold:hover{ transform:translateY(-2px); background:var(--red-dark); }
  .btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
  .btn-outline:hover{ background:var(--ink); color:var(--ivory); transform:translateY(-2px); }
  .btn-outline.on-dark{ border-color:rgba(251,245,236,.55); color:var(--ivory); }
  .btn-outline.on-dark:hover{ background:var(--ivory); color:var(--teal-dark); }

  /* ---------- nav ---------- */
  header.site{
    position:sticky; top:0; z-index:60;
    background:rgba(251,245,236,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:19px;
    color:var(--ink);
  }
  .brand .mark{ width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover; }
  .brand .name{ display:flex; flex-direction:column; line-height:1.15; }
  .brand .name small{ font-family:'Work Sans',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--teal-dark); }

  nav.links{ display:flex; align-items:center; gap:30px; }
  nav.links a{ font-weight:600; font-size:14.5px; color:var(--ink-soft); position:relative; padding:4px 0; }
  nav.links a:hover{ color:var(--teal-dark); }
  .nav-cta{ display:flex; align-items:center; gap:12px; }
  .nav-call{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--teal-dark); }
  .nav-call svg{ width:18px; height:18px; }

  .burger{ display:none; width:42px; height:42px; border-radius:12px; border:1.5px solid var(--line); background:var(--ivory); align-items:center; justify-content:center; }
  .burger span, .burger span::before, .burger span::after{
    content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.2s;
  }
  .burger span::before{ position:absolute; top:-6px; }
  .burger span::after{ position:absolute; top:6px; }

  .mobile-menu{ display:none; flex-direction:column; gap:2px; padding:10px 24px 18px; border-top:1px solid var(--line); }
  .mobile-menu a{ padding:12px 4px; font-weight:600; border-bottom:1px dashed var(--line); }
  .mobile-menu.open{ display:flex; }

  @media (max-width: 880px){
    nav.links, .nav-call{ display:none; }
    .burger{ display:flex; }
  }

  /* ---------- hero ---------- */
  .hero{
    padding:64px 0 30px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap:48px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(32px, 4.6vw, 52px);
    margin:14px 0 10px;
    letter-spacing:-.01em;
  }
  .hero .sub{
    font-family:'Baloo 2',sans-serif;
    font-weight:600;
    color:var(--teal-dark);
    font-size:clamp(17px,2vw,21px);
    margin-bottom:16px;
  }
  .hero p.desc{
    color:var(--ink-soft);
    font-size:16.5px;
    max-width:52ch;
    margin-bottom:28px;
  }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px; }

  .trust-strip{
    display:flex; flex-wrap:wrap; gap:10px 22px;
  }
  .trust-item{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-soft); }
  .trust-item svg{ width:18px; height:18px; color:var(--teal); flex:none; }

  .hero-art{ position:relative; display:flex; align-items:center; justify-content:center; }
  .art-blob{
    position:relative;
    width:min(100%, 420px);
    aspect-ratio:1/1;
    border-radius:50% 50% 46% 54% / 54% 46% 54% 46%;
    background:linear-gradient(155deg, var(--teal-tint), var(--red-tint) 70%);
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow);
  }
  .art-blob svg{ width:78%; height:78%; }
  .paw-orbit{ position:absolute; inset:0; }
  .paw-float{ position:absolute; width:30px; height:30px; opacity:.85; animation:float 5s ease-in-out infinite; }
  @keyframes float{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-10px) rotate(8deg);} }
  @media (prefers-reduced-motion: reduce){ .paw-float, .tail{ animation:none !important; } }

  @media (max-width: 900px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-art{ order:-1; margin-bottom:10px; }
    .art-blob{ width:min(72%, 300px); margin:0 auto; }
  }

  /* paw divider */
  .paw-divider{ display:flex; align-items:center; justify-content:center; gap:20px; padding:34px 0; }
  .paw-divider svg{ width:20px; height:20px; color:var(--line); }
  .paw-divider svg:nth-child(2){ color:var(--red); width:24px; height:24px; }

  /* ---------- section shell ---------- */
  .section{ padding:78px 0; }
  .section.alt{ background:var(--paper-alt); }
  .section-head{ max-width:640px; margin-bottom:44px; }
  .section-head h2{ font-size:clamp(26px,3.4vw,38px); margin-top:12px; }
  .section-head p{ color:var(--ink-soft); margin-top:14px; font-size:16px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

  /* ---------- about ---------- */
  .about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
  .about-art{
    background:var(--teal-tint);
    border-radius:var(--radius-lg);
    padding:34px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line);
  }
  .about-art svg{ width:100%; max-width:280px; }
  .about-copy p{ color:var(--ink-soft); margin-bottom:16px; font-size:16px; }
  .about-copy p:last-child{ margin-bottom:0; }
  .about-copy strong{ color:var(--ink); }
  @media (max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:30px; } }

  /* ---------- services ---------- */
  .service-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .service-card{
    background:var(--ivory);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:32px 28px;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  .service-card .icon-badge{ margin-bottom:18px; }
  .service-card h3{ font-size:21px; margin-bottom:6px; }
  .service-card .tag{ font-size:12.5px; font-weight:700; color:var(--teal-dark); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; display:block;}
  .service-card ul{ display:flex; flex-direction:column; gap:9px; }
  .service-card li{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-soft); }
  .service-card li svg{ width:15px; height:15px; color:var(--red); flex:none; }
  .icon-badge{
    width:54px; height:54px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
  }
  .icon-badge svg{ width:28px; height:28px; }
  .badge-moss{ background:var(--teal-tint); color:var(--teal-dark); }
  .badge-marigold{ background:#FDECEB; color:var(--red-dark); }
  .badge-rose{ background:#E7E9F5; color:var(--ink); }

  @media (max-width:900px){ .service-cards{ grid-template-columns:1fr; } }

  /* ---------- why choose us ---------- */
  .why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
  .why-card{
    padding:26px 20px;
    background:var(--ivory);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    text-align:left;
  }
  .why-card svg{ width:26px; height:26px; color:var(--teal); margin-bottom:14px; }
  .why-card h4{ font-family:'Baloo 2',sans-serif; font-size:16px; font-weight:600; margin-bottom:6px; }
  .why-card p{ font-size:13.5px; color:var(--ink-soft); }
  @media (max-width:980px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

  /* ---------- gallery ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:150px;
    gap:16px;
  }
  .gallery-tile{
    border-radius:var(--radius-md);
    position:relative;
    overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px;
    border:1px solid var(--line);
    color:var(--ink);
    transition:transform .25s ease;
  }
  .gallery-tile:hover{ transform:scale(1.02); }
  .gallery-tile svg{ width:34px; height:34px; }
  .gallery-tile span{ font-weight:700; font-size:13.5px; text-align:center; padding:0 10px; }
  .g1{ grid-column:span 2; grid-row:span 2; background:linear-gradient(155deg,var(--teal-tint),#E3F6F6); }
  .g2{ grid-column:span 2; background:linear-gradient(155deg,var(--red-tint),#E3F6F6); }
  .g3{ grid-column:span 2; background:linear-gradient(155deg,#FDECEB,#F6FBFB); }
  .g4{ grid-column:span 2; background:linear-gradient(155deg,#E3F6F6,var(--teal-tint)); }
  .g5{ grid-column:span 2; grid-row:span 2; background:linear-gradient(155deg,var(--red-tint),#FDECEB); }
  .g6{ grid-column:span 2; background:linear-gradient(155deg,#F6FBFB,#FDECEB); }
  .gallery-note{ margin-top:20px; font-size:13.5px; color:var(--ink-soft); font-style:italic; }

  @media (max-width:900px){
    .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .g1,.g2,.g3,.g4,.g5,.g6{ grid-column:span 1; grid-row:span 1; }
  }

  /* ---------- promise band ---------- */
  .promise{
    background:var(--teal-dark);
    color:var(--ivory);
    padding:86px 0;
    text-align:center;
    position:relative;
  }
  .promise svg.quote-paw{ width:38px; height:38px; margin:0 auto 22px; color:var(--red); }
  .promise blockquote{
    font-family:'Baloo 2',sans-serif;
    font-weight:600;
    font-size:clamp(22px,3.2vw,34px);
    max-width:820px;
    margin:0 auto;
    line-height:1.35;
  }
  .promise .sign{ margin-top:26px; font-size:14px; color:#BEE7E9; font-weight:600; letter-spacing:.04em; }

  /* ---------- contact ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
  .info-card{
    background:var(--ivory);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:32px;
    margin-bottom:22px;
  }
  .info-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px dashed var(--line); }
  .info-row:last-child{ border-bottom:none; }
  .info-row svg{ width:20px; height:20px; color:var(--teal); flex:none; margin-top:2px; }
  .info-row h4{ font-family:'Baloo 2',sans-serif; font-size:15.5px; font-weight:600; margin-bottom:3px; }
  .info-row p{ font-size:14.5px; color:var(--ink-soft); }
  .hours-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
  .hours-table td{ padding:6px 0; color:var(--ink-soft); }
  .hours-table td:last-child{ text-align:right; font-weight:700; color:var(--ink); }

  .form-card{
    background:var(--ivory);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:32px;
  }
  .form-card h3{ font-size:22px; margin-bottom:6px; }
  .form-card > p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:22px; }
  .field{ margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:13px; font-weight:700; color:var(--ink); }
  .field input, .field select, .field textarea{
    border:1.5px solid var(--line);
    border-radius:12px;
    padding:12px 14px;
    font-family:inherit;
    font-size:14.5px;
    background:#fff;
    color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--teal);
    box-shadow:0 0 0 4px var(--teal-tint);
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .form-card button{ width:100%; margin-top:6px; border:none; }

  @media (max-width:880px){
    .contact-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
  }

  /* ---------- footer ---------- */
  footer{ background:var(--ink); color:#AEB9D6; padding:56px 0 26px; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
  .foot-brand{ display:flex; align-items:center; gap:10px; color:#fff; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:19px; margin-bottom:12px; }
  .foot-brand svg{ width:32px; height:32px; }
  footer p{ font-size:13.5px; line-height:1.7; color:#9FB0C7; }
  footer h5{ color:#fff; font-family:'Work Sans',sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
  footer ul{ display:flex; flex-direction:column; gap:10px; }
  footer ul a{ font-size:14px; color:#9FB0C7; transition:color .15s; }
  footer ul a:hover{ color:#fff; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#7C89A8; }
  @media (max-width:800px){ .foot-grid{ grid-template-columns:1fr; } }

  /* floating call button (mobile) */
  .float-call{
    position:fixed; bottom:18px; right:18px; z-index:70;
    width:56px; height:56px; border-radius:50%;
    background:var(--red); color:#FFFFFF;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 26px -8px rgba(232,52,43,.7);
  }
  .float-call svg{ width:24px; height:24px; }
  @media (min-width:881px){ .float-call{ display:none; } }