/* === Red Barn Media Group - Gering Valley Plumbing & Heating === */

/* === CSS Custom Properties === */
:root {
  /* Colors - Gering Valley Brand (comic/superhero palette) */
  --color-red: #cd000c;
  --color-dark-red: #a0000a;
  --color-grey-light: #eef0f5;
  --color-blue: #4b9cd1;
  --color-blue-dark: #357aae;
  --color-yellow: #ffc22d;
  --color-yellow-dark: #e6a736;
  --color-dark: #050808;
  --color-cream: #fff1e4;
  --color-polka: #edf5fa;
  --color-light: #eeffee;

  --color-white: #ffffff;
  --color-gray-666: #666;
  --color-black: #000000;

  /* Typography - Gering Valley (Adobe Fonts: Roboto headings, Inter body) */
  --font-heading: roboto, sans-serif;
  --font-body: inter-variable, sans-serif;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Layout */
  --hero-height: 650px;
  --hero-padding: 3rem;
  --transition-standard: 0.25s;
  /* Gering Valley: square corners (buttons confirmed; revisit card radius per-block in fine-tune) */
  --border-radius-standard: 0;
  --border-radius-large: 0;
  --border-radius-card: 0;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
  --margin-standard: 1rem;

  /* Bootstrap radius overrides (square-cornered) */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-2xl: 0;
}

/* === Base Styles === */
html,
body {
  width: 100%;
  height: 100%;
}

body {
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-cream);
}

/* === Typography === */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-heading);
  color: var(--color-dark);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.ff-heading {
  font-family: var(--font-heading);
}
.bold {
  font-weight: var(--font-weight-bold);
}
.regular {
  font-weight: var(--font-weight-regular);
}

p,
ul li,
ol li,
table {
  font-size: 0.85rem;
  font-weight: var(--font-weight-regular);
}
.fs-8 {
  font-size: 0.75rem;
}

/* === Menu Styles === */
.menu-container {
  background: var(--color-cream);
  margin-top: 0 !important;
}

/* We Are Hiring banner (top of fixed menu) */
.gvph-hiring-banner {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0.5rem 1rem;
}
.gvph-hiring-link {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}
.gvph-hiring-link:is(:hover, :focus) {
  color: var(--color-white);
  text-decoration: none;
}

/* Desktop top bar (logo + CTAs) */
.menu-container .gvph-top-bar {
  background-color: transparent !important;
  padding: 1rem 2rem;
  transition: padding var(--transition-standard);
}
.menu-container.shrink-menu .gvph-top-bar {
  padding: 0.5rem 2rem;
}
.menu-container .gvph-top-bar-row {
  min-height: 97px;
  transition: min-height var(--transition-standard);
}
.menu-container.shrink-menu .gvph-top-bar-row {
  min-height: 65px;
}

/* Sub nav: white comic bar — 5px black border, inset (.container), with the Figma rough-edged yellow block offset behind */
.menu-container .gvph-sub-nav {
  position: relative;
  border: 5px solid var(--color-dark);
  padding-top: 0;
  padding-bottom: 0;
  transition: background-color var(--transition-standard);
}
.menu-container .gvph-sub-nav::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 16px;
  left: -1.5rem;
  right: 0.5rem;
  bottom: -16px;
  background: url('../img/gvph-nav-block.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
.menu-container .gvph-sub-nav .navbar-nav .nav-link {
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.8rem;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.menu-container .gvph-sub-nav .navbar-nav .nav-link:is(:hover, :active, :focus) {
  color: var(--color-red);
}

/* Scrolled / shrink state: same rough comic block, filled blue, with white text + black stroke (designer note) */
.menu-container.shrink-menu .gvph-sub-nav::before {
  background-image: url('../img/gvph-nav-block-blue.svg');
}
.menu-container.shrink-menu .gvph-sub-nav .navbar-nav .nav-link {
  color: var(--color-white);
}
.menu-container.shrink-menu .gvph-sub-nav .navbar-nav .nav-link:is(:hover, :active, :focus) {
  color: var(--color-yellow);
}

/* Mobile offcanvas keeps light bg + navy links */
@media (max-width: 1199.98px) {
  .menu-container .gvph-sub-nav .offcanvas-body .navbar-nav .nav-link {
    color: var(--color-dark);
  }
}

.navbar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 6rem;
  transition: height var(--transition-standard);
}

.shrink-menu .navbar-nav {
  height: 5rem;
}

/* FA kit is SVG+JS, so carets are real <i> elements in markup. Hide all Bootstrap pseudo-carets. */
.menu-container .dropdown-toggle::after,
.menu-container .dropdown-toggle::before,
.menu-container .dropdown-item::after {
  display: none !important;
}

.has-dropdown {
  /* Align the real <i> caret with the link text */
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

/* Desktop: dropdown toggles are inline-flex, so they don't honor the nav-fill
   text-align:center that the plain nav links use. Fill the cell + center the
   content so all top-level items are evenly spaced. (Mobile offcanvas is left-aligned.) */
@media (min-width: 1200px) {
  .menu-container .gvph-sub-nav .navbar-nav .has-dropdown {
    width: 100%;
    justify-content: center;
  }
}

.nav-fill .nav-item .dropdown-item {
  text-align: left !important;
}

/* Dropdown Styles */
.nav-item .dropdown-item {
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: 1rem;
}

.nav-item .dropdown-item:is(:hover, :active) {
  background-color: #eee;
  border-radius: var(--border-radius-standard);
  color: var(--color-blue) !important;
}

.navbar-expand-xl .navbar-nav .dropdown-menu {
  background: var(--color-white);
  border: 5px solid var(--color-dark);
  box-shadow: -8px 8px 0 0 var(--color-dark);
  margin-top: 1rem;
  padding: 0.5rem;
}

.gvph-mega-dropdown-row {
  background-color: var(--color-white);
  border-radius: var(--border-radius-standard);
}

.navbar-expand-xl .navbar-nav .dropdown-menu.mega-dropdown {
  padding: 0.5rem;
  border-radius: var(--border-radius-standard);
  width: 100%;
}

.gvph-mega-dropdown-group {
  position: relative;
  isolation: isolate;
  padding: 1.5rem 1.75rem;
}
.gvph-mega-dropdown-group::before {
  content: '';
  position: absolute;
  inset: 0 0.375rem;
  background-color: transparent;
  border-radius: var(--border-radius-standard);
  border: 3px solid var(--color-dark);
  transition: background-color var(--transition-standard);
  z-index: -1;
}
.gvph-mega-dropdown-group p {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-dark);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  transition: color var(--transition-standard);
}
.gvph-mega-dropdown-group p i {
  color: var(--color-red);
  margin-right: 0.375rem;
}
.gvph-mega-dropdown-group:is(:hover, :focus-within, :active)::before {
  background-color: var(--color-yellow);
}
.gvph-mega-dropdown-group:is(:hover, :focus-within, :active) p {
  color: var(--color-dark);
}
/* Links go dark on the yellow hover fill (blue-on-yellow reads poorly) */
.gvph-mega-dropdown-group:is(:hover, :focus-within, :active) .link-blue {
  color: var(--color-dark);
}
/* ...but the individual link being hovered turns red */
.gvph-mega-dropdown-group .link-blue:hover {
  color: var(--color-red);
}

/* Category heading links: keep the heading's dark/uppercase look, red on hover */
.gvph-mega-dropdown-group p a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-standard);
}
.gvph-mega-dropdown-group p a:hover {
  color: var(--color-red);
}

/* Logo Styles */
.gvph-logo-desktop {
  width: 275px;
  height: 94px;
  object-fit: contain;
  transition: all var(--transition-standard);
}

.shrink-menu .gvph-logo-desktop {
  width: 220px;
  height: 75px;
}

/* === Home Hero (homepage) === */
.gvph-hero {
  /* Cream body shows through. Superhero art is a right-anchored, fully-visible background (contain). */
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: right center;
  /* width-based so the art scales down with the viewport, but capped so on very wide screens
     it can't grow taller than the hero (which would clip the top behind the fixed menu) */
  background-size: min(46%, 820px) auto;
}
/* Desktop (xl+): art shows, min-height gives it room, content vertically centered. Below xl the
   layout stacks full-width, so the art is dropped. Two sizes: 720 for 1200–1599, 964 for wide/retina. */
@media (min-width: 1200px) {
  .gvph-hero {
    display: flex;
    align-items: center;
    min-height: var(--hero-height);
    background-image: url('../img/gvph-hero-720-526.webp');
  }
}
@media (min-width: 1600px) {
  .gvph-hero {
    background-image: url('../img/gvph-hero-964-704.webp');
  }
}

/* === Trust Closer — van photo art on the right (xl+), drops below 1200 like the hero ===
   Two sizes: 600 for 1200–1599, 850 for wide/retina screens. */
.gvph-trust-closer {
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 38% auto; /* width-based so the art scales down with the viewport */
}
@media (min-width: 1200px) {
  .gvph-trust-closer {
    background-image: url('../img/gvph-banner-closer-600-522.webp');
  }
  /* keep the intro copy in a slightly narrower measure than the value cards */
  .gvph-trust-closer-intro {
    max-width: 660px;
  }
}
@media (min-width: 1600px) {
  .gvph-trust-closer {
    background-image: url('../img/gvph-banner-closer-850-739.webp');
  }
}
.gvph-hero h1 {
  font-size: 2.75rem;
  line-height: 1.1667;
}
.gvph-hero p {
  font-size: 0.85rem;
  line-height: 1.5;
}
@media (max-width: 575.98px) {
  .gvph-hero h1 {
    font-size: 2.25rem;
  }
}

/* === Home Opening — contact card with decorative SVG side panels === */
.gvph-contact-card {
  background-color: var(--color-white);
  background-image: url('../img/gvph-banner-yellow-left-contact.svg'),
    url('../img/gvph-banner-blue-right-contact.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-origin: border-box; /* paint under the border so the panels meet the edge — no white seam */
  /* Mobile/tablet: panels stretch full height (taper distorts — acceptable per design) */
  background-size: 4rem 100%, 4rem 100%;
  padding: 2rem 4.75rem;
}
@media (min-width: 768px) {
  .gvph-contact-card {
    background-size: 5.5rem 100%, 5.5rem 100%;
    padding: 2.5rem 6.25rem;
  }
}
/* xl+: full tapered panels (card height ≈ the SVG's native proportions) */
@media (min-width: 1200px) {
  .gvph-contact-card {
    background-size: auto 100%, auto 100%;
    padding: 2.5rem 7rem;
  }
}
/* Form fields — Figma Neutral/100 fill, Neutral/500 placeholder */
.gvph-contact-card .form-control {
  background-color: #e5e7ea;
}
.gvph-contact-card .form-control::placeholder {
  color: #a9abb4;
}

/* === Core Values / Trust cards — comic: 5px border, blue dotted top bar, red circle icon === */
.gvph-value-card {
  border: 5px solid var(--color-dark);
}
.gvph-value-bar {
  height: 48px;
  /* Round CSS dots (always round, never stretched) layered over a solid blue bar whose bottom edge is roughened in the SVG */
  background-image: radial-gradient(circle, rgba(5, 8, 8, 0.1) 6px, transparent 6.5px),
    url('../img/gvph-value-bar-blue.svg');
  background-repeat: repeat, no-repeat;
  background-position: center, center top;
  background-size: 22px 22px, 100% 100%;
}
.gvph-value-icon {
  top: 8px;
  left: 14px;
  width: 59px;
  height: 59px;
  border: 4px solid var(--color-dark);
  font-size: 1.5rem;
}
.gvph-value-card .card-body {
  padding-top: 2.75rem;
}
.gvph-value-card .card-body h3 {
  margin-top: 0.5rem;
}

/* === Home Services — comic tabs, image panel, block accordion === */
/* Tab bar: one comic-bordered row; active/hover tab gets the yellow tapered shape behind it */
.gvph-service-tabs {
  position: relative;
  z-index: 0; /* stacking context so the layers below are scoped to the bar */
  border: 0; /* frame is drawn as an overlay so it sits ABOVE the yellow shape */
  background-color: transparent; /* cream body shows through, like the menu bar */
  margin-bottom: 2.5rem; /* separate the tab bar from the panes */
}
/* Comic frame overlay — on top of everything so the yellow shape sits below it */
.gvph-service-tabs::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 5px solid var(--color-dark);
  pointer-events: none;
  z-index: 3;
}
.gvph-service-tabs .nav-item {
  flex: 1 1 0;
  min-width: 0;
}
.gvph-service-tabs .nav-link {
  position: relative; /* no z-index — its ::before/::after layer within the bar's context */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
  padding: 1rem 0.5rem;
  background-color: transparent;
}
.gvph-service-tabs .nav-link:is(:hover, :focus, .active) {
  background-color: transparent; /* kill Bootstrap's active white fill */
  border-color: transparent;
  color: var(--color-dark);
}
.gvph-service-tabs .nav-link i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
/* Diagonal divider between tabs (skewed line) */
.gvph-service-tabs .nav-item:not(:last-child) .nav-link::after {
  content: '';
  position: absolute;
  z-index: 4; /* dividers on top, with the frame */
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  background-color: var(--color-dark);
  transform: skewX(-14deg);
}
/* Active / hover: yellow tapered shape offset down-left, behind the tab content and below the frame */
.gvph-service-tabs .nav-link:is(:hover, :focus, .active)::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 6px;
  bottom: -10px;
  left: -10px;
  right: 6px;
  background: url('../img/gvph-services-tab-active.svg') center / 100% 100% no-repeat; /* first tab: straight left, diagonal right */
}
/* middle tabs: diagonal on both edges */
.gvph-service-tabs .nav-item:not(:first-child) .nav-link:is(:hover, :focus, .active)::before {
  background-image: url('../img/gvph-services-tab-active-mid.svg');
}
/* last tab: diagonal left, straight right */
.gvph-service-tabs .nav-item:last-child .nav-link:is(:hover, :focus, .active)::before {
  background-image: url('../img/gvph-services-tab-active-last.svg');
}
/* Below lg: tabs wrap into a grid; drop the diagonals for straight grid lines */
@media (max-width: 991.98px) {
  .gvph-service-tabs .nav-item {
    flex: 1 0 50%;
  }
  .gvph-service-tabs .nav-item:not(:last-child) .nav-link::after {
    display: none;
  }
  .gvph-service-tabs .nav-link {
    border-right: 2px solid var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
    font-size: 0.75rem;
  }
  /* Keep the grid borders on hover/active (base rule sets them transparent) */
  .gvph-service-tabs .nav-link:is(:hover, :focus, .active) {
    border-right-color: var(--color-dark);
    border-bottom-color: var(--color-dark);
  }
  /* The diagonal desktop shapes overflow the cell + cross the borders here;
     use a straight, cell-contained yellow fill instead (all three tab variants). */
  .gvph-service-tabs .nav-link:is(:hover, :focus, .active)::before,
  .gvph-service-tabs .nav-item:not(:first-child) .nav-link:is(:hover, :focus, .active)::before,
  .gvph-service-tabs .nav-item:last-child .nav-link:is(:hover, :focus, .active)::before {
    background: var(--color-yellow);
    inset: 0;
  }
}

/* Tab-pane image with the red dotted panel on its right edge.
   The panel is a clip-path shape (no SVG stretch): black layer = the diagonal stroke,
   inner ::before = bg-dots-red (round dots) inset to reveal the black edge. */
.gvph-service-img {
  object-fit: cover;
}
.gvph-service-img-panel {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  width: 110px;
  background-color: var(--color-dark);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
}
.gvph-service-img-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-red);
  background-image: radial-gradient(circle, rgba(5, 8, 8, 0.1) 5.5px, transparent 6px);
  background-size: 22px 22px;
  clip-path: polygon(calc(38% + 6px) 0, 100% 0, 100% 100%, 6px 100%);
}

/* Block accordion — the open item gets a grey fill */
.gvph-service-accordion .accordion-item {
  background-color: transparent;
  border: 0;
}
.gvph-service-accordion .accordion-item:has(.accordion-collapse.show) {
  background-color: var(--color-grey-light);
}
.gvph-service-accordion .accordion-button {
  background-color: transparent;
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  box-shadow: none;
}
.gvph-service-accordion .accordion-button:focus {
  box-shadow: none;
}
.gvph-service-accordion .accordion-body {
  padding: 0 1rem 1rem;
  font-size: 0.72rem;
}
/* Expanded header text stays black (Bootstrap defaults it to the active blue) */
.gvph-service-accordion .accordion-button:not(.collapsed) {
  color: var(--color-dark);
}
.gvph-service-accordion .accordion-body .btn {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
}
/* Accordion toggle icons — real FA <i> (reliable with the SVG kit): arrow-right collapsed, X open.
   Bootstrap's chevron ::after is already hidden globally (.accordion-button::after). */
.gvph-service-accordion .accordion-button .gvph-acc-x {
  display: none;
}
.gvph-service-accordion .accordion-button:not(.collapsed) .gvph-acc-arrow {
  display: none;
}
.gvph-service-accordion .accordion-button:not(.collapsed) .gvph-acc-x {
  display: inline-block;
}
/* Dropdown in the accordion — comic 3px border */
.gvph-service-accordion .dropdown-menu {
  border: 3px solid var(--color-dark);
  border-radius: 0;
}
/* Yellow rough highlight behind the expanded header title (mini menu-block shape) */
.gvph-service-accordion .accordion-button:not(.collapsed) .gvph-acc-title {
  background: url('../img/gvph-nav-block.svg') center / 100% 100% no-repeat;
  padding: 0.125rem 0.625rem;
  margin-left: -0.5rem;
}
/* Card intro paragraph — smaller */
.gvph-service-content > p {
  font-size: 0.8rem;
}

.gvph-hero-reviews:hover .ff-heading {
  color: var(--color-yellow);
}

/* === Button Styles - UPDATED === */
.btn {
  padding: 0.5rem 1rem;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  border: 5px solid var(--color-dark);
  border-radius: 0;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  transition: all var(--transition-standard);
  text-transform: uppercase;
}

/* Keep the comic black border on every button state — only the background shifts on hover. */
.btn:is(:hover, :focus, :active) {
  border-color: var(--color-dark);
}

.btn.btn-menu {
  padding: 0.65rem 0.75rem;
  font-size: 0.85rem;
}
.btn.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
.btn.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
}
/* Gering Valley uses three brand buttons — red, blue, yellow — all with a 2px black border (set on .btn) and square corners. */

/* RED BTN */
.btn-red {
  color: var(--color-white);
  background: var(--color-red);
}
.btn-red:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-dark-red);
}

/* BLUE BTN */
.btn-blue,
.btn-252450 {
  color: var(--color-white);
  background: var(--color-blue);
}
.btn-blue:is(:hover, :active, :focus),
.btn-252450:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-blue-dark);
}

/* YELLOW BTN — dark text for contrast on yellow */
.btn-yellow {
  color: var(--color-dark);
  background: var(--color-yellow);
}
.btn-yellow:is(:hover, :active, :focus) {
  color: var(--color-dark);
  background: var(--color-yellow-dark);
}

a.link-blue {
  color: var(--color-blue);
}
a.link-blue:is(:hover, :focus, :active) {
  color: var(--color-dark);
}

a.link-white {
  color: var(--color-white);
}
a.link-white:is(:hover, :focus, :active) {
  color: var(--color-yellow);
}

/* === Color Utility Classes === */
/* RED */
.text-red {
  color: var(--color-red) !important;
}
.bg-red {
  background-color: var(--color-red) !important;
}
.border-red {
  border-color: var(--color-red) !important;
}

/* GREY LIGHT */
.bg-grey-light {
  background-color: var(--color-grey-light) !important;
}

/* === Footer Links === */
.gvph-footer-link {
  color: #1e1e1e;
  text-decoration: none;
}
.gvph-footer-link:is(:hover, :focus) {
  color: var(--color-red);
}

/* === FAQ plus icon — rotates 45° on open === */
.gvph-faq-icon {
  color: var(--color-red);
  font-size: 1.4rem;
  transition: transform 0.3s ease-in-out;
}
.accordion-button:not(.collapsed) .gvph-faq-icon {
  transform: rotate(45deg);
}

/* BLUE */
.text-blue {
  color: var(--color-blue) !important;
}
.bg-blue {
  background-color: var(--color-blue) !important;
}

/* PENCIL */
.text-yellow {
  color: var(--color-yellow) !important;
}
.bg-yellow {
  background-color: var(--color-yellow) !important;
}

.text-666 {
  color: var(--color-gray-666) !important;
}

/* POLKA brand background */
.bg-polka {
  background-color: var(--color-polka) !important;
}

/* Polka-dot backgrounds — base brand color + subtle dark dots. Use like a bg color on a section.
   Default = larger dots; add the -sm variant for smaller dots. */
.bg-dots-blue,
.bg-dots-yellow,
.bg-dots-yellow-sm {
  background-repeat: repeat;
}
.bg-dots-blue {
  background-color: var(--color-blue);
}
.bg-dots-yellow,
.bg-dots-yellow-sm {
  background-color: var(--color-yellow);
}
/* Large dots */
.bg-dots-blue,
.bg-dots-yellow {
  background-image: radial-gradient(circle, rgba(5, 8, 8, 0.1) 8px, transparent 8.5px);
  background-size: 36px 36px;
}
/* Small dots */
.bg-dots-yellow-sm {
  background-image: radial-gradient(circle, rgba(5, 8, 8, 0.1) 5.5px, transparent 6px);
  background-size: 22px 22px;
}

/* Comic 5px black border — make Bootstrap border-dark the true brand dark */
.border-dark {
  --bs-border-opacity: 1;
  border-color: var(--color-dark) !important;
}

/* === Comic Brand Elements === */
/* Hard offset "shadow shape" behind cards & images (0 blur, down-left). drop-shadow on overlines follows the clip-path; box-shadow here for rectangles. */
.gvph-shadow-hard {
  box-shadow: -10px 10px 0 0 var(--color-dark);
}

/* Overline: red angled banner with a black copy offset down-left.
   clip-path makes the parallelogram; filter: drop-shadow follows that shape (box-shadow would not). */
.gvph-overline {
  display: inline-block;
  filter: drop-shadow(-7px 7px 0 var(--color-dark));
  margin-bottom: 1.5rem !important; /* a touch more room below the badge (the drop-shadow eats into the gap) */
}
.gvph-overline > span {
  display: inline-block;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}
/* Constrained measure for centered intro paragraphs — narrow column, not full width */
.gvph-measure {
  max-width: 720px;
}

/* === Component Styles === */
.img-fluid {
  margin-bottom: 2rem;
}

.card {
  border-radius: var(--border-radius-card);
  margin-bottom: 1.5rem;
}
.card.h-100 {
  margin-bottom: 0;
}
.card .card-body {
  padding: 1.5rem;
}
ul li strong {
  color: var(--color-blue);
}
.accordion {
  background: transparent;
  border: none;
  color: var(--color-dark);
}
.accordion-item,
.accordion-header,
.accordion-button {
  background: transparent;
  border: none;
  color: var(--color-dark);
}
.accordion-item {
  border-bottom: 0.25px solid var(--color-gray-666);
}
.accordion-button {
  font-size: 0.9rem;
}
.accordion-body {
  font-size: 0.8rem;
}

.accordion-button:not(.collapsed) {
  color: var(--color-blue);
  box-shadow: none;
  background: transparent;
}
.accordion-button::after {
  display: none !important;
}

em,
u {
  font-style: inherit !important;
  text-decoration: inherit !important;
}
a {
  text-decoration: none;
}

/* === Brand Marquee — sits still; auto-scrolls only while hovered/focused (inverse marquee) ===
   No background/border — blends into the cream page body. */
.gvph-marquee-track {
  width: max-content;
  animation: gvph-marquee-scroll 28s linear infinite;
  animation-play-state: paused; /* default: stationary */
}
.gvph-brand-marquee:is(:hover, :focus-within) .gvph-marquee-track {
  animation-play-state: running; /* comes alive on hover */
}
@keyframes gvph-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  } /* one full set (track is duplicated) */
}
.gvph-marquee-logo {
  height: 58px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .gvph-marquee-track {
    animation: none;
  }
}

/* === Filter Shop banner — matches Figma node 34112:2249 ===
   3 zones: [filter photo + red dotted slant | light-blue center | yellow dotted slant].
   Red/yellow are the designer's own SVG shapes (slant + dots baked together). */
.gvph-filter-shop-card {
  margin-bottom: 0;
}
/* Left media zone: photo behind, red dotted slant on its left, black divider on the right */
.gvph-filter-shop-media {
  position: relative;
  overflow: hidden;
  border-bottom: 5px solid var(--color-dark);
}
.gvph-filter-shop-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  margin-bottom: 0;
}
/* Red dotted slant over the left of the photo (Figma rotates the shape 180°) */
.gvph-filter-shop-dots-red {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  background: url('../img/gvph-filter-dots-red.svg') center / 100% 100% no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}
.gvph-filter-shop-body {
  flex: 1 1 auto;
  padding: 1.5rem;
}
.gvph-filter-shop-body p {
  font-size: 1rem;
  line-height: 1.5;
}
/* Right yellow dotted slant strip (diagonal left edge reveals the blue center behind it) */
.gvph-filter-shop-dots-yellow {
  flex: 0 0 80px;
  align-self: stretch;
  background: url('../img/gvph-filter-dots-yellow.svg') center / 100% 100% no-repeat;
}
@media (min-width: 992px) {
  .gvph-filter-shop-media {
    flex: 0 0 25%;
    border-bottom: 0;
    border-right: 5px solid var(--color-dark);
  }
  /* Figma indents the copy ~80px from the divider */
  .gvph-filter-shop-body {
    padding: 1.25rem 1.5rem 1.25rem 4rem;
  }
}

/* === Other Services — matches Figma node 34112:2433 ===
   Each column: full underground photo (tilt + hard down-right shadow baked into the webp)
   with a speech-bubble card (chat-bubble svg bg) overlapping its lower-right. */
.gvph-other-services,
.gvph-financing,
.gvph-faqs,
.gvph-footer {
  position: relative;
}
/* Bubble edges — Figma's "dashed" border reads as a row of half-circle bumps (a CSS dashed
   border can't make these). Bump radius (8px) matches the .bg-dots-blue polka dots; spacing
   (26px) is tighter than the 36px dot grid. Top = blue bumps poking up into the cream above;
   bottom = cream bumps poking up into the blue. Used on the blue blocks (Other Services,
   Financing, FAQs) and the footer top edge. */
.gvph-other-services::before,
.gvph-other-services::after,
.gvph-financing::before,
.gvph-financing::after,
.gvph-faqs::before,
.gvph-faqs::after,
.gvph-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background-repeat: repeat-x;
  background-size: 26px 8px;
  pointer-events: none;
}
.gvph-other-services::before,
.gvph-financing::before,
.gvph-faqs::before,
.gvph-footer::before {
  top: -8px;
  background-image: radial-gradient(circle at 50% 100%, var(--color-blue) 0 8px, transparent 8.5px);
}
.gvph-other-services::after,
.gvph-financing::after,
.gvph-faqs::after {
  bottom: 0;
  background-image: radial-gradient(
    circle at 50% 100%,
    var(--color-cream) 0 8px,
    transparent 8.5px
  );
}
.gvph-underground-img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
/* DEFAULT (below xl): plain comic card stacked under the photo — robust, no bubble distortion.
   The overlapping speech-bubble treatment is a large-screen enhancement only (see xl block). */
.gvph-speech-card {
  position: relative;
  background-color: var(--color-polka);
  border: 5px solid var(--color-dark);
  margin: -2rem 0.5rem 0; /* tuck onto the photo's lower edge */
  padding: 1.5rem 1.75rem;
}
.gvph-speech-card .h5 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.gvph-speech-card p {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.gvph-speech-card .btn {
  margin-bottom: 0;
}

/* xl+: the Figma speech bubble — photo at ~78% (left) with the bubble overhanging its right
   edge over the blue. Bubble keeps its true 531:333 proportions so the scalable SVG never distorts. */
@media (min-width: 1200px) {
  .gvph-underground-img {
    width: 78%;
  }
  .gvph-speech-card {
    position: absolute;
    right: 0;
    bottom: 12%;
    width: 500px; /* hold the biggest size across the whole xl range (no shrinking) */
    max-width: 100%;
    margin: 0;
    border: 0;
    background: url('../img/gvph-banner-chat-bubble.svg') center / 100% 100% no-repeat;
    background-color: transparent;
    aspect-ratio: 531 / 333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding (% of width) keeps the copy in the bubble body, clear of the slanted
       left edge and the downward tail at the bottom */
    padding: 11% 9% 20% 12%;
  }
  .gvph-speech-card .h5 {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
  }
  .gvph-speech-card p {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 0.85rem;
  }
  /* button hugs its content instead of stretching to the flex column width */
  .gvph-speech-card .btn {
    align-self: flex-start;
  }
}

/* === Customer Testimonials — Figma 34112:2467 ===
   Full-bleed white band, 5px black top/bottom borders. Default: testimonials stacked, each split
   by a 5px border. xl: two short ones (left) + long one (right), diagonal divider + blue wedge. */
.gvph-testimonials-content {
  background-color: var(--color-white);
  /* no top border — the yellow header's bottom border is the single line between them */
  border-bottom: 5px solid var(--color-dark);
}
.gvph-testimonial {
  padding: 1.75rem 1.75rem;
  border-bottom: 5px solid var(--color-dark);
}
.gvph-testimonials-col-right .gvph-testimonial {
  border-bottom: 0;
} /* last one sits on the section border */
.gvph-testimonial blockquote {
  font-size: 0.9rem;
  line-height: 1.5;
}
.gvph-testimonial figcaption {
  font-size: 0.95rem;
}
.gvph-testimonials-divider,
.gvph-testimonials-wedge {
  display: none;
}

@media (min-width: 1200px) {
  .gvph-testimonials-content {
    display: flex;
    align-items: stretch;
    min-height: 550px;
  }
  .gvph-testimonials-col-left {
    flex: 0 0 44%;
    display: flex;
    flex-direction: column;
  }
  .gvph-testimonials-col-left .gvph-testimonial {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem 2.5rem 1.75rem 5rem; /* match Figma pl-80 */
  }
  /* cap the TEXT (not the cell) so the divider border still spans full width */
  .gvph-testimonials-col-left .gvph-testimonial blockquote,
  .gvph-testimonials-col-left .gvph-testimonial figcaption {
    max-width: 500px;
  }
  .gvph-testimonials-col-left .gvph-testimonial:last-child {
    border-bottom: 0;
  }
  .gvph-testimonials-col-right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    padding: 2.5rem 11rem 2.5rem 4.5rem; /* right padding clears the blue wedge */
  }
  .gvph-testimonials-col-right .gvph-testimonial {
    padding: 0;
    max-width: 680px;
  } /* cap text width (Figma ~665) */
  /* diagonal divider between the two columns */
  .gvph-testimonials-divider {
    display: block;
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 44%;
    width: 5px;
    background: var(--color-dark);
    transform: skewX(7.6deg);
  }
  /* blue polka wedge capping the far-right edge (flipped vertically to match Figma) */
  .gvph-testimonials-wedge {
    display: block;
    position: absolute;
    top: -5px;
    bottom: -5px;
    right: 0;
    width: 138px;
    background: url('../img/gvph-testimonial-wedge.svg') center / 100% 100% no-repeat;
    transform: scaleY(-1);
  }
}

/* === About Us card === */
.gvph-about-card {
  background-color: var(--color-white);
}
/* Benefit rows — uniform bg (card white), full-height split with 5px dividers, blue circle icons */
.gvph-about-benefits li {
  flex: 1 1 0;
  border-bottom: 5px solid var(--color-dark);
}
.gvph-about-benefits li:last-child {
  border-bottom: 0;
}
.gvph-about-benefits li span:last-child {
  font-size: 1.05rem;
} /* label only, not the icon */
.gvph-about-icon {
  width: 50px;
  height: 50px;
  border: 4px solid var(--color-dark);
  font-size: 1.25rem;
}
/* xl: left content + yellow diagonal band (SVG) + full-height benefits list */
@media (min-width: 1200px) {
  .gvph-about-left {
    flex: 0 0 44%;
  }
  .gvph-about-divider {
    flex: 0 0 132px;
    align-self: stretch;
    background: url('../img/gvph-about-divider.svg') center / 100% 100% no-repeat;
  }
  .gvph-about-right {
    flex: 1 1 0;
  }
}

/* === Community Involvement images === */
.gvph-community-img {
  object-fit: cover;
  aspect-ratio: 724 / 430;
}

/* === Financing === */
.gvph-financing-img {
  object-fit: cover;
  aspect-ratio: 526 / 557;
  margin-bottom: 0;
}
.gvph-financing-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}
/* Synchrony (yellow, left) + Service Finance (red, right) dotted wedges — Figma 34112:2562 / 34131:3117 */
.gvph-financing-card {
  position: relative;
}
.gvph-financing-wedge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
}
.gvph-financing-wedge-yellow {
  left: 0;
  background: url('../img/gvph-financing-wedge-yellow.svg') center / 100% 100% no-repeat;
  transform: rotate(180deg); /* diagonal faces the card content on the right */
}
.gvph-financing-wedge-red {
  right: 0;
  background: url('../img/gvph-financing-wedge-red.svg') center / 100% 100% no-repeat;
}
/* keep card content clear of the wedge */
.gvph-financing-card-yellow {
  padding-left: 6rem !important;
}
.gvph-financing-card-red {
  padding-right: 6rem !important;
}
/* keep button labels on one line (they shrink-wrap otherwise) */
.gvph-financing-card .btn {
  white-space: nowrap;
}

/* === SuperHero Maintenance Club badge (overhangs the card top-left) === */
/* === SuperHero Maintenance Club — Figma 34112:2635 === */
.gvph-maintenance {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.gvph-maintenance-card {
  background-color: var(--color-white);
}
.gvph-superhero-title {
  font-size: 1.85rem;
  line-height: 1;
}
.gvph-maintenance-price {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.1;
}
/* Badge: mascot (left, overhangs up) tucked onto the blue club box.
   Default (stacked) = sits centered above the card. */
/* Default (mobile): mascot sits in-flow beside the box, centered — avoids overhanging off-screen */
.gvph-maintenance-badge {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.gvph-maintenance-mascot {
  width: 100px;
  height: auto;
  flex-shrink: 0;
  margin-right: -0.5rem;
  z-index: 1;
}
.gvph-maintenance-logo {
  padding: 0.85rem 1.5rem;
}

@media (min-width: 992px) {
  .gvph-maintenance {
    padding-top: 8rem;
  } /* room for the overhanging badge + mascot */
  .gvph-superhero-title {
    font-size: 2.25rem;
  }
  .gvph-maintenance-badge {
    position: absolute;
    display: block;
    top: -4.5rem;
    left: 5.5rem;
    margin-bottom: 0;
    z-index: 3;
  }
  /* mascot overhangs the box's left; box takes the big left padding */
  .gvph-maintenance-mascot {
    position: absolute;
    left: -4rem;
    bottom: 0;
    width: 130px;
    margin-right: 0;
  }
  .gvph-maintenance-logo {
    padding: 1rem 2.5rem 1rem 4rem;
  }
  /* benefits column drops below the overhanging badge so nothing hides behind it */
  .gvph-maintenance-benefits {
    padding-top: 6rem !important;
  }
}

/* === Service Area — Figma 34112:2676: full-width map + wedges, city cards === */
.gvph-service-area-map {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
/* Red (left) + yellow (right) dotted wedges overlaid on the map edges; width is % so they
   scale with the map and the round dots stay round. */
.gvph-service-area-wedge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9.5%;
  pointer-events: none;
}
.gvph-service-area-wedge-red {
  left: 0;
  background: url('../img/gvph-service-area-wedge-red.svg') center / 100% 100% no-repeat;
  transform: rotate(180deg);
}
.gvph-service-area-wedge-yellow {
  right: 0;
  background: url('../img/gvph-service-area-wedge-yellow.svg') center / 100% 100% no-repeat;
}
/* City cards (primary expandable + additional static) — blue icon circle + name */
.gvph-city-icon {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}
.gvph-city-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--color-dark);
  line-height: 1.15;
}
.gvph-city-toggle {
  border: 0;
  background-color: var(--color-white);
  padding: 0.75rem 1rem;
}
.gvph-city-toggle:focus {
  box-shadow: none;
}
.gvph-city-toggle .fa-plus {
  color: var(--color-dark);
  transition: transform 0.3s ease-in-out;
}
.gvph-city-toggle:not(.collapsed) .fa-plus {
  transform: rotate(45deg);
}
.gvph-city-body {
  font-size: 0.8rem;
  line-height: 1.5;
}
.gvph-city-link {
  display: inline-flex;
  margin-top: 0.5rem;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--color-blue);
}
.gvph-city-link:is(:hover, :focus) {
  color: var(--color-dark);
}
/* Callout — Figma 34112:2824: white card, narrow content (left), dot pattern (right) */
.gvph-service-area-callout {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: -10px 10px 0 0 var(--color-dark);
}
.gvph-callout-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
.gvph-callout-dots {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
  background-image: radial-gradient(circle, rgba(5, 8, 8, 0.1) 6px, transparent 6.5px);
  background-size: 30px 30px;
  clip-path: polygon(
    20% 0,
    100% 0,
    100% 100%,
    0 100%
  ); /* diagonal left edge (smaller top indent = steeper) */
  pointer-events: none;
}

/* === Specials — coupon tickets: dashed outer frame + dotted color bg, solid-border white inner === */
.gvph-coupon {
  position: relative;
  border: 5px dashed var(--color-dark);
}
.gvph-coupon-yellow,
.gvph-coupon-blue {
  background-repeat: repeat;
  background-image: radial-gradient(circle, rgba(5, 8, 8, 0.1) 3.5px, transparent 4px);
  background-size: 16px 16px;
}
.gvph-coupon-yellow {
  background-color: var(--color-yellow);
}
.gvph-coupon-blue {
  background-color: var(--color-blue);
}
.gvph-coupon .card {
  border-style: solid !important;
  box-shadow: none;
  margin-bottom: 0;
}
.gvph-coupon-amount {
  font-size: 2rem;
  line-height: 1.05;
}
/* SuperHero badge (red) — same look as the maintenance badge (reuses .gvph-maintenance-mascot/
   -logo/-price), centered and overhanging between the two coupon rows. */
.gvph-specials-row-top {
  margin-bottom: 2rem;
}
.gvph-specials-badge {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .gvph-specials-row-top {
    margin-bottom: 10rem;
  }
  .gvph-specials-badge {
    position: absolute;
    display: block;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin-bottom: 0;
    z-index: 3;
  }
}

/* === Work Gallery — continuous auto-scroll, pauses on hover === */
.gvph-gallery-track {
  width: max-content;
  animation: gvph-gallery-scroll 40s linear infinite;
}
.gvph-gallery:is(:hover, :focus-within) .gvph-gallery-track {
  animation-play-state: paused;
}
@keyframes gvph-gallery-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.gvph-gallery-img {
  height: 320px;
  width: auto;
  flex-shrink: 0;
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .gvph-gallery-track {
    animation: none;
  }
}

/* === FAQ card + accordion (real fa-circle-plus icon, since the FA kit is SVG+JS) === */
.gvph-faq-card {
  background-color: var(--color-white);
}
.gvph-faq-accordion .accordion-item {
  border-bottom: 2px solid var(--color-grey-light);
}
.gvph-faq-accordion .accordion-button {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--color-dark);
  background-color: transparent;
  box-shadow: none;
}
.gvph-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--color-blue);
  background-color: transparent;
}
/* === Footer Styles === */
footer h6 {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  margin-bottom: 1rem;
}
footer p {
  margin-bottom: 0.25rem;
}
footer p a {
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
}
footer p a:is(:hover, :active, :focus) {
  color: var(--color-red);
}

/* === Footer (Figma 34112:2963) — blue dotted, white columns card with red/yellow wedges === */
.gvph-footer-logo {
  width: 100%;
  max-width: 360px;
  height: auto;
}
.gvph-footer-meta-head {
  font-size: 1.25rem;
}
.gvph-footer-meta {
  font-size: 1rem;
}
.gvph-footer-card {
  background-color: var(--color-white);
  box-shadow: 10px 10px 0 0 var(--color-dark);
}
/* Wedges built in CSS (clip-path diagonal + radial-gradient dots) so the dots stay round on
   the tall footer card. Black base = the diagonal border; the inset dotted ::before reveals it. */
.gvph-footer-wedge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  pointer-events: none;
  display: none; /* desktop accent only */
  background-color: var(--color-dark);
}
.gvph-footer-wedge::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(5, 8, 8, 0.1) 8px, transparent 8.5px);
  background-size: 36px 36px;
}
.gvph-footer-wedge-red {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%); /* diagonal on the right edge */
}
.gvph-footer-wedge-red::before {
  background-color: var(--color-red);
  clip-path: polygon(0 0, calc(100% - 7px) 0, calc(62% - 7px) 100%, 0 100%);
}
.gvph-footer-wedge-yellow {
  right: 0;
  clip-path: polygon(
    38% 0,
    100% 0,
    100% 100%,
    0 100%
  ); /* diagonal on the left edge, fatter at the bottom */
}
.gvph-footer-wedge-yellow::before {
  background-color: var(--color-yellow);
  clip-path: polygon(calc(38% + 7px) 0, 100% 0, 100% 100%, 7px 100%);
}
.gvph-footer-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem 1.5rem;
}
.gvph-footer-colgroup {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.gvph-footer-heading {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.gvph-footer-col .gvph-footer-link {
  font-size: 0.9rem;
}
@media (min-width: 992px) {
  .gvph-footer-wedge {
    display: block;
  }
  .gvph-footer-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    padding: 2.5rem 11%;
  }
}

/* === Media Queries === */
/* OPTIMIZED: Each media query now only contains the styles that need to change at that breakpoint. */
@media (max-width: 1200px) {
  .offcanvas-body {
    background: var(--color-grey-light);
  }
  /* Mobile: space below each open mega-dropdown so it doesn't crowd the next nav item */
  .menu-container .gvph-sub-nav .navbar-nav .dropdown-menu.mega-dropdown {
    margin-bottom: 1rem;
  }
  /* Mobile: small gap between the hiring bar and the nav bar below it */
  .gvph-hiring-banner {
    margin-bottom: 0.5rem;
  }
  .navbar-nav,
  .shrink-menu .navbar-nav {
    height: fit-content;
  }
  .navbar-nav {
    width: auto;
  }

  .navbar {
    height: 80px;
    transition: height var(--transition-standard);
  }
  .shrink-menu .navbar {
    height: 65px;
  }

  .gvph-logo {
    position: absolute;
    background: url(../img/gvph-logo-220-75.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 220px;
    height: 75px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 3.5rem;
    transition: all var(--transition-standard);
    z-index: 10;
  }
  .shrink-menu .gvph-logo {
    width: 190px;
    height: 65px;
    top: 3.25rem;
  }

  .nav-fill .nav-item,
  .nav-fill > .nav-link {
    flex: 1 1 auto;
    text-align: left;
  }
}

@media (max-width: 991px) {
  .gvph-menu-padding {
    padding: 0 1.5rem;
  }
}

@media (max-width: 450px) {
  .gvph-menu-padding {
    padding: 0 0.25rem;
  }
}