/* Upper East Pups */
@font-face{font-family:"Sacramento";src:url(fonts/sacramento-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Oswald";font-weight:400;src:url(fonts/oswald-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Oswald";font-weight:500;src:url(fonts/oswald-latin-500-normal.woff2) format("woff2");font-display:swap}

:root{
  --paw:#a7a78f;          /* paw-print gray-olive: nav bar, dividers */
  --paw-dark:#8a8a74;
  --cream:#f8faef;
  --purple:#8a1a8f;
  --orange:#e08a3a;
  --text:#666;
  --script:"Sacramento","Brush Script MT",cursive;
  --title:"Sacramento","Brush Script MT",cursive;
  --cond:"Oswald","Arial Narrow",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream) url(images/paw-bg.jpg) 0 0/350px 350px repeat;font:15px/1.3 Arial,Helvetica,sans-serif;color:var(--text)}
img{max-width:100%;height:auto}
a{color:var(--orange)}
:focus-visible{outline:3px solid var(--purple);outline-offset:2px}

.page{max-width:1021px;margin:0 auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:20}
.skip:focus{left:8px;top:8px}

/* header */
.masthead{position:relative;background:#fff;height:120px;text-align:center;z-index:2;padding-top:14px}
.brand{display:block;text-decoration:none}
.brand .name{display:block;font-family:var(--title);font-size:92px;line-height:1.05;color:var(--purple)}
.brand .tag{position:absolute;left:0;right:0;bottom:9px;font-size:11px;letter-spacing:.66em;color:#8f5a96;text-indent:.66em;white-space:nowrap}

nav.main{display:flex;margin-top:12px;background:var(--paw);border-bottom:6px solid #1d1d1d}
nav.main a{flex:1;text-align:center;text-decoration:none;color:#fff;font:400 15.5px/70px var(--cond);text-transform:uppercase;border-left:1px solid var(--paw-dark);letter-spacing:.01em}
nav.main a:first-child{border-left:0}
nav.main a:hover{background:var(--paw-dark)}
nav.main a[aria-current="page"]{color:#e6e6d9;pointer-events:none}

main{background:#fff}

/* diagonal stripe divider */
.stripe{height:20px;background:repeating-linear-gradient(135deg,#d6d6d6 0 2px,#f6f6f6 2px 4px)}

/* slideshow */
.slides{position:relative;height:480px;overflow:hidden;background:#ddd}
.slides img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity 1s ease}
.slides img.on{opacity:1}
.dots{position:absolute;right:9px;bottom:0;display:flex;gap:8px;background:#fff;padding:11px 14px 0 15px;height:40px}
.dots button{width:20px;height:20px;padding:0;border:1px solid #bbb;background:#fff;cursor:pointer}
.dots button[aria-current="true"]{background:var(--orange);border-color:var(--orange)}

/* home columns */
.cols{display:grid;grid-template-columns:repeat(3,270px);gap:51px;justify-content:center;padding:14px 0 86px}
.col h2{font:400 44px/1.15 var(--script);color:var(--purple);text-align:center;margin:0 -20px 10px;white-space:nowrap}
.col .stripe{margin-bottom:11px}
.col img{display:block;width:261px;height:198px;object-fit:cover;margin:0 auto 54px}
.col p{margin:0;font-size:14px;line-height:19.5px}

/* headings shared */
h1.script,h2.script{font:400 64px/1.15 var(--script);color:var(--purple);text-align:center;margin:0}

/* about */
.about{padding:90px 0 0}
.about .copy{width:605px;max-width:calc(100% - 40px);margin:0 auto 36px;font-size:16px;line-height:22.5px}
.about .copy p{margin:0 0 22.5px}
.about .stripe{margin:0 auto;width:calc(100% - 66px)}
.about h2.script{font-size:58px;margin:18px 0 18px}
.gallery{list-style:none;margin:0 auto;padding:0 0 100px;width:950px;max-width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.gallery li{margin:0}
.gallery button{display:block;width:100%;aspect-ratio:1;padding:0;border:0;background:#eee;cursor:zoom-in}
.gallery button img{width:100%;height:100%;object-fit:cover;display:block}
.gallery li.logo{grid-column:span 2}
.gallery li.logo img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}

dialog.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;overflow:visible}
dialog.lb::backdrop{background:rgba(20,20,20,.88)}
dialog.lb img{display:block;max-width:92vw;max-height:88vh;margin:auto;border:6px solid #fff}
dialog.lb button{position:fixed;top:50%;background:rgba(255,255,255,.9);border:0;width:44px;height:56px;font-size:28px;cursor:pointer;transform:translateY(-50%)}
dialog.lb .prev{left:12px}dialog.lb .next{right:12px}
dialog.lb .x{top:22px;right:14px;transform:none;height:44px}

/* services */
.services{position:relative;padding:50px 0 170px;min-height:700px}
.services .note{text-align:center;font-size:14px;margin:0 0 0 110px}
.services h1.script{margin-bottom:14px}
.services table{width:500px;max-width:calc(100% - 40px);margin:52px auto 0;border-collapse:collapse;border:1px solid #000;font-size:16px;color:#555;text-align:center}
.services th{font:400 40px/1.1 var(--script);color:#444;border-bottom:1px solid #000;padding:6px 4px;height:50px}
.services th+th,.services td+td{border-left:1px solid #000}
.services td{padding:0 6px;vertical-align:middle}
.services tr.main td{height:70px;border-bottom:1px solid #000}
.services td.price{width:74px}
.services tr.head td{padding-top:20px;font-weight:700}
.services tr.fee td{line-height:22.5px;vertical-align:top}
.services tr.fee:last-child td{padding-bottom:12px}
.services .after{width:534px;max-width:calc(100% - 40px);margin:26px auto 0;font-style:italic;text-align:left}
.services .dog{position:absolute;height:auto;pointer-events:none}
.services .dog.l{left:43px;top:132px;width:180px}
.services .dog.r{right:28px;top:470px;width:176px;transform:scaleX(-1)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 300px;gap:22px;padding:34px 40px 60px}
.contact h1{font:400 20px/1.3 var(--cond);color:#444;margin:26px 0 20px;white-space:nowrap}
.contact h1 .script{font:400 38px/1 var(--script);color:#333;margin:0 1px}
.contact label{display:block;margin:8px 0 3px;font-size:15px}
.contact label b{color:#c22;font-weight:400}
.contact input[type=text],.contact input[type=email],.contact textarea{width:100%;max-width:537px;font:15px Arial,sans-serif;padding:5px 6px;border:1px solid #888;background:#fff;color:#333;display:block}
.contact input{height:29px}
.contact textarea{height:150px;resize:vertical}
.contact .hp{position:absolute;left:-9999px}
.contact button[type=submit]{margin-top:26px;background:var(--purple);color:#fff;border:0;padding:11px 30px;font:500 15px var(--cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.contact button[type=submit]:hover{background:#6d1470}
.mapbox{position:relative;width:300px;height:225px;margin-top:66px;overflow:hidden;background:#e8e8e0}
.mapbox iframe{border:0;width:100%;height:100%;pointer-events:none}
.mapbox .area{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(138,26,143,.22);border:2px solid var(--purple)}
.addr{font-size:19px;line-height:25px;color:#777;margin:20px 0 0}
.addr a{color:var(--orange)}
.thanks{padding:100px 40px 140px;text-align:center;font-size:17px}

/* footer */
footer{background:#000;margin-top:0;height:100px}
footer .in{max-width:1021px;margin:0 auto;padding:48px 28px 0;color:#8d8d78;font-size:14px}

@media (max-width:1040px){
  .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-left:24px;padding-right:24px}
  .col img{width:100%;height:auto;aspect-ratio:4/3}
}
@media (max-width:820px){
  .masthead{height:auto;padding:10px 0 34px}
  .brand .name{font-size:13vw;line-height:1.15}
  .brand .tag{bottom:10px;font-size:9px;letter-spacing:.5em}
  nav.main a{font-size:13px;line-height:54px}
  .slides{height:clamp(200px,52vw,480px)}
  .cols{grid-template-columns:1fr;max-width:420px;margin:0 auto;padding-bottom:50px}
  .about{padding-top:40px}
  .gallery{grid-template-columns:repeat(3,1fr);padding:0 12px 60px}
  .contact{grid-template-columns:1fr;padding:24px 20px 50px}
  .contact h1{white-space:normal}
  .mapbox{margin-top:0;max-width:100%}
  .services .dog{display:none}
  .services .note{margin-left:0;padding:0 20px}
  h1.script,h2.script{font-size:46px}
  .services{min-height:0;padding-bottom:60px}
}
@media (prefers-reduced-motion:reduce){.slides img{transition:none}}