/* ============================================================
   Stucco by Design & Renovation — shared styles
   (animations, responsive layout, hover layer, base reset)
   Layout/desktop styling lives inline in the HTML per the design.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#FBFAF7;}
a{text-decoration:none;color:inherit;}
img,iframe{display:block;}
button{font-family:inherit;}
::selection{background:#FFB800;color:#1C1C1C;}

/* Keyboard accessibility — visible focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid #FFB800;outline-offset:2px;border-radius:6px;
}

/* ---------- Keyframes ---------- */
@keyframes floatUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes marquee{to{transform:translateX(-50%);}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(255,184,0,.55);}70%{box-shadow:0 0 0 9px rgba(255,184,0,0);}100%{box-shadow:0 0 0 0 rgba(255,184,0,0);}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ---------- Sticky mobile call button ---------- */
.call-fab{display:none !important;}
@media (max-width: 980px){ .call-fab{display:inline-flex !important;} }

/* ---------- Gallery horizontal scroll ---------- */
.hscroll::-webkit-scrollbar{display:none;}
.hscroll{scrollbar-width:none;}

/* ---------- Scroll-reactive nav (Home only) ---------- */
#siteHeader[data-scroll-nav]{
  background:rgba(251,250,247,.6);
  border-bottom:1px solid transparent;
  box-shadow:none;
}
#siteHeader[data-scroll-nav].is-scrolled{
  background:rgba(251,250,247,.88);
  border-bottom:1px solid #E8E4DB;
  box-shadow:0 6px 24px rgba(28,28,28,.06);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav-links{display:none !important;}
  .nav-phone{display:none !important;}
  .burger{display:grid !important;}
  .two-col{grid-template-columns:1fr !important;gap:34px !important;}
  .grid-4{grid-template-columns:repeat(2,1fr) !important;}
  .grid-3{grid-template-columns:repeat(2,1fr) !important;}
  .gallery-grid{grid-template-columns:1fr 1fr !important;grid-template-rows:auto !important;}
  .gallery-grid > div{grid-row:auto !important;grid-column:auto !important;min-height:210px;}
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:30px !important;}
  .hero-card{position:static !important;left:auto !important;bottom:auto !important;width:auto !important;margin-top:16px !important;}
  .media-box{height:340px !important;}
  .stat-row{grid-template-columns:repeat(2,1fr) !important;}
  .val-grid{grid-template-columns:1fr 1fr !important;}
  .svc-row{grid-template-columns:1fr !important;gap:28px !important;}
}
@media (max-width: 620px){
  .grid-4{grid-template-columns:1fr !important;}
  .grid-4b{grid-template-columns:repeat(2,1fr) !important;}
  .grid-2b{grid-template-columns:1fr !important;}
  .grid-3{grid-template-columns:1fr !important;}
  .gallery-grid{grid-template-columns:1fr !important;}
  .form-row{grid-template-columns:1fr !important;}
  .stat-row{grid-template-columns:1fr 1fr !important;}
  .val-grid{grid-template-columns:1fr !important;}
  .gcard{width:82vw !important;height:300px !important;}
  .site h1{font-size:38px !important;}
  .site h2{font-size:30px !important;}
  .media-box{height:280px !important;}
  /* On phones the burger + Call-now FAB cover booking; hide the nav CTA so
     the hamburger can't get pushed off-screen by the button. */
  .nav-cta{display:none !important;}
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
  html{scroll-behavior:auto;}
}