/* ============================================================
   GQS Custom Overrides - navbar, flyout menu, lightbox, popup
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap");

/* ---------- Navbar: remove hardcoded width, make responsive ---------- */
header.elementor .elementor-sticky--active.elementor-section {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 100% !important;
}
header.elementor nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  box-sizing: border-box;
}
header.elementor .elementor-container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
header.elementor .elementor-widget-image img {
  max-width: 220px;
  height: auto;
}
@media (max-width: 1024px) {
  header.elementor .elementor-widget-image img { max-width: 180px; }
}

/* ---------- "Areas We Work In" flyout submenu to the right ---------- */
/* Top-level submenu (below the parent) */
.elementor-nav-menu--main .menu-item-has-children,
.main-navigation .menu-item-has-children { position: relative; }

.elementor-nav-menu--main > ul > .menu-item-has-children > .sub-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99999;
  min-width: 220px;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none;
  border-radius: 4px;
}
.elementor-nav-menu--main > ul > .menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu--main > ul > .menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
}

/* NESTED sub-menu: FLY OUT TO THE RIGHT, not below */
.elementor-nav-menu--main .sub-menu .menu-item-has-children {
  position: relative;
}
.elementor-nav-menu--main .sub-menu .menu-item-has-children > .sub-menu {
  display: none !important;
  position: absolute !important;
  top: -6px !important;       /* align with parent */
  left: 100% !important;
  right: auto !important;
  margin-left: 2px !important;
  min-width: 200px;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  padding: 6px 0 !important;
  list-style: none;
  z-index: 100000;
  border-radius: 4px;
}
.elementor-nav-menu--main .sub-menu .menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu--main .sub-menu .menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
}

/* Invisible hover-bridge so cursor can travel across the gap */
.elementor-nav-menu--main .sub-menu .menu-item-has-children > .sub-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 8px;
  height: 100%;
}

/* Sub-menu items */
.elementor-nav-menu--main .sub-menu li {
  display: block !important;
  width: 100% !important;
  list-style: none;
  margin: 0 !important;
}
.elementor-nav-menu--main .sub-menu li > a,
.elementor-nav-menu--main .sub-menu li > a.elementor-sub-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px !important;
  white-space: nowrap;
  color: #222 !important;
  text-decoration: none;
  background: transparent;
  width: 100% !important;
  box-sizing: border-box !important;
}
.elementor-nav-menu--main .sub-menu li > a:hover,
.elementor-nav-menu--main .sub-menu li > a:focus,
.elementor-nav-menu--main .sub-menu li.current-menu-item > a,
.elementor-nav-menu--main .sub-menu li > a.elementor-item-active {
  background: #de8e2b !important;
  color: #ffffff !important;
}
.elementor-nav-menu--main .sub-menu li > a:hover .sub-arrow,
.elementor-nav-menu--main .sub-menu li > a:focus .sub-arrow,
.elementor-nav-menu--main .sub-menu li > a:hover .sub-arrow i,
.elementor-nav-menu--main .sub-menu li > a:focus .sub-arrow i,
.elementor-nav-menu--main .sub-menu li.current-menu-item > a .sub-arrow,
.elementor-nav-menu--main .sub-menu li.current-menu-item > a .sub-arrow i {
  color: #ffffff !important;
}

/* ---------- Caret/arrow inline with text ---------- */
.elementor-nav-menu a.has-submenu,
.elementor-nav-menu a.elementor-item,
.elementor-nav-menu a.elementor-sub-item {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.elementor-nav-menu a .sub-arrow {
  display: inline-flex !important;
  align-items: center;
  margin-left: 6px;
  font-size: 0.8em;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}
.elementor-nav-menu a .sub-arrow i {
  display: inline-block !important;
  vertical-align: middle;
}

/* Nested sub-menu parents: keep caret pointing down */
.elementor-nav-menu--main .sub-menu .menu-item-has-children > a .sub-arrow {
  transform: none !important;
  margin-left: 4px;
}
.elementor-nav-menu--main .sub-menu .menu-item-has-children > a .sub-arrow i {
  transform: none !important;
}

/* ---------- Tablet/Mobile nav: full-viewport dropdown ---------- */
@media (max-width: 1024px) {
  /* Spans the FULL viewport width regardless of the narrow nav column.
     The `top` value is reset by JS to the live height of the sticky
     header so the menu never overlaps the logo. 80px is a safe default
     before JS runs. */
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 80px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
    z-index: 99998 !important;
    box-sizing: border-box;
  }

  /* Generous padding + larger font on tablet/mobile items.
     Text is centered; any caret/sub-arrow is absolutely positioned on
     the right so it doesn't push the text off-center. */
  nav.elementor-nav-menu--dropdown .elementor-nav-menu > li > a,
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li a {
    position: relative;
    padding: 15px 30px !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal;
  }
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li a .sub-arrow {
    position: absolute !important;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
  }
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li {
    width: 100% !important;
    border-bottom: 1px solid #eee;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Full-width hover / active backgrounds on mobile.
     Only the actual current page gets the active bg — we key off the
     anchor's .elementor-item-active / .elementor-sub-item-active class,
     NOT the <li>'s .current-menu-item, because WordPress marks every
     /#fragment sibling (About, Our Services) as current-menu-item on
     the home page and we don't want those lit up. */
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li > a:hover,
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li > a:focus,
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li > a.elementor-item-active,
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li > a.elementor-sub-item-active {
    background: #de8e2b !important;
    color: #ffffff !important;
  }
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li > a:hover .sub-arrow i,
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li > a:focus .sub-arrow i,
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li > a.elementor-item-active .sub-arrow i,
  nav.elementor-nav-menu--dropdown .elementor-nav-menu li > a.elementor-sub-item-active .sub-arrow i {
    color: #ffffff !important;
  }

  /* Nested sub-menus stack beneath parent on mobile — no indent, so the
     centered text lines up flush with the top-level items. */
  nav.elementor-nav-menu--dropdown ul,
  nav.elementor-nav-menu--dropdown .sub-menu,
  nav.elementor-nav-menu--dropdown .sub-menu.elementor-nav-menu--dropdown {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    background: #fafafa !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  /* Make sure anchors in nested sub-menus use the same centered layout,
     not the indented padding from an earlier rule */
  nav.elementor-nav-menu--dropdown .sub-menu li > a,
  nav.elementor-nav-menu--dropdown .sub-menu .sub-menu li > a {
    padding: 15px 30px !important;
  }

  /* Keep the (also affected) main-nav nested caret pointing down */
  .elementor-nav-menu--main .sub-menu .menu-item-has-children > a .sub-arrow {
    transform: none !important;
  }
}

/* ===========================================================
   Reviews / testimonial carousel (rehydrated)
   =========================================================== */
.elementor-widget-reviews .elementor-swiper { position: relative; }
.elementor-widget-reviews .swiper,
.elementor-widget-reviews .elementor-main-swiper {
  overflow: hidden !important;
}
/* Allow the wrapper to slide via transform */
.elementor-widget-reviews .swiper-wrapper {
  display: flex !important;
  overflow: visible !important;
  transition: transform .5s ease;
  will-change: transform;
}
/* Desktop: 3 per view */
.elementor-widget-reviews .swiper-slide {
  flex: 0 0 calc((100% - 30px) / 3) !important;
  max-width: calc((100% - 30px) / 3) !important;
  margin-right: 15px;
  display: block !important; /* undo 'freeze' that hides non-first */
  box-sizing: border-box;
}
.elementor-widget-reviews .swiper-slide:last-child { margin-right: 0; }

/* Tablet: 2 per view */
@media (max-width: 1024px) {
  .elementor-widget-reviews .swiper-slide {
    flex: 0 0 calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
    margin-right: 10px;
    display: block !important;
  }
}
/* Mobile: 1 per view */
@media (max-width: 640px) {
  .elementor-widget-reviews .swiper-slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-right: 10px;
    display: block !important;
  }
}

/* Re-enable and style the prev/next arrows */
.elementor-widget-reviews .elementor-swiper-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 4px;
  color: #de8e2b !important;
  font-size: 26px;
  line-height: 1;
  cursor: pointer !important;
  z-index: 10;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  user-select: none;
}
/* Hide the font-icon glyphs (they weren't always loading); we use ::before chevrons instead. */
.elementor-widget-reviews .elementor-swiper-button i { display: none !important; }
.elementor-widget-reviews .elementor-swiper-button-prev::before {
  content: "\2039"; /* ‹ */
  line-height: 1;
  pointer-events: none;
  font-weight: 700;
}
.elementor-widget-reviews .elementor-swiper-button-next::before {
  content: "\203A"; /* › */
  line-height: 1;
  pointer-events: none;
  font-weight: 700;
}
.elementor-widget-reviews .elementor-swiper-button:hover,
.elementor-widget-reviews .elementor-swiper-button:focus {
  background: #de8e2b !important;
  color: #ffffff !important;
  border-color: #de8e2b !important;
  outline: none;
}
.elementor-widget-reviews .elementor-swiper-button-prev { left: -12px; }
.elementor-widget-reviews .elementor-swiper-button-next { right: -12px; }

/* Make sure the swiper container doesn't clip the outside buttons */
.elementor-widget-reviews .elementor-swiper { overflow: visible !important; }

@media (max-width: 640px) {
  .elementor-widget-reviews .elementor-swiper-button-prev { left: 4px; }
  .elementor-widget-reviews .elementor-swiper-button-next { right: 4px; }
}

/* ===========================================================
   Lightbox slider (gallery)
   =========================================================== */
.gqs-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  user-select: none;
}
.gqs-lightbox.open {
  display: flex;
}
.gqs-lightbox__stage {
  position: relative;
  max-width: 92vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gqs-lightbox__img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  background: #111;
}
.gqs-lightbox__caption {
  color: #fff;
  margin-top: 16px;
  font-size: 15px;
  text-align: center;
  max-width: 80vw;
  min-height: 22px;
}
.gqs-lightbox__counter {
  color: #ddd;
  font-size: 13px;
  margin-top: 6px;
}
.gqs-lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  width: 52px;
  height: 52px;
  font-size: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
  z-index: 2;
}
.gqs-lightbox__btn:hover { background: rgba(255,255,255,0.25); }
.gqs-lightbox__btn--prev { left: -70px; }
.gqs-lightbox__btn--next { right: -70px; }
.gqs-lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
}
.gqs-lightbox__close:hover { background: rgba(255,255,255,0.25); }

@media (max-width: 900px) {
  .gqs-lightbox__btn--prev { left: 8px; }
  .gqs-lightbox__btn--next { right: 8px; }
}

/* Gallery item: always show preview */
.e-gallery-item,
a.e-gallery-item {
  cursor: pointer !important;
  display: block !important;
  position: relative;
  overflow: hidden;
}
.e-gallery-image,
.e-gallery-item__image,
.elementor-gallery-item__image {
  display: block !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  min-height: 200px;
}
.e-gallery-item:hover .elementor-gallery-item__overlay {
  background: rgba(0,0,0,0.25);
}

/* ===========================================================
   CTA Popup — "Get in Touch"
   =========================================================== */
.gqs-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999998;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.gqs-popup.open { display: flex; }
.gqs-popup__dialog {
  background: #fff;
  max-width: 960px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position: relative;
}
.gqs-popup__image {
  flex: 1 1 50%;
  background-image: url("../images/gqs-project-3-768x511_1.jpg");
  background-size: cover;
  background-position: center;
  min-height: 300px;
}
.gqs-popup__body {
  flex: 1 1 50%;
  padding: 40px 36px;
  background: #fbf1e3;
  overflow-y: auto;
  box-sizing: border-box;
}
.gqs-popup__close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  color: #222;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.gqs-popup__close:hover { color: #000; }
.gqs-popup h2 {
  font-family: Raleway, sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 14px 0;
  text-align: center;
  color: #111;
}
.gqs-popup__intro {
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  margin: 0 0 14px 0;
}
.gqs-popup__phone {
  text-align: center;
  margin: 0 0 20px 0;
}
.gqs-popup__phone a {
  color: #ffb703;
  font-size: 22px;
  font-weight: 700;
  text-decoration: underline;
}
.gqs-popup__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gqs-popup__form .gqs-row {
  display: flex;
  gap: 10px;
}
.gqs-popup__form .gqs-row > * { flex: 1; }
.gqs-popup__form input,
.gqs-popup__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dcd2c1;
  background: #fff;
  border-radius: 3px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
}
.gqs-popup__form input:focus,
.gqs-popup__form textarea:focus {
  border-color: #dd9433;
}
.gqs-popup__submit {
  background: #dd9433;
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 3px;
  margin-top: 4px;
  transition: background .2s ease;
  font-family: inherit;
}
.gqs-popup__submit:hover { background: #c27f28; }
.gqs-popup__status {
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
  min-height: 18px;
  color: #2a7a2a;
}
.gqs-popup__status.error { color: #b32020; }

@media (max-width: 768px) {
  .gqs-popup__dialog { flex-direction: column; max-height: 96vh; }
  .gqs-popup__image { min-height: 160px; flex: 0 0 160px; }
  .gqs-popup__body { padding: 28px 22px; }
  .gqs-popup h2 { font-size: 26px; }
  .gqs-popup__form .gqs-row { flex-direction: column; gap: 10px; }
}

/* Hide lock state */
body.gqs-no-scroll { overflow: hidden !important; }

/* ===========================================================
   Blog post article layout
   =========================================================== */
.gqs-post { background: #fdf9f1; }

/* Hero: orange title block on the left, featured image overlapping on the right */
.gqs-post__hero {
  padding: 0;
  background: #fdf9f1;
}
.gqs-post__hero-frame {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 0 150px;
  min-height: 650px;
  display: block;
}
.gqs-post__hero-block {
  background: #de8e2b;
  color: #ffffff;
  width: 62%;
  min-height: 420px;
  padding: 60px 170px 60px 220px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.gqs-post__back {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.gqs-post__back a {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gqs-post__back a:hover { opacity: 0.85; }
.gqs-post__title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  margin: 0;
  color: #ffffff;
  text-transform: capitalize;
  letter-spacing: -0.005em;
}
.gqs-post__featured {
  position: absolute;
  right: 40px;
  top: 155px;
  width: 54%;
  max-width: 720px;
  aspect-ratio: 3 / 2;
  margin: 0;
  z-index: 2;
}
.gqs-post__featured img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 2px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  object-fit: cover;
}

@media (max-width: 1200px) {
  .gqs-post__hero-frame { min-height: 0; padding: 60px 24px; }
  .gqs-post__hero-block { width: 100%; min-height: 0; padding: 40px 28px; }
  .gqs-post__title { font-size: 34px; }
  .gqs-post__featured {
    position: static;
    width: auto;
    max-width: 100%;
    margin: -40px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .gqs-post__hero-frame { padding: 40px 0 0; }
  .gqs-post__hero-block { padding: 32px 22px; }
  .gqs-post__title { font-size: 26px; }
  .gqs-post__featured { margin-top: -24px; padding: 0 12px; }
}
.gqs-post__body {
  padding: 50px 120px 70px 120px;
}
.gqs-post__layout > .gqs-post__main .gqs-post__body {
  padding: 50px 120px 70px 120px !important;
}
.gqs-post__body-inner {
  max-width: 780px;
  margin: 0 auto;
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #333;
}

/* (hero layout is handled by .gqs-post__hero-frame above) */

/* Two-column layout: article body + related posts sidebar */
.gqs-post .gqs-post__layout,
article.gqs-post .gqs-post__layout,
.site .gqs-post__layout {
  max-width: none !important;
  width: auto !important;
  margin-left: 100px !important;
  margin-right: 100px !important;
  padding: 20px 20px 40px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 40px !important;
  align-items: start !important;
  box-sizing: border-box;
}
.gqs-post__layout > .gqs-post__main {
  min-width: 0;
  padding-top: 30px;
  padding-bottom: 40px;
}
.gqs-post__layout > .gqs-post__main > .gqs-post__body-inner {
  max-width: none;
  margin: 0;
}

.gqs-post__sidebar {
  position: sticky;
  top: 110px;
  padding: 30px 0 60px;
}
.gqs-post__sidebar-title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 22px;
  color: #222;
}
.gqs-post__related {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gqs-post__related li {
  margin: 0 0 22px;
  border-bottom: 1px solid #f0e7d8;
  padding-bottom: 22px;
}
.gqs-post__related li:last-child {
  border-bottom: none;
}
.gqs-post__related a {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-decoration: none;
}
.gqs-post__related img {
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.gqs-post__related-text { flex: 1; min-width: 0; }
.gqs-post__related-text h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 6px;
  color: #c59d5f;
  transition: color .2s ease;
}
.gqs-post__related-text p {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  color: #c59d5f;
}
.gqs-post__related a:hover h3,
.gqs-post__related a:hover p {
  color: #a37f42;
}

@media (max-width: 1024px) {
  .gqs-post .gqs-post__layout,
  article.gqs-post .gqs-post__layout,
  .site .gqs-post__layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .gqs-post__sidebar {
    position: static;
    padding-top: 10px;
    border-top: 1px solid #f0e7d8;
  }
}
.gqs-post__body-inner h2 {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.35;
  color: #222;
  margin: 40px 0 14px;
}
.gqs-post__body-inner p {
  margin: 0 0 16px;
}
.gqs-post__body-inner ul {
  margin: 0 0 18px;
  padding-left: 24px;
}
.gqs-post__body-inner li {
  margin: 6px 0;
}

/* Data tables inside a post body */
.gqs-post__body-inner .gqs-post__table,
.gqs-post__body-inner table {
  width: 100%;
  margin: 20px 0 28px;
  border-collapse: collapse;
  background: #fdf9f1;
  font-size: 15px;
  line-height: 1.5;
  color: #222;
}
.gqs-post__body-inner .gqs-post__table th,
.gqs-post__body-inner .gqs-post__table td,
.gqs-post__body-inner table th,
.gqs-post__body-inner table td {
  padding: 14px 18px;
  border: 1px solid #e4d8c1;
  text-align: left;
  vertical-align: middle;
}
.gqs-post__body-inner .gqs-post__table th {
  background: #f9ecd4;
  font-weight: 700;
  color: #1a1a1a;
}
.gqs-post__body-inner .gqs-post__table tbody tr:nth-child(even) td {
  background: #fff9ed;
}
.gqs-post__cta-wrap {
  text-align: center;
  margin: 36px 0 24px;
}
.gqs-post__cta {
  display: inline-block;
  background: #de8e2b;
  color: #ffffff !important;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 16px;
  transition: background .2s ease;
}
.gqs-post__cta:hover { background: #c27f28; }
.gqs-post__nav {
  text-align: left;
  margin-top: 28px;
  font-size: 15px;
}
.gqs-post__nav a { color: #de8e2b; text-decoration: none; }
.gqs-post__nav a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .gqs-post__title { font-size: 30px; }
  .gqs-post__body-inner { font-size: 16px; }
  .gqs-post__body-inner h2 { font-size: 24px; }
  .gqs-post__hero { padding: 40px 16px 24px; }
  .gqs-post__body { padding: 36px 16px 50px; }
}

/* ================================================================
   Inline replacement forms (was Gravity Forms)
   - Wired later to form-relay; for now does client-side validation
   - Container: .gqs-inline-form-wrap  Form: .gqs-inline-form
   ================================================================ */
.gqs-inline-form-wrap {
  background: #ffffff;
  padding: 28px 26px;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.gqs-inline-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gqs-inline-form .gqs-row {
  display: flex;
  gap: 14px;
}
.gqs-inline-form .gqs-row > .gqs-field { flex: 1; }
.gqs-inline-form .gqs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gqs-inline-form label {
  font-family: Raleway, "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: .02em;
}
.gqs-inline-form label .req { color: #c0392b; margin-left: 2px; }
.gqs-inline-form input,
.gqs-inline-form textarea,
.gqs-inline-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dcd2c1;
  background: #fff;
  border-radius: 3px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  color: #222;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gqs-inline-form textarea { resize: vertical; min-height: 120px; }
.gqs-inline-form input:focus,
.gqs-inline-form textarea:focus,
.gqs-inline-form select:focus {
  border-color: #dd9433;
  box-shadow: 0 0 0 3px rgba(221,148,51,.18);
}
.gqs-inline-form input.invalid,
.gqs-inline-form textarea.invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.gqs-inline-form__submit {
  background: #dd9433;
  color: #fff;
  border: none;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  margin-top: 4px;
  transition: background .2s ease, transform .05s ease;
  font-family: Raleway, "Open Sans", sans-serif;
}
.gqs-inline-form__submit:hover { background: #c27f28; }
.gqs-inline-form__submit:active { transform: translateY(1px); }
.gqs-inline-form__submit[disabled] { opacity: .65; cursor: not-allowed; }
.gqs-inline-form__status {
  font-size: 14px;
  min-height: 18px;
  color: #2a7a2a;
  font-weight: 600;
}
.gqs-inline-form__status.error { color: #b32020; }

@media (max-width: 600px) {
  .gqs-inline-form-wrap { padding: 22px 18px; }
  .gqs-inline-form .gqs-row { flex-direction: column; gap: 14px; }
}