/* gy-added (review 2026-10-10) — Growyo pre-launch review fixes.
 *
 * Hand-written, and deliberately outside site/public/styles/ (see bands.css).
 * Every selector here targets either a gy-added element or a state that
 * site/public/scripts/runtime.js sets. Linked with a content hash from
 * Page.astro because /gm/* is cached for seven days.
 */

/* ---- Drawer submenu ("Our Services") -------------------------------------
 * Starts closed on every page and opens on the caret. max-height clips the
 * CONTENT box only, so the <ul>'s own padding and border are collapsed with it
 * — and Duda sets that padding !important. */
.layout-drawer li.gy-sub-group > ul.unifiednav__container_sub-nav {
  overflow: hidden !important;
  transition: max-height .3s ease, opacity .2s ease !important;
}
.layout-drawer li.gy-sub-group:not(.unifiednav__item-wrap_open) > ul.unifiednav__container_sub-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#dm .layout-drawer li.gy-sub-group .gy-caret::before { display: inline-block; transition: transform .3s ease; }
#dm .layout-drawer li.gy-sub-group.unifiednav__item-wrap_open > a .gy-caret::before { transform: rotate(180deg) !important; }
/* The tap target is an overlay, never the caret's own box: sizing the inline
 * caret wraps it onto its own line. */
.layout-drawer .gy-caret { position: relative; cursor: pointer; }
.layout-drawer .gy-caret::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---- Phone header: click-to-call beside the hamburger -------------------- */
.gy-call { display: none; }
@media (max-width: 767px) {
  #dm .gy-call {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 27px;
    right: 52px;
    width: 34px;
    height: 40px;
    z-index: 100;
    color: rgb(20, 20, 185);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  #dm .layout-drawer_open .gy-call { display: none; }
}
/* Below 375 the logo's flourish reaches the icon: a narrower box, tucked
 * closer to the hamburger (checked at 320 and 360). */
@media (max-width: 374px) {
  #dm .gy-call { width: 20px; right: 46px; }
  #dm .gy-call svg { width: 18px; height: 18px; }
}

/* ---- Footer legal links ---------------------------------------------------
 * Under the address line, in that line's own type (12px, the footer ink) and
 * its own alignment: left on desktop and tablet, centred on the phone. */
#dm .dmFooter .gy-footer-legal {
  margin: 0;
  padding: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
#dm .dmFooter .gy-footer-legal a,
#dm .dmFooter .gy-footer-legal a:visited {
  color: inherit;
  text-decoration: none;
  display: inline;
}
#dm .dmFooter .gy-footer-legal a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  #dm .dmFooter .gy-footer-legal { text-align: center; }
}

/* ---- Form legal line -------------------------------------------------------
 * One line under the submit button. The button's wrapper is floated, so the
 * line has to CLEAR it; the space above is padding, because a margin collapses
 * against the float and measures 0. */
#dm .dmform .gy-form-legal {
  clear: both;
  /* The floated button wrapper already leaves 21px beneath it (measured at
   * 1440, 768 and 390), so the line adds none of its own. Left edge = the
   * button's: both forms' buttons sit 15px in from the form on desktop and
   * tablet, and span the column on the phone, where the line is centred. */
  padding: 0 15px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-align: left;
}
@media (max-width: 767px) {
  #dm .dmform .gy-form-legal { text-align: center; }
}
#dm .dmform .gy-form-legal a,
#dm .dmform .gy-form-legal a:visited {
  color: inherit;
  text-decoration: underline;
  display: inline;
}

/* ---- Privacy Policy page ---------------------------------------------------
 * Duda's reset zeroes the margin on p, ul and h2, so the page needs its own
 * rhythm or it reads as one slab. */
#dm .gy-legal { max-width: 900px; margin: 0 auto !important; text-align: left; }
#dm .gy-legal p { margin: 0 0 14px !important; line-height: 1.7; }
#dm .gy-legal .gy-legal-date { font-weight: 700; margin-bottom: 20px !important; }
#dm .gy-legal h2 { margin: 34px 0 12px !important; font-size: 24px !important; line-height: 1.3 !important; text-align: left; }
#dm .gy-legal h3 { margin: 22px 0 10px !important; font-size: 19px !important; line-height: 1.3 !important; text-align: left; }
#dm .gy-legal ul { margin: 0 0 14px !important; padding-left: 24px !important; list-style: disc outside !important; }
#dm .gy-legal li { margin: 0 0 6px !important; line-height: 1.7; list-style: disc outside !important; }
#dm .gy-legal a { color: rgb(20, 20, 185) !important; text-decoration: underline !important; }
@media (max-width: 767px) {
  #dm .gy-legal h2 { font-size: 19px !important; }
  #dm .gy-legal h3 { font-size: 17px !important; }
}

/* ---- 404 --------------------------------------------------------------------
 * Live styles its error page from a <style> block inside the body, which the
 * port does not carry, so the page shipped as four lines of unstyled text.
 * These are live's own rules, scoped to the error container. */
#dm #error-container {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 120px;
  background: #fff;
  color: #bababa;
  text-align: center;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  overflow: hidden;
}
.dmMobileBody #dm #error-container { padding-top: 60px; }
#dm #error-container .four-o-four {
  font-family: 'Oswald', sans-serif;
  font-size: 130px;
  text-align: center;
  line-height: 130px;
}
#dm #error-container .lean { display: inline-block; transform: rotate(15deg) translate(-5px, -4px); }
#dm #error-container .description { font-size: 22px; margin: 45px 0; }
#dm #error-container .back-button {
  display: inline-block;
  width: 184px;
  height: 37px;
  margin-bottom: 20px;
  background: #898989;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 37px;
  border-radius: 2px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

/* ---- /about-us hero title: was an <h3>, now the page's <h1> ---------------
 * Pinned to the h3's measured type (30px desktop/tablet, 20px phone, normal
 * line-height) so the retag moves nothing: box 820x37 / 538x74 / 273x48. */
#dm .dmBody h1.gy-h1.slide-title { font-size: 30px !important; line-height: normal !important; }
@media (max-width: 767px) {
  #dm .dmBody h1.gy-h1.slide-title { font-size: 20px !important; }
}

/* ---- Drawer: the current page's row inside "Our Services" ------------------
 * Duda paints it as a dark bar (rgb(46,46,46)) and leaves the label in the
 * menu's grey (rgb(87,87,87)) — 1.9:1, on live too. The desktop dropdown
 * prints the same row in white; the drawer now does as well. */
#dm .layout-drawer ul.unifiednav__container_sub-nav a.dmNavItemSelected .nav-item-text {
  color: rgb(255, 255, 255) !important;
}

/* ---- Desktop dropdown ("Our Services") --------------------------------------
 * The five service links were rgb(153,153,153) on the panel's rgb(250,249,249)
 * — 2.8:1, hard to read (client request 2026-10-10). Now the top-level menu's
 * own grey, 7:1. The hovered and current rows keep their white-on-dark. */
#dm .dmHeaderContainer .unifiednav__container_sub-nav a.unifiednav__item:not(.dmNavItemSelected):not(:hover) .nav-item-text {
  color: rgb(87, 87, 87) !important;
}