/* ========================================================= Way of the Dog Grooming — Site Stylesheet Ada, Michigan ========================================================= */ :root{ --cream:#FBF7F1; --cream-2:#F3EDE3; --cream-3:#EAE2D5; --white:#FFFFFF; --ink:#2B2823; --ink-soft:#5C564D; --ink-faint:#8A8378; --sage:#7C8F6F; --sage-dark:#5E6F53; --sage-light:#E4EADF; --clay:#C08163; --clay-light:#F5E5DC; --gold:#E0AC5E; --line:#E2DACD; --radius:20px; --radius-sm:12px; --radius-lg:28px; --max:1180px; --shadow:0 14px 34px rgba(43,40,35,.08); --shadow-lg:0 24px 60px rgba(43,40,35,.12); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:104px} body{ font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4{ font-family:'Fraunces',Georgia,'Times New Roman',serif; line-height:1.15;font-weight:600;letter-spacing:-0.01em; /* WONK 0 = Fraunces' plain letterforms (no curly f, no swashy g). To bring the quirky version back, delete the next line AND change the Fraunces font URL in each page's back to the plain "opsz,wght@9..144,400;..." form. */ font-variation-settings:"WONK" 0; } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--max);margin:0 auto;padding:0 28px} .narrow{max-width:820px;margin:0 auto;padding:0 28px} /* ---------------- TYPE HELPERS ---------------- */ .eyebrow{ font-size:12px;letter-spacing:.18em;text-transform:uppercase; font-weight:800;color:var(--sage-dark);margin-bottom:14px; } .eyebrow.light{color:#9FB093} .lead{font-size:19px;color:var(--ink-soft)} /* ---------------- BUTTONS ---------------- */ .btn{ display:inline-block;padding:14px 30px;border-radius:100px; font-family:'Nunito Sans',sans-serif; font-weight:700;font-size:15px;text-decoration:none; transition:.2s ease;border:2px solid transparent;cursor:pointer; text-align:center; } .btn-primary{background:var(--sage);color:#fff} .btn-primary:hover{background:var(--sage-dark);transform:translateY(-2px)} .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent} .btn-ghost:hover{background:var(--ink);color:var(--cream)} .btn-light{background:#fff;color:var(--sage-dark)} .btn-light:hover{background:var(--cream-2)} .btn-sm{padding:10px 22px;font-size:14px} /* ---------------- EDITOR NOTES (remove before launch) ---------------- */ .note{ background:var(--clay-light);border-left:3px solid var(--clay); padding:11px 15px;border-radius:0 8px 8px 0;font-size:13px; color:#8A5238;margin-top:16px;line-height:1.6; } .note strong{font-weight:800} /* ---------------- IMAGE PLACEHOLDERS ---------------- */ .ph{ min-height:340px; background:repeating-linear-gradient(45deg,var(--cream-2),var(--cream-2) 12px,var(--cream-3) 12px,var(--cream-3) 24px); display:flex;align-items:center;justify-content:center; color:var(--ink-faint);font-size:12px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;text-align:center; border-radius:var(--radius);padding:16px;border:1px dashed #C9BFAE; } /* ---------------- NAV ---------------- */ nav{ position:sticky;top:0;z-index:100;background:rgba(251,247,241,.94); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav-in{ display:flex;align-items:center;justify-content:space-between;height:92px; max-width:1360px;margin:0 auto;padding:0 28px; } .logo{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0} .logo-mark{width:74px;height:auto;flex-shrink:0} .logo-word{width:176px;height:auto;flex-shrink:0} .logo-txt{ font-family:'Fraunces',serif;font-size:14px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;line-height:1.3; } @media(max-width:520px){ .logo-mark{width:54px} .logo-word{width:128px} } .nav-links{display:flex;gap:22px;list-style:none;font-size:15px;font-weight:600} .nav-links a{text-decoration:none;color:var(--ink-soft);transition:.2s;padding:4px 0; border-bottom:2px solid transparent;white-space:nowrap} @media(max-width:1400px){ .nav-links{gap:13px;font-size:13.5px} .logo-word{width:140px} .nav-cta .btn{padding:12px 16px;font-size:14px} } .nav-links a:hover{color:var(--sage-dark)} .nav-links a.active{color:var(--ink);border-bottom-color:var(--sage)} .nav-cta{display:flex;align-items:center;gap:14px} .burger{display:none;background:none;border:none;cursor:pointer;padding:8px; flex-direction:column;gap:5px} .burger span{display:block;width:24px;height:2px;background:var(--ink); border-radius:2px;transition:.25s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{ display:none;background:var(--cream);border-bottom:1px solid var(--line); padding:18px 28px 26px; } .mobile-menu.open{display:block} .mobile-menu ul{list-style:none} .mobile-menu li{border-bottom:1px solid var(--line)} .mobile-menu li:last-child{border:none} .mobile-menu a{display:block;padding:14px 0;text-decoration:none; font-weight:700;font-size:16px} .mobile-menu .btn{width:100%;margin-top:18px} @media(max-width:1130px){ .nav-links{display:none} .burger{display:flex} .nav-cta .btn{display:none} } /* ---------------- HERO ---------------- */ .hero{padding:64px 0 88px} .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .hero h1{font-size:clamp(30px,3.5vw,44px);margin-bottom:20px} .hero h1 em{font-style:normal;color:var(--sage-dark)} .hero p{font-size:19px;color:var(--ink-soft);max-width:490px;margin:0 auto 32px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} .hero-grid>div:first-child{text-align:center} .hero-cta-under{margin-top:18px;justify-content:center;display:none} @media(max-width:940px){ .hero-cta-desktop{display:none} .hero-cta-under{display:flex} } .hero-img{width:100%;height:auto;border-radius:var(--radius-lg)} @media(max-width:940px){ .hero{padding:52px 0 64px} .hero-grid{grid-template-columns:1fr;gap:36px} .hero-img{height:auto} } /* ---------------- HERO LOGO (full stacked lockup) ---------------- Deliberately the largest element on the homepage — the logo leads, the headline supports it. */ .hero-logo{display:block;width:min(360px,100%);height:auto;margin:0 auto 30px} @media(max-width:940px){.hero-logo{width:min(300px,80%);margin:0 auto 24px}} @media(max-width:520px){.hero-logo{width:min(240px,86%)}} /* ---------------- LOGO FEATURE BAND ---------------- */ .logo-band{background:var(--cream);padding:76px 0;text-align:center} .logo-band .wrap{display:flex;flex-direction:column;align-items:center} .logo-feature{width:min(340px,72vw);height:auto;margin-bottom:26px} .logo-band p{ font-family:'Fraunces',Georgia,serif;font-size:19px;font-style:italic; color:var(--ink-soft);max-width:520px;line-height:1.55; } @media(max-width:940px){.logo-band{padding:56px 0}} /* ---------------- PAGE HEADER (interior pages) ---------------- */ .page-head{padding:70px 0 60px;background:var(--cream-2); border-bottom:1px solid var(--line)} .page-head h1{font-size:clamp(34px,4.6vw,56px);margin-bottom:16px;max-width:800px} .page-head p{font-size:18px;color:var(--ink-soft);max-width:660px} /* ---------------- TRUST BAR ---------------- */ .trust{background:var(--sage-light);padding:26px 0} .trust-in{ display:flex;justify-content:center;gap:48px;flex-wrap:wrap; font-size:14px;font-weight:700;color:var(--sage-dark); letter-spacing:.02em;text-align:center; } .trust-in span{display:flex;align-items:center;gap:9px} /* ---------------- SECTIONS ---------------- */ section{padding:92px 0} section.tight{padding:64px 0} .bg-alt{background:var(--cream-2)} .bg-white{background:var(--white)} .bg-sage{background:var(--sage-dark);color:#fff} .bg-sage h2,.bg-sage h3{color:#fff} .bg-sage p{color:rgba(255,255,255,.8)} .sec-head{max-width:660px;margin-bottom:52px} .sec-head h2{font-size:clamp(29px,3.6vw,44px);margin-bottom:16px} .sec-head p{font-size:17px;color:var(--ink-soft)} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .bg-sage .sec-head p{color:rgba(255,255,255,.78)} /* ---------------- FEATURE CARD GRID ---------------- */ .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .card-grid.three{grid-template-columns:repeat(3,1fr)} .card-grid.two{grid-template-columns:repeat(2,1fr)} .card{background:var(--cream);padding:32px 26px;border-radius:var(--radius); border:1px solid var(--line)} .bg-alt .card{background:var(--cream)} .bg-white .card{background:var(--cream)} .card-free{background:var(--sage-light) !important;border:2px solid var(--sage) !important;position:relative} .card-free .ico{background:#fff !important} .card .ico{width:48px;height:48px;border-radius:14px;background:var(--sage-light); display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:22px} .card h3{font-size:19px;margin-bottom:9px} .card p{font-size:15px;color:var(--ink-soft)} .card-grid.centered{display:flex;flex-wrap:wrap;justify-content:center} .card-grid.centered .card{flex:0 0 calc(25% - 18px)} @media(max-width:940px){.card-grid.centered .card{flex-basis:calc(50% - 12px)}} @media(max-width:600px){.card-grid.centered .card{flex-basis:100%}} @media(max-width:940px){.card-grid,.card-grid.three{grid-template-columns:1fr 1fr}} @media(max-width:600px){.card-grid,.card-grid.three,.card-grid.two{grid-template-columns:1fr}} /* ---------------- SERVICES ---------------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:34px 30px;display:flex;flex-direction:column;transition:.22s ease} .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .svc.feat{background:var(--sage);color:#fff;border-color:var(--sage)} .svc.feat .price,.svc.feat li,.svc.feat .svc-sub{color:rgba(255,255,255,.92)} .tag{display:inline-block;background:var(--clay);color:#fff;font-size:11px; font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:5px 12px;border-radius:100px;margin-bottom:16px;align-self:flex-start} .svc h3{font-size:23px;margin-bottom:6px} .svc-sub{font-size:14px;color:var(--ink-faint);margin-bottom:16px} .price{font-family:'Fraunces',serif;font-size:32px;font-weight:600; color:var(--sage-dark);margin-bottom:20px} .svc.feat .price{color:#fff} .price small{font-size:13px;font-family:'Nunito Sans',sans-serif; font-weight:700;color:var(--ink-faint);display:block;letter-spacing:.1em; text-transform:uppercase;margin-bottom:2px} .price small.after{display:inline;text-transform:none;letter-spacing:0; font-weight:400;font-size:14px;margin:0} .svc.feat .price small{color:rgba(255,255,255,.75)} .svc ul{list-style:none;margin-bottom:26px;flex:1} .svc li{font-size:15px;color:var(--ink-soft);padding:7px 0 7px 26px;position:relative} .svc li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--sage)} .svc.feat li::before{color:#fff} @media(max-width:940px){.svc-grid{grid-template-columns:1fr}} /* ---------------- SIZE PICKER ---------------- */ .size-picker{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:26px 28px;margin-bottom:32px;position:sticky;top:92px;z-index:40; box-shadow:0 4px 20px rgba(43,40,35,.05); } .size-label{ display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase; font-weight:800;color:var(--ink-faint);margin-bottom:14px; } .size-btns{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .size-btn{ background:var(--cream);border:2px solid var(--line);border-radius:14px; padding:14px 10px;cursor:pointer;transition:.18s;text-align:center; font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:var(--ink); display:flex;flex-direction:column;gap:3px;line-height:1.2; } .size-btn em{ font-family:'Nunito Sans',sans-serif;font-style:normal;font-size:12px; font-weight:600;color:var(--ink-faint);letter-spacing:.02em; } .size-btn:hover{border-color:var(--sage);background:var(--sage-light)} .size-btn.active{background:var(--sage);border-color:var(--sage);color:#fff} .size-btn.active em{color:rgba(255,255,255,.8)} @media(max-width:760px){ .size-picker{position:static;padding:20px} .size-btns{grid-template-columns:repeat(3,1fr)} .size-btn{font-size:15px;padding:11px 8px} } /* ---------------- SERVICE LIST (priced by size) ---------------- */ .svc-list{display:grid;gap:14px} .svc-row{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:28px 32px;display:grid;grid-template-columns:1fr auto; gap:32px;align-items:center;transition:.2s;position:relative; } .svc-row:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .svc-row.feat{border-color:var(--sage);border-width:2px;padding-top:34px} .svc-row.feat .tag{position:absolute;top:-11px;left:32px;margin:0} .svc-info h3{font-size:22px;margin-bottom:6px} .svc-info p{font-size:15px;color:var(--ink-soft);max-width:660px} .svc-best{font-weight:700;color:var(--sage-dark) !important;margin-bottom:8px} .breeds{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px} .breeds-lbl{ font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800; color:var(--ink-faint);margin-right:4px; } .breeds span:not(.breeds-lbl){ background:var(--cream-2);border:1px solid var(--line);border-radius:100px; padding:3px 11px;font-size:12px;font-weight:600;color:var(--ink-soft); } .svc-row.feat .breeds span:not(.breeds-lbl){background:var(--cream)} /* ---------------- "WHICH SERVICE" GUIDE ---------------- */ .picker-guide{background:#fff;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden} .pg-row{display:grid;grid-template-columns:250px 1fr;gap:24px; padding:20px 30px;border-bottom:1px solid var(--line);align-items:baseline} .pg-row:last-child{border:none} .pg-row strong{font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:var(--ink)} .pg-row span{font-size:15px;color:var(--ink-soft)} @media(max-width:700px){ .pg-row{grid-template-columns:1fr;gap:5px;padding:18px 22px} } /* ---------------- FIRST VISIT CARDS ---------------- */ /* ---------------- CONTACT CARDS ---------------- */ .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch} .contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:32px 28px;display:flex;flex-direction:column} .contact-card.primary{background:var(--sage-light);border:2px solid var(--sage)} .contact-card .tag{position:static;margin-bottom:14px} .contact-card .ico{width:48px;height:48px;border-radius:14px;background:var(--cream-2); display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:22px} .contact-card.primary .ico{background:#fff} .contact-card h3{font-size:21px;margin-bottom:10px} .contact-card p{font-size:15px;color:var(--ink-soft);margin-bottom:20px;flex:1} .contact-card .btn{align-self:flex-start} @media(max-width:880px){.contact-grid{grid-template-columns:1fr}} /* ---------------- WHAT'S INCLUDED LISTS ---------------- */ .incl{margin-top:14px} .incl-lbl{ font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800; color:var(--ink-faint);display:block;margin-bottom:7px; } .incl ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0} .incl li{ font-size:13.5px;color:var(--ink-soft);padding:0 14px 0 16px;position:relative; border-right:1px solid var(--line);line-height:1.35; } .incl li:last-child{border-right:none} .incl li::before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:800;font-size:11px} .svc-row.feat .incl li{border-right-color:#D8CFC0} .incl-notes{ background:var(--sage-light);border-radius:var(--radius); padding:20px 26px;margin-top:18px; } .incl-notes p{font-size:15px;color:var(--sage-dark);margin:0} @media(max-width:600px){ .incl ul{flex-direction:column;gap:4px} .incl li{border-right:none;padding-right:0} } .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .intro-grid.three{grid-template-columns:repeat(3,1fr)} .intro-card .tag{position:static;margin-bottom:14px} .intro-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:36px 34px;display:flex;flex-direction:column} .intro-card.free{background:var(--sage-light);border:2px solid var(--sage);position:relative} .intro-card h3{font-size:25px;margin-bottom:6px} .intro-price{font-family:'Fraunces',serif;font-size:19px;font-weight:600; color:var(--sage-dark) !important;margin-bottom:16px !important} .intro-card p{font-size:15px;color:var(--ink-soft);margin-bottom:14px} .intro-card .btn{margin-top:auto;align-self:flex-start} .tag-gold{background:var(--gold);color:var(--ink)} @media(max-width:980px){.intro-grid.three{grid-template-columns:1fr}} @media(max-width:800px){.intro-grid{grid-template-columns:1fr}} .svc-meta{text-align:right;white-space:nowrap} .svc-dur{ display:block;font-size:13px;font-weight:700;color:var(--ink-faint); letter-spacing:.04em;margin-bottom:4px; } .svc-price{ display:block;font-family:'Fraunces',serif;font-size:36px;font-weight:600; color:var(--sage-dark);line-height:1; } @media(max-width:760px){ .svc-row{grid-template-columns:1fr;gap:16px;padding:24px} .svc-row.feat .tag{left:24px} .svc-meta{text-align:left;display:flex;align-items:baseline;gap:14px} .svc-dur{margin:0} .svc-price{font-size:30px} } /* ---------------- ADD-ONS TABLE ---------------- */ .addons{background:#fff;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden} .addon-row{display:flex;justify-content:space-between;align-items:center; gap:20px;padding:20px 28px;border-bottom:1px solid var(--line)} .addon-row:last-child{border:none} .addon-row h4{font-size:17px;margin-bottom:3px} .addon-row p{font-size:14px;color:var(--ink-soft)} .addon-price{font-family:'Fraunces',serif;font-size:21px;font-weight:600; color:var(--sage-dark);white-space:nowrap} .addon-row.highlight{background:var(--sage-light)} .addon-row.highlight h4{color:var(--sage-dark)} .pill{ display:inline-block;background:var(--sage);color:#fff;font-size:10px; font-weight:800;letter-spacing:.09em;text-transform:uppercase; padding:3px 10px;border-radius:100px;vertical-align:2px;margin-left:8px; font-family:'Nunito Sans',sans-serif; } /* ---------------- ABOUT / SPLIT ---------------- */ .split{display:grid;grid-template-columns:0.85fr 1fr;gap:60px;align-items:center} .split.flip{grid-template-columns:1fr 0.85fr} .split-img{width:100%;height:auto;border-radius:var(--radius-lg)} .split h2{font-size:clamp(29px,3.6vw,44px);margin-bottom:20px} .split p{font-size:17px;color:var(--ink-soft);margin-bottom:18px} .credo{border-left:3px solid var(--sage);padding-left:22px;margin:28px 0; font-family:'Fraunces',serif;font-size:21px;font-style:italic;color:var(--ink); line-height:1.5} .creds{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .cred{background:var(--cream);border:1px solid var(--line);border-radius:100px; padding:9px 18px;font-size:13px;font-weight:700;color:var(--sage-dark)} @media(max-width:940px){ .split,.split.flip{grid-template-columns:1fr;gap:36px} .split-img{height:auto} } /* ---------------- FORMS ---------------- */ .form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px} .form-sec{border-top:1px solid var(--line);margin-top:32px;padding-top:32px} .form-sec:first-child{border-top:0;margin-top:0;padding-top:0} .form-sec h3{font-size:19px;margin-bottom:5px} .form-sec .sub{font-size:14px;color:var(--ink-faint);margin-bottom:22px;line-height:1.55} .field{margin-bottom:18px} .field:last-child{margin-bottom:0} .field>label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--ink)} .field .hint{font-weight:400;color:var(--ink-faint)} .field input[type=text],.field input[type=tel],.field input[type=email], .field input[type=date],.field select,.field textarea{ width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:10px; font-family:inherit;font-size:15px;background:var(--cream);color:var(--ink)} .field textarea{resize:vertical;line-height:1.55} .field input:focus,.field select:focus,.field textarea:focus{ outline:0;border-color:var(--sage);background:#fff; box-shadow:0 0 0 3px rgba(124,143,111,.18)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field-row.three{grid-template-columns:1fr 1fr 1fr} @media(max-width:620px){.field-row,.field-row.three{grid-template-columns:1fr;gap:0} .field-row .field{margin-bottom:18px}} .choices{display:flex;gap:24px;flex-wrap:wrap;padding-top:2px} .choice{display:flex;gap:8px;align-items:center;font-size:15px; color:var(--ink-soft);cursor:pointer} .choice input{width:17px;height:17px;accent-color:var(--sage-dark)} .check{display:flex;gap:12px;align-items:flex-start;font-size:15px; color:var(--ink-soft);line-height:1.6;cursor:pointer;margin-bottom:14px} .check:last-of-type{margin-bottom:0} .check input{margin-top:4px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--sage-dark)} .check strong{color:var(--ink);font-weight:700} /* confirmation shown in place of the form once it sends */ .form-done{background:var(--sage-light);border:1px solid var(--sage); border-radius:var(--radius);padding:44px 36px;text-align:center} .form-done .tick{width:52px;height:52px;margin:0 auto 20px;border-radius:50%; background:var(--sage-dark);color:#fff;font-size:26px; display:flex;align-items:center;justify-content:center} .form-done h2{font-size:clamp(24px,3vw,31px);margin-bottom:14px} .form-done p{font-size:16px;color:var(--ink-soft);line-height:1.65; max-width:520px;margin:0 auto 12px} .form-error{background:var(--clay-light);border:1px solid var(--clay); border-radius:var(--radius-sm);padding:14px 18px;margin-top:16px; font-size:15px;color:var(--ink)} .form-error a{color:var(--sage-dark);font-weight:700} /* optional extra-dog blocks - plain
, works with no JavaScript */ .add-dog{border:1px dashed var(--line);border-radius:var(--radius-sm); background:var(--cream);margin-top:18px} .add-dog>summary{cursor:pointer;list-style:none;padding:15px 22px; font-weight:700;font-size:15px;color:var(--sage-dark)} .add-dog>summary::-webkit-details-marker{display:none} .add-dog>summary::before{content:"+ ";font-weight:800} .add-dog[open]>summary::before{content:"\2212 "} .add-dog[open]>summary{border-bottom:1px solid var(--line)} .add-dog>summary:hover{color:var(--ink)} .add-dog .inner{padding:22px} .add-dog .inner .field input,.add-dog .inner .field select, .add-dog .inner .field textarea{background:#fff} .sig{background:var(--cream);border:1px solid var(--line); border-radius:var(--radius-sm);padding:22px 24px;margin-top:6px} .sig p{font-size:14px;color:var(--ink-faint);margin-bottom:18px;line-height:1.55} /* ---------------- POLICIES ---------------- */ .policy{border-top:1px solid var(--line);padding:34px 0} .policy:first-child{border-top:0;padding-top:0} .policy h3{font-size:23px;margin-bottom:12px} .policy p{font-size:17px;color:var(--ink-soft);margin-bottom:14px;line-height:1.65} .policy p:last-child{margin-bottom:0} .policy strong{color:var(--ink);font-weight:700} /* at-a-glance fee summary */ .fees{background:var(--cream);border:1px solid var(--line); border-radius:var(--radius-lg);padding:28px 30px;margin-bottom:8px} .fees h3{font-size:18px;margin-bottom:6px} .fees .sub{font-size:14px;color:var(--ink-faint);margin-bottom:20px} .fees dl{display:grid;grid-template-columns:1fr auto;gap:0} .fees dt,.fees dd{padding:12px 0;border-top:1px solid var(--line);margin:0;font-size:15px} .fees dt{color:var(--ink-soft);padding-right:20px} .fees dd{font-weight:800;color:var(--sage-dark);text-align:right;white-space:nowrap} .fees dl>dt:first-of-type,.fees dl>dt:first-of-type+dd{border-top:0} @media(max-width:520px){.fees{padding:22px}.fees dt,.fees dd{font-size:14px}} /* downloadable forms */ .forms{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px} .form-dl{display:flex;gap:16px;align-items:flex-start;text-decoration:none; background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:22px 24px;transition:border-color .2s,transform .2s,box-shadow .2s} .form-dl:hover{border-color:var(--sage);transform:translateY(-2px); box-shadow:0 8px 22px rgba(43,40,35,.08)} .form-dl .pdf{flex:0 0 auto;width:40px;height:40px;border-radius:9px; background:var(--cream-2);color:var(--sage-dark); display:flex;align-items:center;justify-content:center; font-size:10px;font-weight:800;letter-spacing:.06em} .form-dl h4{font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:800; color:var(--ink);margin-bottom:5px} .form-dl p{font-size:14px;color:var(--ink-soft);margin:0;line-height:1.5} @media(max-width:760px){.forms{grid-template-columns:1fr}} /* ---------------- SLIDESHOW ---------------- Used for "The Space" on the About page. Every photo in it is the same 3:2 shape, so nothing gets cropped. Works without JavaScript too: if the script never runs, the first slide simply stays put. */ .slider{position:relative;border-radius:var(--radius-lg);overflow:hidden; background:var(--cream);box-shadow:0 10px 30px rgba(43,40,35,.10)} .slides{position:relative;aspect-ratio:3/2} .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .55s ease} .slides img.on{opacity:1} .sl-arrow{position:absolute;top:50%;transform:translateY(-50%); width:42px;height:42px;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.88);color:var(--ink); font-size:26px;line-height:1;padding:0 0 4px; display:flex;align-items:center;justify-content:center; box-shadow:0 3px 10px rgba(43,40,35,.18);transition:background .2s,transform .2s} .sl-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)} .sl-arrow:focus-visible{outline:3px solid var(--sage-dark);outline-offset:2px} .sl-prev{left:14px} .sl-next{right:14px} .sl-dots{position:absolute;left:0;right:0;bottom:14px; display:flex;justify-content:center;gap:8px} .sl-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%; background:rgba(255,255,255,.55);cursor:pointer;transition:background .2s,width .2s} .sl-dots button[aria-selected="true"]{background:#fff;width:20px;border-radius:100px} .sl-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px} @media(max-width:520px){ .sl-arrow{width:34px;height:34px;font-size:21px} .sl-prev{left:8px}.sl-next{right:8px} } @media(prefers-reduced-motion:reduce){.slides img{transition:none}} /* ---------------- GALLERY ---------------- Masonry columns: every photo keeps its own shape, nothing is cropped. */ .gal{column-count:4;column-gap:16px} .gal img,.gal .ph{ width:100%;height:auto;margin:0 0 16px;display:block; border-radius:var(--radius-sm);break-inside:avoid; } @media(max-width:1100px){.gal{column-count:3}} @media(max-width:760px){.gal{column-count:2}} @media(max-width:480px){.gal{column-gap:10px}.gal img,.gal .ph{margin-bottom:10px}} /* homepage teaser strip: just four, side by side */ .gal.home{column-count:4} @media(max-width:760px){.gal.home{column-count:2}} /* Before & after: each pair is one wide image, two pairs per row */ .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .ba-grid figure{margin:0} .ba-grid img{width:100%;height:auto;border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(43,40,35,.10)} @media(max-width:820px){.ba-grid{grid-template-columns:1fr;gap:16px}} /* Instagram feed (Behold widget) */ .ig-feed{min-height:200px} .ig-feed behold-widget{display:block;width:100%} /* Behold renders its own grid; these vars nudge it toward the site's look. */ .ig-feed{ --behold-grid-gap:16px; --behold-border-radius:12px; } /* ---------------- REVIEWS ---------------- */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .rev{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);padding:30px;display:flex;flex-direction:column} .stars{color:var(--gold);font-size:17px;margin-bottom:14px;letter-spacing:2px} .rev p{font-size:16px;color:rgba(255,255,255,.92);margin-bottom:20px; font-style:italic;flex:1} .rev .who{font-size:14px;font-weight:700;color:rgba(255,255,255,.68)} .rev .src{font-size:12px;color:rgba(255,255,255,.45);margin-top:4px; letter-spacing:.06em;text-transform:uppercase;font-weight:700} .rev-grid.two{grid-template-columns:repeat(2,1fr)} .rev-feature{ background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-lg);padding:44px 52px;margin-bottom:24px;text-align:center; } .rev-feature blockquote{ font-family:'Fraunces',Georgia,serif;font-size:clamp(20px,2.3vw,27px); line-height:1.5;color:#fff;margin:0 auto 22px;max-width:760px;font-style:italic; } .rev-feature blockquote::before{content:'\201C'} .rev-feature blockquote::after{content:'\201D'} .rev-feature .who{font-size:15px;font-weight:700;color:rgba(255,255,255,.85)} .rev-feature .src{font-size:12px;color:rgba(255,255,255,.45);margin-top:4px; letter-spacing:.08em;text-transform:uppercase;font-weight:700} .rev-cta{background:rgba(255,255,255,.05);border-style:dashed; align-items:flex-start;justify-content:center} .rev-cta .ico-lg{font-size:30px;color:var(--gold);margin-bottom:10px;line-height:1} .rev-cta h3{font-size:20px;color:#fff;margin-bottom:10px} .rev-cta p{color:rgba(255,255,255,.75);margin-bottom:18px} @media(max-width:940px){ .rev-grid,.rev-grid.two{grid-template-columns:1fr} .rev-feature{padding:32px 26px} } /* Reviews on a cream/white background (the Reviews page). The originals above are built for the dark sage band on the homepage. */ .revs-light .rev{background:#fff;border-color:var(--line);box-shadow:var(--shadow)} .revs-light .rev p{color:var(--ink-soft)} .revs-light .rev .who{color:var(--ink)} .revs-light .rev .src{color:var(--ink-faint)} .revs-light .rev-cta{background:var(--cream);border:1px dashed var(--sage);box-shadow:none} .revs-light .rev-cta h3{color:var(--ink)} .revs-light .rev-cta p{color:var(--ink-soft)} .revs-light .rev-cta .ico-lg{color:var(--gold)} .revs-light .rev-cta .btn-light{background:var(--sage-dark);color:#fff} .revs-light .rev-cta .btn-light:hover{background:var(--ink)} .rev-feature.dark{background:var(--sage-dark);border-color:var(--sage-dark); box-shadow:var(--shadow-lg);margin-bottom:0} /* ---------------- STEPS / TIMELINE ---------------- */ .steps{counter-reset:step;display:grid;gap:24px} .step{display:grid;grid-template-columns:56px 1fr;gap:24px;align-items:start; background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px} .step-num{ width:56px;height:56px;border-radius:50%;background:var(--sage-light); color:var(--sage-dark);display:flex;align-items:center;justify-content:center; font-family:'Fraunces',serif;font-size:22px;font-weight:700; } .step h3{font-size:20px;margin-bottom:8px} .step p{font-size:16px;color:var(--ink-soft)} @media(max-width:600px){ .steps{gap:12px} .step{grid-template-columns:40px 1fr;gap:14px;padding:18px 16px} .step-num{width:40px;height:40px;font-size:17px} .step h3{font-size:18px;margin-bottom:6px} .step p{font-size:15px} } /* ---------------- CHECKLIST ---------------- */ .checklist{list-style:none;display:grid;gap:14px} .checklist li{position:relative;padding-left:34px;font-size:16px;color:var(--ink-soft)} .checklist li::before{ content:"✓";position:absolute;left:0;top:0;width:22px;height:22px; background:var(--sage-light);color:var(--sage-dark);border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800; } .checklist li strong{color:var(--ink);font-weight:700} /* ---------------- FAQ ---------------- */ .faq{display:grid;gap:14px} details.faq-item{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm); padding:22px 26px;transition:.2s; } details.faq-item[open]{box-shadow:var(--shadow)} details.faq-item summary{ font-family:'Fraunces',serif;font-size:18px;font-weight:600;cursor:pointer; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px; } details.faq-item summary::-webkit-details-marker{display:none} details.faq-item summary::after{content:"+";font-size:24px;color:var(--sage); font-family:'Nunito Sans',sans-serif;line-height:1;flex-shrink:0} details.faq-item[open] summary::after{content:"−"} details.faq-item p{margin-top:14px;font-size:16px;color:var(--ink-soft)} /* ---------------- BOOKING ---------------- */ .book-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start} .square-embed{ background:#fff;border:2px dashed var(--sage);border-radius:var(--radius); padding:52px 38px;text-align:center; } .square-embed .sq-logo{font-size:36px;margin-bottom:14px} .square-embed h3{font-size:22px;margin-bottom:10px} .square-embed p{color:var(--ink-soft);font-size:15px;max-width:430px;margin:0 auto 22px} .hours{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px} .hours h3{font-size:20px;margin-bottom:20px} .hours dl{display:grid;grid-template-columns:auto 1fr;gap:11px 20px;font-size:15px} .hours dt{font-weight:700} .hours dd{text-align:right;color:var(--ink-soft)} @media(max-width:940px){.book-grid{grid-template-columns:1fr}} .req{color:#b3402e;font-weight:800;margin-left:2px} /* ---------------- CTA BAND ---------------- */ .cta-band{background:var(--sage);color:#fff;padding:76px 0;text-align:center} .cta-band h2{font-size:clamp(28px,3.6vw,42px);color:#fff;margin-bottom:16px} .cta-band p{font-size:18px;color:rgba(255,255,255,.85);max-width:540px; margin:0 auto 30px} .cta-band .btn-light{margin:6px} /* ---------------- CONTACT / FOOTER ---------------- */ footer{background:var(--ink);color:var(--cream);padding:76px 0 34px} .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px} footer h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase; margin-bottom:20px;color:#9FB093;font-family:'Nunito Sans',sans-serif;font-weight:800} footer p,footer li{font-size:15px;color:rgba(251,247,241,.7);line-height:1.95} footer ul{list-style:none} footer a{text-decoration:none;transition:.2s} footer a:hover{color:#fff} .f-logo{margin-bottom:22px} .f-lockup{width:220px;height:auto} @media(max-width:600px){.f-lockup{width:180px}} .f-bot{border-top:1px solid rgba(251,247,241,.14);padding-top:26px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px; font-size:13px;color:rgba(251,247,241,.5)} @media(max-width:940px){.f-grid{grid-template-columns:1fr 1fr;gap:36px}} @media(max-width:600px){.f-grid{grid-template-columns:1fr}} /* ---------------- UTILITIES ---------------- */ .mt-0{margin-top:0} .mt-3{margin-top:32px} .center{text-align:center} .center .btn{margin:6px} .mx-auto{margin-left:auto;margin-right:auto} /* ---------------- SHARE BUTTON ---------------- */ .share-msg{ display:block;margin-top:10px;font-size:13px;font-weight:700; color:var(--sage-dark); } /* ---------------- PHONE DENSITY ---------------- */ @media(max-width:600px){ section{padding:48px 0} section.tight{padding:36px 0} .page-head{padding:44px 0 36px} .hero{padding:32px 0 44px} .sec-head{margin-bottom:30px} .sec-head h2{margin-bottom:12px} .card{padding:22px 18px} .card-grid,.card-grid.three,.card-grid.two{gap:12px} .cta-band{padding:52px 0} .split{gap:28px} }