/* gy-added (review 2026-10-07) — Growyo pre-launch review fixes.
 *
 * Kept apart from bands.css so the ported/hand-written split stays legible, and
 * linked with a content-hash ?v= from Page.astro so a change is a new URL.
 * Every selector targets either a gy-added element or a state the runtime sets,
 * except where a comment says otherwise. Adapted from client-supersmilesforkids a728bef.
 */

/* ---- Drawer (phone) -------------------------------------------------------- */

/* Scroll lock while the drawer is open. Duda sets overflow:hidden on <body>
   only, but the document scrolls <html>, so both are locked. */
html.gy-drawer-lock,
body.gy-drawer-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ---- Desktop/tablet header on /blog-search and the 404 ---------------------- */

/* The header is transparent and fixed, with a white menu, phone line and social
   icons. These two pages have no hero behind it, so all of it was white on white
   and the header sat on top of the first row (live too). Ink is the site's own
   heading colour, rgb(49, 49, 49); the page content starts below the header
   (128px tall at desktop, 171px on the tablet canvas; the rows already carry 100px). */
#dm[data-gy-header="light"] .dmHeaderContainer .unifiednav__item,
#dm[data-gy-header="light"] .dmHeaderContainer .unifiednav__item .nav-item-text,
#dm[data-gy-header="light"] .dmHeaderContainer .unifiednav__item .icon,
#dm[data-gy-header="light"] .dmHeaderContainer .dmNewParagraph *,
#dm[data-gy-header="light"] .dmHeaderContainer a[href^="tel:"] {
  color: rgb(49, 49, 49) !important;
}
#dm[data-gy-header="light"] .dmHeaderContainer .dmSocialHub .socialHubIcon,
#dm[data-gy-header="light"] .dmHeaderContainer .dmSocialHub [class*="dm-social-icons-"] {
  color: rgb(49, 49, 49) !important;
  fill: rgb(49, 49, 49) !important;
}
#dm[data-gy-header="light"] .dmHeaderContainer .unifiednav__item .nav-item-text::after {
  background-color: rgb(49, 49, 49) !important;
}
.dmDesktopBody #dm[data-gy-header="light"] #dm_content { padding-top: 50px; }
.dmTabletBody #dm[data-gy-header="light"] #dm_content { padding-top: 90px; }

/* ---- Headings retagged to one H1 per page (zero visual change) ------------ */

/* /upholstery-cleaning-service-santa-cruz: "Leave It to the Professionals" was a
   second H1. As an h2 it keeps the h1's measured type: Montserrat 700,
   rgb(49,49,49), 30px (desktop, tablet) and 24px (phone), normal line-height. */
#dm h2.gy-was-h1,
#dm h2.gy-was-h1 span {
  font-family: Montserrat, "Montserrat Fallback", sans-serif !important;
  font-weight: 700 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: rgb(49, 49, 49) !important;
}
#dm h2.gy-was-h1 { font-size: 30px !important; margin: 0 !important; padding: 0 !important; }
.dmMobileBody #dm h2.gy-was-h1 { font-size: 24px !important; }

/* A real H1 on the two pages with no heading text (/blog-search, 404). */
.gy-sr-h1 {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- Gallery lightbox ----------------------------------------------------- */

/* PhotoSwipe's base CSS is position:absolute and only its JS promotes it to
   fixed; without that, a lightbox opened after scrolling paints above the
   viewport. Controls at PhotoSwipe's own resting opacity (.75). */
.pswp.gy-pswp {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 2147483000 !important;
}
.pswp.gy-pswp { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.pswp.gy-pswp .pswp__bg { opacity: 1 !important; }
.pswp.gy-pswp .pswp__top-bar { opacity: 1 !important; }
.pswp.gy-pswp .pswp__button,
.pswp.gy-pswp .pswp__counter { opacity: .75; }
.pswp.gy-pswp .pswp__button:hover { opacity: 1; }
.pswp.gy-pswp .pswp__caption--fake { display: none !important; }

/* ---- Contact-form legal line ---------------------------------------------- */

/* One line under the submit button on /contact. The button is Duda's FLOATED
   .dmformsubmit, so clear it; padding rather than margin, which would collapse
   against the float. The button is LEFT-aligned, 15px in from the form's edge, at
   1440, 768 and 390 (measured), so the line shares that left edge. The form sits on
   white with rgb(49,49,49) Poppins labels. */
#dm .gy-form-legal {
  clear: both;
  display: block;
  box-sizing: border-box;
  width: 100%;
  /* The floated button leaves 20px beneath it; -5px brings the line to 15px. */
  margin-top: -5px;
  padding: 0 15px;
  text-align: left;
  font-family: Poppins, "Poppins Fallback", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  color: rgb(49, 49, 49);
}
#dm .gy-form-legal a { color: rgb(0, 93, 152) !important; font-weight: 700 !important; text-decoration: none !important; display: inline !important; }

/* ---- Footer map ------------------------------------------------------------ */

/* The Google Business Profile map across the footer was 350px tall; house
   maximum is 300px. Not a gy-added element: keyed on the embed's own widget id. */
#dm .dmFooterContainer .u_1794402136,
#dm .dmFooterContainer .u_1794402136 iframe { height: 300px !important; max-height: 300px !important; }

/* ---- CTA button on blog posts that had no next step ------------------------ */

/* The site's own "CONTACT US" button, measured 2026-10-07: 230x60 on desktop and
   tablet, 320x43 on phone; rgb(0,93,152), 50px radius, white Poppins 700 15px;
   rgb(9,117,182) on hover over 0.2s. Centred in the share row, above the icons. */
#dm .gy-cta-wrap { clear: both; width: 100%; text-align: center; padding: 10px 0 35px; }
#dm .gy-cta-wrap a.gy-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 230px;
  height: 60px;
  border: 0;
  border-radius: 50px;
  background: rgb(0, 93, 152);
  text-decoration: none !important;
  transition: background-color .2s, border-color .2s;
}
#dm .gy-cta-wrap a.gy-cta .text {
  color: rgb(255, 255, 255) !important;
  font-family: Poppins, "Poppins Fallback", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
#dm .gy-cta-wrap a.gy-cta:hover { background: rgb(9, 117, 182); }
.dmMobileBody #dm .gy-cta-wrap a.gy-cta { width: 320px; max-width: 100%; height: 43px; }

/* ---- Body-text links: one treatment everywhere ----------------------------- */

/* Reviewer request, 2026-10-07. Links in body copy were a mix: bold blue, plain
   blue, underlined, black. Every one is now BOLD with NO underline; only the colour
   follows the background — the site's blue, rgb(0,93,152), on light sections and
   white on dark ones. runtime.js (linkStyle) marks the links (.gy-link) and the
   ones sitting on a dark section (.gy-link-dark); headings, buttons, menus, post
   cards and the header/footer are left alone. The added business-name link carries
   the light treatment from the first paint. */
#dm a.gy-name-link,
#dm a.gy-link,
#dm a.gy-link * {
  font-weight: 700 !important;
  text-decoration: none !important;
}
#dm a.gy-link:not(.gy-link-dark),
#dm a.gy-link:not(.gy-link-dark) * { color: rgb(0, 93, 152) !important; }
/* Until the runtime has marked it, the added name link takes its sentence's ink
   (it can sit on a dark band, where blue would be wrong). */
#dm a.gy-name-link:not(.gy-link) { color: inherit !important; }
#dm a.gy-link.gy-link-dark,
#dm a.gy-link.gy-link-dark * { color: rgb(255, 255, 255) !important; }
#dm a.gy-name-link { display: inline !important; }

/* ---- Blog search results (/blog-search?searchTerm=…) ----------------------- */

/* The 33 posts live's list does not show are in the page for the search only. */
#dm .postArticle.gy-search-extra:not(.gy-search-hit) { display: none !important; }
#dm .postArticle.gy-search-miss { display: none !important; }
#dm .gy-search-title {
  font-family: Montserrat, "Montserrat Fallback", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  color: rgb(49, 49, 49);
  margin: 0 0 30px;
  text-align: left;
}
.dmMobileBody #dm .gy-search-title { font-size: 24px; margin-bottom: 20px; }

/* ---- Header phone number stays on one line (desktop, tablet) --------------- */

/* On the tablet canvas and on narrow desktops (about 1025-1200px) the number broke
   as "(831) 688-" / "7847" (live too). */
#dm .dmHeaderContainer a[href^="tel:"] { white-space: nowrap !important; }
/* One line needs 185px at the header's 24px; between 1025 and 1250px the column
   has 147-172px, so the number is set at 18px there (139px wide, measured). */
@media (min-width: 1025px) and (max-width: 1250px) {
  .dmDesktopBody #dm .dmHeaderContainer a[href^="tel:"],
  .dmDesktopBody #dm .dmHeaderContainer a[href^="tel:"] * { font-size: 18px !important; }
}

/* ---- Tablet header: social icons, logo, phone, menu button ------------------- */

/* Reviewer request, 2026-10-07. The tablet band carried the desktop header, its menu
   wrapped onto two rows around the logo. The two menu halves are hidden (the logo
   between them stays), the three columns are re-proportioned on the 960px tablet
   canvas, and a menu button opens a side panel built from the same menu items. */
.gy-tburger { display: none; }
.dmTabletBody #dm .dmHeaderContainer .unifiednav .unifiednav__container.left_nav,
.dmTabletBody #dm .dmHeaderContainer .unifiednav .unifiednav__container.right_nav { display: none !important; }
.dmTabletBody #dm .dmHeaderContainer .u_1986562919 { width: 30% !important; }
.dmTabletBody #dm .dmHeaderContainer .u_1312317396 { width: 40% !important; }
.dmTabletBody #dm .dmHeaderContainer nav.unifiednav { display: flex !important; justify-content: center !important; }
.dmTabletBody #dm .dmHeaderContainer .u_1021629105 {
  width: 30% !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}
.dmTabletBody #dm .dmHeaderContainer .u_1021629105 > .dmNewParagraph { margin: 0 !important; width: auto !important; }
.dmTabletBody #dm .dmHeaderContainer .gy-tburger {
  order: 2;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  padding: 0 13px;
  border: 0;
  border-radius: 0;
  background: rgb(0, 93, 152);
  cursor: pointer;
}
.gy-tburger span { display: block; width: 100%; height: 2px; background: rgb(255, 255, 255); }

.gy-tdrawer-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
  z-index: 2147482000;
}
.gy-tdrawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  box-sizing: border-box;
  width: 420px; max-width: 86vw;
  padding: 96px 44px 48px;
  overflow-y: auto;
  background: rgb(255, 255, 255);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s;
  z-index: 2147482001;
  font-family: Poppins, "Poppins Fallback", sans-serif;
}
html.gy-tmenu-open .gy-tdrawer-overlay { opacity: 1; visibility: visible; }
html.gy-tmenu-open .gy-tdrawer { transform: none; visibility: visible; }
.gy-tdrawer-close {
  position: absolute; top: 24px; right: 26px;
  width: 48px; height: 48px;
  border: 0; background: none; cursor: pointer;
}
.gy-tdrawer-close::before,
.gy-tdrawer-close::after {
  content: ""; position: absolute; top: 23px; left: 9px;
  width: 30px; height: 2px; background: rgb(49, 49, 49);
}
.gy-tdrawer-close::before { transform: rotate(45deg); }
.gy-tdrawer-close::after { transform: rotate(-45deg); }
.gy-tnav, .gy-tnav ul { list-style: none; margin: 0; padding: 0; }
.gy-tnav > li { margin: 0 0 26px; }
.gy-trow { display: flex; align-items: center; }
.gy-tnav a {
  font-size: 18px; font-weight: 700; line-height: 1.3;
  letter-spacing: .5px; text-transform: uppercase; text-decoration: none;
  color: rgb(49, 49, 49);
}
.gy-tnav a.gy-current { color: rgb(0, 93, 152); }
.gy-tcaret {
  position: relative;
  width: 48px; height: 48px; margin: -13px 0 -13px 4px;
  border: 0; background: none; cursor: pointer;
}
.gy-tcaret::before {
  content: ""; position: absolute; top: 17px; left: 18px;
  width: 8px; height: 8px;
  border-right: 2px solid rgb(49, 49, 49); border-bottom: 2px solid rgb(49, 49, 49);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.gy-tcaret[aria-expanded="true"]::before { transform: translateY(5px) rotate(-135deg); }
.gy-tsub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.gy-tsub li { margin: 18px 0 0 16px; }
.gy-tsub a { font-weight: 400; color: rgb(95, 95, 95); }
.gy-tsub a.gy-current { color: rgb(0, 93, 152); font-weight: 700; }