/*
Theme Name: Strawberry Fields Canine Concierge 1.5.8
Theme URI: https://itk.net/
Author: OpenAI
Description: One-page Strawberry Fields Canine Concierge theme with approved artwork, large readable pricing, side-by-side looping frisbee video and large-type about panel, and working section navigation.
Version: 1.5.8
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: strawberry-fields
*/

:root{
  --sf-green:#0d4b38;
  --sf-deep:#063d2d;
  --sf-gold:#d6a83e;
  --sf-gold-dark:#b88624;
  --sf-cream:#fbf6eb;
  --sf-cream2:#fffaf1;
  --sf-ink:#17392f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f3f0e9;color:#182b25;font-family:Georgia,"Times New Roman",serif}
a{color:inherit}
.sf-shell{min-height:100vh;width:100%;overflow-x:hidden;background:#fff}
.sf-art-wrap{position:relative;width:100%;margin:0;overflow:hidden;background:#fff}
.sf-page-art{display:block;width:100vw;max-width:none;height:auto}
.sf-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:18px}
.sf-hotspot{position:absolute;z-index:8;display:block;border-radius:999px;text-indent:-9999px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,0)}
.sf-hotspot:focus-visible{outline:4px solid #fff;box-shadow:0 0 0 7px var(--sf-green)}

/* Existing artwork navigation and buttons. */
.sf-hs-home{left:1.5%;top:16.09%;width:10.9%;height:5.0%}
.sf-hs-about{left:1.5%;top:20.64%;width:10.9%;height:5.0%}
.sf-hs-services{left:1.5%;top:25.18%;width:10.9%;height:5.0%}
.sf-hs-pricing{left:1.5%;top:29.73%;width:10.9%;height:5.0%}
.sf-hs-boarding{left:1.5%;top:34.45%;width:10.9%;height:5.0%}
.sf-hs-faq{left:1.5%;top:39.17%;width:10.9%;height:5.0%}
.sf-hs-contact{left:1.5%;top:43.72%;width:10.9%;height:5.0%}
.sf-hs-hero-meet{left:34.0%;top:28.16%;width:25.6%;height:4.8%}
.sf-hs-hero-price{left:34.1%;top:32.53%;width:25.6%;height:4.8%}
.sf-about-anchor{top:44.07%}
.sf-services-anchor{top:75.55%}

/* Cody frisbee movie: covers Jennifer's portrait and its gold frame completely. No frame is added. */
.sf-portrait-movie{
  position:absolute;
  z-index:12;
  left:18.70%;
  top:4.75%;
  width:16.50%;
  height:17.25%;
  border:0;
  border-radius:50%;
  clip-path:ellipse(50% 50% at 50% 50%);
  overflow:hidden;
  background:#173d31;
  box-shadow:none;
}
.sf-portrait-movie video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 60%;
  border:0;
  outline:0;
}
.sf-video-fallback{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:58px;
  height:58px;
  border:0;
  border-radius:50%;
  background:rgba(214,168,62,.94);
  color:#0d4b38;
  font:700 24px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
}
.sf-video-fallback[hidden]{display:none!important}

/* About copy: one plain cream box, no split panels and no overlapping movie. */
.sf-about-copy-overlay{
  position:absolute;
  z-index:9;
  left:16.9%;
  top:47.4%;
  width:37.8%;
  min-height:27.1%;
  padding:clamp(22px,1.8vw,36px);
  background:#fffaf0;
  color:#173d31;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.sf-about-copy-overlay h2{
  margin:0 0 .55em;
  color:#0d4b38;
  font-size:clamp(31px,2.25vw,46px);
  line-height:1.06;
  font-weight:600;
}
.sf-about-copy-overlay p{
  margin:0 0 .8em;
  font-size:clamp(23px,1.48vw,29px);
  line-height:1.48;
  font-weight:500;
}
.sf-about-copy-overlay p:last-child{margin-bottom:0}

/* Pricing — roomy two-column cards so nothing is clipped. */
.sf-pricing-section{position:relative;background:linear-gradient(180deg,#fffaf0 0%,#faf2e2 100%);padding:46px clamp(24px,5vw,88px) 48px;border-bottom:1px solid #d9b65f;scroll-margin-top:20px}
.sf-pricing-inner{max-width:1500px;margin:0 auto}
.sf-rule-title{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-bottom:8px}
.sf-rule-title span{height:1px;background:linear-gradient(90deg,transparent,#c79a35 28%,#c79a35 72%,transparent)}
.sf-rule-title h2{margin:0;color:var(--sf-green);font-size:clamp(34px,3vw,56px);line-height:1;letter-spacing:.10em;text-align:center;font-weight:600}
.sf-pricing-section h3{margin:20px 0 10px;color:var(--sf-green);text-align:center;font-size:clamp(27px,2.3vw,40px);font-weight:500}
.sf-pricing-intro{max-width:1240px;margin:0 auto 34px;text-align:center;font-size:clamp(26px,1.68vw,32px);line-height:1.55;color:#2c3d35}
.sf-price-grid{display:grid;grid-template-columns:repeat(2,minmax(520px,1fr));gap:30px;align-items:start;grid-auto-rows:auto}
.sf-price-card{min-width:0;height:auto;min-height:max-content;border:2px solid #d3aa54;border-radius:16px;background:rgba(255,255,255,.84);overflow:visible;box-shadow:0 7px 20px rgba(81,58,10,.07)}
.sf-price-card h4{margin:0;padding:20px 20px;background:linear-gradient(180deg,#15533f,#0b4232);color:#fffaf0;text-align:center;font-size:clamp(32px,2.05vw,40px);line-height:1.15;letter-spacing:.02em;font-weight:700;border-radius:14px 14px 0 0}
.sf-card-kicker{margin:17px 20px 11px;text-align:center;color:#7a5b1d;font-size:clamp(25px,1.55vw,30px);font-style:italic}
.sf-price-card>p:not(.sf-card-kicker):not(.sf-card-note){margin:17px 22px;font-size:clamp(26px,1.6vw,31px);line-height:1.5}
.sf-rate{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;align-items:baseline;padding:16px 22px;border-top:1px solid #e3d3ad;font-size:clamp(29px,1.8vw,35px);line-height:1.3}
.sf-rate span{min-width:0;flex:1 1 280px}
.sf-rate strong{margin-left:auto;font-size:clamp(29px,1.8vw,35px);color:#172d25;white-space:nowrap}
.sf-custom-price{margin:12px 20px 15px;padding:18px 15px;border-top:1px solid #e3d3ad;border-bottom:1px solid #e3d3ad;text-align:center;color:var(--sf-green);font-size:clamp(33px,2.1vw,41px);font-weight:700}
.sf-card-note{margin:17px 22px 22px!important;padding-top:15px;border-top:1px solid #eadbb9;color:#44554e;font-size:clamp(25px,1.5vw,29px)!important;line-height:1.5}
.sf-concierge-card .sf-rate{padding-top:11px;padding-bottom:11px}
.sf-pricing-bottom{margin-top:22px;padding:20px 22px;border:1.5px solid #d3aa54;border-radius:16px;background:#fff9e9;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.sf-pricing-bottom strong{display:block;color:var(--sf-green);font-size:clamp(26px,1.7vw,32px);margin-bottom:5px}
.sf-pricing-bottom span{display:block;font-size:clamp(25px,1.55vw,30px);line-height:1.5}
.sf-action-gold{display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:16px 28px;border-radius:999px;text-decoration:none;font:800 20px/1.1 Arial,Helvetica,sans-serif;white-space:nowrap;box-shadow:0 5px 13px rgba(0,0,0,.12);background:linear-gradient(180deg,#f0d06a,#cb9629);border:1px solid #a77718;color:#163329}
.sf-action-gold:hover{transform:translateY(-1px);filter:brightness(1.03)}

/* Bottom artwork is cropped before the old tiny contact strip; live contact appears below at readable size. */
.sf-bottom-wrap{position:relative;margin-top:28px;border-top:1px solid #e0c16d}
.sf-boarding-anchor{top:1%}
.sf-faq-anchor{top:56%}
.sf-contact-section{scroll-margin-top:20px;background:linear-gradient(135deg,#0a4735 0%,#073d2e 100%);color:#fff9e9;padding:48px clamp(26px,6vw,96px);border-top:4px solid #d6a83e}
.sf-contact-inner{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:50px;align-items:center}
.sf-contact-eyebrow{font:800 20px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.14em;color:#e5c35e;margin-bottom:10px}
.sf-contact-section h2{margin:0 0 12px;font-size:clamp(38px,3.3vw,62px);line-height:1;color:#fff5d7;font-weight:500}
.sf-contact-section p{margin:0;max-width:680px;font-size:clamp(20px,1.35vw,25px);line-height:1.5}
.sf-contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-contact-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:70px;padding:16px 20px;border:2px solid rgba(224,187,78,.85);border-radius:14px;background:rgba(255,255,255,.08);color:#fff9e9;text-decoration:none;text-align:center;font:700 clamp(20px,1.25vw,24px)/1.25 Arial,Helvetica,sans-serif}
.sf-contact-button .dashicons{font-size:28px;width:28px;height:28px;color:#e5c35e;flex:0 0 28px}
.sf-contact-button:hover{background:rgba(255,255,255,.15)}
.sf-contact-button-gold{grid-column:1/-1;background:linear-gradient(180deg,#f1d46f,#cf9a2e);color:#123b2e;border-color:#f3dc88;font-weight:800}
.sf-contact-button-gold .dashicons{color:#123b2e}

/* Floating navigation. */
.sf-float-nav{position:fixed;z-index:50;left:18px;top:50%;transform:translateY(-50%) translateX(-130%);opacity:0;pointer-events:none;width:108px;padding:10px 7px;border:2px solid #bc8a25;border-radius:20px;background:linear-gradient(180deg,#f4d778,#d7a63c);box-shadow:0 12px 28px rgba(0,0,0,.24);transition:.25s ease}
.sf-float-nav.is-visible{transform:translateY(-50%) translateX(0);opacity:1;pointer-events:auto}
.sf-float-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--sf-green);padding:9px 4px;border-radius:12px;font:700 15px/1.1 Arial,Helvetica,sans-serif;letter-spacing:.03em}
.sf-float-nav a:hover,.sf-float-nav a.is-active{background:rgba(255,255,255,.42)}
.sf-float-nav .dashicons{font-size:24px;width:24px;height:24px}
.sf-mobile-nav{display:none;position:fixed;z-index:55;left:10px;right:10px;bottom:10px;padding:7px;background:linear-gradient(90deg,#e6bd55,#c9962e);border:2px solid #9d721d;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.sf-mobile-nav-inner{display:flex;justify-content:space-around;gap:3px}
.sf-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;padding:5px;color:var(--sf-green);font:700 12px/1 Arial,sans-serif;text-decoration:none}
.sf-mobile-nav .dashicons{font-size:20px;width:20px;height:20px;margin-bottom:2px}

/* Meet & Greet modal. */
.sf-modal[hidden]{display:none!important}
.sf-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,32,24,.77)}
.sf-modal-card{position:relative;width:min(700px,96vw);max-height:92vh;overflow:auto;border:2px solid #c79a35;border-radius:22px;background:var(--sf-cream);box-shadow:0 30px 80px rgba(0,0,0,.4);padding:30px}
.sf-modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--sf-green);font-size:36px;line-height:1;cursor:pointer}
.sf-modal h2{margin:0 45px 8px 0;color:var(--sf-green);font-size:34px}
.sf-modal p{font-size:20px;line-height:1.5}
.sf-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-field{display:flex;flex-direction:column;gap:6px}
.sf-field.sf-wide{grid-column:1/-1}
.sf-field label{font:700 17px Arial,sans-serif;color:var(--sf-green)}
.sf-field input,.sf-field select,.sf-field textarea{width:100%;border:1.5px solid #c9ad72;border-radius:10px;background:#fff;padding:13px 14px;font:19px Arial,sans-serif;color:#222}
.sf-field textarea{min-height:120px;resize:vertical}
.sf-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:linear-gradient(180deg,#efd06c,#c89124);color:#122d22;font:800 17px Arial,sans-serif;padding:15px 24px;cursor:pointer;box-shadow:0 6px 16px rgba(80,54,0,.2)}
.sf-toast{position:fixed;z-index:1200;right:18px;top:18px;max-width:440px;background:#fff7df;border:2px solid #d6a83e;color:#173c2f;padding:15px 19px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.25);font:600 16px/1.4 Arial,sans-serif}

@media(max-width:1350px){
  .sf-float-nav{display:none}
  .sf-mobile-nav{display:block}
  .sf-shell{padding-bottom:86px}
}
@media(max-width:1250px){
  .sf-price-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .sf-pricing-bottom{grid-template-columns:1fr}
  .sf-action-gold{width:100%}
  .sf-contact-inner{grid-template-columns:1fr}
  .sf-contact-actions{grid-template-columns:1fr}
  .sf-contact-button-gold{grid-column:auto}
}
@media(max-width:760px){
  .sf-shell{padding:0 0 82px;background:#f3f0e9;overflow-x:hidden}
  .sf-art-wrap{width:760px;max-width:none;margin:0}
  .sf-portrait-movie{left:18.7%;top:4.75%;width:16.5%;height:17.25%}
  .sf-about-copy-overlay{left:16.8%;top:47.4%;width:38.0%;min-height:27.2%;padding:22px}
  .sf-about-copy-overlay h2{font-size:30px}
  .sf-about-copy-overlay p{font-size:23px;line-height:1.45}
  .sf-pricing-section{width:100%;padding-left:18px;padding-right:18px}
  .sf-form-grid{grid-template-columns:1fr}
  .sf-modal-card{padding:24px 18px}
}