:root {
  --groix-ink: #063b46;
  --groix-deep: #022c35;
  --groix-sea: #0b7f85;
  --groix-mint: #8ad8c9;
  --groix-sand: #f7f2e9;
  --groix-sun: #f6aa3c;
  --groix-white: #fff;
  --groix-shadow: 0 18px 48px rgb(2 44 53 / 16%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--groix-sand);
  color: var(--groix-deep);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

img { height: auto; max-width: 100%; }

a { color: var(--groix-sea); text-underline-offset: 0.16em; }
a:hover { color: var(--groix-deep); }

.site-container,
.content-container > .site-main,
.entry-content > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

#masthead {
  position: sticky !important;
  inset: 0 0 auto;
  z-index: 100;
  background: rgb(2 44 53 / 96%) !important;
  box-shadow: 0 2px 18px rgb(0 0 0 / 18%);
  backdrop-filter: blur(12px);
}

#masthead .site-container,
#masthead .site-main-header-inner-wrap,
#masthead .site-header-main-section-right,
#masthead .site-header-main-section-left {
  align-items: center;
  display: flex;
}

#masthead .site-main-header-inner-wrap {
  gap: clamp(1rem, 3vw, 3.5rem);
  justify-content: space-between;
  min-height: 4.75rem;
  padding: 0.5rem clamp(1rem, 3vw, 2.5rem);
}

#masthead .site-header-main-section-left { flex: 0 0 auto; }
#masthead .site-header-main-section-right { flex: 1 1 auto; justify-content: flex-end; }
#masthead .custom-logo-link { display: flex; }
#masthead .custom-logo { display: block; max-height: 3.25rem; width: auto; }

#site-navigation,
#site-navigation .menu-container,
#site-navigation .menu {
  display: flex;
  align-items: center;
}

#site-navigation .menu {
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#site-navigation .menu > li { margin: 0; padding: 0; }

#site-navigation .menu > li > a {
  display: block;
  border-radius: 999px;
  color: var(--groix-white);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.025em;
  padding: 0.62rem 0.9rem;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

#site-navigation .menu > li > a:hover,
#site-navigation .menu > .current-menu-item > a {
  background: var(--groix-mint);
  color: var(--groix-deep);
  transform: translateY(-1px);
}

#mobile-toggle,
#mobile-drawer { display: none !important; }

#inner-wrap { overflow: clip; }

.entry-content { background: var(--groix-sand); }
.entry-content h1,
.entry-content h2,
.entry-content h3 {
  color: var(--groix-ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.entry-content h1 { font-size: clamp(2.4rem, 6vw, 5.25rem); }
.entry-content h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); margin-top: 0; }
.entry-content h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.entry-content p { max-width: 72ch; }

.kb-row-layout-wrap {
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem);
}

.kb-row-layout-wrap .kt-row-column-wrap { position: relative; z-index: 1; }
.kb-row-layout-wrap.kt-row-has-bg {
  background-color: var(--groix-deep) !important;
  color: var(--groix-white) !important;
}
.kb-row-has-bg h1,
.kb-row-has-bg h2,
.kb-row-has-bg h3 { color: inherit !important; }
.kb-row-has-bg p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }

.wp-block-kadence-rowlayout:not(.kb-row-has-bg) {
  background: var(--groix-white);
}

.entry-content > :not(.kb-row-layout-wrap) {
  padding-left: clamp(1.25rem, 5vw, 5rem);
  padding-right: clamp(1.25rem, 5vw, 5rem);
}

.wp-block-kadence-column .kt-inside-inner-col,
.wp-block-group,
.wp-block-kadence-column {
  border-radius: 1.25rem;
}

.wp-block-quote,
blockquote {
  border-left: 0.3rem solid var(--groix-sun);
  margin: 2rem auto;
  max-width: 70ch;
  padding: 0.4rem 1.4rem;
  color: var(--groix-ink);
  font-size: 1.14rem;
}

.wp-block-button__link,
.kt-btn-wrap a,
input[type="submit"],
button[type="submit"] {
  background: var(--groix-sun) !important;
  border: 0;
  border-radius: 999px !important;
  color: var(--groix-deep) !important;
  display: inline-block;
  font-weight: 800;
  padding: 0.8rem 1.25rem !important;
  text-decoration: none;
}

#colophon {
  background: var(--groix-deep) !important;
  color: var(--groix-white);
  padding: 2.5rem clamp(1.25rem, 5vw, 5rem);
}

#colophon a { color: var(--groix-mint); }

@media (max-width: 720px) {
  #masthead .site-main-header-inner-wrap {
    align-items: stretch;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
    padding: 0.65rem 1rem 0.75rem;
  }

  #masthead .site-header-main-section-left,
  #masthead .site-header-main-section-right { justify-content: center; }

  #masthead .custom-logo { max-height: 2.65rem; }

  #site-navigation { max-width: 100%; overflow-x: auto; }
  #site-navigation .menu { gap: 0.15rem; min-width: max-content; }
  #site-navigation .menu > li > a { font-size: 0.8rem; padding: 0.48rem 0.65rem; }

  .kb-row-layout-wrap { padding: 3.75rem 1.25rem; }
}