@charset "UTF-8";
/* ==========================================================================
   Runtime tokens. New code uses --st-*; the --gt-* / --bs-* names below are
   aliases so partials inherited from the demo child keep resolving.
   ========================================================================== */
:root {
  --st-bg: #0b1219;
  --st-surface: #121c26;
  --st-surface-alt: #101a23;
  --st-border: #1c2a37;
  --st-border-strong: #1f2d3a;
  --st-input-border: #2a3b4b;
  --st-accent: #69bee9;
  --st-accent-hover: #9ad4f2;
  --st-accent-wash: rgba(105, 190, 233, 0.12);
  --st-on-accent: #0b1219;
  --st-text: #ffffff;
  --st-text-soft: #c9d6e2;
  --st-text-muted: #a9b8c6;
  --st-text-dim: #8c9dad;
  --heading-color: var(--st-text);
  --paragraph-color: var(--st-text-muted);
  --subtitle-color: var(--st-accent);
  --block-border: var(--st-border);
  --gt-light: var(--st-bg);
  --gt-light-alt: var(--st-surface-alt);
  --gt-dark: var(--st-text);
  --gt-dark-wash: rgba(255, 255, 255, 0.08);
  --gt-primary: var(--st-accent);
  --gt-primary-deep: var(--st-accent-hover);
  --gt-primary-on: var(--st-on-accent);
  --gt-secondary: var(--st-text);
  --gt-secondary-deep: var(--st-text-soft);
  --gt-secondary-on: var(--st-bg);
  --gt-text: var(--st-text);
  --gt-text-muted: var(--st-text-muted);
  --gt-text-subtle: var(--st-text-dim);
  --gt-border: var(--st-border-strong);
  --gt-rule: var(--st-border);
  --gt-disabled-bg: #2a3b4b;
  --gt-disabled-border: #2a3b4b;
  --gt-disabled-text: #8c9dad;
  --bs-body-bg: var(--st-bg);
  --bs-body-color: var(--st-text);
  --bs-body-color-rgb: 255, 255, 255;
  --bs-border-color: var(--st-border);
  --bs-border-radius: 6px;
  --bs-border-radius-lg: 10px;
  --bs-border-radius-sm: 4px;
  --bs-primary: var(--st-accent);
  --bs-primary-rgb: 105, 190, 233;
  --bs-secondary: var(--st-text);
  --bs-secondary-rgb: 255, 255, 255;
  --bs-light: var(--st-surface-alt);
  --bs-dark: var(--st-bg);
  --bs-link-color: var(--st-accent);
  --bs-link-hover-color: var(--st-accent-hover);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--st-bg);
  color: var(--st-text);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  -moz-osx-font-smoothing: grayscale;
}

.gt-eyebrow,
.section-subtitle,
.hero-eyebrow,
.icon-row-title {
  align-items: center;
  color: var(--gt-text-muted);
  display: inline-flex;
  font-family: "Michroma", sans-serif;
  font-size: 12px;
  font-weight: 400;
  gap: 6px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--st-accent);
  font-size: 12px;
  letter-spacing: 0.3em;
  line-height: 1.5;
}

.gt-mono {
  font-family: "Michroma", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.gt-muted {
  color: var(--st-text-muted);
}

hr,
.rule {
  border: none;
  border-top: 1px solid var(--st-border);
}

.content-block {
  scroll-margin-top: 80px;
}

.heading-container {
  display: flex;
  flex-direction: column-reverse;
  gap: 14px;
  margin-bottom: 56px;
}
.heading-container .section-title,
.heading-container .section-subtitle {
  margin-bottom: 0;
}
.heading-container .section-title {
  max-width: 640px;
}
@media (max-width: 767.98px) {
  .heading-container {
    margin-bottom: 32px;
  }
}

.page-header {
  padding: 88px 0 56px;
}
.page-header .gt-eyebrow {
  margin-bottom: 14px;
}

.block-rail {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--st-border);
  border-top: 1px solid var(--st-border);
  margin-bottom: 0;
}
.block-rail .block-rail-label,
.block-rail .block-rail-anchor {
  font-family: "Michroma", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}
.block-rail .block-rail-label {
  color: var(--st-text-muted);
}
.block-rail .block-rail-anchor {
  color: var(--st-accent);
}

.alert {
  background: var(--st-surface);
  border: 1px solid var(--st-border-strong);
  color: var(--st-text);
}

/* ==========================================================================
   Section themes. Default = page ground. "light" = the design's alternate
   panel (#101A23 with hairlines) used for Maintenance contracts + Contact.
   "dark" renders the same as default on this palette.
   ========================================================================== */
:root {
  --block-dark-bg: var(--st-surface-alt);
  --block-dark-border: var(--st-border);
  --block-dark-card-bg: var(--st-bg);
  --block-dark-card-border: var(--st-border-strong);
  --block-dark-fg: var(--st-text);
  --block-dark-heading: var(--st-text);
  --block-dark-link: var(--st-accent);
  --block-dark-link-hover: var(--st-accent-hover);
  --block-dark-muted: var(--st-text-muted);
  --block-dark-paragraph: var(--st-text-muted);
  --block-dark-subtitle: var(--st-accent);
}

.block-theme-light,
.block-theme-dark {
  background-color: var(--st-surface-alt);
  border-bottom: 1px solid var(--st-border);
  border-top: 1px solid var(--st-border);
}
.block-theme-light .icon-box.card,
.block-theme-light .contact-form,
.block-theme-dark .icon-box.card,
.block-theme-dark .contact-form {
  background: var(--st-bg);
}

/* ==========================================================================
   Buttons — 6px radius, Manrope 700, 52px tall for .btn-lg (hero CTAs),
   48px default, 44px small (header pill).
   ========================================================================== */
.btn {
  align-items: center;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  line-height: 1.2;
  min-height: 48px;
  padding: 0.5rem 1.75rem;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn:hover, .btn:focus-visible {
  text-decoration: none;
}
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(105, 190, 233, 0.35);
  outline: none;
}
.btn.btn-sm {
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
}
.btn.btn-lg {
  font-size: 1.0625rem;
  min-height: 52px;
  padding: 0.5rem 1.75rem;
}

.btn-primary {
  --bs-btn-bg: var(--st-accent);
  --bs-btn-border-color: var(--st-accent);
  --bs-btn-color: var(--st-on-accent);
  --bs-btn-hover-bg: var(--st-accent-hover);
  --bs-btn-hover-border-color: var(--st-accent-hover);
  --bs-btn-hover-color: var(--st-on-accent);
  --bs-btn-active-bg: var(--st-accent-hover);
  --bs-btn-active-border-color: var(--st-accent-hover);
  --bs-btn-active-color: var(--st-on-accent);
  --bs-btn-disabled-bg: var(--gt-disabled-bg);
  --bs-btn-disabled-border-color: var(--gt-disabled-border);
  --bs-btn-disabled-color: var(--gt-disabled-text);
}

.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-default {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--st-text);
  --bs-btn-color: var(--st-text);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-hover-border-color: var(--st-text);
  --bs-btn-hover-color: var(--st-text);
  --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-active-border-color: var(--st-text);
  --bs-btn-active-color: var(--st-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--gt-disabled-border);
  --bs-btn-disabled-color: var(--gt-disabled-text);
}

.btn-dark {
  --bs-btn-bg: var(--st-surface);
  --bs-btn-border-color: var(--st-border-strong);
  --bs-btn-color: var(--st-text);
  --bs-btn-hover-bg: var(--st-surface-alt);
  --bs-btn-hover-border-color: var(--st-input-border);
  --bs-btn-hover-color: var(--st-text);
  --bs-btn-active-bg: var(--st-surface-alt);
  --bs-btn-active-border-color: var(--st-input-border);
  --bs-btn-active-color: var(--st-text);
}

.btn-ghost,
.btn-link {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--st-accent);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--st-accent-hover);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--st-accent-hover);
  padding-left: 0;
  padding-right: 0;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ==========================================================================
   Forms — dark inputs on the surface tone, accent focus ring. Covers plain
   markup and Gravity Forms (the contact block renders a GF shortcode).
   ========================================================================== */
label,
.form-label,
.gform_wrapper .gfield_label {
  color: var(--st-text-soft);
  display: block;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: none;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
input[type=password],
input[type=search],
select,
textarea,
.form-control,
.gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.gform_wrapper select,
.gform_wrapper textarea {
  background: var(--st-surface);
  border: 1px solid var(--st-input-border);
  border-radius: 6px;
  color: var(--st-text);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  min-height: 48px;
  padding: 0 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]):focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color: var(--st-accent);
  box-shadow: 0 0 0 3px rgba(105, 190, 233, 0.25);
  outline: none;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
select::placeholder,
textarea::placeholder,
.form-control::placeholder,
.gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio])::placeholder,
.gform_wrapper select::placeholder,
.gform_wrapper textarea::placeholder {
  color: var(--st-text-dim);
}

textarea,
.gform_wrapper textarea {
  min-height: 140px;
  padding: 12px 14px;
  resize: vertical;
}

select,
.gform_wrapper select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--st-text) 50%), linear-gradient(135deg, var(--st-text) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding-right: 40px;
}

input[type=checkbox],
input[type=radio] {
  accent-color: var(--st-accent);
}

button[type=submit],
input[type=submit],
.gform_wrapper .gform_button {
  background: var(--st-accent);
  border: 1px solid var(--st-accent);
  border-radius: 6px;
  color: var(--st-on-accent);
  cursor: pointer;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  min-height: 54px;
  padding: 0 28px;
  transition: all 0.15s ease;
  width: 100%;
}
button[type=submit]:hover,
input[type=submit]:hover,
.gform_wrapper .gform_button:hover {
  background: var(--st-accent-hover);
  border-color: var(--st-accent-hover);
  color: var(--st-on-accent);
}

.gform_wrapper .gform_footer {
  margin: 0;
  padding: 0;
}
.gform_wrapper .gfield_required {
  color: var(--st-accent);
}
.gform_wrapper .gfield_description,
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message {
  color: var(--st-text-muted);
  font-size: 14px;
}
.gform_wrapper .gfield_error [aria-invalid=true] {
  border-color: #f08a8a;
}

/* ==========================================================================
   Typography — Michroma display, Manrope body. Heading sizes are fluid
   clamps straight from the design; exposed as CSS vars so a block can
   re-scope them (`.hero { --gt-h1-size: … }`).
   ========================================================================== */
:root {
  --gt-h1-size: clamp(34px, 5vw, 64px);
  --gt-h2-size: clamp(26px, 3.2vw, 40px);
  --gt-h3-size: 1.3125rem;
  --gt-h4-size: 1.1875rem;
  --gt-h5-size: 1.0625rem;
  --gt-h6-size: 0.75rem;
}

h1, h2 {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--heading-color, #ffffff);
  text-wrap: balance;
  margin: 0 0 1rem;
}

h1 {
  font-size: var(--gt-h1-size);
  line-height: 1.15;
}

h2 {
  font-size: var(--gt-h2-size);
  line-height: 1.2;
}

.icon-box .card-title,
.contact-cta strong,
.card-title,
h3.card-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: var(--gt-h3-size);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--heading-color);
  margin: 0;
}

h3, h4, h5 {
  color: var(--heading-color, #ffffff);
  margin: 0 0 1rem;
}

h3 {
  font-size: var(--gt-h3-size);
  line-height: 1.3;
}

h4 {
  font-size: var(--gt-h4-size);
  line-height: 1.35;
}

h5 {
  font-size: var(--gt-h5-size);
  line-height: 1.4;
}

h6 {
  font-family: "Michroma", sans-serif;
  font-size: var(--gt-h6-size);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--st-accent);
  margin: 0 0 1rem;
}

p {
  max-width: 62ch;
  color: var(--paragraph-color, #a9b8c6);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--paragraph-color, #a9b8c6);
  max-width: 640px;
}

small, .small {
  font-size: 0.875rem;
  color: var(--st-text-dim);
  line-height: 1.5;
}

strong, b {
  color: var(--st-text);
  font-weight: 700;
}

a {
  color: var(--st-accent);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--st-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

::selection {
  background: var(--st-accent);
  color: var(--st-on-accent);
}

/* ==========================================================================
   Header — sticky, translucent ink with blur, hairline underneath.
   Logo left, primary nav + accent "Get a quote" pill (secondary menu) right.
   ========================================================================== */
.top-bar {
  background: var(--st-surface-alt);
  border-bottom: 1px solid var(--st-border);
  padding: 8px 0;
}
.top-bar .top-bar-left,
.top-bar .top-bar-right {
  color: var(--st-text-muted);
  font-size: 13px;
}

.banner {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(11, 18, 25, 0.92);
  border-bottom: 1px solid var(--st-border);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 150;
}
.banner.affix {
  background: rgba(11, 18, 25, 0.96);
}
.banner .container {
  align-items: center;
  display: flex;
  gap: 16px 32px;
  max-width: 1240px;
}
.banner .brand {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 10px;
  line-height: 0;
  text-decoration: none;
}
.banner .brand img,
.banner .brand svg {
  display: block;
  height: auto;
  max-height: 40px;
  max-width: min(300px, 62vw) !important;
  width: auto;
}
.banner .brand .brand-text {
  color: var(--st-text);
  font-family: "Michroma", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.banner .navbar-collapse {
  margin-left: auto;
}
.banner .nav-primary {
  margin-left: auto;
}
.banner .nav-primary .nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.banner .nav-primary .nav li {
  margin: 0;
  padding: 0;
}
.banner .nav-primary .nav a:not(.btn) {
  color: var(--st-text-soft);
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 0;
  text-decoration: none;
  transition: color 0.15s;
}
.banner .nav-primary .nav a:not(.btn):hover, .banner .nav-primary .nav a:not(.btn):focus-visible {
  color: var(--st-text);
}
.banner .nav-primary .nav .current-menu-item > a,
.banner .nav-primary .nav .current-menu-ancestor > a,
.banner .nav-primary .nav .current_page_item > a,
.banner .nav-primary .nav .current_page_ancestor > a {
  color: var(--st-text);
}
.banner .banner-cta {
  display: flex;
  gap: 10px;
}
.banner .banner-cta ul {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.banner .banner-cta li,
.banner .banner-cta .btn {
  border: 0;
  margin: 0;
  padding: 0;
}
.banner .banner-cta a {
  align-items: center;
  background: var(--st-accent);
  border-radius: 6px;
  color: var(--st-on-accent);
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  padding: 11px 20px;
  text-decoration: none;
  transition: background 0.15s;
}
.banner .banner-cta a:hover, .banner .banner-cta a:focus-visible {
  background: var(--st-accent-hover);
  color: var(--st-on-accent);
  text-decoration: none;
}
.banner .navbar-toggler {
  border: 1px solid var(--st-border-strong);
  border-radius: 6px;
  color: var(--st-text);
  font-size: 20px;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
}
.banner .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(105, 190, 233, 0.35);
}
@media (max-width: 767.98px) {
  .banner .banner-cta {
    display: none;
  }
}

.offcanvas {
  background: var(--st-surface-alt);
  border-left: 1px solid var(--st-border);
  color: var(--st-text);
}
.offcanvas .btn-close {
  filter: invert(1);
}
.offcanvas .nav {
  gap: 4px;
}
.offcanvas .nav a:not(.btn) {
  color: var(--st-text-soft);
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
}
.offcanvas .nav a:not(.btn):hover {
  color: var(--st-text);
}
.offcanvas .banner-cta {
  display: block;
  margin-top: 24px;
}
.offcanvas .banner-cta ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offcanvas .banner-cta a {
  background: var(--st-accent);
  border-radius: 6px;
  color: var(--st-on-accent);
  display: inline-flex;
  font-weight: 700;
  min-height: 48px;
  align-items: center;
  padding: 0 24px;
  text-decoration: none;
}

.card, .content-card {
  background: var(--gt-light);
  border: 1px solid rgba(20, 24, 33, 0.1);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card .card-img, .card .card-img-top, .content-card .card-img, .content-card .card-img-top {
  position: relative;
  aspect-ratio: 5/3;
  background: var(--gt-paper-edge);
  overflow: hidden;
}
.card .card-tag, .content-card .card-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 8px;
  font-family: "Michroma", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gt-light);
  background: var(--gt-primary);
}
.card .card-tag.tag-signal, .content-card .card-tag.tag-signal {
  background: var(--gt-secondary);
}
.card .card-tag.tag-ink, .content-card .card-tag.tag-ink {
  background: var(--gt-dark);
}
.card .card-body, .content-card .card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.card .card-title, .content-card .card-title {
  font-family: "Michroma", sans-serif;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--gt-dark);
  text-wrap: balance;
}
.card .card-text, .content-card .card-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(20, 24, 33, 0.7);
  margin: 0;
  flex: 1;
}
.card .card-foot, .content-card .card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--gt-border);
  margin-top: 4px;
}
.card .card-foot .card-read, .content-card .card-foot .card-read {
  color: var(--gt-secondary);
  font-family: "Michroma", sans-serif;
  font-size: 12px;
}

/* ==========================================================================
   Footer — hairline, logo left, copyright right.
   ========================================================================== */
.content-info {
  border-top: 1px solid var(--st-border);
  padding: 48px 0;
}
.content-info .footer-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.content-info .footer-brand {
  display: block;
  line-height: 0;
}
.content-info .footer-brand img,
.content-info .footer-brand svg {
  display: block;
  height: 34px;
  width: auto;
}
.content-info .footer-copy {
  color: var(--st-text-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 6px 10px;
}
.content-info .footer-copy p {
  color: inherit;
  font-size: inherit;
  margin: 0;
}
.content-info .footer-copy a {
  color: var(--st-text-soft);
}
.content-info .footer-copy a:hover {
  color: var(--st-accent);
}
.content-info .footer-copy .np-credit {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.06em;
}
.content-info .footer-copy .np-credit:hover {
  color: #fff;
  text-decoration: none;
}
.content-info .footer-copy .np-credit span {
  -webkit-background-clip: text;
  background: linear-gradient(126deg, #fe0997 0%, #fe704e 100%);
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Hero — text column + optional 4:5 photo (page featured image) with an
   accent badge (site tagline). Faint bolt outline in the top-right.
   ========================================================================== */
.hero-block {
  border-bottom: 1px solid var(--st-border);
  overflow: hidden;
  position: relative;
}
.hero-block .hero-bolt {
  height: auto;
  opacity: 0.12;
  pointer-events: none;
  position: absolute;
  right: -40px;
  top: 40px;
  width: 460px;
}
@media (max-width: 767.98px) {
  .hero-block .hero-bolt {
    width: 260px;
  }
}
.hero-block .hero-container {
  position: relative;
}
.hero-block .row {
  align-items: center;
  gap: 40px 0;
}
.hero-block .main-content.text-left, .hero-block .main-content.text-right {
  flex: 0 0 auto;
  margin-left: 0;
  max-width: 100%;
}
.hero-block .hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.32em;
  margin-bottom: 28px;
}
.hero-block h1 {
  margin-bottom: 28px;
  max-width: 920px;
  font-size: 42px;
}
.hero-block h1 span,
.hero-block h1 em,
.hero-block h1 strong {
  color: var(--st-accent);
  font-style: normal;
  font-weight: inherit;
}
.hero-block p {
  color: var(--st-text-muted);
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 640px;
}
@media (max-width: 575.98px) {
  .hero-block p {
    font-size: 17px;
    margin-bottom: 28px;
  }
}
.hero-block .button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}
.hero-block .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.hero-block .hero-meta .hero-meta-item {
  align-items: center;
  color: var(--st-text-soft);
  display: flex;
  flex-direction: row;
  font-size: 15px;
  font-weight: 600;
  gap: 10px;
}
.hero-block .hero-meta .hero-meta-item::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369BEE9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  content: "";
  flex: none;
  height: 18px;
  width: 18px;
}
.hero-block .hero-meta .hero-meta-label {
  color: var(--st-text-muted);
}
.hero-block .hero-meta .hero-meta-label:empty {
  display: none;
}
.hero-block .hero-meta .hero-meta-value {
  color: inherit;
}
.hero-block .hero-media {
  position: relative;
}
.hero-block .hero-media img {
  aspect-ratio: 4/5;
  border: 1px solid var(--st-border-strong);
  border-radius: 14px;
  display: block;
  height: auto;
  object-fit: cover;
  object-position: 55% center;
  width: 100%;
}
.hero-block .hero-badge {
  align-items: center;
  background: var(--st-accent);
  border-radius: 10px;
  bottom: 32px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  color: var(--st-on-accent);
  display: flex;
  font-size: 15px;
  font-weight: 700;
  gap: 12px;
  left: -20px;
  padding: 16px 20px;
  position: absolute;
}
.hero-block .hero-badge svg {
  flex: none;
  height: 22px;
  width: 22px;
}
@media (max-width: 767.98px) {
  .hero-block .hero-badge {
    bottom: 16px;
    left: 16px;
  }
}

/* ==========================================================================
   Icon block → service cards (and the "Recent work" grid).
   Card: surface tone, hairline, 10px radius, 32px padding. A raster "icon"
   becomes the full-bleed photo at the top; an SVG icon sits in a 52px
   accent-wash tile. Icon-position-left renders the contracts-style row.
   ========================================================================== */
.icon-block .button-container {
  margin-top: 32px;
}
.icon-block .icon-box-container .row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  margin: 0;
}
.icon-block .icon-box-container .row > .col {
  flex: none;
  max-width: none;
  padding: 0;
  width: auto;
}
.icon-block .icon-box-container.cols-desktop-four .row {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.icon-block .icon-box-container.cols-desktop-two .row {
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}
.icon-block .icon-box.card {
  background: var(--st-surface);
  border: 1px solid var(--st-border-strong);
  border-radius: 10px;
  color: var(--st-text);
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  overflow: hidden;
  padding: 32px;
}
.icon-block .icon-box.card a {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
}
.icon-block .icon-box.card .icon {
  margin: 0;
}
.icon-block .icon-box.card .icon img {
  aspect-ratio: 16/10;
  display: block;
  height: auto;
  margin: -32px -32px 10px;
  max-width: none;
  object-fit: cover;
  width: calc(100% + 64px);
}
.icon-block .icon-box.card .icon:has(svg) {
  align-items: center;
  background: var(--st-accent-wash);
  border-radius: 10px;
  display: flex;
  height: 52px;
  justify-content: center;
  width: 52px;
}
.icon-block .icon-box.card .icon:has(svg) svg {
  height: 26px;
  width: 26px;
}
.icon-block .icon-box.card .icon:has(svg) svg path,
.icon-block .icon-box.card .icon:has(svg) svg g {
  stroke: var(--st-accent);
}
.icon-block .icon-box.card .icon-box-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.icon-block .icon-box.card .card-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: var(--gt-h3-size);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
}
.icon-block .icon-box.card p {
  color: var(--st-text-muted);
  font-size: 16px;
  margin: 0;
  max-width: none;
}
.icon-block .icon-box.card .btn {
  align-self: flex-start;
  margin-top: 6px;
}
.icon-block .icon-box.card.icon-position-left, .icon-block .icon-box.card.icon-position-right {
  align-items: flex-start;
  flex-direction: row;
  gap: 18px;
  padding: 22px 24px;
}
.icon-block .icon-box.card.icon-position-left .icon, .icon-block .icon-box.card.icon-position-right .icon {
  flex: none;
  margin: 3px 0 0;
}
.icon-block .icon-box.card.icon-position-left .icon img, .icon-block .icon-box.card.icon-position-right .icon img {
  aspect-ratio: auto;
  height: 22px;
  margin: 0;
  width: auto;
}
.icon-block .icon-box.card.icon-position-left .icon:has(svg), .icon-block .icon-box.card.icon-position-right .icon:has(svg) {
  background: none;
  height: 22px;
  width: 22px;
}
.icon-block .icon-box.card.icon-position-left .icon:has(svg) svg, .icon-block .icon-box.card.icon-position-right .icon:has(svg) svg {
  height: 22px;
  width: 22px;
}
.icon-block .icon-box.card.icon-position-left .icon-box-body, .icon-block .icon-box.card.icon-position-right .icon-box-body {
  gap: 4px;
}
.icon-block .icon-box.card.icon-position-left .card-title, .icon-block .icon-box.card.icon-position-right .card-title {
  font-size: 17px;
}
.icon-block .icon-box.card.icon-position-left p, .icon-block .icon-box.card.icon-position-right p {
  font-size: 15px;
}
.icon-block .icon-box.card.icon-position-right {
  flex-direction: row-reverse;
}
.icon-block .icon-box-container.is-grouped-row .row {
  background: var(--st-surface);
  border: 1px solid var(--st-border-strong);
  border-radius: 10px;
  gap: 0;
  overflow: hidden;
}
.icon-block .icon-box-container.is-grouped-row .row .icon-box.card {
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--st-border-strong);
}
.icon-block .icon-box-container.is-grouped-row .row > .col:last-child .icon-box.card {
  border-right: 0;
}

.icon-block.steps .icon-box-container .row {
  counter-reset: step;
}
.icon-block.steps .icon-box.card {
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 2px solid var(--st-accent);
  counter-increment: step;
  gap: 10px;
  padding: 24px 0 0;
}
.icon-block.steps .icon-box.card::before {
  color: var(--st-accent);
  content: counter(step, decimal-leading-zero);
  font-family: "Michroma", sans-serif;
  font-size: 28px;
  line-height: 1;
}
.icon-block.steps .icon-box.card .card-title {
  font-size: 19px;
}

/* ==========================================================================
   Contact block — details list (phone / email / area) with accent-wash icon
   tiles, and the enquiry form in a bordered card.
   ========================================================================== */
.contact-block .contact-container > .row {
  align-items: flex-start;
  gap: 40px 0;
}
.contact-block .contact-intro {
  margin-bottom: 32px;
}
.contact-block .contact-intro p {
  margin: 0;
}
.contact-block .contact-cta-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-block .contact-cta {
  align-items: center;
  display: flex;
  font-size: 19px;
  font-weight: 600;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.contact-block .contact-cta a {
  color: var(--st-text);
  text-decoration: none;
}
.contact-block .contact-cta a:hover {
  color: var(--st-accent);
}
.contact-block .contact-cta strong {
  color: var(--st-text-muted);
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.contact-block .contact-cta-icon {
  align-items: center;
  background: var(--st-accent-wash);
  border-radius: 8px;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.contact-block .contact-cta-icon svg,
.contact-block .contact-cta-icon img {
  height: 20px;
  margin: 0;
  width: 20px;
}
.contact-block .contact-cta-icon svg {
  stroke: var(--st-accent);
}
.contact-block .contact-cta-icon svg path,
.contact-block .contact-cta-icon svg rect,
.contact-block .contact-cta-icon svg circle,
.contact-block .contact-cta-icon svg g {
  fill: none;
}
.contact-block .contact-form {
  background: var(--st-bg);
  border: 1px solid var(--st-border-strong);
  border-radius: 12px;
  padding: 36px;
}
@media (max-width: 575.98px) {
  .contact-block .contact-form {
    padding: 24px;
  }
}
.contact-block .gform_wrapper {
  margin: 0;
}
.contact-block .gform_wrapper .gform_fields {
  gap: 20px 20px;
}
.contact-block .gform_wrapper .gform_heading {
  margin-bottom: 20px;
}

.faq-container .accordion .card {
  margin-bottom: var(--block-pad);
}
.faq-container .accordion .card .card-header {
  border-bottom: 0;
}
.faq-container .accordion .card .card-header a {
  color: var(--gt-dark);
}
.faq-container .accordion .card .card-body p {
  max-width: 100%;
}

/* ==========================================================================
   Carousel block — matches `.gt-carousel` from the Claude Design demo.
   The parent already wires the Swiper structure (.swiper / .swiper-slide /
   .swiper-pagination etc.). This partial is purely the design skin:
   gradient overlay on slides, bottom-anchored caption typography,
   restyled arrow buttons, and pill-style pagination.
   ========================================================================== */
.carousel-block .image-mode-image-background .carousel-slide {
  background-position: center center;
  background-size: cover;
  height: 100%;
}
.carousel-block .image-mode-image-background .carousel-slide .container {
  height: 100%;
}
.carousel-block .image-mode-image-background .slide-image {
  display: none;
}
.carousel-block .swiper-slide {
  position: relative;
}
.carousel-block .swiper-slide::after {
  background: linear-gradient(180deg, rgba(20, 24, 33, 0.05) 0%, rgba(20, 24, 33, 0.55) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.carousel-block .swiper-caption {
  bottom: 48px;
  color: var(--gt-paper);
  left: 100px;
  max-width: 44ch;
  position: absolute;
  right: 100px;
  z-index: 2;
}
.carousel-block .swiper-caption h2 {
  color: var(--gt-paper);
  font-family: "Michroma", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 14px;
}
.carousel-block .swiper-caption p {
  color: rgba(250, 249, 246, 0.85);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: none;
}
.carousel-block .swiper-caption .swiper-caption-eyebrow {
  color: rgba(250, 249, 246, 0.7);
  display: block;
  font-family: "Michroma", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.carousel-block .swiper-caption .btn {
  font-size: 0.875rem;
  padding: 0.6875rem 1.125rem;
}
@media (max-width: 575.98px) {
  .carousel-block .swiper-caption {
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
  .carousel-block .swiper-caption h2 {
    font-size: 1.5rem;
  }
}
.carousel-block .swiper-button-prev,
.carousel-block .swiper-button-next {
  align-items: center;
  background: rgba(20, 24, 33, 0.6);
  border: none;
  border-radius: 2px;
  color: var(--gt-paper);
  display: flex;
  height: 44px;
  justify-content: center;
  margin-top: -22px;
  width: 44px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.15s;
}
.carousel-block .swiper-button-prev::after,
.carousel-block .swiper-button-next::after {
  font-family: "Michroma", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.carousel-block .swiper-button-prev:hover,
.carousel-block .swiper-button-next:hover {
  background: rgba(20, 24, 33, 0.8);
}
.carousel-block .swiper-carousel.hover-left .swiper-button-prev,
.carousel-block .swiper-carousel.hover-right .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}
.carousel-block .swiper-button-prev:focus-visible,
.carousel-block .swiper-button-next:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .carousel-block .swiper-button-prev,
  .carousel-block .swiper-button-next {
    opacity: 1;
    pointer-events: auto;
  }
}
.carousel-block .swiper-button-prev {
  left: 16px;
}
.carousel-block .swiper-button-prev::after {
  content: "←";
}
.carousel-block .swiper-button-next {
  right: 16px;
}
.carousel-block .swiper-button-next::after {
  content: "→";
}
.carousel-block .swiper-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
  position: static;
}
.carousel-block .swiper-pagination-bullet {
  background: rgba(20, 24, 33, 0.2);
  border-radius: 2px;
  height: 8px;
  margin: 0 !important;
  opacity: 1;
  transition: width 0.2s, background 0.2s;
  width: 8px;
}
.carousel-block .swiper-pagination-bullet-active {
  background: var(--gt-primary);
  width: 28px;
}

.block-theme-dark .carousel-block .swiper-pagination-bullet,
.carousel-block.block-theme-dark .swiper-pagination-bullet {
  background: rgba(250, 249, 246, 0.3);
}

/* ==========================================================================
   Logo block — Swiper navigation buttons.
   Visual treatment mirrors `_carousel-block.scss` (44×44 dark-overlay
   square, mono ASCII arrows). The reveal mechanism is simpler though:
   hovering anywhere on the swiper fades both buttons in together.
   The carousel's per-side hover-zone JS is intentionally NOT mirrored
   — logo strips show multiple slides at once, so there's no direction
   to hint at.
   ========================================================================== */
.logo-block .logo-swiper {
  position: relative;
}
.logo-block .swiper-button-prev,
.logo-block .swiper-button-next {
  align-items: center;
  background: rgba(20, 24, 33, 0.6);
  border: none;
  border-radius: 2px;
  color: var(--gt-paper);
  display: flex;
  height: 44px;
  justify-content: center;
  margin-top: -22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.15s;
  width: 44px;
}
.logo-block .swiper-button-prev::after,
.logo-block .swiper-button-next::after {
  font-family: "Michroma", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.logo-block .swiper-button-prev:hover,
.logo-block .swiper-button-next:hover {
  background: rgba(20, 24, 33, 0.8);
}
.logo-block .logo-swiper:hover .swiper-button-prev,
.logo-block .logo-swiper:hover .swiper-button-next,
.logo-block .swiper-button-prev:focus-visible,
.logo-block .swiper-button-next:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .logo-block .swiper-button-prev,
  .logo-block .swiper-button-next {
    opacity: 1;
    pointer-events: auto;
  }
}
.logo-block .swiper-button-prev {
  left: -16px;
}
.logo-block .swiper-button-prev::after {
  content: "←";
}
.logo-block .swiper-button-next {
  right: -16px;
}
.logo-block .swiper-button-next::after {
  content: "→";
}

/* ==========================================================================
   Message block — child overrides.
   ========================================================================== */
.message-box {
  padding: var(--block-pad);
  padding-bottom: 0;
}
.message-box .card-body {
  padding-left: 0;
  padding-right: 0;
}
.message-box .card-body .card-subtitle {
  align-items: center;
  color: var(--gt-text-muted);
  display: inline-flex;
  font-family: "Michroma", sans-serif;
  font-size: 12px;
  font-weight: 400;
  gap: 6px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.message-box .card-body p {
  font-size: 14px;
}
.message-box .card-body .btn {
  all: revert;
  color: var(--gt-primary);
  font-size: 12px;
  font-family: "Michroma", sans-serif;
}
.message-box:hover .btn {
  color: var(--gt-primary-deep);
}

.page-header {
  padding: 40px 0;
}

/*# sourceMappingURL=main.css.map */