/* Waymont — HMGCC-inspired direction. */

:root {
  --ink: #050505;
  --paper: #fff;
  --surface: #f3f3f1;
  --surface-dark: #7f7f7f;
  --blue: #2515ff;
  --blue-soft: #b9b4ff;
  --line: #d8d8d4;
  --muted: #555;
  --padding-sm: 16px;
  --padding-md: 24px;
  --padding-lg: 56px;
  --page-gutter: 16px;
  --content-gutter: 24px;
  --grid-gap: 8px;
  --header-height: 82px;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --copy-width: 72rem;
  --text-xs: 1.2rem;
  --text-sm: 1.4rem;
  --text-base: 1.6rem;
  --text-lg: clamp(1.8rem, 2.2vw, 2.2rem);
  --heading-sm: clamp(2.2rem, 3vw, 3.2rem);
  --heading-md: clamp(3.6rem, 5vw, 6.4rem);
  --heading-lg: clamp(5.4rem, 10vw, 13rem);
  --button-block: 16px;
  --button-inline: 24px;
}

@media (min-width: 768px) {
  :root {
    --padding-sm: 24px;
    --padding-md: 40px;
    --padding-lg: 88px;
    --page-gutter: 28px;
    --content-gutter: 48px;
    --grid-gap: 16px;
  }
}

@media (min-width: 1200px) {
  :root {
    --padding-md: 56px;
    --padding-lg: 112px;
    --page-gutter: 40px;
    --content-gutter: 72px;
  }
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: inherit; }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
}

body, p, h1, h2, h3, h4, h5, h6 { margin-block-start: 0; }

h1, h2, h3, h4, h5, h6, .elementor-heading-title {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.035em;
}

h2, h2.elementor-heading-title {
  font-size: var(--heading-md);
  line-height: 0.98;
}

h3, h3.elementor-heading-title {
  font-size: var(--heading-sm);
  line-height: 1.06;
}

p, li { font-size: var(--text-base); }
a { color: inherit; }

.wm-site-shell {
  margin-inline: auto;
  max-width: 1600px;
  width: calc(100% - (2 * var(--page-gutter)));
}

.wm-section { padding: var(--padding-lg) 0; }

.wm-eyebrow,
.wm-eyebrow .elementor-heading-title {
  color: var(--blue);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.wm-section-title .elementor-heading-title {
  font-size: var(--heading-md);
  line-height: 0.98;
}

.section-heading {
  gap: 12px;
  padding-inline: var(--content-gutter);
}

.section-heading::after { content: none; }

/* Shared square CTA treatment. */
.wm-button .elementor-button,
.wm-button.elementor-widget-button .elementor-button {
  background: var(--ink);
  border: 0;
  border-radius: 0;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  min-height: 48px;
  outline: 0;
  padding: var(--button-block) var(--button-inline);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.wm-button .elementor-button:is(:hover, :focus-visible) {
  background: var(--blue);
  color: var(--paper);
}

.wm-button .elementor-button:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 3px; }
.wm-button .elementor-button:active { transform: scale(0.97); }
.wm-button--primary .elementor-button { background: var(--blue); }
.wm-button--light .elementor-button,
.wm-button--inverse .elementor-button { background: var(--paper); color: var(--ink); }

/* Header and navigation. */
.wm-header {
  background: var(--blue);
  min-height: var(--header-height);
  position: relative;
  z-index: 50;
}

.wm-header .header-layout {
  gap: 24px;
  min-height: var(--header-height);
  padding: 14px var(--content-gutter);
}

.wm-header .logo { flex: 0 0 auto; gap: 10px; width: auto; }
.wm-header .logo .wm-icon { flex: 0 0 42px; width: 42px; }
.wm-header .logo .wordmark { flex: 0 0 102px; width: 102px; }

.wm-header .logo img {
  display: block;
  filter: brightness(0) invert(1);
  height: auto;
  width: 100%;
}

.wm-header .nav {
  background: var(--paper);
  flex: 0 1 760px;
  min-width: 0;
  padding-inline: 10px;
  width: auto;
}

.wm-header .nav a,
.wm-header .nav .elementor-item {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 15px 12px;
  text-transform: none;
}

.wm-header .nav .current-menu-item > a,
.wm-header .nav .current_page_item > a,
.wm-header .nav a:is(:hover, :focus-visible) { color: var(--blue); }

/* Home hero. */
.wm-hero {
  background-blend-mode: multiply;
  background-color: #4a45db;
  background-image: url("/wp-content/plugins/waymont-hmgcc-site/assets/images/featured-project.png");
  background-position: center;
  background-size: cover;
  isolation: isolate;
  min-height: min(760px, calc(100svh - var(--header-height)));
  overflow: hidden;
  padding: var(--padding-lg) var(--content-gutter) 120px;
  position: relative;
}

.wm-hero .kinetic-grid { display: none; }

.wm-hero .content {
  align-self: flex-end;
  background: var(--ink);
  margin-top: auto;
  max-width: 820px;
  padding: var(--padding-md);
  position: relative;
  width: 100%;
  z-index: 2;
}

.wm-hero .title .elementor-heading-title {
  color: var(--paper);
  font-size: var(--heading-lg);
  line-height: 0.84;
  text-transform: uppercase;
}

.wm-hero .title .elementor-heading-title strong { color: var(--blue-soft); font-weight: inherit; }
.wm-hero .text { max-width: var(--copy-width); }

.wm-hero .text .elementor-widget-container {
  color: var(--paper);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.wm-hero .text strong { color: inherit; font-weight: 600; }

.wm-hero .button {
  bottom: 48px;
  left: var(--content-gutter);
  position: absolute;
  z-index: 3;
}

/* Intro panel overlapping the hero. */
.wm-overview {
  background: var(--paper);
  gap: 28px;
  margin: -64px auto 0;
  max-width: 1080px;
  padding: var(--padding-md);
  position: relative;
  text-align: center;
  width: calc(100% - (2 * var(--content-gutter)));
  z-index: 4;
}

.wm-overview .wm-eyebrow {
  align-self: center;
  background: var(--ink);
  padding: 10px 18px;
}

.wm-overview .wm-eyebrow .elementor-heading-title { color: var(--paper); }

.wm-overview h2.elementor-heading-title {
  font-size: var(--heading-sm);
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.wm-standards {
  background: var(--blue);
  border: 0;
  margin-top: var(--padding-md);
  padding-inline: var(--content-gutter);
}

.wm-standards .standard {
  border: 0;
  flex: 1 1 100%;
  justify-content: flex-start;
  padding: 18px 12px;
}

.wm-standards .standard + .standard { border-top: 1px solid rgb(255 255 255 / 24%); }
.wm-standards .icon { display: none; }
.wm-standards .wm-eyebrow .elementor-heading-title { color: var(--paper); }

/* Shared cards and listing surfaces. */
.wm-home .card-grid,
.benefit-grid,
.office-grid,
.contact-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-auto-rows: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  padding-inline: var(--content-gutter);
}

.wm-home .card-grid::before,
.wm-home .card-grid::after,
.benefit-grid::before,
.benefit-grid::after,
.office-grid::before,
.office-grid::after,
.contact-grid::before,
.contact-grid::after,
.wm-feature .wm-feature-slide::before,
.wm-feature .wm-feature-slide::after,
.wm-footer .columns::before,
.wm-footer .columns::after,
.split-section::before,
.split-section::after,
.single-layout::before,
.single-layout::after {
  display: none;
}

.wm-card,
.wm-loop-card,
.benefit,
.office,
.contact-card {
  background: var(--paper);
  border: 0;
  min-width: 0;
  overflow: hidden;
}

.wm-card { border-top: 12px solid var(--blue); }

.wm-card > .wm-icon {
  background: none;
  border-radius: 0;
  margin: var(--padding-sm) var(--padding-sm) 0;
  padding: 0;
}

.wm-card > .wm-icon img { filter: saturate(180%); }

.wm-card .media .elementor-widget-container,
.wm-card .media img,
.wm-loop-card .media,
.wm-loop-card .media .elementor-widget-container,
.wm-loop-card .media img {
  display: block;
  height: 250px;
  object-fit: cover;
  width: 100%;
}

.wm-card .content,
.wm-loop-card .content {
  flex: 1;
  gap: 14px;
  min-width: 0;
  padding: var(--padding-sm);
}

.wm-card .content > .wm-button,
.wm-loop-card .content > .wm-button { margin-top: auto; padding-top: var(--padding-sm); }

.wm-card .title .elementor-heading-title,
.wm-loop-card .title .elementor-heading-title {
  font-size: clamp(2rem, 2.4vw, 3rem);
  font-weight: 500;
  line-height: 1.04;
}

.wm-expertise { padding-top: calc(var(--padding-lg) * 0.8); }

/* Featured project editorial split. */
.wm-feature {
  background: var(--paper);
  margin-block: var(--padding-md);
  overflow: hidden;
  position: relative;
}

.wm-feature .project-carousel { min-width: 0; width: 100%; }
.wm-feature .swiper-slide { height: auto; }

.wm-feature .wm-feature-slide {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  height: 100%;
}

.wm-feature .media,
.wm-feature .media .elementor-widget-container,
.wm-feature .media img {
  display: block;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  width: 100%;
}

.wm-feature .content {
  background: var(--ink);
  gap: 24px;
  padding: var(--padding-lg) var(--content-gutter);
  position: relative;
}

.wm-feature .title .elementor-heading-title,
.wm-feature .wm-eyebrow .elementor-heading-title { color: var(--paper); }
.wm-feature .text .elementor-widget-container { color: rgb(255 255 255 / 78%); }
.wm-feature::before, .wm-feature::after { content: none; }
.wm-feature .swiper-button-prev,
.wm-feature .swiper-button-next { background: var(--blue); color: var(--paper); height: 48px; width: 48px; }
.wm-feature .swiper-pagination-bullet-active { background: var(--blue); }

.wm-products { background: var(--surface); }
.wm-careers .card-grid { gap: 0; }
.wm-careers .wm-card:nth-child(2) { background: var(--blue-soft); border-top-color: var(--ink); }

.wm-cta {
  background: var(--blue);
  color: var(--paper);
  margin: 0;
  padding: var(--padding-lg) var(--content-gutter);
  width: 100%;
}

.wm-cta h2.elementor-heading-title,
.wm-cta .elementor-widget-text-editor { color: var(--paper); }
.wm-cta > .wm-button { margin-top: 20px; }

/* Interior pages. */
.wm-interior { background: var(--paper); overflow: hidden; }

.wm-page-hero,
.wm-single-hero {
  background-blend-mode: multiply;
  background-color: #5b52e8;
  background-image: url("/wp-content/plugins/waymont-hmgcc-site/assets/images/featured-project.png");
  background-position: center;
  background-size: cover;
  gap: 20px;
  min-height: 500px;
  padding: var(--padding-lg) var(--content-gutter);
  position: relative;
}

.wm-page-hero .title .elementor-heading-title,
.wm-single-hero .title .elementor-heading-title {
  color: var(--paper);
  font-size: var(--heading-lg);
  line-height: 0.86;
  max-width: 1100px;
  text-transform: uppercase;
}

.wm-page-hero .wm-eyebrow .elementor-heading-title,
.wm-single-hero .wm-eyebrow .elementor-heading-title { color: var(--paper); }

.wm-page-hero .text,
.wm-single-hero .text {
  background: var(--ink);
  color: var(--paper);
  max-width: var(--copy-width);
  padding: 18px 22px;
}

.wm-page-hero .text .elementor-widget-container,
.wm-single-hero .text .elementor-widget-container { color: var(--paper); font-size: var(--text-lg); line-height: 1.5; }

.wm-listing { gap: 48px; }
.wm-loop-grid { padding-inline: var(--content-gutter); }
.wm-loop-grid .elementor-loop-container { gap: var(--grid-gap); }
.expertise-grid { padding-inline: 0; }
.expertise-grid .elementor-loop-container { gap: 0; }

.expertise-section { border-top: 1px solid var(--line); overflow: hidden; }

.expertise-section .media-column {
  aspect-ratio: 4 / 3;
  background: var(--surface);
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.expertise-section .media { height: 100%; inset: 0; position: absolute; width: 100%; }
.expertise-section .media .elementor-widget-container,
.expertise-section .media img { display: block; height: 100%; object-fit: cover; width: 100%; }

.expertise-section .related-project-card {
  bottom: var(--padding-sm);
  left: var(--padding-sm);
  max-width: calc(100% - (2 * var(--padding-sm)));
  position: absolute;
  z-index: 1;
}

.related-project {
  background: var(--ink);
  color: var(--paper);
  display: block;
  padding: 16px 18px;
  text-decoration: none;
}

.related-project .wm-eyebrow { color: var(--blue-soft); display: block; margin-bottom: 6px; }
.related-project .title { display: block; }
.related-project:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.expertise-section .content {
  gap: 18px;
  min-width: 0;
  padding: var(--padding-lg) var(--padding-md);
}

.expertise-section .text p { margin: 0; }
.expertise-section .text p + p { margin-top: 24px; }

.wm-loop-card.position-row { border-top: 8px solid var(--blue); gap: 24px; padding: 24px 28px; }
.wm-loop-card.position-row .content { gap: 2px; padding: 0; }
.wm-loop-card.team-card .media,
.wm-loop-card.team-card .media .elementor-widget-container,
.wm-loop-card.team-card .media img { height: 340px; }

.wm-benefits { gap: 40px; padding-top: var(--padding-lg); }

.benefit,
.office,
.contact-card { border-top: 8px solid var(--blue); gap: 16px; padding: 32px; }

.split-section,
.single-layout {
  display: grid;
  gap: 48px;
  grid-auto-rows: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  padding-inline: var(--content-gutter);
}

.split-section .section-heading { padding-inline: 0; }
.prose { color: var(--muted); max-width: 780px; }
.prose h2, .prose h3 { color: var(--ink); margin-top: 48px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.wm-single-image,
.wm-single-image .elementor-widget-container,
.wm-single-image img { display: block; max-height: 640px; object-fit: cover; width: 100%; }

.facts {
  align-self: start;
  background: var(--surface);
  border-top: 10px solid var(--blue);
  gap: 0;
  padding: 32px;
}

.facts > .wm-section-title { margin-bottom: 20px; }
.facts .fact { border-top: 1px solid var(--line); gap: 2px; padding-block: 16px; }
.facts .fact p { color: var(--ink); margin: 0; }

.contact-card .label {
  color: var(--blue);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wm-legal .legal-content { gap: 40px; max-width: 920px; padding-inline: var(--content-gutter); }
.wm-legal .legal-section { border-top: 1px solid var(--line); gap: 12px; padding-top: 32px; }

/* Footer. */
.wm-footer { background: var(--surface-dark); color: var(--paper); }

.wm-footer .columns {
  display: grid;
  gap: 0;
  grid-auto-rows: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  padding: 0;
}

.wm-footer .column {
  border-bottom: 1px solid rgb(255 255 255 / 28%);
  gap: 8px;
  padding: 40px var(--content-gutter);
}

.wm-footer .column p { font-size: var(--text-sm); line-height: 1.6; margin: 0; }
.wm-footer .wm-eyebrow .elementor-heading-title { color: var(--paper); }

.wm-footer .bottom {
  background: var(--ink);
  border: 0;
  gap: 16px;
  padding: 24px var(--content-gutter);
}

@media (min-width: 768px) {
  .wm-header .header-layout { padding-inline: var(--content-gutter); }
  .wm-standards .standard { flex-basis: 20%; justify-content: center; }
  .wm-standards .standard + .standard { border-left: 1px solid rgb(255 255 255 / 24%); border-top: 0; }
  .wm-home .card-grid.two-columns,
  .wm-home .card-grid.three-columns,
  .benefit-grid,
  .office-grid,
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-feature .wm-feature-slide { grid-template-columns: 1.05fr 0.95fr; }
  .wm-feature .media,
  .wm-feature .media .elementor-widget-container,
  .wm-feature .media img { min-height: 620px; }
  .wm-footer .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-footer .column:nth-child(odd) { border-right: 1px solid rgb(255 255 255 / 28%); }
  .expertise-section .media-column { aspect-ratio: 3 / 2; }
  .expertise-grid .e-loop-item:nth-child(even) .expertise-section .media-column { order: 2; }
}

@media (min-width: 1024px) {
  .wm-hero .title .elementor-heading-title { font-size: clamp(7.2rem, 6.6vw, 10.8rem); }
  .wm-home .card-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wm-footer .columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wm-footer .column { border-bottom: 0; border-right: 1px solid rgb(255 255 255 / 28%); padding: 72px 40px; }
  .wm-footer .column:last-child { border-right: 0; }
  .wm-benefits .benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wm-contact .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split-section { grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr); }
  .single-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
}

@media (max-width: 767px) {
  .wm-header .header-layout { align-items: center; }
  .wm-header .nav { background: transparent; flex-basis: auto; padding: 0; }
  .wm-header .nav .elementor-menu-toggle { background: var(--paper); border-radius: 0; color: var(--ink); }
  .wm-header .nav .elementor-nav-menu--dropdown { background: var(--paper); margin-top: 14px; }
  .wm-hero .content { padding: 24px; }
  .wm-hero .button { bottom: 24px; }
  .wm-overview { margin-top: -40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wm-button .elementor-button { transition: none; }
}

/* Capability-restricted visual grid. */
.wm-visual-grid {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 120ms ease;
  z-index: 99998;
}

.wm-grid-visible .wm-visual-grid { opacity: 1; }

.wm-visual-grid .columns {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--content-gutter);
  width: calc(100% - (2 * var(--page-gutter)));
}

.wm-visual-grid .columns span {
  background: rgb(37 21 255 / 7%);
  border-inline: 1px solid rgb(37 21 255 / 16%);
}

.wm-visual-grid .columns span:nth-child(n + 5) { display: none; }

body button.wm-visual-grid-toggle {
  align-items: center;
  appearance: none;
  background: var(--ink);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 0;
  bottom: 16px;
  color: var(--paper);
  cursor: pointer;
  display: inline-flex;
  font: 700 16px/1 var(--font-sans);
  height: 40px;
  justify-content: center;
  padding: 0;
  position: fixed;
  right: 16px;
  width: 40px;
  z-index: 99999;
}

body button.wm-visual-grid-toggle[aria-pressed="true"] { background: var(--blue); }
body button.wm-visual-grid-toggle:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 3px; }

@media (min-width: 768px) {
  .wm-visual-grid .columns { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .wm-visual-grid .columns span:nth-child(n + 5) { display: block; }
  .wm-visual-grid .columns span:nth-child(n + 9) { display: none; }
}

@media (min-width: 1024px) {
  .wm-visual-grid .columns { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .wm-visual-grid .columns span:nth-child(n) { display: block; }
}
